docs: migrate essentials to storybook (#322)

* essentials pages
* Logo
* Icons
* remove IE 11 from the list of supported

---------

Co-authored-by: lena <[email protected]>
Co-authored-by: Vanessa Knibbe <[email protected]>
Co-authored-by: Nikolai Lopin <[email protected]>

Author: 4 people

.storybook/main.ts

@@ -1,8 +1,17 @@
 import { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
-    stories: ['../src/**/*.(stories|storybook).mdx', '../src/**/*.stories.@(ts|tsx)'],
-    addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+    stories: [
+        '../docs/**/*.(stories|storybook).mdx',
+        '../src/**/*.(stories|storybook).mdx',
+        '../src/**/*.stories.@(ts|tsx)'
+    ],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
+        '@storybook/addon-viewport'
+    ],
     framework: {
         name: '@storybook/react-webpack5',
         options: {}

.storybook/preview.ts

@@ -17,8 +17,63 @@ export const preview: Preview = {
                 { name: 'light', value: '#FFFFFF' },
                 { name: 'dark', value: '#001E3E' }
             ]
+        },
+        viewport: {
+            viewports: {
+                mobile: {
+                    name: 'Mobile',
+                    styles: {
+                        height: '568px',
+                        width: '320px'
+                    },
+                    type: 'mobile'
+                },
+                mobile_landscape: {
+                    name: 'Mobile landscape',
+                    styles: {
+                        height: '320px',
+                        width: '568px'
+                    },
+                    type: 'mobile'
+                },
+                tablet: {
+                    name: 'Tablet',
+                    styles: {
+                        height: '1112px',
+                        width: '834px'
+                    },
+                    type: 'tablet'
+                },
+                tablet_landscape: {
+                    name: 'Tablet landscape',
+                    styles: {
+                        height: '834px',
+                        width: '1112px'
+                    },
+                    type: 'tablet'
+                },
+                desktop: {
+                    name: 'Desktop',
+                    styles: {
+                        height: '1080px',
+                        width: '1920px'
+                    },
+                    type: 'desktop'
+                }
+            }
+        },
+        options: {
+            storySort: {
+                order: ['Get Started']
+            }
         }
     }
 };
 
 export default preview;
+
+// (default)	0	-	Mobile (portrait)
+// 30rem (480px)	1	small	Mobile (landscape)
+// 48rem (768px)	2	medium	Tablet (portrait)
+// 62rem (992px)	3	large	Tablet (landscape)
+// 75rem (1200px)	4	xlarge	Laptops (and Desktops)

docs/accessibility.mdx

