storybookjs / addon-designs Goto Github PK

Seems like this is caused due to some internal use of react-pdf on storybook-addon-designs
Tried it with Yarn 2 & Storybook 5.2.8 & 6.0.0-alpha.33

If I had to guess I would blame this line: https://github.com/pocka/storybook-addon-designs/blob/9ed436e3e222e3fddbf016d2f0a9135efafb1ebe/packages/storybook-addon-designs/src/register/components/Pdf.tsx#L13

Stacktrace bellow

ERROR in ~/.yarn/$$virtual/react-pdf-virtual-80afc2509e/0/cache/react-pdf-npm-4.1.0-5b5a86f6e3-2.zip/node_modules/react-pdf/dist/entry.webpack.js
Module not found: Error: @storybook/core tried to access worker-loader, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: worker-loader (via "worker-loader")
Required by: @storybook/core@virtual:02badcd84a8115c2d5f73b510f9f022dfca8ce2433db4223310d52c2dc4bbb61fdcf9d2d91c67a3cdaf5123d38a8be4e94605e12dab88fa9de236a0aea6d72ee#npm:6.0.0-alpha.33 (via ~/.yarn/$$virtual/@storybook-core-virtual-a55db608df/0/cache/@storybook-core-npm-6.0.0-alpha.33-85dfb5f3b0-2.zip/node_modules/@storybook/core/)

 @ ~/.yarn/$$virtual/react-pdf-virtual-80afc2509e/0/cache/react-pdf-npm-4.1.0-5b5a86f6e3-2.zip/node_modules/react-pdf/dist/entry.webpack.js 41:45-91
 @ ~/.yarn/$$virtual/storybook-addon-designs-virtual-8693906dc4/0/cache/storybook-addon-designs-npm-5.1.1-c1c64c5fd0-2.zip/node_modules/storybook-addon-designs/lib/register/components/Pdf.js
 @ ~/.yarn/$$virtual/storybook-addon-designs-virtual-8693906dc4/0/cache/storybook-addon-designs-npm-5.1.1-c1c64c5fd0-2.zip/node_modules/storybook-addon-designs/lib/register/components/Wrapper.js
 @ ~/.yarn/$$virtual/storybook-addon-designs-virtual-8693906dc4/0/cache/storybook-addon-designs-npm-5.1.1-c1c64c5fd0-2.zip/node_modules/storybook-addon-designs/lib/register/index.js
 @ ~/.yarn/$$virtual/storybook-addon-designs-virtual-8693906dc4/0/cache/storybook-addon-designs-npm-5.1.1-c1c64c5fd0-2.zip/node_modules/storybook-addon-designs/register.js
 @ ./.storybook/addons.js
 @ multi ~/.yarn/$$virtual/@storybook-core-virtual-a55db608df/0/cache/@storybook-core-npm-6.0.0-alpha.33-85dfb5f3b0-2.zip/node_modules/@storybook/core/dist/server/common/polyfills.js ~/.yarn/$$virtual/@storybook-core-virtual-a55db608df/0/cache/@storybook-core-npm-6.0.0-alpha.33-85dfb5f3b0-2.zip/node_modules/@storybook/core/dist/client/manager/index.js ./.storybook/addons.js

Is your feature request related to a problem? Please describe.
Would be nice to be able to support multiple figma design urls in a single story, since Figma lets you link to specific nodes in the design.

Example usecase; be able to link to separate desktop and mobile design for one story

Describe the solution you'd like
Support multiple figma design urls per story

Describe alternatives you've considered
I could split the story into desktop and mobile, but since you can define viewports, this seems like overkill.

Design types

• figma
• experimental-figspec
• link
• image
• iframe

Additional context
Add any other context or screenshots about the feature request here.

Attempting to link to a Figma group like this:

Throws the following error:

Bug

• Description: When embedding Figma designs, story without allowFullscreen affects story with allowFullscreen: true.

• Versions: 5.4.2

