refactor: rename BannerNotification to PageNotification

- export component to page as PageNotification
- use EDS button for dismissable target
- apply neutral button treatments
- add story to handle both horizontal and dismissable

Author: booc0mtaco

src/components/BannerNotification/BannerNotification.test.ts

@@ -1282,6 +1282,26 @@ exports[`<Icon /> (v2) IconGrid story renders snapshot 1`] = `
         info-encircled
       </span>
     </li>
+    <li
+      class="icon-grid__item"
+    >
+      <svg
+        aria-hidden="true"
+        class="icon icon-grid__icon"
+        fill="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z"
+        />
+      </svg>
+      <span
+        class="icon-grid__text"
+      >
+        info-encircled-filled
+      </span>
+    </li>
     <li
       class="icon-grid__item"
     >

src/components/BannerNotification/index.ts

@@ -1,7 +1,7 @@
 @import '../../design-tokens/mixins.css';
 
 /*------------------------------------*\
-    # BANNER NOTIFICATION
+    # PAGE NOTIFICATION
 \*------------------------------------*/
 /**
  * TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
@@ -10,7 +10,7 @@
 /**
  * Message of information, success, caution, or warning to the user.
  */
-.banner {
+.page-notification {
   display: flex;
   gap: 1rem;
   padding: 1rem;
@@ -19,55 +19,56 @@
   border-left: 1rem solid;
   border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
 
-  &.banner-notification--status-informational {
+  &.page-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 {
+  &.page-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 {
+  &.page-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 {
+  &.page-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 {
+.page-notification__icon {
   flex-shrink: 0;
+  transform: translateY(0.25rem);
 }
 
-.banner-notification__body {
+.page-notification__body {
   flex-grow: 2;
   display: flex;
 
-  &.banner-notification--has-vertical-cta {
+  &.page-notification--has-vertical-cta {
     flex-direction: column;
   }
 
-  &.banner-notification--has-horizontal-cta {
+  &.page-notification--has-horizontal-cta {
     flex-direction: row;
   }
 }
 
-.banner-notification__call-to-action {
-  .banner-notification--has-vertical-cta & {
+.page-notification__call-to-action {
+  .page-notification--has-vertical-cta & {
     margin-top: 1rem;
   }
 
-  .banner-notificatino-has-horizontal-cta & {
+  .page-notificatino-has-horizontal-cta & {
     margin-left: 1rem;
   }
 }
 
-.banner-notification__text {
+.page-notification__text {
   flex-grow: 2;
 }
 
@@ -76,12 +77,8 @@
  *
  * 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);
+.page-notification__close-button {
+  /* Adjust the positioning to slip into the padding of the container */
+  transform: translate(0.5rem, -0.5rem);
 }
 

src/components/Icon/__snapshots__/Icon-v2.test.ts.snap

@@ -1,20 +1,20 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 
-import { BannerNotification } from './BannerNotification';
+import { PageNotification } from './PageNotification';
 import { ButtonV2 as Button } from '../Button';
 
 export default {
-  title: 'Components/V2/BannerNotification',
-  component: BannerNotification,
+  title: 'Components/V2/PageNotification',
+  component: PageNotification,
   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">
+      <Button rank="secondary" size="sm" variant="neutral">
         Call to Action
       </Button>
     ),
@@ -33,7 +33,7 @@ export default {
   },
 } as Meta<Args>;
 
-type Args = React.ComponentProps<typeof BannerNotification>;
+type Args = React.ComponentProps<typeof PageNotification>;
 
 const dismissMethod = () => {
   console.log('dismissing~');
@@ -54,7 +54,7 @@ export const Critical: StoryObj<Args> = {
   args: {
     status: 'critical',
     callToAction: (
-      <Button rank="secondary" size="sm" variant="critical">
+      <Button rank="secondary" size="sm" variant="neutral">
         Call to Action
       </Button>
     ),
@@ -66,7 +66,7 @@ export const CriticalHorizontal: StoryObj<Args> = {
     status: 'critical',
     buttonLayout: 'horizontal',
     callToAction: (
-      <Button rank="secondary" size="sm" variant="critical">
+      <Button rank="secondary" size="sm" variant="neutral">
         Call to Action
       </Button>
     ),
@@ -84,3 +84,10 @@ export const Dismissable: StoryObj<Args> = {
     onDismiss: dismissMethod,
   },
 };
+
+export const HorizontalDismissable: StoryObj<Args> = {
+  args: {
+    ...Dismissable.args,
+    ...CriticalHorizontal.args,
+  },
+};

src/components/BannerNotification/BannerNotification.module.css renamed to src/components/PageNotification/PageNotification.module.css

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

src/components/BannerNotification/BannerNotification.stories.tsx renamed to src/components/PageNotification/PageNotification.stories.tsx

@@ -3,13 +3,15 @@ import React, { type ReactNode } from 'react';
 
 import getIconNameFromStatus from '../../util/getIconNameFromStatus-v2';
 import type { Status } from '../../util/variant-types';
+
+import { ButtonV2 as Button } from '../Button';
 import Heading from '../Heading';
 import { IconV2 as Icon } from '../Icon';
 import Text from '../Text';
 
-import styles from './BannerNotification.module.css';
+import styles from './PageNotification.module.css';
 
-export type BannerNotificationProps = {
+export type PageNotificationProps = {
   // Component API
   /**
    * CSS class names that can be appended to the component.
@@ -43,45 +45,44 @@ export type BannerNotificationProps = {
 };
 
 /**
- * `import {BannerNotification} from "@chanzuckerberg/eds";`
+ * `import {PageNotification} from "@chanzuckerberg/eds";`
  *
  * An alert placed at the top of a page which impacts the entire experience on a screen.
  */
-export const BannerNotification = ({
+export const PageNotification = ({
   buttonLayout = 'vertical',
   callToAction,
   className,
   subTitle,
   onDismiss,
   status = 'informational',
   title,
-}: BannerNotificationProps) => {
+}: PageNotificationProps) => {
   const componentClassName = clsx(
     // Base styles
-    styles['banner'],
-    status && styles[`banner-notification--status-${status}`],
+    styles['page-notification'],
+    status && styles[`page-notification--status-${status}`],
     // Other options
-    onDismiss && styles['banner--dismissable'],
+    onDismiss && styles['page-notification--dismissable'],
     className,
   );
 
   return (
     <aside className={componentClassName}>
       <Icon
-        className={styles['banner-notification__icon']}
+        className={styles['page-notification__icon']}
         name={getIconNameFromStatus(status)}
         purpose="decorative"
         size="1.5rem"
       />
 
       <div
         className={clsx(
-          styles['banner-notification__body'],
-          buttonLayout &&
-            styles[`banner-notification--has-${buttonLayout}-cta`],
+          styles['page-notification__body'],
+          buttonLayout && styles[`page-notification--has-${buttonLayout}-cta`],
         )}
       >
-        <div className={styles['banner-notification__text']}>
+        <div className={styles['page-notification__text']}>
           {title && (
             <Heading as="h3" preset="title-md">
               {title}
@@ -90,35 +91,34 @@ export const BannerNotification = ({
           {subTitle && (
             <Text
               as="p"
-              className={styles['banner-notification__sub-title']}
+              className={styles['page-notification__sub-title']}
               preset="body-sm"
             >
               {subTitle}
             </Text>
           )}
         </div>
         {callToAction && (
-          <div className={styles['banner-notification__call-to-action']}>
+          <div className={styles['page-notification__call-to-action']}>
             {callToAction}
           </div>
         )}
       </div>
-      {/* TODO: Use `Button` properly */}
       {onDismiss && (
-        <button
-          className={styles['banner-notification__close-button']}
+        <Button
+          className={styles['page-notification__close-button']}
+          icon="close"
+          iconLayout="icon-only"
           onClick={onDismiss}
+          rank="tertiary"
+          size="lg"
+          variant="neutral"
         >
-          <Icon
-            name="close"
-            purpose="informative"
-            size="1.5rem"
-            title="dismiss notification"
-          />
-        </button>
+          Close
+        </Button>
       )}
     </aside>
   );
 };
 
-BannerNotification.displayName = 'BannerNotification';
+PageNotification.displayName = 'PageNotification';