-
- );
-};
diff --git a/src/components/Banner/docs/Banner.mdx b/src/components/Banner/docs/Banner.mdx
deleted file mode 100644
index f4e2ee18a..000000000
--- a/src/components/Banner/docs/Banner.mdx
+++ /dev/null
@@ -1,166 +0,0 @@
----
-name: Banner
-menu: Components
-route: /components/banner
----
-
-import { Banner } from '../Banner';
-import { Text, Headline, Button } from '../..';
-import { BannerCreator } from './BannerCreator';
-import { BannerPropsTable } from './BannerPropsTable';
-import { ContainedBanner } from './ContainedBanner';
-
-# Banner
-
-Banner is a strong visual pattern that is used to display an important information or state which remains until the
-cause is resolved or the banner is dismissed by the user.
-
-- Banner can include any kind of content, i.e. icons, links, copy
-- Banner should be dismissible
-- Banner **info** and **success** appear at the bottom of the screen (sticky)
-- Banner **error** appears at the top of the screen (sticky)
-- Banner appears and disappears via slide in/out animation combined with soft fade and smooth easing
-
-To properly hide the banner with the correct animation, it is recommended to call the dismiss function that can be used
-when providing a function as the child. This will also unmount the component once the animation is completed.
-
-If you need the banner to be placed top or bottom without depending on the variant make sure to align with the design team
-and bear in mind that you can use the **position** prop for it.
-
-## Variants
-
-With these buttons, you can trigger a banner to appear on the current page. You can also see some example banner
-variations with content below.
-
-
-
-### Info Banner
-
-
-
- In order to continuously improve our websites, and show offers and advertisements that are suited to you, we use
- cookies, tracking and (re-) targeting technologies. Please see our Cookie policy for more information. Tracking
- and (re-) targeting technologies will only be used if you click on "Agree".
-
-
-
-```jsx
-
-
- In order to continuously improve our websites, and show offers and advertisements that are suited to you, we use
- cookies, tracking and (re-)targeting technologies. Please see our Cookie policy for more information. Tracking
- and (re-)targeting technologies will only be used if you click on "Agree".
-
-
-```
-
-### Success Banner
-
-
-
- Booking radius updated
-
-
-
-```jsx
-
-
- Booking radius updated
-
-
-```
-
-### Success Banner with Headline & Text
-
-
-
- Booking radius updated
-
-
- accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
- dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
-
-
-
-```jsx
-
-
- Booking radius updated
-
-
- accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
- dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
-
-
-```
-
-### Error Banner
-
-
-
- Something went wrong :(
-
-
-
-```jsx
-
-
- Something went wrong :(
-
-
-```
-
-### Dismissible Banner
-
-
- {dismiss => (
-
- )}
-
-
-```jsx
-
- {dismiss => (
-
- )}
-
-```
-
-## API
-
-
-
-### Dismiss
-
-Banner provides a function to dismiss the component with an animation. The
-dismiss function is available either through render props or a hook. After the
-animation has finished the `onClose` callback will be called.
-
-#### Render Props
-
-```jsx
-
- {dismiss => }
-
-```
-
-#### Hook
-
-```jsx
-const InsideBanner = () => {
- const dismiss = useBannerDismiss();
- return ;
-};
-
-const BannerWrapper = () => {
- return (
-
-
-
- )
-};
-```
diff --git a/src/components/Banner/docs/BannerCreator.tsx b/src/components/Banner/docs/BannerCreator.tsx
deleted file mode 100644
index 7da37769d..000000000
--- a/src/components/Banner/docs/BannerCreator.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { FC, useState } from 'react';
-import styled from 'styled-components';
-import { BannerProps, Button, Text } from '../..';
-import { Banner, DismissFunc } from '../Banner';
-
-const FlexContainer = styled.div`
- display: flex;
- justify-content: space-between;
- align-items: center;
-`;
-
-interface ExampleBannerProps extends Pick {
- text: string;
-}
-
-const handleDismiss = (dismiss: DismissFunc) => () => {
- dismiss();
-};
-
-const DismissibleBanner = ({ text, variant, position }: ExampleBannerProps) => (
-
- {dismiss => (
-
- {text}
-
-
- )}
-
-);
-
-export const BannerCreator: FC = () => {
- const [banners, setBanners] = useState([]);
-
- const addBannerHandler = ({ variant, position }: Pick) => () => {
- setBanners(currentBanners => [
- ...currentBanners,
- { text: `Banner in variant "${variant}"`, variant, position }
- ]);
- };
-
- return (
- <>
- {banners.map((it, index) => (
- // eslint-disable-next-line react/no-array-index-key
-
- ))}
-
-
-
-
-
- );
-};
diff --git a/src/components/Banner/docs/BannerPropsTable.tsx b/src/components/Banner/docs/BannerPropsTable.tsx
deleted file mode 100644
index 95599fe92..000000000
--- a/src/components/Banner/docs/BannerPropsTable.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { FC } from 'react';
-import * as React from 'react';
-import { PropsTable } from '../../../docs/PropsTable';
-
-export const BannerPropsTable: FC = () => {
- const props = [
- {
- name: 'position',
- type: '"top" | "bottom"',
- description: 'Overrides the banner position.',
- defaultValue: '-'
- },
- {
- name: 'variant',
- type: '"info" | "success" | "danger"',
- description: 'Set the appropriate background color, screen position, and animation.',
- defaultValue: '-'
- },
- {
- name: 'onClose',
- type: '() => void',
- description:
- 'A function that will be called after the user has dismissed the banner and the banner has disappeared.',
- defaultValue: '-'
- }
- ];
- return ;
-};
diff --git a/src/components/Banner/docs/ContainedBanner.ts b/src/components/Banner/docs/ContainedBanner.ts
deleted file mode 100644
index d0fe21a4f..000000000
--- a/src/components/Banner/docs/ContainedBanner.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-import { Banner } from '../Banner';
-
-export const ContainedBanner = styled(Banner)`
- position: initial;
- transition: none;
-`;
diff --git a/src/components/Box/docs/Box.mdx b/src/components/Box/docs/Box.mdx
deleted file mode 100644
index 95206b6da..000000000
--- a/src/components/Box/docs/Box.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
----
-name: Box
-menu: Components
-route: /components/box
----
-
-import { Playground } from 'docz';
-import { Box } from '../Box';
-import { StyledSystemLinks } from '../../../docs/StyledSystemLinks'
-
-# Box
-
-This component serves as a wrapper component for most layout related needs. Use Box to set values such as `display`,
-`width`, `height`, and more. In practice, this component is used frequently as a wrapper around other components to
-achieve Box Model related styling.
-
-
-
-## Examples
-
-
- Box can be used to create both inline and
- block-level elements,
- elements with fixed or responsive width and height,
- and more!
-
diff --git a/src/components/Card/docs/Card.mdx b/src/components/Card/docs/Card.mdx
deleted file mode 100644
index 8f06d5978..000000000
--- a/src/components/Card/docs/Card.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
----
-name: Card
-menu: Components
-route: /components/card
----
-
-import { Playground } from 'docz';
-import { Card } from '../Card';
-import { Text } from '../../Text/Text';
-import { CardPropsTable } from './CardPropsTable'
-import { StyledSystemLinks } from '../../../docs/StyledSystemLinks'
-import { Combination } from '../../../docs/Combination'
-
-# Card
-
-## Properties
-
-
-
-
-
-
-## Examples
-
-
-
- Content
-
-
-
-## Combinations
-
-
- {(props, i) => Card Content}
-
diff --git a/src/components/Card/docs/CardPropsTable.tsx b/src/components/Card/docs/CardPropsTable.tsx
deleted file mode 100644
index b64a3455c..000000000
--- a/src/components/Card/docs/CardPropsTable.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { FC } from 'react';
-import * as React from 'react';
-import { PropsTable } from '../../../docs/PropsTable';
-
-export const CardPropsTable: FC = () => {
- const props = [
- {
- name: 'level',
- type: '0 | 100 | 200 | 300',
- description: 'Set the visual depth of the card by adding a shadow',
- defaultValue: '0'
- }
- ];
- return ;
-};
diff --git a/src/stories/components/Accordion.stories.tsx b/src/stories/components/Accordion.stories.tsx
new file mode 100644
index 000000000..2842bcfd0
--- /dev/null
+++ b/src/stories/components/Accordion.stories.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Accordion } from '../..';
+
+const description = 'Accordion component is use to display large amount of content in a compress and progressive way.';
+
+export default {
+ title: 'Components/Accordion',
+ component: Accordion,
+ parameters: {
+ docs: {
+ description: {
+ component: description
+ }
+ }
+ },
+ argTypes: {
+ onExpand: { table: { disable: true } },
+ onCollapse: { table: { disable: true } },
+ heading: { description: 'Sets the heading text' },
+ description: { description: 'Sets the description text' },
+ info: { description: 'Sets the info text' },
+ buttonLabel: { description: 'Sets the button text' },
+ defaultExpanded: {
+ description: 'Sets if the component should be expanded or collapsed by default',
+ options: [true, false],
+ control: { type: 'radio' }
+ },
+ variant: {
+ description: 'Sets the accordion variant',
+ options: ['default', 'compact'],
+ control: { type: 'radio' }
+ }
+ }
+} as ComponentMeta;
+
+const Template: ComponentStory = args => ;
+
+export const Default = Template.bind({});
+Default.args = {
+ heading: 'A Headline',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ info: 'Lorem ipsum',
+ buttonLabel: 'Expand/Collapse',
+ children:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis ante lectus, eget condimentum libero suscipit vitae. Nunc vestibulum eleifend turpis, sed tempus lectus. Etiam a facilisis felis, at molestie enim.'
+};
+
+export const Compact = Template.bind({});
+Compact.args = {
+ variant: 'compact',
+ heading: 'A Headline',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ children:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis ante lectus, eget condimentum libero suscipit vitae. Nunc vestibulum eleifend turpis, sed tempus lectus. Etiam a facilisis felis, at molestie enim.'
+};
diff --git a/src/stories/components/Banner.stories.tsx b/src/stories/components/Banner.stories.tsx
new file mode 100644
index 000000000..d91085448
--- /dev/null
+++ b/src/stories/components/Banner.stories.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Banner as BannerWave, Button } from '../..';
+
+const Banner = styled(BannerWave)`
+ position: initial;
+ transition: none;
+`;
+
+const description = `
+Banner is a strong visual pattern that is used to display an important information or state which remains until the cause is resolved or the banner is dismissed by the user.
+
+- Banner can include any kind of content, i.e. icons, links, copy
+- Banner should be dismissible
+- Banner **info** and **success** appear at the bottom of the screen (sticky)
+- Banner **error** appears at the top of the screen (sticky)
+- Banner appears and disappears via slide in/out animation combined with soft fade and smooth easing
+
+To properly hide the banner with the correct animation, it is recommended to call the dismiss function that can be used when providing a function as the child. This will also unmount the component once the animation is completed.
+
+If you need the banner to be placed top or bottom without depending on the variant make sure to align with the design team and bear in mind that you can use the **position** prop for it.
+`;
+
+export default {
+ title: 'Components/Banner',
+ component: Banner,
+ parameters: {
+ docs: {
+ description: {
+ component: description
+ }
+ }
+ },
+ argTypes: {
+ onClose: { table: { disable: true } },
+ children: {
+ description: 'Children elements can be a ReactNode or a render prop that provides a dismiss method',
+ control: { type: 'none' }
+ }
+ }
+} as ComponentMeta;
+
+const Template: ComponentStory = args => ;
+
+export const Info = Template.bind({});
+Info.args = {
+ variant: 'info',
+ children: (
+ <>
+ In order to continuously improve our websites, and show offers and advertisements that are suited to you, we
+ use cookies, tracking and (re-)targeting technologies. Please see our Cookie policy for more information.
+ Tracking and (re-)targeting technologies will only be used if you click on Agree.
+
+ )
+};
+
+export const Success = Template.bind({});
+Success.args = {
+ variant: 'success',
+ children: 'Booking radius updated'
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+ variant: 'danger',
+ children: 'Something went wrong :('
+};
+
+export const Dismiss = Template.bind({});
+const code = `
+
+ {dismiss => }
+
+`;
+Dismiss.args = {
+ variant: 'info',
+ children: dismiss =>
+};
+Dismiss.parameters = {
+ docs: {
+ source: { code, language: 'javascript', type: 'auto' }
+ }
+};
diff --git a/src/stories/components/Box.stories.tsx b/src/stories/components/Box.stories.tsx
new file mode 100644
index 000000000..4fe911065
--- /dev/null
+++ b/src/stories/components/Box.stories.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Box } from '../..';
+
+const description1 =
+ 'This component serves as a wrapper component for most layout related needs. Use Box to set values such as `display`, `width`, `height`, and more. In practice, this component is used frequently as a wrapper around other components to achieve Box Model related styling.';
+
+const description2 =
+ 'The Box supports `space`, `layout`, `position`, `color`, `flexbox`, `grid-layout` and `background` [styled-system](https://styled-system.com/table) props.';
+
+const Example = () => (
+ <>
+ Box can be used to create both{' '}
+
+ inline
+ {' '}
+ and
+ block-level elements,
+
+ elements with fixed or responsive width and height,
+
+
+ and more!
+
+
+);
+
+const code = `
+Box can be used to create both
+inline
+and
+block-level elements,
+elements with fixed or responsive width and height,
+and more!
+`;
+
+export default {
+ title: 'Components/Box',
+ component: Example,
+ parameters: {
+ docs: {
+ description: {
+ component: `${description1}\n\n${description2}`
+ }
+ }
+ },
+ argTypes: {}
+} as ComponentMeta;
+
+const Template: ComponentStory = () => ;
+
+export const Default = Template.bind({});
+Default.parameters = {
+ docs: {
+ source: { code, language: 'jsx', type: 'auto' }
+ }
+};
diff --git a/src/stories/components/Card.stories.tsx b/src/stories/components/Card.stories.tsx
new file mode 100644
index 000000000..5a80d15b3
--- /dev/null
+++ b/src/stories/components/Card.stories.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Card } from '../..';
+
+const description =
+ 'The Card supports `space`, `height` and `width` [styled-system](https://styled-system.com/table) props.';
+
+export default {
+ title: 'Components/Card',
+ component: Card,
+ parameters: {
+ docs: {
+ description: {
+ component: description
+ }
+ }
+ },
+ argTypes: {
+ ref: { table: { disable: true } },
+ forwardedAs: { table: { disable: true } },
+ theme: { table: { disable: true } },
+ as: { table: { disable: true } },
+ children: { description: 'Defines the inner content of the card' },
+ level: {
+ description: 'Sets the drop-shadow level',
+ options: [0, 100, 200, 300],
+ control: { type: 'radio' }
+ }
+ }
+} as ComponentMeta;
+
+const Template: ComponentStory = args => ;
+
+export const Default = Template.bind({});
+Default.storyName = 'Card';
+Default.args = {
+ level: 300,
+ children: 'Card Contents'
+};
diff --git a/src/stories/hooks/useBannerDismiss.stories.tsx b/src/stories/hooks/useBannerDismiss.stories.tsx
new file mode 100644
index 000000000..33354d6cc
--- /dev/null
+++ b/src/stories/hooks/useBannerDismiss.stories.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Button, Banner as BannerWave, useBannerDismiss } from '../..';
+
+const Banner = styled(BannerWave)`
+ position: initial;
+ transition: none;
+`;
+
+const InsideBanner = () => {
+ const dismiss = useBannerDismiss();
+ return ;
+};
+
+const Example = () => (
+
+
+
+);
+
+const code = `
+const InsideBanner = () => {
+ const dismiss = useBannerDismiss()
+ return
+}
+
+const Wrapper = () => (
+
+
+
+)
+`;
+
+const description =
+ 'Renders a `button` tag. This module exposes two types of buttons `` and ``. Take a look to the [MDN web docs - Button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) to know more about some of the default props supported by a button along with some accessibility concerns. \n\n The purpose of the buttons is to trigger an interaction like order, confirmation or submit. For navigation targets consider a link. Use the primary button only once per screen and avoid putting two primary buttons next to each other. Use the secondary button for less important actions and in multi button scenarios.';
+
+export default {
+ title: 'Hooks/useBannerDismiss',
+ component: Example,
+ parameters: {
+ docs: {
+ description: {
+ component: description
+ }
+ }
+ }
+} as ComponentMeta;
+
+const Template: ComponentStory = () => ;
+
+export const Default = Template.bind({});
+Default.storyName = 'useBannerDismiss';
+Default.parameters = {
+ docs: {
+ source: { code, language: 'javascript', type: 'auto' }
+ }
+};