• Reproduction:
  a. Go to story with allowFullscreen: false first

  1. Go to a page without allowFullscreen: https://pocka.github.io/storybook-addon-designs/?path=/story/docs-figma-examples--embed-file
  2. Go to a page with allowFullsreen: true: https://pocka.github.io/storybook-addon-designs/?path=/story/docs-figma-examples--allow-fullscreen. There is no option to the view Figma design in fullscreen, which there should be.

  b. Go to story with allowFullscreen: true first

  1. Go to a page with allowFullscreen: true: https://pocka.github.io/storybook-addon-designs/?path=/story/docs-figma-examples--allow-fullscreen.
  2. Go to a page without allowFullscreen: https://pocka.github.io/storybook-addon-designs/?path=/story/docs-figma-examples--embed-file. There is an option to the view Figma design in fullscreen, which there shouldn't be.

I am using type: "iframe" to load image assets. Reason: type: "image" disables scrolling which doesn't make sense in my case. When using type: "iframe" a loading label is placed behind the iframe itself. If the content of the iframe doesn't fit the full width or height you can see the loading label which can be confusing.

An alternative could be to add an option to type: "image" to enable scrolling and disable offset :)

Hi,

I'm sure I'm doing something wrong, but I cannot figure out how to solve it. This is my situation (after adding addon to main.js file):

`
$ npm run storybook
[email protected] storybook C:\Users\ion.gonzalez\source\repos\E2E\E2ePor\Components
start-storybook -p 9009 -s public

info @storybook/react v6.1.11
info
info => Loading static files from C:\Users\ion.gonzalez\source\repos\E2E\E2ePor\Components\public and serving at /.
info => Loading presets
ERR! Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/presets/introduction/
ERR! [object Object]
info => Loading presets
ERR! Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/presets/introduction/
ERR! [object Object]
info => Loading custom babel config
info => Loading custom babel config
info => Loading 4 other files in "./.storybook"
info => Adding stories defined in ".storybook\main.js"
info => Loading Webpack configuration from node_modules\react-scripts
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack setup
`
https://storybook.js.org/docs/presets/introduction/ doesn't work anymore

and adding /register results me on

Failed to load preset: {"name":"@storybook-addon-designs/register"} on level 1

So, can anyone give me some light here? (much appreciated)

Error: Cannot find module '@storybook-addon-designs/register'

main.js

module.exports = {
  stories: ['../src/**/*.stories.@(js|mdx)'],
  addons: [
    { name: '@storybook/preset-typescript' },
    { name: "@storybook/preset-create-react-app", options: { tsDocgenLoaderOptions: {} }},
    { name: '@storybook/addon-links' },
    { name: '@storybook/addon-docs', options: { configureJSX: true }},
    { name: '@storybook/addon-knobs' },
    { name: '@storybook/addon-viewport' },
    { name: '@storybook-addon-designs' }
  ],
};

When using the "Multiple designs for single story" to load 2 Figma URLs, the 2nd tab loads with the zoom level so small as to appear blank.

The first tab renders the Figma asset at a reasonable size (fits design within the given frame), but the 2nd tab (perhaps because its not displayed and Figma does some type of size calculation when it loads to attempt to size correctly), when the user selects the 2nd tab it gives the user the impression its blank, and only when you click the zoom "+" icon multiple times does the design start to appear and increase in size.

Some Storybook addons like addon-notes can be registered as a panel (appear below the story, current behaviour of this addon) or as a tab (appear alongside 'Canvas', 'Docs' etc.). Can this addon also support registration as a tab?

References:

• Getting Started for addon-docs
• Tab registration
• Panel registration

When using Figma, it's pretty awesome to see the size, spacings, tokens in general of the component:

I'm wondering if it's possible to bring that kind of info to the addon as well. Maybe using Figma API? I would definitely be willing to contribute to this if that's a possible feature!

When I click on the Figma embed examples, nothing loads
https://pocka.github.io/storybook-addon-designs/?path=/story/examples-figma--embed-file

Do you support typescript definitions?

Is your feature request related to a problem? Please describe.
I can't figure out how to add styling to the wrapper where Figma designs are showing. I've tried using:

    design: {
      type: "figma",
      url: "https://www.figma.com/file/Na54d42QCGJdoSwONDMOwz/Navigasjon?node-id=782%3A647",
      style: { backgroundColor: "white" },  // color: white
    },
  },

