diff --git a/.storybook/manager.js b/.storybook/manager.js
index 67a9d779b..2f227e369 100644
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@@ -5,4 +5,7 @@ import theme from './theme';
 addons.setConfig({
   panelPosition: 'right',
   theme,
+  sidebar: {
+    showRoots: true
+  },
 });
diff --git a/.storybook/stories/colors.stories.mdx b/.storybook/stories/colors.stories.mdx
index 562f791dd..75e6830bd 100644
--- a/.storybook/stories/colors.stories.mdx
+++ b/.storybook/stories/colors.stories.mdx
@@ -1,5 +1,4 @@
-import { Meta, ColorPalette, ColorItem, Story } from '@storybook/addon-docs/blocks';
-import { Box, COLOR, Heading2, Island, StatusLabel, TextBody } from '../../src';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Foundation / Colors" parameters={{ previewTabs: { canvas: { hidden: true } } }} />
 
diff --git a/.storybook/stories/playground/forms.stories.js b/.storybook/stories/playground/forms.stories.js
index d269730d5..6493aa099 100644
--- a/.storybook/stories/playground/forms.stories.js
+++ b/.storybook/stories/playground/forms.stories.js
@@ -55,6 +55,4 @@ export const forms = () => {
   );
 };
 
-forms.story = {
-  name: 'Form elements',
-};
+forms.storyName = 'Form elements';
diff --git a/.storybook/stories/playground/zIndexes.stories.js b/.storybook/stories/playground/zIndexes.stories.js
index e9262d05e..9189547b2 100644
--- a/.storybook/stories/playground/zIndexes.stories.js
+++ b/.storybook/stories/playground/zIndexes.stories.js
@@ -258,6 +258,4 @@ export const zIndexes = () => {
   );
 };
 
-zIndexes.story = {
-  name: 'Z-Indexes',
-};
+zIndexes.storyName = 'Z-Indexes';
diff --git a/src/components/badge/badge.stories.js b/src/components/badge/badge.stories.js
index 25b3ca895..9af6104da 100644
--- a/src/components/badge/badge.stories.js
+++ b/src/components/badge/badge.stories.js
@@ -23,9 +23,7 @@ withIcon.args = {
   icon: <IconBuildingSmallOutline />,
 };
 
-withIcon.story = {
-  name: 'With icon',
-};
+withIcon.storyName = 'With icon';
 
 export const withCustomElement = (args) => <Badge {...args}>I'm a badge</Badge>;
 
@@ -34,6 +32,4 @@ withCustomElement.args = {
   href: 'https://teamleader.eu',
 };
 
-withCustomElement.story = {
-  name: 'With custom element',
-};
+withCustomElement.storyName = 'With custom element';
diff --git a/src/components/button/button.stories.js b/src/components/button/button.stories.js
index 3a6571f53..d86198b17 100644
--- a/src/components/button/button.stories.js
+++ b/src/components/button/button.stories.js
@@ -27,24 +27,16 @@ withTextAndIcon.args = {
   label: 'Button with icon and text',
 };
 
-withTextAndIcon.story = {
-  name: 'With text and icon',
-};
+withTextAndIcon.storyName = 'With text and icon';
 
 export const WithText = () => <Button label="Button with text" />;
 
-WithText.story = {
-  name: 'With text',
-};
+WithText.storyName = 'With text';
 
 export const withIcon = () => <Button icon={<IconAddMediumOutline />} />;
 
-withIcon.story = {
-  name: 'With icon',
-};
+withIcon.storyName = 'With icon';
 
 export const withCustomElement = () => <Button element="a" label="Button with custom element" />;
 
-withCustomElement.story = {
-  name: 'With custom element',
-};
+withCustomElement.storyName = 'With custom element';
diff --git a/src/components/buttonGroup/buttonGroup.stories.js b/src/components/buttonGroup/buttonGroup.stories.js
index 440ee6101..ee3edc298 100644
--- a/src/components/buttonGroup/buttonGroup.stories.js
+++ b/src/components/buttonGroup/buttonGroup.stories.js
@@ -33,6 +33,4 @@ export const withActive = () => {
   );
 };
 
