@purpurds/tabs 3.0.0

package/dist/tabs.utils.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { TabContent } from "./tab-content";
+export type TabsCmp<P> = React.FunctionComponent<P> & {
+    Content: typeof TabContent;
+};
+export declare const tabsVariants: readonly ["line", "line-negative", "contained", "contained-negative"];
+export type TabsVariant = (typeof tabsVariants)[number];
+export declare const createTabChangeDetailEvent: (value: string) => CustomEvent<TabChangeDetail>;
+export type TabChangeDetail = {
+    value: string;
+};
+//# sourceMappingURL=tabs.utils.d.ts.map

package/dist/tabs.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.utils.d.ts","sourceRoot":"","sources":["../src/tabs.utils.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,MAAM,OAAO,CAAC,CAAC,IAAI,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG;IACpD,OAAO,EAAE,OAAO,UAAU,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,YAAY,uEAAwE,CAAC;AAElG,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,eAAO,MAAM,0BAA0B,UAAW,MAAM,iCACoB,CAAC;AAE7E,MAAM,MAAM,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC"}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@purpurds/tabs",
+  "version": "3.0.0",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/tabs.cjs.js",
+  "types": "./dist/tabs.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/tabs.cjs.js",
+      "systemjs": "./dist/tabs.system.js",
+      "types": "./dist/tabs.d.ts",
+      "default": "./dist/tabs.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/tabs.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@radix-ui/react-tabs": "~1.0.4",
+    "@purpurds/paragraph": "3.0.0",
+    "@purpurds/icon": "3.0.0",
+    "@purpurds/tokens": "3.0.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.7.0",
+    "@storybook/blocks": "~7.6.0",
+    "@storybook/react": "~7.6.0",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~9.3.3",
+    "@testing-library/jest-dom": "~6.3.0",
+    "@testing-library/react": "~14.1.2",
+    "@types/node": "18",
+    "@types/react-dom": "~18.2.17",
+    "@types/react": "~18.2.42",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "~8.56.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "typescript": "~5.2.2",
+    "vite": "~5.0.6",
+    "vitest": "~1.2.0",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "rm -rf dist && vite build && vite build --mode systemjs",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/readme.mdx

@@ -0,0 +1,68 @@
+import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as TabsStories from "./src/tabs.stories";
+import * as TabContentStories from "./src/tab-content.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/Tabs" of={TabsStories} />
+
+# Tabs
+
+<Subtitle>Version {packageInfo.version}</Subtitle>
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+#### Tabs
+
+<ArgTypes />
+
+#### Tabs.Content
+
+<ArgTypes of={TabContentStories} />
+
+### Installation
+
+#### Via NPM
+
+Add the dependency to your consumer app like `"@purpurds/tabs": "x.y.z"`
+
+#### From outside the monorepo (build-time)
+
+To install this package, you need to setup access to the artifactory. [Click here to go to the guide on how to do that](https://github.com/telia-company/jfrog-documentation/blob/main/doc/JFrog/JFrog_Onboarding.md#getting-access-to-artifactory-and-other-jfrog-applications).
+
+---
+
+In MyApp.tsx
+
+```tsx
+import "@purpurds/tokens/index.css";
+```
+
+and
+
+```tsx
+import "@purpurds/tabs/styles";
+```
+
+In MyComponent.tsx
+
+```tsx
+import { Tabs } from "@purpurds/tabs";
+
+export const MyComponent = () => {
+  return (
+    <Tabs variant="contained">
+      <Tabs.Content tabId="tab-1" name="Tab name 1">
+        <div>Some content</div>
+      </Tabs.Content>
+      <Tabs.Content tabId="tab-2" name="Tab name 2">
+        <div>Some content</div>
+      </Tabs.Content>
+    </Tabs>
+  );
+};
+```

package/src/__mocks__/intersectionObserverMock.ts

@@ -0,0 +1,8 @@
+import { vi } from "vitest";
+
+const IntersectionObserverMock = vi.fn(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+}));
+
+vi.stubGlobal("IntersectionObserver", IntersectionObserverMock);

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/tab-content.module.scss

@@ -0,0 +1,20 @@
+.purpur-tab-content {
+  position: relative;
+
+  &:focus {
+    outline: 0;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: calc(-1 * calc(var(--purpur-border-width-sm) * 2));
+      display: block;
+      border: var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);
+      border-radius: var(--purpur-border-radius-sm);
+    }
+
+    &:not(:focus-visible)::before {
+      border: 0;
+    }
+  }
+}

