@ilo-org/react 0.12.0 → 0.14.0

package/lib/types/react/src/components/Cards/StatCard/StatCard.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { StatCardProps } from "./StatCard.props";
+declare const StatCard: FC<StatCardProps>;
+export default StatCard;

package/lib/types/react/src/components/Cards/StatCard/StatCard.props.d.ts

@@ -0,0 +1,18 @@
+import { CardColor, CardSize } from "../../../types";
+import { LinkProps } from "../../LinkList/LinkList.props";
+export type StatCardProps = {
+    /**
+     * The title of the card
+     */
+    title: string;
+    color?: CardColor;
+    /**
+     * How big should the card be
+     */
+    size?: Omit<CardSize, "narrow" | "wide">;
+    /**
+     * Introductory text in the card
+     */
+    intro?: string;
+    source?: LinkProps;
+};

package/lib/types/react/src/components/Cards/StatCard/index.d.ts

@@ -1,4 +1,3 @@
-import { FC } from "react";
-import { StatCardProps } from "../Card.props";
-declare const StatCard: FC<StatCardProps>;
-export default StatCard;
+export { default as StatCard } from "./StatCard";
+export type { StatCardProps } from "./StatCard.props";
+export { StatCardArgs } from "./StatCard.args";

package/lib/types/react/src/components/Cards/TextCard/TextCard.args.d.ts

@@ -0,0 +1,3 @@
+import { TextCardProps } from ".";
+export declare const TextCardArgs: TextCardProps;
+export default TextCardArgs;

package/lib/types/react/src/components/Cards/TextCard/TextCard.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { TextCardProps } from "./TextCard.props";
+declare const TextCard: FC<TextCardProps>;
+export default TextCard;

package/lib/types/react/src/components/Cards/TextCard/TextCard.props.d.ts

@@ -0,0 +1,26 @@
+import { ThemeTypes, CardSize, EventDate } from "../../../types";
+import { ProfileProps } from "../../Profile/Profile.props";
+export type TextCardProps = {
+    /**
+     * A line of text that appears as a small heading above the title of the card
+     */
+    eyebrow?: string;
+    /**
+     * The title of the card
+     */
+    title: string;
+    /**
+     * Will render the card to appear on light or dark backgrounds
+     */
+    theme?: ThemeTypes;
+    /**
+     * How big should the card be
+     */
+    size?: Omit<CardSize, "standard">;
+    /**
+     * Specify the event Date, in both human and Unix format.
+     */
+    date?: EventDate;
+    profile: ProfileProps;
+    link?: string;
+};

package/lib/types/react/src/components/Cards/TextCard/index.d.ts

@@ -1,4 +1,3 @@
-import { FC } from "react";
-import { TextCardProps } from "../Card.props";
-declare const TextCard: FC<TextCardProps>;
-export default TextCard;
+export { default as TextCard } from "./TextCard";
+export type { TextCardProps } from "./TextCard.props";
+export { TextCardArgs } from "./TextCard.args";

package/lib/types/react/src/components/List/List.props.d.ts

@@ -1,5 +1,4 @@
 import { ReactElement } from "react";
