@ilo-org/react 0.0.1

package/package.json

@@ -0,0 +1,115 @@
+{
+  "name": "@ilo-org/react",
+  "description": "React components for the ILO's Design System",
+  "version": "0.0.1",
+  "author": "@justintemps",
+  "license": "Apache-2.0",
+  "main": "lib/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "lib/index.esm.js",
+  "types": "lib/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/international-labour-organization/designsystem.git",
+    "directory": "packages/react"
+  },
+  "keywords": [
+    "ui_patterns",
+    "prototyping",
+    "react",
+    "designsystem",
+    "components"
+  ],
+  "dependencies": {
+    "@ilo-org/brand-assets": "0.0.1",
+    "@ilo-org/fonts": "0.0.1",
+    "@ilo-org/icons-react": "0.0.1",
+    "@ilo-org/styles": "0.0.1",
+    "@ilo-org/themes": "0.0.1",
+    "@ilo-org/utils": "0.0.1",
+    "classnames": "^2.3.1",
+    "dom-helpers": "^5.2.1",
+    "global": "^4.4.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "5.0.0",
+    "react-transition-group": "^4.4.1",
+    "typescript": "4.3.4"
+  },
+  "devDependencies": {
+    "@ilo-org/eslint-config": "^0.0.1",
+    "@ilo-org/prettier-config": "^0.0.1",
+    "@ilo-org/typescript-config": "^0.0.1",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@storybook/addon-a11y": "^6.4.12",
+    "@storybook/addon-actions": "^6.4.12",
+    "@storybook/addon-docs": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.12",
+    "@storybook/addon-links": "^6.4.12",
+    "@storybook/builder-webpack5": "^6.4.12",
+    "@storybook/client-api": "^6.4.0",
+    "@storybook/manager-webpack5": "^6.4.12",
+    "@storybook/node-logger": "^6.4.12",
+    "@storybook/preset-create-react-app": "^4.0.0",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.4.12",
+    "@storybook/testing-react": "^1.2.3",
+    "@storybook/theming": "^6.4.19",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.21",
+    "@types/react": "17.0.11",
+    "@types/react-dom": "^17.0.13",
+    "classnames": "2.2.6",
+    "http-server": "^14.1.0",
+    "jest-environment-jsdom": "^27.5.1",
+    "react-player": "2.10.1",
+    "rollup": "^2.56.3",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^3.1.8",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "sass": "^1.49.9",
+    "screenfull": "^5.2.0",
+    "storybook-addon-performance": "^0.16.1",
+    "ts-jest": "^27.1.3",
+    "tslib": "^2.3.1",
+    "webpack": "^5.68.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build-test": "react-scripts build",
+    "test": "NODE_OPTIONS=--experimental-vm-modules SKIP_PREFLIGHT_CHECK=true react-scripts test --watchAll=false --setupFilesAfterEnv ./src/setup.ts",
+    "test:update": "SKIP_PREFLIGHT_CHECK=true react-scripts test -u --watchAll=false --setupFilesAfterEnv ./src/setup.ts",
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 6006",
+    "storybook:static": "http-server ./storybook-static",
+    "build": "pnpm run build:rollup && npm run build:storybook",
+    "build:storybook": "build-storybook",
+    "build:rollup": "rollup -c",
+    "check": "tsc --noEmit",
+    "format": "prettier --check . --ignore-path ../../.prettierignore",
+    "format:fix": "prettier --write . --ignore-path ../../.prettierignore",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint:fix": "pnpm lint -- --fix"
+  },
+  "readme": "# ILO Design System - React Package\n\n## Status: Proof of Concept\n\nThis package provides the implementation of the Design System using [React](https://reactjs.org/). It also includes a [Storybook](https://storybook.js.org/) project for documentation and development of React components.\n\nThis is just a POC, so the package doesn't expose components or include a build step. Only the Storybook project is implemented.\n\n## Styling\n\nUse the `styles` package to manage styling for React components\n"
+}

package/rollup.config.js

