@purpurds/notification-banner 0.0.1

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-notification-banner_llblm_1{background-color:var(--purpur-color-background-tone-on-tone-quaternary);padding:var(--purpur-spacing-200) 0;position:relative}._purpur-notification-banner__container_llblm_6{display:flex;gap:var(--purpur-spacing-150);color:var(--purpur-color-text-tone-on-tone-tertiary)}._purpur-notification-banner__content_llblm_11{display:flex;flex-direction:column;gap:var(--purpur-spacing-50)}._purpur-notification-banner__icon_llblm_16{flex-shrink:0}._purpur-notification-banner__heading_llblm_19{color:var(--purpur-color-text-tone-on-tone-tertiary)}._purpur-notification-banner__heading--no-overlap_llblm_22{padding-right:var(--purpur-spacing-300)}._purpur-notification-banner__close-button_llblm_25{position:absolute;right:calc(var(--purpur-spacing-50) + var(--purpur-spacing-25));top:calc(var(--purpur-spacing-50) + var(--purpur-spacing-25))}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@purpurds/notification-banner",
+  "version": "0.0.1",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/notification-banner.cjs.js",
+  "types": "./dist/notification-banner.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/notification-banner.cjs.js",
+      "types": "./dist/notification-banner.d.ts",
+      "default": "./dist/notification-banner.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/notification-banner.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@purpurds/grid": "5.5.0",
+    "@purpurds/button": "5.5.0",
+    "@purpurds/heading": "5.5.0",
+    "@purpurds/icon": "5.5.0",
+    "@purpurds/tokens": "5.5.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.10.0",
+    "@storybook/blocks": "~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.4.0",
+    "@testing-library/react": "~14.3.0",
+    "@types/node": "20.12.12",
+    "@types/react-dom": "~18.3.0",
+    "@types/react": "~18.3.0",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "~8.57.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "~18.3.0",
+    "react": "~18.3.0",
+    "typescript": "~5.4.2",
+    "vite": "~5.2.2",
+    "vitest": "~1.5.0",
+    "@purpurds/component-rig": "1.0.0",
+    "@purpurds/link": "5.5.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "vite build",
+    "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,66 @@
+import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as NotificationBannerStories from "./src/notification-banner.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/NotificationBanner" of={NotificationBannerStories} />
+
+# NotificationBanner
+
+<Subtitle>Version {packageInfo.version}</Subtitle>
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+<ArgTypes />
+
+### Installation
+
+#### Via NPM
+
+Add the dependency to your consumer app like `"@purpurds/purpur": "^x.y.z"`
+
+### Usage
+
+In MyApp.tsx
+
+```tsx
+import "@purpurds/purpur/styles";
+```
+
+In MyComponent.tsx
+
+#### With Link
+
+```tsx
+import { NotificationBanner, Link } from "@purpurds/purpur";
+
+export const MyComponent = () => (
+  <NotificationBanner
+    title="Lorem ipsum"
+    description="Donec placerat ornare neque sit amet euismod."
+    link={
+      <Link variant="text" href="http://purpur.telia.io">
+        Praesent pretium augue cursus
+      </Link>
+    }
+  />
+);
+```
+
+#### With custom icon and no Link
+
+```tsx
+import { NotificationBanner, IconBattery } from "@purpurds/purpur";
+
+export const MyComponent = () => (
+  <NotificationBanner
+    title="Low battery"
+    description="Please connect your device to a charger."
+    icon={<IconBattery size="sm" />}
+  />
+);
+```

package/src/global.d.ts

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

package/src/notification-banner.module.scss

@@ -0,0 +1,34 @@
+.purpur-notification-banner {
+  background-color: var(--purpur-color-background-tone-on-tone-quaternary);
+  padding: var(--purpur-spacing-200) 0;
+  position: relative;
+
+  &__container {
+    display: flex;
+    gap: var(--purpur-spacing-150);
+    color: var(--purpur-color-text-tone-on-tone-tertiary);
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--purpur-spacing-50);
+  }
+
+  &__icon {
+    flex-shrink: 0;
+  }
+
+  &__heading {
+    color: var(--purpur-color-text-tone-on-tone-tertiary);
+    &--no-overlap {
+      padding-right: var(--purpur-spacing-300);
+    }
+  }
+
+  &__close-button {
+    position: absolute;
+    right: calc(var(--purpur-spacing-50) + var(--purpur-spacing-25));
+    top: calc(var(--purpur-spacing-50) + var(--purpur-spacing-25));
+  }
+}

