📝 docs: improve storybook table categories

Author: e1en0r

src/components/Divider/stories/ColoredDivider.stories.tsx

@@ -8,8 +8,6 @@ import { ColoredDivider, ColoredDividerProps } from '../ColoredDivider';
 import dividerStory from './Divider.stories';
 
 const argTypes = { ...dividerStory.argTypes };
-delete argTypes.contrast;
-delete argTypes.variant;
 
 export default {
   ...dividerStory,
@@ -29,6 +27,10 @@ export default {
   },
   parameters: {
     ...dividerStory.parameters,
+    controls: {
+      ...dividerStory.parameters?.controls,
+      exclude: ['contrast', 'variant'],
+    },
     docs: {
       ...dividerStory.parameters?.docs,
       page: () => (

src/components/Divider/stories/StyledDivider.stories.tsx

@@ -6,9 +6,6 @@ import { StyledDivider, StyledDividerProps } from '../StyledDivider';
 import dividerStory from './Divider.stories';
 
 const argTypes = { ...dividerStory.argTypes };
-delete argTypes.contrast;
-delete argTypes.themeId;
-delete argTypes.variant;
 
 export default {
   ...dividerStory,
@@ -24,6 +21,10 @@ export default {
   },
   parameters: {
     ...dividerStory.parameters,
+    controls: {
+      ...dividerStory.parameters?.controls,
+      exclude: ['contrast', 'themeId', 'variant'],
+    },
     docs: {
       ...dividerStory.parameters?.docs,
       page: () => (

src/components/Footer/stories/StyledFooter.stories.tsx

@@ -14,6 +14,27 @@ export default {
   title: 'Surfaces/Footer/StyledFooter',
   component: StyledFooter,
   argTypes: {
+    height: {
+      table: {
+        category: 'Appearance',
+      },
+    },
+
+    backgroundColor: {
+      table: {
+        category: 'Styled',
+      },
+    },
+    borderColor: {
+      table: {
+        category: 'Styled',
+      },
+    },
+    textColor: {
+      table: {
+        category: 'Styled',
+      },
+    },
     footerColor: {
       table: {
         category: 'Styled',

src/components/Form/Fieldset/stories/Fieldset.stories.tsx

@@ -15,6 +15,9 @@ export default {
       control: {
         type: 'text',
       },
+      table: {
+        category: 'Appearance',
+      },
     },
 
     className: {

src/components/Form/Label/stories/StyledLabel.stories.tsx

@@ -29,6 +29,11 @@ export default {
         category: 'Styled',
       },
     },
+    mutedTextColor: {
+      table: {
+        category: 'Styled',
+      },
+    },
     textColor: {
       table: {
         category: 'Styled',

src/components/Form/Slider/stories/MultiColorSlider.stories.tsx

@@ -15,6 +15,11 @@ export default {
       },
     },
 
+    colors: {
+      table: {
+        category: 'Appearance',
+      },
+    },
     scale: {
       options: ['small', undefined],
       control: {
@@ -47,6 +52,16 @@ export default {
         category: 'Input',
       },
     },
+    id: {
+      table: {
+        category: 'Input',
+      },
+    },
+    name: {
+      table: {
+        category: 'Input',
+      },
+    },
     value: {
       table: {
         category: 'Input',

src/components/Form/Toggle/stories/Toggle.stories.tsx

@@ -110,6 +110,7 @@ export default {
   ],
   parameters: {
     controls: {
+      exclude: ['aria-label'],
       sort: 'requiredFirst',
     },
     docs: {

src/components/Header/stories/StyledHeader.stories.tsx

@@ -14,11 +14,32 @@ export default {
   title: 'Surfaces/Header/StyledHeader',
   component: StyledHeader,
   argTypes: {
+    height: {
+      table: {
+        category: 'Styled',
+      },
+    },
+
+    backgroundColor: {
+      table: {
+        category: 'Styled',
+      },
+    },
+    borderColor: {
+      table: {
+        category: 'Styled',
+      },
+    },
     headerColor: {
       table: {
         category: 'Styled',
       },
     },
+    textColor: {
+      table: {
+        category: 'Styled',
+      },
+    },
     ...argTypes,
   },
   parameters: {

src/components/Link/stories/Link.stories.tsx

@@ -52,6 +52,11 @@ export default {
         category: 'Uncommon',
       },
     },
+    rel: {
+      table: {
+        category: 'Uncommon',
+      },
+    },
     style: {
       table: {
         category: 'Uncommon',

src/components/Link/stories/LinkContainer.stories.tsx

@@ -15,6 +15,12 @@ export default {
       },
     },
 
+    target: {
+      table: {
+        category: 'Anchor',
+      },
+    },
+
     underline: {
       table: {
         category: 'Appearance',

src/components/List/stories/List.stories.tsx

@@ -134,7 +134,7 @@ export default {
   },
   parameters: {
     controls: {
-      exclude: ['children'],
+      exclude: ['aria-label', 'children'],
       sort: 'requiredFirst',
     },
     docs: {

src/components/Progress/stories/Progress.stories.tsx

@@ -106,6 +106,7 @@ export default {
   ],
   parameters: {
     controls: {
+      exclude: ['aria-label'],
       sort: 'requiredFirst',
     },
     docs: {

src/components/Progress/stories/StyledProgress.stories.tsx

@@ -7,9 +7,6 @@ import { StyledProgress, StyledProgressProps } from '../StyledProgress';
 import progressStory from './Progress.stories';
 
 const argTypes: Partial<ArgTypes<ProgressProps>> = { ...progressStory.argTypes };
-delete argTypes.color;
-delete argTypes.contrast;
-delete argTypes.themeId;
 
 export default {
   ...progressStory,
@@ -35,6 +32,10 @@ export default {
   },
   parameters: {
     ...progressStory.parameters,
+    controls: {
+      ...progressStory.parameters?.controls,
+      exclude: ['color', 'contrast', 'theme', 'aria-label'],
+    },
     docs: {
       ...progressStory.parameters?.docs,
       page: () => (

src/components/Rhythm/stories/Rhythm.stories.tsx

@@ -17,6 +17,17 @@ export default {
       },
     },
 
+    grouped: {
+      table: {
+        category: 'Container',
+      },
+    },
+    wrapper: {
+      table: {
+        category: 'Container',
+      },
+    },
+
     m: {
       control: {
         type: 'number',

src/components/Shade/stories/StyledShade.stories.tsx

@@ -7,8 +7,6 @@ import { StyledShade } from '../StyledShade';
 import shadeStory from './Shade.stories';
 
 const argTypes = { ...shadeStory.argTypes };
-delete argTypes.color;
-delete argTypes.themeId;
 
 export default {
   ...shadeStory,
@@ -39,6 +37,10 @@ export default {
   },
   parameters: {
     ...shadeStory.parameters,
+    controls: {
+      ...shadeStory.parameters?.controls,
+      exclude: ['color', 'theme', 'themeId'],
+    },
     docs: {
       ...shadeStory.parameters?.docs,
       page: () => (

src/components/Tag/stories/Tag.stories.tsx

@@ -51,6 +51,12 @@ export default {
       },
     },
 
+    onClick: {
+      table: {
+        category: 'Actions',
+      },
+    },
+
     as: {
       control: {
         disable: true,
@@ -203,6 +209,14 @@ LargeSize.args = {
   size: 'large',
 };
 
+export const Actionable = Template.bind({});
+Actionable.storyName = 'Actionable';
+Actionable.args = {
+  ...defaultArgs,
+  actionable: true,
+  onClick: () => console.log('clicked'),
+};
+
 export const ActiveState = Template.bind({});
 ActiveState.storyName = 'State: Active';
 ActiveState.args = {

src/components/Triangle/stories/Triangle.stories.tsx

@@ -12,14 +12,20 @@ export default {
       control: {
         type: 'color',
       },
-      category: 'Appearance',
+      table: {
+        category: 'Appearance',
+      },
     },
     position: {
       control: 'radio',
-      category: 'Appearance',
+      table: {
+        category: 'Appearance',
+      },
     },
     size: {
-      category: 'Appearance',
+      table: {
+        category: 'Appearance',
+      },
     },
 
     className: {

src/compositions/Accordion/stories/Accordion.stories.tsx

@@ -61,6 +61,11 @@ export default {
       },
     },
 
+    onKeyDown: {
+      table: {
+        category: 'Actions',
+      },
+    },
     onSelect: {
       table: {
         category: 'Actions',

src/compositions/Chip/stories/Chip.stories.tsx

@@ -72,6 +72,12 @@ export default {
       },
     },
 
+    onClick: {
+      table: {
+        category: 'Actions',
+      },
+    },
+
     as: {
       control: {
         disable: true,
@@ -201,6 +207,7 @@ Actionable.args = {
   ...defaultArgs,
   actionable: true,
   avatar: { initials: 'P', color: 'primary' as AvatarProps['color'] },
+  onClick: () => console.log('clicked'),
   size: 'medium',
 };
 

src/compositions/Dropdown/stories/Dropdown.stories.tsx

@@ -62,6 +62,11 @@ export default {
         category: 'Appearance',
       },
     },
+    renderLabel: {
+      table: {
+        category: 'Appearance',
+      },
+    },
     size: {
       table: {
         category: 'Appearance',

src/compositions/Dropdown/stories/DropdownWithTags.stories.tsx

@@ -62,6 +62,11 @@ export default {
         category: 'Appearance',
       },
     },
+    renderLabel: {
+      table: {
+        category: 'Appearance',
+      },
+    },
     size: {
       table: {
         category: 'Appearance',