@@ -0,0 +1,40 @@
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "rollup-plugin-typescript2";
+import postcss from "rollup-plugin-postcss";
+import json from "@rollup/plugin-json";
+import { terser } from "rollup-plugin-terser";
+
+const packageJson = require("./package.json");
+
+export default {
+  input: "src/index.ts",
+  external: [...Object.keys(packageJson.dependencies)],
+  output: [
+    {
+      file: packageJson.main,
+      format: "cjs",
+      sourcemap: true,
+    },
+    {
+      file: packageJson.module,
+      format: "esm",
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    peerDepsExternal(),
+    resolve(),
+    commonjs(),
+    typescript({
+      useTsconfigDeclarationDir: true,
+      tsconfig: "./tsconfig.build.json",
+    }),
+    postcss({
+      extensions: [".css"],
+    }),
+    json(),
+    terser(),
+  ],
+};

package/src/__tests__/Accordion.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { composeStories } from "@storybook/testing-react";
+import * as stories from "../stories/Accordion.stories";
+import { Accordion, AccordionItem } from "../components/Accordion";
+import accordionArgs from "../components/Accordion/Accordion.args";
+
+const { AccordionLarge } = composeStories(stories);
+
+// Need to finish writting accordion tests
+
+describe("<Accordion>", () => {
+  it("Expect button to exist and aria expanded value to change on accordion button click.", () => {
+    render(<AccordionLarge />);
+    const buttonElement = screen.getAllByRole("button");
+    const ariaExpanded = buttonElement[0].getAttribute("aria-expanded");
+    expect(buttonElement).not.toBeNull();
+    fireEvent.click(buttonElement[0]);
+    expect(buttonElement[0]).toHaveAttribute(
+      "aria-expanded",
+      `${!ariaExpanded}`
+    );
+  });
+
+  it("Should render `h1` with story text.", () => {
+    render(<AccordionLarge />);
+    const buttonElement = screen.getAllByRole("button");
+    expect(buttonElement).not.toBeNull();
+    fireEvent.click(buttonElement[0]);
+    expect(buttonElement[0]).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("Should render `h2` with story text.", () => {
+    render(<AccordionLarge />);
+    const buttonElement = screen.getAllByRole("button");
+    expect(buttonElement).not.toBeNull();
+    fireEvent.click(buttonElement[0]);
+    expect(buttonElement[0]).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("Should print a warning if two <AccordionItem /> have same id", async () => {
+    const consoleWarn = jest.spyOn(console, "warn").mockImplementation(() => {
+      // do nothing
+    });
+    render(
+      <Accordion {...accordionArgs.large}>
+        <AccordionItem id="test-1">Item/</AccordionItem>
+        <AccordionItem id="test-1">Item/</AccordionItem>
+      </Accordion>
+    );
+    expect(consoleWarn).toHaveBeenCalled();
+  });
+});

package/src/__tests__/Button.test.tsx

@@ -0,0 +1,60 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Button } from "../components/Button";
+import buttonArgs from "../components/Button/Button.args";
+
+describe("<Button>", () => {
+  it("Should render `button` with correct class name from type prop", () => {
+    render(<Button {...buttonArgs.primary} />);
+    const buttonElement = screen.getAllByRole("button");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0].getAttribute("class")).toEqual(
+      expect.stringContaining(buttonArgs.primary.type as string)
+    );
+  });
+
+  it("Should render `button` with correct size class name from prop size", () => {
+    render(<Button {...buttonArgs.primary} />);
+    const buttonElement = screen.getAllByRole("button");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0].getAttribute("class")).toEqual(
+      expect.stringContaining(buttonArgs.primary.size)
+    );
+  });
+
+  it("Should render `button` with correct label from prop label", () => {
+    render(<Button {...buttonArgs.primary} />);
+    const buttonElement = screen.getAllByRole("button");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0].textContent).toEqual(buttonArgs.primary.label);
+  });
+
+  it("Should render `button` as anchor, with the correct url", () => {
+    render(<Button {...buttonArgs.large} />);
+    const buttonElement = screen.getAllByRole("link");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0]).toHaveAttribute("href", buttonArgs.large.url);
+  });
+
+  it("Should render `button` with disabled attribute", () => {
+    render(<Button {...buttonArgs.disabled} />);
+    const buttonElement = screen.getAllByRole("button");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0]).toHaveAttribute("disabled", "");
+  });
+
+  it("Should render `button` as anchor with target attribute and rel attribute", () => {
+    render(<Button {...buttonArgs.large} />);
+    const buttonElement = screen.getAllByRole("link");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0]).toHaveAttribute("target", buttonArgs.large.target);
+    expect(buttonElement[0]).toHaveAttribute("rel", "noopener noreferrer");
+  });
+
+  it('calls "callback" prop on button click', () => {
+    const onClick = jest.fn();
+    render(<Button {...buttonArgs.primary} callback={onClick} />);
+    const buttonElement = screen.getAllByRole("button");
+    fireEvent.click(buttonElement[0]);
+    expect(onClick).toHaveBeenCalled();
+  });
+});

