@kaizen/components 0.0.0-canary-test-exports-20231114054615 → 0.0.0-canary-bundle-size-check-20231115005811

package/src/Notification/InlineNotification/_docs/InlineNotification.stickersheet.stories.tsx

@@ -0,0 +1,185 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import {
+  InlineNotificationProps,
+  InlineNotification,
+} from "../InlineNotification"
+
+export default {
+  title: "Components/Notifications/Inline Notification",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+    a11y: {
+      // Fade-in animation has colour contrast issues.
+      timeout: 1000,
+    },
+  },
+} satisfies Meta
+
+const DEFAULT_CHILDREN: JSX.Element = (
+  <span>
+    New user data, imported by mackenzie@hooli.com has successfully uploaded.{" "}
+    <a href="/">Manage users is now available</a>
+  </span>
+)
+
+const DEFAULT_PROPS = {
+  hideCloseIcon: false,
+  persistent: false,
+  children: DEFAULT_CHILDREN,
+} satisfies Partial<InlineNotificationProps>
+
+const VARIANTS_PROPS: Array<{
+  title: string
+  props: InlineNotificationProps
+}> = [
+  {
+    title: "Informative",
+    props: {
+      ...DEFAULT_PROPS,
+      type: "informative",
+      headingProps: {
+        variant: "heading-6",
+        tag: "span",
+        children: "Informative title",
+      },
+    },
+  },
+  {
+    title: "Positive",
+    props: {
+      ...DEFAULT_PROPS,
+      type: "positive",
+      headingProps: {
+        variant: "heading-6",
+        tag: "span",
+        children: "Positive title",
+      },
+    },
+  },
+  {
+    title: "Negative",
+    props: {
+      ...DEFAULT_PROPS,
+      type: "negative",
+      headingProps: {
+        variant: "heading-6",
+        tag: "span",
+        children: "Negative title",
+      },
+    },
+  },
+  {
+    title: "Cautionary",
+    props: {
+      ...DEFAULT_PROPS,
+      type: "cautionary",
+      headingProps: {
+        variant: "heading-6",
+        tag: "span",
+        children: "Cautionary title",
+      },
+    },
+  },
+  {
+    title: "Security",
+    props: {
+      ...DEFAULT_PROPS,
+      type: "security",
+      headingProps: {
+        variant: "heading-6",
+        tag: "span",
+        children: "Security title",
+      },
+    },
+  },
+  {
+    title: "Persistent",
+    props: {
+      ...DEFAULT_PROPS,
+      type: "informative",
+      persistent: true,
+      headingProps: {
+        variant: "heading-6",
+        tag: "span",
+        children: "Security title",
+      },
+    },
+  },
+  {
+    title: "Subtle",
+    props: {
+      ...DEFAULT_PROPS,
+      type: "informative",
+      isSubtle: true,
+      persistent: true,
+      headingProps: {
+        variant: "heading-6",
+        tag: "span",
+        children: "Subtle title",
+      },
+      children: "All notification types can have a subtle variant",
+    },
+  },
+  {
+    title: "Multiline",
+    props: {
+      ...DEFAULT_PROPS,
+      children:
+        "Content longer that the width of the container will break onto a new line. Lorem ipsum dolor, sit amet consectetur adipisicing elit. In aperiam voluptatem molestias saepe quia vitae quod ex illum, unde nihil impedit possimus officia labore atque quidem necessitatibus sint, maiores velit.",
+      type: "positive",
+      headingProps: {
+        variant: "heading-6",
+        tag: "span",
+        children: "Content enforced multiline",
+      },
+    },
+  },
+  {
+    title: "Forced multiline",
+    props: {
+      ...DEFAULT_PROPS,
+      children:
+        "forceMultiline will break children onto a new line regardless of width",
+      type: "negative",
+      headingProps: {
+        variant: "heading-6",
+        tag: "span",
+        children: "Prop enforced multiline",
+      },
+      forceMultiline: true,
+    },
+  },
+]
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => (
+    <>
+      <StickerSheet heading="Button" isReversed={isReversed}>
+        <StickerSheet.Body>
+          {VARIANTS_PROPS.map(({ title, props }) => (
+            <StickerSheet.Row key={title} rowTitle={title}>
+              <InlineNotification {...props} />
+            </StickerSheet.Row>
+          ))}
+        </StickerSheet.Body>
+      </StickerSheet>
+    </>
+  ),
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}
+
+export const StickerSheetRTL: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (RTL)",
+  parameters: { textDirection: "rtl" },
+}

package/src/Notification/InlineNotification/_docs/InlineNotification.stories.tsx

