@ilo-org/react 0.14.0 → 0.14.1

package/src/__tests__/Heading.test.tsx

@@ -1,51 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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();
-  });
-});

package/src/__tests__/Pagination.test.tsx

@@ -1,58 +0,0 @@
-import { render } from "@testing-library/react";
-import { Pagination } from "../components/Pagination";
-import paginationArgs from "../components/Pagination/Pagination.args";
-
-describe("<Pagination>", () => {
-  it("Pagination link should render with a disable class", () => {
-    const { container } = render(
-      <Pagination {...paginationArgs.firstDisabled} />
-    );
-    expect(container.children[0]).not.toBeNull();
-    const previousPagination = document.querySelector('a[class*="--disable"]');
-    expect(previousPagination).not.toBeNull();
-  });
-
-  it("First link should match the args", () => {
-    render(<Pagination {...paginationArgs.firstDisabled} />);
-    const pagination = document.querySelector('a[class*="--first-page"]');
-    expect(pagination).not.toBeNull();
-    expect(pagination?.getAttribute("href")).toEqual(
-      expect.stringContaining(
-        paginationArgs.firstDisabled.firstPageUrl as string
-      )
-    );
-  });
-
-  it("Previous link should match the args", () => {
-    render(<Pagination {...paginationArgs.firstDisabled} />);
-    const pagination = document.querySelector('a[class*="--prev-page"]');
-    expect(pagination).not.toBeNull();
-    expect(pagination?.getAttribute("href")).toEqual(
-      expect.stringContaining(
-        paginationArgs.firstDisabled.prevPageUrl as string
-      )
-    );
-  });
-
-  it("Next link should match the args", () => {
-    render(<Pagination {...paginationArgs.firstDisabled} />);
-    const pagination = document.querySelector('a[class*="--next-page"]');
-    expect(pagination).not.toBeNull();
-    expect(pagination?.getAttribute("href")).toEqual(
-      expect.stringContaining(
-        paginationArgs.firstDisabled.nextPageUrl as string
-      )
-    );
-  });
-
-  it("Last link should match the args", () => {
-    render(<Pagination {...paginationArgs.firstDisabled} />);
-    const pagination = document.querySelector('a[class*="--last-page"]');
-    expect(pagination).not.toBeNull();
-    expect(pagination?.getAttribute("href")).toEqual(
-      expect.stringContaining(
-        paginationArgs.firstDisabled.lastPageUrl as string
-      )
-    );
-  });
-});

package/src/__tests__/Profile.test.tsx

@@ -1,48 +0,0 @@
-import { render } from "@testing-library/react";
-import { Profile } from "../components/Profile";
-import profileArgs from "../components/Profile/Profile.args";
-
-describe("<Profile>", () => {
-  it("Should render Profile with content from name prop.", () => {
-    const { container } = render(<Profile {...profileArgs.basic} />);
-    expect(container.children[0]).not.toBeNull();
-    const nameElement = document.querySelector('[class*="--name"]');
-    expect(nameElement?.textContent).toEqual(profileArgs?.basic?.name);
-  });
-
-  it("Should render Profile with content from avatar prop.", () => {
-    const { container } = render(<Profile {...profileArgs.basic} />);
-    expect(container.children[0]).not.toBeNull();
-    const imgElement = document.querySelector('[class*="--avatar"]');
-    expect(imgElement).toHaveAttribute("src", profileArgs?.basic?.avatar);
-  });
-
-  it("Should render Profile with content from role prop.", () => {
-    const { container } = render(<Profile {...profileArgs.hasrole} />);
-    expect(container.children[0]).not.toBeNull();
-    const roleElement = document.querySelector('[class*="--role"]');
-    expect(roleElement?.textContent).toEqual(profileArgs?.hasrole?.role);
-  });
-
-  it("Should render Profile with content from description prop.", () => {
-    const { container } = render(<Profile {...profileArgs.hasdescription} />);
-    expect(container.children[0]).not.toBeNull();
-    const descriptionElement = document.querySelector(
-      '[class*="--description"]'
-    );
-    expect(descriptionElement?.textContent).toEqual(
-      profileArgs?.hasdescription?.description
-    );
-  });
-
-  it("Should render Profile with content from link prop.", () => {
-    const { container } = render(<Profile {...profileArgs.haslink} />);
-    expect(container.children[0]).not.toBeNull();
-    const linkElement = document.querySelector('[class*="--link"] a');
-    expect(linkElement?.textContent).toEqual(profileArgs?.haslink?.link?.label);
-    expect(linkElement).toHaveAttribute(
-      "href",
-      profileArgs?.haslink?.link?.url
-    );
-  });
-});

