docs: moves Banner stories to the banner folder

Author: Nikolai Lopin

src/components/Banner/Banner.tsx

@@ -75,11 +75,12 @@ type DismissFunc = () => void;
 
 interface BannerProps {
     /**
-     * Overrides the banner position.
+     * Set banner position
      */
     position?: 'top' | 'bottom';
     /**
      * Set the appropriate background color, screen position, and animation.
+     * @default info
      */
     variant?: 'info' | 'success' | 'danger';
     /**

src/components/Banner/docs/Banner.stories.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Banner } from '../Banner';
+import { Text } from '../../Text/Text';
+import { Button } from '../../Button/Button';
+
+const meta: Meta = {
+    title: 'Components/Banner',
+    component: Banner,
+    argTypes: {
+        children: {
+            description:
+                'Content of the banner. Can be `ReactNode` or a render function that receives a dismiss method',
+            control: { type: 'none' }
+        },
+        position: {
+            table: {
+                defaultValue: {
+                    summary: 'Depends on the variant prop value',
+                    detail: `
+                        info → top\nsuccess → top\ndanger → bottom
+                    `
+                }
+            }
+        }
+    },
+    args: {
+        children: (
+            <Text inverted>
+                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.
+            </Text>
+        )
+    },
+    decorators: [
+        Story => (
+            <div
+                style={{
+                    willChange: 'transform',
+                    height: '250px',
+                    border: '1px dashed gray',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                }}
+            >
+                <Text secondary fontSize={3}>
+                    Page
+                </Text>
+                <Story />
+            </div>
+        )
+    ]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Banner>;
+
+export const Default: Story = {
+    args: {
+        children: <Text inverted>Hello</Text>
+    }
+};
+
+export const Success: Story = {
+    args: {
+        variant: 'success'
+    }
+};
+
+export const Danger: Story = {
+    args: {
+        variant: 'danger',
+        children: <Text inverted>Oops! Something went wrong</Text>
+    }
+};
+
+export const PositionTop: Story = {
+    args: {
+        position: 'top'
+    }
+};
+
+export const WithDismissedFn: Story = {
+    args: {
+        children: dismiss => (
+            <>
+                <Text inverted>If you are tired of this banner, hit the button 👉 </Text>
+                <Button onClick={dismiss}>Close</Button>
+            </>
+        )
+    }
+};

src/components/Banner/docs/Banner.storybook.mdx

@@ -0,0 +1,54 @@
+import { Meta, ArgTypes, Primary, Story, Stories, Source } from '@storybook/blocks';
+import * as BannerStories from './Banner.stories';
+import { Advice } from '../../../docs/Advice';
+
+<Meta of={BannerStories} />
+
+# Banner
+
+Banner is a strong visual pattern that is used to display 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.
+
+<Primary />
+
+## Properties
+
+<ArgTypes of={BannerStories.Default} />
+
+<Advice>
+    The `Banner` uses `position:sticky` for positioning. It means it will always be rendered on top/bottom of the
+    viewport ([MDN](http://developer.mozilla.org/en-US/docs/Web/CSS/position)).
+</Advice>
+
+## Visibility management (dismiss function)
+
+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.
+
+<Story of={BannerStories.WithDismissedFn} />
+
+```tsx
+<Banner>
+    {dismiss => (
+        <>
+            <Text inverted>If you are tired of this banner, hit the button 👉 </Text>
+            <Button onClick={dismiss}>Close</Button>
+        </>
+    )}
+</Banner>
+```
+
+<Stories includePrimary={false} />