@@ -0,0 +1,77 @@
+import { Meta, StoryObj } from "@storybook/react"
+import {
+  InlineNotification,
+  InlineNotificationProps,
+} from "../InlineNotification"
+
+const DEFAULT_PROPS: Partial<InlineNotificationProps> = {
+  headingProps: {
+    children: "Informative",
+    tag: "span",
+    variant: "heading-6",
+  },
+  type: "informative",
+  children:
+    "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis quibusdam natus doloremque",
+}
+
+const meta = {
+  title: "Components/Notifications/Inline Notification",
+  component: InlineNotification,
+  args: {
+    ...DEFAULT_PROPS,
+  },
+  parameters: {
+    a11y: {
+      // Fade-in animation has colour contrast issues.
+      timeout: 1000,
+    },
+  },
+} satisfies Meta<typeof InlineNotification>
+
+export default meta
+
+export const Playground: StoryObj<typeof meta> = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}
+
+/**
+ * `persistent` notification will remain on screen and cannot be removed by the user. This will also remove the fly in animation on page load
+ */
+export const Persistent: StoryObj<typeof meta> = {
+  args: {
+    persistent: true,
+    type: "negative",
+    children: "Please fill in all required fields before submitting",
+    headingProps: {
+      children: "Form error",
+      variant: "heading-6",
+      tag: "span",
+    },
+  },
+}
+
+/**
+ * `forceMultiline` will break child content onto a new line, regardless of content width. Without this prop, child content will be next to the heading until it stretches past its maximum content width. */
+export const ForceMultilineDemo: StoryObj<typeof meta> = {
+  args: {
+    forceMultiline: true,
+    children: "Even with a small amount of text",
+  },
+}
+
+/**
+ * Without the `forceMultiline` prop, child content must exceed the maximum width of the container before it breaks onto a new line. */
+export const ContentMultilineDemo: StoryObj<typeof meta> = {
+  args: {
+    forceMultiline: true,
+    children:
+      "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis esse, iste, obcaecati laborum dolorum eius, similique fugit itaque illum ipsam sapiente facilis cum? Accusamus eos possimus quae voluptates laboriosam necessitatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis esse, iste, obcaecati laborum dolorum eius, similique fugit itaque illum ipsam sapiente facilis cum? Accusamus eos possimus quae voluptates laboriosam necessitatibus.",
+  },
+}

package/src/Notification/InlineNotification/index.ts

@@ -0,0 +1 @@
+export * from "./InlineNotification"

package/src/Notification/ToastNotification/ToastNotification.spec.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { ToastNotification } from "./ToastNotification"
+import { clearToastNotifications } from "./subcomponents/ToastNotificationManager"
+
+describe("<ToastNotification />", () => {
+  beforeEach(() => {
+    clearToastNotifications()
+  })
+  it('creates a single "status" container for notifications', async () => {
+    render(
+      <ToastNotification type="positive" title="Success">
+        It worked!
+      </ToastNotification>
+    )
+
+    const toastPortalManager = await screen.getAllByRole("status")
+
+    expect(toastPortalManager).toHaveLength(1)
+  })
+  it("renders a basic notification correctly", async () => {
+    render(
+      <ToastNotification type="positive" title="Success">
+        It worked!
+      </ToastNotification>
+    )
+
+    const notification = await screen.findByText("Success")
+    expect(notification).toBeInTheDocument()
+  })
+})

package/src/Notification/ToastNotification/ToastNotification.tsx

@@ -0,0 +1,43 @@
+import React, { useId } from "react"
+import { addToastNotification } from "./subcomponents/ToastNotificationManager"
+import { ToastNotificationWithOptionals } from "./types"
+
+export type ToastNotificationProps = Omit<
+  ToastNotificationWithOptionals,
+  "message" | "persistent"
+> & {
+  /**
+   * Removes the dismiss trigger. functions the same as `persistent` in `addToastNotification`. If this is true you will need to manage the removal of notifications manually.
+   * @default false
+   */
+  hideCloseIcon?: boolean
+  children: React.ReactNode
+}
+
+export const ToastNotification = ({
+  id: propsId,
+  hideCloseIcon = false,
+  type,
+  title,
+  onHide,
+  children,
+  ...restProps
+}: ToastNotificationProps): null => {
+  const reactId = useId()
+  const id = propsId || reactId
+  const persistent = hideCloseIcon
+
+  addToastNotification({
+    id,
+    type,
+    title,
+    message: children,
+    persistent,
+    onHide,
+    ...restProps,
+  })
+
+  return null
+}
+
+ToastNotification.displayName = "ToastNotification"

package/src/Notification/ToastNotification/_docs/ToastNotification.mdx

