WIP: upgrade storybook to version 6

.storybook/presets.js

@@ -1,8 +1,9 @@
 module.exports = [
   {
-    name: '@storybook/addon-docs/react/preset',
+    name: '@storybook/addon-docs/preset',
     options: {
       sourceLoaderOptions: null,
+      configureJSX: true,
     },
   },
 ];

package.json

@@ -55,11 +55,11 @@
     "react-docgen-typescript-loader": "^3.2.0",
     "react-dom": "^16.9.0",
     "react-is": "^16.9.0",
-    "storybook-addon-designs": "^5.1.1",
+    "storybook-addon-designs": "^5.4.2",
     "storybook-addon-figma": "0.1.0",
     "storybook-addon-props": "^3.0.4",
     "storybook-addon-styled-themes": "0.0.3",
-    "storybook-chromatic": "^2.2.2",
+    "storybook-chromatic": "^3.5.5",
     "styled-components": "^5.2.0",
     "ts-jest": "^24.0.2",
     "ts-loader": "^6.2.1",
@@ -68,14 +68,17 @@
     "typescript": "^3.6.3"
   },
   "dependencies": {
-    "@storybook/addon-a11y": "^5.3.12",
-    "@storybook/addon-actions": "^5.3.12",
-    "@storybook/addon-docs": "^5.3.12",
-    "@storybook/addon-knobs": "^5.3.12",
-    "@storybook/addon-storysource": "^5.3.12",
-    "@storybook/addons": "^5.3.12",
-    "@storybook/react": "^5.3.12",
-    "@storybook/source-loader": "^5.3.12",
-    "@types/lodash": "^4.14.161"
+    "@storybook/addon-a11y": "^6.0.26",
+    "@storybook/addon-actions": "^6.0.26",
+    "@storybook/addon-docs": "^6.0.26",
+    "@storybook/addon-knobs": "^6.0.26",
+    "@storybook/addon-storysource": "^6.0.26",
+    "@storybook/addons": "^6.0.26",
+    "@storybook/react": "^6.0.26",
+    "@storybook/source-loader": "^6.0.26",
+    "@types/lodash": "^4.14.161",
+    "@types/react-select": "^3.0.22",
+    "react-select": "^3.1.0",
+    "storybook": "^6.0.26"
   }
 }

src/components/breakpoints/Breakpoints.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Props } from '@storybook/addon-docs/blocks';
 import { media, breakPoints } from 'common/layout';
 import Breakpoints from './Breakpoints';
 import { Heading } from '../../';
@@ -31,7 +31,7 @@ To use the break points in a media query, you need to specify `@media` on before
 }
 ```
 
-<Preview>
+<Canvas>
   <Story name="All cases">
     <Breakpoints style={{ backgroundColor: '#ddd', margin: 'auto', textAlign: 'center' }}>
       <Heading className="content" style={{ margin: 0 }} />
@@ -61,7 +61,7 @@ To use the break points in a media query, you need to specify `@media` on before
       />
     </Breakpoints>
   </Story>
-</Preview>
+</Canvas>
 
 ## List of all media queries available
 

src/components/button/Button.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Props } from '@storybook/addon-docs/blocks';
 import Button from './Button';
 import styled from 'styled-components';
 
@@ -15,7 +15,7 @@ export const ExampleButtonContainer = styled.div`
 
 For most cases, our default button without any specific variant or color will suffice. Buttons with the "secondary" color are rarely suited for use, and serve more as a contrast for differing backgrounds. Other colors and variants are explained below.
 
-<Preview>
+<Canvas>
   <Story name="All">
     <ExampleButtonContainer>
       <Button color="primary">Primary</Button>
@@ -41,28 +41,28 @@ For most cases, our default button without any specific variant or color will su
       </Button>
     </ExampleButtonContainer>
   </Story>
-</Preview>
+</Canvas>
 
 <Props of={Button} />
 
 ## Outline variant
 
 When you wish to present the user with two or more options, and you wish to highlight one of the options as the recommended alternative, consider setting the other alternatives to the "outline" variant.
 
-<Preview>
+<Canvas>
   <Story name="Outline">
     <ExampleButtonContainer>
       <Button>Confirm</Button>
       <Button variant="outline">Cancel</Button>
     </ExampleButtonContainer>
   </Story>
-</Preview>
+</Canvas>
 
 ## Status colors
 
 Status colors can be used to indicate actions with considerable consequences. The "success" color can for example be used for completing a form, while the "danger" color can be used to indicate irreversible actions that might require some second thought.
 
-<Preview>
+<Canvas>
   <Story name="Status">
     <ExampleButtonContainer>
       <Button color="success">Save</Button>
@@ -72,4 +72,4 @@ Status colors can be used to indicate actions with considerable consequences. Th
       </Button>
     </ExampleButtonContainer>
   </Story>
