@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

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

@@ -1,15 +1,17 @@
 @use "sass:math";
+@use "../../../styles/tools/convert";
 @use "../../../styles/tokens/base";
 @use "../../../styles/tokens/color";
 @use "../../../styles/tokens/space";
 
 @layer components {
   .expander {
-    margin-bottom: space.get();
+    margin-bottom: space.get("large");
+    font-size: convert.to-rem(18px);
 
     summary {
       font-weight: 700;
-      line-height: 1.25;
+      line-height: normal;
       display: flex;
       align-items: center;
 
@@ -30,6 +32,7 @@
     &__summary,
     &__summary--opened {
       gap: space.get("xsmall");
+      display: block;
     }
 
     &__summary {
@@ -48,13 +51,25 @@
       }
     }
 
+    &--placement-top {
+      &[open] {
+        display: flex;
+        flex-direction: column-reverse;
+
+        summary {
+          margin-top: space.get("large");
+          margin-bottom: 0;
+        }
+      }
+    }
+
     &[open] {
       svg[data-summary-icon] {
         transform: rotate(180deg) !important;
       }
 
       summary {
-        margin-bottom: space.get();
+        margin-bottom: space.get("large");
       }
 
       .expander__summary:has(+ .expander__summary--opened) {

package/src/components/Expander/tests/{Expander.conformance.test.js → Expander.conformance.test.jsx}

@@ -1,9 +1,7 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import { Expander } from '../Expander';
-import { Icon } from '../../Icon';
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
+import { Icon } from "../../Icon";
+import { Expander } from "../Expander";
 
 const example = (
   <>
@@ -13,10 +11,6 @@ const example = (
       Content
     </Expander>
 
-    <Expander summary="Show details" colorScheme="dark">
-      Content
-    </Expander>
-
     <Expander
       summary="Custom summary"
       renderSummary={({ summary }) => (
@@ -41,19 +35,35 @@ const example = (
     >
       Content
     </Expander>
+
+    <Expander summary="Expander with group" toggleGroup="test-group">
+      Content
+    </Expander>
+
+    <Expander
+      summary="Full width expander"
+      toggleGroup="sync-group"
+      isFullWidth
+    >
+      Content
+    </Expander>
+
+    <Expander summary="Open above trigger" placement="top">
+      Content
+    </Expander>
   </>
 );
 
-it('is valid html', () => {
+it("is valid html", () => {
   const { container } = render(example);
   expect(container).toHTMLValidate({
     rules: {
-      'element-permitted-content': 'off',
+      "element-permitted-content": "off",
     },
   });
 });
 
-it('is accessible', async () => {
+it("is accessible", async () => {
   const { container } = render(example);
   expect(await axe(container)).toHaveNoViolations();
 });

package/src/components/Expander/tests/Expander.unit.test.jsx

@@ -0,0 +1,196 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Icon } from "../../Icon";
+import { Expander } from "../Expander";
+
+describe("Expander", () => {
+  it("renders basic expander with summary text", () => {
+    render(<Expander summary="Show details">Content</Expander>);
+    expect(screen.getByText("Show details")).toBeInTheDocument();
+    expect(screen.getByText("Content")).toBeInTheDocument();
+  });
+
+  it("changes summary text when opened", () => {
+    render(
+      <Expander summary="Show details" summaryOpened="Hide details">
+        Content
+      </Expander>,
+    );
+
+    expect(screen.getByText("Show details")).toBeInTheDocument();
+
+    // Click to open the expander
+    fireEvent.click(screen.getByText("Show details"));
+
+    expect(screen.getByText("Hide details")).toBeInTheDocument();
+  });
+
+  it("renders custom summary with renderSummary prop", () => {
+    render(
+      <Expander
+        summary="Custom summary"
+        renderSummary={({ summary }) => (
+          <>
+            <span data-testid="custom-summary">{summary}</span>
+            <Icon name="accessibility-motor" data-summary-icon size="medium" />
+          </>
+        )}
+      >
+        Content
+      </Expander>,
+    );
+
+    expect(screen.getByTestId("custom-summary")).toHaveTextContent(
+      "Custom summary",
+    );
+  });
+
+  it("renders custom summary when opened with renderSummaryOpened prop", () => {
+    render(
+      <Expander
+        summary="Show details"
+        summaryOpened="Hide details"
+        renderSummaryOpened={({ summaryOpened }) => (
+          <>
+            <span data-testid="custom-summary-opened">{summaryOpened}</span>
+            <Icon name="birthday" size="large" color="danger" />
+          </>
+        )}
+      >
+        Content
+      </Expander>,
+    );
+
+    // Click to open the expander
+    fireEvent.click(screen.getByText("Show details"));
+
+    expect(screen.getByTestId("custom-summary-opened")).toHaveTextContent(
+      "Hide details",
+    );
+  });
+
+  it("toggles content visibility when clicked", () => {
+    const { container } = render(
+      <Expander summary="Show details">
+        <p data-testid="content">Hidden content</p>
+      </Expander>,
+    );
+
+    const details = container.querySelector("details");
+    expect(details).not.toHaveAttribute("open");
+
+    // Click to open
+    fireEvent.click(screen.getByText("Show details"));
+    expect(details).toHaveAttribute("open");
+
+    // Click to close
+    fireEvent.click(screen.getByText("Show details"));
+    expect(details).not.toHaveAttribute("open");
+  });
+
+  it("has default class expander", () => {
+    const { getByTestId } = render(
+      <Expander data-testid="test-id" summary="Show details">
+        Content
+      </Expander>,
+    );
+    expect(getByTestId("test-id")).toHaveClass("expander");
+  });
+
+  it("has additional class when className is set", () => {
+    const { getByTestId } = render(
+      <Expander
+        data-testid="test-id"
+        className="test-class"
+        summary="Show details"
+      >
+        Content
+      </Expander>,
+    );
+    expect(getByTestId("test-id")).toHaveClass("expander");
+    expect(getByTestId("test-id")).toHaveClass("test-class");
+  });
+
+  it("sets data-toggle-group attribute when toggleGroup is provided", () => {
+    const { getByTestId } = render(
+      <Expander
+        data-testid="test-id"
+        summary="Show details"
+        toggleGroup="group1"
+      >
+        Content
+      </Expander>,
+    );
+    expect(getByTestId("test-id")).toHaveAttribute(
+      "data-toggle-group",
+      "group1",
+    );
+  });
+
+  it("does not set data-toggle-group attribute when toggleGroup is not provided", () => {
+    const { getByTestId } = render(
+      <Expander data-testid="test-id" summary="Show details">
+        Content
+      </Expander>,
+    );
+    expect(getByTestId("test-id")).not.toHaveAttribute("data-toggle-group");
+  });
+
+  it("renders multiple expanders with the same toggleGroup", () => {
+    render(
+      <>
+        <Expander
+          data-testid="expander-1"
+          summary="Expander 1"
+          toggleGroup="sync-group"
+        >
+          Content 1
+        </Expander>
+        <Expander
+          data-testid="expander-2"
+          summary="Expander 2"
+          toggleGroup="sync-group"
+        >
+          Content 2
+        </Expander>
+        <Expander
+          data-testid="expander-3"
+          summary="Expander 3"
+          toggleGroup="sync-group"
+        >
+          Content 3
+        </Expander>
+      </>,
+    );
+
+    expect(screen.getByTestId("expander-1")).toHaveAttribute(
+      "data-toggle-group",
+      "sync-group",
+    );
+    expect(screen.getByTestId("expander-2")).toHaveAttribute(
+      "data-toggle-group",
+      "sync-group",
+    );
+    expect(screen.getByTestId("expander-3")).toHaveAttribute(
+      "data-toggle-group",
+      "sync-group",
+    );
+  });
+
+  it("applies isFullWidth class when isFullWidth prop is true", () => {
+    const { getByTestId } = render(
+      <Expander data-testid="test-id" summary="Show details" isFullWidth>
+        Content
+      </Expander>,
+    );
+    expect(getByTestId("test-id")).toHaveClass("expander--fullwidth");
+  });
+
+  it("applies placement-top class when placement prop is top", () => {
+    const { getByTestId } = render(
+      <Expander data-testid="test-id" summary="Show details" placement="top">
+        Content
+      </Expander>,
+    );
+    expect(getByTestId("test-id")).toHaveClass("expander--placement-top");
+  });
+});

package/src/components/FeatureAccordion/FeatureAccordion.static.ts

@@ -1,14 +1,12 @@
 import toggle from "../../scripts/modules/toggleUtil";
 
 interface FeatureAccordionConfig {
-  itemSelector: string;
   bodiesSelector: string;
   buttonSelector: string;
   imageSelector: string;
 }
 
 const defaultConfig: FeatureAccordionConfig = {
-  itemSelector: "[data-feature-accordion-item]",
   bodiesSelector: ".accordion__body",
   buttonSelector: "[data-feature-accordion-toggle]",
   imageSelector: "[data-feature-accordion-image]",
@@ -17,7 +15,6 @@ const defaultConfig: FeatureAccordionConfig = {
 export default class FeatureAccordion {
   private element: HTMLElement;
   private config: FeatureAccordionConfig;
-  private items: HTMLElement[] = [];
   private bodies: HTMLElement[] = [];
   private buttons: HTMLElement[] = [];
   private images: HTMLElement[] = [];
@@ -32,41 +29,97 @@ export default class FeatureAccordion {
   }
 
   private init(): void {
-    this.items = Array.from(
-      this.element.querySelectorAll(this.config.itemSelector),
-    );
     this.bodies = Array.from(
       this.element.querySelectorAll(this.config.bodiesSelector),
     );
     this.buttons = Array.from(
       this.element.querySelectorAll(this.config.buttonSelector),
     );
-    this.images = Array.from(
-      this.element.querySelectorAll(this.config.imageSelector),
-    );
 
-    // Only set the initial active item, let setActive handle open/close
-    const initialButton = this.buttons[0] || null;
-    const initialId = initialButton?.getAttribute("id") || null;
-    this.setActive(initialId);
+    this.generateImagesFromDataAttributes();
+
+    this.setActive(0);
 
     this.buttons.forEach((button) => {
       button.addEventListener("click", this.onClick);
     });
   }
 
+  private generateImagesFromDataAttributes(): void {
+    const desktopPreview = this.element.querySelector(
+      ".feature-accordion__preview.show-md",
+    );
+
+    if (!desktopPreview) return;
+
+    const existingImages = desktopPreview.querySelectorAll(
+      this.config.imageSelector,
+    );
+
+    if (existingImages.length > 0) {
+      this.images = Array.from(existingImages) as HTMLElement[];
+      return;
+    }
+
+    this.images = [];
+
+    this.buttons.forEach((button) => {
+      const imageUrl = button.getAttribute("data-image-url");
+      const imageAlt = button.getAttribute("data-image-alt") || "";
+      const imageSrcSet = button.getAttribute("data-image-srcset");
+
+      if (!imageUrl) return;
+
+      const img = document.createElement("img");
+      img.setAttribute("data-feature-accordion-image", "");
+      img.src = imageUrl;
+      img.alt = imageAlt;
+      if (imageSrcSet) {
+        img.srcset = imageSrcSet;
+      }
+
+      desktopPreview.appendChild(img);
+      this.images.push(img);
+
+      const bodyId = button.getAttribute("aria-controls");
+      if (bodyId) {
+        const body = document.getElementById(bodyId);
+        if (body) {
+          let mobilePreview = body.querySelector(
+            ".feature-accordion__preview.hide-md",
+          );
+
+          if (!mobilePreview) {
+            mobilePreview = document.createElement("div");
+            mobilePreview.className = "feature-accordion__preview hide-md";
+            body.appendChild(mobilePreview);
+          }
+
+          const mobileImg = document.createElement("img");
+          mobileImg.setAttribute("data-feature-accordion-image", "");
+          mobileImg.src = imageUrl;
+          mobileImg.alt = imageAlt;
+          mobileImg.className = "feature-accordion__image--mobile";
+          if (imageSrcSet) {
+            mobileImg.srcset = imageSrcSet;
+          }
+
+          mobilePreview.appendChild(mobileImg);
+        }
+      }
+    });
+  }
+
   private onClick = (e: Event): void => {
     const button = e.currentTarget as HTMLElement;
-    const buttonId = button.getAttribute("id");
-    // Only allow one open at a time: close all, open this
-    this.setActive(buttonId);
+    const index = this.buttons.indexOf(button);
+    this.setActive(index);
   };
 
-  private setActive(buttonId: string | null): void {
-    if (!buttonId) return;
-    this.activeId = buttonId;
+  private setActive(index: number): void {
+    if (index < 0 || index >= this.buttons.length) return;
+    this.activeId = this.buttons[index].getAttribute("id");
 
-    // First, close all items
     this.bodies.forEach((body) => {
       body.setAttribute("hidden", "");
       body.classList.remove("is-active");
@@ -83,38 +136,30 @@ export default class FeatureAccordion {
       });
     });
 
-    // Then open the active item
-    const activeBtn = this.buttons.find(
-      (btn) => btn.getAttribute("id") === buttonId,
-    );
-
-    if (activeBtn) {
-      const activeControls = activeBtn.getAttribute("aria-controls");
-      const activeBody = activeControls
-        ? document.getElementById(activeControls)
-        : null;
-      const activeItem = activeBtn.closest(".feature-accordion__item");
-
-      if (activeBody) {
-        activeBody.removeAttribute("hidden");
-        activeBody.classList.add("is-active");
-      }
+    const activeBtn = this.buttons[index];
+    const activeControls = activeBtn.getAttribute("aria-controls");
+    const activeBody = activeControls
+      ? document.getElementById(activeControls)
+      : null;
+    const activeItem = activeBtn.closest(".feature-accordion__item");
 
-      if (activeItem) {
-        activeItem.classList.add("is-active");
-      }
+    if (activeBody) {
+      activeBody.removeAttribute("hidden");
+      activeBody.classList.add("is-active");
+    }
 
-      toggle({
-        element: activeBtn,
-        attribute: "aria-expanded",
-        value: "true",
-      });
+    if (activeItem) {
+      activeItem.classList.add("is-active");
     }
 
-    // Image switching: only show image paired with active item
-    this.images.forEach((img) => {
-      const imgFor = img.getAttribute("data-feature-accordion-image-for");
-      img.classList.toggle("hide", imgFor !== buttonId);
+    toggle({
+      element: activeBtn,
+      attribute: "aria-expanded",
+      value: "true",
+    });
+
+    this.images.forEach((img, imgIndex) => {
+      img.classList.toggle("hide", imgIndex !== index);
     });
   }