[Storybook] Add stories for more components (letters R-S) - Part 4 (#…

…7733)

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
Co-authored-by: Cee Chen <constance.chen@elastic.co>

src/components/steps/step.stories.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { hideStorybookControls } from '../../../.storybook/utils';
+import { STATUS } from './step_number';
+import { EuiStep, EuiStepProps } from './step';
+
+const meta: Meta<EuiStepProps> = {
+  title: 'Navigation/EuiSteps/EuiSteps/EuiStep',
+  component: EuiStep,
+  argTypes: {
+    status: { options: [undefined, ...STATUS] },
+  },
+  args: {
+    headingElement: 'p',
+    titleSize: 's',
+    step: 1,
+  },
+};
+hideStorybookControls(meta, ['aria-label']);
+
+export default meta;
+type Story = StoryObj<EuiStepProps>;
+
+export const Playground: Story = {
+  args: {
+    title: 'Step 1',
+    children: 'lorem ipsum',
+  },
+};

src/components/steps/step_horizontal.stories.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  enableFunctionToggleControls,
+  hideStorybookControls,
+} from '../../../.storybook/utils';
+import { EuiStepHorizontal, EuiStepHorizontalProps } from './step_horizontal';
+
+const meta: Meta<EuiStepHorizontalProps> = {
+  title: 'Navigation/EuiSteps/EuiStepsHorizontal/EuiStepHorizontal',
+  component: EuiStepHorizontal,
+  args: {
+    size: 'm',
+    step: 1,
+    status: 'incomplete',
+    // set up for easier testing/QA
+    disabled: false,
+  },
+};
+hideStorybookControls(meta, ['aria-label']);
+enableFunctionToggleControls(meta, ['onClick']);
+
+export default meta;
+type Story = StoryObj<EuiStepHorizontalProps>;
+
+export const Playground: Story = {
+  args: {
+    title: 'Step 1',
+    children: 'lorem ipsum',
+  },
+};

src/components/steps/step_number.stories.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { hideStorybookControls } from '../../../.storybook/utils';
+import { EuiStepNumber, EuiStepNumberProps, STATUS } from './step_number';
+
+const meta: Meta<EuiStepNumberProps> = {
+  title: 'Navigation/EuiSteps/Subcomponents/EuiStepNumber',
+  component: EuiStepNumber,
+  argTypes: {
+    status: { options: [undefined, ...STATUS] },
+  },
+  args: {
+    titleSize: 's',
+  },
+};
+hideStorybookControls(meta, ['aria-label']);
+
+export default meta;
+type Story = StoryObj<EuiStepNumberProps>;
+
+export const Playground: Story = {
+  args: {
+    number: 1,
+  },
+};

src/components/steps/steps.stories.tsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { moveStorybookControlsToCategory } from '../../../.storybook/utils';
+import { EuiSteps, EuiStepsProps } from './steps';
+
+const meta: Meta<EuiStepsProps> = {
+  title: 'Navigation/EuiSteps/EuiSteps',
+  component: EuiSteps,
+  args: {
+    firstStepNumber: 1,
+    headingElement: 'p',
+    titleSize: 's',
+  },
+};
+moveStorybookControlsToCategory(
+  meta,
+  ['headingElement', 'titleSize'],
+  'EuiStep props'
+);
+
+export default meta;
+type Story = StoryObj<EuiStepsProps>;
+
+export const Playground: Story = {
+  args: {
+    steps: [
+      {
+        title: 'Step 1',
+        children: 'lorem ipsum',
+      },
+      {
+        title: 'Step 2',
+        children: 'lorem ipsum',
+        status: 'current',
+      },
+      {
+        title: 'Step 3',
+        children: 'lorem ipsum',
+        status: 'complete',
+      },
+      {
+        title: 'Step 4',
+        children: 'lorem ipsum',
+        status: 'incomplete',
+      },
+      {
+        title: 'Step 5',
+        children: 'lorem ipsum',
+        status: 'warning',
+      },
+      {
+        title: 'Step 6',
+        children: 'lorem ipsum',
+        status: 'danger',
+      },
+      {
+        title: 'Step 7',
+        children: 'lorem ipsum',
+        status: 'loading',
+      },
+      {
+        title: 'Step 8',
+        children: 'lorem ipsum',
+        status: 'disabled',
+      },
+    ],
+  },
+};

src/components/steps/steps_horizontal.stories.tsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { moveStorybookControlsToCategory } from '../../../.storybook/utils';
+import {
+  EuiStepsHorizontal,
+  EuiStepsHorizontalProps,
+} from './steps_horizontal';
+
+const meta: Meta<EuiStepsHorizontalProps> = {
+  title: 'Navigation/EuiSteps/EuiStepsHorizontal',
+  component: EuiStepsHorizontal,
+  args: {
+    size: 'm',
+  },
+};
+moveStorybookControlsToCategory(meta, ['size'], 'EuiStepHorizontal props');
+
+export default meta;
+type Story = StoryObj<EuiStepsHorizontalProps>;
+
+const onClick = action('onClick');
+
+export const Playground: Story = {
+  args: {
+    steps: [
+      {
+        title: 'Step 1',
+        onClick,
+      },
+      {
+        title: 'Step 2',
+        status: 'current',
+        onClick,
+      },
+      {
+        title: 'Step 3',
+        status: 'complete',
+        onClick,
+      },
+      {
+        title: 'Step 4',
+        status: 'incomplete',
+        onClick,
+      },
+      {
+        title: 'Step 5',
+        status: 'warning',
+        onClick,
+      },
+      {
+        title: 'Step 6',
+        status: 'danger',
+        onClick,
+      },
+      {
+        title: 'Step 7',
+        status: 'loading',
+        onClick,
+      },
+      {
+        title: 'Step 8',
+        status: 'disabled',
+        onClick,
+      },
+    ],
+  },
+};

src/components/steps/sub_steps.stories.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiSubSteps, EuiSubStepsProps } from './sub_steps';
+
+const meta: Meta<EuiSubStepsProps> = {
+  title: 'Navigation/EuiSteps/Subcomponents/EuiSubSteps',
+  component: EuiSubSteps,
+};
+
+export default meta;
+type Story = StoryObj<EuiSubStepsProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'lorem ipsum dolor sit',
+  },
+};