@@ -0,0 +1,34 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Accessibility" />
+
+# Accessibility (a11y)
+
+Accessible design not only helps users with disabilities; it provides better user experiences for everyone.
+
+## Overview
+
+Our goal is to provide a consistent user experience for all users, whether they’re navigating with a mouse/touchscreen, keyboard, or screen reader.
+
+An accessible product should:
+
+-   Give all users the same quality of experience
+-   Adapt to users and situations
+
+Individually accessible elements and components are part of building accessible products, but the accessibility efforts need for manual testing. When designing new UIs, rely as much as possible on Wave existing components and follow accessible patterns. If you're creating a new component or pattern (one that doesn't exist in Wave), keep in mind accessibility practices before your implementation.
+
+## Mission
+
+The Wave Design System team wants as many people as possible to be able to use Wave powered products. For example, that means you should be able to:
+
+-   **zoom** in up to 300% without the text spilling off the screen
+-   navigate most of the website using just a **keyboard**
+-   listen to most of the website using a **screen reader**
+
+## Aid development process
+
+-   How to [audit Web a11y Video](https://www.youtube.com/watch?v=cOmehxAU_4s)
+-   Use the [a11y project checklist](https://www.a11yproject.com/checklist/) and aim for at least A level compliance
+-   Use [axe dev tools](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd) for accessibility testing. Check more at [deque Axe](https://www.deque.com/axe/devtools/) and learn [how to use it with this Video](https://www.youtube.com/watch?v=dyU9yrRJ5Eg)
+-   Use [Lighthouse Chrome extension](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en) for accessibility score. Check more at [Web.dev a11y](https://web.dev/accessibility-scoring/)
+-   Use [accessible queries](https://testing-library.com/docs/queries/about#priority) when writing tests. This assume you are using [testing-library](https://testing-library.com/)

docs/accessibility.stories.mdx

@@ -1,13 +1,14 @@
----
-name: Browser support
-route: /browser-support
-cardHeadline: Browser support
-cardSubHeadline: Creating a consistent experience across browsers and devices.
----
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Browser support" />
+
+# Browser support
+
+Creating a consistent experience across browsers and devices.
 
 ## Supported Devices
 
 The design system should be universally accessible. Components might not look perfect in all scenarios, but everything
 should still be accessible to the user.
 
-**Currently, we are supporting the latest 2 versions of Chrome, Firefox, Safari, Edge and Internet Explorer 11.**
+**Currently, we are supporting the latest 2 versions of Chrome, Firefox, Safari, and Edge.**

docs/browser-support.mdx renamed to docs/browser-support.stories.mdx

@@ -1,13 +1,13 @@
----
-name: Contributing
-route: /contributing
-cardHeadline: Contributing
-cardSubHeadline: Everyone is welcome to make contributions to the design system. To make sure that everyone can contribute, we have decided to write out a few steps that help you add your contributions.
----
-
-import workflowImageUrl from './contributing-new-pattern-workflow.svg'
+import { Meta } from '@storybook/blocks';
+import workflowImageUrl from './contributing-new-pattern-workflow.svg';
 import { ImageModal } from './components/ImageModal';
 
+<Meta title="Contributing" />
+
+# Contributing
+
+Everyone is welcome to make contributions to the design system. To make sure that everyone can contribute, we have decided to write out a few steps that help you add your contributions.
+
 ## Reporting Bugs
 
 The design system is used in many places. We have a hard time keeping our eyes on all of them to keep up with the issues
@@ -27,13 +27,13 @@ should be added to the design system.
 This is the submission process for new components, essentials and improvements to existing components:
 
 1. [Create a Github issue](https://github.com/freenowtech/wave/issues/new) with the basic information and gather
-feedback from the maintainers and your fellow developers
+   feedback from the maintainers and your fellow developers
 2. Align with the maintainers and other developers on the API of the component
 3. After the development is done, open a pull request, keeping the
-[development guidelines](../CONTRIBUTING.md) in mind. You will get feedback here, but we recommend check-ins with 
-designers and developers during the development
+   [development guidelines](../CONTRIBUTING.md) in mind. You will get feedback here, but we recommend check-ins with
+   designers and developers during the development
 4. With the required approvals, you can merge your branch to main and it will be released by the maintainers in the
-next version of `@freenow/wave`
+   next version of `@freenow/wave`
 
 If you need any help during the process, don't hesitate to reach out to one of the maintainers.
 
@@ -51,7 +51,6 @@ Descriptions, FAQs and explanations are all valuable for us! Documentation PRs a
 
 All the documentation pages are Markdown-based. You don't need to know how to write code to contribute.
 
-
 ## Other Contributions
 
 Not all contributions have to be made in design, code and pull requests. You can for example help your team adopt the

docs/contributing.mdx renamed to docs/contributing.stories.mdx

@@ -1,9 +1,13 @@
----
-name: Get Started
-route: '/'
-cardHeadline: Wave Design System
-cardSubHeadline: Welcome to the Design System of FREE NOW. Thanks for stopping by! This is the place where you find the latest components and essentials, that enable you to rapidly build your product.
----
+import { Meta } from '@storybook/blocks';
+import { Card } from '../src/components/Card/Card';
+import { Headline } from '../src/components/Headline/Headline';
+import { Text } from '../src/components/Text/Text';
+
+<Meta title="Get Started" />
+
+# Wave Design System
+
+Welcome to the Design System of FREE NOW. Thanks for stopping by! This is the place where you find the latest components and essentials, that enable you to rapidly build your product.
 
 ## Installation
 
@@ -18,16 +22,23 @@ npm i @freenow/wave
 All of our components are exported by name from `@freenow/wave`, so you can import them with:
 
 ```jsx
-import { Button, Card, Headline, Text } from '@freenow/wave';
+import { Card, Headline, Text } from '@freenow/wave';
 
 export default () => (
-    <Card>
+    <Card level={200}>
         <Headline>Welcome</Headline>
         <Text>FREE NOW Design System</Text>
     </Card>
 );
 ```
 
+You'll see this:
+
+<Card level={200}>
+    <Headline>Welcome</Headline>
+    <Text>FREE NOW Design System</Text>
+</Card>
+
 ## Dynamic Imports & Create React App
 
 If you are using create-react-app for your project, you are already set up and can use the library without additional

docs/index.mdx renamed to docs/index.stories.mdx

@@ -1,9 +1,10 @@
----
-name: Migrating
-route: /migrating
-cardHeadline: Migrating
-cardSubHeadline: Migrating from one major version to the next with ease.
----
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Migrating" />
+
+# Migrating
+
+Migrating from one major version to the next with ease.
 
 ## From v1 to v2
 
@@ -18,7 +19,6 @@ npx jscodeshift -t node_modules/@freenow/wave/codemods/v2.ts path/to/src
 The `block` property used to act as a shortcut to give the button components a width of 100%. In the future, use the `width` property
 directly. It uses the styled-system variable, which is a lot more flexible than just the boolean flag.
 
-
 ## Codemods
 
 Codemods are scripted transformations that you can run on your code to take care of most of the repetitive work involved

docs/migrating.mdx renamed to docs/migrating.stories.mdx

@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Versioning Policy" />
+
+# Versioning Policy
+
+Predictable and consistent versions for Wave
+
+## Semantic Versioning
+
+Our goal is to release update to this library without breaking anyone's projects. Therefore, we are using [SemVer](https://semver.org)
+which has the following release types.
+
+-   **Major** versions contain breaking changes and may also contain sweeping visual changes, like changing colors (usually includes a codemods).
+-   **Minor** versions include new components or functionality and properties for existing components.
+-   **Patch** versions provide internal fixes, documentation changes or package upgrades (anything that does not affect the consumers of this library).
+
+### Deprecations
+
+When deciding on the deprecation of a feature or component in the next major version, we add a warning indicating
+the feature is scheduled for deprecation or removal. This is sent to the console in development builds and excluded in
+production builds.

docs/versioning-policy.mdx

@@ -5,14 +5,17 @@ import { BusinessLogo } from './variants/BusinessLogo';
 interface LogoProps {
     /**
      * Adjust component for display on a dark background
+     * @default false
      */
     inverted?: boolean;
     /**
      * Change the logo appearance to reflect the respective part of the organization
+     * @default default
      */
     variant?: 'default' | 'business';
     /**
      * Change the logo to monochrome version (blue letters for regular version and white letters for inverted)
+     * @default false
      */
     monochrome?: boolean;
 }