package/src/__tests__/ReadMore.test.tsx

@@ -1,43 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { ReadMore } from "../components/ReadMore";
-import readMoreArgs from "../components/ReadMore/ReadMore.args";
-
-describe("<ReadMore>", () => {
-  it("Should render RichText `div` with content.", () => {
-    const { container } = render(<ReadMore {...readMoreArgs.base} />);
-    expect(container.children[0]).not.toBeNull();
-    const richTextElement = document.querySelector('div[class*="--richtext"]');
-    const excerpt = new DOMParser().parseFromString(
-      readMoreArgs.base.excerpt,
-      "text/html"
-    ).documentElement.textContent;
-    expect(richTextElement?.textContent).toEqual(excerpt);
-  });
-
-  it("Should render `button` with correct label from prop buttonlabel", () => {
-    render(<ReadMore {...readMoreArgs.base} />);
-    const buttonElement = screen.getAllByRole("button");
-    expect(buttonElement).not.toBeNull();
-    expect(buttonElement[0].textContent).toEqual(
-      readMoreArgs?.base?.buttonlabel?.closed
-    );
-  });
-
-  it("Should change contents of RichText `div` with new content.", () => {
-    render(<ReadMore {...readMoreArgs.base} />);
-    const richTextElement = document.querySelector(
-      'div[class*="--richtext"]'
-    ) as Element;
-    const fulltext = new DOMParser().parseFromString(
-      readMoreArgs.open.fulltext,
-      "text/html"
-    ).documentElement.textContent;
-    userEvent.click(
-      screen.getByText(readMoreArgs?.base?.buttonlabel?.closed as string, {
-        selector: "button",
-      })
-    );
-    expect(richTextElement.textContent).toEqual(fulltext);
-  });
-});

package/src/__tests__/RichText.test.tsx

@@ -1,16 +0,0 @@
-import { render } from "@testing-library/react";
-import { RichText } from "../components/RichText";
-import richTextArgs from "../components/RichText/richText.args";
-
-describe("<RichText>", () => {
-  it("Should render `div` with content.", () => {
-    const { container } = render(<RichText {...richTextArgs.richtext} />);
-    // Parse the content as a domstring and get the text content
-    const textContent = new DOMParser().parseFromString(
-      richTextArgs.richtext.content,
-      "text/html"
-    ).documentElement.textContent;
-    expect(container.children[0]).not.toBeNull();
-    expect(container.children[0].textContent).toEqual(textContent);
-  });
-});

package/src/__tests__/SearchField.test.tsx

@@ -1,35 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { SearchField } from "../components/SearchField";
-import searchFieldArgs from "../components/SearchField/SearchField.args";
-
-describe("<SearchField>", () => {
-  it("Should render `search field` with correct label from prop input.placeholder", () => {
-    const { container } = render(
-      <SearchField {...searchFieldArgs.searchfield} />
-    );
-    expect(container.children[0]).not.toBeNull();
-    const inputElement = screen.getByPlaceholderText(
-      searchFieldArgs.searchfield.input?.placeholder as string
-    );
-    expect(inputElement).not.toBeNull();
-  });
-
-  it("Should render `search field input` with disabled attribute", () => {
-    const { container } = render(
-      <SearchField {...searchFieldArgs.searchfielddisabled} />
-    );
-    expect(container.children[0]).not.toBeNull();
-    const inputElement = screen.getByPlaceholderText(
-      searchFieldArgs.searchfielddisabled.input?.placeholder as string
-    );
-    expect(inputElement).toHaveAttribute("disabled", "");
-  });
-
-  it('calls "callback" prop on button click', () => {
-    const onClick = jest.fn();
-    render(<SearchField {...searchFieldArgs.searchfield} callback={onClick} />);
-    const buttonElement = screen.getAllByRole("button");
-    fireEvent.click(buttonElement[0]);
-    expect(onClick).toHaveBeenCalled();
-  });
-});

