[EUI+] Split up several component pages into subpages

packages/eui/src/components/flex/flex_group.tsx

@@ -64,14 +64,9 @@ export type EuiFlexGroupProps<TComponent extends ElementType = 'div'> =
        * such as `'div'` or `'span'`, a React component (a function, a class,
        * or an exotic component like `memo()`).
        *
-       * `<EuiFlexGroup>` accepts and forwards all extra props to the custom
+       * `EuiFlexGroup` accepts and forwards all extra props to the custom
        * component.
        *
-       * @example
-       * // Renders a <button> element
-       * <EuiFlexGroup component="button">
-       *   Submit form
-       * </EuiFlexGroup>
        * @default "div"
        */
       component?: TComponent;

packages/website/docs/components/display/badge/_category_.yml

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

packages/website/docs/components/display/badge.mdx → packages/website/docs/components/display/badge/badge.mdx

@@ -8,7 +8,7 @@ id: display_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).
 
 ```tsx interactive
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 import {
   EuiBadge,
   EuiFlexItem,
@@ -45,7 +45,7 @@ export default () => {
   const [isDisabled, setDisabled] = useState(false);
 
   return (
-    <Fragment>
+    <>
       <EuiTitle size="xs">
         <h2>Accepted color names</h2>
       </EuiTitle>
@@ -97,7 +97,7 @@ export default () => {
           </EuiBadge>
         </EuiFlexItem>
       </EuiFlexGroup>
-    </Fragment>
+    </>
   );
 };
 ```
