@orangesk/orange-design-system 2.0.0-alpha.0 → 2.0.0-alpha.1

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import React from "react";
+import cx from "classnames";
+
+import { useStatic } from "../../utils/hooks";
+import { Tab } from "./Tab";
+import TabsStatic from "./Tabs.static";
+
+export const variants = ["standard", "light"] as const;
+export const colours = ["default", "inverse"] as const;
+
+export type TabsVariant = (typeof variants)[number];
+export type TabsColour = (typeof colours)[number];
+
+// Define the expected props for TabPanel children
+export interface TabPanelProps {
+  id: string;
+  isDisabled?: boolean;
+  isActive?: boolean;
+  tab: React.ReactNode;
+  href?: string;
+  renderTab?: (props: TabPanelProps) => React.ReactElement;
+}
+
+interface TabsProps extends React.HTMLAttributes<HTMLUListElement> {
+  /** Active Tab index */
+  activeTabIndex?: number;
+  /** Additional classes for tabs header. */
+  classesTabNav?: string;
+  /** Color theme for the tabs */
+  colour?: TabsColour;
+  /** All tabs have equal width inside a full-width container */
+  hasEqualTabWidth?: boolean;
+  /** Fullwidth container */
+  isFullWidth?: boolean;
+  /** Tabs behave as links rather than tabs */
+  isLink?: boolean;
+  /** Visual variant of the tabs */
+  variant?: TabsVariant;
+  /** Tab panels as children */
+  children: React.ReactElement<TabPanelProps>[];
+}
+
+const Tabs: React.FC<TabsProps> = ({
+  activeTabIndex = 0,
+  className,
+  classesTabNav,
+  colour = "default",
+  isFullWidth,
+  isLink,
+  hasEqualTabWidth,
+  variant = "standard",
+  children,
+  ...other
+}) => {
+  const CLASS_TABNAV = "tab-list";
+
+  const tabNavClasses = cx(
+    CLASS_TABNAV,
+    { [`${CLASS_TABNAV}--equal`]: hasEqualTabWidth },
+    { [`${CLASS_TABNAV}--fullwidth`]: isFullWidth },
+    { [`${CLASS_TABNAV}--inverse`]: colour === "inverse" },
+    { [`${CLASS_TABNAV}--light`]: variant === "light" },
+    classesTabNav,
+    className,
+  );
+
+  const [tabListRef] = useStatic(TabsStatic);
+
+  function getTabs() {
+    return children.map((tabPanel, i) => {
+      const isActive = i === activeTabIndex;
+      const { renderTab, id, isDisabled, tab, href } =
+        tabPanel.props as TabPanelProps;
+
+      if (!renderTab) {
+        return React.createElement(
+          Tab,
+          {
+            key: id,
+            controls: !href ? id : "",
+            href,
+            isDisabled,
+            isActive,
+          },
+          tab,
+        );
+      }
+
+      const renderedTab = renderTab(tabPanel.props as TabPanelProps);
+      return React.cloneElement(renderedTab, {
+        key: id,
+        isActive,
+      } as React.HTMLAttributes<HTMLElement>);
+    });
+  }
+
+  function getPanels() {
+    return children.map((tabPanel, i) => {
+      const isActive = i === activeTabIndex;
+      const { id } = tabPanel.props;
+      return React.cloneElement(tabPanel, {
+        key: id,
+        isActive,
+        tab: undefined,
+      } as Partial<TabPanelProps>);
+    });
+  }
+
+  return (
+    <>
+      <ul
+        className={tabNavClasses}
+        role={isLink ? "navigation" : "tablist"}
+        ref={tabListRef}
+        data-tabs={isLink ? undefined : "true"}
+        {...other}
+      >
+        {getTabs()}
+        {isFullWidth && <li role="presentation" className="tab-list__hr" />}
+      </ul>
+      {!isLink ? getPanels() : null}
+    </>
+  );
+};
+
+Tabs.displayName = "Tabs";
+
+export { Tabs };

package/src/components/Tabs/index.ts

