Upgrade storybook (#505)

* Upgrade to storybook 6.x.x

* Hierarchy separators are removed in 6.0, only / is supported

* Upgrade storybook packages. Preview is now Canvas, Props is ArgsTable

* a11y decorator is deprecated

* update stories

* Update apps/storybook-react/stories/Accordion/Accordion.docs.mdx

Remove semicolon

Co-authored-by: Victor Nystad <vnystad@gmail.com>

Co-authored-by: Victor Nystad <vnys@equinor.com>
Co-authored-by: Victor Nystad <vnystad@gmail.com>

apps/storybook-react/.storybook/components/Preview.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Preview as StorybookPreview } from '@storybook/addon-docs/blocks'
+import { Canvas as StorybookPreview } from '@storybook/addon-docs/blocks'
 
 const Preview = ({ children, ...props }) => (
   <StorybookPreview {...props}>{children}</StorybookPreview>

apps/storybook-react/.storybook/preview.js

@@ -21,10 +21,14 @@ addParameters({
         ? 0
         : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
   },
+  a11y: {
+    element: '#root',
+    config: {},
+    options: {},
+    manual: true,
+  },
 })
 
-addDecorator(withA11y)
-
 addDecorator((story) => (
   <>
     <GlobalStyle />

apps/storybook-react/docs/Intro.story.mdx

@@ -1,12 +1,18 @@
 import { Meta } from '@storybook/addon-docs/blocks'
-import { Typography } from '@equinor/eds-core-react'
+import { Typography } from '@equinor/eds-core-react'
 
-<Meta title="Articles|Intro" />
+<Meta title="Articles/Intro" />
 
-# @equinor/eds-core-react 
+# @equinor/eds-core-react
 
 [![Version](https://img.shields.io/npm/v/@equinor/eds-core-react)](https://www.npmjs.com/package/@equinor/eds-core-react)
 
-<Typography variant="ingress">This is the storybook for the React implementation of the Equinor Design System. We have a <a href="https://eds.equinor.com/">storefront</a> with extensive documentation, this storybook is just for showcasing the components and as a place to put developer documentation until we move that to the storefront.</Typography>
+<Typography variant="ingress">
+  This is the storybook for the React implementation of the Equinor Design
+  System. We have a <a href="https://eds.equinor.com/">storefront</a> with
+  extensive documentation, this storybook is just for showcasing the components
+  and as a place to put developer documentation until we move that to the
+  storefront.
+</Typography>
 
 If you want to get in touch with the team, you’ll find us in the Equinor slack channel [#eds-design-system](https://equinor.slack.com/archives/CJT20H1B9). The `@equinor/eds-core-react` package can be installed from [NPM](https://equinor.slack.com/archives/CJT20H1B9) – and the source code (not public yet) is on [Github](https://github.com/equinor/design-system).

apps/storybook-react/package.json

@@ -15,25 +15,25 @@
     "@equinor/eds-core-react": "workspace:*",
     "@equinor/eds-icons": "workspace:*",
     "@equinor/eds-tokens": "workspace:*",
-    "@storybook/react": "^5.3.19",
+    "@storybook/react": "^6.0.16",
     "babel-runtime": "^6.26.0",
     "react-dom": "^16.13.1",
-    "styled-components": "^5.1.1",
-    "react-hook-form": "^5.7.2"
+    "react-hook-form": "^5.7.2",
+    "styled-components": "^5.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.10.2",
     "@babel/plugin-transform-react-jsx": "^7.10.1",
     "@mdx-js/loader": "^1.6.5",
-    "@storybook/addon-a11y": "^5.3.19",
-    "@storybook/addon-actions": "^5.3.19",
-    "@storybook/addon-docs": "^5.3.19",
-    "@storybook/addon-knobs": "^5.3.19",
-    "@storybook/addon-links": "^5.3.19",
-    "@storybook/addon-storysource": "^5.3.19",
-    "@storybook/addons": "^5.3.19",
-    "@storybook/source-loader": "^5.3.19",
-    "@storybook/theming": "^5.3.19",
+    "@storybook/addon-a11y": "^6.0.16",
+    "@storybook/addon-actions": "^6.0.16",
+    "@storybook/addon-docs": "^6.0.16",
+    "@storybook/addon-knobs": "^6.0.16",
+    "@storybook/addon-links": "^6.0.16",
+    "@storybook/addon-storysource": "^6.0.16",
+    "@storybook/addons": "^6.0.16",
+    "@storybook/source-loader": "^6.0.16",
+    "@storybook/theming": "^6.0.16",
     "babel-loader": "^8.1.0",
     "react": "^16.13.1",
     "react-is": "^16.13.1"