@purpurds/notification 3.0.0

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-notification_10qwf_1{display:flex;flex-direction:column;padding:var(--purpur-spacing-200) var(--purpur-spacing-200) var(--purpur-spacing-200) var(--purpur-spacing-250);box-sizing:border-box;width:100%;background:var(--purpur-color-background-primary);border-radius:var(--purpur-border-radius-md);border:var(--purpur-border-width-sm) solid;border-left:var(--purpur-border-width-lg) solid;gap:var(--purpur-spacing-150);position:relative}._purpur-notification__top_10qwf_14{display:flex;align-items:flex-start;align-self:stretch;justify-content:space-between}._purpur-notification__header_10qwf_20{display:flex;align-items:center;gap:var(--purpur-spacing-100)}._purpur-notification__close-button_10qwf_25{position:absolute;right:calc(var(--purpur-spacing-50) + var(--purpur-spacing-25));top:calc(var(--purpur-spacing-50) + var(--purpur-spacing-25))}._purpur-notification__icon_10qwf_30{flex-shrink:0}._purpur-notification__body_10qwf_33{padding:var(--purpur-spacing-0) var(--purpur-spacing-150) var(--purpur-spacing-50) var(--purpur-spacing-0)}._purpur-notification--success_10qwf_36{border-color:var(--purpur-color-border-status-success)}._purpur-notification--success_10qwf_36 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-success-strong)}._purpur-notification--success_10qwf_36 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-success-medium)}._purpur-notification--warning_10qwf_45{border-color:var(--purpur-color-border-status-warning)}._purpur-notification--warning_10qwf_45 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-warning-strong)}._purpur-notification--warning_10qwf_45 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-warning-medium)}._purpur-notification--error_10qwf_54{border-color:var(--purpur-color-border-status-error)}._purpur-notification--error_10qwf_54 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-error-strong)}._purpur-notification--error_10qwf_54 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-error-medium)}._purpur-notification--info_10qwf_63{border-color:var(--purpur-color-border-status-info)}._purpur-notification--info_10qwf_63 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-info-strong)}._purpur-notification--info_10qwf_63 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-info-medium)}._purpur-notification--hidden_10qwf_72{display:none;visibility:hidden}._purpur-notification--has-close-button_10qwf_76 ._purpur-notification__top_10qwf_14{padding-right:var(--purpur-spacing-400)}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@purpurds/notification",
+  "version": "3.0.0",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/notification.cjs.js",
+  "types": "./dist/notification.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/notification.cjs.js",
+      "systemjs": "./dist/notification.system.js",
+      "types": "./dist/notification.d.ts",
+      "default": "./dist/notification.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/notification.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@purpurds/button": "3.0.0",
+    "@purpurds/heading": "3.0.0",
+    "@purpurds/paragraph": "3.0.0",
+    "@purpurds/icon": "3.0.0",
+    "@purpurds/tokens": "3.0.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.7.0",
+    "@storybook/blocks": "~7.6.0",
+    "@storybook/client-api": "~7.6.0",
+    "@storybook/react": "~7.6.0",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~9.3.3",
+    "@testing-library/jest-dom": "~6.3.0",
+    "@testing-library/react": "~14.1.2",
+    "@types/node": "18",
+    "@types/react-dom": "~18.2.17",
+    "@types/react": "~18.2.42",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "~8.56.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "typescript": "~5.2.2",
+    "vite": "~5.0.6",
+    "vitest": "~1.2.0",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "rm -rf dist && vite build && vite build --mode systemjs",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/readme.mdx

