Merge pull request #210 from CityOfDetroit/story.utils

Use common story arguments
CityOfDetroit · May 2, 2024 · 2d7a391 · 2d7a391
2 parents e1becdf + 882e029
commit 2d7a391
Show file tree

Hide file tree

Showing 18 changed files with 190 additions and 333 deletions.
diff --git a/src/shared/js/storybook/args-utils.js b/src/shared/js/storybook/args-utils.js
@@ -0,0 +1,112 @@
+const COMMON_STORY_ARGS = {
+  disabled: {
+    control: { type: 'boolean' },
+  },
+  required: {
+    control: { type: 'boolean' },
+  },
+  checked: {
+    control: { type: 'boolean' },
+  },
+  readOnly: {
+    control: { type: 'boolean' },
+  },
+  bootstrapColor: {
+    control: { type: 'select' },
+    options: [
+      'primary',
+      'secondary',
+      'success',
+      'info',
+      'warning',
+      'danger',
+      'light',
+      'dark',
+      'accent-primary',
+      'accent-secondary',
+    ],
+  },
+  // TODO: Use bootstrap color names. Issue #202.
+  numberColor: {
+    control: { type: 'select' },
+    options: [
+      'color-1',
+      'color-2',
+      'color-3',
+      'color-4',
+      'color-5',
+      'color-light',
+      'color-dark',
+    ],
+  },
+  order: {
+    control: { type: 'select' },
+    options: ['left', 'right'],
+  },
+  // TODO: Make the following two size attr names/values
+  // consistent. Issue #202.
+  size: {
+    control: { type: 'select' },
+    options: ['sm', 'md', 'lg', 'xl'],
+  },
+  longSize: {
+    control: { type: 'select' },
+    options: ['small', 'medium', 'large', 'x-large'],
+  },
+  icon: {
+    control: { type: 'select' },
+    options: [
+      'bicycle',
+      'bounding-box',
+      'bounding-box-circle',
+      'building',
+      'building-fill',
+      'buildings',
+      'buildings-fill',
+      'bus-front',
+      'bus-front-fill',
+      'calendar',
+      'calendar-fill',
+      'calendar-date',
+      'calendar-date-fill',
+      'cash',
+      'check-circle',
+      'check-circle-fill',
+      'chevron-right',
+      'chevron-right-circle',
+      'chevron-right-circle-fill',
+      'chevron-left',
+      'chevron-left-circle',
+      'chevron-left-circle-fill',
+      'chevron-up',
+      'chevron-up-circle',
+      'chevron-up-circle-fill',
+      'chevron-down',
+      'chevron-down-circle',
+      'chevron-down-circle-fill',
+      'currency-dollar',
+      'exclamation-circle',
+      'exclamation-circle-fill',
+      'exclamation-triangle',
+      'file-earmark',
+      'funnel',
+      'funnel-fill',
+      'house',
+      'house-fill',
+      'list-task',
+      'newspaper',
+      'no-parking',
+      'no-parking-fill',
+      'journals',
+      'p-circle',
+      'p-circle-fill',
+      'toilet',
+      'universal-access',
+      'universal-access-circle',
+      'wifi',
+      'wifi-off',
+    ].sort(),
+  },
+};
+
+export { COMMON_STORY_ARGS };
diff --git a/src/stories/actionbutton.stories.js b/src/stories/actionbutton.stories.js
@@ -1,13 +1,16 @@
 import { html } from 'lit-html';
 import '../components/atoms/ActionButton/cod-action-button';
 import '../components/atoms/Icon/cod-icon';