-</Preview>
+</Canvas>

src/components/card/Card.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Props } from '@storybook/addon-docs/blocks';
 import Card from './Card';
 import styled from 'styled-components';
 
@@ -15,11 +15,11 @@ import { Paragraph } from '../../';
 
 Cards are a structural component that can help divide your components into logical sections. Only use them if you feel they contribute to the maneuverability of the design, since an abundance of cards leads to a lot of visual clutter.
 
-<Preview>
+<Canvas>
   <Story name="Card">
     <Card>This is some placeholder text inside a card.</Card>
   </Story>
-</Preview>
+</Canvas>
 
 <Props of={Card} />
 
@@ -28,7 +28,7 @@ Cards are a structural component that can help divide your components into logic
 
 Instead of a flat border design, cards also come in a variant where they are "elevated" from the background by use of shadows, evoking the Material Design paper look Google popularized. This variant also comes with mildly rounded edges, despite the fact that real paper has sharp edges, hence paper cuts. Note that we are actively phasing out this design, so consider carefully before using it.
 
-<Preview>
+<Canvas>
   <Story name="Elevation">
     <ExampleElevationContainer>
       <Card>
@@ -42,13 +42,13 @@ Instead of a flat border design, cards also come in a variant where they are "el
       </Card>
     </ExampleElevationContainer>
   </Story>
-</Preview>
+</Canvas>
 
 ## Padding
 
 Cards come with a default padding that should rarely be overriden. However, we might want to stretch an image to the edges of the card, which is why we provide the option to turn off the padding.
 
-<Preview>
+<Canvas>
   <Story name="Padding">
     <Card padding={false} elevated>
       <img
@@ -58,4 +58,4 @@ Cards come with a default padding that should rarely be overriden. However, we m
       <div style={{ padding: '1rem' }}>The image stretching above this text makes it looks more like a header for this card!</div>
     </Card>
   </Story>
-</Preview>
+</Canvas>

src/components/checkbox/Checkbox.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Props } from '@storybook/addon-docs/blocks';
 import Checkbox from './Checkbox';
 import { ExampleContainer } from 'common/containers';
 
@@ -10,7 +10,7 @@ Checkboxes are used when you want to provide the user with a choice between one
 
 This checkbox takes a default checked value and handles checked with internal state. If you need to trigger some effect based on the state of the checkbox you can pass a function to onChange, onChange also gives the checked state as a argument to the callback.
 
-<Preview>
+<Canvas>
   <Story name="All">
     <ExampleContainer>
       <Checkbox label="Checkbox" onChange={() => null} />
@@ -21,6 +21,5 @@ This checkbox takes a default checked value and handles checked with internal st
       <Checkbox label="Error" error={true} onChange={() => null} />
     </ExampleContainer>
   </Story>
-</Preview>
-
+</Canvas>
 <Props of={Checkbox} />

src/components/colors/Colors.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Props } from '@storybook/addon-docs/blocks';
 import { media, breakPoints } from 'common/layout';
 import ColorSwatch from './Colors';
 
@@ -12,7 +12,7 @@ If implemented correctly, this could make theming easier, as the colors would pr
 Our primary and secondary palette is part of Online's [brand identity](https://online.ntnu.no/wiki/online/info/innsikt-og-interface/grafisk-profil/). Until an "official" dark mode is discussed, we prefer using whites and grays for most elements, with splashes of color here and there. When designing interactive elements, like when developing the components of Design System, you mostly need to use the base "primary" color. The tints and shades can be useful if you for example want to highlight something when hovering over it.
 The secondary color should be used very sparingly, mostly when a lot of the primary color is already used and you need to distinguish from it.
 
-<Preview>
+<Canvas>
   <Story name="Primary">
     <>
       <ColorSwatch color="primaryLighten45" darkText={true} />
@@ -35,12 +35,12 @@ The secondary color should be used very sparingly, mostly when a lot of the prim
       <ColorSwatch color="secondaryDarken45" />
     </>
   </Story>
-</Preview>
+</Canvas>
 
 First up is our set of grays, of which there are many. For now we just use actual black and actual white, instead of a slightly-off low contrast version. Again, these colors could be replaced easily.
 The reason so many shades are provided is because you often need more than you think to distinguish elements from eachother.
 
-<Preview>
+<Canvas>
   <Story name="Gray">
     <>
       <ColorSwatch color="white" darkText={true} />
@@ -54,11 +54,11 @@ The reason so many shades are provided is because you often need more than you t
       <ColorSwatch color="black" />
     </>
   </Story>
-</Preview>
+</Canvas>
 
 The info color is used in components to indicate a bit of information, most prominently displayed in the "Message" component.
 
-<Preview>
+<Canvas>
   <Story name="Info">
     <>
       <ColorSwatch color="infoLighten90" darkText={true} />