package/src/notification-banner.stories.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { IconBattery } from "@purpurds/icon";
+import { Link } from "@purpurds/link";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import "@purpurds/link/styles";
+import "@purpurds/button/styles";
+import "@purpurds/grid/styles";
+import "@purpurds/heading/styles";
+import "@purpurds/icon/styles";
+import { NotificationBanner } from "./notification-banner";
+
+type Story = StoryObj<typeof NotificationBanner>;
+
+const meta: Meta<typeof NotificationBanner> = {
+  title: "Components/NotificationBanner",
+  component: NotificationBanner,
+  parameters: {
+    design: [
+      {
+        name: "NotificationBanner",
+        type: "figma",
+        url: "https://www.figma.com/design/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?node-id=37280-1900&m=dev",
+      },
+    ],
+  },
+  args: {
+    title: "Lorem ipsum",
+    hideIcon: false,
+    description: "Donec placerat ornare neque sit amet euismod.",
+    link: (
+      <Link variant="text" href="http://purpur.telia.io">
+        Praesent pretium augue cursus
+      </Link>
+    ),
+    closeButtonAllyLabel: "Close notification",
+  },
+};
+
+export const Showcase: Story = {};
+
+export const CustomIcon: Story = {
+  args: {
+    description: "Please connect your device to a charger.",
+    icon: <IconBattery size="sm" />,
+    link: undefined,
+    onClose: undefined,
+    title: "Low battery",
+  },
+};
+
+export const HideIcon: Story = {
+  args: {
+    hideIcon: true,
+    link: undefined,
+    onClose: undefined,
+  },
+};
+
+export default meta;

package/src/notification-banner.test.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { NotificationBanner } from "./notification-banner";
+
+expect.extend(matchers);
+
+describe("NotificationBanner", () => {
+  it("should have title and description", () => {
+    render(<NotificationBanner title="abc" description="def" />);
+    expect(screen.getByRole("alert")).toHaveTextContent("abc");
+    expect(screen.getByRole("alert")).toHaveTextContent("def");
+  });
+});

package/src/notification-banner.tsx

@@ -0,0 +1,105 @@
+import React, { ForwardedRef, forwardRef, ReactNode } from "react";
+import { Button } from "@purpurds/button";
+import { Grid } from "@purpurds/grid";
+import { Heading, HeadingTagType } from "@purpurds/heading";
+import { IconClose, IconInfo } from "@purpurds/icon";
+import c from "classnames/bind";
+
+import styles from "./notification-banner.module.scss";
+const cx = c.bind(styles);
+
+export type DefaultProps = {
+  ["data-testid"]?: string;
+  children?: ReactNode;
+  className?: string;
+  closeButtonAllyLabel?: string;
+  description?: string;
+  hideIcon?: boolean;
+  icon?: ReactNode;
+  link?: ReactNode;
+  titleTag?: HeadingTagType;
+  title?: string;
+};
+
+type CloseButtonProps = {
+  onClose: () => void;
+  closeButtonAllyLabel: string;
+};
+
+type NoCloseButtonProps = {
+  onClose?: never;
+  closeButtonAllyLabel?: never;
+};
+
+export type NotificationBannerProps = DefaultProps & (CloseButtonProps | NoCloseButtonProps);
+
+const rootClassName = "purpur-notification-banner";
+
+export const NotificationBanner = forwardRef(
+  (
+    {
+      ["data-testid"]: dataTestId,
+      children,
+      className,
+      closeButtonAllyLabel,
+      description,
+      hideIcon,
+      icon,
+      link,
+      onClose,
+      titleTag = "h4",
+      title,
+      ...props
+    }: NotificationBannerProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const classes = cx([className, rootClassName]);
+
+    return (
+      <div {...props} className={classes} role="alert" ref={ref} data-testid={dataTestId}>
+        <Grid>
+          <div className={cx(`${rootClassName}__container`)}>
+            {!hideIcon ? (
+              icon ? (
+                icon
+              ) : (
+                <IconInfo className={cx(`${rootClassName}__icon`)} size="sm" />
+              )
+            ) : null}
+            <div className={cx(`${rootClassName}__content`)}>
+              <Heading
+                tag={titleTag}
+                variant="subsection-100"
+                className={cx([
+                  `${rootClassName}__heading`,
+                  { [`${rootClassName}__heading--no-overlap`]: onClose },
+                ])}
+              >
+                {title}
+              </Heading>
+              <div>
+                {description} {link}
+              </div>
+            </div>
+            {children}
+            {onClose && (
+              <Button
+                data-testid={dataTestId ? `${dataTestId}-close-button` : undefined}
+                variant="tertiary-purple"
+                size="sm"
+                iconOnly
+                aria-label={closeButtonAllyLabel}
+                onClick={onClose}
+                className={cx(`${rootClassName}__close-button`)}
+              >
+                <IconClose size="sm" />
+              </Button>
+            )}
+          </div>
+        </Grid>
+      </div>
+    );
+  }
+);
+
+NotificationBanner.displayName = "NotificationBanner";