-withActive.story = {
-  name: 'With active',
-};
+withActive.storyName = 'With active';
diff --git a/src/components/checkbox/checkbox.stories.js b/src/components/checkbox/checkbox.stories.js
index 7e5f12ce1..5e48ad9ec 100644
--- a/src/components/checkbox/checkbox.stories.js
+++ b/src/components/checkbox/checkbox.stories.js
@@ -20,9 +20,7 @@ DefaultStory.args = {
   label: 'I am the label',
 };
 
-DefaultStory.story = {
-  name: 'Default',
-};
+DefaultStory.storyName = 'Default';
 
 export const WithLinkInLabel = () => (
   <Checkbox>
@@ -36,12 +34,8 @@ export const WithLinkInLabel = () => (
   </Checkbox>
 );
 
-WithLinkInLabel.story = {
-  name: 'With link in label',
-};
+WithLinkInLabel.storyName = 'With link in label';
 
 export const WithIndeterminateState = () => <Checkbox indeterminate />;
 
-WithIndeterminateState.story = {
-  name: 'With indeterminate state',
-};
+WithIndeterminateState.storyName = 'With indeterminate state';
diff --git a/src/components/counter/counter.stories.js b/src/components/counter/counter.stories.js
index 36c8cf2d1..bbaedfbcb 100644
--- a/src/components/counter/counter.stories.js
+++ b/src/components/counter/counter.stories.js
@@ -19,13 +19,10 @@ Basic.args = { count: 99 };
 
 export const WithMaxCount = (args) => <Counter {...args} />;
 WithMaxCount.args = { count: 99, maxCount: 98 };
-WithMaxCount.story = {
-  name: 'With maxCount',
-};
+WithMaxCount.storyName = 'With maxCount';
+
 
 export const WithExtraText = (args) => <Counter {...args} />;
 WithExtraText.args = { children: 'Tasks', count: 99 };
 
-WithExtraText.story = {
-  name: 'With extra text',
-};
+WithExtraText.storyName = 'With extra text';
diff --git a/src/components/datepicker/datePicker.stories.js b/src/components/datepicker/datePicker.stories.js
index c7965c4bb..fae6b157f 100644
--- a/src/components/datepicker/datePicker.stories.js
+++ b/src/components/datepicker/datePicker.stories.js
@@ -65,24 +65,22 @@ export const singleDate = () => {
   );
 };
 
-singleDate.story = {
-  name: 'Single date',
+singleDate.storyName = 'Single date';
+singleDate.parameters = {
+  design: [
+    {
+      name: 'Figma',
+      type: 'figma',
+      url: 'https://www.figma.com/file/LHH25GN90ljQaBEUNMsdJn/Desktop-components?node-id=980%3A0',
+    },
+    {
+      name: 'Vendor docs',
+      type: 'iframe',
+      url: 'http://react-day-picker.js.org/api/DayPicker',
+    },
+  ],
+}
 
-  parameters: {
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/LHH25GN90ljQaBEUNMsdJn/Desktop-components?node-id=980%3A0',
-      },
-      {
-        name: 'Vendor docs',
-        type: 'iframe',
-        url: 'http://react-day-picker.js.org/api/DayPicker',
-      },
-    ],
-  },
-};
 
 export const inputSingleDate = () => {
   const handleOnChange = (selectedDate) => {
@@ -120,21 +118,18 @@ export const inputSingleDate = () => {
   );
 };
 
-inputSingleDate.story = {
-  name: 'Input single date',
-
-  parameters: {
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/LHH25GN90ljQaBEUNMsdJn/Desktop-components?node-id=980%3A0',
-      },
-      {
-        name: 'Vendor docs',
-        type: 'iframe',
-        url: 'http://react-day-picker.js.org/api/DayPickerInput',
-      },
-    ],
-  },
-};
+inputSingleDate.storyName = 'Input single date';
+inputSingleDate.parameters = {
+  design: [
+    {
+      name: 'Figma',
+      type: 'figma',
+      url: 'https://www.figma.com/file/LHH25GN90ljQaBEUNMsdJn/Desktop-components?node-id=980%3A0',
+    },
+    {
+      name: 'Vendor docs',
+      type: 'iframe',
+      url: 'http://react-day-picker.js.org/api/DayPickerInput',
+    },
+  ],
+}
diff --git a/src/components/detailPage/detailPage.stories.js b/src/components/detailPage/detailPage.stories.js
index ff9da7fef..3825601e4 100644
--- a/src/components/detailPage/detailPage.stories.js
+++ b/src/components/detailPage/detailPage.stories.js
@@ -1,16 +1,16 @@
 import React from 'react';