@@ -68,11 +68,11 @@ The info color is used in components to indicate a bit of information, most prom
       <ColorSwatch color="infoDarken70" />
     </>
   </Story>
-</Preview>
+</Canvas>
 
 The success color is used to indicate confirmative actions, for example saving or finishing a form.
 
-<Preview>
+<Canvas>
   <Story name="Success">
     <>
       <ColorSwatch color="successLighten90" darkText={true} />
@@ -82,11 +82,11 @@ The success color is used to indicate confirmative actions, for example saving o
       <ColorSwatch color="successDarken70" />
     </>
   </Story>
-</Preview>
+</Canvas>
 
 The warning color can indicate actions where the user should take a second to think about what they're doing. It can also tell the user important information about deviations from regular user flow that should be taken into consideration.
 
-<Preview>
+<Canvas>
   <Story name="Warning">
     <>
       <ColorSwatch color="warningLighten90" darkText={true} />
@@ -96,11 +96,11 @@ The warning color can indicate actions where the user should take a second to th
       <ColorSwatch color="warningDarken70" />
     </>
   </Story>
-</Preview>
+</Canvas>
 
 The error color is the final of the status colors, and it indicates dangerous or faulty actions. If you want to discourage a user from being a place or doing a thing, this is the color to do it with. It is also useful for cases where the user has done something wrong, or something has gone wrong on our side.
 
-<Preview>
+<Canvas>
   <Story name="Error">
     <>
       <ColorSwatch color="errorLighten90" darkText={true} />
@@ -110,11 +110,11 @@ The error color is the final of the status colors, and it indicates dangerous or
       <ColorSwatch color="errorDarken70" />
     </>
   </Story>
-</Preview>
+</Canvas>
 
 The following are the event type colors as used in OWF. They should not be used for anything else than indicating the type of event. This set of colors may be revamped in the future to provide a more coherent palette, or be removed entirely.
 
-<Preview>
+<Canvas>
   <Story name="Events">
     <>
       <ColorSwatch color="eventsBedpres" />
@@ -127,4 +127,4 @@ The following are the event type colors as used in OWF. They should not be used
       <ColorSwatch color="eventsAnnet" />
     </>
   </Story>
-</Preview>
+</Canvas>

src/components/eventCard/EventCard.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Props } from '@storybook/addon-docs/blocks';
 import EventCard from './EventCard';
 
 <Meta title="EventCard" component={EventCard} />
@@ -9,7 +9,7 @@ This component was designed for use in OWF, but the OWF implementation has since
 
 This large event card prominently displays the event image, with the information displayed directly underneath it.
 
-<Preview>
+<Canvas>
   <Story name="Large">
     <EventCard
       eventName="Nofas"
@@ -21,17 +21,17 @@ This large event card prominently displays the event image, with the information
       eventColor="#127DBD"
     />
   </Story>
-</Preview>
+</Canvas>
 
 ## Small event card
 
 There is a smaller version of the card for more compact viewing. It displays the same information as the larger version, except it doesn't have the image.
 
 <Props of={EventCard} />
 
-<Preview>
+<Canvas>
   <Story name="Small">
     <EventCard eventName="Bekk" date="2019-08-07" attending="17/20" isLargeEvent={false} />
   </Story>
-</Preview>
+</Canvas>
 

src/components/icon/Icon.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Props } from '@storybook/addon-docs/blocks';
 import Icon from './Icon';
 import Button from '../button/Button';
 import styled from 'styled-components';
@@ -22,7 +22,7 @@ When you follow the link above, you can find an icon you like, then enter the na
 
 PS: for the icons to work you must remember to inlcude the fonts in your document head.
 
-<Preview>
+<Canvas>
   <Story name="All">
     <ExampleIconContainer>
       <Paragraph style={{ fontSize: '24px' }}>
@@ -43,6 +43,6 @@ PS: for the icons to work you must remember to inlcude the fonts in your documen
       </Button>
     </ExampleIconContainer>
   </Story>
-</Preview>
+</Canvas>
 
 <Props of={Icon} />

src/components/link/Link.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Props } from '@storybook/addon-docs/blocks';
 import Link from './Link';
 import { Paragraph } from '../../';
 
@@ -8,7 +8,7 @@ import { Paragraph } from '../../';
 
 This is supposed to be a drop-in replacement for the anchor tag, just use it as a regular old text link. In the vast majority of cases, you want to use the default "underline on hover". Why we made the other an option, I don't know, but it's there.
 
-<Preview>
+<Canvas>
   <Story name="All">
     <>
       <Paragraph>
@@ -32,6 +32,6 @@ This is supposed to be a drop-in replacement for the anchor tag, just use it as
       </Paragraph>
     </>
   </Story>
-</Preview>
+</Canvas>
 
 <Props of={Link} />