@purpurds/tabs 3.0.0

package/src/tabs.stories.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Tabs } from "./tabs";
+import { tabsVariants } from "./tabs.utils";
+
+const meta: Meta<typeof Tabs> = {
+  title: "Components/Tabs",
+  component: Tabs,
+  parameters: {
+    design: [
+      {
+        name: "Tabs",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=2942-430&mode=design&t=zoKkl2HAtk3UuKoP-0",
+      },
+    ],
+  },
+  argTypes: {
+    variant: { control: "select", options: tabsVariants },
+    ["data-testid"]: { control: { type: "text" } },
+    className: { control: { type: "text" } },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tabs>;
+
+const tabId = "tab";
+const name = "Tab name";
+
+export const Showcase: Story = {
+  args: {
+    variant: tabsVariants[0],
+    fullWidth: false,
+    children: [
+      <Tabs.Content
+        key="1"
+        tabId={`${tabId}-1`}
+        name={`${name}-1`}
+        style={{ padding: "var(--purpur-spacing-250" }}
+      >
+        <div>Content 1</div>
+      </Tabs.Content>,
+      <Tabs.Content
+        key="2"
+        tabId={`${tabId}-2`}
+        name={`${name}-2`}
+        style={{ padding: "var(--purpur-spacing-250" }}
+      >
+        <div>Content 2</div>
+      </Tabs.Content>,
+      <Tabs.Content
+        key="3"
+        tabId={`${tabId}-3`}
+        name={`${name}-3`}
+        style={{ padding: "var(--purpur-spacing-250" }}
+      >
+        <div>Content 3</div>
+      </Tabs.Content>,
+    ],
+  },
+  render: ({ children, ...args }) => (
+    <div
+      style={{
+        padding: "var(--purpur-spacing-250)",
+        background: args.variant?.includes("negative")
+          ? "var(--purpur-color-purple-900)"
+          : args.variant === "contained"
+            ? "var(--purpur-color-gray-50)"
+            : "transparent",
+        color: `var(--purpur-color-text-default${
+          args.variant === "line-negative" ? "-negative" : ""
+        }`,
+      }}
+    >
+      <Tabs {...args}>{children}</Tabs>
+    </div>
+  ),
+};

package/src/tabs.test.tsx

@@ -0,0 +1,163 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { Tabs } from "./tabs";
+import { TabContent } from "./tab-content";
+import "./__mocks__/intersectionObserverMock";
+
+const rootClassName = "purpur-tabs";
+
+expect.extend(matchers);
+
+describe("Tabs", () => {
+  afterEach(cleanup);
+
+  it("should render plain", () => {
+    render(
+      <Tabs data-testid="tabs-test">
+        <TabContent tabId="tab-1" name="Tab name 1">
+          <div>Content</div>
+        </TabContent>
+        <TabContent tabId="tab-2" name="Tab name 2">
+          <div>Content</div>
+        </TabContent>
+      </Tabs>
+    );
+
+    const tab = screen.getByTestId("tabs-test");
+    expect(tab).toBeInTheDocument();
+    expect(tab.classList.value).toContain(rootClassName);
+  });
+
+  it("should render header and content for each tab", () => {
+    const testId = "tab-content";
+
+    render(
+      <Tabs>
+        <TabContent tabId="tab-1" name="Tab name 1" data-testid={testId}>
+          <div>Content</div>
+        </TabContent>
+        <TabContent tabId="tab-2" name="Tab name 2" data-testid={testId}>
+          <div>Content</div>
+        </TabContent>
+        <TabContent tabId="tab-3" name="Tab name 3" data-testid={testId}>
+          <div>Content</div>
+        </TabContent>
+      </Tabs>
+    );
+
+    expect(screen.getAllByTestId(testId).length).toEqual(3);
+    expect(screen.getAllByTestId(`${testId}-header`).length).toEqual(3);
+  });
+
+  it("should not render children that are not TabContent components", () => {
+    const testId = "tab-content";
+
+    render(
+      <Tabs>
+        <h1 data-testid={testId}>Heading</h1>
+        <TabContent tabId="tab-1" name="Tab name 1" data-testid={testId}>
+          <div>Content</div>
+        </TabContent>
+        <TabContent tabId="tab-2" name="Tab name 2" data-testid={testId}>
+          <div>Content</div>
+        </TabContent>
+        <p data-testid={testId}>Paragraph</p>
+      </Tabs>
+    );
+
+    expect(screen.getAllByTestId(testId).length).toEqual(2);
+  });
+
+  it("should render two scroll buttons", () => {
+    render(
+      <Tabs data-testid="tabs-test">
+        <TabContent tabId="tab-1" name="Tab name 1">
+          <div>Content</div>
+        </TabContent>
+        <TabContent tabId="tab-2" name="Tab name 2">
+          <div>Content</div>
+        </TabContent>
+      </Tabs>
+    );
+
+    expect(screen.getAllByTestId("tabs-test-scroll-button").length).toEqual(2);
+  });
+
+  it("should render selected border for line variant", () => {
+    render(
+      <Tabs variant="line" data-testid="tabs-test">
+        <TabContent tabId="tab-1" name="Tab name 1">
+          <div>Content</div>
+        </TabContent>
+        <TabContent tabId="tab-2" name="Tab name 2">
+          <div>Content</div>
+        </TabContent>
+      </Tabs>
+    );
+
+    expect(screen.getByTestId("tabs-test-selected-border")).toBeInTheDocument();
+  });
+
+  it("should render selected border for line-negative variant", () => {
+    render(
+      <Tabs variant="line-negative" data-testid="tabs-test">
+        <TabContent tabId="tab-1" name="Tab name 1">
+          <div>Content</div>
+        </TabContent>
+        <TabContent tabId="tab-2" name="Tab name 2">
+          <div>Content</div>
+        </TabContent>
+      </Tabs>
+    );
+
+    expect(screen.getByTestId("tabs-test-selected-border")).toBeInTheDocument();
+  });
+
+  it("should not render selected border for contained variant", () => {
+    render(
+      <Tabs variant="contained" data-testid="tabs-test">
+        <TabContent tabId="tab-1" name="Tab name 1">
+          <div>Content</div>
+        </TabContent>
+        <TabContent tabId="tab-2" name="Tab name 2">
+          <div>Content</div>
+        </TabContent>
+      </Tabs>
+    );
+
+    expect(screen.queryByTestId("tabs-test-selected-border")).not.toBeInTheDocument();
+  });
+
+  it("should not render selected border for contained-negative variant", () => {
+    render(
+      <Tabs variant="contained-negative" data-testid="tabs-test">
+        <TabContent tabId="tab-1" name="Tab name 1">
+          <div>Content</div>
+        </TabContent>
+        <TabContent tabId="tab-2" name="Tab name 2">
+          <div>Content</div>
+        </TabContent>
+      </Tabs>
+    );
+
+    expect(screen.queryByTestId("tabs-test-selected-border")).not.toBeInTheDocument();
+  });
+
+  it("should throw error if duplicate tabId is found", () => {
+    expect(() => {
+      render(
+        <Tabs>
+          <TabContent tabId="tab" name="Tab name 1">
+            <div>Content</div>
+          </TabContent>
+          <TabContent tabId="tab" name="Tab name 2">
+            <div>Content</div>
+          </TabContent>
+        </Tabs>
+      );
+    }).toThrow("tabId must be unique");
+  });
+});

package/src/tabs.tsx

@@ -0,0 +1,253 @@
+import React, { Children, ReactElement, useEffect, useRef, useState } from "react";
+import { chevronLeft, chevronRight, Icon } from "@purpurds/icon";
+import { List, Root } from "@radix-ui/react-tabs";
+import c from "classnames/bind";
+
+import { isTabContent, TabContent } from "./tab-content";
+import { TabHeader } from "./tab-header";
+import styles from "./tabs.module.scss";
+import { createTabChangeDetailEvent, TabChangeDetail, TabsCmp, TabsVariant } from "./tabs.utils";
+
+type TabsProps = {
+  children: Array<ReactElement<typeof TabContent>> | ReactElement<typeof TabContent>;
+  variant?: TabsVariant;
+  fullWidth?: boolean;
+  /**
+   * Event handler called when the value changes.
+   * */
+  onChange?: (event: CustomEvent<TabChangeDetail>) => void;
+  className?: string;
+  "data-testid"?: string;
+};
+
+const cx = c.bind(styles);
+const rootClassName = "purpur-tabs";
+
+const scrollToTarget = (target: HTMLElement, tabList?: HTMLDivElement | null) => {
+  /**
+   * scroll may not be available in test runner, so check existence before
+   * proceeding. We can't use scrollIntoView() because Safari doesn't support
+   * it fully.
+   */
+  if (
+    typeof target?.getBoundingClientRect !== "function" ||
+    typeof tabList?.scroll !== "function"
+  ) {
+    return;
+  }
+
+  const targetRect = target.getBoundingClientRect();
+  const wrapperRect = tabList.getBoundingClientRect();
+  const wrapperWidth = tabList.clientWidth;
+  const wrapperOffset = parseInt(getComputedStyle(tabList).borderLeftWidth?.split("px")[0], 10);
+  const offset = wrapperRect.left + (isNaN(wrapperOffset) ? 0 : wrapperOffset);
+  let left;
+
+  // Handle forward navigation
+  if (targetRect.right > wrapperRect.right) {
+    left = targetRect.left + tabList.scrollLeft;
+    left = left + targetRect.width - wrapperWidth + wrapperWidth * 0.1;
+    left = left - offset;
+  }
+
+  // Handle backwards navigation
+  if (targetRect.left < wrapperRect.left) {
+    left = targetRect.left + tabList.scrollLeft;
+    left = left - wrapperWidth * 0.1;
+    left = left - offset;
+  }
+
+  if (left !== undefined) {
+    tabList.scroll({ left, behavior: "smooth" });
+  }
+};
+
+export const Tabs: TabsCmp<TabsProps> = ({
+  children,
+  variant = "line",
+  fullWidth = false,
+  onChange,
+  className,
+  "data-testid": dataTestId,
+  ...props
+}) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [scrollClasses, setScrollClasses] = useState<{ [key: string]: boolean }>({});
+  const [selectedTriggerOffset, setSelectedTriggerOffset] = useState(0);
+  const [selectedTriggerWidth, setSelectedTriggerWidth] = useState(0);
+  const tabContentChildren = Children.toArray(children).filter(isTabContent);
+  const tabList = useRef<HTMLDivElement | null>();
+  const tabChildren = useRef<HTMLButtonElement[]>(new Array(tabContentChildren.length));
+  const sideScrollAdjustmentSize = 200;
+  const isLineVariant = variant === "line" || variant === "line-negative";
+
+  const classNames = cx([
+    rootClassName,
+    `${rootClassName}--${variant}`,
+    { [`${rootClassName}--fullWidth`]: fullWidth },
+    className,
+  ]);
+
+  const tabIds = Children.map(tabContentChildren, ({ props: { tabId } }) => tabId);
+
+  if (new Set(tabIds).size !== tabIds.length) {
+    throw new Error("tabId must be unique");
+  }
+
+  const getTestId = (name: string, id?: string) =>
+    id || dataTestId ? `${id || dataTestId}-${name}` : undefined;
+
+  const handleLinePosition = () => {
+    if (!isLineVariant) {
+      return;
+    }
+
+    const activeTabElement = tabChildren.current[activeIndex];
+
+    setSelectedTriggerOffset(activeTabElement?.offsetLeft || 0);
+    setSelectedTriggerWidth(activeTabElement?.getBoundingClientRect().width || 0);
+  };
+
+  const handleTabChange = (value: string) => {
+    if (isLineVariant) {
+      setActiveIndex(tabContentChildren.findIndex((child) => child.props.tabId === value));
+    }
+    onChange?.(createTabChangeDetailEvent(value));
+  };
+
+  const handleScrollButtonClick = (side: "left" | "right") => {
+    if (tabList?.current) {
+      const { scrollLeft } = tabList.current;
+      const modifier = side === "left" ? -sideScrollAdjustmentSize : sideScrollAdjustmentSize;
+
+      tabList.current.scroll({ left: scrollLeft + modifier, behavior: "smooth" });
+    }
+  };
+
+  const ScrollButton = ({ side }: { side: "left" | "right" }) => (
+    <button
+      className={cx(`${rootClassName}__scroll-button`, `${rootClassName}__scroll-button--${side}`)}
+      onClick={() => handleScrollButtonClick(side)}
+      type="button"
+      aria-hidden="true"
+      tabIndex={-1}
+      data-testid={getTestId("scroll-button")}
+    >
+      <Icon svg={side === "left" ? chevronLeft : chevronRight} size="md" />
+    </button>
+  );
+
+  useEffect(() => {
+    window.addEventListener("resize", handleLinePosition);
+
+    return () => {
+      window.removeEventListener("resize", handleLinePosition);
+    };
+  }, []);
+
+  useEffect(() => {
+    handleLinePosition();
+  }, [activeIndex, fullWidth, tabContentChildren, variant]);
+
+  useEffect(() => {
+    const onIntersection = (entries: IntersectionObserverEntry[]): void => {
+      const allEntriesVisible =
+        entries.every((entry) => entry.isIntersecting) &&
+        entries.length === tabContentChildren.length;
+
+      if (allEntriesVisible) {
+        setScrollClasses({});
+        return;
+      }
+
+      entries.forEach((entry) => {
+        const entryIndex = Number(entry.target.getAttribute("data-index"));
+        const isStartEntry = entryIndex === 0;
+        const isLastEntry = entryIndex === tabContentChildren.length - 1;
+
+        setScrollClasses((currentScrollClasses) => ({
+          ...currentScrollClasses,
+          ...(isStartEntry && {
+            [`${rootClassName}__wrapper--scroll-end`]: !entry.isIntersecting,
+          }),
+          ...(isLastEntry && {
+            [`${rootClassName}__wrapper--scroll-start`]: !entry.isIntersecting,
+          }),
+        }));
+      });
+    };
+
+    const observer = new IntersectionObserver(onIntersection, {
+      threshold: [0.99],
+      root: tabList.current,
+    });
+
+    tabChildren.current.forEach((el) => observer.observe(el));
+
+    return () => {
+      tabChildren.current.forEach((el) => observer.unobserve(el));
+    };
+  }, [tabContentChildren.length]);
+
+  return (
+    <Root
+      defaultValue={tabContentChildren[0].props.tabId}
+      onValueChange={handleTabChange}
+      data-testid={dataTestId}
+      className={classNames}
+      {...props}
+    >
+      <div className={cx(`${rootClassName}__container`)}>
+        <div className={cx([`${rootClassName}__wrapper`, scrollClasses])}>
+          <List
+            ref={(el) => {
+              tabList.current = el;
+            }}
+            className={cx(`${rootClassName}__list`)}
+          >
+            {Children.map(tabContentChildren, (child, index) => {
+              const { name, tabId, "data-testid": childDataTestId } = child.props;
+              return (
+                <TabHeader
+                  data-testid={getTestId("header", childDataTestId)}
+                  index={index}
+                  tabId={tabId}
+                  ref={(el) => {
+                    if (el) {
+                      tabChildren.current[index] = el;
+                    }
+                  }}
+                  onFocus={(e) => {
+                    scrollToTarget(e.target as HTMLElement, tabList.current);
+                  }}
+                  variant={variant}
+                >
+                  {name}
+                </TabHeader>
+              );
+            })}
+            {isLineVariant && (
+              <div
+                className={cx(`${rootClassName}__selected-border`)}
+                style={{
+                  width: selectedTriggerWidth,
+                  transform: `translateX(${selectedTriggerOffset}px)`,
+                }}
+                data-testid={getTestId("selected-border")}
+              />
+            )}
+          </List>
+          <ScrollButton side="left" />
+          <ScrollButton side="right" />
+        </div>
+        <div className={cx(`${rootClassName}__content-container`)}>
+          {Children.map(tabContentChildren, (child) => child)}
+        </div>
+      </div>
+    </Root>
+  );
+};
+
+Tabs.Content = TabContent;
+
+export * from "./tabs.utils";

package/src/tabs.utils.ts

@@ -0,0 +1,14 @@
+import { TabContent } from "./tab-content";
+
+export type TabsCmp<P> = React.FunctionComponent<P> & {
+  Content: typeof TabContent;
+};
+
+export const tabsVariants = ["line", "line-negative", "contained", "contained-negative"] as const;
+
+export type TabsVariant = (typeof tabsVariants)[number];
+
+export const createTabChangeDetailEvent = (value: string) =>
+  new CustomEvent<TabChangeDetail>("tabChangeDetail", { detail: { value } });
+
+export type TabChangeDetail = { value: string };