package/src/__tests__/TableOfContents.test.tsx

@@ -1,12 +0,0 @@
-import { render } from "@testing-library/react";
-import { TableOfContents } from "../components/TableOfContents";
-import tableOfContentsArgs from "../components/TableOfContents/TableOfContents.args";
-
-describe("<TableOfContents>", () => {
-  it("Should render `ul` with some items.", () => {
-    const { container } = render(
-      <TableOfContents {...tableOfContentsArgs.toc} />
-    );
-    expect(container).not.toBeNull();
-  });
-});

package/src/__tests__/Tag.test.tsx

@@ -1,10 +0,0 @@
-import { render } from "@testing-library/react";
-import { TagSet } from "../components/Tag";
-import tagSetArgs from "../components/Tag/TagSet.args";
-
-describe("<TagSet>", () => {
-  it("Should render `button` with correct class name from type prop", () => {
-    const { container } = render(<TagSet {...tagSetArgs.tag} />);
-    expect(container).not.toBeNull();
-  });
-});

package/src/components/Accordion/Accordion.args.ts

@@ -1,16 +0,0 @@
-import { AccordionProps } from "./Accordion.props";
-
-const large: AccordionProps = {
-  onButtonClick: (e) => {
-    console.log(e.target);
-  },
-  allowMultipleExpanded: true,
-  defaultAccordionsExpanded: ["l1", "l2"],
-  children: undefined,
-};
-
-/**
- * Sample prop definitions for Accordions's enumerable properties (imported in stories and tests).
- */
-
-export { large };

package/src/components/Accordion/Accordion.props.ts

@@ -1,41 +0,0 @@
-import { Dispatch, MouseEvent, ReactElement, SetStateAction } from "react";
-export { default as AccordionItem } from "./AccordionItem";
-import { getUpdatedItems } from "@ilo-org/utils";
-import { AccordionItemProps } from "./AccordionItem.props";
-
-export interface AccordionProps {
-  /**
-   * Specify the content of your Accordion.
-   */
-  children?:
-    | ReactElement<AccordionItemProps>
-    | Array<ReactElement<AccordionItemProps>>;
-
-  /**
-   * Callback to onButtonClick event;
-   */
-  onButtonClick?: (e: MouseEvent<HTMLButtonElement>, i: any) => void;
-
-  /**
-   * Allow multiple accordions to be expanded at once, default value is false
-   */
-  allowMultipleExpanded?: boolean;
-
-  /**
-   * Default accordions expanded on first load
-   */
-  defaultAccordionsExpanded?: string[];
-
-  /**
-   * Specify an optional className to be added to your accordion.
-   */
-  className?: string;
-}
-
-export interface AccordionContextProps {
-  activeItems: string[];
-  getUpdatedItems: typeof getUpdatedItems;
-  setActiveItems: Dispatch<SetStateAction<string[]>>;
-  allowMultipleExpanded: boolean;
-  onButtonClick?: (e: MouseEvent<HTMLButtonElement>, i: any) => void;
-}

package/src/components/Accordion/Accordion.tsx

