Fix storybook deprecation and UI library react warning

.storybook/manager.js

@@ -5,4 +5,7 @@ import theme from './theme';
 addons.setConfig({
   panelPosition: 'right',
   theme,
+  sidebar: {
+    showRoots: true
+  },
 });

.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 } } }} />
 

.storybook/stories/playground/forms.stories.js

@@ -55,6 +55,4 @@ export const forms = () => {
   );
 };
 
-forms.story = {
-  name: 'Form elements',
-};
+forms.storyName = 'Form elements';

.storybook/stories/playground/zIndexes.stories.js

@@ -258,6 +258,4 @@ export const zIndexes = () => {
   );
 };
 
-zIndexes.story = {
-  name: 'Z-Indexes',
-};
+zIndexes.storyName = 'Z-Indexes';

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';

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';

src/components/buttonGroup/buttonGroup.stories.js

@@ -33,6 +33,4 @@ export const withActive = () => {
   );
 };
 
-withActive.story = {
-  name: 'With active',
-};
+withActive.storyName = 'With active';

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';

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';

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',
+    },
+  ],
+}

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,29 +94,25 @@ 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>
     <TextBody>Here you can add arbitrary content.</TextBody>
   </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]
   },
-};
+}

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';