-import IconStory from './icon.stories';
+import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
   component: 'cod-action-button',
   title: 'Components/Atoms/ActionButton',
   // 👇 Creates specific argTypes
   argTypes: {
+    // TODO: Make this attr name and accepted
+    // values consistent with other action button, progress bar,
+    // etc. Issue #202.
     buttonColor: {
       options: [
         'btn-outline-primary',
@@ -16,7 +19,7 @@ export default {
       ],
       control: 'select',
     },
-    icon: IconStory.argTypes.icon,
+    icon: COMMON_STORY_ARGS.icon,
     title: {
       control: 'text',
     },

diff --git a/src/stories/actionbuttonV2.stories.js b/src/stories/actionbuttonV2.stories.js
@@ -1,13 +1,16 @@
 import { html } from 'lit-html';
 import '../components/atoms/ActionButtonV2/cod-action-button-v2';
 import '../components/atoms/Icon/cod-icon';
-import IconStory from './icon.stories';
+import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
   component: 'cod-action-button-v2',
   title: 'Components/Atoms/ActionButtonV2',
   // 👇 Creates specific argTypes
   argTypes: {
+    // TODO: Make this attr name and accepted
+    // values consistent with other action button, progress bar,
+    // etc. Issue #202.
     buttonColor: {
       options: [
         'btn-outline-primary',
@@ -16,7 +19,7 @@ export default {
       ],
       control: 'select',
     },
-    icon: IconStory.argTypes.icon,
+    icon: COMMON_STORY_ARGS.icon,
     title: {
       control: 'text',
     },

diff --git a/src/stories/alert.stories.js b/src/stories/alert.stories.js
@@ -1,41 +1,13 @@
 import '../components/atoms/Alert/cod-alert';
+import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
   title: 'Components/Atoms/Alert',
   argTypes: {
-    icon: {
-      control: { type: 'select' },
-      options: [
-        'house',
-        'house-fill',
-        'exclamation-circle',
-        'exclamation-circle-fill',
-        'exclamation-triangle',
-        'check-circle',
-        'check-circle-fill',
-      ],
-    },
-    iconOrder: {
-      control: { type: 'select' },
-      options: ['left', 'right'],
-    },
-    iconSize: {
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large', 'x-large'],
-    },
-    backgroundColor: {
-      control: { type: 'select' },
-      options: [
-        'primary',
-        'secondary',
-        'success',
-        'info',
-        'warning',
-        'danger',
-        'light',
-        'dark',
-      ],
-    },
+    icon: COMMON_STORY_ARGS.icon,
+    iconOrder: COMMON_STORY_ARGS.order,
+    iconSize: COMMON_STORY_ARGS.longSize,
+    backgroundColor: COMMON_STORY_ARGS.bootstrapColor,
   },
 };
 // Template

diff --git a/src/stories/badge.stories.js b/src/stories/badge.stories.js
@@ -1,5 +1,6 @@
 import { html } from 'lit-html';
 import '../components/atoms/Badge/cod-badge';
+import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
   title: 'Components/Atoms/Badge',
@@ -9,20 +10,7 @@ export default {
       options: ['span', 'div', 'a'],
       defaultValue: 'span',
     },
-    backgroundColor: {
-      control: { type: 'select' },
-      options: [
-        'primary',
-        'secondary',
-        'success',
-        'info',
-        'warning',
-        'danger',
-        'light',
-        'dark',
-      ],
-      defaultValue: 'primary',
-    },
+    backgroundColor: COMMON_STORY_ARGS.bootstrapColor,
   },
 };
 // Template

diff --git a/src/stories/button.stories.js b/src/stories/button.stories.js
@@ -1,59 +1,28 @@
 import '../components/atoms/Button/cod-button';
 import '../components/atoms/Icon/cod-icon';
+import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
   title: 'Components/Atoms/Button',
   argTypes: {
     primary: {
       control: { type: 'boolean' },
     },
-    disable: {
-      control: { type: 'boolean' },
-    },
-    backgroundColor: {
-      control: { type: 'select' },
-      options: [
-        'primary',
-        'secondary',
-        'success',
-        'info',
-        'warning',
-        'danger',
-        'light',
-        'dark',
-        'accent-primary',
-        'accent-secondary',
-      ],
-    },
-    onClick: { action: 'onClick' },
+    disable: COMMON_STORY_ARGS.disabled,
+    // TODO: Make this attr name and accepted
+    // values consistent with other action button, progress bar,
+    // etc. Issue #202.
+    backgroundColor: COMMON_STORY_ARGS.bootstrapColor,
+    // TODO: Add support for lg and xl to make size
+    // consistent. Issue #202.
     size: {
       control: { type: 'select' },
       options: ['sm', 'md', 'lg'],
     },
-    icon: {
-      control: { type: 'select' },
-      options: [
-        'house',
-        'house-fill',
-        'exclamation-circle',
-        'exclamation-circle-fill',
-        'exclamation-triangle',
-        'check-circle',
-        'check-circle-fill',
-        'calendar',
-        'calendar-fill',
-        'calendar-date',
-        'calendar-date-fill',
-      ],
-    },
-    iconSize: {
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large', 'x-large'],
-    },
-    iconOrder: {
-      control: { type: 'select' },
-      options: ['left', 'right'],
-    },
+    icon: COMMON_STORY_ARGS.icon,
+    onClick: { action: 'onClick' },
+    iconSize: COMMON_STORY_ARGS.longSize,
+    iconOrder: COMMON_STORY_ARGS.order,
     shape: {
       control: { type: 'select' },
       options: ['fluid', 'square'],

diff --git a/src/stories/container.stories.js b/src/stories/container.stories.js
@@ -1,4 +1,5 @@
 import '../components/atoms/Container/cod-container';
+import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
   title: 'Components/Atoms/Container',
@@ -15,18 +16,8 @@ export default {
         'container-fluid',
       ],
     },
-    backgroundColor: {
-      control: { type: 'select' },
-      options: [
-        'color-1',
-        'color-2',
-        'color-3',
-        'color-4',
-        'color-5',
-        'color-light',
-        'color-dark',
-      ],
-    },
+    // TODO: Use bootstrap color names. Issue #202.
+    backgroundColor: COMMON_STORY_ARGS.numberColor,
   },
 };
 // Template

diff --git a/src/stories/form.stories.js b/src/stories/form.stories.js
@@ -1,21 +1,10 @@
 import '../components/organisms/Form/cod-form';
+import { COMMON_STORY_ARGS } from '../shared/js/storybook/args-utils';
 
 export default {
   title: 'Forms/FormValidation',
   argTypes: {
-    backgroundColor: {
-      control: { type: 'select' },
-      options: [
-        'primary',
-        'secondary',
-        'success',
-        'info',
-        'warning',
-        'danger',
-        'light',
-        'dark',
-      ],
-    },
+    backgroundColor: COMMON_STORY_ARGS.bootstrapColor,
   },
 };
 // Template