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

package/src/components/Accordion/Accordion.static.ts

@@ -1,12 +1,11 @@
-import { RovingTabindex } from '../../utils/keyboard';
-import toggle from '../../scripts/modules/toggleUtil';
+import { RovingTabindex } from "../../utils/keyboard";
 
 interface AccordionConfig {
   buttonSelector: string;
 }
 
 const defaultConfig: AccordionConfig = {
-  buttonSelector: '[data-accordion-toggle]',
+  buttonSelector: "[data-accordion-toggle]",
 };
 
 export default class Accordion {
@@ -37,59 +36,109 @@ export default class Accordion {
     const button = e.currentTarget as HTMLElement;
 
     if (
-      window.location.hash.substring(1) === button.getAttribute('id') &&
-      button.getAttribute('aria-expanded') === 'false'
+      window.location.hash.substring(1) === button.getAttribute("id") &&
+      button.getAttribute("aria-expanded") === "false"
     ) {
       button.click();
     }
   }
 
+  private toggleAccordionItem(button: HTMLElement): void {
+    const sectionId = button.getAttribute("aria-controls");
+    const section = sectionId
+      ? this.element.querySelector<HTMLElement>(`#${sectionId}`)
+      : null;
+
+    if (!section) return;
+
+    // Get current state
+    const isExpanded = button.getAttribute("aria-expanded") === "true";
+    const newState = !isExpanded;
+
+    // Update button aria-expanded
+    button.setAttribute("aria-expanded", String(newState));
+
+    // Toggle section visibility
+    if (newState) {
+      section.removeAttribute("hidden");
+      this.scrollTriggerIntoModalView(button);
+    } else {
+      section.setAttribute("hidden", "");
+    }
+  }
+
+  private scrollTriggerIntoModalView(button: HTMLElement): void {
+    const modalDialog = button.closest<HTMLElement>(".modal__dialog");
+
+    if (!modalDialog) return;
+
+    const scrollToTrigger = () => {
+      const dialogRect = modalDialog.getBoundingClientRect();
+      const buttonRect = button.getBoundingClientRect();
+      const stickyHeaderOffset = this.getStickyHeaderOffset(modalDialog);
+      const gap = 8;
+      const top =
+        buttonRect.top -
+        dialogRect.top +
+        modalDialog.scrollTop -
+        stickyHeaderOffset -
+        gap;
+
+      modalDialog.scrollTo({
+        top: Math.max(0, top),
+        behavior: "smooth",
+      });
+    };
+
+    if (typeof window.requestAnimationFrame === "function") {
+      window.requestAnimationFrame(scrollToTrigger);
+      return;
+    }
+
+    setTimeout(scrollToTrigger, 0);
+  }
+
+  private getStickyHeaderOffset(modalDialog: HTMLElement): number {
+    const modalHeader =
+      modalDialog.querySelector<HTMLElement>(".modal__header");
+
+    if (!modalHeader) return 0;
+
+    const dialogRect = modalDialog.getBoundingClientRect();
+    const headerRect = modalHeader.getBoundingClientRect();
+    return Math.max(0, headerRect.bottom - dialogRect.top);
+  }
+
   private init(): void {
     this.buttons = Array.from(
-      this.element.querySelectorAll(this.config.buttonSelector)
+      this.element.querySelectorAll(this.config.buttonSelector),
     );
 
     if (!this.rovingTabindex) {
       this.rovingTabindex = new RovingTabindex(this.buttons, {
-        direction: 'vertical',
+        direction: "vertical",
       });
     } else {
       this.rovingTabindex.update(this.buttons);
     }
 
-    this.buttons.forEach(button => {
-      button.addEventListener('focus', this.onFocus);
-
-      // only add click events when there are no toggle actions defined
-      if (!button.getAttribute('data-toggle')) {
-        button.addEventListener('click', this.onClick);
-      }
+    this.buttons.forEach((button) => {
+      button.addEventListener("focus", this.onFocus);
+      button.addEventListener("click", this.onClick);
     });
   }
 
   private onClick(e: Event): void {
     const button = e.currentTarget as HTMLElement;
-    const accordionSection = this.element.querySelector(
-      `#${button.getAttribute('aria-controls')}`
-    );
-
-    toggle({
-      element: button,
-      attribute: 'aria-expanded',
-    });
-
-    toggle({
-      element: accordionSection,
-      attribute: 'hidden',
-    });
+    this.toggleAccordionItem(button);
   }
 
   destroy(): void {
     this.rovingTabindex.destroy();
 
-    this.buttons.forEach(button => {
-      button.removeEventListener('focus', this.onFocus);
-      button.removeEventListener('click', this.onClick);
+    this.buttons.forEach((button) => {
+      button.removeEventListener("focus", this.onFocus);
+      button.removeEventListener("click", this.onClick);
     });
   }
 

package/src/components/Accordion/Accordion.tsx

@@ -1,11 +1,10 @@
 "use client";
 
-import React, { ReactNode } from "react";
 import cx from "classnames";
-
+import React, { ReactNode } from "react";
+import { useStatic } from "@/utils/hooks";
 import AccordionStatic from "./Accordion.static";
 import HeadingContext from "./HeadingContext";
-import { useStatic } from "@/utils/hooks";
 
 const CLASS_ROOT = "accordion";
 
@@ -14,8 +13,8 @@ interface AccordionProps {
   headingLevel?: number;
   /** Accordion is enclosed in another component */
   isEnclosed?: boolean;
-  /** If true, the last item will not have a bottom border */
-  lastItemNoBottomBorder?: boolean;
+  /** If true, the top border on the first item will be removed */
+  noTopBorder?: boolean;
   /** Adjustable spacing */
   size?: "large";
   /** Additional CSS classes */
@@ -32,7 +31,7 @@ const Accordion: React.FC<AccordionProps> = ({
   headingLevel = 3,
   size,
   isEnclosed,
-  lastItemNoBottomBorder,
+  noTopBorder,
   ...other
 }) => {
   const [accordionRef] = useStatic(AccordionStatic);
@@ -42,7 +41,7 @@ const Accordion: React.FC<AccordionProps> = ({
     {
       [`${CLASS_ROOT}--${size}`]: size,
       [`${CLASS_ROOT}--enclosed`]: isEnclosed,
-      [`${CLASS_ROOT}--last-item-no-bottom-border`]: lastItemNoBottomBorder,
+      [`${CLASS_ROOT}--no-top-border`]: noTopBorder,
     },
     className,
   );

package/src/components/Accordion/AccordionHeader.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 import { Icon } from "../Icon";
 
@@ -44,8 +44,6 @@ const AccordionHeader: React.FC<AccordionHeaderProps> = ({
     | "h5"
     | "h6";
 
-  // Only add data-toggle for regular accordions, not for feature accordions
-  const shouldIncludeDataToggle = toggleAttribute === "data-accordion-toggle";
   const buttonProps = {
     type: "button" as const,
     "aria-expanded": isActive,
@@ -53,14 +51,6 @@ const AccordionHeader: React.FC<AccordionHeaderProps> = ({
     "aria-controls": `${id}-section`,
     id,
     [toggleAttribute]: true,
-    ...(shouldIncludeDataToggle && {
-      "data-toggle": JSON.stringify([
-        {
-          target: "self",
-          attribute: "aria-expanded",
-        },
-      ]),
-    }),
     ...other,
   };
 

package/src/components/Accordion/AccordionItem.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React, { ReactNode } from "react";
 import cx from "classnames";
+import React, { ReactNode } from "react";
 
 import { useHydrationSafeId } from "../../utils/hooks";
 
@@ -55,6 +55,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
       )}
       <div
         id={`${currentId}-section`}
+        role="region"
         aria-labelledby={currentId}
         className={cx("accordion__body", { "is-active": isActive })}
         {...(isActive ? {} : { hidden: true })}
@@ -66,4 +67,5 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 };
 
 AccordionItem.displayName = "AccordionItem";
+
 export { AccordionItem };

package/src/components/Accordion/HeadingContext.tsx

@@ -1,5 +1,5 @@
 "use client";
 
-import { createContext } from 'react';
+import { createContext } from "react";
 
 export default createContext<number | null>(null);

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

@@ -1,8 +1,9 @@
 @use "../../../styles/tools/convert";
+@use "../../../styles/tokens/space";
 
 $spacing: (
   default: convert.to-rem(15px) 0,
-  large: convert.to-rem(20px) 0,
+  large: space.get() 0,
 );
 
-$enclosed-spacing: convert.to-rem(20px);
+$enclosed-spacing: space.get();

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

@@ -12,7 +12,7 @@
 @mixin base {
   @include typoMixins.list-unstyled;
 
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
   padding-left: 0;
 }
 
@@ -22,6 +22,10 @@
   justify-content: center;
   border-bottom: 1px solid var(--color-border-strong);
 
+  &:first-child {
+    border-top: 1px solid var(--color-border-strong);
+  }
+
   &:last-child {
     border-bottom: 0px;
   }
@@ -31,12 +35,6 @@
   }
 }
 
-@mixin item-last-child-no-bottom-border {
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
 @mixin enclosed-item($spacing: config.$enclosed-spacing) {
   padding-left: $spacing;
   padding-right: $spacing;
@@ -47,6 +45,7 @@
   margin-bottom: 0;
   width: 100%;
   max-width: none;
+  font-weight: 700;
 }
 
 @mixin header-size($size, $config: config.$spacing) {
@@ -59,10 +58,11 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  text-align: left;
 
   &:hover,
   &:focus-visible {
-    color: color.$orange;
+    color: var(--color-text-accent);
     cursor: pointer;
   }
 
@@ -80,7 +80,8 @@
 }
 
 @mixin body {
-  margin-bottom: space.get();
+  margin-top: space.get();
+  margin-bottom: space.get("large");
 
   p:last-child {
     margin-bottom: 0;

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

@@ -14,8 +14,8 @@
         @include mixins.enclosed-item();
       }
 
-      #{$this}--last-item-no-bottom-border & {
-        @include mixins.item-last-child-no-bottom-border();
+      #{$this}--no-top-border &:first-child {
+        border-top: none;
       }
     }
 

package/src/components/Accordion/tests/{Accordion.static.test.js → Accordion.static.test.jsx}

@@ -1,15 +1,15 @@
 // Mock DOM methods that might not be available in test environment
 Object.defineProperty(document, "getSelection", {
-  value: jest.fn(),
+  value: vi.fn(),
   writable: true,
 });
 
 // Mock addEventListener and removeEventListener
-const mockAddEventListener = jest.fn();
-const mockRemoveEventListener = jest.fn();
+const mockAddEventListener = vi.fn();
+const mockRemoveEventListener = vi.fn();
 
 // Mock querySelectorAll
-const mockQuerySelectorAll = jest.fn();
+const mockQuerySelectorAll = vi.fn();
 
 describe("Accordion.static", () => {
   let mockElement;
@@ -17,42 +17,42 @@ describe("Accordion.static", () => {
 
   beforeEach(() => {
     // Reset mocks
-    jest.clearAllMocks();
+    vi.clearAllMocks();
 
     // Create mock DOM elements
     mockElement = {
-      setAttribute: jest.fn(),
-      getAttribute: jest.fn(),
+      setAttribute: vi.fn(),
+      getAttribute: vi.fn(),
       querySelectorAll: mockQuerySelectorAll,
-      querySelector: jest.fn(),
-      appendChild: jest.fn(),
+      querySelector: vi.fn(),
+      appendChild: vi.fn(),
       ODS_Accordion: null,
     };
 
     mockButtons = [
       {
-        setAttribute: jest.fn(),
-        getAttribute: jest.fn(),
+        setAttribute: vi.fn(),
+        getAttribute: vi.fn(),
         addEventListener: mockAddEventListener,
         removeEventListener: mockRemoveEventListener,
-        click: jest.fn(),
-        focus: jest.fn(),
+        click: vi.fn(),
+        focus: vi.fn(),
       },
       {
-        setAttribute: jest.fn(),
-        getAttribute: jest.fn(),
+        setAttribute: vi.fn(),
+        getAttribute: vi.fn(),
         addEventListener: mockAddEventListener,
         removeEventListener: mockRemoveEventListener,
-        click: jest.fn(),
-        focus: jest.fn(),
+        click: vi.fn(),
+        focus: vi.fn(),
       },
       {
-        setAttribute: jest.fn(),
-        getAttribute: jest.fn(),
+        setAttribute: vi.fn(),
+        getAttribute: vi.fn(),
         addEventListener: mockAddEventListener,
         removeEventListener: mockRemoveEventListener,
-        click: jest.fn(),
-        focus: jest.fn(),
+        click: vi.fn(),
+        focus: vi.fn(),
       },
     ];
 
@@ -175,8 +175,8 @@ describe("Accordion.static", () => {
 
       // Simulate adding event listeners
       mockButtons.forEach((button) => {
-        button.addEventListener("focus", jest.fn());
-        button.addEventListener("click", jest.fn());
+        button.addEventListener("focus", vi.fn());
+        button.addEventListener("click", vi.fn());
       });
 
       // Simulate button interactions

package/src/components/Accordion/tests/{Accordion.unit.test.js → Accordion.unit.test.jsx}

@@ -1,12 +1,10 @@
-import { render, fireEvent } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-
-import { AccordionItem } from "../AccordionItem";
 import { Accordion } from "../Accordion";
+import AccordionStatic from "../Accordion.static";
 import AccordionHeader from "../AccordionHeader";
+import { AccordionItem } from "../AccordionItem";
 import HeadingContext from "../HeadingContext";
-import AccordionStatic from "../Accordion.static";
-import Toggle from "../../../scripts/modules/Toggle";
 import testData from "./data";
 
 // Helper function to initialize accordion static behavior
@@ -22,14 +20,6 @@ const initializeAccordion = (container) => {
 const waitForAccordionInteractivity = async (container) => {
   const accordionElement = initializeAccordion(container);
 
-  // Also initialize Toggle modules for buttons with data-toggle attributes
-  const toggleButtons = container.querySelectorAll("[data-toggle]");
-  toggleButtons.forEach((button) => {
-    if (!button.ODS_Toggle) {
-      new Toggle(button);
-    }
-  });
-
   // Small delay to ensure event listeners are attached
   await new Promise((resolve) => setTimeout(resolve, 0));
   return accordionElement;
@@ -114,13 +104,11 @@ describe("Accordion Component Tests", () => {
         expect(getByTestId("test-id")).toHaveClass("accordion--enclosed");
       });
 
-      it("applies last item no bottom border class", () => {
+      it("applies no top border class", () => {
         const { getByTestId } = render(
-          <Accordion lastItemNoBottomBorder data-testid="test-id" />,
-        );
-        expect(getByTestId("test-id")).toHaveClass(
-          "accordion--last-item-no-bottom-border",
+          <Accordion noTopBorder data-testid="test-id" />,
         );
+        expect(getByTestId("test-id")).toHaveClass("accordion--no-top-border");
       });
 
       it("applies custom className", () => {
@@ -190,12 +178,121 @@ describe("Accordion Component Tests", () => {
           getByTestId("item-test-id-2").getAttribute("aria-expanded"),
         ).toBe("true");
       });
+
+      it("scrolls modal dialog to clicked accordion button when inside modal", async () => {
+        accordion.unmount();
+
+        const { container, getByTestId } = render(
+          <div className="modal__dialog">
+            <div className="modal__header" />
+            <TestingAccordion />
+          </div>,
+        );
+
+        await waitForAccordionInteractivity(container);
+
+        const modalDialog = container.querySelector(".modal__dialog");
+        const modalHeader = container.querySelector(".modal__header");
+        const button = getByTestId("item-test-id-1");
+
+        modalDialog.scrollTop = 120;
+        modalDialog.getBoundingClientRect = vi.fn(() => ({
+          top: 40,
+        }));
+        modalHeader.getBoundingClientRect = vi.fn(() => ({
+          bottom: 120,
+        }));
+        button.getBoundingClientRect = vi.fn(() => ({
+          top: 170,
+        }));
+        modalDialog.scrollTo = vi.fn();
+
+        const rafSpy = vi
+          .spyOn(window, "requestAnimationFrame")
+          .mockImplementation((callback) => {
+            callback();
+            return 1;
+          });
+
+        fireEvent.click(getByTestId("item-test-id-1"));
+
+        expect(modalDialog.scrollTo).toHaveBeenCalledWith({
+          top: 162,
+          behavior: "smooth",
+        });
+
+        rafSpy.mockRestore();
+      });
+
+      it("does not scroll when accordion is outside modal dialog", async () => {
+        const { getByTestId } = accordion;
+
+        const rafSpy = vi.spyOn(window, "requestAnimationFrame");
+
+        fireEvent.click(getByTestId("item-test-id-1"));
+
+        expect(rafSpy).not.toHaveBeenCalled();
+
+        rafSpy.mockRestore();
+      });
+
+      it("scrolls to the clicked button when multiple items are open", async () => {
+        accordion.unmount();
+
+        const { container, getByTestId } = render(
+          <div className="modal__dialog">
+            <div className="modal__header" />
+            <TestingAccordion />
+          </div>,
+        );
+
+        await waitForAccordionInteractivity(container);
+
+        const modalDialog = container.querySelector(".modal__dialog");
+        const modalHeader = container.querySelector(".modal__header");
+        const firstButton = getByTestId("item-test-id-1");
+        const secondButton = getByTestId("item-test-id-2");
+
+        modalDialog.scrollTop = 50;
+        modalDialog.getBoundingClientRect = vi.fn(() => ({
+          top: 20,
+        }));
+        modalHeader.getBoundingClientRect = vi.fn(() => ({
+          bottom: 100,
+        }));
+        firstButton.getBoundingClientRect = vi.fn(() => ({
+          top: 120,
+        }));
+        secondButton.getBoundingClientRect = vi.fn(() => ({
+          top: 260,
+        }));
+        modalDialog.scrollTo = vi.fn();
+
+        const rafSpy = vi
+          .spyOn(window, "requestAnimationFrame")
+          .mockImplementation((callback) => {
+            callback();
+            return 1;
+          });
+
+        fireEvent.click(firstButton);
+        fireEvent.click(secondButton);
+
+        expect(firstButton.getAttribute("aria-expanded")).toBe("true");
+        expect(secondButton.getAttribute("aria-expanded")).toBe("true");
+        expect(modalDialog.scrollTo).toHaveBeenLastCalledWith({
+          top: 202,
+          behavior: "smooth",
+        });
+
+        rafSpy.mockRestore();
+      });
     });
 
     describe("keyboard interactions", () => {
       let accordion;
       beforeEach(async () => {
-        window.document.getSelection = jest.fn();
+        window.document.getSelection = vi.fn();
         accordion = render(<TestingAccordion />);
         // Initialize static accordion behavior
         await waitForAccordionInteractivity(accordion.container);
@@ -441,19 +538,18 @@ describe("Accordion Component Tests", () => {
         ).toBeTruthy();
       });
 
-      it("renders button with data-toggle attribute with correct configuration", () => {
+      it("renders button with data-accordion-toggle attribute", () => {
+        const { getByTestId } = accordionHeader;
+        expect(
+          getByTestId("test-id").getAttribute("data-accordion-toggle"),
+        ).toBeTruthy();
+      });
+
+      it("renders button without data-toggle attribute (uses Accordion.static for toggle logic)", () => {
         const { getByTestId } = accordionHeader;
         const toggleAttribute =
           getByTestId("test-id").getAttribute("data-toggle");
-        expect(toggleAttribute).toBeTruthy();
-
-        const toggleConfig = JSON.parse(toggleAttribute);
-        expect(toggleConfig).toEqual([
-          {
-            target: "self",
-            attribute: "aria-expanded",
-          },
-        ]);
+        expect(toggleAttribute).toBeNull();
       });
 
       it("renders h1 header when value 1 is provided by context", () => {
@@ -599,7 +695,6 @@ describe("Accordion Component Tests", () => {
             headingLevel={2}
             size="large"
             isEnclosed
-            lastItemNoBottomBorder
             className="custom-accordion"
             data-testid="complex-accordion"
           >
@@ -626,7 +721,6 @@ describe("Accordion Component Tests", () => {
         expect(accordion).toHaveClass("accordion--large");
         expect(accordion).toHaveClass("accordion--enclosed");
         expect(accordion).toHaveClass("custom-accordion");
-        expect(accordion).toHaveClass("accordion--last-item-no-bottom-border");
 
         // Check heading level
         const headers = container.querySelectorAll("h2");