diff --git a/addons/a11y/src/components/Panel.tsx b/addons/a11y/src/components/A11YPanel.tsx similarity index 91% rename from addons/a11y/src/components/Panel.tsx rename to addons/a11y/src/components/A11YPanel.tsx index 4f0c1fb0fd83..482cceda5915 100644 --- a/addons/a11y/src/components/Panel.tsx +++ b/addons/a11y/src/components/A11YPanel.tsx @@ -3,14 +3,12 @@ import React, { Component, Fragment } from 'react'; import { styled } from '@storybook/theming'; import { STORY_RENDERED } from '@storybook/core-events'; -import { ActionBar, Icons } from '@storybook/components'; +import { ActionBar, Icons, ScrollArea } from '@storybook/components'; -import { ScrollArea } from '@storybook/components/dist/ScrollArea/ScrollArea'; -import EVENTS from '../constants'; - -import Tabs from './Tabs'; -import Report from './Report'; import { AxeResults, Result } from 'axe-core'; +import { Report } from './Report'; +import { Tabs } from './Tabs'; +import { EVENTS } from '../constants'; const Icon = styled(Icons)( { @@ -49,7 +47,7 @@ interface A11YPanelProps { }; } -class A11YPanel extends Component { +export class A11YPanel extends Component { state: A11YPanelState = { status: 'ready', passes: [], @@ -159,5 +157,3 @@ class A11YPanel extends Component { ) : null; } } - -export default A11YPanel; diff --git a/addons/a11y/src/components/ColorBlindness.tsx b/addons/a11y/src/components/ColorBlindness.tsx index 95d8859e4174..83818eae20de 100644 --- a/addons/a11y/src/components/ColorBlindness.tsx +++ b/addons/a11y/src/components/ColorBlindness.tsx @@ -32,7 +32,7 @@ interface ColorBlindnessState { filter: string | null; } -class ColorBlindness extends Component { +export class ColorBlindness extends Component { state: ColorBlindnessState = { expanded: false, filter: null, @@ -104,5 +104,3 @@ class ColorBlindness extends Component ); } } - -export default ColorBlindness; diff --git a/addons/a11y/src/components/Report/Elements.tsx b/addons/a11y/src/components/Report/Elements.tsx index 3e43739c1942..cce537cba04c 100644 --- a/addons/a11y/src/components/Report/Elements.tsx +++ b/addons/a11y/src/components/Report/Elements.tsx @@ -2,8 +2,8 @@ import React, { FunctionComponent } from 'react'; import { styled } from '@storybook/theming'; -import Rules from './Rules'; import { NodeResult } from 'axe-core'; +import { Rules } from './Rules'; const Item = styled.li({ fontWeight: 600, @@ -39,12 +39,10 @@ interface ElementsProps { passes: boolean; } -const Elements: FunctionComponent = ({ elements, passes }) => ( +export const Elements: FunctionComponent = ({ elements, passes }) => (
    {elements.map((element, index) => ( ))}
); - -export default Elements; diff --git a/addons/a11y/src/components/Report/Info.tsx b/addons/a11y/src/components/Report/Info.tsx index 26ba2b126e55..678eb57d2628 100644 --- a/addons/a11y/src/components/Report/Info.tsx +++ b/addons/a11y/src/components/Report/Info.tsx @@ -22,7 +22,7 @@ interface InfoProps { item: Result; } -const Info: FunctionComponent = ({ item }) => { +export const Info: FunctionComponent = ({ item }) => { return ( {item.help} @@ -32,5 +32,3 @@ const Info: FunctionComponent = ({ item }) => { ); }; - -export default Info; diff --git a/addons/a11y/src/components/Report/Item.tsx b/addons/a11y/src/components/Report/Item.tsx index d132a6cfd7b8..6a493173a4d9 100644 --- a/addons/a11y/src/components/Report/Item.tsx +++ b/addons/a11y/src/components/Report/Item.tsx @@ -3,10 +3,10 @@ import React, { Component, Fragment } from 'react'; import { styled } from '@storybook/theming'; import { Icons } from '@storybook/components'; -import Info from './Info'; -import Tags from './Tags'; -import Elements from './Elements'; import { Result } from 'axe-core'; +import { Info } from './Info'; +import { Elements } from './Elements'; +import { Tags } from './Tags'; const Wrapper = styled.div(); @@ -46,7 +46,7 @@ interface ItemState { open: boolean; } -class Item extends Component { +export class Item extends Component { state = { open: false, }; @@ -84,5 +84,3 @@ class Item extends Component { ); } } - -export default Item; diff --git a/addons/a11y/src/components/Report/Rules.tsx b/addons/a11y/src/components/Report/Rules.tsx index e443d52d6b8e..0a142eb98ee9 100644 --- a/addons/a11y/src/components/Report/Rules.tsx +++ b/addons/a11y/src/components/Report/Rules.tsx @@ -61,7 +61,7 @@ interface RulesProps { passes: boolean; } -const Rules: FunctionComponent = ({ rules, passes }) => { +export const Rules: FunctionComponent = ({ rules, passes }) => { return ( {rules.map((rule, index) => ( @@ -70,5 +70,3 @@ const Rules: FunctionComponent = ({ rules, passes }) => { ); }; - -export default Rules; diff --git a/addons/a11y/src/components/Report/Tags.tsx b/addons/a11y/src/components/Report/Tags.tsx index 26ea062d2eea..559a31ee79fa 100644 --- a/addons/a11y/src/components/Report/Tags.tsx +++ b/addons/a11y/src/components/Report/Tags.tsx @@ -20,7 +20,7 @@ interface TagsProps { tags: TagValue[]; } -const Tags: FunctionComponent = ({ tags }) => { +export const Tags: FunctionComponent = ({ tags }) => { return ( {tags.map(tag => ( @@ -29,5 +29,3 @@ const Tags: FunctionComponent = ({ tags }) => { ); }; - -export default Tags; diff --git a/addons/a11y/src/components/Report/index.tsx b/addons/a11y/src/components/Report/index.tsx index c37b4a27cd32..2498962ccfd9 100644 --- a/addons/a11y/src/components/Report/index.tsx +++ b/addons/a11y/src/components/Report/index.tsx @@ -1,8 +1,8 @@ import React, { Fragment, FunctionComponent } from 'react'; import { Placeholder } from '@storybook/components'; -import Item from './Item'; import { Result } from 'axe-core'; +import { Item } from './Item'; export interface ReportProps { items: Result[]; @@ -10,14 +10,12 @@ export interface ReportProps { passes: boolean; } -const Report: FunctionComponent = ({ items, empty, passes }) => ( +export const Report: FunctionComponent = ({ items, empty, passes }) => ( {items.length ? ( - items.map((item) => ) + items.map(item => ) ) : ( {empty} )} ); - -export default Report; diff --git a/addons/a11y/src/components/Tabs.tsx b/addons/a11y/src/components/Tabs.tsx index c442fe015925..ca1aae619006 100644 --- a/addons/a11y/src/components/Tabs.tsx +++ b/addons/a11y/src/components/Tabs.tsx @@ -56,7 +56,7 @@ interface TabsState { active: number; } -class Tabs extends Component { +export class Tabs extends Component { state: TabsState = { active: 0, }; @@ -90,5 +90,3 @@ class Tabs extends Component { ); } } - -export default Tabs; diff --git a/addons/a11y/src/constants.ts b/addons/a11y/src/constants.ts index 060abd6d2d32..a3563f5ed4bf 100755 --- a/addons/a11y/src/constants.ts +++ b/addons/a11y/src/constants.ts @@ -5,4 +5,4 @@ export const PARAM_KEY = `a11y`; const RESULT = `${ADDON_ID}/result`; const REQUEST = `${ADDON_ID}/request`; -export default { RESULT, REQUEST }; +export const EVENTS = { RESULT, REQUEST }; diff --git a/addons/a11y/src/index.ts b/addons/a11y/src/index.ts index 43f4efcf1a67..5c834cdc9007 100644 --- a/addons/a11y/src/index.ts +++ b/addons/a11y/src/index.ts @@ -5,7 +5,7 @@ import { stripIndents } from 'common-tags'; import addons, { StoryWrapper } from '@storybook/addons'; import { STORY_RENDERED } from '@storybook/core-events'; -import EVENTS, { PARAM_KEY } from './constants'; +import { EVENTS, PARAM_KEY } from './constants'; const channel = addons.getChannel(); let progress = Promise.resolve(); diff --git a/addons/a11y/src/register.tsx b/addons/a11y/src/register.tsx index 40e361e97653..4b9c9d22ffee 100644 --- a/addons/a11y/src/register.tsx +++ b/addons/a11y/src/register.tsx @@ -1,11 +1,10 @@ import React, { Fragment, FunctionComponent } from 'react'; -import addons, { types } from '@storybook/addons'; import { styled } from '@storybook/theming'; -import Panel from './components/Panel'; -import ColorBlindness from './components/ColorBlindness'; - import { ADDON_ID, PANEL_ID } from './constants'; +import { ColorBlindness } from './components/ColorBlindness'; +import { A11YPanel } from './components/A11YPanel'; +import { addons, types } from '@storybook/addons'; const Hidden = styled.div(() => ({ display: 'none', @@ -90,7 +89,7 @@ addons.register(ADDON_ID, api => { addons.add(PANEL_ID, { title: 'Accessibility', type: types.PANEL, - render: ({ active, key }) => , + render: ({ active, key }) => , }); addons.add(PANEL_ID, {