feat(Banner): add banner component

Author: joshblack

.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-dark-colorblind-linux.png

@@ -0,0 +1,97 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+const stories = [
+  // {
+  // title: 'Default',
+  // id: 'drafts-components-banner--default',
+  // },
+  {
+    title: 'Critical',
+    id: 'drafts-components-banner-features--critical',
+  },
+  {
+    title: 'Info',
+    id: 'drafts-components-banner-features--info',
+  },
+  {
+    title: 'Success',
+    id: 'drafts-components-banner-features--success',
+  },
+  {
+    title: 'Upsell',
+    id: 'drafts-components-banner-features--upsell',
+  },
+  {
+    title: 'Warning',
+    id: 'drafts-components-banner-features--warning',
+  },
+  {
+    title: 'Dismiss',
+    id: 'drafts-components-banner-features--dismiss',
+  },
+  {
+    title: 'TitleOnly',
+    id: 'drafts-components-banner-features--title-only',
+  },
+  {
+    title: 'WithTitle',
+    id: 'drafts-components-banner-features--with-title',
+  },
+  {
+    title: 'WithActions',
+    id: 'drafts-components-banner-features--with-actions',
+  },
+]
+
+test.describe('Banner', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`Banner.${story.title}.${theme}.png`)
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
+
+  // Responsive
+  test('Responsive behavior', async ({page}) => {
+    await visit(page, {
+      id: 'drafts-components-banner--default',
+    })
+
+    // Small
+    // await page.setViewportSize({width: 375, height: 667})
+    // expect(await page.screenshot()).toMatchSnapshot('Banner.Responsive.Small.png')
+
+    // Medium
+    // await page.setViewportSize({width: 1024, height: 768})
+    // expect(await page.screenshot()).toMatchSnapshot('Banner.Responsive.Medium.png')
+
+    // Large
+    // await page.setViewportSize({width: 1024, height: 768})
+    // expect(await page.screenshot()).toMatchSnapshot('Banner.Responsive.Large.png')
+  })
+})

.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-dark-dimmed-linux.png

@@ -0,0 +1,47 @@
+{
+  "id": "banner",
+  "name": "Banner",
+  "status": "draft",
+  "a11yReviewed": false,
+  "stories": [],
+  "props": [
+    {
+      "name": "onDismiss",
+      "type": "() => void",
+      "description": ""
+    },
+    {
+      "name": "icon",
+      "type": "",
+      "description": ""
+    },
+    {
+      "name": "title",
+      "type": "",
+      "description": ""
+    },
+    {
+      "name": "variant",
+      "type": "",
+      "description": ""
+    }
+  ],
+  "subcomponents": [
+    {
+      "name": "Banner.Description",
+      "props": []
+    },
+    {
+      "name": "Banner.Actions",
+      "props": []
+    },
+    {
+      "name": "Banner.PrimaryAction",
+      "props": []
+    },
+    {
+      "name": "Banner.SecondaryAction",
+      "props": []
+    }
+  ]
+}

.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-dark-high-contrast-linux.png