But it dosn't seem to work.
Would also like this to work with figspec.

Describe the solution you'd like
I would like to specify the styles like in the example above. I saw that it was possible with doc blocks, but I couldn't figure out how to combine doc blocks and a story page.

Describe alternatives you've considered
I tried using Doc Blocks, but couldn't figure it out because of missing documentation.

Design types

• figma
• experimental-figspec
• link
• image
• iframe

Hi there, apologies for the second issue/question!

I've added the withDesign and have added the design parameter as per the docs but the addon doesn't appear in my Storybook UI:

stories/1-Button.stories.js:

import { withDesign } from "storybook-addon-designs";
import Button from "../src/components/Button";

export default {
  title: "My Stories",
  decorators: [withDesign],
};

export const myStory = () => ({
  components: { Button },
  template: "<Button label='hello'/>",
});

myStory.story = {
  name: "My awesome story",
  parameters: {
    design: {
      type: "figma",
      url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File",
    },
  },
};

src/components/Button.vue:

<template>
  <button>{{ label }}</button>
</template>

<script>
export default {
  name: "Button",
  props: {
    label: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
button {
  background: red;
}
</style>

.storybook/main.js:

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['storybook-addon-designs']
};

Any ideas what I'm doing wrong here?

The code can be seen here if that helps

Edit: If I look in the console I can see that the story is wrapped in the Figma component, so not sure why it doesn't display?

Receiving an "Unable to resolve path to module", when attempting to:
import { Figma, IFrame } from 'storybook-addon-designs/blocks'

From a quick glance, blocks is missing from package.json

Temporarily changing the import to 'storybook-addon-designs/esm/blocks' works locally but fails when exporting static build

#62

Hey @pocka does this addon work with 6.0 yet?

Imported in code:
https://github.com/pocka/storybook-addon-designs/blob/release/v6.0/packages/storybook-addon-designs/src/register/components/Figspec.tsx#L14

but on present in dev dependencies:
https://github.com/pocka/storybook-addon-designs/blob/release/v6.0/packages/storybook-addon-designs/package.json#L22

Is this intentional?

Broke my build until I added a dependencies myself to the root.

At the time of writing, the master branch is pointing at v5.3.0-alpha. I guess many JS devs read GitHub's README instead of one at npm. So, these users tried to install the latest tag then set it up with a Preset-way (not storybook-addon-designs/register), which is added in v5.3.0-alpha.

Storybook repo uses the next branch for pre-preases, so we should follow this strategy for easy understanding.

It would be good if the addon provides Doc Blocks (easy-to-use React components for Addon Docs). That enables users to embed design specs in their Docs and to build Storybook with Docs mode only.

import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { Figma  } from 'storybook-addon-designs/blocks'
import { Button } from './Button';
 
<Meta title="MDX/Button" component={Button} />
 
# Checkbox
 
A basic button for everything.
 
<Preview>
  <Story name="basic-button">
    <Button>Button</Button>
  </Story>
</Preview>

<Figma url="https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample" />

Also, if possible, tabbed-preview would useful.

import { PreviewWithDesign } from 'storybook-addon-designs/blocks'

<PreviewWithDesign
  design={{
    type: 'figma',
    url: 'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample'
  }}
>
  <Story name="basic-button">
    <Button>Button</Button>
  </Story>
</PreviewWithDesign>

// or ...
import { Tabs, Tab } from 'storybook-addon-designs/blocks' // these are re-exports with small modification of ones in @storybook/components

<Tabs>
  <Tab title="Preview">
    <Preview>
      <Story name="basic-button">
        <Button>Button</Button>
      </Story>
    </Preview>
  </Tab>
  <Tab title="Design spec">
    <Figma url="https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample" />
  </Tab>
</Tabs>

Hi,

storybook-addon-designs is breaking my tests, using jest:

 FAIL  src/tests/storyshots.test.js
  ● Test suite failed to run

    ./node_modules/storybook-addon-designs/lib/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import addons, { makeDecorator } from '@storybook/addons';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import React from 'react';
      2 | import { action } from '@storybook/addon-actions';
    > 3 | import { withDesign } from 'storybook-addon-designs';

I've tried both versions 5.2.0 and 5.3.0-alpha.1.

If I remove the module and comment out the withDesign related lines, all my tests complete without errors.

I have tried various suggestions in jestjs/jest#9395 , to no avail.

Affected design types

• figma
• experimental-figspec
• link
• image
• iframe

Describe the bug

main.js

module.exports = {
  stories: [
    '...'
  ],
  addons: [
    'storybook-addon-designs',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
  ],
};

To Reproduce

1. ./node-modules/.bin/start-storybook -p 6006
2. See error in console

Expected behavior

Error-free render

Screenshots

Environment
Chrome

Versions

Paste the result of npm list storybook-addon-designs or yarn list --pattern storybook-addon-designs below.

❯ yarn list --pattern @storybook/ui
├─ @storybook/[email protected]
│  └─ @storybook/[email protected]
├─ @storybook/[email protected]
└─ [email protected]
   └─ @storybook/[email protected]

Is there a way to implement this addon in MDX format?

Here's an example with @storybook/addon-knobs :

<Story name="knobs" parameters={{ decorators: [withKnobs] }}>
  <Avatar
    loading={boolean('Loading')}
    size={select('Size', ['tiny', 'small', 'medium', 'large'])}
    username="Some user"
    src="https://i.pravatar.cc/300"
  />
</Story>

Resources:

• You can see the code snippet above here
• Storybook does not have official MDX docs as of date, but they have provided a link to the technical review of it.

edit: add resources

Issue templates

Bug

• versions
• reproduction
• any errors emitted? / page crashes? / or just does not load without errors?

Feature request

• summary
• alternatives

Platform support

???

PR template

• added example(s)? (if required)
• format with prettier? (I should add format command and setup husky + lint-staged)

Currently, we only have the statement "we have Doc Blocks~" and Docs page for internal usage. There should be at-least-usable usage guide for our Doc Blocks.

#90

If you export multiple stories in a story file containing multiple designs (type iframe) the iframes won't be loaded properly:

• ✅ hard refresh storybook => loads Story1 => loads Design1 of Story1
• ✅ click on tab Design2 => loads Design2 of Story1
• ❌ click on link Story2 => loads Story2 => doesn't load Design1 of Story2 but Design1 of Story1
• ❌ click on tab Design2 => doesn't load Design2 of Story2 but Design2 of Story1

It always seems to be one story behind.

Don't know how to provide a code example so i post one which can be used instantly in any setup containing

• [email protected]
• [email protected]
• [email protected]

import { ReactNode, FC } from 'react';
import { Story, Meta } from '@storybook/react';
import { withDesign, config } from 'storybook-addon-designs';

const SomeComponent: FC = () => {
  return <>SOME COMPONENT CONTENT</>;
};

export default {
  title: 'some title',
  component: SomeComponent,
  decorators: [withDesign],
} as Meta;

interface DummyProps {
  description?: ReactNode;
}

const Dummy: Story<DummyProps> = ({ description }) => <div>{description}</div>;

export const Story1 = Dummy.bind({});
Story1.args = {
  description: 'TODO',
};
Story1.parameters = {
  design: config([
    {
      name: 'Tables?',
      type: 'iframe',
      url: 'http://shouldiusetablesforlayout.com/',
    },
    {
      name: 'Smallest',
      type: 'iframe',
      url: 'http://www.guimp.com/',
    },
  ]),
};

export const Story2 = Dummy.bind({});
Story2.args = {
  description: 'TODO',
};
Story2.parameters = {
  design: config([
    {
      name: 'Plaiceholder',
      type: 'iframe',
      url: 'https://plaiceholder.co/',
    },
    {
      name: 'AudioMass',
      type: 'iframe',
      url: 'https://audiomass.co/',
    },
  ]),
};

Storybook for Angular
Version of storybook-addon-designs: 5.1.0

Setup:

• Have two stories
• Only one of the two stories has a design of type figma

Steps to reproduce within storybook

1. Navigate to story that has figma design and select "design" add-on tab to view design.
2. Navigate to story that does not have a design.
3. Notice that design from first story is still visible on the "design" add-on tab.

Storybook: 5.3.8
storybook-addon-designs: 5.1.1

Exception occurs when you click on Design panel if story has no design config (user sees white screen).

Uncaught TypeError: Cannot use 'in' operator to search for 'length' in undefined

Group of stories decorated "withDesign", but story some stories has no design config.

storiesOf('Controls', module)
	.addDecorator(withKnobs({ escapeHTML: false }))
	.addDecorator(withThemes(THEMES))
	.addDecorator(withDesign)
	.add('Checklists', data => {
		return {
..

http://joxi.ru/D2PKWaaSqxPGzm

I suggest to hide "Design" button if there is no design config in story or handle this exception to avoid braking the whole storybook.

Hello! First of all thank you for this addon, it's awesome!

Some websites can't be embeded as iframe (Cloud Confluence, notion.so) because of:

content-security-policy: frame-ancestors 'self'

And you can't change headers to fix it. There is option to proxy, but it's too challenging (mostly because of Auth).

There is an idea to add link type, that would open design link in a new tab.

try to integrate it in a angular project and can't see the design tab at all, does this add-on support angular?

Is there any way that Zeplin designs could be embedded? 🤔

I was wondering if this add-on supports the HTML module? I tried using it in my current project without any luck. I will let you know if I find a solution/work-around.

Using the following versions:

"storybook-addon-designs": "6.0.0-alpha.3",
"@storybook/addon-essentials": "6.2.0-rc.9",
"@storybook/react": "6.2.0-rc.9"

The very first load of a private Figma component does not render it and instead shows as if there's no Figma attached in the design tab. Instead I have to tap out of the first loaded component, tap on a different component, and then tap back into the first loaded component again to see the design tab.

Repro is:

const Template: Story<unknown> = args => <PrimaryButton {...args} />;

export const Primary = Template.bind({});

Primary.args = {
  text: 'Button',
  type: 'primary',
  onPress: () => null,
  disabled: false,
  isInProgress: false,
  compact: false
};

Primary.parameters = {
  design: {
    type: 'experimental-figspec',
    url: 'https://www.figma.com/file/acdefg123/abcdefg123?node-id=abcdefg123',
    accessToken: 'secret-token'
  }
};

When I try to open the "Design" panel, it goes into an infinite loop trying to load the Figma file.

The following appears in the console:

This is my setup:

"@storybook/html": "^6.2.1",
"storybook-addon-designs": "^6.0.0-alpha.3"

.storybook/preview.js

import { withDesign } from 'storybook-addon-designs';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: { expanded: true },
  decorators: [withDesign],
  design: { accessToken: '<private-access-token>' },
};

MyComponent.stories.js

// ...

export const MyComponent = Template.bind({});

MyComponent.parameters = {
  design: {
    type: 'figma',
    url: 'https://www.figma.com/file/...',
  },
};

We have a single artboard with lots of symbols/components on it. When I select the component and copy the link into storybook as the url with type figma it shows me the entire artboard.

Is there a way to only display the selected component or I have to move it into its own artboard to do that?

When I install your addon, I get the following error in the console: "SyntaxError: invalid regexp group"

Same thing happens with our own demo: http://bestof.morganatwork.com/storybook-addon-xd-designs/

How to use this plugin with Angular framework? I could not find any example. Most examples are on React

Is this plugin only for react ?

Hi there,

I've used vue create to setup a new Vue project, and have installed Storybook - all working correctly.

I have then installed storybook-addon-designs and followed the readme on adding to my story, but it gives me the following error in my console: h is not defined.

Here's my files:

stories/2-PageTitle.stories.js:

import { withDesign } from 'storybook-addon-designs'
import {Button} from '../src/components/Button'

export default {
  title: 'My stories',
  component: Button,
  decorators: [withDesign]
}

export const myStory = () => <Button>Hello, World!</Button>

myStory.story = {
  name: 'My awesome story',
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File'
    }
  }
}

babel.config.js:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

.storybook/main.js:

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['storybook-addon-designs']
};