@@ -0,0 +1,67 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KaioNotification, Installation } from "~storybook/components"
+import * as ToastNotificationStories from "./ToastNotification.stories"
+
+<Meta title="Components/Notifications/ToastNotification" />
+
+# Toast Notification
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Notification/ToastNotification"
+  figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=1929%3A21829&mode=design&t=QHnBiBn4stf5UxJ3-1"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3075638310/Toast+Notification"
+  className="!mb-8"
+/>
+
+<KaioNotification />
+
+<Installation
+  installCommand="yarn add @kaizen/components"
+  importStatement='import { addToastNotification, removeToastNotification, clearToastNotifications, ToastNotification } from "@kaizen/components"'
+/>
+
+## Overview
+
+Toast notifications are used to notifying a user of an outcome for an action they have taken. They appended to the root of the document body and will render in the top corner of the window.
+
+<Canvas of={ToastNotificationStories.Playground} />
+<Controls of={ToastNotificationStories.Playground} />
+
+## API
+
+In addition to the `ToastNotification` JSX element, there are three API methods exported from this package to create and manage Toast notifications.
+
+### addToastNotification
+Creates an instance of the the Toast Notification manager and appends new notifications to the list.
+
+<Canvas of={ToastNotificationStories.CreateNotification} />
+
+If `addToastNotification` is called with an `id` that matches an existing notification, then it will update the content of that component.
+
+This will also be invoked if you use the `ToastNotification` component.
+
+<Canvas of={ToastNotificationStories.UpdateNotification} />
+
+
+### removeToastNotification
+
+Removes a single notification that matches the `id` passed to the function.
+
+<Canvas of={ToastNotificationStories.RemoveNotification} />
+
+
+### clearToastNotifications
+
+Clears all notifications currently held in state.
+
+<Canvas of={ToastNotificationStories.ClearNotifications} />
+
+
+## Accessibility and removal of notifications
+
+Any notification that is temporarily rendered on screen should provide a user ample time to read its contents and provide a way to stop its removal ([WCAG guidline here](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html)
+)).
+
+By default, all Toast notifications will remain on screen until dismissed. This ensures the accessibility is met and does not require additional intervention.
+
+If you required to be automatically removed, you must provide a means of stopping and re-enabling its removal and ensures that a user can reasonably access this before it is removed.

package/src/Notification/ToastNotification/_docs/ToastNotification.stickersheet.stories.tsx

@@ -0,0 +1,98 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import { StickerSheetStory } from "~storybook/components/StickerSheet"
+import { addToastNotification } from "../subcomponents/ToastNotificationManager"
+
+export default {
+  title: "Components/Notifications/ToastNotification",
+  parameters: {
+    chromatic: { disable: false, delay: 600 },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  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 = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}
+
+export const StickerSheetRTL: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (RTL)",
+  parameters: {
+    ...StickerSheetTemplate.parameters,
+    textDirection: "rtl",
+  },
+}

package/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx

@@ -0,0 +1,142 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { Button } from "~components/Button"
+import {
+  addToastNotification,
+  removeToastNotification,
+  clearToastNotifications,
+  ToastNotification,
+} from "../index"
+
+const meta = {
+  title: "Components/Notifications/ToastNotification",
+  component: ToastNotification,
+  args: {
+    id: "abc-123",
+    type: "positive",
+    title: "Success",
+    children: (
+      <div>
+        New user data, imported by mackenzie@hooli.com has successfully
+        uploaded. <a href="/">Manage users is now available</a>
+      </div>
+    ),
+  },
+} satisfies Meta<typeof ToastNotification>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}
+
+export const CreateNotification: Story = {
+  render: () => (
+    <Button
+      label="Create notification"
+      onClick={() =>
+        addToastNotification({
+          title: "Informative",
+          type: "informative",
+          message: "New notification!",
+        })
+      }
+    />
+  ),
+}
+
+export const UpdateNotification: Story = {
+  render: () => (
+    <>
+      <Button
+        label="Create notification"
+        classNameOverride="!mr-12"
+        onClick={() =>
+          addToastNotification({
+            id: "id--update-example",
+            title: "Cautionary",
+            type: "cautionary",
+            message: "This content will be updated",
+          })
+        }
+      />
+      <Button
+        label="Update notification"
+        onClick={() =>
+          addToastNotification({
+            id: "id--update-example",
+            title: "Success",
+            type: "positive",
+            message: "The content was successfully updated",
+          })
+        }
+      />
+    </>
+  ),
+}
+
+export const RemoveNotification: Story = {
+  render: () => (
+    <>
+      <Button
+        label="Create notification"
+        classNameOverride="!mr-12"
+        onClick={() =>
+          addToastNotification({
+            id: "id--remove-example",
+            title: "Remove",
+            type: "negative",
+            message: "This notification will be removed",
+          })
+        }
+      />
+      <Button
+        label="Remove notification"
+        onClick={() => removeToastNotification("id--remove-example")}
+      />
+    </>
+  ),
+}
+
+export const ClearNotifications: Story = {
+  render: () => (
+    <>
+      <Button
+        label="Create notifications"
+        classNameOverride="!mr-12"
+        onClick={() => {
+          addToastNotification({
+            id: "id--clear-example-1",
+            title: "First",
+            type: "positive",
+            message: "This notification will be removed",
+          })
+          addToastNotification({
+            id: "id--clear-example-2",
+            title: "Second",
+            type: "cautionary",
+            message: "This notification will also be removed",
+          })
+          addToastNotification({
+            id: "id--clear-example-3",
+            title: "Third",
+            type: "negative",
+            message: "This notification will also also be removed",
+          })
+        }}
+      />
+      <Button
+        label="Clear notifications"
+        onClick={() => clearToastNotifications()}
+      />
+    </>
+  ),
+}

package/src/Notification/ToastNotification/index.ts

@@ -0,0 +1,3 @@
+export * from "./ToastNotification"
+export * from "./subcomponents/ToastNotificationManager"
+export * from "./subcomponents/ToastNotificationsList"