WECH-23: Added Banner story

Author: Zack Jones

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<typeof Banner>;
+
+const Template: ComponentStory<typeof Banner> = args => <Banner {...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 = `
+<Banner>
+    {dismiss => <Button onClick={dismiss}>Close</Button>}
+</Banner>
+`;
+Dismiss.args = {
+    variant: 'info',
+    children: dismiss => <Button onClick={dismiss}>Close</Button>
+};
+Dismiss.parameters = {
+    docs: {
+        source: { code, language: 'javascript', type: 'auto' }
+    }
+};

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 <Button onClick={dismiss}>Close</Button>;
+};
+
+const Example = () => (
+    <Banner>
+        <InsideBanner />
+    </Banner>
+);
+
+const code = `
+const InsideBanner = () => {
+    const dismiss = useBannerDismiss()
+    return <Button onClick={dismiss}>Close</Button>
+}
+
+const Wrapper = () => (
+    <Banner>
+        <InsideBanner />
+    </Banner>
+)
+`;
+
+const description =
+    'Renders a `button` tag. This module exposes two types of buttons `<TextButton />` and `<Button />`. 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<typeof Example>;
+
+const Template: ComponentStory<typeof Example> = () => <Example />;
+
+export const Default = Template.bind({});
+Default.storyName = 'useBannerDismiss';
+Default.parameters = {
+    docs: {
+        source: { code, language: 'javascript', type: 'auto' }
+    }
+};