@@ -0,0 +1,56 @@
+import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as NotificationStories from "./src/notification.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/Notification" of={NotificationStories} />
+
+# Notification
+
+<Subtitle>Version {packageInfo.version}</Subtitle>
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+<ArgTypes />
+
+### Installation
+
+#### Via NPM
+
+Add the dependency to your consumer app like `"@purpurds/notification": "x.y.z"`
+
+#### From outside the monorepo (build-time)
+
+To install this package, you need to setup access to the artifactory. [Click here to go to the guide on how to do that](https://github.com/telia-company/jfrog-documentation/blob/main/doc/JFrog/JFrog_Onboarding.md#getting-access-to-artifactory-and-other-jfrog-applications).
+
+---
+
+In MyApp.tsx
+
+```tsx
+import "@purpurds/tokens/index.css";
+```
+
+and
+
+```tsx
+import "@purpurds/notification/dist/styles.css";
+```
+
+In MyComponent.tsx
+
+```tsx
+import { Notification } from "@purpurds/notification";
+
+export const MyComponent = () => {
+  return (
+    <div>
+      <Notification {...someProps}>Some content</Notification>
+    </div>
+  );
+};
+```

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/notification.module.scss

@@ -0,0 +1,70 @@
+.purpur-notification {
+  $root: &;
+
+  display: flex;
+  flex-direction: column;
+  padding: var(--purpur-spacing-200) var(--purpur-spacing-200) var(--purpur-spacing-200)
+    var(--purpur-spacing-250);
+  box-sizing: border-box;
+  width: 100%;
+  background: var(--purpur-color-background-primary);
+  border-radius: var(--purpur-border-radius-md);
+  border: var(--purpur-border-width-sm) solid;
+  border-left: var(--purpur-border-width-lg) solid;
+  gap: var(--purpur-spacing-150);
+  position: relative;
+
+  &__top {
+    display: flex;
+    align-items: flex-start;
+    align-self: stretch;
+    justify-content: space-between;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: var(--purpur-spacing-100);
+  }
+
+  &__close-button {
+    position: absolute;
+    right: calc(var(--purpur-spacing-50) + var(--purpur-spacing-25));
+    top: calc(var(--purpur-spacing-50) + var(--purpur-spacing-25));
+  }
+
+  &__icon {
+    flex-shrink: 0;
+  }
+
+  &__body {
+    padding: var(--purpur-spacing-0) var(--purpur-spacing-150) var(--purpur-spacing-50)
+      var(--purpur-spacing-0);
+  }
+
+  $statuses: "success", "warning", "error", "info";
+  @each $status in $statuses {
+    &--#{$status} {
+      border-color: var(--purpur-color-border-status-#{$status});
+
+      #{$root}__heading {
+        color: var(--purpur-color-text-status-#{$status}-strong);
+      }
+
+      #{$root}__icon {
+        color: var(--purpur-color-text-status-#{$status}-medium);
+      }
+    }
+  }
+
+  &--hidden {
+    display: none;
+    visibility: hidden;
+  }
+
+  &--has-close-button {
+    #{$root}__top {
+      padding-right: var(--purpur-spacing-400);
+    }
+  }
+}