package/src/__tests__/Callout.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Callout } from "../components/Callout";
+import calloutArgs from "../components/Callout/Callout.args";
+
+// const { InfoCallout, ErrorCallout, SuccessCallout, WarningCallout } =
+//   composeStories(stories);
+
+describe("<Callout>", () => {
+  it("Should render Callout headline with content.", () => {
+    const { container } = render(<Callout {...calloutArgs.hascta} />);
+    expect(container.children[0]).not.toBeNull();
+    const headlineElement = document.querySelector('[class*="--headline"]');
+    console.log(headlineElement);
+    expect(headlineElement?.textContent).toEqual(calloutArgs?.hascta?.headline);
+  });
+
+  it("Should render Callout copy with content.", () => {
+    const { container } = render(<Callout {...calloutArgs.hascta} />);
+    expect(container.children[0]).not.toBeNull();
+    const copyElement = document.querySelector('[class*="--copy"]');
+    expect(copyElement?.textContent).toEqual(calloutArgs?.hascta?.copy);
+  });
+
+  it("Should render `button` with correct label from prop toggleClosedLabel", () => {
+    render(<Callout {...calloutArgs.hascta} />);
+    const buttonElement = screen.getAllByRole("button");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0].textContent).toEqual(
+      calloutArgs?.hascta?.toggleClosedLabel
+    );
+  });
+
+  it("Should open the callout on button click", () => {
+    const { container } = render(<Callout {...calloutArgs.hascta} />);
+    expect(container.children[0]).not.toBeNull();
+    userEvent.click(screen.getByRole("button"));
+    const calloutOpenElement = document.querySelector('[class*="--open"]');
+    expect(calloutOpenElement).not.toBeNull();
+  });
+});

package/src/__tests__/ContextMenu.test.tsx

@@ -0,0 +1,19 @@
+import { render } from "@testing-library/react";
+import { ContextMenu } from "../components/ContextMenu";
+import contextMenuArgs from "../components/ContextMenu/ContextMenu.args";
+
+describe("<ContextMenu>", () => {
+  it("Should render `ul` with some items.", () => {
+    const { container } = render(<ContextMenu {...contextMenuArgs.basic} />);
+    expect(container).not.toBeNull();
+  });
+
+  it("Should render `ul` with `li`s with the `endsection` prop containing the class `endsection`", () => {
+    const { container } = render(
+      <ContextMenu {...contextMenuArgs.withsection} />
+    );
+    expect(container).not.toBeNull();
+    const endsectionElement = document.querySelector(".endsection");
+    expect(endsectionElement).not.toBeNull();
+  });
+});

package/src/__tests__/Dropdown.test.tsx

