From 1342cb1706ea990c7d18389973787e7a4de1f3ea Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 22 Nov 2024 10:51:20 -0800
Subject: [PATCH] Reorganize horizontal steps as a subpage of steps

---
 .../navigation/steps/_category_.yml           |  3 +
 .../navigation/steps/horizontal_steps.mdx     | 93 +++++++++++++++++++
 .../navigation/{ => steps}/steps.mdx          | 85 -----------------
 3 files changed, 96 insertions(+), 85 deletions(-)
 create mode 100644 packages/website/docs/components/navigation/steps/_category_.yml
 create mode 100644 packages/website/docs/components/navigation/steps/horizontal_steps.mdx
 rename packages/website/docs/components/navigation/{ => steps}/steps.mdx (82%)

diff --git a/packages/website/docs/components/navigation/steps/_category_.yml b/packages/website/docs/components/navigation/steps/_category_.yml
new file mode 100644
index 00000000000..d366b90cddf
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..70fff9499b6
--- /dev/null
+++ 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/packages/website/docs/components/navigation/steps.mdx b/packages/website/docs/components/navigation/steps/steps.mdx
similarity index 82%
rename from packages/website/docs/components/navigation/steps.mdx
rename to packages/website/docs/components/navigation/steps/steps.mdx
index c89d3e6ed86..4dfeb0e3583 100644
--- a/packages/website/docs/components/navigation/steps.mdx
+++ b/packages/website/docs/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} />