-import { select, text } from '@storybook/addon-knobs';
-import { addStoryInGroup, COMPOSITIONS } from '../../../.storybook/utils';
+import {select, text} from '@storybook/addon-knobs';
+import {addStoryInGroup, COMPOSITIONS} from '../../../.storybook/utils';
 import Button from '../button';
 import ButtonGroup from '../buttonGroup';
 import DetailPage from './DetailPage';
 import Icon from '../icon';
 import IconButton from '../iconButton';
-import { IconTrashMediumOutline, IconWarningBadgedMediumFilled } from '@teamleader/ui-icons';
+import {IconTrashMediumOutline, IconWarningBadgedMediumFilled} from '@teamleader/ui-icons';
 import StatusLabel from '../statusLabel';
-import { Box } from '../box';
-import { Heading1, Monospaced, TextBody } from '../typography';
-import { COLOR } from '../../constants';
+import {Box} from '../box';
+import {Heading1, Monospaced, TextBody} from '../typography';
+import {COLOR} from '../../constants';
 
 const titleColors = ['neutral', 'teal'];
 
@@ -94,14 +94,12 @@ export const composition = () => (
   </DetailPage>
 );
 
-composition.story = {
-  name: 'Composition',
-  parameters: {
-    info: {
-      propTables: [DetailPage],
-    },
+composition.storyName = 'Composition';
+composition.parameters = {
+  info: {
+    propTables: [DetailPage],
   },
-};
+}
 
 export const body = () => (
   <DetailPage.Body>
@@ -109,14 +107,12 @@ export const body = () => (
   </DetailPage.Body>
 );
 
-body.story = {
-  name: 'Body',
-  parameters: {
-    info: {
-      propTables: [DetailPage.Body],
-    },
+body.storyName = 'Body';
+body.parameters = {
+  info: {
+    propTables: [DetailPage.Body],
   },
-};
+}
 
 export const header = () => (
   <DetailPage.Header
@@ -129,14 +125,12 @@ export const header = () => (
   />
 );
 
-header.story = {
-  name: 'Header',
-  parameters: {
-    info: {
-      propTables: [DetailPage.Header],
-    },
+header.storyName = 'Header';
+header.parameters = {
+  info: {
+    propTables: [DetailPage.Header]
   },
-};
+}
 
 export const headerWithTitleSuffix = () => (
   <DetailPage.Header
@@ -150,14 +144,12 @@ export const headerWithTitleSuffix = () => (
   />
 );
 
-headerWithTitleSuffix.story = {
-  name: 'Header with title suffix',
-  parameters: {
-    info: {
-      propTables: [DetailPage.Header],
-    },
+headerWithTitleSuffix.storyName = 'Header with title suffix';
+headerWithTitleSuffix.parameters = {
+  info: {
+    propTables: [DetailPage.Header]
   },
-};
+}
 
 export const headerWithActions = () => (
   <DetailPage.Header
@@ -172,14 +164,12 @@ export const headerWithActions = () => (
   </DetailPage.Header>
 );
 
-headerWithActions.story = {
-  name: 'Header with actions',
-  parameters: {
-    info: {
-      propTables: [DetailPage.Header],
-    },
+headerWithActions.storyName = 'Header with actions';
+headerWithActions.parameters = {
+  info: {
+    propTables: [DetailPage.Header]
   },
-};
+}
 
 export const headerWithTotals = () => (
   <DetailPage.Header
@@ -194,14 +184,12 @@ export const headerWithTotals = () => (
   </DetailPage.Header>
 );
 
-headerWithTotals.story = {
-  name: 'Header with totals',
-  parameters: {
-    info: {
-      propTables: [DetailPage.Header],
-    },
+headerWithTotals.storyName = 'Header with totals';
+headerWithTotals.parameters = {
+  info: {
+    propTables: [DetailPage.Header]
   },
-};
+}
 
 export const headerWithTotalsAndActions = () => (
   <DetailPage.Header
@@ -217,14 +205,12 @@ export const headerWithTotalsAndActions = () => (
   </DetailPage.Header>
 );
 
-headerWithTotalsAndActions.story = {
-  name: 'Header with totals and actions',
-  parameters: {
-    info: {
-      propTables: [DetailPage.Header],
-    },
+headerWithTotalsAndActions.storyName = 'Header with totals and actions';
+headerWithTotalsAndActions.parameters = {
+  info: {
+    propTables: [DetailPage.Header]
   },
-};
+}
 
 export const headerWithEverthingTogether = () => (
   <DetailPage.Header
@@ -241,11 +227,9 @@ export const headerWithEverthingTogether = () => (
   </DetailPage.Header>
 );
 
-headerWithEverthingTogether.story = {
-  name: 'Header with everything together',
-  parameters: {
-    info: {
-      propTables: [DetailPage.Header],
-    },
+headerWithEverthingTogether.storyName = 'Header with everything together';
+headerWithEverthingTogether.parameters = {
+  info: {
+    propTables: [DetailPage.Header]
   },
-};
+}
diff --git a/src/components/iconButton/iconButton.stories.js b/src/components/iconButton/iconButton.stories.js
index b34cce99e..5fe88c569 100644
--- a/src/components/iconButton/iconButton.stories.js
+++ b/src/components/iconButton/iconButton.stories.js
@@ -21,6 +21,4 @@ export const basic = ({ size, ...args }) => (
 
 export const withCustomElement = () => <IconButton icon={<IconAddMediumOutline />} element="a" />;
 
-withCustomElement.story = {
-  name: 'With custom element',
-};
+withCustomElement.storyName = 'With custom element';
diff --git a/src/components/illustration/illustration.stories.js b/src/components/illustration/illustration.stories.js
index d8057d282..8378f10aa 100644
--- a/src/components/illustration/illustration.stories.js
+++ b/src/components/illustration/illustration.stories.js
@@ -51,9 +51,7 @@ export const _24X24 = () => (
   </Box>
 );
 
-_24X24.story = {
-  name: '24x24',
-};
+_24X24.storyName = '24x24';
 
 export const _36X24 = () => (
   <Box style={gridStyles}>
@@ -74,9 +72,7 @@ export const _36X24 = () => (
   </Box>
 );
 
-_36X24.story = {
-  name: '36x24',
-};
+_36X24.storyName = '36x24';
 
 export const _48X48 = () => (
   <Box style={gridStyles}>
@@ -97,9 +93,7 @@ export const _48X48 = () => (
   </Box>
 );
 
-_48X48.story = {
-  name: '48x48',
-};
+_48X48.storyName = '48x48';
 
 export const _60X60 = () => (
   <Box style={gridStyles}>
@@ -120,9 +114,7 @@ export const _60X60 = () => (
   </Box>
 );
 
-_60X60.story = {
-  name: '60x60',
-};
+_60X60.storyName = '60x60';
 
 export const _84X84 = () => (
   <Box style={gridStyles}>
@@ -143,9 +135,7 @@ export const _84X84 = () => (
   </Box>
 );
 
-_84X84.story = {
-  name: '84x84',
-};
+_84X84.storyName = '84x84';
 
 export const _90X90 = () => (
   <Box style={gridStyles}>
@@ -166,9 +156,7 @@ export const _90X90 = () => (
   </Box>
 );
 
-_90X90.story = {
-  name: '90x90',
-};
+_90X90.storyName = '90x90';
 
 export const _120X120 = () => (
   <Box style={gridStyles}>
@@ -189,9 +177,7 @@ export const _120X120 = () => (
   </Box>
 );
 
-_120X120.story = {
-  name: '120x120',
-};
+_120X120.storyName = '120x120';
 
 export const _240X240 = () => (
   <Box style={gridStyles}>
@@ -212,6 +198,4 @@ export const _240X240 = () => (
   </Box>
 );
 
-_240X240.story = {
-  name: '240x240',
-};
+_240X240.storyName = '240x240';
diff --git a/src/components/input/input.stories.js b/src/components/input/input.stories.js
index 5f89ad650..c0e03f01b 100644
--- a/src/components/input/input.stories.js
+++ b/src/components/input/input.stories.js
@@ -144,9 +144,7 @@ export const numericInput = () => {
   );
 };
 
-numericInput.story = {
-  name: 'NumericInput',
-};
+numericInput.storyName = 'NumericInput';
 
 export const timeInput = () => {
   const [value, setValue] = useState('');
@@ -190,9 +188,7 @@ export const timeInput = () => {
   );
 };
 
-timeInput.story = {
-  name: 'TimeInput',
-};
+timeInput.storyName = 'TimeInput';
 
 export const durationInput = () => {
   const [value, setValue] = useState();
@@ -200,9 +196,7 @@ export const durationInput = () => {
   return <DurationInput value={value} onChange={setValue} />;
 };
 
-durationInput.story = {
-  name: 'DurationInput',
-};
+durationInput.storyName = 'DurationInput';
 
 export const textarea = () => (
   <Textarea
diff --git a/src/components/overviewPage/overviewPage.stories.js b/src/components/overviewPage/overviewPage.stories.js
index 17424d6e7..9a32ecb74 100644
--- a/src/components/overviewPage/overviewPage.stories.js
+++ b/src/components/overviewPage/overviewPage.stories.js
@@ -33,12 +33,10 @@ export const composition = () => (
   </OverviewPage>
 );
 
-composition.story = {
-  name: 'Composition',
-  parameters: {
-    info: {
-      propTables: [OverviewPage],
-    },
+composition.storyName = 'Composition';
+composition.parameters = {
+  info: {
+    propTables: [OverviewPage]
   },
 };
 
@@ -48,24 +46,20 @@ export const body = () => (
   </OverviewPage.Body>
 );
 
-body.story = {
-  name: 'Body',
-  parameters: {
-    info: {
-      propTables: [OverviewPage.Body],
-    },
-  },
+body.storyName = 'Body';
+body.parameters = {
+  info: {
+    propTables: [OverviewPage.Body]
+  }
 };
 
 export const header = () => <OverviewPage.Header title={text('title', 'I am the overview page title')} />;
 
-header.story = {
-  name: 'Header',
-  parameters: {
-    info: {
-      propTables: [OverviewPage.Header],
-    },
-  },
+header.storyName = 'Header';
+header.parameters = {
+  info: {
+    propTables: [OverviewPage.Header]
+  }
 };
 
 export const headerWithActions = () => (
@@ -80,11 +74,9 @@ export const headerWithActions = () => (
   </OverviewPage.Header>
 );
 
-headerWithActions.story = {
-  name: 'Header with actions',
-  parameters: {
-    info: {
-      propTables: [OverviewPage.Header],
-    },
-  },
+headerWithActions.storyName = 'Header with actions';
+headerWithActions.parameters = {
+  info: {
+    propTables: [OverviewPage.Header]
+  }
 };
diff --git a/src/components/popover/popover.stories.js b/src/components/popover/popover.stories.js
index a3a2657a1..92ce2262d 100644
--- a/src/components/popover/popover.stories.js
+++ b/src/components/popover/popover.stories.js
@@ -127,9 +127,7 @@ export const withTitle = () => {
   );
 };
 
-withTitle.story = {
-  name: 'With title',
-};
+withTitle.storyName = 'With title';
 
 export const withTitleSubtitle = () => {
   const [{ popoverActive, anchorEl }, handleButtonClick, handleCloseClick] = usePopoverTrigger();
@@ -163,9 +161,7 @@ export const withTitleSubtitle = () => {
   );
 };
 
-withTitleSubtitle.story = {
-  name: 'With title & subtitle',
-};
+withTitleSubtitle.storyName = 'With title & subtitle';
 
 export const withCloseButton = () => {
   const [{ popoverActive, anchorEl }, handleButtonClick, handleCloseClick] = usePopoverTrigger();
@@ -198,9 +194,7 @@ export const withCloseButton = () => {
   );
 };
 
-withCloseButton.story = {
-  name: 'With close button',
-};
+withCloseButton.storyName = 'With close button';
 
 export const withActions = () => {
   const [{ popoverActive, anchorEl }, handleButtonClick, handleCloseClick] = usePopoverTrigger();
@@ -234,9 +228,7 @@ export const withActions = () => {
   );
 };
 
-withActions.story = {
-  name: 'With actions',
-};
+withActions.storyName = 'With actions';
 
 export const withMenu = () => {
   const [{ popoverActive, anchorEl }, handleButtonClick, handleCloseClick] = usePopoverTrigger();
@@ -277,9 +269,7 @@ export const withMenu = () => {
   );
 };
 
-withMenu.story = {
-  name: 'With menu',
-};
+withMenu.storyName = 'With menu';
 
 export const withSplitButtonMenu = () => {
   const [buttonLevel, setButtonLevel] = useState('primary');
@@ -346,9 +336,7 @@ export const withSplitButtonMenu = () => {
   );
 };
 
-withSplitButtonMenu.story = {
-  name: 'With split button menu',
-};
+withSplitButtonMenu.storyName = 'With split button menu';
 
 export const experiment1 = () => {
   const [{ popoverActive, anchorEl }, handleButtonClick, handleCloseClick] = usePopoverTrigger();
diff --git a/src/components/tab/tab.stories.js b/src/components/tab/tab.stories.js
index 69e7653b5..7b05ceab5 100644
--- a/src/components/tab/tab.stories.js
+++ b/src/components/tab/tab.stories.js
@@ -56,6 +56,4 @@ export const titleTab = () => (
   </TabGroup>
 );
 
-titleTab.story = {
-  name: 'Title tab',
-};
+titleTab.storyName = 'Title tab';
diff --git a/src/components/toast/toast.stories.js b/src/components/toast/toast.stories.js
index c72d6dc6c..7343dc356 100644
--- a/src/components/toast/toast.stories.js
+++ b/src/components/toast/toast.stories.js
@@ -72,9 +72,7 @@ export const withCloseButton = toastSpawner({
   timeout: 3000,
 });
 
-withCloseButton.story = {
-  name: 'With close button',
-};
+withCloseButton.storyName = 'With close button';
 
 export const withCustomAction = toastSpawner({
   label: 'Toast label',
@@ -83,9 +81,7 @@ export const withCustomAction = toastSpawner({
   action: () => true,
 });
 
-withCustomAction.story = {
-  name: 'With custom action',
-};
+withCustomAction.storyName = 'With custom action';
 
 export const withCustomLink = toastSpawner({
   label: 'Toast label',
@@ -93,9 +89,7 @@ export const withCustomLink = toastSpawner({
   timeout: 3000,
 });
 
-withCustomLink.story = {
-  name: 'With custom link',
-};
+withCustomLink.storyName = 'With custom link';
 
 export const withMultilineLabel = toastSpawner({
   label: 'Connection timed out. Showing limited amount of messages.',
@@ -104,9 +98,7 @@ export const withMultilineLabel = toastSpawner({
   action: () => true,
 });
 
-withMultilineLabel.story = {
-  name: 'With multiline label',
-};
+withMultilineLabel.storyName = 'With multiline label';
 
 export const withLoadingSpinner = toastSpawner({
   label: 'Working...',
@@ -114,6 +106,4 @@ export const withLoadingSpinner = toastSpawner({
   processing: true,
 });
 
-withLoadingSpinner.story = {
-  name: 'With loading spinner',
-};
+withLoadingSpinner.storyName = 'With loading spinner';
diff --git a/src/components/tooltip/tooltip.stories.js b/src/components/tooltip/tooltip.stories.js
index 1458a81cb..99a480408 100644
--- a/src/components/tooltip/tooltip.stories.js
+++ b/src/components/tooltip/tooltip.stories.js
@@ -117,9 +117,7 @@ export const fromStatusLabel = () => (
   </TooltippedStatusLabel>
 );
 
-fromStatusLabel.story = {
-  name: 'From StatusLabel',
-};
+fromStatusLabel.storyName = 'From StatusLabel';
 
 export const fromInlineElements = () => (
   <TextBody>
@@ -137,6 +135,4 @@ export const fromInlineElements = () => (
   </TextBody>
 );
 
-fromInlineElements.story = {
-  name: 'From inline elements',
-};
+fromInlineElements.storyName = 'From inline elements';
diff --git a/src/components/typography/typography.stories.js b/src/components/typography/typography.stories.js
index b4df48652..21ec1aad7 100644
--- a/src/components/typography/typography.stories.js
+++ b/src/components/typography/typography.stories.js
@@ -135,10 +135,8 @@ export const marker = () => (
   </Heading3>
 );
 
-marker.story = {
-  parameters: {
-    info: {
-      propTables: [Marker],
-    },
+marker.parameters = {
+  info: {
+    propTables: [Marker]
   },
-};
+}