chore: Fix options for text size examples of lists (#1579)

Amsterdam · Sep 12, 2024 · 879ce29 · 879ce29
1 parent 1f29f35
commit 879ce29
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git a/storybook/src/components/OrderedList/OrderedList.docs.mdx b/storybook/src/components/OrderedList/OrderedList.docs.mdx
@@ -14,12 +14,6 @@ import README from "../../../../packages/css/src/components/ordered-list/README.
 
 ## Examples
 
-### Small text
-
-Use a list with a smaller font size in form descriptions and captions and the like.
-
-<Canvas of={OrderedListStories.SmallText} />
-
 ### Two levels
 
 A list may have one nested level.
@@ -61,3 +55,9 @@ This ensures the colour of the text provides enough contrast.
 When nesting lists, set the prop on all lists.
 
 <Canvas of={OrderedListStories.InverseColor} />
+
+### Small text
+
+Use a list with a smaller font size in form descriptions and captions and the like.
+
+<Canvas of={OrderedListStories.SmallText} />
diff --git a/storybook/src/components/OrderedList/OrderedList.stories.tsx b/storybook/src/components/OrderedList/OrderedList.stories.tsx
@@ -37,7 +37,7 @@ const meta = {
         type: 'radio',
         labels: { small: 'small', undefined: 'medium' },
       },
-      options: ['small', undefined, 'large'],
+      options: ['small', undefined],
     },
   },
   decorators: [inverseColorDecorator],
@@ -49,12 +49,6 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 
-export const SmallText: Story = {
-  args: {
-    size: 'small',
-  },
-}
-
 export const TwoLevels: Story = {
   render: (args) => (
     <OrderedList {...args}>
@@ -151,3 +145,9 @@ export const InverseColor: Story = {
     </OrderedList>
   ),
 }
+
+export const SmallText: Story = {
+  args: {
+    size: 'small',
+  },
+}
diff --git a/storybook/src/components/UnorderedList/UnorderedList.stories.tsx b/storybook/src/components/UnorderedList/UnorderedList.stories.tsx
@@ -31,6 +31,15 @@ const meta = {
     inverseColor: false,
     markers: undefined,
   },
+  argTypes: {
+    size: {
+      control: {
+        type: 'radio',
+        labels: { small: 'small', undefined: 'medium' },
+      },
+      options: ['small', undefined],
+    },
+  },
   decorators: [inverseColorDecorator],
 } satisfies Meta<typeof UnorderedList>