From a2b1a827347779e375025bb05cd09a96deefab94 Mon Sep 17 00:00:00 2001
From: Sabina Talipova <sabina.talipova@silverstripe.com>
Date: Mon, 12 Jun 2023 15:35:04 +1200
Subject: [PATCH 1/2] FIX Replace 4 space indent with 2 spaces

---
 client/src/components/tests/TagField-story.js | 58 +++++++++----------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/client/src/components/tests/TagField-story.js b/client/src/components/tests/TagField-story.js
index d4f9143..85d9cde 100644
--- a/client/src/components/tests/TagField-story.js
+++ b/client/src/components/tests/TagField-story.js
@@ -2,40 +2,40 @@ import React from 'react';
 import TagField from 'components/TagField';
 
 export default {
-    title: 'TagField/TagField',
+  title: 'TagField/TagField',
 
-    decorators: [
-        (storyFn) => (
-            <div style={{ width: '250px' }} className="ss-tag-field">
-                {storyFn()}
-            </div>
-        ),
-    ],
+  decorators: [
+    (storyFn) => (
+      <div style={{ width: '250px' }} className="ss-tag-field">
+        {storyFn()}
+      </div>
+    ),
+  ],
 };
 
 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 },
-      ]}
-    />
+  <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 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 },
-      ]}
-    />
+  <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 },
+    ]}
+  />
 );

From f6670206780db4525e8709ec3d6cc01ef55ecda5 Mon Sep 17 00:00:00 2001
From: Sabina Talipova <sabina.talipova@silverstripe.com>
Date: Wed, 14 Jun 2023 09:07:25 +1200
Subject: [PATCH 2/2] ENH Storybook Doc Blocks

---
 client/src/components/tests/TagField-story.js | 121 ++++++++++++++----
 1 file changed, 95 insertions(+), 26 deletions(-)

diff --git a/client/src/components/tests/TagField-story.js b/client/src/components/tests/TagField-story.js
index 85d9cde..89feaf7 100644
--- 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';
+
+const options = [
+  { Title: 'One', Value: 1 },
+  { Title: 'Two', Value: 2 },
+  { Title: 'Three', Value: 3 },
+  { Title: 'Four', Value: 4 },
+  { Title: 'Five', Value: 5 },
+];
 
 export default {
   title: 'TagField/TagField',
-
-  decorators: [
-    (storyFn) => (
-      <div style={{ width: '250px' }} className="ss-tag-field">
-        {storyFn()}
-      </div>
-    ),
-  ],
+  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 = () => (
+export const SimpleExample = (args) => (
   <TagField
-    name="test"
-    options={[
-      { Title: 'One', Value: 1 },
-      { Title: 'Two', Value: 2 },
-      { Title: 'Three', Value: 3 },
-      { Title: 'Four', Value: 4 },
-      { Title: 'Five', Value: 5 },
-    ]}
+    {...args}
   />
 );
 
-export const MultipleSelection = () => (
+export const MultipleSelection = (args) => (
   <TagField
-    name="test"
+    {...args}
     multi
-    options={[
-      { Title: 'One', Value: 1 },
-      { Title: 'Two', Value: 2 },
-      { Title: 'Three', Value: 3 },
-      { Title: 'Four', Value: 4 },
-      { Title: 'Five', Value: 5 },
-    ]}
   />
 );