@@ -1,62 +0,0 @@
-import { getUpdatedItems } from "@ilo-org/utils";
-import classNames from "classnames";
-import { Children, FC, ReactElement, useEffect, useState } from "react";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { checkArrayDuplicates } from "../../utils/checkArrayDuplicates";
-import { AccordionProps } from "./Accordion.props";
-import { AccordionContext } from "./AccordionCtx";
-
-const Accordion: FC<AccordionProps> = ({
-  children,
-  allowMultipleExpanded = false,
-  onButtonClick,
-  defaultAccordionsExpanded = [],
-  className,
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--accordion`;
-  const [activeItems, setActiveItems] = useState<string[]>([]);
-
-  const accordionClasses = classNames(className, {
-    [baseClass]: true,
-  });
-
-  const defaultAccordionsExpandedString = JSON.stringify(
-    defaultAccordionsExpanded
-  );
-
-  useEffect(() => {
-    const expandedOnLoad = allowMultipleExpanded
-      ? defaultAccordionsExpanded
-      : defaultAccordionsExpanded.length > 0
-      ? [defaultAccordionsExpanded[0]]
-      : defaultAccordionsExpanded;
-    setActiveItems(expandedOnLoad);
-  }, [defaultAccordionsExpandedString, allowMultipleExpanded]); //eslint-disable-line react-hooks/exhaustive-deps
-
-  if (children) {
-    const ids: string[] = [];
-    Children.forEach(children, (child: ReactElement) => {
-      ids.push(child.props.id);
-    });
-    if (checkArrayDuplicates(ids)) {
-      console.warn("Warning: Accordion items must have unique ids.");
-    }
-  }
-
-  return (
-    <AccordionContext.Provider
-      value={{
-        activeItems,
-        setActiveItems,
-        getUpdatedItems,
-        allowMultipleExpanded,
-        onButtonClick,
-      }}
-    >
-      <ul className={accordionClasses}>{children}</ul>
-    </AccordionContext.Provider>
-  );
-};
-
-export default Accordion;

package/src/components/Accordion/AccordionButton.props.ts

@@ -1,13 +0,0 @@
-import { ReactNode } from "react";
-
-export default interface AccordionButtonProps {
-  /**
-   * Specify the content of your Button.
-   */
-  children: ReactNode;
-
-  /**
-   * Specify an optional className to be added to your Button.
-   */
-  className?: string;
-}

package/src/components/Accordion/AccordionButton.tsx

@@ -1,58 +0,0 @@
-import classNames from "classnames";
-import { FC, MouseEvent, useContext } from "react";
-import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { default as AccordionButtonProps } from "./AccordionButton.props";
-import { AccordionContext, AccordionItemContext } from "./AccordionCtx";
-
-const AccordionButton: FC<AccordionButtonProps> = ({
-  children,
-  className,
-  ...rest
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--accordion--button`;
-
-  const {
-    activeItems,
-    setActiveItems,
-    getUpdatedItems,
-    allowMultipleExpanded,
-    onButtonClick,
-  } = useContext(AccordionContext);
-  const { id } = useContext(AccordionItemContext);
-  const open = activeItems.indexOf(id) > -1;
-
-  const accordionButtonClasses = classNames(className, {
-    [baseClass]: true,
-  });
-
-  /**
-   * On click, get id of clicked item, and set that item in state to 'open', all others to 'closed'
-   */
-  const handleClick = (e: MouseEvent<HTMLButtonElement>, id: string) => {
-    setActiveItems(
-      getUpdatedItems({ id, itemStatuses: activeItems, allowMultipleExpanded })
-    );
-    if (onButtonClick) {
-      onButtonClick(e, id);
-    }
-    e.currentTarget.blur();
-  };
-
-  return (
-    <div className={`${prefix}--h3`}>
-      <button
-        className={accordionButtonClasses}
-        aria-expanded={open}
-        onClick={(e) => handleClick(e, id)}
-        aria-controls={`panel-${id}`}
-        id={`button-${id}`}
-        {...rest}
-      >
-        {children}
-      </button>
-    </div>
-  );
-};
-
-export default AccordionButton;

package/src/components/Accordion/AccordionCtx.ts

@@ -1,9 +0,0 @@
-import { createContext } from "react";
-import { AccordionContextProps } from "./Accordion.props";
-import { AccordionItemContextProps } from "./AccordionItem.props";
-
-export const AccordionContext = createContext({} as AccordionContextProps);
-
-export const AccordionItemContext = createContext(
-  {} as AccordionItemContextProps
-);

package/src/components/Accordion/AccordionItem.props.ts

@@ -1,25 +0,0 @@
-import { ReactNode } from "react";
-
-export interface AccordionItemContextProps {
-  /**
-   * The accordion item's unique id.
-   */
-  id: string;
-}
-
-export interface AccordionItemProps {
-  /**
-   * Specify the id of the accordion item.
-   */
-  id: string;
-
-  /**
-   * Specify the content of your Button.
-   */
-  children: ReactNode;
-
-  /**
-   * Specify an optional className to be added to your Button.
-   */
-  className?: string;
-}