@purpurds/accordion 0.0.1

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-accordion__title_1ower_1{margin-bottom:var(--purpur-spacing-300);color:var(--purpur-color-text-default)}@media screen and (min-width: 600px){._purpur-accordion__title_1ower_1{margin-bottom:var(--purpur-spacing-400)}}._purpur-accordion--negative_1ower_10{background-color:var(--purpur-color-purple-900)}._purpur-accordion--negative_1ower_10 ._purpur-accordion__title_1ower_1{color:var(--purpur-color-text-default-negative)}._purpur-accordion-item_8k8nf_1{overflow:hidden;border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}._purpur-accordion-item_8k8nf_1:nth-of-type(1){border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}._purpur-accordion-item__header_8k8nf_8{display:flex}._purpur-accordion-item__trigger_8k8nf_11{border:none;padding:0;width:100%;font-family:inherit;background-color:transparent;transition:background-color var(--purpur-motion-duration-150) ease;display:flex;align-items:center;justify-content:space-between;padding:var(--purpur-spacing-200) var(--purpur-spacing-200) var(--purpur-spacing-200) 0;cursor:pointer;outline:none}@media screen and (min-width: 600px){._purpur-accordion-item__trigger_8k8nf_11{padding:var(--purpur-spacing-300) var(--purpur-spacing-300) var(--purpur-spacing-300) 0}}@media screen and (min-width: 1024px){._purpur-accordion-item__trigger_8k8nf_11{padding:var(--purpur-spacing-400) var(--purpur-spacing-300) var(--purpur-spacing-400) 0}}._purpur-accordion-item__content_8k8nf_35{overflow:hidden}._purpur-accordion-item__content_8k8nf_35[data-state=open]{animation:_slideDown_8k8nf_1 var(--purpur-motion-duration-150) ease-in-out}._purpur-accordion-item__content_8k8nf_35[data-state=closed]{animation:_slideUp_8k8nf_1 var(--purpur-motion-duration-150) ease-in-out}._purpur-accordion-item__contentText_8k8nf_44{padding:var(--purpur-spacing-200) 0;max-width:37.5rem}._purpur-accordion-item__icon_8k8nf_48{height:var(--purpur-spacing-300);width:var(--purpur-spacing-300);transition:transform var(--purpur-motion-duration-150) ease-in-out}._purpur-accordion-item__trigger_8k8nf_11[data-state=open]>._purpur-accordion-item__icon_8k8nf_48{transform:rotate(180deg)}._purpur-accordion-item_8k8nf_1:has(:focus-visible){outline:none;box-shadow:0 0 0 var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus)}._purpur-accordion-item__title_8k8nf_60,._purpur-accordion-item__icon_8k8nf_48{color:var(--purpur-color-text-interactive-primary)}._purpur-accordion-item__trigger_8k8nf_11:hover{background-color:var(--purpur-color-background-interactive-transparent-hover)}._purpur-accordion-item__trigger_8k8nf_11:hover__title,._purpur-accordion-item__trigger_8k8nf_11:hover__icon{color:var(--purpur-color-text-interactive-primary-hover)}._purpur-accordion-item__trigger_8k8nf_11:active{background-color:var(--purpur-color-background-interactive-transparent-active)}._purpur-accordion-item__trigger_8k8nf_11:active__title,._purpur-accordion-item__trigger_8k8nf_11:active__icon{color:var(--purpur-color-text-interactive-primary-active)}._purpur-accordion-item__contentText_8k8nf_44 p{color:var(--purpur-color-text-default)}._purpur-accordion-item--negative_8k8nf_78{border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak-negative)}._purpur-accordion-item--negative_8k8nf_78:nth-of-type(1){border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak-negative)}._purpur-accordion-item--negative_8k8nf_78 ._purpur-accordion-item__title_8k8nf_60,._purpur-accordion-item--negative_8k8nf_78 ._purpur-accordion-item__icon_8k8nf_48{color:var(--purpur-color-text-interactive-primary-negative)}._purpur-accordion-item--negative_8k8nf_78 ._purpur-accordion-item__trigger_8k8nf_11:hover{background-color:var(--purpur-color-background-interactive-transparent-negative-hover)}._purpur-accordion-item--negative_8k8nf_78 ._purpur-accordion-item__trigger_8k8nf_11:hover ._purpur-accordion-item__title_8k8nf_60,._purpur-accordion-item--negative_8k8nf_78 ._purpur-accordion-item__trigger_8k8nf_11:hover ._purpur-accordion-item__icon_8k8nf_48{color:var(--purpur-color-border-interactive-primary-negative-hover)}._purpur-accordion-item--negative_8k8nf_78 ._purpur-accordion-item__trigger_8k8nf_11:active{background-color:var(--purpur-color-background-interactive-transparent-negative-active)}._purpur-accordion-item--negative_8k8nf_78 ._purpur-accordion-item__trigger_8k8nf_11:active ._purpur-accordion-item__title_8k8nf_60,._purpur-accordion-item--negative_8k8nf_78 ._purpur-accordion-item__trigger_8k8nf_11:active ._purpur-accordion-item__icon_8k8nf_48{color:var(--purpur-color-border-interactive-primary-negative-active)}._purpur-accordion-item--negative_8k8nf_78 ._purpur-accordion-item__contentText_8k8nf_44 p{color:var(--purpur-color-text-default-negative)}@keyframes _slideDown_8k8nf_1{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes _slideUp_8k8nf_1{0%{height:var(--radix-accordion-content-height)}to{height:0}}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@purpurds/accordion",
+  "version": "0.0.1",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/accordion.cjs.js",
+  "types": "./dist/accordion.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/accordion.cjs.js",
+      "types": "./dist/accordion.d.ts",
+      "default": "./dist/accordion.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/accordion.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@radix-ui/react-accordion": "~1.1.2",
+    "@purpurds/tokens": "5.0.0",
+    "@purpurds/icon": "5.0.0",
+    "@purpurds/heading": "5.0.0",
+    "@purpurds/paragraph": "5.0.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.10.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.4.0",
+    "@testing-library/react": "~14.3.0",
+    "@types/node": "18",
+    "@types/react-dom": "~18.3.0",
+    "@types/react": "~18.3.0",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "~8.57.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "~18.3.0",
+    "react": "~18.3.0",
+    "typescript": "~5.4.2",
+    "vite": "~5.2.2",
+    "vitest": "~1.5.0",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "vite build",
+    "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,76 @@
+import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
+
+import * as AccordionStories from "./src/accordion.stories";
+import packageInfo from "./package.json";
+
+<Meta name="Docs" title="Components/Accordion" of={AccordionStories} />
+
+# Accordion
+
+<Subtitle>Version {packageInfo.version}</Subtitle>
+
+### Showcase
+
+<Primary />
+
+### Properties
+
+<ArgTypes />
+
+### Installation
+
+#### Via NPM
+
+Add the dependency to your consumer app like `"@purpurds/purpur": "^x.y.z"`
+
+In MyApp.tsx
+
+```tsx
+import "@purpurds/purpur/styles";
+```
+
+In MyComponent.tsx
+
+#### Default
+
+```tsx
+import { Accordion, AccordionItem } from "@purpurds/purpur";
+
+export const MyComponent = () => {
+  return (
+    <Accordion title="Accordion title" titleVariant="title-100">
+      <AccordionItem title="Section title" value="1">
+        Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
+        rutrum nulla.
+      </AccordionItem>
+
+      <AccordionItem title="Section title" value="2">
+        Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
+        rutrum nulla.
+      </AccordionItem>
+    </Accordion>
+  );
+};
+```
+
+#### Negative with custom content
+
+```tsx
+export const MyComponent = () => {
+  return (
+    <Accordion negative title="Accordion title">
+      <AccordionItem title="Section title1">
+        Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
+        rutrum nulla.
+        <a href="https://telia.se">Link1</a>
+      </AccordionItem>
+
+      <AccordionItem title="Section title2">
+        Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
+        rutrum nulla.
+        <a href="https://telia.se">Link2</a>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+```

package/src/accordion-item.module.scss

@@ -0,0 +1,150 @@
+@import "@purpurds/tokens/breakpoint/variables";
+
+.purpur-accordion-item {
+  $root: &;
+  overflow: hidden;
+  border-bottom: var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);
+
+  &:nth-of-type(1) {
+    border-top: var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);
+  }
+
+  &__header {
+    display: flex;
+  }
+
+  &__trigger {
+    border: none;
+    padding: 0;
+    width: 100%;
+    font-family: inherit;
+    background-color: transparent;
+    transition: background-color var(--purpur-motion-duration-150) ease;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--purpur-spacing-200) var(--purpur-spacing-200) var(--purpur-spacing-200) 0;
+    cursor: pointer;
+    outline: none;
+
+    @media screen and (min-width: #{$purpur-breakpoint-md}) {
+      padding: var(--purpur-spacing-300) var(--purpur-spacing-300) var(--purpur-spacing-300) 0;
+    }
+
+    @media screen and (min-width: #{$purpur-breakpoint-lg}) {
+      padding: var(--purpur-spacing-400) var(--purpur-spacing-300) var(--purpur-spacing-400) 0;
+    }
+  }
+
+  &__content {
+    overflow: hidden;
+  }
+
+  &__content[data-state="open"] {
+    animation: slideDown var(--purpur-motion-duration-150) ease-in-out;
+  }
+
+  &__content[data-state="closed"] {
+    animation: slideUp var(--purpur-motion-duration-150) ease-in-out;
+  }
+
+  &__contentText {
+    padding: var(--purpur-spacing-200) 0;
+    max-width: 37.5rem;
+  }
+
+  &__icon {
+    height: var(--purpur-spacing-300);
+    width: var(--purpur-spacing-300);
+    transition: transform var(--purpur-motion-duration-150) ease-in-out;
+  }
+
+  &__trigger[data-state="open"] > &__icon {
+    transform: rotate(180deg);
+  }
+
+  &:has(:focus-visible) {
+    outline: none;
+    box-shadow: 0 0 0 var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus);
+  }
+
+  &__title,
+  &__icon {
+    color: var(--purpur-color-text-interactive-primary);
+  }
+
+  &__trigger:hover {
+    background-color: var(--purpur-color-background-interactive-transparent-hover);
+
+    &__title,
+    &__icon {
+      color: var(--purpur-color-text-interactive-primary-hover);
+    }
+  }
+
+  &__trigger:active {
+    background-color: var(--purpur-color-background-interactive-transparent-active);
+
+    &__title,
+    &__icon {
+      color: var(--purpur-color-text-interactive-primary-active);
+    }
+  }
+
+  &__contentText p {
+    color: var(--purpur-color-text-default);
+  }
+
+  &--negative {
+    border-bottom: var(--purpur-border-width-xs) solid var(--purpur-color-border-weak-negative);
+
+    &:nth-of-type(1) {
+      border-top: var(--purpur-border-width-xs) solid var(--purpur-color-border-weak-negative);
+    }
+
+    #{$root}__title,
+    #{$root}__icon {
+      color: var(--purpur-color-text-interactive-primary-negative);
+    }
+
+    #{$root}__trigger:hover {
+      background-color: var(--purpur-color-background-interactive-transparent-negative-hover);
+
+      #{$root}__title,
+      #{$root}__icon {
+        color: var(--purpur-color-border-interactive-primary-negative-hover);
+      }
+    }
+
+    #{$root}__trigger:active {
+      background-color: var(--purpur-color-background-interactive-transparent-negative-active);
+
+      #{$root}__title,
+      #{$root}__icon {
+        color: var(--purpur-color-border-interactive-primary-negative-active);
+      }
+    }
+
+    #{$root}__contentText p {
+      color: var(--purpur-color-text-default-negative);
+    }
+  }
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

