Add admonition feature

[julieg18]

Basically a copy of dvc.org#3371

Code Example:

<admon type="warn">

text text text

</admon>

Design:

Type options:

Required type prop

• info (default emoji is ℹ️)
• tip (default emoji is 💡)
• warn (default emoji is ⚠️)

Icon options:

Optional icon prop.

tip - 💡
info - ℹ️
warn - ⚠️
fire - 🔥
exclamation - ❗
beetle - 🐞

[jorgeorpinel]

Icon options:
...
exclamation - ❗

Question @iterative/websites : why are there so many icons and which style does each one use? E.g. looks like "exclamation" is type "warn" but with another icon. A bit confusing (minor)

[julieg18]

Question @iterative/websites : why are there so many icons and which style does each one use? E.g. looks like "exclamation" is type "warn" but with another icon. A bit confusing (minor)

Essentially there are three type that come with their own color:
info - purple
tip -blue
warn - orange

While these come with default emojis, you can update any type to use a different icon if you'd like by using the icon prop. We originally just had the three emojis, but it was requested that we have extra icon options.

[jorgeorpinel]

Got it. The icon prop info. is what was missing. TBH so far we're not using that feature much. It's unclear to me why we would need alternative icons and those specifically. That said it doesn't hurt to keep it either.

[jorgeorpinel]

No wait... In this PR we used type="exclamation" and it rendered correctly (as a type warn with ! icon). How does that work?

[julieg18]

No wait... In this PR we used type="exclamation" and it rendered correctly (as a type warn with ! icon). How does that work?

It actually didn't render as warn! warn is orange, not purple. That's the info type, aka purple, because the admonition defaults to info if it doesn't get a type (or the type doesn't exist).

As for how you still got the exclamation, even though the icon prop wasn't used. If you don't give an icon type, the icon defaults to type. Aka

<admon type='warn'>
  text text text text
</admon>

Because the icon name for `warn` is ⚠️.

We probably don't want that behavior though. I'll open a pr that stops icon from defaulting to type so there is less confusion in the future.

[jorgeorpinel]

I see.

If you don't give an icon type, the icon defaults to type

Ok that's the unexpected part indeed. Thanks!

[casperdcl]

​Not sure extra icons not linked to type are useful. Seems to break theme/convention IMO.