@@ -0,0 +1,38 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Dropdown } from "../components/Dropdown";
+import dropdownArgs from "../components/Dropdown/Dropdown.args";
+
+describe("<Dropdown>", () => {
+  it("Should render `Dropdown` with correct label from prop label", () => {
+    const { container } = render(<Dropdown {...dropdownArgs.basic} />);
+    expect(container.children[0]).not.toBeNull();
+    expect(container.querySelector("label")?.textContent).toEqual(
+      dropdownArgs.basic.label
+    );
+  });
+
+  it("should display the correct number of options", () => {
+    render(<Dropdown {...dropdownArgs.basic} />);
+    expect(screen.getAllByRole("option").length).toBe(
+      dropdownArgs?.basic?.options?.length
+    );
+  });
+
+  it("selects the correct option", () => {
+    render(<Dropdown {...dropdownArgs.basic} />);
+    fireEvent.change(screen.getByRole("combobox"), {
+      target: { value: "option two" },
+    });
+    const chosenoption = document.querySelector('option[value="option two"]');
+    expect((chosenoption as HTMLOptionElement).selected).toBeTruthy();
+  });
+
+  it('calls "callback" prop on button click', () => {
+    const onClick = jest.fn();
+    render(<Dropdown {...dropdownArgs.basic} callback={onClick} />);
+    fireEvent.change(screen.getByRole("combobox"), {
+      target: { value: "option two" },
+    });
+    expect(onClick).toHaveBeenCalled();
+  });
+});

package/src/__tests__/Form.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from "@testing-library/react";
+import { Form } from "../components/Form";
+import FormArgs from "../components/Form/Form.args";
+
+describe("<Form>", () => {
+  it("Should render `Form` with correct label from prop input.placeholder", () => {
+    const { container } = render(<Form {...FormArgs.basic} />);
+    expect(container.children[0]).not.toBeNull();
+    const inputElement = screen.getAllByPlaceholderText(
+      FormArgs.basic.items[0].field.placeholder
+    );
+    expect(inputElement[0]).not.toBeNull();
+  });
+
+  it("Should render `Form input` with disabled attribute", () => {
+    const { container } = render(<Form {...FormArgs.hasdisabled} />);
+    expect(container.children[0]).not.toBeNull();
+    const inputElement = screen.getByPlaceholderText(
+      FormArgs.hasdisabled.items[0].field.placeholder
+    );
+    expect(inputElement).toHaveAttribute("disabled", "");
+  });
+
+  it("Should render `Form input` with error class", () => {
+    const { container } = render(<Form {...FormArgs.haserror} />);
+    expect(container.children[0]).not.toBeNull();
+    const inputElement = screen.getAllByPlaceholderText(
+      FormArgs.haserror.items[0].field.placeholder
+    );
+    expect(inputElement[0].getAttribute("class")).toEqual(
+      expect.stringContaining("error")
+    );
+  });
+});

package/src/__tests__/Heading.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from "@testing-library/react";
+import { composeStories } from "@storybook/testing-react";
+import headingArgs from "../components/Heading/Heading.args";
+import * as stories from "../stories/Heading.stories";
+
+const { Heading1, Heading2, Heading3, Heading4, Heading5, Heading6 } =
+  composeStories(stories);
+
+describe("<Heading>", () => {
+  it("Should render `h1` with story text.", () => {
+    render(<Heading1 />);
+    const headingElement = screen.getByRole("heading", { level: 1 });
+    expect(headingElement).not.toBeNull();
+    expect(headingElement.textContent).toEqual(headingArgs.heading1.children);
+  });
+
+  it("Should render `h2` with story text.", () => {
+    render(<Heading2 />);
+    const headingElement = screen.getByRole("heading", { level: 2 });
+    expect(headingElement).not.toBeNull();
+    expect(headingElement.textContent).toEqual(headingArgs.heading2.children);
+  });
+
+  it("Should render `h3` with story text.", () => {
+    render(<Heading3 />);
+    const headingElement = screen.getByRole("heading", { level: 3 });
+    expect(headingElement).not.toBeNull();
+    expect(headingElement.textContent).toEqual(headingArgs.heading3.children);
+  });
+
+  it("Should render `h4` with story text.", () => {
+    render(<Heading4 />);
+    const headingElement = screen.getByRole("heading", { level: 4 });
+    expect(headingElement).not.toBeNull();
+    expect(headingElement.textContent).toEqual(headingArgs.heading4.children);
+  });
+
+  it("Should render `h5` with story text.", () => {
+    render(<Heading5 />);
+    const headingElement = screen.getByRole("heading", { level: 5 });
+    expect(headingElement).not.toBeNull();
+    expect(headingElement.textContent).toEqual(headingArgs.heading5.children);
+  });
+
+  it("Should render `h6` with story text.", () => {
+    render(<Heading6 />);
+    const headingElement = screen.getByRole("heading", { level: 6 });
+    expect(headingElement).not.toBeNull();
+    expect(headingElement.textContent).toEqual(headingArgs.heading6.children);
+  });
+});