@@ -0,0 +1,5 @@
+import "./styles/style.scss";
+
+export { Tabs } from "./Tabs";
+export { TabPanel } from "./TabPanel";
+export { Tab } from "./Tab";

package/src/components/Tabs/styles/config.scss

@@ -0,0 +1,78 @@
+@use '../../../styles/tokens/color';
+@use '../../../styles/tokens/space';
+@use '../../../styles/tools/convert';
+
+$outline-width: convert.to-rem(2px);
+$negative-outline-width: $outline-width * -1;
+
+$tablist-spacing: (
+  margin: $negative-outline-width $negative-outline-width (space.get() + $negative-outline-width) $negative-outline-width,
+  padding: $outline-width,
+);
+
+$tab: (
+  'default': (
+    default: (
+      color: color.$black,
+      box-shadow: inset 0 -2px 0 0 color.$black,
+    ),
+    active: (
+      color: color.$orange,
+      box-shadow: (
+        inset -2px 0 0 0 color.$black,
+        inset 0 2px 0 0 color.$black,
+        inset 2px 0 0 0 color.$black,
+      ),
+    ),
+    hover: (
+      color: color.$orange,
+    ),
+    disabled: (
+      color: color.$gray-500,
+    )
+  ),
+  'inverse': (
+    default: (
+      color: color.$white,
+      box-shadow: inset 0 -2px 0 0 color.$white,
+    ),
+    active: (
+      color: color.$orange,
+      box-shadow: (
+        inset -2px 0 0 0 color.$white,
+        inset 0 2px 0 0 color.$white,
+        inset 2px 0 0 0 color.$white,
+      ),
+    ),
+    hover: (
+      color: color.$orange,
+    ),
+    disabled: (
+      color: color.$gray-600,
+    )
+  ),
+);
+
+$tab-light: (
+  default: (
+    box-shadow: none !important,
+  ),
+  active: (
+    box-shadow: inset 0 -4px 0 0 color.$orange !important,
+  ),
+  hover: (
+    box-shadow: none !important,
+  ),
+  disabled: (
+    box-shadow: none !important,
+  )
+);
+
+$tab-sizes: (
+  default: (
+    padding: space.get('small') space.get(),
+  ),
+  large: (
+    padding: space.get('small') space.get(),
+  ),
+);

package/src/components/Tabs/styles/mixins.scss

@@ -0,0 +1,107 @@
+@use './config';
+@use '../../../styles/tokens/base';
+@use '../../../styles/tokens/space';
+@use '../../../styles/tokens/color';
+@use '../../../styles/tools/generate';
+
+@mixin list-base($spacing: config.$tablist-spacing) {
+  position: relative;
+  display: flex;
+  overflow-x: auto;
+  overflow-y: visible;
+  margin-bottom: space.get();
+  align-items: stretch;
+
+  @include generate.css-map($spacing);
+}
+
+@mixin list-equal {
+  flex-grow: 1;
+}
+
+@mixin list-item {
+  display: flex;
+  flex-flow: column;
+  max-width: 66.66666%;
+}
+
+@mixin tab {
+  flex: 1 1 auto;
+  display: flex;
+  flex-flow: column;
+  height: initial;
+  position: relative;
+  font-weight: 600;
+  background: transparent;
+  border-width: 0;
+  text-align: left;
+
+  &:focus {
+    z-index: 1;
+  }
+
+  @include base.focusring-flush;
+}
+
+@mixin color-variant($variant, $config: config.$tab) {
+  @include generate.css-map($config, $variant, 'default');
+
+  &[aria-selected='true'] {
+    @include generate.css-map($config, $variant, 'active');
+  }
+
+  &:hover {
+    @include generate.css-map(config.$tab, $variant, 'hover');
+  }
+
+  &[aria-disabled='true'] {
+    @include generate.css-map(config.$tab, $variant, 'disabled');
+  }
+}
+
+@mixin inverse-variant {
+  @include generate.css-map(config.$tab-light, 'default');  
+}
+
+@mixin tab-light {
+  @include generate.css-map(config.$tab-light, 'default');
+
+  &:hover {
+    @include generate.css-map(config.$tab-light, 'hover');
+  }
+
+  &[aria-selected='true'] {
+    @include generate.css-map(config.$tab-light, 'active');
+  }
+  
+  &[aria-disabled='true'] {
+    @include generate.css-map(config.$tab-light, 'disabled');
+  }
+}
+
+@mixin tab-centered {
+  align-items: center;
+}
+
+@mixin tab-size($size, $config: config.$tab-sizes) {
+  @include generate.css-map($config, $size);
+}
+
+@mixin underline {
+  flex: 1 1 auto;
+  max-width: none;
+  box-shadow: inset 0 -2px 0 0 color.$black;
+}
+
+@mixin underline-inverse {
+  box-shadow: inset 0 -2px 0 0 color.$white;
+}
+
+@mixin underline-light {
+  box-shadow: inset 0 -1px 0 0 color.$gray-500;
+}
+
+@mixin list-equal-item {
+  flex-grow: 1;
+  flex-basis: 0;
+}

package/src/components/Tabs/styles/style.scss

@@ -0,0 +1,64 @@
+@use "./config";
+@use "./mixins";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/typography/mixins" as typography;
+
+.tab-list {
+  $this: &;
+
+  @include typography.list-unstyled;
+  @include mixins.list-base;
+
+  &--equal {
+    @include mixins.list-equal;
+  }
+
+  &__item {
+    @include mixins.list-item;
+
+    #{$this}--equal & {
+      @include mixins.list-equal-item;
+    }
+
+    #{$this}--light & {
+      @include mixins.underline-light;
+    }
+  }
+
+  &__tab {
+    @include mixins.tab;
+    @include mixins.color-variant("default");
+
+    @each $size, $props in config.$tab-sizes {
+      &#{generate.variant-name($size)} {
+        @include mixins.tab-size($size);
+      }
+    }
+    #{$this}--light & {
+      @include mixins.tab-light;
+    }
+
+    #{$this}--light#{$this}--equal & {
+      @include mixins.tab-centered;
+    }
+
+    .bg-black &,
+    #{$this}--inverse & {
+      @include mixins.color-variant("inverse");
+    }
+  }
+
+  &__hr {
+    @include mixins.underline;
+
+    #{$this}--light & {
+      @include mixins.underline-light;
+    }
+
+    #{$this}--inverse & {
+      @include mixins.underline-inverse;
+    }
+  }
+}

package/src/components/Tabs/tests/Tab.unit.test.js

@@ -0,0 +1,85 @@
+import { render } from "@testing-library/react";
+
+import { Tab } from "../Tab";
+
+describe("rendering Tab", () => {
+  describe("initial state", () => {
+    it("list element has class tab-list__item", () => {
+      const { container } = render(<Tab />);
+      expect(container.querySelector("li")).toBeInTheDocument();
+      expect(container.querySelector("li")).toHaveClass("tab-list__item");
+    });
+    it("list element has role presentation", () => {
+      const { container } = render(<Tab />);
+      expect(container.querySelector("li")).toBeInTheDocument();
+      expect(container.querySelector("li").getAttribute("role")).toBe(
+        "presentation",
+      );
+    });
+    it("button element has class tab-list__tab", () => {
+      const { container } = render(<Tab />);
+      expect(container.querySelector("button")).toBeInTheDocument();
+      expect(container.querySelector("button")).toHaveClass("tab-list__tab");
+    });
+    it("button element has role tab", () => {
+      const { container } = render(<Tab />);
+      expect(container.querySelector("button")).toBeInTheDocument();
+      expect(container.querySelector("button").getAttribute("role")).toBe(
+        "tab",
+      );
+    });
+    it("button element has type button", () => {
+      const { container } = render(<Tab />);
+      expect(container.querySelector("button")).toBeInTheDocument();
+      expect(container.querySelector("button").getAttribute("type")).toBe(
+        "button",
+      );
+    });
+    it("button attribute tabIndex is set to -1", () => {
+      const { container } = render(<Tab />);
+      expect(container.querySelector("button")).toBeInTheDocument();
+      expect(container.querySelector("button").getAttribute("tabIndex")).toBe(
+        "-1",
+      );
+    });
+  });
+  describe("passed props", () => {
+    it("passes other props", () => {
+      const { getByTestId } = render(<Tab data-testid="test-id" />);
+      expect(getByTestId("test-id")).toBeInTheDocument();
+    });
+    it("renders children", () => {
+      const { getByText } = render(<Tab>test</Tab>);
+      expect(getByText("test")).toBeInTheDocument();
+    });
+    it("has additional class when className is set", () => {
+      const { container } = render(<Tab className="test-class" />);
+      expect(container.querySelector("button")).toHaveClass("tab-list__tab");
+      expect(container.querySelector("button")).toHaveClass("test-class");
+    });
+    it("button has aria-selected attribute set to 'true' when isActive is passed", () => {
+      const { container } = render(<Tab isActive />);
+      expect(
+        container.querySelector("button").getAttribute("aria-selected"),
+      ).toBe("true");
+    });
+    it("button has tabIndex attribute set to '0' when isActive is passed", () => {
+      const { container } = render(<Tab isActive />);
+      expect(container.querySelector("button").getAttribute("tabIndex")).toBe(
+        "0",
+      );
+    });
+    it("button has aria-controls attribute set to controls prop value", () => {
+      const { container } = render(<Tab controls="test" />);
+      expect(
+        container.querySelector("button").getAttribute("aria-controls"),
+      ).toBe("test");
+    });
+    it("button has aria-disabled attribute set to 'true' when isDisables is passed", () => {
+      const { container } = render(<Tab isDisabled />);
+      expect(
+        container.querySelector("button").getAttribute("aria-disabled"),
+      ).toBe("true");
+    });
+  });
+});

package/src/components/Tabs/tests/TabPanel.unit.test.js

@@ -0,0 +1,53 @@
+import { render } from "@testing-library/react";
+
+import { TabPanel } from "../TabPanel";
+
+describe("rendering TabPanel", () => {
+  describe("initial state", () => {
+    it("has generated id", () => {
+      const { getByTestId } = render(<TabPanel data-testid="test-id" />);
+      const pattern = /id-\d+/;
+      expect(
+        pattern.test(getByTestId("test-id").getAttribute("id")),
+      ).toBeTruthy();
+    });
+    it("has role set to tabpanel", () => {
+      const { getByTestId } = render(<TabPanel data-testid="test-id" />);
+      expect(getByTestId("test-id").getAttribute("role")).toBe("tabpanel");
+    });
+    it("has tabIndex set to '0'", () => {
+      const { getByTestId } = render(<TabPanel data-testid="test-id" />);
+      expect(getByTestId("test-id").getAttribute("tabIndex")).toBe("0");
+    });
+    it("has hidden attribute set to true", () => {
+      const { getByTestId } = render(<TabPanel data-testid="test-id" />);
+      expect(getByTestId("test-id").hidden).toBe(true);
+    });
+  });
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByTestId } = render(
+        <TabPanel data-testid="test-id">test</TabPanel>,
+      );
+      expect(getByTestId("test-id").textContent).toBe("test");
+    });
+    it("has class when className is set", () => {
+      const { getByTestId } = render(
+        <TabPanel data-testid="test-id" className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+    it("has id set to id prop when this prop is passsed", () => {
+      const { getByTestId } = render(
+        <TabPanel data-testid="test-id" id="id-test" />,
+      );
+      expect(getByTestId("test-id").getAttribute("id")).toBe("id-test");
+    });
+    it("has hidden attribute set to false when isActive prop is passed", () => {
+      const { getByTestId } = render(
+        <TabPanel data-testid="test-id" isActive />,
+      );
+      expect(getByTestId("test-id").hidden).toBe(false);
+    });
+  });
+});