package/src/tab-content.stories.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Root } from "@radix-ui/react-tabs";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Tabs } from "./tabs";
+
+const meta: Meta<typeof Tabs.Content> = {
+  title: "Components/Tabs",
+  component: Tabs.Content,
+  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",
+      },
+    ],
+    storyHead: {
+      title: "Tabs.Content",
+    },
+  },
+  argTypes: {
+    ["data-testid"]: { control: { type: "text" } },
+    className: { control: { type: "text" } },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tabs.Content>;
+
+export const TabContent: Story = {
+  args: {
+    tabId: "tab-1",
+    name: "Tab name-1",
+    children: <div>Some content</div>,
+  },
+  render: ({ children, ...args }) => (
+    <Root defaultValue={args.tabId}>
+      <Tabs.Content {...args}>{children}</Tabs.Content>
+    </Root>
+  ),
+};

package/src/tab-content.test.tsx

@@ -0,0 +1,40 @@
+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-tab-content";
+
+expect.extend(matchers);
+
+describe("TabContent", () => {
+  afterEach(cleanup);
+
+  it("should render plain", () => {
+    render(
+      <Tabs variant="line">
+        <TabContent tabId="tab-1" name="Tab name 1" data-testid="tab-content">
+          <div>Content</div>
+        </TabContent>
+      </Tabs>
+    );
+
+    const tabContent = screen.getByTestId("tab-content");
+    expect(tabContent).toBeInTheDocument();
+    expect(tabContent.classList.value).toContain(rootClassName);
+  });
+
+  it("should throw error if not used within Tab component", () => {
+    expect(() => {
+      render(
+        <TabContent tabId="tab-1" name="Tab name 1" data-testid="tab-content">
+          <div>Content</div>
+        </TabContent>
+      );
+    }).toThrow();
+  });
+});

package/src/tab-content.tsx

@@ -0,0 +1,67 @@
+import React, {
+  ComponentPropsWithoutRef,
+  ForwardedRef,
+  forwardRef,
+  isValidElement,
+  ReactChild,
+  ReactElement,
+  ReactFragment,
+  ReactNode,
+  ReactPortal,
+} from "react";
+import { Content } from "@radix-ui/react-tabs";
+import c from "classnames/bind";
+
+import styles from "./tab-content.module.scss";
+
+export type TabContentProps = {
+  /**
+   * The text that will be displayed in the tab.
+   * */
+  name: string;
+  /**
+   * A unique ID that associates the tab with a content.
+   * */
+  tabId: string;
+  className?: string;
+  "data-testid"?: string;
+};
+
+export type TabContentPropsWithChildren = ComponentPropsWithoutRef<"div"> &
+  TabContentProps & {
+    children: ReactNode;
+  };
+
+const cx = c.bind(styles);
+const rootClassName = "purpur-tab-content";
+
+export const TabContent = forwardRef(
+  (
+    { children, tabId, "data-testid": dataTestId, className, ...rest }: TabContentPropsWithChildren,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => (
+    <Content
+      ref={ref}
+      className={cx([rootClassName, className])}
+      data-testid={dataTestId}
+      value={tabId}
+      {...rest}
+    >
+      {children}
+    </Content>
+  )
+);
+
+export const isTabContent = (
+  child:
+    | ReactChild
+    | ReactElement
+    | ReactFragment
+    | ReactPortal
+    | string
+    | number
+    | boolean
+    | null
+    | undefined
+): child is ReactElement<TabContentProps> =>
+  !!child && isValidElement<TabContentProps>(child) && !!child.props.name && !!child.props.tabId;

package/src/tab-header.module.scss

@@ -0,0 +1,121 @@
+@import "@purpurds/paragraph/src/paragraph.mixins.scss";
+
+.purpur-tab-header {
+  $root: &;
+
+  position: relative;
+  width: 100%;
+  padding: calc(var(--purpur-spacing-100) + var(--purpur-spacing-25)) var(--purpur-spacing-200);
+  border: 0;
+  border-radius: var(--purpur-border-radius-sm) var(--purpur-border-radius-sm) 0 0;
+  background: transparent;
+  @include purpur-paragraph-100;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out);
+
+  &[aria-selected="true"] {
+    cursor: auto;
+  }
+
+  &:focus {
+    outline: 0;
+
+    &:focus-visible::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: 20;
+      border: var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);
+      border-radius: var(--purpur-border-radius-sm);
+      pointer-events: none;
+    }
+  }
+
+  &--contained,
+  &--contained-negative {
+    &:focus:focus-visible::after {
+      top: calc(-1 * var(--purpur-border-width-sm));
+    }
+  }
+
+  &--line {
+    color: var(--purpur-color-text-interactive-primary);
+    background: var(--purpur-color-functional-transparent);
+
+    &:not(#{$root}[aria-selected="true"]):hover {
+      color: var(--purpur-color-text-interactive-primary-hover);
+      background: var(--purpur-color-background-interactive-transparent-hover);
+    }
+
+    &:not(#{$root}[aria-selected="true"]):active {
+      color: var(--purpur-color-text-interactive-primary-active);
+      background: var(--purpur-color-background-interactive-transparent-active);
+    }
+  }
+
+  &--line-negative {
+    color: var(--purpur-color-text-interactive-primary-negative);
+    background: var(--purpur-color-functional-transparent);
+
+    &:not(#{$root}[aria-selected="true"]):hover {
+      color: var(--purpur-color-text-interactive-primary-negative-hover);
+      background: var(--purpur-color-background-interactive-transparent-negative-hover);
+    }
+
+    &:not(#{$root}[aria-selected="true"]):active {
+      color: var(--purpur-color-text-interactive-primary-negative-active);
+      background: var(--purpur-color-background-interactive-transparent-negative-active);
+    }
+  }
+
+  &--contained {
+    padding-top: calc(
+      (var(--purpur-spacing-100) + var(--purpur-spacing-25)) - var(--purpur-border-width-sm)
+    );
+    border-top: var(--purpur-border-width-sm) solid transparent;
+    color: var(--purpur-color-text-interactive-primary);
+    background: var(--purpur-color-background-interactive-inactive);
+
+    &#{$root}[aria-selected="true"] {
+      border-color: var(--purpur-color-border-interactive-primary);
+      background: var(--purpur-color-background-primary);
+    }
+
+    &:not(#{$root}[aria-selected="true"]):hover {
+      color: var(--purpur-color-text-interactive-primary-hover);
+      background: var(--purpur-color-background-interactive-transparent-hover);
+    }
+
+    &:not(#{$root}[aria-selected="true"]):active {
+      color: var(--purpur-color-text-interactive-primary-active);
+      background: var(--purpur-color-background-interactive-transparent-active);
+    }
+  }
+
+  &--contained-negative {
+    padding-top: calc(
+      (var(--purpur-spacing-100) + var(--purpur-spacing-25)) - var(--purpur-border-width-sm)
+    );
+    border-top: var(--purpur-border-width-sm) solid transparent;
+    color: var(--purpur-color-text-interactive-primary-negative);
+    background: var(--purpur-color-background-interactive-inactive-negative);
+
+    &#{$root}[aria-selected="true"] {
+      border-color: var(--purpur-color-border-interactive-primary-negative);
+      color: var(--purpur-color-text-interactive-primary);
+      background: var(--purpur-color-background-primary);
+    }
+
+    &:not(#{$root}[aria-selected="true"]):hover {
+      color: var(--purpur-color-text-interactive-primary-negative-hover);
+      background: var(--purpur-color-background-interactive-transparent-negative-hover);
+    }
+
+    &:not(#{$root}[aria-selected="true"]):active {
+      color: var(--purpur-color-text-interactive-primary-negative-active);
+      background: var(--purpur-color-background-interactive-transparent-negative-active);
+    }
+  }
+}

package/src/tab-header.tsx

@@ -0,0 +1,37 @@
+import React, { FocusEventHandler, ForwardedRef, forwardRef, ReactNode } from "react";
+import { Trigger } from "@radix-ui/react-tabs";
+import c from "classnames/bind";
+
+import styles from "./tab-header.module.scss";
+import { TabsVariant } from "./tabs.utils";
+
+type TabHeaderProps = {
+  "data-testid"?: string;
+  index: number;
+  tabId: string;
+  variant: TabsVariant;
+  onFocus: FocusEventHandler<HTMLButtonElement>;
+  children: ReactNode;
+};
+
+const cx = c.bind(styles);
+const rootClassName = "purpur-tab-header";
+
+export const TabHeader = forwardRef(
+  <T extends HTMLButtonElement>(
+    { index, tabId, variant, onFocus, "data-testid": dataTestId, children }: TabHeaderProps,
+    ref: ForwardedRef<T>
+  ) => (
+    <Trigger
+      id={`${tabId}-trigger`}
+      className={cx([rootClassName, `${rootClassName}--${variant}`])}
+      value={tabId}
+      data-testid={dataTestId}
+      data-index={index}
+      ref={ref}
+      onFocus={onFocus}
+    >
+      {children}
+    </Trigger>
+  )
+);

