chore(ordered-list): add ordered list controls (#12147)

* chore(ordered-list): remove extra stories * chore(ordered-list): add other examples
carbon-design-system · Sep 27, 2022 · bedaf3e · bedaf3e
1 parent c7d5d1e
commit bedaf3e
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 17 deletions.
diff --git a/packages/react/src/components/OrderedList/OrderedList.mdx b/packages/react/src/components/OrderedList/OrderedList.mdx
@@ -1,4 +1,4 @@
-import { Props } from '@storybook/addon-docs';
+import { Props, Preview, Story } from '@storybook/addon-docs';
 
 # OrderedList
 
@@ -12,6 +12,10 @@ import { Props } from '@storybook/addon-docs';
 
 ## Overview
 
+<Preview>
+  <Story id="components-orderedlist--playground" />
+</Preview>
+
 ## Component API
 
 <Props />

diff --git a/...mponents/OrderedList/OrderedList-story.js → ...onents/OrderedList/OrderedList.stories.js b/...mponents/OrderedList/OrderedList-story.js → ...onents/OrderedList/OrderedList.stories.js
@@ -1,23 +1,19 @@
 import React from 'react';
 import OrderedList from '../OrderedList';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
 import ListItem from '../ListItem';
-
-const props = {
-  regular: () => {
-    return {
-      isExpressive: boolean('Expressive', false),
-    };
-  },
-};
+import mdx from './OrderedList.mdx';
 
 export default {
   title: 'Components/OrderedList',
   component: OrderedList,
-  decorators: [withKnobs],
   subcomponents: {
     ListItem,
   },
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 export const Default = () => (
@@ -39,10 +35,8 @@ export const Default = () => (
 );
 
 export const Nested = () => {
-  const regularProps = props.regular();
-
   return (
-    <OrderedList {...regularProps}>
+    <OrderedList>
       <ListItem>
         Ordered List level 1
         <OrderedList nested>
@@ -63,10 +57,8 @@ export const Nested = () => {
 };
 
 export const NativeListStyles = () => {
-  const regularProps = props.regular();
-
   return (
-    <OrderedList native {...regularProps}>
+    <OrderedList native>
       <ListItem>Ordered List level 1</ListItem>
       <ListItem>Ordered List level 1</ListItem>
       <ListItem>Ordered List level 1</ListItem>
@@ -90,3 +82,52 @@ export const NativeListStyles = () => {
     </OrderedList>
   );
 };
+
+export const Playground = (args) => (
+  <OrderedList {...args}>
+    <ListItem>Ordered List level 1</ListItem>
+    <ListItem>Ordered List level 1</ListItem>
+    <ListItem>Ordered List level 1</ListItem>
+    <ListItem>Ordered List level 1</ListItem>
+    <ListItem>Ordered List level 1</ListItem>
+    <ListItem>Ordered List level 1</ListItem>
+    <ListItem>Ordered List level 1</ListItem>
+    <ListItem>Ordered List level 1</ListItem>
+    <ListItem>Ordered List level 1</ListItem>
+    <ListItem>Ordered List level 1</ListItem>
+    <ListItem>Ordered List level 1</ListItem>
+    <ListItem>Ordered List level 1</ListItem>
+    <ListItem>Ordered List level 1</ListItem>
+  </OrderedList>
+);
+
+Playground.argTypes = {
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  isExpressive: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  native: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  nested: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+};