package/src/accordion-item.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Accordion } from "./accordion";
+import { AccordionItem as AccordionItemComponent } from "./accordion-item";
+
+const meta: Meta<typeof Accordion> = {
+  title: "Components/Accordion",
+  component: Accordion,
+  parameters: {
+    design: [
+      {
+        name: "Accordion",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=4218%3A1652&mode=design&t=Xd8xbiGkQgta5BOt-1",
+      },
+    ],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AccordionItemComponent>;
+
+export const AccordionItem: Story = {
+  render: (args) => (
+    <Accordion negative={args.negative}>
+      <AccordionItemComponent {...args} />
+    </Accordion>
+  ),
+  args: {
+    negative: false,
+    title: "Title goes here",
+    children:
+      "Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at rutrum nulla. ",
+  },
+};

package/src/accordion-item.tsx

@@ -0,0 +1,81 @@
+import React, { isValidElement, ReactElement, ReactNode, ReactPortal } from "react";
+import { Heading } from "@purpurds/heading";
+import { IconChevronDown } from "@purpurds/icon";
+import { Paragraph } from "@purpurds/paragraph";
+import * as RadixAccordion from "@radix-ui/react-accordion";
+import c from "classnames/bind";
+
+import styles from "./accordion-item.module.scss";
+
+const cx = c.bind(styles);
+
+const rootClassName = "purpur-accordion-item";
+
+export type AccordionItemProps = {
+  ["data-testid"]?: string;
+  children: ReactNode;
+  /**
+   * Different accordion styling
+   * */
+  negative?: boolean;
+  className?: string;
+  /**
+   * Title of the accordion item
+   * */
+  title: string;
+  /**
+   * Value is used to identify the accordion. By default title is used for that purpose. If there are identical titles in the accordion, then value should be defined.
+   * */
+  value?: string;
+};
+
+export const AccordionItem = ({
+  children,
+  className,
+  title,
+  negative,
+  ...props
+}: AccordionItemProps) => {
+  const classes = cx([
+    className,
+    rootClassName,
+    {
+      [`${rootClassName}--negative`]: negative,
+    },
+  ]);
+
+  return (
+    <RadixAccordion.Item className={classes} value={title} {...props}>
+      <RadixAccordion.Header className={cx(`${rootClassName}__header`)} asChild>
+        <RadixAccordion.Trigger className={cx(`${rootClassName}__trigger`, className)}>
+          <Heading tag="h3" variant="title-100" className={cx(`${rootClassName}__title`)}>
+            {title}
+          </Heading>
+          <IconChevronDown size="md" className={cx(`${rootClassName}__icon`)} aria-hidden />
+        </RadixAccordion.Trigger>
+      </RadixAccordion.Header>
+      <RadixAccordion.Content className={cx(`${rootClassName}__content`, className)}>
+        <div className={cx(`${rootClassName}__contentText`)}>
+          {typeof children === "string" ? (
+            <Paragraph variant="paragraph-200">{children}</Paragraph>
+          ) : (
+            children
+          )}
+        </div>
+      </RadixAccordion.Content>
+    </RadixAccordion.Item>
+  );
+};
+
+export const isAccordionItem = (
+  child:
+    | ReactElement
+    | Iterable<ReactNode>
+    | ReactPortal
+    | string
+    | number
+    | boolean
+    | null
+    | undefined
+): child is ReactElement<AccordionItemProps> =>
+  isValidElement<AccordionItemProps>(child) && child?.type === AccordionItem;

package/src/accordion.module.scss

@@ -0,0 +1,22 @@
+@import "@purpurds/tokens/breakpoint/variables";
+
+.purpur-accordion {
+  $root: &;
+
+  &__title {
+    margin-bottom: var(--purpur-spacing-300);
+    color: var(--purpur-color-text-default);
+
+    @media screen and (min-width: #{$purpur-breakpoint-md}) {
+      margin-bottom: var(--purpur-spacing-400);
+    }
+  }
+
+  &--negative {
+    background-color: var(--purpur-color-purple-900);
+
+    #{$root}__title {
+      color: var(--purpur-color-text-default-negative);
+    }
+  }
+}

package/src/accordion.stories.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Accordion } from "./accordion";
+import { AccordionItem } from "./accordion-item";
+
+const meta: Meta<typeof Accordion> = {
+  title: "Components/Accordion",
+  component: Accordion,
+  parameters: {
+    design: [
+      {
+        name: "Accordion",
+        type: "figma",
+        url: "https://www.figma.com/file/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?type=design&node-id=4218%3A1652&mode=design&t=Xd8xbiGkQgta5BOt-1",
+      },
+    ],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const Showcase: Story = {
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem title="Section title" value="1">
+        Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
+        rutrum nulla.
+      </AccordionItem>
+
+      <AccordionItem title="Section title" value="2">
+        Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
+        rutrum nulla.
+      </AccordionItem>
+
+      <AccordionItem title="Section title" value="3">
+        Place body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at
+        rutrum nulla.
+      </AccordionItem>
+    </Accordion>
+  ),
+  args: {
+    negative: false,
+    title: "Title goes here",
+    titleVariant: "title-300",
+  },
+};

package/src/accordion.test.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { Accordion } from "./accordion";
+import { AccordionItem } from "./accordion-item";
+
+expect.extend(matchers);
+
+const setup = () =>
+  render(
+    <Accordion title="accordion heading">
+      <AccordionItem title="Test heading">item content</AccordionItem>
+    </Accordion>
+  );
+
+describe("Accordion", () => {
+  afterEach(cleanup);
+
+  it("should render accordion heading", () => {
+    setup();
+
+    expect(screen.getByRole("heading", { level: 2, name: "accordion heading" })).toBeDefined();
+  });
+
+  it("should render accordion item heading", () => {
+    setup();
+
+    expect(screen.getByRole("heading", { level: 3, name: "Test heading" })).toBeDefined();
+  });
+
+  it("should not render accordion item content when trigger is not clicked", () => {
+    setup();
+
+    expect(screen.queryByText("item content")).toBeNull();
+  });
+
+  it("should show/hide accordion item content when trigger is clicked", () => {
+    setup();
+
+    const trigger = screen.getByRole("button");
+
+    fireEvent.click(trigger);
+    expect(screen.getByText("item content")).toBeDefined();
+
+    fireEvent.click(trigger);
+    expect(screen.queryByText("item content")).toBeNull();
+  });
+
+  it("should render custom accordion item content", () => {
+    render(
+      <Accordion title="accordion heading">
+        <AccordionItem title="Test heading">
+          <a href="/test">Test link</a>
+        </AccordionItem>
+      </Accordion>
+    );
+
+    const trigger = screen.getByRole("button");
+    fireEvent.click(trigger);
+
+    expect(screen.getByRole("link", { name: "Test link" })).toBeDefined();
+  });
+});

package/src/accordion.tsx

@@ -0,0 +1,66 @@
+import React, { Children, cloneElement, ReactNode } from "react";
+import { Heading, TitleVariantType } from "@purpurds/heading";
+import * as RadixAccordion from "@radix-ui/react-accordion";
+import c from "classnames/bind";
+
+import styles from "./accordion.module.scss";
+import { isAccordionItem } from "./accordion-item";
+
+const cx = c.bind(styles);
+
+const rootClassName = "purpur-accordion";
+
+export type AccordionProps = {
+  ["data-testid"]?: string;
+  children: ReactNode;
+  className?: string;
+  /**
+   * Different accordion styling
+   * */
+  negative?: boolean;
+  /**
+   * Title of the accordion
+   * */
+  title?: string;
+  /**
+   * Different variant of sizing the title
+   * */
+  titleVariant?: TitleVariantType;
+};
+
+export const Accordion = ({
+  ["data-testid"]: dataTestId,
+  children,
+  className,
+  negative = false,
+  title,
+  titleVariant = "title-300",
+}: AccordionProps) => {
+  const classes = cx([
+    className,
+    rootClassName,
+    {
+      [`${rootClassName}--negative`]: negative,
+    },
+  ]);
+
+  const renderChildren = () =>
+    Children.map(children, (child) => {
+      if (isAccordionItem(child)) {
+        return cloneElement(child, { negative });
+      }
+    });
+
+  return (
+    <RadixAccordion.Root className={classes} type="multiple" data-testid={dataTestId}>
+      {title ? (
+        <Heading tag="h2" variant={titleVariant} className={cx(`${rootClassName}__title`)}>
+          {title}
+        </Heading>
+      ) : null}
+      {renderChildren()}
+    </RadixAccordion.Root>
+  );
+};
+
+Accordion.displayName = "Accordion";

package/src/global.d.ts

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