Merge pull request #245 from creative-commoners/pulls/3/storybook-docs

ENH Storybook documentation
silverstripe · Jun 19, 2023 · af27f42 · af27f42
2 parents 47f86a6 + f667020
commit af27f42
Showing 1 changed file with 101 additions and 32 deletions.
diff --git a/client/src/components/tests/TagField-story.js b/client/src/components/tests/TagField-story.js
@@ -1,41 +1,110 @@
 import React from 'react';
 import TagField from 'components/TagField';
+import { Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
 
-export default {
-    title: 'TagField/TagField',
+const options = [
+  { Title: 'One', Value: 1 },
+  { Title: 'Two', Value: 2 },
+  { Title: 'Three', Value: 3 },
+  { Title: 'Four', Value: 4 },
+  { Title: 'Five', Value: 5 },
+];
 
-    decorators: [
-        (storyFn) => (
-            <div style={{ width: '250px' }} className="ss-tag-field">
-                {storyFn()}
-            </div>
-        ),
-    ],
+export default {
+  title: 'TagField/TagField',
+  component: TagField,
+  decorators: [],
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'The Tag Field component.'
+      },
+      canvas: {
+        sourceState: 'shown',
+      },
+    }
+  },
+  argTypes: {
+    name: {
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: null },
+      },
+    },
+    options: {
+      description: 'List of tags options',
+      control: 'select',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    labelKey: {
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Title' },
+      },
+    },
+    valueKey: {
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Value' },
+      },
+    },
+    lazyLoad: {
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    creatable: {
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    multi: {
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    optionUrl: {
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: null },
+      },
+    },
+  },
+  args: {
+    name: 'Test',
+    options
+  }
 };
 
-export const SimpleExample = () => (
-    <TagField
-      name="test"
-      options={[
-        { Title: 'One', Value: 1 },
-        { Title: 'Two', Value: 2 },
-        { Title: 'Three', Value: 3 },
-        { Title: 'Four', Value: 4 },
-        { Title: 'Five', Value: 5 },
-      ]}
-    />
+export const SimpleExample = (args) => (
+  <TagField
+    {...args}
+  />
 );
 
-export const MultipleSelection = () => (
-    <TagField
-      name="test"
-      multi
-      options={[
-        { Title: 'One', Value: 1 },
-        { Title: 'Two', Value: 2 },
-        { Title: 'Three', Value: 3 },
-        { Title: 'Four', Value: 4 },
-        { Title: 'Five', Value: 5 },
-      ]}
-    />
+export const MultipleSelection = (args) => (
+  <TagField
+    {...args}
+    multi
+  />
 );