Categorize stories in Common, Widgets and Other (#286)

laurensgroeneveld · web-flow · commit 6a9efd18f073 · 2024-01-25T10:32:49.000+02:00
* Update Storybook documentation about passing icon as prop

* Add custom code example to banner
diff --git a/design-library/.storybook/preview.cjs b/design-library/.storybook/preview.cjs
@@ -15,7 +15,7 @@ const preview = {
   parameters: {
     options: {
       storySort: {
-        order: ['Introduction', 'Tokens', 'Forms', 'Components', '*'],
+        order: ['Introduction', 'Tokens', 'Forms', 'Common', 'Widgets', '*'],
       },
     },
     docs: {
diff --git a/design-library/scripts/create-component.js b/design-library/scripts/create-component.js
@@ -65,7 +65,7 @@ async function createStoryFile(componentName) {
 import type { Meta, StoryFn } from "@storybook/vue3";
 
 export default {
-  title: "Components/${componentName}",
+  title: "Other/${componentName}",
   component: ${componentName},
   argTypes: {
 
diff --git a/design-library/src/components/BccAlert/BccAlert.stories.ts b/design-library/src/components/BccAlert/BccAlert.stories.ts
@@ -5,7 +5,7 @@ import type { Meta, StoryFn } from "@storybook/vue3";
 import { Face2Icon } from "@bcc-code/icons-vue";
 
 export default {
-  title: "Components/BccAlert",
+  title: "Common/BccAlert",
   component: BccAlert,
   argTypes: {
     context: {
diff --git a/design-library/src/components/BccAvatar/BccAvatar.stories.ts b/design-library/src/components/BccAvatar/BccAvatar.stories.ts
@@ -3,7 +3,7 @@ import BccAvatar from "./BccAvatar.vue";
 import type { Meta, StoryFn } from "@storybook/vue3";
 
 export default {
-  title: "Components/BccAvatar",
+  title: "Other/BccAvatar",
   component: BccAvatar,
   argTypes: {
     gender: {
diff --git a/design-library/src/components/BccBadge/BccBadge.stories.ts b/design-library/src/components/BccBadge/BccBadge.stories.ts
@@ -7,7 +7,7 @@ import type { Meta, StoryFn } from "@storybook/vue3";
  * A badge component to be used for informational text, like "new" or "recommended". See the `BccPin` component for a differently styled version for numbers.
  */
 export default {
-  title: "Components/BccBadge",
+  title: "Common/BccBadge",
   component: BccBadge,
   argTypes: {
     context: {
diff --git a/design-library/src/components/BccBanner/BccBanner.stories.ts b/design-library/src/components/BccBanner/BccBanner.stories.ts
@@ -8,7 +8,7 @@ import BccBanner from "./BccBanner.vue";
 import type { Meta, StoryFn } from "@storybook/vue3";
 
 export default {
-  title: "Components/BccBanner",
+  title: "Other/BccBanner",
   component: BccBanner,
   argTypes: {
     variant: {
@@ -76,3 +76,23 @@ Example.args = {
     },
   ],
 };
+Example.parameters = {
+  docs: {
+    source: {
+      language: "html",
+      code: `
+<BccBanner
+  :icon="BccFillIcon"
+  title="Banner title"
+  open
+  closeOnAction
+  @close="close"
+  :actions="actions"
+>
+   <small>SLOTTED CONTENT</small>
+   <p>Welcome to the jungle. Hope you have fun!</p>
+</BccBanner>
+    `,
+    },
+  },
+};
diff --git a/design-library/src/components/BccCapacityIndicator/BccCapacityIndicator.stories.ts b/design-library/src/components/BccCapacityIndicator/BccCapacityIndicator.stories.ts
@@ -6,7 +6,7 @@ import type { Meta, StoryFn } from "@storybook/vue3";
  * Show the remaining capacity, for example for activities. Pairs well with the `StatusIndicator` for more custom status states
  */
 export default {
-  title: "Components/BccCapacityIndicator",
+  title: "Other/BccCapacityIndicator",
   component: BccCapacityIndicator,
   argTypes: {
     total: {
diff --git a/design-library/src/components/BccCookieBanner/BccCookieBanner.stories.ts b/design-library/src/components/BccCookieBanner/BccCookieBanner.stories.ts
@@ -7,7 +7,7 @@ import type { Meta, StoryFn } from "@storybook/vue3";
  * A cookie banner with an accept and decline button. Emits `decline` and `accept` events when the buttons are clicked.
  */
 export default {
-  title: "Components/BccCookieBanner",
+  title: "Other/BccCookieBanner",
   component: BccCookieBanner,
   argTypes: {
     showOverlay: {
diff --git a/design-library/src/components/BccGraphic/BccGraphic.stories.ts b/design-library/src/components/BccGraphic/BccGraphic.stories.ts
@@ -3,7 +3,7 @@ import BccGraphic from "./BccGraphic.vue";
 import type { Meta, StoryFn } from "@storybook/vue3";
 
 export default {
-  title: "Components/BccGraphic",
+  title: "Widgets/BccGraphic",
   component: BccGraphic,
   argTypes: {
     rounding: {
diff --git a/design-library/src/components/BccHeader/BccHeader.stories.ts b/design-library/src/components/BccHeader/BccHeader.stories.ts
@@ -3,7 +3,7 @@ import { Face2Icon } from "@bcc-code/icons-vue";
 import type { Meta, StoryFn } from "@storybook/vue3";
 
 export default {
-  title: "Components/BccHeader",
+  title: "Widgets/BccHeader",
   component: BccHeader,
   argTypes: {},
 } as Meta<typeof BccHeader>;
diff --git a/design-library/src/components/BccInfo/BccInfo.stories.ts b/design-library/src/components/BccInfo/BccInfo.stories.ts
@@ -4,7 +4,7 @@ import { ClockLoader10Icon } from "@bcc-code/icons-vue";
 import type { Meta, StoryFn } from "@storybook/vue3";
 
 export default {
-  title: "Components/BccInfo",
+  title: "Widgets/BccInfo",
   component: BccInfo,
   argTypes: {},
 } as Meta<typeof BccInfo>;
diff --git a/design-library/src/components/BccItemTile/BccItemTile.stories.ts b/design-library/src/components/BccItemTile/BccItemTile.stories.ts
@@ -4,7 +4,7 @@ import BccItemTile from "./BccItemTile.vue";
 import type { Meta, StoryFn } from "@storybook/vue3";
 
 export default {
-  title: "Components/BccItemTile",
+  title: "Widgets/BccItemTile",
   component: BccItemTile,
   argTypes: {},
 } as Meta<typeof BccItemTile>;
diff --git a/design-library/src/components/BccLinkItem/BccLinkItem.stories.ts b/design-library/src/components/BccLinkItem/BccLinkItem.stories.ts
@@ -6,7 +6,7 @@ import type { Meta, StoryFn } from "@storybook/vue3";
  * Render multiple of these in sequence to render a list styled links
  */
 export default {
-  title: "Components/BccLinkItem",
+  title: "Widgets/BccLinkItem",
   component: BccLinkItem,
   argTypes: {},
 } as Meta<typeof BccLinkItem>;
diff --git a/design-library/src/components/BccModal/BccModal.stories.ts b/design-library/src/components/BccModal/BccModal.stories.ts
@@ -8,7 +8,7 @@ import type { Meta, StoryFn } from "@storybook/vue3";
  * A versatile modal component. Be sure to read the [guidelines](https://bccit.notion.site/Modals-e79ddadb127d4ff6aa6650379132d09a) on how to use this component.
  */
 export default {
-  title: "Components/BccModal",
+  title: "Common/BccModal",
   component: BccModal,
   argTypes: {},
 } as Meta<typeof BccModal>;
diff --git a/design-library/src/components/BccPin/BccPin.stories.ts b/design-library/src/components/BccPin/BccPin.stories.ts
@@ -7,7 +7,7 @@ import type { Meta, StoryFn } from "@storybook/vue3";
  * A companion to the badge component, to render just an icon or a number like "42" or a counter like "4/10". See the `BccBadge` component for a larger, differently styled version to be used with text.
  */
 export default {
-  title: "Components/BccPin",
+  title: "Other/BccPin",
   component: BccPin,
   argTypes: {
     context: {
diff --git a/design-library/src/components/BccProgress/BccProgress.stories.ts b/design-library/src/components/BccProgress/BccProgress.stories.ts
@@ -6,7 +6,7 @@ import type { Meta, StoryFn } from "@storybook/vue3";
  * A `progress` element supporting current and max values
  */
 export default {
-  title: "Components/BccProgress",
+  title: "Common/BccProgress",
   component: BccProgress,
   argTypes: {
     value: {
diff --git a/design-library/src/components/BccReact/BccReact.stories.ts b/design-library/src/components/BccReact/BccReact.stories.ts
@@ -3,7 +3,7 @@ import BccReact from "./BccReact.vue";
 import type { Meta, StoryFn } from "@storybook/vue3";
 
 export default {
-  title: "Components/BccReact",
+  title: "Other/BccReact",
   component: BccReact,
   argTypes: {},
 } as Meta<typeof BccReact>;
diff --git a/design-library/src/components/BccSpinner/BccSpinner.stories.ts b/design-library/src/components/BccSpinner/BccSpinner.stories.ts
@@ -3,7 +3,7 @@ import BccSpinner from "./BccSpinner.vue";
 import type { Meta, StoryFn } from "@storybook/vue3";
 
 export default {
-  title: "Components/BccSpinner",
+  title: "Other/BccSpinner",
   component: BccSpinner,
   argTypes: {
     size: {
diff --git a/design-library/src/components/BccStatusIndicator/BccStatusIndicator.stories.ts b/design-library/src/components/BccStatusIndicator/BccStatusIndicator.stories.ts
@@ -7,7 +7,7 @@ import type { Meta, StoryFn } from "@storybook/vue3";
  * A status indicator icon that pairs well with the `CapacityIndicator`
  */
 export default {
-  title: "Components/BccStatusIndicator",
+  title: "Other/BccStatusIndicator",
   component: BccStatusIndicator,
   argTypes: {
     status: {
diff --git a/design-library/src/components/BccTable/BccTable.stories.ts b/design-library/src/components/BccTable/BccTable.stories.ts
@@ -9,7 +9,7 @@ import type { Meta, StoryFn } from "@storybook/vue3";
  * A versatile table with built-in sorting.
  */
 export default {
-  title: "Components/BccTable",
+  title: "Common/BccTable",
   component: BccTable,
   argTypes: {
     sortDirection: {
diff --git a/design-library/src/components/BccTabs/BccTabs.stories.ts b/design-library/src/components/BccTabs/BccTabs.stories.ts
@@ -11,7 +11,7 @@ import type { Meta, StoryFn } from "@storybook/vue3";
 import { h } from "vue";
 
 export default {
-  title: "Components/BccTabs",
+  title: "Common/BccTabs",
   component: BccTabs,
   argTypes: {
     tabs: {
diff --git a/docs/design-library/writing-storybook-stories.md b/docs/design-library/writing-storybook-stories.md
@@ -32,7 +32,7 @@ In some cases, it might be needed to set which control type Storybook will show.
 
 ```ts{5-9}
 export default {
-  title: "Components/BccButton",
+  title: "Common/BccButton",
   component: BccButton,
   argTypes: {
     variant: {
@@ -122,3 +122,28 @@ export const Disabled: StoryFn<typeof BccButton> = () => ({
   `,
 });
 ```
+
+## Common errors
+### Passing icon as a prop
+It's common that a component has an icon prop that can be passed as component instance. Doing this directly in the Storybook story will lead to an error in Storybook when viewing the code, even though the story will render:
+```ts
+Example.args = {
+  // ❌ Don't do this
+  icon: SearchIcon,
+};
+```
+
+Instead, return the icon in the `setup()` method of the story, and set the prop manually:
+
+```ts
+const Template: StoryFn<...> = (args) => ({
+  setup() {
+    // ✅ Return component in setup
+    return { args, SearchIcon };
+  },
+  // ✅ Set prop directly on the story
+  template: `
+    <BccButton v-bind="args" :icon="SearchIcon">
+```
+
+Alternatively, add a custom code example to the story, as this will bypass Storybook's code rendering feature.
