diff --git a/src/components/Toast/index.ts b/src/components/Toast/index.ts index 86e184962..2ff3d19c4 100644 --- a/src/components/Toast/index.ts +++ b/src/components/Toast/index.ts @@ -1,2 +1 @@ export { Toast as default } from './Toast'; -export { Toast as ToastV2 } from './Toast-v2'; diff --git a/src/components/Toast/Toast-v2.module.css b/src/components/ToastNotification/ToastNotification.module.css similarity index 88% rename from src/components/Toast/Toast-v2.module.css rename to src/components/ToastNotification/ToastNotification.module.css index 56a484da0..2c0bb15ee 100644 --- a/src/components/Toast/Toast-v2.module.css +++ b/src/components/ToastNotification/ToastNotification.module.css @@ -13,7 +13,7 @@ display: flex; gap: 1rem; padding: 1rem; - align-items: center; + align-items: top; border: 0.125rem solid; border-left: 1rem solid; @@ -37,4 +37,10 @@ .toast__body { flex-grow: 2; +} + +.toast__dismiss-button { + flex-shrink: 0; + margin-top: -0.5rem; + margin-right: -0.5rem; } \ No newline at end of file diff --git a/src/components/Toast/Toast-v2.stories.ts b/src/components/ToastNotification/ToastNotification.stories.ts similarity index 77% rename from src/components/Toast/Toast-v2.stories.ts rename to src/components/ToastNotification/ToastNotification.stories.ts index faf98265d..a2f7d27e0 100644 --- a/src/components/Toast/Toast-v2.stories.ts +++ b/src/components/ToastNotification/ToastNotification.stories.ts @@ -1,11 +1,11 @@ import type { StoryObj, Meta } from '@storybook/react'; import type { ComponentProps } from 'react'; -import { Toast } from './Toast-v2'; +import { ToastNotification } from './ToastNotification'; export default { - title: 'Components/V2/Toast', - component: Toast, + title: 'Components/V2/ToastNotification', + component: ToastNotification, parameters: { badges: ['intro-1.0', 'current-2.0'], }, @@ -15,7 +15,7 @@ export default { }, } as Meta; -type Args = ComponentProps; +type Args = ComponentProps; export const Default: StoryObj = {}; diff --git a/src/components/Toast/Toast-v2.test.ts b/src/components/ToastNotification/ToastNotification.test.ts similarity index 62% rename from src/components/Toast/Toast-v2.test.ts rename to src/components/ToastNotification/ToastNotification.test.ts index 2eef933cb..eb0826f2f 100644 --- a/src/components/Toast/Toast-v2.test.ts +++ b/src/components/ToastNotification/ToastNotification.test.ts @@ -1,8 +1,8 @@ import { generateSnapshots } from '@chanzuckerberg/story-utils'; import type { StoryFile } from '@storybook/testing-react'; -import * as stories from './Toast-v2.stories'; +import * as stories from './ToastNotification.stories'; -describe(' (v2)', () => { +describe(' (v2)', () => { generateSnapshots(stories as StoryFile); }); diff --git a/src/components/Toast/Toast-v2.tsx b/src/components/ToastNotification/ToastNotification.tsx similarity index 85% rename from src/components/Toast/Toast-v2.tsx rename to src/components/ToastNotification/ToastNotification.tsx index e3130721f..e865acee9 100644 --- a/src/components/Toast/Toast-v2.tsx +++ b/src/components/ToastNotification/ToastNotification.tsx @@ -7,9 +7,9 @@ import { ButtonV2 as Button } from '../Button'; import { IconV2 as Icon } from '../Icon'; import Text from '../Text'; -import styles from './Toast-v2.module.css'; +import styles from './ToastNotification.module.css'; -export type ToastProps = { +export type ToastNotificationProps = { // Component API /** * Additional class names that can be appended to the component, passed in for styling. @@ -31,17 +31,17 @@ export type ToastProps = { }; /** - * `import {Toast} from "@chanzuckerberg/eds";` + * `import {ToastNotification} from "@chanzuckerberg/eds";` * * Toasts display brief, temporary notifications. They're meant to be noticed without disrupting a user's experience or requiring an action to be taken. */ -export const Toast = ({ +export const ToastNotification = ({ className, onDismiss, status = 'favorable', title, ...other -}: ToastProps) => { +}: ToastNotificationProps) => { const componentClassName = clsx( styles['toast'], status && styles[`toast--status-${status}`], @@ -63,11 +63,13 @@ export const Toast = ({ {onDismiss && ( diff --git a/src/components/Toast/__snapshots__/Toast-v2.test.ts.snap b/src/components/ToastNotification/__snapshots__/ToastNotification.test.ts.snap similarity index 93% rename from src/components/Toast/__snapshots__/Toast-v2.test.ts.snap rename to src/components/ToastNotification/__snapshots__/ToastNotification.test.ts.snap index 6a1504d21..9df229acc 100644 --- a/src/components/Toast/__snapshots__/Toast-v2.test.ts.snap +++ b/src/components/ToastNotification/__snapshots__/ToastNotification.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` (v2) Critical story renders snapshot 1`] = ` +exports[` (v2) Critical story renders snapshot 1`] = `
@@ -30,7 +30,7 @@ exports[` (v2) Critical story renders snapshot 1`] = `
`; -exports[` (v2) Default story renders snapshot 1`] = ` +exports[` (v2) Default story renders snapshot 1`] = `
@@ -60,7 +60,7 @@ exports[` (v2) Default story renders snapshot 1`] = `
`; -exports[` (v2) Favorable story renders snapshot 1`] = ` +exports[` (v2) Favorable story renders snapshot 1`] = `
@@ -90,7 +90,7 @@ exports[` (v2) Favorable story renders snapshot 1`] = `
`; -exports[` (v2) NotDismissable story renders snapshot 1`] = ` +exports[` (v2) NotDismissable story renders snapshot 1`] = `
diff --git a/src/components/ToastNotification/index.ts b/src/components/ToastNotification/index.ts new file mode 100644 index 000000000..6d7b8b0f0 --- /dev/null +++ b/src/components/ToastNotification/index.ts @@ -0,0 +1 @@ +export { ToastNotification as default } from './ToastNotification'; diff --git a/src/index.ts b/src/index.ts index 5cc12cd8c..1580fe71c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -70,7 +70,7 @@ export { RadioV2 } from './components/Radio'; export { SelectV2 } from './components/Select'; export { default as TabGroupV2 } from './components/TabGroup'; export { TextareaFieldV2 } from './components/TextareaField'; -export { ToastV2 } from './components/Toast'; +export { default as ToastNotificationV2 } from './components/ToastNotification'; export { TooltipV2 } from './components/Tooltip'; export type { IconNameV2 } from './components/Icon';