@@ -0,0 +1,144 @@
+import {Banner} from '../Banner'
+import {action} from '@storybook/addon-actions'
+import Link from '../Link'
+import type {Meta} from '@storybook/react'
+
+const meta = {
+  title: 'Drafts/Components/Banner/Features',
+  component: Banner,
+} satisfies Meta<typeof Banner>
+
+export default meta
+
+export const Critical = () => {
+  return (
+    <Banner variant="critical">
+      <Banner.Description>
+        GitHub users are{' '}
+        <Link inline underline href="#">
+          now required
+        </Link>{' '}
+        to enable two-factor authentication as an additional security measure.
+      </Banner.Description>
+    </Banner>
+  )
+}
+
+export const Info = () => {
+  return (
+    <Banner onDismiss={action('onDismiss')} variant="info">
+      <Banner.Description>
+        GitHub users are{' '}
+        <Link inline underline href="#">
+          now required
+        </Link>{' '}
+        to enable two-factor authentication as an additional security measure.
+      </Banner.Description>
+    </Banner>
+  )
+}
+
+export const Success = () => {
+  return (
+    <Banner onDismiss={action('onDismiss')} variant="success">
+      <Banner.Description>
+        GitHub users are{' '}
+        <Link inline underline href="#">
+          now required
+        </Link>{' '}
+        to enable two-factor authentication as an additional security measure.
+      </Banner.Description>
+    </Banner>
+  )
+}
+
+export const Upsell = () => {
+  return (
+    <Banner onDismiss={action('onDismiss')} variant="upsell">
+      <Banner.Description>
+        GitHub users are{' '}
+        <Link inline underline href="#">
+          now required
+        </Link>{' '}
+        to enable two-factor authentication as an additional security measure.
+      </Banner.Description>
+    </Banner>
+  )
+}
+
+export const Warning = () => {
+  return (
+    <Banner onDismiss={action('onDismiss')} variant="warning">
+      <Banner.Description>
+        GitHub users are{' '}
+        <Link inline underline href="#">
+          now required
+        </Link>{' '}
+        to enable two-factor authentication as an additional security measure.
+      </Banner.Description>
+    </Banner>
+  )
+}
+
+export const Dismiss = () => {
+  return (
+    <Banner onDismiss={action('onDismiss')}>
+      <Banner.Description>
+        GitHub users are{' '}
+        <Link inline underline href="#">
+          now required
+        </Link>{' '}
+        to enable two-factor authentication as an additional security measure.
+      </Banner.Description>
+    </Banner>
+  )
+}
+
+export const TitleOnly = () => {
+  return (
+    <Banner
+      title={
+        <>
+          GitHub users are{' '}
+          <Link inline underline href="#">
+            now required
+          </Link>{' '}
+          to enable two-factor authentication as an additional security measure.
+        </>
+      }
+      variant="warning"
+    />
+  )
+}
+
+export const WithTitle = () => {
+  return (
+    <Banner title="This is a title" variant="warning">
+      <Banner.Description>
+        GitHub users are{' '}
+        <Link inline underline href="#">
+          now required
+        </Link>{' '}
+        to enable two-factor authentication as an additional security measure.
+      </Banner.Description>
+    </Banner>
+  )
+}
+
+export const WithActions = () => {
+  return (
+    <Banner title="This is a title" variant="warning">
+      <Banner.Description>
+        GitHub users are{' '}
+        <Link inline underline href="#">
+          now required
+        </Link>{' '}
+        to enable two-factor authentication as an additional security measure.
+      </Banner.Description>
+      <Banner.Actions>
+        <Banner.PrimaryAction>Button</Banner.PrimaryAction>
+        <Banner.SecondaryAction>Button</Banner.SecondaryAction>
+      </Banner.Actions>
+    </Banner>
+  )
+}

.playwright/snapshots/components/Banner.test.ts-snapshots/Banner-Critical-dark-linux.png

@@ -0,0 +1,66 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import React from 'react'
+import {Button} from '../Button'
+import Link from '../Link'
+import {Banner} from '../Banner'
+import {action} from '@storybook/addon-actions'
+
+const meta = {
+  title: 'Drafts/Components/Banner',
+  component: Banner,
+} satisfies Meta<typeof Banner>
+
+export default meta
+
+export const Default = () => {
+  return (
+    <Banner title="This is a title" onDismiss={action('onDismiss')}>
+      <Banner.Description>
+        GitHub users are{' '}
+        <Link inline href="#">
+          now required
+        </Link>{' '}
+        to enable two-factor authentication as an additional security measure.
+      </Banner.Description>
+      <Banner.Actions>
+        <Button>Button</Button>
+        <Button variant="invisible">Button</Button>
+      </Banner.Actions>
+    </Banner>
+  )
+}
+
+export const Playground: StoryObj<typeof Banner> = {
+  render: ({onDismiss, variant, ...rest}) => {
+    return (
+      <Banner
+        {...rest}
+        title="This is the title"
+        onDismiss={onDismiss ? action('onDismiss') : undefined}
+        variant={variant}
+      >
+        <Banner.Description>
+          GitHub users are{' '}
+          <Link inline underline href="#">
+            now required
+          </Link>{' '}
+          to enable two-factor authentication as an additional security measure.
+        </Banner.Description>
+      </Banner>
+    )
+  },
+  argTypes: {
+    onDismiss: {
+      controls: {
+        type: 'boolean',
+      },
+      defaultValue: false,
+    },
+    variant: {
+      controls: {
+        type: 'radio',
+      },
+      options: ['critical', 'info', 'success', 'upsell', 'warning'],
+    },
+  },
+}