@nypl/design-system-react-components 0.23.4 → 0.25.1

package/src/components/Tabs/Tabs.test.tsx

@@ -0,0 +1,264 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import userEvent from "@testing-library/user-event";
+
+import { Tabs, TabList, Tab, TabPanels, TabPanel } from "./Tabs";
+
+export const animalCrossing = [
+  {
+    label: "Tom Nook",
+    content: (
+      <p>
+        Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional character
+        in the Animal Crossing series who operates the village store.
+      </p>
+    ),
+  },
+  {
+    label: "Isabelle",
+    content:
+      "Isabelle, known as Shizue in Japan, is a fictional character " +
+      "from the Animal Crossing series of video games. She is a kindly Shih " +
+      "Tzu that debuted in the 2012 release Animal Crossing: New Leaf, where " +
+      "she serves as the secretary to the player character.",
+  },
+  {
+    label: "K.K. Slider",
+    content:
+      "<p>Totakeke, more commonly known as <b>K.K. Slider or K.K.</b>, is a " +
+      "fictional character within the Animal Crossing franchise. One of the " +
+      "franchise's most popular characters, he debuted in the title Animal " +
+      "Crossing, and has appeared in every installment since.</p>",
+  },
+];
+
+describe("Tabs Accessibility", () => {
+  it("passes axe accessibility test with the data prop", async () => {
+    const { container } = render(<Tabs contentData={animalCrossing} />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("passes axe accessibility test with children components", async () => {
+    const { container } = render(
+      <Tabs>
+        <TabList>
+          <Tab>Tom Nook</Tab>
+          <Tab>Isabelle</Tab>
+          <Tab>K.K. Slider</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            Tom Nook, known in Japan as Tanukichi, is a fictional character in
+            the Animal Crossing series who operates the village store.
+          </TabPanel>
+          <TabPanel>
+            Isabelle, known as Shizue in Japan, is a fictional character from
+            the Animal Crossing series of video games. She is a kindly Shih Tzu
+            that debuted in the 2012 release Animal Crossing: New Leaf, where
+            she serves as the secretary to the player character.
+          </TabPanel>
+          <TabPanel>
+            Totakeke, more commonly known as K.K. Slider or K.K., is a fictional
+            character within the Animal Crossing franchise. One of the
+            franchise's most popular characters, he debuted in the title Animal
+            Crossing, and has appeared in every installment since.
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Tabs", () => {
+  const getTabByName = (name) => screen.getByRole("tab", { name });
+
+  it("renders all tabs but only one panel at a time with children", () => {
+    render(
+      <Tabs>
+        <TabList>
+          <Tab>Tom Nook</Tab>
+          <Tab>Isabelle</Tab>
+          <Tab>K.K. Slider</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            Tom Nook, known in Japan as Tanukichi, is a fictional character in
+            the Animal Crossing series who operates the village store.
+          </TabPanel>
+          <TabPanel>
+            Isabelle, known as Shizue in Japan, is a fictional character from
+            the Animal Crossing series of video games. She is a kindly Shih Tzu
+            that debuted in the 2012 release Animal Crossing: New Leaf, where
+            she serves as the secretary to the player character.
+          </TabPanel>
+          <TabPanel>
+            Totakeke, more commonly known as K.K. Slider or K.K., is a fictional
+            character within the Animal Crossing franchise. One of the
+            franchise's most popular characters, he debuted in the title Animal
+            Crossing, and has appeared in every installment since.
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    );
+
+    expect(getTabByName("Tom Nook")).toBeInTheDocument();
+    expect(getTabByName("Isabelle")).toBeInTheDocument();
+    expect(getTabByName("K.K. Slider")).toBeInTheDocument();
+    expect(
+      screen.getByText(/Tom Nook, known in Japan as Tanukichi/i)
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText(/Isabelle, known as Shizue in Japan,/i)
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(
+        /Totakeke, more commonly known as K.K. Slider or K.K./i
+      )
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders all tabs but only one visible panel at a time with data prop", () => {
+    render(<Tabs contentData={animalCrossing} />);
+    expect(getTabByName("Tom Nook")).toBeInTheDocument();
+    expect(getTabByName("Isabelle")).toBeInTheDocument();
+    expect(getTabByName("K.K. Slider")).toBeInTheDocument();
+    expect(
+      screen.getByText(/known in Japan as Tanukichi/i)
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText(/Isabelle, known as Shizue in Japan,/i)
+    ).not.toBeVisible();
+    expect(
+      screen.queryByText(/Totakeke, more commonly known as/i)
+    ).not.toBeVisible();
+  });
+
+  it("switches between tabs", () => {
+    render(<Tabs contentData={animalCrossing} />);
+    const isabelleTab = getTabByName("Isabelle");
+    const kkSliderTab = getTabByName("K.K. Slider");
+
+    expect(
+      screen.getByText(/known in Japan as Tanukichi/i)
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText(/Isabelle, known as Shizue in Japan,/i)
+    ).not.toBeVisible();
+    expect(
+      screen.queryByText(/Totakeke, more commonly known as/i)
+    ).not.toBeVisible();
+
+    userEvent.click(isabelleTab);
+    expect(isabelleTab).toHaveAttribute("aria-selected", "true");
+
+    expect(
+      screen.queryByText(/known in Japan as Tanukichi/i)
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(/Isabelle, known as Shizue in Japan,/i)
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText(/Totakeke, more commonly known/i)
+    ).not.toBeVisible();
+
+    userEvent.click(kkSliderTab);
+    expect(kkSliderTab).toHaveAttribute("aria-selected", "true");
+
+    expect(
+      screen.queryByText(/known in Japan as Tanukichi/i)
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(/Isabelle, known as Shizue in Japan,/i)
+    ).not.toBeVisible();
+    expect(
+      screen.queryByText(/Totakeke, more commonly known/i)
+    ).toBeInTheDocument();
+  });
+
+  it("renders the specified initial index value", () => {
+    render(<Tabs contentData={animalCrossing} defaultIndex={2} />);
+    let tomTab = getTabByName("Tom Nook");
+    let isabelleTab = getTabByName("Isabelle");
+    let kkSliderTab = getTabByName("K.K. Slider");
+
+    expect(tomTab).toHaveAttribute("aria-selected", "false");
+    expect(isabelleTab).toHaveAttribute("aria-selected", "false");
+    expect(kkSliderTab).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("invokes the callback function", () => {
+    let selectedIndex = 0;
+    const onChange = (index) => (selectedIndex = index);
+
+    render(<Tabs contentData={animalCrossing} onChange={onChange} />);
+
+    const tomTab = getTabByName("Tom Nook");
+    const isabelleTab = getTabByName("Isabelle");
+    const kkSliderTab = getTabByName("K.K. Slider");
+
+    userEvent.click(kkSliderTab);
+    expect(selectedIndex).toEqual(2);
+
+    userEvent.click(tomTab);
+    expect(selectedIndex).toEqual(0);
+
+    userEvent.click(isabelleTab);
+    expect(selectedIndex).toEqual(1);
+  });
+
+  it("should throw warning when both the 'data' probp and children are passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      <Tabs contentData={animalCrossing}>
+        <TabList>
+          <Tab>Tom Nook</Tab>
+          <Tab>Isabelle</Tab>
+          <Tab>K.K. Slider</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            Tom Nook, known in Japan as Tanukichi, is a fictional character in
+            the Animal Crossing series who operates the village store.
+          </TabPanel>
+          <TabPanel>
+            Isabelle, known as Shizue in Japan, is a fictional character from
+            the Animal Crossing series of video games. She is a kindly Shih Tzu
+            that debuted in the 2012 release Animal Crossing: New Leaf, where
+            she serves as the secretary to the player character.
+          </TabPanel>
+          <TabPanel>
+            Totakeke, more commonly known as K.K. Slider or K.K., is a fictional
+            character within the Animal Crossing franchise. One of the
+            franchise's most popular characters, he debuted in the title Animal
+            Crossing, and has appeared in every installment since.
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "Only pass children or data in the `data` props but not both."
+    );
+  });
+
+  it("should throw warning when more than six object tabs are passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      <Tabs
+        contentData={[
+          ...animalCrossing,
+          ...[
+            { label: "Another character 1", content: "Text" },
+            { label: "Another character 2", content: "Text" },
+            { label: "Another character 3", content: "Text" },
+            { label: "Another character 4", content: "Text" },
+          ],
+        ]}
+      />
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "We recommend to use no more than six tabs. If more than six tabs are needed, consider other navigational patterns."
+    );
+  });
+});

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,220 @@
+import * as React from "react";
+import {
+  Box,
+  Tabs as ChakraTabs,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+
+import generateUUID from "../../helpers/generateUUID";
+import { IconNames, IconRotationTypes, IconSizes } from "../Icons/IconTypes";
+import Icon from "../Icons/Icon";
+import { ButtonTypes } from "../Button/ButtonTypes";
+import Button from "../Button/Button";
+
+// The general shape of the data object for each Tab.
+export interface TabsContentDataProps {
+  label: string;
+  content: string | React.ReactNode;
+}
+
+export interface TabsProps {
+  /** Array of data to display */
+  contentData?: TabsContentDataProps[];
+  /** The index of the tab to display for controlled situations. */
+  defaultIndex?: number;
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
+  /** The callback function invoked on every tab change event. */
+  onChange?: (index: number) => any;
+  /** Render a hash in the url for each tab. Only available when data is
+   * passed through the `data` props. */
+  useHash?: boolean;
+}
+
+/**
+ * An internal function used to update the hash in the URL.
+ * This function is only used when `useHash` is `true`.
+ */
+const onClickHash = (tabHash) => {
+  window.location.hash = tabHash;
+};
+
+/**
+ * This returns an object with `Tab` and `TabPanel` components to render in
+ * `TabList` and `TabPanels` components respectively.
+ */
+const getElementsFromContentData = (data, useHash) => {
+  const tabs = [];
+  const panels = [];
+
+  if (!data?.length) {
+    return {};
+  }
+
+  if (data?.length > 6) {
+    console.warn(
+      "We recommend to use no more than six tabs. If more than six tabs are " +
+        "needed, consider other navigational patterns."
+    );
+  }
+
+  data.map((tab, index) => {
+    let tempPanel;
+    // For URL hash enabled tabs, we need to add a custom `onClick` to handle the URL hash.
+    const tempTab = (
+      <Tab
+        fontSize={["0", null, "1"]}
+        key={index}
+        onClick={useHash ? () => onClickHash(`tab${index + 1}`) : null}
+      >
+        {tab.label}
+      </Tab>
+    );
+    if (typeof tab.content === "string") {
+      tempPanel = (
+        <TabPanel
+          key={index}
+          dangerouslySetInnerHTML={{ __html: tab.content }}
+        />
+      );
+    } else {
+      tempPanel = <TabPanel key={index}>{tab.content}</TabPanel>;
+    }
+
+    tabs.push(tempTab);
+    panels.push(tempPanel);
+  });
+
+  return { tabs, panels };
+};
+
+/**
+ * This returns an object with `TabList` and `TabPanels` components to help format
+ * the DOM when building up the `Tabs` component using child component.
+ */
+const getElementsFromChildren = (children) => {
+  const tabs = [];
+  const panels = [];
+
+  if (!children?.length) {
+    return {};
+  }
+
+  children.map((child) => {
+    if (child.type === TabList || child.props.mdxType === "TabList") {
+      tabs.push(child);
+
+      const childTabs = React.Children.count(child.props.children);
+      if (childTabs > 6) {
+        console.warn(
+          "We recommend to use no more than six tabs. If more than six tabs are " +
+            "needed, consider other navigational patterns."
+        );
+      }
+    }
+
+    if (child.type === TabPanels || child.props.mdxType === "TabPanels") {
+      panels.push(child);
+    }
+  });
+
+  return { tabs, panels };
+};
+
+/**
+ * Renders Chakra's `Tab` component with specific variants, props,
+ * and controlled styling.
+ */
+function Tabs(props: React.PropsWithChildren<TabsProps>) {
+  const {
+    children,
+    contentData,
+    defaultIndex = 0,
+    id = generateUUID(),
+    onChange,
+    useHash = false,
+  } = props;
+  const styles = useMultiStyleConfig("Tabs", {});
+  const { tabs, panels } = contentData
+    ? getElementsFromContentData(contentData, useHash)
+    : getElementsFromChildren(children);
+
+  if (children && contentData?.length) {
+    console.warn(
+      "Only pass children or data in the `data` props but not both."
+    );
+  }
+
+  return (
+    <ChakraTabs
+      id={id}
+      // The following lazy loads each panel whenever it is needed.
+      isLazy
+      onChange={onChange}
+      defaultIndex={defaultIndex}
+      variant="enclosed"
+    >
+      {contentData ? (
+        <>
+          <Box
+            __css={styles.tablistWrapper}
+            sx={{
+              "&::-webkit-scrollbar": {
+                display: "none",
+              },
+            }}
+          >
+            <Button
+              buttonType={ButtonTypes.Primary}
+              attributes={{
+                "aria-label": "Previous",
+                ...styles.buttonArrows,
+              }}
+            >
+              <Icon
+                name={IconNames.Arrow}
+                iconRotation={IconRotationTypes.Rotate90}
+                size={IconSizes.Small}
+              />
+            </Button>
+            <TabList>{tabs}</TabList>
+            <Button
+              buttonType={ButtonTypes.Primary}
+              attributes={{
+                "aria-label": "Next",
+                ...styles.buttonArrows,
+              }}
+            >
+              <Icon
+                name={IconNames.Arrow}
+                iconRotation={IconRotationTypes.Rotate270}
+                size={IconSizes.Small}
+              />
+            </Button>
+          </Box>
+          <TabPanels>{panels}</TabPanels>
+        </>
+      ) : (
+        <>
+          <Box
+            __css={styles.tablistWrapper}
+            sx={{
+              "&::-webkit-scrollbar": {
+                display: "none",
+              },
+            }}
+          >
+            {tabs}
+          </Box>
+          {panels}
+        </>
+      )}
+    </ChakraTabs>
+  );
+}
+
+export { Tabs, TabList, Tab, TabPanels, TabPanel };