diff --git a/code/addons/a11y/src/manager.tsx b/code/addons/a11y/src/manager.tsx index ae83c35871e1..096969c7f57c 100644 --- a/code/addons/a11y/src/manager.tsx +++ b/code/addons/a11y/src/manager.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { addons, types } from '@storybook/manager-api'; +import { addons, types, useStorybookApi } from '@storybook/manager-api'; import { Badge, Spaced } from '@storybook/components'; import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants'; import { VisionSimulator } from './components/VisionSimulator'; @@ -7,6 +7,25 @@ import { A11YPanel } from './components/A11YPanel'; import type { Results } from './components/A11yContext'; import { A11yContextProvider } from './components/A11yContext'; +const Title = () => { + const api = useStorybookApi(); + const addonState: Results = api?.getAddonState(ADDON_ID); + const violationsNb = addonState?.violations?.length || 0; + const incompleteNb = addonState?.incomplete?.length || 0; + const count = violationsNb + incompleteNb; + + const suffix = count === 0 ? '' : {count}; + + return ( +
+ + Accessibility + {suffix} + +
+ ); +}; + addons.register(ADDON_ID, (api) => { addons.add(PANEL_ID, { title: '', @@ -16,23 +35,7 @@ addons.register(ADDON_ID, (api) => { }); addons.add(PANEL_ID, { - title() { - const addonState: Results = api?.getAddonState(ADDON_ID); - const violationsNb = addonState?.violations?.length || 0; - const incompleteNb = addonState?.incomplete?.length || 0; - const count = violationsNb + incompleteNb; - - const suffix = count === 0 ? '' : {count}; - - return ( -
- - Accessibility - {suffix} - -
- ); - }, + title: Title, type: types.PANEL, render: ({ active = true, key }) => ( diff --git a/code/addons/controls/src/manager.tsx b/code/addons/controls/src/manager.tsx index 28932be6fd02..de00635f7196 100644 --- a/code/addons/controls/src/manager.tsx +++ b/code/addons/controls/src/manager.tsx @@ -23,7 +23,7 @@ function Title() { addons.register(ADDON_ID, (api) => { addons.add(ADDON_ID, { - title: , + title: Title, type: types.PANEL, paramKey: PARAM_KEY, render: ({ key, active }) => { diff --git a/code/addons/links/src/manager.ts b/code/addons/links/src/manager.ts index 9107c8c61904..e0c7487f2be9 100644 --- a/code/addons/links/src/manager.ts +++ b/code/addons/links/src/manager.ts @@ -3,9 +3,7 @@ import { addons } from '@storybook/manager-api'; import EVENTS, { ADDON_ID } from './constants'; addons.register(ADDON_ID, (api) => { - const channel = addons.getChannel(); - - channel.on(EVENTS.REQUEST, ({ kind, name }) => { + api.on(EVENTS.REQUEST, ({ kind, name }) => { const id = api.storyId(kind, name); api.emit(EVENTS.RECEIVE, id); });