src/components/Button.vue:

<button>
  {{ label }}
</button>

<script>
export default {
  name: 'Button',
  props: {
    label: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
button {
  background: red;
}
</style>

Can anyone see what I'm doing wrong here?

Inside of preview.js add:

export const parameters = {
  design: { accessToken: 'your token' }
};

The Figma file will load if the parameter is applied globally, but once clicking elsewhere in storybook it will cause refreshes / flashes and whitescreens.

Perhaps you have a PDF and Figma attached to a story. It would be cool to allow multiple Design tabs for each type.

Hi,

First thank you for this plugin

i want to know if there is some possibility to add integration for private figma ?

Thank ya

I would love to setup one design for all stories via decorator in config.js.
This is working for me:

import { addDecorator, addParameters } from "@storybook/react";

// design
addDecorator(withDesign);
addParameters({
    design: {
        type: 'figma',
        url: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File'
    }
});

Can I send PR with updated README about this?

Hi! I see that you recently added private figma support. I am really excited about this feature. I was trying to set it up today in my project only to realize that it hasn't been released yet. Since this is monorepo, I am unable to yarn install the latest using git reference. I was wondering if you have a timeline in mind when you will release it. Thank you!

I'm having trouble getting this plugin to work in the new "component-story-format" (CSF).

For example:

simple.story = {
    name: 'default',
    decorators: [
        storyFn => <div style={{ border: '5px solid red' }}>{storyFn()}</div>
    ]
};

Is it possible to declare the decorator in this way?

More info: https://storybook.js.org/docs/formats/component-story-format/#story-exports

Great package. Wondering if there are plans to support React Native (or Web) similar to how actions, knobs and notes addons support it.

Hello team!
First of all: Great work, thank you!

Would you be interested in supporting Adobe XD. A workaround with type: 'iframe' isn't possible because if I'm doing the following

design: {
  type: 'iframe',
  url: 'https//my-url.com/uuid/',
},

the iFrame container states: "xd.adobe.com refused the connection"

Cheers
Daniel

As seen in:

https://github.com/pocka/storybook-addon-designs/blob/2e0b7631cc3a90a013c9b525436510a46af512a2/packages/storybook-addon-designs/package.json#L22

I'm asking because when using the latest alpha of storybook-addon-designs, 6.0.0-alpha.2, I had to separately install @figspec/react or my project wouldn't compile.

PS: thank you for this awesome addon! ❤️

Currently this project targets ES2015 which doesn't run in IE11, I have to support IE11 and being able to run Storybook inside that would be really helpful! Is this something you'd be open to doing? It's a simple change to tsconfig.json to:

"target": "ES5"

but I realise it adds more testing burden on to the project. What do you think?

I am getting the following error when I try to configure figma with storybook- react.

ERROR in ./node_modules/storybook-addon-designs/node_modules/react-pdf/dist/pdf.worker.entry.js (./node_modules/storybook-addon-designs/node_modules/worker-loader/dist/cjs.js!./node_modules/storybook-addon-designs/node_modules/react-pdf/dist/pdf.worker.entry.js)
Module build failed (from ./node_modules/storybook-addon-designs/node_modules/worker-loader/dist/cjs.js):
TypeError: The 'compilation' argument must be an instance of Compilation

Can someone please help?

Is there a way to notify Storybook that there were changes to the Figma design for a component since it was last visited?

Is your feature request related to a problem? Please describe.
Some stories contain design assets and some do not and the only way to know is to select the Design addon tab and see if it is empty or not. It would be more efficient to see the number of design assets linked as a count in the tab name.

Describe the solution you'd like
Let consumers customise the tab name.

Describe alternatives you've considered
By default, show the count of design assets i.e. show (1) when the tab contains 1 design asset and (0) when it contains none.

Design types

• figma
• experimental-figspec
• link
• image
• iframe

Additional context
Add any other context or screenshots about the feature request here.

Current:

Desired: