docs(stepper): improve stories

adevinta · Nov 6, 2024 · 4e446a1 · 4e446a1
1 parent 2737a85
commit 4e446a1
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 7 deletions.
diff --git a/packages/components/stepper/src/Stepper.doc.mdx b/packages/components/stepper/src/Stepper.doc.mdx
@@ -66,6 +66,18 @@ import { Stepper } from '@spark-ui/stepper'
 
 <Canvas of={stories.Default} />
 
+### Uncontrolled
+
+Use `defaultValue` prop to set the default value of the stepper. Optionally `onChange` prop can be used to know when the value of the stepper changes.
+
+<Canvas of={stories.Uncontrolled} />
+
+### Controlled
+
+Use `value` and `onChange` props to control the value of the input.
+
+<Canvas of={stories.Controlled} />
+
 ### Disabled
 
 Use `disabled` prop to indicate that the stepper is disabled and not interactive.

diff --git a/packages/components/stepper/src/Stepper.stories.tsx b/packages/components/stepper/src/Stepper.stories.tsx
@@ -4,6 +4,7 @@ import { Icon } from '@spark-ui/icon'
 import { ArrowHorizontalDown } from '@spark-ui/icons/dist/icons/ArrowHorizontalDown'
 import { ArrowHorizontalUp } from '@spark-ui/icons/dist/icons/ArrowHorizontalUp'
 import { Meta, StoryFn } from '@storybook/react'
+import { useState } from 'react'
 
 import { Stepper, StepperProps } from '.'
 
@@ -16,13 +17,43 @@ export default meta
 
 const states: StepperProps['state'][] = ['error', 'alert', 'success']
 
-export const Default: StoryFn = _args => (
-  <Stepper aria-label="Default stepper">
-    <Stepper.DecrementButton aria-label="Decrement" />
-    <Stepper.Input />
-    <Stepper.IncrementButton aria-label="Increment" />
-  </Stepper>
-)
+export const Default: StoryFn = _args => {
+  return (
+    <Stepper aria-label="Default stepper">
+      <Stepper.DecrementButton aria-label="Decrement" />
+      <Stepper.Input />
+      <Stepper.IncrementButton aria-label="Increment" />
+    </Stepper>
+  )
+}
+
+export const Uncontrolled: StoryFn = () => {
+  return (
+    <Stepper
+      defaultValue={0}
+      onChange={v => {
+        console.log(v)
+      }}
+      aria-label="Default stepper"
+    >
+      <Stepper.DecrementButton aria-label="Decrement" />
+      <Stepper.Input />
+      <Stepper.IncrementButton aria-label="Increment" />
+    </Stepper>
+  )
+}
+
+export const Controlled: StoryFn = () => {
+  const [count, setCount] = useState(0)
+
+  return (
+    <Stepper value={count} onChange={setCount} aria-label="Default stepper">
+      <Stepper.DecrementButton aria-label="Decrement" />
+      <Stepper.Input />
+      <Stepper.IncrementButton aria-label="Increment" />
+    </Stepper>
+  )
+}
 
 export const Disabled: StoryFn = _args => (
   <Stepper aria-label="Disabled stepper" disabled onChange={() => console.log('disabled')}>