package/src/__tests__/Hero.test.tsx

@@ -0,0 +1,22 @@
+import { render } from "@testing-library/react";
+import { Hero } from "../components/Hero";
+import heroArgs from "../components/Hero/Hero.args";
+
+describe("<Hero>", () => {
+  it("Should render with correct content", () => {
+    const { container } = render(<Hero {...heroArgs.homeHero} />);
+    expect(container).not.toBeNull();
+    expect(container.querySelector("h2")?.textContent).toEqual(
+      heroArgs.homeHero.heroCard.title
+    );
+  });
+
+  it("Should render Hero with intro.", () => {
+    const { container } = render(<Hero {...heroArgs.articleHero} />);
+    expect(container).not.toBeNull();
+    const introElement = document.querySelector('[class*="--intro"]');
+    expect(introElement?.textContent).toEqual(
+      heroArgs?.articleHero?.heroCard?.intro
+    );
+  });
+});

package/src/__tests__/Image.test.tsx

@@ -0,0 +1,21 @@
+import { render } from "@testing-library/react";
+import { Image } from "../components/Image";
+import imageArgs from "../components/Image/Image.args";
+
+describe("<Image>", () => {
+  it("Should render `img` with correct image src", () => {
+    const { container } = render(<Image {...imageArgs.image} />);
+    expect(container).not.toBeNull();
+    expect(container.querySelector("img")?.getAttribute("src")).toEqual(
+      imageArgs.image.url?.[0].src
+    );
+  });
+
+  it("Should render `img` with correct image alt", () => {
+    const { container } = render(<Image {...imageArgs.image} />);
+    expect(container).not.toBeNull();
+    expect(container.querySelector("img")?.getAttribute("alt")).toEqual(
+      imageArgs.image.alt
+    );
+  });
+});

package/src/__tests__/LinkList.test.tsx

@@ -0,0 +1,17 @@
+import { render } from "@testing-library/react";
+import { LinkList } from "../components/LinkList";
+import linkListArgs from "../components/LinkList/LinkList.args";
+
+describe("<LinkList>", () => {
+  it("Should render `ul` with some items.", () => {
+    const { container } = render(<LinkList {...linkListArgs.basic} />);
+    expect(container).not.toBeNull();
+  });
+
+  it("Should render `ul` with `li`s with the `indented` prop containing the class `indented`", () => {
+    const { container } = render(<LinkList {...linkListArgs.withindented} />);
+    expect(container).not.toBeNull();
+    const indentedElement = document.querySelectorAll(".indented");
+    expect(indentedElement).not.toEqual([]);
+  });
+});

package/src/__tests__/List.test.tsx

