feat(website): add a part of components docs

website/docs/components/_category_.yml

@@ -0,0 +1 @@
+label: Components

website/docs/components/layout/_category_.yml

@@ -0,0 +1,3 @@
+label: Layout
+collapsed: false
+position: 1

website/docs/components/layout/accordion/_category_.yml

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

website/docs/components/layout/accordion/overview.mdx

@@ -0,0 +1,102 @@
+---
+id: component_accordion_overview
+title: Accordion
+export_name: EuiAccordion
+slug: /components/accordion
+---
+
+## Simple and unstyled
+
+**EuiAccordion** has been purposely designed with minimal styles, allowing you to visually enhance it as needed
+(see the accordion form example). The only styling enforced by EUI is the caret icon, which indicates to users
+that the item can be opened.
+
+A `buttonContent` prop defines the content of the clickable area. On click it will expose the children
+and animate based on the height of those children.
+
+For styling needs, classes can be individually applied with `className` (for the entire accordion),
+and `buttonClassName` (for the clickable area).
+
+## Arrow display
+
+The arrow helps indicate the current state of the accordion (open or not) and points to the main triggering
+button text. If you must hide or change the side in which the arrow appears, use `arrowDisplay: 'right'` or `'none'`
+
+## Multiple accordions
+
+Use any number of **EuiAccordion** elements to visually display them as a group.
+
+Due to the previously mentioned bare styles, it is recommended to place an [**EuiSpacer**](#/layout/spacer) between
+accordion items. Padding within each accordion item can be applied via the `paddingSize` prop.
+
+## Extra actions
+
+Use the `extraAction` prop to pass an extra action displayed on the right of any accordion. Usually this is a delete
+or button, but can be anything. Note that this action is separate from the click state that expands the accordion.
+This is needed to make it accessible.
+
+## Opened on initial render
+
+Use the `initialIsOpen` prop to open the accordion when first rendered.
+
+## Controlling toggled state
+
+Typically, the open and closed state of **EuiAccordion** is maintained by the component's internal state.
+Though, you can manually control it with:
+
+*   `forceState`: Accepts either `'open'` or `'closed'`.
+*   `onToggle`: A callback function returning `true` if the accordion is open
+
+## Loading state
+
+Use the `isLoading` prop when not all of the accordion's content is ready yet.
+When using `isLoading`, the content of `extraAction` is replaced with a loading spinner.
+
+Manage the content of the accordion using `isLoadingMessage`. By default, it is set to `false` and the content
+will remain unaltered. Set it to `true` to show a default loading message or pass a node to show
+a custom loading message.
+
+## Disabled state
+
+In some cases you might want to prevent the user from closing the **EuiAccordion**. For example, if a form field
+is displaying an error, opening the accordion and preventing its closure until the error has been addressed
+will help the user find and fix the error.
+
+The `isDisabled` prop will disable interaction on the button and the arrow. Use it in conjunction
+with `initialIsOpen` to achieve the desired effect.
+
+:::warning
+
+When disabling the interaction of accordions based on user input, it's advisable to ensure there is further explanation
+through the use of help or error text.
+
+:::
+
+## When content changes dynamically
+
+If an accordion’s content changes height while the accordion is open, it will resize dynamically.
+
+## Interactive content in the trigger
+
+Passing interactive content like links, buttons, or form elements as the `buttonContent`,
+will cause issues with the wrapping button element. To fix this, you can change this wrapping element
+to a div using `buttonElement="div"`.
+
+If you don't want the interactive content to trigger the accordion expansion,
+you will have to apply `e.stopPropagation()` to your element manually.
+
+:::warning
+
+Accordions need a focusable button for accessibility, so changing the element to anything other than a button will enforce the display of the arrow.
+
+:::
+
+## Styled for forms
+
+Accordions are unstyled by default, but **EuiAccordion** supports several props around padding sizes and borders,
+as well as letting you pass in your own custom CSS styles. See the snippet tab below for a quick preview of said props,
+and the and the demo code tab below for custom hover and focus CSS overrides.
+
+We also recommend creating a fieldset/legend combination for better accessibility and DOM structure by passing
+`element="fieldset"`. This will set the entire accordion as a `<fieldset>` and automatically change
+the `buttonElement` to a `<legend>`.

website/docs/components/layout/bottom_bar/_category_.yml

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

website/docs/components/layout/bottom_bar/overview.mdx

@@ -0,0 +1,36 @@
+---
+id: component_bottom_bar_overview
+title: Bottom bar
+slug: /components/bottom-bar
+export_name: EuiBottomBar
+---
+
+:::note
+
+**EuiPageTemplate** offers a quick way to
+[apply a bottom bar to your page layouts](#/templates/page-template#showing-a-bottom-bar).
+
+:::
+
+**EuiBottomBar** is a simple wrapper component that does nothing but affix a dark bar (usually filled with buttons)
+to the bottom of the page. Use it when you have really long pages or complicated, multi-page forms.
+In the case of forms, only invoke it if a form is in a savable state.
+
+Like many of our other wrapper components, **EuiBottomBar** accepts a `paddingSize` prop,
+which can be set to `s | m (default) | l | none`.
+
+## Positions
+
+Bottom bars default to a fixed position, in a portal at the bottom of the browser window.
+Alternatively, you can change the `position` to `sticky` where it will render in place but stick to the window only
+as the window edge nears. The `static` position reverts back to default DOM behavior.
+
+You can also apply a different set of positioning locations just by adjusting
+them in with the `top | right | bottom | left` props.
+
+## Displacement
+
+There is an `affordForDisplacement` prop (defaulting to `true`), which determines whether the component makes room
+for itself by adding bottom padding equivalent to its own height on the document `<body>` element.
+Setting this to `false` can be useful to minimize scrollbar visibility but will cause the bottom bar
+to overlap body content.

website/docs/components/layout/flex/_category_.yml

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

website/docs/components/layout/flex/overview.mdx

@@ -0,0 +1,105 @@
+---
+id: component_flex_overview
+title: Flex
+slug: /components/flex
+export_name:
+  - EuiFlexGroup
+  - EuiFlexGrid
+  - EuiFlexItem
+---
+
+:::note
+
+Coloring and padding exist for examples only
+
+Padding and background-color are added to all the **EuiFlexItem** components on this documentation page
+for illustrative purposes only. You will need to add padding through additional components or classes if you need it.
+
+:::
+
+## Flex group is for a single row layout
+
+**EuiFlexGroup** is useful for setting up layouts for a **single row** of content.
+By default any **EuiFlexItem** within **EuiFlexGroup** will stretch and grow to match their siblings.
+
+## Flex items are also flex
+
+To allow for continued stretching of nested **EuiFlexGroup**'s and its items, each **EuiFlexItem** also has
+the property of `display: flex`. This can cause unwanted layouts of your content when there are multiple elements
+or if the element itself also has some specific `display` property.
+
+To alleviate this, the simplest method is to wrap your inner children with a simple HTML element
+like a `<div />` or `<span />`.
+
+## Spans instead of divs
+
+Specify `component=“span”` on **EuiFlexGroup** and/or **EuiFlexItem** to change from the default `div`.
+
+## Panels grow to fill flex items
+
+The [**EuiPanel**](#/layout/panel) component will naturally grow to fill the **EuiFlexItem** which contains it.
+
+## Turn off item stretching
+
+Sometimes you do not want a **EuiFlexItem** to grow horizontally. It can be turned off for each item individually.
+
+## Proportional widths of items
+
+You can specify a number between 1 and 10 for each **EuiFlexItem** to take up a proportional percentage
+of the **EuiFlexGroup** it is in.
+
+## Justify and align
+
+**EuiFlexGroups** have the props `justifyContent` and `alignItems` that accept
+[normal flexbox parameters](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container).
+Below are some common scenarios, where you need to separate two items, center justify a single one,
+or center an item vertically. Note the usage of **EuiFlexItems** with `grow=false` so that they do not stretch.
+
+## Allowing flex items to wrap
+
+You can set `wrap` on **EuiFlexGroup** if it contains **EuiFlexItems** with minimum widths,
+which you want to wrap as the container becomes narrower.
+
+## Change direction
+
+You can change direction using the `direction` prop.
+
+## Responsive flex groups
+
+By default **EuiFlexGroup** is responsive by always stacking the items on smaller screens.
+However, often you only want to use groups for alignment and margins, rather than layouts.
+Simply apply the `responsive={false}` prop to retain a single row layout for the group.
+
+## Flex grids are for repeatable items
+
+**EuiFlexGrid** is a more rigid component that sets multiple, wrapping rows of same width items.
+You can set a `columns` prop to specify anywhere between 1-4 columns. Any more would likely break on laptop screens.
+
+## Flex grids can change direction
+
+Adding `direction="column"` will re-orient the flex items so they display top-down **then** left to right.
+
+## Responsive flex grids
+
+**EuiFlexGrid** is also similarly responsive by default, responsive by always stacking the items vertically
+on smaller screens. However, should you want to customize the number of items on small or large screens, we recommend
+applying the `responsive={false}` prop and then conditionally pass a column number based on the current breakpoint.
+
+## Flex grids and flex groups can nest
+
+**EuiFlexGroup** and **EuiFlexGrid** can nest within themselves indefinitely.
+For example, here we turn off the growth on a **EuiFlexGroup**, then nest a grid inside of it.
+
+:::warning
+
+Flex items are also a flexbox
+
+To support nested stretching of items, **EuiFlexItem** also has `display: flex` on it so if your children
+are not behaving correctly, you may want to wrap them in a `<div />`.
+
+:::
+
+## Gutter sizing[](#/layout/flex#gutter-sizing)
+
+The `gutterSize` prop can be applied to either a **EuiFlexGroup** or a **EuiFlexGrid** to adjust
+the spacing between **EuiFlexItems**.

website/docs/components/layout/flyout/_category_.yml

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

website/docs/components/layout/flyout/overview.mdx

@@ -0,0 +1,81 @@
+---
+id: component_flyout_overview
+title: Flyout
+slug: /components/flyout
+export_name: EuiFlyout
+---
+
+**EuiFlyout** is a fixed position panel that pops in from the side of the window.
+It should be used to reveal more detailed contextual information or to provide complex forms without losing
+the user's current state. It is a good alternative to [modals](#/layout/modal) when the action is not transient.
+
+Like modals, you control the visibilty of the flyout using your own state management,
+but **EuiFlyout** requires an `onClose` handler for it's internal dismiss buttons.
+
+:::note
+
+Use `aria-labelledby={headingId}` to announce the flyout to screen readers.
+
+:::
+
+## More complicated flyout
+
+This component also comes with related child components for ease of creating headers,
+footers and scrolling body content. **EuiFlyoutHeader** and **EuiFlyoutFooter** are pinned to the top and bottom
+of the flyout, respectively, to allow for always visible navigation and actions. The **EuiFlyoutBody** component
+will then automatically overflow.
+
+## Sizing
+
+Flyouts come in three predefined `size`s of `'s' | 'm' | 'l'`, which define the width **relative to the window size**
+with a minimum width defined in pixels. You can otherwise supply your own fixed width in number or string format.
+
+## Adjusting padding
+
+All the inner flyout components inherit their padding from the wrapping **EuiFlyout** component.
+This ensures that all the horizontal edges line up no matter the `paddingSize`. When using the `"none"` size,
+you will need to accommodate your content with some other way of creating distance to the edges of the flyout.
+
+## Adding a banner
+
+To highlight some information at the top of a flyout, you can pass an [**EuiCallOut**](#/display/callout)
+to the `banner` prop available in **EuiFlyoutBody** and its layout will adjust appropriately.
+
+## Without ownFocus
+
+Like modals, you will usually want to obscure the page content beneath with `ownFocus` which wraps the flyout
+with an [**EuiOverlayMask**](#/utilities/overlay-mask) . However, there are use-cases where flyouts present more
+information or controls, but need to maintain the interactions of the page content. By setting `ownFocus={false}`,
+the underlying page content will be visible and clickable.
+
+## Push versus overlay
+
+Another way to allow for continued interactions of the page content while a flyout is visible,
+is to change the `type` from `overlay` to `push`.
+
+A pushed flyout still positions itself as `fixed`, but adds padding to the document's body element to accommodate
+for the flyout's width. Because this squishes the page content, the flyout changes back to `overlay`
+at smaller window widths. You can adjust this minimum breakpoint with `pushMinBreakpoint`.
+
+:::warning
+
+Push flyouts require manual accessibility management
+
+Push flyouts do not use a focus trap, do not close on Escape keypress, do not inherit
+a [dialog role(opens in a new tab or window)](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role),
+and do not include any of the default screen reader guidance that overlay flyouts contain out-of-the-box.
+
+Please be cautious when using push flyouts, and make sure you are managing your own focus and screen reader UX.
+
+:::
+
+## Understanding max-width
+
+By default, flyouts will continue to grow with the width of the window.
+To stop this growth at an ideal width, set `maxWidth` to `true`, or pass your own custom size.
+
+:::warning
+
+Note that there are some caveats to providing a maxWidth that is smaller than the minWidth.
+
+:::

website/docs/components/layout/header/_category_.yml

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