Skip to content

Commit 9ce92e8

Browse files
committed
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
1 parent 01a9d71 commit 9ce92e8

File tree

12 files changed

+244
-133
lines changed

12 files changed

+244
-133
lines changed

src/components/BannerNotification/BannerNotification.test.ts

Lines changed: 0 additions & 6 deletions
This file was deleted.

src/components/BannerNotification/index.ts

Lines changed: 0 additions & 2 deletions
This file was deleted.

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1282,6 +1282,26 @@ exports[`<Icon /> (v2) IconGrid story renders snapshot 1`] = `
12821282
info-encircled
12831283
</span>
12841284
</li>
1285+
<li
1286+
class="icon-grid__item"
1287+
>
1288+
<svg
1289+
aria-hidden="true"
1290+
class="icon icon-grid__icon"
1291+
fill="currentColor"
1292+
viewBox="0 0 24 24"
1293+
xmlns="http://www.w3.org/2000/svg"
1294+
>
1295+
<path
1296+
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"
1297+
/>
1298+
</svg>
1299+
<span
1300+
class="icon-grid__text"
1301+
>
1302+
info-encircled-filled
1303+
</span>
1304+
</li>
12851305
<li
12861306
class="icon-grid__item"
12871307
>
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import '../../design-tokens/mixins.css';
22

33
/*------------------------------------*\
4-
# BANNER NOTIFICATION
4+
# PAGE NOTIFICATION
55
\*------------------------------------*/
66
/**
77
* TODO: Icon inherits color from the surrounding text, but should use the matching -icon- tokens from below
@@ -10,7 +10,7 @@
1010
/**
1111
* Message of information, success, caution, or warning to the user.
1212
*/
13-
.banner {
13+
.page-notification {
1414
display: flex;
1515
gap: 1rem;
1616
padding: 1rem;
@@ -19,55 +19,56 @@
1919
border-left: 1rem solid;
2020
border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
2121

22-
&.banner-notification--status-informational {
22+
&.page-notification--status-informational {
2323
color: var(--eds-theme-color-text-utility-informational);
2424
background-color: var(--eds-theme-color-background-utility-information-low-emphasis);
2525
}
2626

27-
&.banner-notification--status-critical {
27+
&.page-notification--status-critical {
2828
color: var(--eds-theme-color-text-utility-critical);
2929
background-color: var(--eds-theme-color-background-utility-critical-low-emphasis);
3030
}
3131

32-
&.banner-notification--status-favorable {
32+
&.page-notification--status-favorable {
3333
color: var(--eds-theme-color-text-utility-favorable);
3434
background-color: var(--eds-theme-color-background-utility-favorable-low-emphasis);
3535
}
3636

37-
&.banner-notification--status-warning {
37+
&.page-notification--status-warning {
3838
color: var(--eds-theme-color-text-utility-warning);
3939
background-color: var(--eds-theme-color-background-utility-warning-low-emphasis);
4040
}
4141
}
4242

43-
.banner-notification__icon {
43+
.page-notification__icon {
4444
flex-shrink: 0;
45+
transform: translateY(0.25rem);
4546
}
4647

47-
.banner-notification__body {
48+
.page-notification__body {
4849
flex-grow: 2;
4950
display: flex;
5051

51-
&.banner-notification--has-vertical-cta {
52+
&.page-notification--has-vertical-cta {
5253
flex-direction: column;
5354
}
5455

55-
&.banner-notification--has-horizontal-cta {
56+
&.page-notification--has-horizontal-cta {
5657
flex-direction: row;
5758
}
5859
}
5960

60-
.banner-notification__call-to-action {
61-
.banner-notification--has-vertical-cta & {
61+
.page-notification__call-to-action {
62+
.page-notification--has-vertical-cta & {
6263
margin-top: 1rem;
6364
}
6465

65-
.banner-notificatino-has-horizontal-cta & {
66+
.page-notificatino-has-horizontal-cta & {
6667
margin-left: 1rem;
6768
}
6869
}
6970

70-
.banner-notification__text {
71+
.page-notification__text {
7172
flex-grow: 2;
7273
}
7374

@@ -76,12 +77,8 @@
7677
*
7778
* Button used to dismiss a banner.
7879
*/
79-
.banner-notification__close-button {
80-
align-self: flex-start;
81-
color: var(--eds-theme-color-text-utility-default-secondary);
82-
}
83-
84-
.banner-notification__sub-title {
85-
color: var(--eds-theme-color-text-utility-default-secondary);
80+
.page-notification__close-button {
81+
/* Adjust the positioning to slip into the padding of the container */
82+
transform: translate(0.5rem, -0.5rem);
8683
}
8784

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

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import type { StoryObj, Meta } from '@storybook/react';
22
import React from 'react';
33

4-
import { BannerNotification } from './BannerNotification';
4+
import { PageNotification } from './PageNotification';
55
import { ButtonV2 as Button } from '../Button';
66

77
export default {
8-
title: 'Components/V2/BannerNotification',
9-
component: BannerNotification,
8+
title: 'Components/V2/PageNotification',
9+
component: PageNotification,
1010
parameters: {
1111
badges: ['intro-1.0', 'current-2.0'],
1212
},
1313
args: {
1414
title: 'Alert title which communicates info to the user',
1515
subTitle: ' Subtitle which provides additional detail',
1616
callToAction: (
17-
<Button rank="secondary" size="sm" variant="default">
17+
<Button rank="secondary" size="sm" variant="neutral">
1818
Call to Action
1919
</Button>
2020
),
@@ -33,7 +33,7 @@ export default {
3333
},
3434
} as Meta<Args>;
3535

36-
type Args = React.ComponentProps<typeof BannerNotification>;
36+
type Args = React.ComponentProps<typeof PageNotification>;
3737

3838
const dismissMethod = () => {
3939
console.log('dismissing~');
@@ -54,7 +54,7 @@ export const Critical: StoryObj<Args> = {
5454
args: {
5555
status: 'critical',
5656
callToAction: (
57-
<Button rank="secondary" size="sm" variant="critical">
57+
<Button rank="secondary" size="sm" variant="neutral">
5858
Call to Action
5959
</Button>
6060
),
@@ -66,7 +66,7 @@ export const CriticalHorizontal: StoryObj<Args> = {
6666
status: 'critical',
6767
buttonLayout: 'horizontal',
6868
callToAction: (
69-
<Button rank="secondary" size="sm" variant="critical">
69+
<Button rank="secondary" size="sm" variant="neutral">
7070
Call to Action
7171
</Button>
7272
),
@@ -84,3 +84,10 @@ export const Dismissable: StoryObj<Args> = {
8484
onDismiss: dismissMethod,
8585
},
8686
};
87+
88+
export const HorizontalDismissable: StoryObj<Args> = {
89+
args: {
90+
...Dismissable.args,
91+
...CriticalHorizontal.args,
92+
},
93+
};
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { generateSnapshots } from '@chanzuckerberg/story-utils';
2+
import * as stories from './PageNotification.stories';
3+
4+
describe('<PageNotification /> (v2)', () => {
5+
generateSnapshots(stories);
6+
});

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

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ import React, { type ReactNode } from 'react';
33

44
import getIconNameFromStatus from '../../util/getIconNameFromStatus-v2';
55
import type { Status } from '../../util/variant-types';
6+
7+
import { ButtonV2 as Button } from '../Button';
68
import Heading from '../Heading';
79
import { IconV2 as Icon } from '../Icon';
810
import Text from '../Text';
911

10-
import styles from './BannerNotification.module.css';
12+
import styles from './PageNotification.module.css';
1113

12-
export type BannerNotificationProps = {
14+
export type PageNotificationProps = {
1315
// Component API
1416
/**
1517
* CSS class names that can be appended to the component.
@@ -43,45 +45,44 @@ export type BannerNotificationProps = {
4345
};
4446

4547
/**
46-
* `import {BannerNotification} from "@chanzuckerberg/eds";`
48+
* `import {PageNotification} from "@chanzuckerberg/eds";`
4749
*
4850
* An alert placed at the top of a page which impacts the entire experience on a screen.
4951
*/
50-
export const BannerNotification = ({
52+
export const PageNotification = ({
5153
buttonLayout = 'vertical',
5254
callToAction,
5355
className,
5456
subTitle,
5557
onDismiss,
5658
status = 'informational',
5759
title,
58-
}: BannerNotificationProps) => {
60+
}: PageNotificationProps) => {
5961
const componentClassName = clsx(
6062
// Base styles
61-
styles['banner'],
62-
status && styles[`banner-notification--status-${status}`],
63+
styles['page-notification'],
64+
status && styles[`page-notification--status-${status}`],
6365
// Other options
64-
onDismiss && styles['banner--dismissable'],
66+
onDismiss && styles['page-notification--dismissable'],
6567
className,
6668
);
6769

6870
return (
6971
<aside className={componentClassName}>
7072
<Icon
71-
className={styles['banner-notification__icon']}
73+
className={styles['page-notification__icon']}
7274
name={getIconNameFromStatus(status)}
7375
purpose="decorative"
7476
size="1.5rem"
7577
/>
7678

7779
<div
7880
className={clsx(
79-
styles['banner-notification__body'],
80-
buttonLayout &&
81-
styles[`banner-notification--has-${buttonLayout}-cta`],
81+
styles['page-notification__body'],
82+
buttonLayout && styles[`page-notification--has-${buttonLayout}-cta`],
8283
)}
8384
>
84-
<div className={styles['banner-notification__text']}>
85+
<div className={styles['page-notification__text']}>
8586
{title && (
8687
<Heading as="h3" preset="title-md">
8788
{title}
@@ -90,35 +91,34 @@ export const BannerNotification = ({
9091
{subTitle && (
9192
<Text
9293
as="p"
93-
className={styles['banner-notification__sub-title']}
94+
className={styles['page-notification__sub-title']}
9495
preset="body-sm"
9596
>
9697
{subTitle}
9798
</Text>
9899
)}
99100
</div>
100101
{callToAction && (
101-
<div className={styles['banner-notification__call-to-action']}>
102+
<div className={styles['page-notification__call-to-action']}>
102103
{callToAction}
103104
</div>
104105
)}
105106
</div>
106-
{/* TODO: Use `Button` properly */}
107107
{onDismiss && (
108-
<button
109-
className={styles['banner-notification__close-button']}
108+
<Button
109+
className={styles['page-notification__close-button']}
110+
icon="close"
111+
iconLayout="icon-only"
110112
onClick={onDismiss}
113+
rank="tertiary"
114+
size="lg"
115+
variant="neutral"
111116
>
112-
<Icon
113-
name="close"
114-
purpose="informative"
115-
size="1.5rem"
116-
title="dismiss notification"
117-
/>
118-
</button>
117+
Close
118+
</Button>
119119
)}
120120
</aside>
121121
);
122122
};
123123

124-
BannerNotification.displayName = 'BannerNotification';
124+
PageNotification.displayName = 'PageNotification';

0 commit comments

Comments
 (0)