@@ -0,0 +1,37 @@
+import { render } from "@testing-library/react";
+import { List } from "../components/List";
+import listArgs from "../components/List/List.args";
+
+describe("<List>", () => {
+  it("Should render `ol` with some items.", () => {
+    const { container } = render(<List {...listArgs.ordered} />);
+    expect(container).not.toBeNull();
+    expect(container.children[0].getAttribute("class")).toEqual(
+      expect.stringContaining(listArgs.ordered.ordered as string)
+    );
+  });
+
+  it("Should render `ul` with some items.", () => {
+    const { container } = render(<List {...listArgs.unordered} />);
+    expect(container).not.toBeNull();
+    expect(container.children[0].getAttribute("class")).toEqual(
+      expect.stringContaining(listArgs.unordered.ordered as string)
+    );
+  });
+
+  it("Should render `ul` horizontally with some items.", () => {
+    const { container } = render(<List {...listArgs.horizontal} />);
+    expect(container).not.toBeNull();
+    expect(container.children[0].getAttribute("class")).toEqual(
+      expect.stringContaining(listArgs.horizontal.alignment as string)
+    );
+  });
+
+  it("Should render `ul` unstyled with some items.", () => {
+    const { container } = render(<List {...listArgs.unstyled} />);
+    expect(container).not.toBeNull();
+    expect(container.children[0].getAttribute("class")).toEqual(
+      expect.stringContaining(listArgs.unstyled.ordered as string)
+    );
+  });
+});

package/src/__tests__/Loading.text.tsx

@@ -0,0 +1,33 @@
+import { render } from "@testing-library/react";
+import { Loading } from "../components/Loading";
+import loadingArgs from "../components/Loading/Loading.args";
+
+describe("<Loading>", () => {
+  it("Should render `Loading` with correct label from prop label", () => {
+    const { container } = render(<Loading {...loadingArgs.loadinglarge} />);
+    expect(container.children[0]).not.toBeNull();
+    const paragraphElement = document.querySelector(
+      'p[class*="--copy"]'
+    ) as Element;
+    expect(paragraphElement).not.toBeNull();
+    expect(paragraphElement.textContent).toEqual(
+      loadingArgs.loadinglarge.message
+    );
+  });
+
+  it("Should render `Loading` with correct class derived from prop status", () => {
+    const { container } = render(<Loading {...loadingArgs.loadinglarge} />);
+    expect(container.children[0]).not.toBeNull();
+    expect(container.children[0].getAttribute("class")).toContain(
+      loadingArgs.loadinglarge.status
+    );
+  });
+
+  it("Should render `Loading` with correct class derived from prop size", () => {
+    const { container } = render(<Loading {...loadingArgs.loadinglarge} />);
+    expect(container.children[0]).not.toBeNull();
+    expect(container.children[0].getAttribute("class")).toContain(
+      loadingArgs.loadinglarge.size
+    );
+  });
+});

package/src/__tests__/Notification.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Notification } from "../components/Notification";
+import notificationArgs from "../components/Notification/Notification.args";
+
+describe("<Notification>", () => {
+  it("Should render Notification headline with content.", () => {
+    const { container } = render(<Notification {...notificationArgs.hascta} />);
+    expect(container.children[0]).not.toBeNull();
+    const headlineElement = document.querySelector('[class*="--headline"]');
+    console.log(headlineElement);
+    expect(headlineElement?.textContent).toEqual(
+      notificationArgs?.hascta?.headline
+    );
+  });
+
+  it("Should render Notification copy with content.", () => {
+    const { container } = render(<Notification {...notificationArgs.hascta} />);
+    expect(container.children[0]).not.toBeNull();
+    const copyElement = document.querySelector('[class*="--copy"]');
+    expect(copyElement?.textContent).toEqual(notificationArgs?.hascta?.copy);
+  });
+
+  it("Should render `button` with correct label from prop closelabel", () => {
+    render(<Notification {...notificationArgs.hascta} />);
+    const buttonElement = screen.getAllByRole("button");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0].textContent).toEqual(
+      notificationArgs?.hascta?.closelabel
+    );
+  });
+
+  it("Should delete the component on click of the button", () => {
+    const { container } = render(<Notification {...notificationArgs.hascta} />);
+    expect(container.children[0]).not.toBeNull();
+    userEvent.click(screen.getByRole("button"));
+    expect(container.children[0]).toBeUndefined();
+  });
+});