feat(BannerNotification)!: introduce 2.0 component (#1904)

- add in stories
- add in new component, nested under v2 folder

src/components/BannerNotification/BannerNotification.module.css

@@ -0,0 +1,87 @@
+@import '../../design-tokens/mixins.css';
+
+/*------------------------------------*\
+ # BANNER NOTIFICATION
+\*------------------------------------*/
+
+/**
+ * Message of information, success, caution, or warning to the user.
+ */
+.banner {
+ /* Position is relative to allow for absolute-positioned close button. */
+ position: relative;
+ /* Grid is used to separate the icon from the text with correct spacing. */
+ display: flex;
+ gap: 1rem;
+ padding: 1rem;
+
+ border: 0.125rem solid;
+ border-left: 1rem solid;
+ border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
+
+ &.banner-notification--status-informational {
+ color: var(--eds-theme-color-text-utility-informational);
+ background-color: var(--eds-theme-color-background-utility-information-low-emphasis);
+ }
+
+ &.banner-notification--status-critical {
+ color: var(--eds-theme-color-text-utility-critical);
+ background-color: var(--eds-theme-color-background-utility-critical-low-emphasis);
+ }
+
+ &.banner-notification--status-favorable {
+ color: var(--eds-theme-color-text-utility-favorable);
+ background-color: var(--eds-theme-color-background-utility-favorable-low-emphasis);
+ }
+
+ &.banner-notification--status-warning {
+ color: var(--eds-theme-color-text-utility-warning);
+ background-color: var(--eds-theme-color-background-utility-warning-low-emphasis);
+ }
+}
+
+.banner-notification__icon {
+ flex-shrink: 0;
+}
+
+.banner-notification__body {
+ flex-grow: 2;
+ display: flex;
+
+ &.banner-notification--has-vertical-cta {
+ flex-direction: column;
+ }
+
+ &.banner-notification--has-horizontal-cta {
+ flex-direction: row;
+ }
+}
+
+.banner-notification__call-to-action {
+ .banner-notification--has-vertical-cta & {
+ margin-top: 1rem;
+ }
+
+ .banner-notificatino-has-horizontal-cta & {
+ margin-left: 1rem;
+ }
+}
+
+.banner-notification__text {
+ flex-grow: 2;
+}
+
+/**
+ * Close button
+ *
+ * Button used to dismiss a banner.
+ */
+.banner-notification__close-button {
+ align-self: flex-start;
+ color: var(--eds-theme-color-text-utility-default-secondary);
+}
+
+.banner-notification__sub-title {
+ color: var(--eds-theme-color-text-utility-default-secondary);
+}
+

src/components/BannerNotification/BannerNotification.stories.tsx

@@ -0,0 +1,87 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import React from 'react';
+
+import { BannerNotification } from './BannerNotification';
+import { ButtonV2 as Button } from '../Button';
+
+export default {
+ title: 'Components/V2/BannerNotification',
+ component: BannerNotification,
+ parameters: {
+ badges: ['intro-1.0', 'current-2.0'],
+ },
+ args: {
+ title: 'Alert title which communicates info to the user',
+ subTitle: ' Subtitle which provides additional detail',
+ callToAction: (
+ <Button rank="secondary" size="sm" variant="default">
+ Call to Action
+ </Button>
+ ),
+ },
+ argTypes: {
+ subTitle: {
+ control: {
+ type: 'text',
+ },
+ },
+ callToAction: {
+ control: {
+ type: null,
+ },
+ },
+ },
+} as Meta<Args>;
+
+type Args = React.ComponentProps<typeof BannerNotification>;
+
+const dismissMethod = () => {
+ console.log('dismissing~');
+};
+
+export const Default: StoryObj<Args> = {};
+
+export const Warning: StoryObj<Args> = {
+ args: {
+ status: 'warning',
+ },
+};
+
+/**
+ * When using critical, make sure `Button` has a matching variant specified.
+ * TODO-AH: design of the secondary critical button has a customization to the background that needs verification.
+ */
+export const Critical: StoryObj<Args> = {
+ args: {
+ status: 'critical',
+ callToAction: (
+ <Button rank="secondary" size="sm" variant="critical">
+ Call to Action
+ </Button>
+ ),
+ },
+};
+
+export const CriticalHorizontal: StoryObj<Args> = {
+ args: {
+ status: 'critical',
+ buttonLayout: 'horizontal',
+ callToAction: (
+ <Button rank="secondary" size="sm" variant="critical">
+ Call to Action
+ </Button>
+ ),
+ },
+};
+
+export const Favorable: StoryObj<Args> = {
+ args: {
+ status: 'favorable',
+ },
+};
+
+export const Dismissable: StoryObj<Args> = {
+ args: {
+ onDismiss: dismissMethod,
+ },
+};

src/components/BannerNotification/BannerNotification.test.ts

@@ -0,0 +1,6 @@
+import { generateSnapshots } from '@chanzuckerberg/story-utils';
+import * as stories from './BannerNotification.stories';
+
+describe('<BannerNotification />', () => {
+ generateSnapshots(stories);
+});

src/components/BannerNotification/BannerNotification.tsx

@@ -0,0 +1,146 @@
+import clsx from 'clsx';
+import React, { type ReactNode } from 'react';
+
+import type { Status } from '../../util/variant-types';
+import Heading from '../Heading';
+import Icon, { type IconName } from '../Icon';
+import Text from '../Text';
+
+import styles from './BannerNotification.module.css';
+
+/**
+ * TODO-AH:
+ * - feedback on api naming in figma
+ * - handling of aria-live for a11y
+ */
+
+export type BannerNotificationProps = {
+ // Component API
+ /**
+ * CSS class names that can be appended to the component.
+ */
+ className?: string;
+ /**
+ * Callback when banner is dismissed. When passed in, renders banner with a close icon in the top right.
+ */
+ onDismiss?: () => void;
+ // Design API
+ /**
+ *
+ */
+ buttonLayout?: 'vertical' | 'horizontal';
+ /**
+ * TODO-AH: ensure this is a button
+ */
+ callToAction?: ReactNode;
+ /**
+ * Keyword to characterize the state of the notification
+ */
+ status?: Status;
+ /**
+ * Secondary text used to describe the notification in more detail
+ */
+ subTitle?: string;
+ /**
+ * The title/heading of the banner
+ */
+ title?: string;
+};
+
+/**
+ * Map statuses to existing icon names
+ * TODO-AH: de-dupe this with the function in InlineNotification
+ *
+ * @param status component status
+ * @returns the matching icon name
+ */
+function getIconNameFromStatus(status: Status): IconName {
+ const map: Record<Status, IconName> = {
+ informational: 'info',
+ critical: 'dangerous',
+ warning: 'warning',
+ favorable: 'check-circle',
+ };
+ return map[status];
+}
+
+/**
+ * `import {BannerNotification} from "@chanzuckerberg/eds";`
+ *
+ * An alert placed at the top of a page which impacts the entire experience on a screen.
+ */
+export const BannerNotification = ({
+ buttonLayout = 'vertical',
+ callToAction,
+ className,
+ subTitle,
+ onDismiss,
+ status = 'informational',
+ title,
+}: BannerNotificationProps) => {
+ const componentClassName = clsx(
+ // Base styles
+ styles['banner'],
+ status && styles[`banner-notification--status-${status}`],
+ // Other options
+ onDismiss && styles['banner--dismissable'],
+ className,
+ );
+
+ return (
+ <aside className={componentClassName}>
+ <Icon
+ className={styles['banner-notification__icon']}
+ name={getIconNameFromStatus(status)}
+ purpose="decorative"
+ size="1.5rem"
+ />
+
+ <div
+ className={clsx(
+ styles['banner-notification__body'],
+ buttonLayout &&
+ styles[`banner-notification--has-${buttonLayout}-cta`],
+ )}
+ >
+ <div className={styles['banner-notification__text']}>
+ {title && (
+ <Heading as="h3" preset="title-md">
+ {title}
+ </Heading>
+ )}
+ {subTitle && (
+ <Text
+ as="p"
+ className={styles['banner-notification__sub-title']}
+ preset="body-sm"
+ >
+ {subTitle}
+ </Text>
+ )}
+ </div>
+ {callToAction && (
+ <div className={styles['banner-notification__call-to-action']}>
+ {callToAction}
+ </div>
+ )}
+ </div>
+
+ {onDismiss && (
+ <button
+ className={styles['banner-notification__close-button']}
+ onClick={onDismiss}
+ >
+ <Icon
+ name="close"
+ purpose="informative"
+ size="1.5rem"
+ title="dismiss notification"
+ />
+ </button>
+ )}
+ </aside>
+ );
+};
+
+BannerNotification.displayName = 'BannerNotification';