docs: use helper for dark background (+43 squashed commits)

Squashed commits:
[878b4fa] docs: polish docs
[f85e0c6] docs: use consistent stories import
[fb1df67] docs: use ArgTypes for table

ArgsTable is deprecated
[3f38897] docs: migrate Pagination docs to csf3
[225584e] docs: migrate SelectList docs to csf3
[54ca704] docs: align naming of doc pages
[74e8eab] docs: migrate Select docs to csf3
[87e0c69] docs: migrate Skeleton docs to csf3
[eeec04e] docs: migrate FilePicker docs to csf3
[2a3d688] docs: migrate Offcanvas docs to csf3
[5bb2814] docs: migrate PhoneInput docs to csf3
[c89f128] docs: migrate RadioButton docs to csf3
[a97cdd9] docs: migrate TabBar docs to csf3
[1d40058] docs: migrate Password docs to csf3
[4f53305] docs: show Text default values
[663a8c8] docs: migrate Text docs to csf3
[0fa46b1] docs: migrate Textarea docs to csf3
[87e40ad] docs: migrate Toggle docs to csf3
[09673a9] docs: migrate Tooltip docs to csf3
[d564c88] docs: migrate Modal docs to csf3
[b724948] docs: migrate Tag docs to csf3
[7ef196a] docs: migrate Link docs to csf3
[aa0312e] docs: migrate Label docs to csf3
[8902acc] docs: migrate Popover docs to csf3
[5f31507] docs: migrate Input docs to csf3
[a8d3fe5] docs: migrate Table docs to csf3
[de07c95] docs: remove stories folder
[3727e13] docs: use new imports
[1e0b2bb] docs: clean banner docs
[64e8bb9] docs: moves datepicker stories to the datepicker folder
[ec9c6a2] docs: moves Divider stories to the divider folder
[c6d1213] docs: moves Dimming stories to the dimming folder
[5889c10] docs: moves Banner stories to the banner folder
[c746efb] docs: moves Checkbox stories to the checkbox folder
[488700b] docs: moves Card stories to the card folder
[30786b7] docs: move Button stories to the button folder
[1d6a00a] docs: move Box stories to the box folder
[d9c1270] docs: move accordion stories to the accordion folder
[f3cd48e] docs: remove unused code
[7b5c307] docs: migrate Infobanner docs
[0d4dcec] docs: migrate InlineSpinner
[ffcddfb] docs: migrate HelperText
[5848410] docs: migrate Headline docs

Author: Nikolai Lopin

.storybook/main.ts

@@ -1,11 +1,7 @@
 import { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
-    stories: [
-        '../docs/**/*.(stories|storybook).mdx',
-        '../src/**/*.(stories|storybook).mdx',
-        '../src/**/*.stories.@(ts|tsx)'
-    ],
+    stories: ['../**/*.storybook.mdx', '../src/**/*.stories.@(ts|tsx)'],
     addons: [
         '@storybook/addon-links',
         '@storybook/addon-essentials',
@@ -18,7 +14,8 @@ const config: StorybookConfig = {
     },
     docs: {
         autodocs: true
-    }
+    },
+    staticDirs: ['../public']
 };
 
 export default config;

.storybook/preview.ts

