chore(tag): add playground story (#12505)

closes #12486 Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Nov 12, 2022 · 4b9b09a · 4b9b09a
1 parent b23ebd9
commit 4b9b09a
Showing 1 changed file with 76 additions and 67 deletions.
diff --git a/packages/react/src/components/Tag/Tag.stories.js b/packages/react/src/components/Tag/Tag.stories.js
@@ -11,113 +11,122 @@ import { default as Tag } from '../Tag';
 export default {
   title: 'Components/Tag',
   component: Tag,
-  argTypes: {
-    size: {
-      options: ['sm', 'md'],
-      control: { type: 'select' },
-    },
-  },
 };
 
-export const Default = (args) => {
+export const Default = () => {
   return (
     <>
-      <Tag
-        className="some-class"
-        type="red"
-        size="sm"
-        title="Clear Filter"
-        {...args}>
+      <Tag className="some-class" type="red" size="sm" title="Clear Filter">
         {'Tag content'}
       </Tag>
-      <Tag
-        className="some-class"
-        type="magenta"
-        size="sm"
-        title="Clear Filter"
-        {...args}>
+      <Tag className="some-class" type="magenta" size="sm" title="Clear Filter">
         {'Tag content'}
       </Tag>
-      <Tag
-        className="some-class"
-        type="purple"
-        size="sm"
-        title="Clear Filter"
-        {...args}>
+      <Tag className="some-class" type="purple" size="sm" title="Clear Filter">
         {'Tag content'}
       </Tag>
-      <Tag
-        className="some-class"
-        type="blue"
-        size="sm"
-        title="Clear Filter"
-        {...args}>
+      <Tag className="some-class" type="blue" size="sm" title="Clear Filter">
         {'Tag content'}
       </Tag>
-      <Tag
-        className="some-class"
-        type="cyan"
-        size="sm"
-        title="Clear Filter"
-        {...args}>
+      <Tag className="some-class" type="cyan" size="sm" title="Clear Filter">
         {'Tag content'}
       </Tag>
-      <Tag
-        className="some-class"
-        type="teal"
-        size="sm"
-        title="Clear Filter"
-        {...args}>
+      <Tag className="some-class" type="teal" size="sm" title="Clear Filter">
         {'Tag content'}
       </Tag>
-      <Tag
-        className="some-class"
-        type="green"
-        size="sm"
-        title="Clear Filter"
-        {...args}>
+      <Tag className="some-class" type="green" size="sm" title="Clear Filter">
         {'Tag content'}
       </Tag>
-      <Tag
-        className="some-class"
-        type="gray"
-        size="sm"
-        title="Clear Filter"
-        {...args}>
+      <Tag className="some-class" type="gray" size="sm" title="Clear Filter">
         {'Tag content'}
       </Tag>
       <Tag
         className="some-class"
         type="cool-gray"
         size="sm"
-        title="Clear Filter"
-        {...args}>
+        title="Clear Filter">
         {'Tag content'}
       </Tag>
       <Tag
         className="some-class"
         type="warm-gray"
         size="sm"
-        title="Clear Filter"
-        {...args}>
+        title="Clear Filter">
         {'Tag content'}
       </Tag>
       <Tag
         className="some-class"
         type="high-contrast"
         size="sm"
-        title="Clear Filter"
-        {...args}>
+        title="Clear Filter">
         {'Tag content'}
       </Tag>
-      <Tag
-        className="some-class"
-        type="outline"
-        size="sm"
-        title="Clear Filter"
-        {...args}>
+      <Tag className="some-class" type="outline" size="sm" title="Clear Filter">
         {'Tag content'}
       </Tag>
     </>
   );
 };
+
+export const Playground = (args) => {
+  return <Tag {...args}>{'Tag content'}</Tag>;
+};
+
+Playground.argTypes = {
+  children: {
+    control: false,
+  },
+  className: {
+    control: false,
+  },
+  disabled: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  filter: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  id: {
+    control: false,
+  },
+  renderIcon: {
+    control: false,
+  },
+  size: {
+    defaultValue: 'md',
+    options: ['sm', 'md'],
+    control: {
+      type: 'select',
+    },
+  },
+  title: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Clear filter',
+  },
+  type: {
+    options: [
+      'red',
+      'magenta',
+      'purple',
+      'blue',
+      'cyan',
+      'teal',
+      'green',
+      'gray',
+      'cool-gray',
+      'warm-gray',
+      'high-contrast',
+      'outline',
+    ],
+    control: {
+      type: 'select',
+    },
+  },
+};