-import { HeadingLevel, ListAlignment, ListOrder } from "../../types";
 import { ListItemProps } from "./ListItem.props";
 export interface ListProps {
     /**
@@ -9,11 +8,11 @@ export interface ListProps {
     /**
      * Declare ordered, unordered or unstyled
      */
-    ordered?: ListOrder;
+    ordered?: "unordered" | "ordered" | "unstyled";
     /**
      * Declare horizontal or default
      */
-    alignment?: ListAlignment;
+    alignment?: "default" | "horizontal";
     /**
      * Specify an optional title
      */
@@ -23,9 +22,3 @@ export interface ListProps {
      */
     className?: string;
 }
-export interface ListContextProps {
-    activeItems: string[];
-    alignment?: ListAlignment;
-    ordered?: ListOrder;
-    headingLevel?: HeadingLevel;
-}

package/lib/types/react/src/components/List/ListItem.props.d.ts

@@ -1,10 +1,4 @@
 import { ReactNode } from "react";
-export interface ListItemContextProps {
-    /**
-     * The list item's unique id.
-     */
-    id: string;
-}
 export interface ListItemProps {
     /**
      * Specify the id of the List item.

package/lib/types/react/src/components/index.d.ts

@@ -36,6 +36,6 @@ export { TableOfContents } from "./TableOfContents";
 export { Footer } from "./Footer";
 export { LocalNav } from "./LocalNav";
 export { Navigation } from "./Navigation";
-export { Card, CardGroup } from "./Cards";
+export { CardGroup } from "./Cards/CardGroup";
 export { Breadcrumb } from "./Breadcrumb";
 export { Tabs } from "./Tabs";

package/lib/types/react/src/types/index.d.ts

@@ -16,8 +16,6 @@ export type TooltipThemes = "light" | "dark";
 export type TooltipIconThemes = "light" | "dark";
 export type TooltipAlignment = "top" | "right" | "bottom" | "left";
 export type TooltipPlacement = "negative" | "center" | "positive";
-export type ListAlignment = "default" | "horizontal";
-export type ListOrder = "unordered" | "ordered" | "unstyled";
 export type LoadingStatus = "idle" | "loading" | "loaded";
 export type LoadingSize = "small" | "large";
 export type NotificationPlacement = "dialog" | "inline";
@@ -31,6 +29,10 @@ export type CardSize = "wide" | "standard" | "narrow" | "fluid";
 export type CardCornerType = boolean;
 export type CardAlignment = "left" | "right";
 export type CardTypes = "stat" | "multilink" | "text" | "promo" | "feature" | "detail" | "factlist" | "data";
+export type EventDate = {
+    unix?: string;
+    human?: string;
+};
 export interface FormFieldProps<T> {
     /**
      * The input's onChange callback.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -9,6 +9,27 @@
     "designsystem",
     "components"
   ],
+  "contributors": [
+    {
+      "name": "Justin Smith",
+      "email": "smithj@ilo.org",
+      "url": "https://github.com/justintemps"
+    },
+    {
+      "name": "Prabashwara Seneviratne",
+      "url": "https://www.bash.lk"
+    },
+    {
+      "name": "Shashika Boteju",
+      "email": "Shashikaboteju3@gmail.com",
+      "url": "https://github.com/Shashika6"
+    },
+    {
+      "name": "Giorgi Kapanadze",
+      "email": "doublegkapanadze@gmail.com",
+      "url": "https://github.com/ggkapanadze"
+    }
+  ],
   "homepage": "https://react.ui.ilo.org",
   "repository": {
     "type": "git",
@@ -48,7 +69,6 @@
   "license": "Apache-2.0",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
-  "type": "module",
   "types": "lib/types/react/src/index.d.ts",
   "jest": {
     "moduleNameMapper": {
@@ -75,12 +95,12 @@
     "react-transition-group": "^4.4.1",
     "video.js": "^7.21.2",
     "videojs-youtube": "^3.0.1",
-    "@ilo-org/brand-assets": "0.4.0",
-    "@ilo-org/fonts": "0.1.2",
-    "@ilo-org/styles": "0.14.2",
-    "@ilo-org/icons-react": "0.0.21",
-    "@ilo-org/themes": "0.7.2",
-    "@ilo-org/utils": "0.0.11"
+    "@ilo-org/brand-assets": "0.5.0",
+    "@ilo-org/fonts": "0.2.0",
+    "@ilo-org/icons-react": "0.1.0",
+    "@ilo-org/styles": "0.16.0",
+    "@ilo-org/themes": "0.8.0",
+    "@ilo-org/utils": "0.1.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^23.0.2",
@@ -108,7 +128,7 @@
     "@types/node": "^17.0.45",
     "@types/react": "^17.0.11",
     "@types/react-dom": "^17.0.20",
-    "@types/video.js": "7",
+    "@types/video.js": "7.3.57",
     "http-server": "^14.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-environment-jsdom": "27.5.1",
@@ -133,9 +153,9 @@
     "ts-jest": "^29.1.1",
     "tslib": "^2.3.1",
     "vite": "^4.5.2",
-    "@ilo-org/eslint-config": "0.1.0",
-    "@ilo-org/prettier-config": "0.0.2",
-    "@ilo-org/typescript-config": "0.0.1"
+    "@ilo-org/eslint-config": "0.2.0",
+    "@ilo-org/prettier-config": "0.1.0",
+    "@ilo-org/typescript-config": "0.1.0"
   },
   "peerDependencies": {
     "react": ">16",

package/public/react.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-10.5 -9.45 21 18.9">
+  <circle r="2" fill="#61DBFB" />
+  <g stroke="#61DBFB">
+    <ellipse rx="10" ry="4.5" />
+    <ellipse rx="10" ry="4.5" transform="rotate(60)" />
+    <ellipse rx="10" ry="4.5" transform="rotate(120)" />
+  </g>
+</svg>

package/rollup.config.mjs

@@ -27,10 +27,12 @@ const config = {
     {
       dir: "lib/esm",
       format: "esm",
+      exports: "auto",
     },
     {
       dir: "lib/cjs",
       format: "cjs",
+      exports: "auto",
     },
   ],
 };

package/src/__tests__/Accordion.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { composeStories } from "@storybook/react";
+import * as stories from "../stories/Accordion/Accordion.stories";
+
+const { Default: AccordionLarge } = composeStories(stories);
+
+describe("<Accordion>", () => {
+  it("Expect button to exist and aria expanded value to change on accordion button click.", () => {
+    render(<AccordionLarge />);
+    const buttonElement = screen.getAllByRole("button");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0].getAttribute("aria-expanded")).toBe("true");
+    fireEvent.click(buttonElement[0]);
+    expect(buttonElement[0].getAttribute("aria-expanded")).toBe("false");
+  });
+});

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")).toContain(
+      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.link} />);
+    const buttonElement = screen.getAllByRole("link");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0]).toHaveAttribute("href", buttonArgs.link.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.link} />);
+    const buttonElement = screen.getAllByRole("link");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0]).toHaveAttribute("target", buttonArgs.link.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,43 @@
+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.baseArgs} />);
+    expect(container.children[0]).not.toBeNull();
+    const headlineElement = document.querySelector('[class*="--headline"]');
+    console.log(headlineElement);
+    expect(headlineElement?.textContent).toEqual(
+      calloutArgs.baseArgs.headline as string
+    );
+  });
+
+  it("Should render Callout copy with content.", () => {
+    const { container } = render(<Callout {...calloutArgs.baseArgs} />);
+    expect(container.children[0]).not.toBeNull();
+    const copyElement = document.querySelector('[class*="--copy"]');
+    expect(copyElement?.textContent).toEqual(calloutArgs.baseArgs.copy);
+  });
+
+  it("Should render `button` with correct label from prop toggleClosedLabel", () => {
+    render(<Callout {...calloutArgs.error} />);
+    const buttonElement = screen.getAllByRole("button");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0].textContent).toEqual(
+      calloutArgs.error.toggleClosedLabel
+    );
+  });
+
+  it("Should open the callout on button click", () => {
+    const { container } = render(<Callout {...calloutArgs.error} />);
+    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.getByLabelText("Select a country" as string), {
+      target: { value: "CH" },
+    });
+    const chosenoption = document.querySelector('option[value="CH"]');
+    expect((chosenoption as HTMLOptionElement).selected).toBeTruthy();
+  });
+
+  it('calls "onChange" prop on button click', () => {
+    const handleChange = jest.fn();
+    render(<Dropdown {...dropdownArgs.basic} onChange={handleChange} />);
+    fireEvent.change(screen.getByLabelText("Select a country" as string), {
+      target: { value: "CH" },
+    });
+    expect(handleChange).toHaveBeenCalled();
+  });
+});

package/src/__tests__/Heading.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from "@testing-library/react";
+import { composeStories } from "@storybook/react";
+import headingArgs from "../components/Heading/Heading.args";
+import * as stories from "../stories/Heading/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__/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} />);
+    expect(container).not.toBeNull();
+    expect(container.querySelector("img")?.getAttribute("src")).toEqual(
+      imageArgs.url?.[0].src
+    );
+  });
+
+  it("Should render `img` with correct image alt", () => {
+    const { container } = render(<Image {...imageArgs} />);
+    expect(container).not.toBeNull();
+    expect(container.querySelector("img")?.getAttribute("alt")).toEqual(
+      imageArgs.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,25 @@
+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();
+  });
+
+  it("Should render `ul` with some items.", () => {
+    const { container } = render(<List {...listArgs.unordered} />);
+    expect(container).not.toBeNull();
+  });
+
+  it("Should render `ul` horizontally with some items.", () => {
+    const { container } = render(<List {...listArgs.horizontal} />);
+    expect(container).not.toBeNull();
+  });
+
+  it("Should render `ul` unstyled with some items.", () => {
+    const { container } = render(<List {...listArgs.unstyled} />);
+    expect(container).not.toBeNull();
+  });
+});

package/src/__tests__/Loading.test.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();
+  });
+});