feat: Show count on tab/panel title

#107
storybookjs · Jul 3, 2021 · 380af98 · 380af98
1 parent 88848b3
commit 380af98
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 3 deletions.
diff --git a/packages/examples/stories/docs/advanced/docs.mdx b/packages/examples/stories/docs/advanced/docs.mdx
@@ -9,10 +9,30 @@ import { TabLink } from './TabLink'
 
 <Subtitle>A list of advanced usages.</Subtitle>
 
+- [Change tab title](#change-tab-title)
 - [Embed multiple designs](#embed-multiple-designs)
 - [Render as tab instead of addon panel](#render-as-tab-instead-of-addon-panel)
 - [Doc Blocks](#doc-blocks)
 
+## Change tab title
+
+You can change the addon tab title (defaulted to `Design`) by setting `name` property of the `design` parameter.
+
+[Example](/?path=/story/docs-advanced-usage--set-tab-name)
+
+```js
+export const myStory = () => <MyComponent />
+
+myStory.parameters = {
+  design: {
+    name: 'Wireframe',
+    type: 'figma',
+    url:
+      'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample',
+  },
+}
+```
+
 ## Embed multiple designs
 
 You can embed more than one designs by passing an array to the `design` parameter.

diff --git a/packages/examples/stories/docs/advanced/index.stories.js b/packages/examples/stories/docs/advanced/index.stories.js
@@ -14,6 +14,17 @@ export default {
   },
 }
 
+export const setTabName = () => <Button>Button</Button>
+
+setTabName.parameters = {
+  design: config({
+    name: 'Wireframe',
+    type: 'figma',
+    url:
+      'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample',
+  }),
+}
+
 export const embedMultipleDesigns = () => <Button>Button</Button>
 
 embedMultipleDesigns.parameters = {

diff --git a/packages/storybook-addon-designs/package.json b/packages/storybook-addon-designs/package.json
@@ -24,6 +24,7 @@
     "@figspec/components": "^0.1.8",
     "@storybook/addon-docs": "6.3.2",
     "@storybook/addons": "6.3.2",
+    "@storybook/api": "6.3.2",
     "@storybook/client-api": "6.3.2",
     "@storybook/components": "6.3.2",
     "@storybook/core-events": "6.3.2",

diff --git a/packages/storybook-addon-designs/src/register/index.tsx b/packages/storybook-addon-designs/src/register/index.tsx
@@ -1,14 +1,35 @@
 /** @jsx jsx */
 import addons, { types, Addon } from '@storybook/addons'
+import { useParameter } from '@storybook/api'
 import { jsx } from '@storybook/theming'
 
 import { AddonName, PanelName, ParameterName } from '../addon'
+import type { Config } from '../config'
 
 import { Wrapper } from './containers/Wrapper'
 
+const DEFAULT_TAB_NAME = 'Design'
+
 export default function register(renderTarget: 'panel' | 'tab') {
-  addons.register(AddonName, api => {
-    const title = 'Design'
+  addons.register(AddonName, (api) => {
+    const title = function () {
+      const param = useParameter<Config | Config[] | undefined>(ParameterName)
+
+      if (!param) {
+        return DEFAULT_TAB_NAME
+      }
+
+      // As the addon shows an additional tab panel, it's better not to
+      // use any of items' name.
+      if (Array.isArray(param)) {
+        return param.length > 0
+          ? `${DEFAULT_TAB_NAME} (${param.length})`
+          : DEFAULT_TAB_NAME
+      }
+
+      return (param.name || DEFAULT_TAB_NAME) + ' (1)'
+    }
+
     const render: Addon['render'] = ({ active, key }) => (
       <Wrapper key={key} active={!!active} />
     )
@@ -20,7 +41,7 @@ export default function register(renderTarget: 'panel' | 'tab') {
         type: types.TAB,
         paramKey: ParameterName,
         route: ({ storyId }) => `/design/${storyId}`,
-        match: ({ viewMode }) => viewMode === 'design'
+        match: ({ viewMode }) => viewMode === 'design',
       })
     } else {
       addons.addPanel(PanelName, { title, paramKey: ParameterName, render })