Reorganize horizontal steps as a subpage of steps

elastic · Nov 23, 2024 · fa74f0a · fa74f0a
1 parent bd9e6cb
commit fa74f0a
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 85 deletions.
diff --git a/packages/website/docs/components/navigation/steps/_category_.yml b/packages/website/docs/components/navigation/steps/_category_.yml
@@ -0,0 +1,3 @@
+link:
+  type: doc
+  id: navigation_steps
diff --git a/packages/website/docs/components/navigation/steps/horizontal_steps.mdx b/packages/website/docs/components/navigation/steps/horizontal_steps.mdx
@@ -0,0 +1,93 @@
+---
+slug: /navigation/steps/horizontal
+id: navigation_steps_horizontal
+---
+
+# Horizontal steps
+
+**EuiStepsHorizontal** should be used when forms/setup instructions can and should be split into multiple pages. Each step should correspond to an individual page of form elements, using the `status` key to denote the user's progress.
+
+For horizontal steps, the `status` key defaults to `"incomplete"` and the default filled styling is reserved for indicating `"current"` status.
+
+Use the `size` property to generate smaller step circles.
+
+```tsx interactive
+import React, { useState } from 'react';
+import {
+  EuiStepsHorizontal,
+  EuiStepsHorizontalProps,
+  EuiStepsHorizontalSizes,
+  EuiButtonGroup,
+  EuiTitle,
+  EuiSpacer,
+} from '@elastic/eui';
+
+export default () => {
+  const horizontalSteps: EuiStepsHorizontalProps['steps'] = [
+    {
+      title: 'Completed step 1',
+      status: 'complete',
+      onClick: () => {},
+    },
+    {
+      title: 'Selected step 2',
+      status: 'current',
+      onClick: () => {},
+    },
+    {
+      title: 'Incomplete step 3 which will wrap to the next line',
+      onClick: () => {},
+    },
+    {
+      title: 'Disabled step 4',
+      status: 'disabled',
+      onClick: () => {},
+    },
+  ];
+
+  const sizeButtons = [
+    {
+      id: 'xs',
+      label: 'XSmall',
+    },
+    {
+      id: 's',
+      label: 'Small',
+    },
+    {
+      id: 'm',
+      label: 'Medium',
+    },
+  ];
+
+  const [toggleSize, setToggleSize] = useState<EuiStepsHorizontalSizes>('m');
+
+  const sizeOnChange = (optionId: EuiStepsHorizontalSizes) => {
+    setToggleSize(optionId);
+  };
+
+  return (
+    <>
+      <EuiTitle size="xxs">
+        <h3>Step Size</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiButtonGroup
+        legend="Horizontal step size toggle"
+        options={sizeButtons}
+        idSelected={toggleSize}
+        onChange={(id) => sizeOnChange(id as EuiStepsHorizontalSizes)}
+      />
+      <EuiStepsHorizontal steps={horizontalSteps} size={toggleSize} />
+    </>
+  );
+};
+```
+
+## Props
+
+import docgen from '@elastic/eui-docgen/dist/components/steps';
+
+<PropTable definition={docgen.EuiStepsHorizontal} />
+
+<PropTable definition={docgen.EuiStepHorizontal} />
diff --git a/...site/docs/components/navigation/steps.mdx → ...ocs/components/navigation/steps/steps.mdx b/...site/docs/components/navigation/steps.mdx → ...ocs/components/navigation/steps/steps.mdx
@@ -400,87 +400,6 @@ export default () => {
 };
 ```
 
-## Horizontal steps
-
-For use when forms/setup instructions can and should be split into multiple pages. Each step should correspond to an individual page of form elements, using the `status` key to denote the user's progress.
-
-For horizontal steps, the `status` key defaults to `"incomplete"` and the default filled styling is reserved for indicating `"current"` status.
-
-Use the `size` property to generate smaller step circles.
-
-```tsx interactive
-import React, { useState } from 'react';
-import {
-  EuiStepsHorizontal,
-  EuiStepsHorizontalProps,
-  EuiStepsHorizontalSizes,
-  EuiButtonGroup,
-  EuiTitle,
-  EuiSpacer,
-} from '@elastic/eui';
-
-export default () => {
-  const horizontalSteps: EuiStepsHorizontalProps['steps'] = [
-    {
-      title: 'Completed step 1',
-      status: 'complete',
-      onClick: () => {},
-    },
-    {
-      title: 'Selected step 2',
-      status: 'current',
-      onClick: () => {},
-    },
-    {
-      title: 'Incomplete step 3 which will wrap to the next line',
-      onClick: () => {},
-    },
-    {
-      title: 'Disabled step 4',
-      status: 'disabled',
-      onClick: () => {},
-    },
-  ];
-
-  const sizeButtons = [
-    {
-      id: 'xs',
-      label: 'XSmall',
-    },
-    {
-      id: 's',
-      label: 'Small',
-    },
-    {
-      id: 'm',
-      label: 'Medium',
-    },
-  ];
-
-  const [toggleSize, setToggleSize] = useState<EuiStepsHorizontalSizes>('m');
-
-  const sizeOnChange = (optionId: EuiStepsHorizontalSizes) => {
-    setToggleSize(optionId);
-  };
-
-  return (
-    <>
-      <EuiTitle size="xxs">
-        <h3>Step Size</h3>
-      </EuiTitle>
-      <EuiSpacer size="s" />
-      <EuiButtonGroup
-        legend="Horizontal step size toggle"
-        options={sizeButtons}
-        idSelected={toggleSize}
-        onChange={(id) => sizeOnChange(id as EuiStepsHorizontalSizes)}
-      />
-      <EuiStepsHorizontal steps={horizontalSteps} size={toggleSize} />
-    </>
-  );
-};
-```
-
 ## Props
 
 import docgen from '@elastic/eui-docgen/dist/components/steps';
@@ -489,10 +408,6 @@ import docgen from '@elastic/eui-docgen/dist/components/steps';
 
 <PropTable definition={docgen.EuiStep} />
 
-<PropTable definition={docgen.EuiStepsHorizontal} />
-
-<PropTable definition={docgen.EuiStepHorizontal} />
-
 <PropTable definition={docgen.EuiStepNumber} />
 
 <PropTable definition={docgen.EuiSubSteps} />