Add padding to Stepper component and update Storybook metadata.

scality · Nov 9, 2023 · 88555bf · 88555bf
1 parent 39655b0
commit 88555bf
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/lib/components/steppers/Stepper.component.tsx b/src/lib/components/steppers/Stepper.component.tsx
@@ -64,7 +64,7 @@ export const Stepper = <T extends any[]>({
 
   return (
     <StepperContext.Provider value={{ next, prev }}>
-      <Box display={'flex'} gap={32}>
+      <Box display={'flex'} gap={32} padding={32}>
         <Steppers
           activeStep={currentStep}
           steps={steps.map((step) => {

diff --git a/stories/stepper.stories.tsx b/stories/stepper.stories.tsx
@@ -9,12 +9,7 @@ import { Stack } from '../src/lib/spacing';
 import { Button } from '../src/lib/components/buttonv2/Buttonv2.component';
 import { Text } from '../src/lib/components/text/Text.component';
 import { Wrapper as StoryWrapper } from './common';
-
-export default {
-  title: 'Components/Progress & loading/Steppers',
-  component: Stepper,
-  decorators: [(story) => <StoryWrapper>{story()}</StoryWrapper>],
-};
+import type { Meta, StoryObj } from '@storybook/react';
 
 const Wrapper = styled.div`
   display: flex;
@@ -111,6 +106,19 @@ enum StepIndexes {
   Step3,
 }
 
-export const SimpleStepper = ({}) => {
-  return <Stepper steps={STEPS} />;
+const meta: Meta<typeof Stepper> = {
+  tags: ['autodocs'],
+  title: 'Components/Stepper',
+  component: Stepper,
+};
+export default meta;
+
+type Story = StoryObj<typeof Stepper>;
+export const SimpleStepper: Story = {
+  name: 'Simple Stepper',
+  render: () => (
+    <StoryWrapper>
+      <Stepper steps={STEPS} />
+    </StoryWrapper>
+  ),
 };