Skip to content

Commit

Permalink
story clean up and add delay timer
Browse files Browse the repository at this point in the history
  • Loading branch information
mcwinter07 committed Nov 1, 2023
1 parent a8a3ff2 commit 331e580
Show file tree
Hide file tree
Showing 6 changed files with 88 additions and 71 deletions.
2 changes: 1 addition & 1 deletion .changeset/metal-snakes-crash.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
"@kaizen/components": minor
---

migrate Toast Notifications
Migrate ToastNotification from kaizen-legacy.
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,20 @@ export type ToastNotificationProps = Omit<
}

export const ToastNotification = ({
id,
id: propsId,
hideCloseIcon = false,
type,
title,
onHide,
children,
...restProps
}: ToastNotificationProps): null => {
const localID = id || useId()
const reactId = useId()
const id = propsId || reactId
const persistent = hideCloseIcon

addToastNotification({
id: localID,
id,
type,
title,
message: children,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
import React from "react"
import { Meta } from "@storybook/react"
import {
StickerSheet,
StickerSheetStory,
} from "~storybook/components/StickerSheet"

import { ToastNotification } from "../ToastNotification"
import { StickerSheetStory } from "~storybook/components/StickerSheet"
import { addToastNotification } from "../subcomponents/ToastNotificationManager"

export default {
title: "Components/Notifications/ToastNotification",
Expand All @@ -16,49 +12,75 @@ export default {
} satisfies Meta

const StickerSheetTemplate: StickerSheetStory = {
render: ({ isReversed }) => (
/** @note: If you have multiple StickerSheets to display, you can add a `heading` */
<StickerSheet isReversed={isReversed}>
<StickerSheet.Body>
<StickerSheet.Row>
<ToastNotification id="abc-123" title="Positive" type="positive">
<div>
New user data, imported by mackenzie@hooli.com has successfully
uploaded. <a href="/">Manage users is now available</a>
</div>
</ToastNotification>
<ToastNotification
id="abc-234"
title="Informative"
type="informative"
>
<div>
New user data, imported by mackenzie@hooli.com has successfully
uploaded. <a href="/">Manage users is now available</a>
</div>
</ToastNotification>
<ToastNotification id="abc-345" title="Cautionary" type="cautionary">
<div>
New user data, imported by mackenzie@hooli.com has successfully
uploaded. <a href="/">Manage users is now available</a>
</div>
</ToastNotification>
<ToastNotification id="abc-456" title="Negative" type="negative">
<div>
New user data, imported by mackenzie@hooli.com has successfully
uploaded. <a href="/">Manage users is now available</a>
</div>
</ToastNotification>
<ToastNotification id="abc-567" title="Security" type="security">
<div>
New user data, imported by mackenzie@hooli.com has successfully
uploaded. <a href="/">Manage users is now available</a>
</div>
</ToastNotification>
</StickerSheet.Row>
</StickerSheet.Body>
</StickerSheet>
),
render: () => {
React.useEffect(() => {
addToastNotification({
type: "positive",
title: "Positive",
message: (
<>
New user data, imported by mackenzie@hooli.com has successfully
uploaded. <a href="/">Manage users is now available</a>
</>
),
})
addToastNotification({
type: "informative",
title: "Informative",
message: (
<>
New user data is currently being processed. We’ll let you know when
the process is completed. <a href="/">Manage users</a>
</>
),
})
addToastNotification({
type: "cautionary",
title: "Cautionary",
message: (
<>
New user data, imported by mackenzie@hooli.com has uploaded with
some minor issues. <a href="/">View issues</a>
</>
),
})
addToastNotification({
type: "security",
title: "Security",
message: (
<>
Results hidden to protect confidentiality of individuals and small
groups. <a href="/">Learn more</a>
</>
),
})
addToastNotification({
type: "negative",
title: "Negative",
message: (
<>
Check your connection and try again. <a href="/">Refresh</a>.
</>
),
})
addToastNotification({
type: "positive",
title:
"Very long Title Example Very long title Example VerylongTitleExampleVerylongtitleExample ",
message: (
<>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
semper odio vitae sem gravida rutrum. Praesent vel sapien eget eros
dictum luctus scelerisque eu nibh. Etiam ullamcorper lobortis
gravida. Suspendisse massa tortor, ultricies et ipsum at, iaculis
bibendum est.
</>
),
})
}, [])

return <></>
},
}

export const StickerSheetDefault: StickerSheetStory = {
Expand All @@ -70,7 +92,6 @@ export const StickerSheetRTL: StickerSheetStory = {
...StickerSheetTemplate,
name: "Sticker Sheet (RTL)",
parameters: {
/** @note: Only required if template has parameters, otherwise this spread can be removed */
...StickerSheetTemplate.parameters,
textDirection: "rtl",
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
clearToastNotifications,
ToastNotification,
} from "../index"
// import { ToastNotificationWithOptionals } from "../types"

const meta = {
title: "Components/Notifications/ToastNotification",
Expand Down Expand Up @@ -41,18 +40,16 @@ export const Playground: Story = {

export const CreateNotification: Story = {
render: () => (
<>
<Button
label="Create notification"
onClick={() =>
addToastNotification({
title: "Informative",
type: "informative",
message: "New notification!",
})
}
/>
</>
<Button
label="Create notification"
onClick={() =>
addToastNotification({
title: "Informative",
type: "informative",
message: "New notification!",
})
}
/>
),
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,6 @@ describe("ToastNotificationsManager", () => {
const toastItem1 = await screen.getByTestId("id--toast-1")
const toastItem2 = await screen.getByTestId("id--toast-2")

// const toastItem = await screen.findByText("Message goes here")
expect(toastItem1).toBeInTheDocument()
expect(toastItem2).toBeInTheDocument()

Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { DataAttributes } from "~types/DataAttributes"
import { NotificationType } from "../types"

type Modify<T, R> = Omit<T, keyof R> & R
Expand All @@ -13,9 +14,7 @@ export type ToastNotification = {
* @default false
*/
persistent?: boolean
} & {
[key: `data-${string}`]: unknown
}
} & DataAttributes

export type ToastNotificationWithOptionals = Modify<
ToastNotification,
Expand Down

0 comments on commit 331e580

Please sign in to comment.