@ilo-org/react 0.0.1

package/src/__tests__/Pagination.test.tsx

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

@@ -0,0 +1,48 @@
+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"]');
+    expect(linkElement?.textContent).toEqual(profileArgs?.haslink?.link?.label);
+    expect(linkElement).toHaveAttribute(
+      "href",
+      profileArgs?.haslink?.link?.url
+    );
+  });
+});

package/src/__tests__/ReadMore.test.tsx

@@ -0,0 +1,42 @@
+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.closedatstart} />);
+    expect(container.children[0]).not.toBeNull();
+    const richTextElement = document.querySelector('div[class*="--richtext"]');
+    expect(richTextElement?.textContent).toEqual(
+      readMoreArgs.closedatstart.excerpt
+    );
+  });
+
+  it("Should render `button` with correct label from prop buttonlabel", () => {
+    render(<ReadMore {...readMoreArgs.closedatstart} />);
+    const buttonElement = screen.getAllByRole("button");
+    expect(buttonElement).not.toBeNull();
+    expect(buttonElement[0].textContent).toEqual(
+      readMoreArgs?.closedatstart?.buttonlabel?.closed
+    );
+  });
+
+  it("Should change contents of RichText `div` with new content.", () => {
+    render(<ReadMore {...readMoreArgs.closedatstart} />);
+    const richTextElement = document.querySelector(
+      'div[class*="--richtext"]'
+    ) as Element;
+    userEvent.click(
+      screen.getByText(
+        readMoreArgs?.closedatstart?.buttonlabel?.closed as string,
+        {
+          selector: "button",
+        }
+      )
+    );
+    expect(richTextElement.textContent).toEqual(
+      readMoreArgs.closedatstart.fulltext
+    );
+  });
+});

package/src/__tests__/RichText.test.tsx

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

@@ -0,0 +1,35 @@
+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
+    );
+    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
+    );
+    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

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

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

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

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

@@ -0,0 +1,39 @@
+import { MouseEvent } from "react";
+export { default as AccordionItem } from "./AccordionItem";
+import { headingLevel } from "../../types";
+import { getUpdatedItems } from "@ilo-org/utils";
+
+export interface AccordionProps {
+  /**
+   * Specify the content of your Accordion.
+   */
+  children: ReactElement<AccordionItem> | Array<ReactElement<AccordionItem>>;
+
+  /**
+   * 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: getUpdatedItems;
+  setActiveItems: Dispatch<SetStateAction<string[]>>;
+  allowMultipleExpanded: boolean;
+  onButtonClick?: (e: MouseEvent<HTMLButtonElement>, i: any) => void;
+}

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,70 @@
+import {
+  useState,
+  useEffect,
+  createContext,
+  FC,
+  ReactElement,
+  Children,
+} from "react";
+import classNames from "classnames";
+import { getUpdatedItems } from "@ilo-org/utils";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { AccordionProps, AccordionContextProps } from "./Accordion.props";
+import { checkArrayDuplicates } from "../../utils/checkArrayDuplicates";
+
+export const AccordionContext = createContext({} as AccordionContextProps);
+
+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.d.ts

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

@@ -0,0 +1,60 @@
+// prettier-ignore
+import { FC, useContext, MouseEvent } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { default as AccordionButtonProps } from "./AccordionButton.props";
+import { AccordionContext } from "./Accordion";
+import { AccordionItemContext } from "./AccordionItem";
+
+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/AccordionItem.props.d.ts

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

package/src/components/Accordion/AccordionItem.tsx

@@ -0,0 +1,33 @@
+import { FC, createContext } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import {
+  AccordionItemProps,
+  AccordionItemContextProps,
+} from "./AccordionItem.props";
+
+export const AccordionItemContext = createContext(
+  {} as AccordionItemContextProps
+);
+
+const AccordionItem: FC<AccordionItemProps> = ({
+  children,
+  id,
+  className,
+  ...rest
+}) => {
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--accordion--item`;
+  const accordionItemClasses = classNames(className, {
+    [baseClass]: true,
+  });
+  return (
+    <AccordionItemContext.Provider value={{ id }}>
+      <li className={accordionItemClasses} {...rest}>
+        {children}
+      </li>
+    </AccordionItemContext.Provider>
+  );
+};
+
+export default AccordionItem;

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

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+
+export default interface AccordionPanelProps {
+  /**
+   * Specify the content of your Button.
+   */
+  children: ReactNode;
+
+  /**
+   * Specify an optional className to be added to your Button.
+   */
+  className?: string;
+
+  /**
+   * Duration of the collapse animation in milliseconds, to ensure that
+   * finishing callbacks are fired even if the original browser transition end
+   * events are canceled
+   */
+  timeout?: number;
+}

package/src/components/Accordion/AccordionPanel.tsx

@@ -0,0 +1,47 @@
+import { FC, useContext, useLayoutEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import useGlobalSettings from "../../hooks/useGlobalSettings";
+import { default as AccordionPanelProps } from "./AccordionPanel.props";
+import { AccordionContext } from "./Accordion";
+import { AccordionItemContext } from "./AccordionItem";
+
+const AccordionPanel: FC<AccordionPanelProps> = ({
+  children,
+  className,
+  timeout = 600,
+  ...rest
+}) => {
+  const { activeItems } = useContext(AccordionContext);
+  const { id } = useContext(AccordionItemContext);
+  const [panelHeight, setPanelHeight] = useState(0);
+  const open = activeItems.indexOf(id) > -1;
+  const { prefix } = useGlobalSettings();
+  const baseClass = `${prefix}--accordion--panel`;
+
+  const accordionaPanelClasses = classNames(className, {
+    [baseClass]: true,
+    [`${baseClass}--open`]: open,
+  });
+
+  const ref = useRef<HTMLInputElement>();
+
+  useLayoutEffect(() => {
+    ref.current && setPanelHeight(ref.current.scrollHeight);
+  });
+
+  return (
+    <div
+      className={accordionaPanelClasses}
+      id={`panel-${id}`}
+      aria-labelledby={`button-${id}`}
+      role="region"
+      ref={ref as any}
+      style={{ ["--height" as any]: `${panelHeight}px` }}
+      {...rest}
+    >
+      <div className={`${prefix}--accordion--innerpanel`}>{children}</div>
+    </div>
+  );
+};
+
+export default AccordionPanel;

package/src/components/Accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as AccordionButton } from "./AccordionButton";
+export { default as AccordionPanel } from "./AccordionPanel";
+export { default as AccordionItem } from "./AccordionItem";
+export { default as Accordion } from "./Accordion";