package/src/notification.stories.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+import { Button } from "@purpurds/button";
+import { useArgs } from "@storybook/client-api";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import "@purpurds/icon/styles";
+import "@purpurds/button/styles";
+import "@purpurds/heading/styles";
+import "@purpurds/paragraph/styles";
+import {
+  Notification,
+  notificationAriaLiveValues,
+  notificationRoles,
+  notificationStatuses,
+} from "./notification";
+
+const meta: Meta<typeof Notification> = {
+  title: "Components/Notification",
+  component: Notification,
+};
+
+export default meta;
+type Story = StoryObj<typeof Notification>;
+
+export const NotificationWithoutCloseButton: Story = {
+  name: "Notification without close button",
+  parameters: {
+    design: [
+      {
+        name: "Notification",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=4489-1840",
+      },
+    ],
+  },
+  argTypes: {
+    status: {
+      options: [undefined, ...notificationStatuses],
+      control: "select",
+    },
+    ["aria-live"]: {
+      options: [undefined, ...notificationAriaLiveValues],
+      control: "select",
+    },
+    role: {
+      options: [undefined, ...notificationRoles],
+      control: "select",
+    },
+  },
+  args: {
+    status: "info",
+    heading: "Title",
+    children:
+      "The body of the notification. This can also be a ReactNode. If so, make sure to wrap the text content with a Purpur paragraph ✌🏻.",
+    hidden: false,
+    id: "story-notification",
+    onClose: undefined,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: "450px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const NotificationWithCloseButton: Story = {
+  ...NotificationWithoutCloseButton,
+  name: "Notification with close button",
+  argTypes: {
+    ...NotificationWithoutCloseButton.argTypes,
+    onClose: { action: "closed" },
+  },
+  args: {
+    ...NotificationWithoutCloseButton.args,
+    closeButtonAllyLabel: "Close notification",
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          maxWidth: "450px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "var(--purpur-spacing-gutter-sm)",
+          alignItems: "flex-start",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  render: ({ children, ...args }) => {
+    const [{ hidden }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
+    const toggleHidden = () => updateArgs({ hidden: !hidden });
+    return (
+      <>
+        <Notification
+          {...args}
+          onClose={() => {
+            toggleHidden();
+            args.onClose?.();
+          }}
+          closeButtonAllyLabel={args.closeButtonAllyLabel || ""}
+        >
+          {children}
+        </Notification>
+        <Button variant="primary" onClick={toggleHidden} disabled={!hidden}>
+          Reveal notification
+        </Button>
+      </>
+    );
+  },
+};

package/src/notification.test.tsx

@@ -0,0 +1,150 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { Notification, notificationStatuses } from "./notification";
+const rootClassName = "purpur-notification";
+
+expect.extend(matchers);
+
+describe("Notification", () => {
+  afterEach(cleanup);
+
+  notificationStatuses.forEach((status) => {
+    it(`should render with status ${status}`, () => {
+      render(
+        <Notification heading="Test" data-testid="notification-test" status={status}>
+          Some text content
+        </Notification>
+      );
+
+      expect(screen.getByTestId("notification-test")).toHaveAttribute("aria-hidden", "false");
+      expect(screen.getByTestId("notification-test")).toHaveClass(
+        rootClassName,
+        `${rootClassName}--${status}`
+      );
+      expect(screen.getByTestId("notification-test")).not.toHaveClass(
+        `${rootClassName}--has-close-button`
+      );
+      expect(screen.getByTestId("notification-test-icon")).toBeInTheDocument();
+      expect(screen.getByTestId("notification-test-heading")).toHaveTextContent("Test");
+      expect(screen.getByTestId("notification-test-body")).toHaveTextContent("Some text content");
+      expect(screen.getByTestId("notification-test-paragraph")).toHaveTextContent(
+        "Some text content"
+      );
+      expect(screen.queryByTestId("notification-test-close-button")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should not render heading given no heading", () => {
+    render(<Notification data-testid="notification-test">Some text content</Notification>);
+
+    expect(screen.getByTestId("notification-test")).toHaveAttribute("aria-hidden", "false");
+    expect(screen.getByTestId("notification-test")).toHaveClass(`${rootClassName}--info`);
+    expect(screen.getByTestId("notification-test")).not.toHaveClass(
+      `${rootClassName}--has-close-button`
+    );
+    expect(screen.getByTestId("notification-test-icon")).toBeInTheDocument();
+    expect(screen.queryByTestId("notification-test-heading")).not.toBeInTheDocument();
+    expect(screen.getByTestId("notification-test-body")).toHaveTextContent("Some text content");
+    expect(screen.getByTestId("notification-test-paragraph")).toHaveTextContent(
+      "Some text content"
+    );
+    expect(screen.queryByTestId("notification-test-close-button")).not.toBeInTheDocument();
+  });
+
+  it("should not render body given no children", () => {
+    render(<Notification heading="Test" data-testid="notification-test" />);
+
+    expect(screen.getByTestId("notification-test")).toHaveAttribute("aria-hidden", "false");
+    expect(screen.getByTestId("notification-test")).toHaveClass(`${rootClassName}--info`);
+    expect(screen.getByTestId("notification-test")).not.toHaveClass(
+      `${rootClassName}--has-close-button`
+    );
+    expect(screen.getByTestId("notification-test-icon")).toBeInTheDocument();
+    expect(screen.getByTestId("notification-test-heading")).toHaveTextContent("Test");
+    expect(screen.queryByTestId("notification-test-body")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("notification-test-paragraph")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("notification-test-close-button")).not.toBeInTheDocument();
+  });
+
+  it("should not render paragraph given non-string children", () => {
+    render(
+      <Notification heading="Test" data-testid="notification-test">
+        <p>I am not a string ?!</p>
+      </Notification>
+    );
+
+    expect(screen.getByTestId("notification-test")).toHaveAttribute("aria-hidden", "false");
+    expect(screen.getByTestId("notification-test")).toHaveClass(`${rootClassName}--info`);
+    expect(screen.getByTestId("notification-test")).not.toHaveClass(
+      `${rootClassName}--has-close-button`
+    );
+    expect(screen.getByTestId("notification-test-icon")).toBeInTheDocument();
+    expect(screen.getByTestId("notification-test-heading")).toHaveTextContent("Test");
+    expect(screen.queryByTestId("notification-test-body")).toHaveTextContent(
+      "I am not a string ?!"
+    );
+    expect(screen.queryByTestId("notification-test-paragraph")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("notification-test-close-button")).not.toBeInTheDocument();
+  });
+
+  it("should render close button given onClose callback", () => {
+    const onCloseMock = vi.fn();
+    render(
+      <Notification
+        heading="Test"
+        data-testid="notification-test"
+        onClose={onCloseMock}
+        closeButtonAllyLabel="Close notification"
+      >
+        Some text content
+      </Notification>
+    );
+
+    expect(screen.getByTestId("notification-test")).toHaveAttribute("aria-hidden", "false");
+    expect(screen.getByTestId("notification-test")).toHaveClass(`${rootClassName}--info`);
+    expect(screen.getByTestId("notification-test")).toHaveClass(
+      `${rootClassName}--has-close-button`
+    );
+    expect(screen.getByTestId("notification-test-icon")).toBeInTheDocument();
+    expect(screen.getByTestId("notification-test-heading")).toHaveTextContent("Test");
+    expect(screen.getByTestId("notification-test-body")).toHaveTextContent("Some text content");
+    expect(screen.getByTestId("notification-test-paragraph")).toHaveTextContent(
+      "Some text content"
+    );
+
+    const closeButton = screen.getByTestId("notification-test-close-button");
+    expect(closeButton).toHaveAttribute("aria-label", "Close notification");
+    closeButton.click();
+    expect(onCloseMock).toHaveBeenCalledOnce();
+  });
+
+  it("should be hidden when given hidden", () => {
+    render(
+      <Notification
+        heading="Test"
+        data-testid="notification-test"
+        onClose={vi.fn()}
+        closeButtonAllyLabel="Close notification"
+        hidden
+      >
+        Some text content
+      </Notification>
+    );
+
+    expect(screen.getByTestId("notification-test")).toHaveAttribute("aria-hidden", "true");
+    expect(screen.getByTestId("notification-test")).toHaveClass(`${rootClassName}--info`);
+    expect(screen.getByTestId("notification-test")).toHaveClass(
+      `${rootClassName}--has-close-button`
+    );
+    expect(screen.getByTestId("notification-test-icon")).toBeInTheDocument();
+    expect(screen.getByTestId("notification-test-heading")).toHaveTextContent("Test");
+    expect(screen.getByTestId("notification-test-body")).toHaveTextContent("Some text content");
+    expect(screen.getByTestId("notification-test-paragraph")).toHaveTextContent(
+      "Some text content"
+    );
+    expect(screen.getByTestId("notification-test-close-button")).toBeInTheDocument();
+  });
+});

package/src/notification.tsx

@@ -0,0 +1,173 @@
+import React, { ForwardedRef, forwardRef, ReactNode } from "react";
+import { Button } from "@purpurds/button";
+import { Heading, HeadingTagType } from "@purpurds/heading";
+import {
+  alertFilled,
+  checkCircleFilled,
+  close,
+  errorFilled,
+  Icon,
+  infoFilled,
+} from "@purpurds/icon";
+import { Paragraph } from "@purpurds/paragraph";
+import c from "classnames";
+
+import styles from "./notification.module.scss";
+
+export const NOTIFICATION_STATUS = {
+  SUCCESS: "success",
+  WARNING: "warning",
+  ERROR: "error",
+  INFO: "info",
+} as const;
+
+export const notificationStatuses = Object.values(NOTIFICATION_STATUS);
+export type NotificationStatus = (typeof NOTIFICATION_STATUS)[keyof typeof NOTIFICATION_STATUS];
+
+export const NOTIFICATION_ARIA_LIVE = {
+  POLITE: "polite",
+  ASSERTIVE: "assertive",
+} as const;
+
+export const notificationAriaLiveValues = Object.values(NOTIFICATION_ARIA_LIVE);
+export type NotificationAriaLive =
+  (typeof NOTIFICATION_ARIA_LIVE)[keyof typeof NOTIFICATION_ARIA_LIVE];
+
+export const NOTIFICATION_ROLE = {
+  ALERT: "alert",
+  DIALOG: "dialog",
+  ALERTDIALOG: "alertdialog",
+} as const;
+
+export const notificationRoles = Object.values(NOTIFICATION_ROLE);
+export type NotificationRole = (typeof NOTIFICATION_ROLE)[keyof typeof NOTIFICATION_ROLE];
+
+const rootClassName = "purpur-notification";
+
+const getStatusIcon = (status: NotificationStatus) => {
+  switch (status) {
+    case NOTIFICATION_STATUS.INFO:
+      return infoFilled;
+    case NOTIFICATION_STATUS.SUCCESS:
+      return checkCircleFilled;
+    case NOTIFICATION_STATUS.WARNING:
+      return alertFilled;
+    case NOTIFICATION_STATUS.ERROR:
+      return errorFilled;
+  }
+};
+
+type DefaultProps = {
+  ["data-testid"]?: string;
+  ["aria-live"]?: NotificationAriaLive;
+  children?: ReactNode;
+  className?: string;
+  headingTag?: HeadingTagType;
+  status?: NotificationStatus;
+  heading?: string;
+  role?: NotificationRole;
+  hidden?: boolean;
+  id?: string;
+};
+
+type CloseButtonProps = {
+  onClose: () => void;
+  closeButtonAllyLabel: string;
+};
+
+type NoCloseButtonProps = {
+  onClose?: never;
+  closeButtonAllyLabel?: never;
+};
+
+export type NotificationProps = DefaultProps & (CloseButtonProps | NoCloseButtonProps);
+
+const NotificationComponent = <T extends HTMLDivElement>(
+  {
+    ["data-testid"]: dataTestId,
+    ["aria-live"]: ariaLive,
+    children,
+    className,
+    closeButtonAllyLabel,
+    headingTag = "h4",
+    role,
+    status = "info",
+    heading,
+    hidden,
+    id,
+    onClose,
+    ...props
+  }: NotificationProps,
+  ref: ForwardedRef<T>
+) => (
+  <div
+    id={id}
+    aria-labelledby={id ? `${id}-heading` : undefined}
+    aria-describedby={id ? `${id}-body` : undefined}
+    aria-live={ariaLive}
+    aria-hidden={!!hidden}
+    className={c(className, styles[rootClassName], styles[`${rootClassName}--${status}`], {
+      [styles[`${rootClassName}--hidden`]]: hidden,
+      [styles[`${rootClassName}--has-close-button`]]: !!onClose,
+    })}
+    data-testid={dataTestId}
+    ref={ref}
+    role={role}
+    {...props}
+  >
+    <div className={styles[`${rootClassName}__top`]}>
+      <div className={styles[`${rootClassName}__header`]}>
+        <Icon
+          data-testid={dataTestId ? `${dataTestId}-icon` : undefined}
+          className={styles[`${rootClassName}__icon`]}
+          svg={getStatusIcon(status)}
+          size="md"
+        />
+        {!!heading && (
+          <Heading
+            data-testid={dataTestId ? `${dataTestId}-heading` : undefined}
+            variant="subsection-100"
+            tag={headingTag}
+            className={styles[`${rootClassName}__heading`]}
+          >
+            <span id={id ? `${id}-heading` : undefined}> {heading}</span>
+          </Heading>
+        )}
+      </div>
+      {onClose && (
+        <Button
+          data-testid={dataTestId ? `${dataTestId}-close-button` : undefined}
+          variant="tertiary-purple"
+          size="sm"
+          iconOnly
+          aria-label={closeButtonAllyLabel}
+          onClick={onClose}
+          className={styles[`${rootClassName}__close-button`]}
+        >
+          <Icon svg={close} size="sm" />
+        </Button>
+      )}
+    </div>
+    {children && (
+      <div
+        data-testid={dataTestId ? `${dataTestId}-body` : undefined}
+        className={styles[`${rootClassName}__body`]}
+        id={id ? `${id}-body` : undefined}
+      >
+        {typeof children === "string" ? (
+          <Paragraph
+            data-testid={dataTestId ? `${dataTestId}-paragraph` : undefined}
+            variant="paragraph-100"
+          >
+            {children}
+          </Paragraph>
+        ) : (
+          children
+        )}
+      </div>
+    )}
+  </div>
+);
+
+export const Notification = forwardRef(NotificationComponent);
+Notification.displayName = "Notification";