package/src/tabs.module.scss

@@ -0,0 +1,158 @@
+.purpur-tabs {
+  $root: &;
+
+  &__wrapper {
+    position: relative;
+    -ms-overflow-style: none; /* For Internet Explorer and Edge */
+    scrollbar-width: none; /* Firefox */
+
+    ::-webkit-scrollbar {
+      display: none; /* For Chrome, Safari and Opera */
+    }
+
+    #{$root}__scroll-button {
+      display: none;
+      align-items: center;
+      position: absolute;
+      top: 0;
+      z-index: 10;
+      height: 100%;
+      padding: 0;
+      border: var(--purpur-border-width-xs) solid var(--purpur-color-border-interactive-subtle);
+      border-radius: var(--purpur-border-radius-xs);
+      color: var(--purpur-color-text-default);
+      background: var(--purpur-color-background-primary);
+      box-shadow: var(--purpur-shadow-md);
+      transition: all var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out);
+      cursor: pointer;
+
+      &::after {
+        content: "";
+        position: absolute;
+        inset: calc(-1 * var(--purpur-border-width-xs));
+        border: var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-subtle-hover);
+        border-radius: var(--purpur-border-radius-xs);
+        box-sizing: border-box;
+        opacity: 0;
+        transition: all var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out);
+      }
+
+      &:hover {
+        box-shadow: none;
+        border-color: transparent;
+        color: var(--purpur-color-text-interactive-primary-hover);
+
+        &::after {
+          opacity: 1;
+        }
+      }
+
+      &:active::after {
+        border-width: var(--purpur-border-width-xs);
+      }
+
+      &:focus {
+        outline: 0;
+      }
+
+      &:focus-visible {
+        outline: 0;
+        border-color: var(--purpur-color-border-interactive-subtle);
+        box-shadow: none;
+
+        &::after {
+          left: calc(-1 * (var(--purpur-border-width-sm) * 2));
+          top: calc(-1 * (var(--purpur-border-width-sm) * 2));
+          width: calc(100% + (var(--purpur-border-width-sm) * 4));
+          height: calc(100% + (var(--purpur-border-width-sm) * 4));
+          border-color: var(--purpur-color-border-interactive-focus);
+          opacity: 1;
+          pointer-events: none;
+        }
+      }
+    }
+
+    #{$root}__scroll-button--left {
+      left: 0;
+    }
+
+    #{$root}__scroll-button--right {
+      right: 0;
+    }
+
+    &--scroll-end {
+      #{$root}__scroll-button--left {
+        display: flex;
+      }
+    }
+
+    &--scroll-start {
+      #{$root}__scroll-button--right {
+        display: flex;
+      }
+    }
+  }
+
+  &--line,
+  &--line-negative {
+    #{$root}__wrapper::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: var(--purpur-border-width-sm);
+    }
+
+    #{$root}__selected-border {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      z-index: 10;
+      height: var(--purpur-border-width-sm);
+      transition: all var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out);
+    }
+  }
+
+  &--line {
+    #{$root}__wrapper::after {
+      background: var(--purpur-color-border-weak);
+    }
+
+    #{$root}__selected-border {
+      background: var(--purpur-color-border-interactive-primary);
+    }
+  }
+
+  &--line-negative {
+    #{$root}__wrapper::after {
+      background: var(--purpur-color-border-weak-negative);
+    }
+
+    #{$root}__selected-border {
+      background: var(--purpur-color-border-interactive-primary-negative);
+    }
+  }
+
+  &--contained,
+  &--contained-negative {
+    #{$root}__list {
+      gap: var(--purpur-spacing-100);
+    }
+
+    #{$root}__content-container {
+      background: var(--purpur-color-background-primary);
+    }
+  }
+
+  &__list {
+    position: relative;
+    display: inline-flex;
+    max-width: 100%;
+    overflow: auto;
+  }
+
+  &--fullWidth #{$root}__list {
+    min-width: 100%;
+  }
+}