docs: convert the display section of component docs to MDX (#7436)

Co-authored-by: Cee Chen <[email protected]>

website/docs/02_components/display/aspect_ratio/_category_.yml

@@ -0,0 +1,3 @@
+link:
+  type: doc
+  id: component_aspect_ratio_overview

website/docs/02_components/display/aspect_ratio/overview.mdx

@@ -0,0 +1,22 @@
+---
+id: component_aspect_ratio_overview
+title: Aspect ratio
+export_name: EuiAspectRatio
+slug: /components/aspect-ratio
+---
+
+:::warning
+
+In some cases, aspect ratio sizing may not be supported by the embed.
+This component will only work with ones that do, like YouTube.
+
+:::
+
+**EuiAspectRatio** provides a way to responsively resize a single block level child element to a specified ratio.
+This is useful for things like YouTube iframes or other embeds that initially have a fixed size.
+If you need something similar for images, take a look at CSS's
+[object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
+
+<!-- TODO: Add 16x9 example -->
+
+<!-- TODO: Add 4x3 example -->

website/docs/02_components/display/avatar/_category_.yml

@@ -0,0 +1,3 @@
+link:
+  type: doc
+  id: component_avatar_overview

website/docs/02_components/display/avatar/overview.mdx

@@ -0,0 +1,48 @@
+---
+id: component_avatar_overview
+title: Avatar
+export_name: EuiAvatar
+slug: /components/avatar
+---
+
+The **EuiAvatar** component typically creates a user icon.
+It will accept `name` (required) and `image` props and will configure the display and accessibility as needed.
+By default, the background colors come from the set of colors used for visualizations.
+Otherwise, you can pass a hex value to the `color` prop.
+
+<!-- TODO: Add basic EuiAvatar example -->
+
+## Initials
+
+The initials displayed in the avatar try to be smart based on the name prop.
+If the name contains spaces, it will display the first character of each word, **always maxing out at 2 characters**.
+You can customize this by passing a combination of `initialsLength` and/or `initials` props.
+However, the avatar will still always max out at 2 characters.
+
+<!-- TODO: Add single, multi-word and custom example -->
+
+## Types
+
+The avatar `type`, which primarily defines the shape, is keyworded and can be `"user"` (default)
+or `"space"` (for workspaces).
+
+<!-- TODO: Add spaces example -->
+
+## Icons
+
+Icons can also be displayed instead of initials or images. When simply passing an `iconType`,
+it will both size and color appropriately based on the other **EuiAvatar** props.
+To customize these specifically, pass `iconSize` and `iconColor`.
+
+If your icon has multiples or custom colors like a logo, you can keep the default `iconColor` by passing `null`.
+Otherwise, it will get the appropriate contrast acceptable variant.
+Just ensure that you also are providing an accessible background color to match that of the icon's color.
+
+<!-- TODO: Add icons example -->
+
+## Disabled
+
+While **EuiAvatar** doesn't accept any interactive behaviors itself, you can create a visually presented disabled
+avatar by adding `isDisabled` when placed within a disabled element.
+
+<!-- TODO: Add disabled state example -->

website/docs/02_components/display/badge/_category_.yml

@@ -0,0 +1,3 @@
+link:
+  type: doc
+  id: component_badge_overview

website/docs/02_components/display/badge/overview.mdx

@@ -0,0 +1,74 @@
+---
+id: component_badge_overview
+title: Badge
+export_name:
+  - EuiBadge
+  - EuiBadgeGroup
+  - EuiBetaBadge
+  - EuiNotificationBadge
+slug: /components/badge
+---
+
+**EuiBadges** are used to focus on important bits of information. Although they will automatically space themselves
+if you use them in a repetitive fashion it is good form to wrap them using a **EuiBadgeGroup** so that they will
+wrap when width is constrained (as seen below).
+
+<!-- TODO: Add basic EuiBadge example -->
+
+## Badge with Icon
+
+Badges can use icons on the left and right (default) sides.
+
+<!-- TODO: Add icon example -->
+
+## Badge with onClick events
+
+Badges can have `onClick` events applied to the badge itself or the icon within the badge. The latter option is useful for when you might use badges in other components (like a tag system with autocomplete where you need close events).
+
+:::note
+
+`onClick` with `iconOnClick`
+
+When providing both these click handlers, **EuiBadge** must alter the contents so that it does not contain nested button tags. Please make note that if you provide props other than those explicit to **EuiBadge**, they will always be applied to the main `button` tag which may be inside of the outer most tag.
+
+:::
+
+<!-- TODO: Add onClick example -->
+
+## Badge for health status
+
+Badges can work as health status indicators in places where there are a lot of repeated statuses, e.g. in tables.
+
+<!-- TODO: Add health status example -->
+
+## Badge with href
+
+Badges can also be made to render anchor tags by passing an `href`.
+
+<!-- TODO: Add href example -->
+
+## Badge groups and truncation
+
+Badges, like buttons, will only every be a single line of text. This means text will not wrap, but be truncated if the badge's width reaches that of its parent's.
+
+For this reason, badges also auto-apply the inner text of the badge to the `title` attribute of the element to provide default browser tooltips with the full badge text.
+
+To ensure proper wrapping, truncation and spacing of multiple badges, it is advisable to wrap them in a **EuiBadgeGroup**.
+
+<!-- TODO: Add truncation example -->
+
+## Beta badge type
+
+The **EuiBetaBadge** was created specifically to call out modules that are not in GA. Generally the labels used are "Beta" or "Lab". They require an extra `tooltipContent` to describe the purpose of the badge. You can pass an optional `title` prop to populate the tooltip title or html title attribute but by default it will use the `label`.
+
+If you pass in an `iconType`, only the icon will be used in the badge itself and the label will be applied as the title. Only use an icon when attaching the beta badge to small components. Beta badges can also be made clickable by passing `href` or `onClick` as needed.
+
+They can also be used in conjunction with [**EuiCards**](#/display/card) and [**EuiKeyPadMenuItems**](#/navigation/key-pad-menu).
+
+<!-- TODO: Add beta badge example -->
+
+## Notification badge type
+
+Used to showcase the number of notifications, alerts, or hidden selections. This badge type is commonly used in the [**EuiHeader**](#/layout/header) and [**EuiFilterButton**](#/forms/filter-group) components.
+
+<!-- TODO: Add notification badge example -->

website/docs/02_components/display/callout/overview.mdx

@@ -1,6 +1,54 @@
 ---
-title: Callout
 id: component_callout_overview
+title: Callout
 export_name: EuiCallOut
 slug: /components/callout
 ---
+
+**EuiCallOut** contains a message directly related to content on the page.
+This includes general information, success, warning, and error messages.
+
+**Keep these guidelines in mind:**
+
+* Minimize the number of callouts per page.
+* Stack callouts in the order in which they require users' attention: error, warning, info, and then success.
+* Offer only one action per callout and ensure it's an action users can perform quickly.
+* If the callout has a permanent spot in the UI, but needs to be less obstructive,
+  set the `size` property to `s` (small).
+* Use an `iconType` if it adds context.
+
+## Info
+
+Use **EuiCallOut** to communicate general information to the user.
+
+<!-- TODO: Add info example -->
+
+## Success
+
+Use this callout to notify the user of an action that successfully completed.
+Use success callouts sparingly—callouts are typically used for things that are broken rather than things that succeed.
+
+<!-- TODO: Add success example -->
+
+## Warning
+
+Use this callout to warn the user against decisions they might regret.
+You should receive a warning message when the program detects that **something is not behaving right,
+but it didn't cause any termination**.
+
+<!-- TODO: Add warning example -->
+
+## Danger
+
+Use this callout to let the user know that something went wrong. For example if you want to communicate an error.
+You should receive an error message when the issue is **terminal, this doesn't always mean that the operation
+stops completely, but the task is not complete**.
+
+<!-- TODO: Add danger example -->
+
+## Dismissible callouts
+
+To render a cross icon in the top right hand corner, pass an `onDismiss` callback that handles
+conditionally rendering your callout.
+
+<!-- TODO: Add dismissable example -->

website/docs/02_components/display/card/_category_.yml

@@ -0,0 +1,3 @@
+link:
+  type: doc
+  id: component_card_overview

website/docs/02_components/display/card/overview.mdx

@@ -0,0 +1,118 @@
+---
+id: component_card_overview
+title: Card
+export_name:
+  - EuiCard
+  - EuiCheckableCard
+slug: /components/card
+---
+
+**EuiCard** is a content-oriented component built on top of [**EuiPanel**](#/layout/panel).
+Be sure to check out the [guidelines for properly nesting panels](#/layout/panel/guidelines).
+
+## Basic card
+
+At its core an **EuiCard** should contain a `title`,`description`, and an `icon`.
+You can make the whole card clickable by giving it an `onClick` handler or `href`.
+
+For accessibility and heading hierarchy, a card's title element is a `span` by default.
+However, this can be changed via the `titleElement` prop without altering the visual size.
+
+<!-- TODO: Add basic example -->
+
+## Layout
+
+Most of the time, cards should read from top to bottom (vertical). However, in some cases, you may want the icon
+to be to the left of the content. In this case, add the prop `layout="horizontal"`.
+Works best when the icon is size `xl`.
+
+:::danger
+
+Horizontal layouts **do not** work with images, footers, or `textAlign`. Therefore, these properties will be ignored.
+
+:::
+
+<!-- TODO: Add layout example -->
+
+## Images
+
+Images can be added in place of, or in conjunction with, icons. Just pass an url into the `image` prop,
+and it will expand to the edges of the card.
+
+:::note
+
+Make sure that all images are the **same proportions** when used in a singular row.
+
+Also, when passing an **element** to the `image` prop that consists solely of inline elements
+or does not contain an`<img />` element, each element will require a style of `width: 100%`.
+
+:::
+
+<!-- TODO: Add images example -->
+
+## Footer
+
+Footers can contain any number of elements and will always align to the bottom of the card.
+However, if you supply a footer containing a **EuiButton** you **must not** also give it an `onClick`.
+
+:::warning
+
+When using footers to display generic "Go" buttons, you must provide an `aria-label` to the button itself
+that refers back to the title of the card.
+
+:::
+
+<!-- TODO: Add footer example -->
+
+## Beta badge
+
+If the card links to or references a module that is not GA (beta, lab, etc.), you can add a `betaBadgeProps.label`
+and `betaBadgeProps.tooltipContent` to the card, and it will properly create and position an **EuiBetaBadge**.
+If you want to change the title of the tooltip, supply a `betaBadgeProps.title` prop.
+
+<!-- TODO: Add beta badge example -->
+
+## Selectable
+
+When you have a list of cards that can be selected but **do not navigate anywhere**, you can add the `selectable` prop.
+The prop is an object that extends **EuiButtonEmpty**. It will apply the button as seen below,
+and passing `selectable.isSelected=true` will alter the styles of the card and button to look selected.
+
+:::warning
+
+When providing an extra link to more details or such, be sure to stop event propagation from also selecting the card.
+
+:::
+
+<!-- TODO: Add selectable example -->
+
+## Checkable
+
+**EuiCheckableCard** wraps an **EuiRadio** or **EuiCheckbox** with a more-prominent panel,
+allowing for children to be displayed.
+
+:::warning
+
+When used as a radio group, you must provide a `fieldset` with a `legend` for accessibility.
+
+:::
+
+<!-- TODO: Add checkable example -->
+
+## Custom children
+
+In the event that you need **more than** just paragraph text for the `description`, you can supplement with anything
+you need as the `children` of the component. You can also completely replace the description with custom children,
+but **EuiCard** at least one of these.
+
+<!-- TODO: Add custom children example -->
+
+## Plain and other colors
+
+If you need a card with no borders or shadows pass `display="plain"`. This is a good option to avoid nested panels.
+Adding an interaction to the card will provide the clickable styling on hover. The `display` prop also accepts all
+other **EuiPanel** colors like `'transparent'`.
+
+For non-interactive cards, reduce or eliminate the padding as needed to suit your layout with the prop `paddingSize`.
+
+<!-- TODO: Add plain example -->

website/docs/02_components/display/comment_list/_category_.yml

@@ -0,0 +1,3 @@
+link:
+  type: doc
+  id: component_comment_list_overview