@@ -64,16 +64,11 @@ export const preview: Preview = {
         },
         options: {
             storySort: {
-                order: ['Get Started']
+                method: 'alphabetical',
+                order: ['Get Started', 'Essentials', 'Components', 'Form Elements']
             }
         }
     }
 };
 
 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.stories.mdx renamed to docs/accessibility.storybook.mdx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React, { PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
 import { SemanticColors } from '../../essentials';
@@ -24,7 +24,7 @@ const RenderedSection = styled(Box)`
     }
 `;
 
-const Accordion = ({
+const Accordion: React.FC<PropsWithChildren<AccordionProps>> = ({
     heading,
     description,
     info,
@@ -34,7 +34,7 @@ const Accordion = ({
     children,
     onExpand = () => undefined,
     onCollapse = () => undefined
-}: AccordionProps): ReactElement => (
+}) => (
     <RenderedSection role="group">
         <HorizontalDividerTop />
         {variant === 'compact' ? (

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import { Accordion } from '../Accordion';
+
+const meta: Meta<typeof Accordion> = {
+    title: 'Components/Accordion',
+    component: Accordion,
+    args: {
+        heading: 'Driver Comments',
+        children: 'This is a very long text we need to hide',
+        description: 'Comments about the driver left by passengers'
+    },
+    argTypes: {
+        children: {
+            description: 'Accordion content'
+        },
+        variant: {
+            options: ['default', 'compact'],
+            control: { type: 'radio' }
+        }
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Accordion>;
+
+export const Default: Story = {
+    args: {
+        info: '99+ comments',
+        buttonLabel: 'Expand/Collapse'
+    }
+};
+
+export const Compact: Story = {
+    args: {
+        variant: 'compact'
+    }
+};

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

@@ -0,0 +1,16 @@
+import { Meta, ArgTypes, Primary, Stories } from '@storybook/blocks';
+import * as AccordionStories from './Accordion.stories';
+
+<Meta of={AccordionStories} />
+
+# Accordion
+
+Accordion component is used to display large amount of content in a compress and progressive way.
+
+<Primary />
+
+## Properties
+
+<ArgTypes of={AccordionStories} />
+
+<Stories includePrimary={false} />

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

@@ -1,13 +1,36 @@
-import { ReactNode } from 'react';
-
 export interface AccordionProps {
+    /**
+     * Heading of the Accordion section
+     */
     heading?: string;
+    /**
+     * Description of the section
+     */
     description?: string;
+    /**
+     * Extra text below description
+     */
     info?: string;
+    /**
+     * Text on the button
+     */
     buttonLabel?: string;
+    /**
+     * UI style
+     * @default default
+     */
     variant?: 'compact' | 'default';
+    /**
+     * Render accordion initially opened
+     * @default false
+     */
     defaultExpanded?: boolean;
-    children: ReactNode;
+    /**
+     * Callback, runs after the accordion is opened
+     */
     onExpand?: () => void;
+    /**
+     * Callback, runs after the accordion is closed
+     */
     onCollapse?: () => void;
 }

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

@@ -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';
     /**

docs/versioning-policy.stories.mdx renamed to docs/versioning-policy.storybook.mdx

@@ -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/Accordion/Accordion.tsx

@@ -0,0 +1,54 @@
+import { Meta, ArgTypes, Primary, Story, Stories } 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} />

src/components/Accordion/docs/Accordion.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Box } from '../Box';
+
+const meta: Meta = {
+    title: 'Components/Box',
+    component: Box
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Box>;
+
+export const Default: Story = {
+    args: {
+        children: 'By default it is a block `div` element'
+    }
+};
+
+export const Inline: Story = {
+    args: {
+        as: 'span',
+        children: 'I can be inline when `as` prop is used'
+    }
+};
+
+export const Responsive: Story = {
+    args: {
+        children: 'I can be responsive',
+        bg: '#FF9CFC',
+        width: [1, 1, 1 / 2]
+    }
+};

src/components/Accordion/docs/Accordion.storybook.mdx

@@ -0,0 +1,20 @@
+import { Meta, Primary, Stories } from '@storybook/blocks';
+import * as BoxStories from './Box.stories';
+import { StyledSystemLinks } from '../../../docs/StyledSystemLinks';
+
+<Meta of={BoxStories} />
+
+# 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.
+
+<Primary />
+
+## Properties
+
+<StyledSystemLinks
+    component="Box"
+    supportedProps={['space', 'layout', 'position', 'color', 'flexbox', 'grid-layout', 'background']}
+/>
+
+<Stories includePrimary={false} />

src/components/Accordion/types.ts

@@ -142,7 +142,7 @@ const invertedVariantStyles = variant({
     }
 });
 
-const Button: React.FC<ButtonProps> = styled(BaseButton).attrs({ theme })<ButtonProps>`
+const Button = styled(BaseButton).attrs({ theme })<ButtonProps>`
     transition: background ease 200ms, border-color ease 200ms, color ease 200ms, fill ease 200ms;
 
     ${p => (p.inverted ? invertedVariantStyles : variantStyles)};

src/components/Banner/Banner.tsx

@@ -82,7 +82,7 @@ const invertedVariantStyles = variant({
     }
 });
 
-const TextButton: React.FC<TextButtonProps> = styled(BaseButton)<TextButtonProps>`
+const TextButton = styled(BaseButton)<TextButtonProps>`
     transition: color 200ms, fill 200ms;
 
     ${props => (props.inverted ? invertedVariantStyles(props) : variantStyles(props))};