@@ -310,111 +310,9 @@ export default () => (
 );
 ```
 
-## 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**](/docs/display/card) and [**EuiKeyPadMenuItems**](/docs/navigation/key-pad-menu).
-
-```tsx interactive
-import React from 'react';
-import { EuiBetaBadge, EuiSpacer, EuiTitle } from '@elastic/eui';
-import { css } from '@emotion/react';
-
-const colors = ['hollow', 'accent', 'subdued', 'warning'] as const;
-
-export default () => (
-  <>
-    <div
-      css={css`
-        display: grid;
-        align-items: flex-start;
-        grid: repeat(3, max-content) / repeat(6, max-content);
-        gap: 0.75rem;
-      `}
-    >
-      {colors.map((item) => (
-        <>
-          <EuiBetaBadge
-            label="Beta"
-            color={item}
-            tooltipContent="This module is not GA. Please help us by reporting any bugs."
-          />
-          <EuiBetaBadge
-            label="Beta"
-            color={item}
-            size="s"
-            tooltipContent="This module is not GA. Please help us by reporting any bugs."
-          />
-          <EuiBetaBadge label="Beta" color={item} iconType="beta" />
-          <EuiBetaBadge size="s" label="Beta" color={item} iconType="beta" />
-          <EuiBetaBadge label="Lab" color={item} iconType="beaker" />
-          <EuiBetaBadge label="Lab" size="s" color={item} iconType="beaker" />
-        </>
-      ))}
-    </div>
-    <EuiSpacer size="s" />
-    <EuiTitle size="s">
-      <h3>
-        Beta badges will also line up nicely with titles &nbsp;
-        <EuiBetaBadge
-          label="Lab"
-          tooltipContent="This module is not GA. Please help us by reporting any bugs."
-        />
-      </h3>
-    </EuiTitle>
-    <EuiSpacer />
-    <EuiTitle size="xs">
-      <h3>Clickable beta badges</h3>
-    </EuiTitle>
-    <EuiSpacer size="s" />
-    <div
-      css={css`
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-      `}
-    >
-      <EuiBetaBadge
-        label="Lens"
-        iconType="lensApp"
-        onClick={() => alert('Goes to Lens')}
-      />
-      <EuiBetaBadge
-        label="Basic"
-        href="http://www.elastic.co/subscriptions"
-        target="_blank"
-      />
-    </div>
-  </>
-);
-
-```
-
-## Notification badge type
-
-Used to showcase the number of notifications, alerts, or hidden selections. This badge type is commonly used in the [**EuiHeader**](/docs/layout/header) and [**EuiFilterButton**](/docs/forms/filter-group) components.
-
-```tsx interactive
-import React from 'react';
-import { EuiFlexGroup, EuiNotificationBadge } from '@elastic/eui';
-
-export default () => (
-  <EuiFlexGroup responsive={false} gutterSize="s">
-    <EuiNotificationBadge>1</EuiNotificationBadge>
-    <EuiNotificationBadge color="success">2</EuiNotificationBadge>
-    <EuiNotificationBadge color="subdued">3</EuiNotificationBadge>
-  </EuiFlexGroup>
-);
-```
-
 ## Props
 
 import docgen from '@elastic/eui-docgen/dist/components/badge';
 
 <PropTable definition={docgen.EuiBadge} />
 <PropTable definition={docgen.EuiBadgeGroup} />
-<PropTable definition={docgen.EuiNotificationBadge} />
-<PropTable definition={docgen.EuiBetaBadge} />

packages/website/docs/components/display/badge/beta_badge.mdx

@@ -0,0 +1,93 @@
+---
+slug: /display/badge/beta
+id: display_badge_beta
+---
+
+# Beta badge
+
+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**](/docs/display/card) and [**EuiKeyPadMenuItems**](/docs/navigation/key-pad-menu).
+
+```tsx interactive
+import React from 'react';
+import { EuiBetaBadge, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+const colors = ['hollow', 'accent', 'subdued', 'warning'] as const;
+
+export default () => (
+  <>
+    <div
+      css={css`
+        display: grid;
+        align-items: flex-start;
+        grid: repeat(3, max-content) / repeat(6, max-content);
+        gap: 0.75rem;
+      `}
+    >
+      {colors.map((item) => (
+        <>
+          <EuiBetaBadge
+            label="Beta"
+            color={item}
+            tooltipContent="This module is not GA. Please help us by reporting any bugs."
+          />
+          <EuiBetaBadge
+            label="Beta"
+            color={item}
+            size="s"
+            tooltipContent="This module is not GA. Please help us by reporting any bugs."
+          />
+          <EuiBetaBadge label="Beta" color={item} iconType="beta" />
+          <EuiBetaBadge size="s" label="Beta" color={item} iconType="beta" />
+          <EuiBetaBadge label="Lab" color={item} iconType="beaker" />
+          <EuiBetaBadge label="Lab" size="s" color={item} iconType="beaker" />
+        </>
+      ))}
+    </div>
+    <EuiSpacer size="s" />
+    <EuiTitle size="s">
+      <h3>
+        Beta badges will also line up nicely with titles &nbsp;
+        <EuiBetaBadge
+          label="Lab"
+          tooltipContent="This module is not GA. Please help us by reporting any bugs."
+        />
+      </h3>
+    </EuiTitle>
+    <EuiSpacer />
+    <EuiTitle size="xs">
+      <h3>Clickable beta badges</h3>
+    </EuiTitle>
+    <EuiSpacer size="s" />
+    <div
+      css={css`
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+      `}
+    >
+      <EuiBetaBadge
+        label="Lens"
+        iconType="lensApp"
+        onClick={() => alert('Goes to Lens')}
+      />
+      <EuiBetaBadge
+        label="Basic"
+        href="http://www.elastic.co/subscriptions"
+        target="_blank"
+      />
+    </div>
+  </>
+);
+
+```
+
+## Props
+
+import docgen from '@elastic/eui-docgen/dist/components/badge';
+
+<PropTable definition={docgen.EuiBetaBadge} />

packages/website/docs/components/display/badge/notification_badge.mdx

@@ -0,0 +1,27 @@
+---
+slug: /display/badge/notification
+id: display_badge_notification
+---
+
+# Notification badge
+
+**EuiNotificationBadge** should be used to showcase the number of notifications, alerts, or hidden selections. This badge type is commonly used in the [**EuiHeader**](/docs/layout/header) and [**EuiFilterButton**](/docs/forms/filter-group) components.
+
+```tsx interactive
+import React from 'react';
+import { EuiFlexGroup, EuiNotificationBadge } from '@elastic/eui';
+
+export default () => (
+  <EuiFlexGroup responsive={false} gutterSize="s">
+    <EuiNotificationBadge>1</EuiNotificationBadge>
+    <EuiNotificationBadge color="success">2</EuiNotificationBadge>
+    <EuiNotificationBadge color="subdued">3</EuiNotificationBadge>
+  </EuiFlexGroup>
+);
+```
+
+## Props
+
+import docgen from '@elastic/eui-docgen/dist/components/badge';
+
+<PropTable definition={docgen.EuiNotificationBadge} />

packages/website/docs/components/display/card.mdx

@@ -17,7 +17,7 @@ For accessibility and heading hierarchy, a card's title element is a `span` by d
 import React from 'react';
 import { EuiCard, EuiIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
-const icons = ['Beats', 'Cloud', 'Logging', 'Kibana'];
+const icons = ['Beats', 'Cloud', 'Kibana'];
 
 const cardNodes = icons.map(function (item, index) {
   return (
@@ -626,62 +626,59 @@ For non-interactive cards, reduce or eliminate the padding as needed to suit you
 import React from 'react';
 import {
   EuiCard,
-  EuiFlexGroup,
+  EuiFlexGrid,
   EuiFlexItem,
   EuiIcon,
   EuiSpacer,
 } from '@elastic/eui';
 
 export default () => (
-  <div>
-    <EuiSpacer size="s" />
-    <EuiFlexGroup gutterSize="l" wrap>
-      <EuiFlexItem>
-        <EuiCard
-          layout="horizontal"
-          icon={<EuiIcon size="xl" type="logoLogging" />}
-          onClick={() => {}}
-          title="Plain"
-          display="plain"
-          description="This one still has a solid background color."
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiCard
-          icon={<EuiIcon size="xl" type="logoLogging" />}
-          title="Subdued"
-          display="subdued"
-          description="This one has a subdued background color."
-          onClick={() => {}}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiCard
-          layout="horizontal"
-          icon={<EuiIcon size="xl" type="logoLogging" />}
-          title="Transparent"
-          display="transparent"
-          description="This one doesn't have a background color anymore."
-          betaBadgeProps={{
-            label: 'Beta',
-            tooltipContent:
-              'This module is not GA. Please help us by reporting any bugs.',
-          }}
-          onClick={() => {}}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiCard
-          icon={<EuiIcon size="xl" type="logoLogging" />}
-          title="Bordered"
-          display="plain"
-          hasBorder
-          description="This one has a plain background color and border."
-          onClick={() => {}}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </div>
+  <EuiFlexGrid columns={2}>
+    <EuiFlexItem>
+      <EuiCard
+        layout="horizontal"
+        icon={<EuiIcon size="xl" type="logoLogging" />}
+        onClick={() => {}}
+        title="Plain"
+        display="plain"
+        description="This one still has a solid background color."
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiCard
+        icon={<EuiIcon size="xl" type="logoLogging" />}
+        title="Subdued"
+        display="subdued"
+        description="This one has a subdued background color."
+        onClick={() => {}}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiCard
+        layout="horizontal"
+        icon={<EuiIcon size="xl" type="logoLogging" />}
+        title="Transparent"
+        display="transparent"
+        description="This one doesn't have a background color anymore."
+        betaBadgeProps={{
+          label: 'Beta',
+          tooltipContent:
+            'This module is not GA. Please help us by reporting any bugs.',
+        }}
+        onClick={() => {}}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiCard
+        icon={<EuiIcon size="xl" type="logoLogging" />}
+        title="Bordered"
+        display="plain"
+        hasBorder
+        description="This one has a plain background color and border."
+        onClick={() => {}}
+      />
+    </EuiFlexItem>
+  </EuiFlexGrid>
 );
 ```