@orangesk/orange-design-system 2.0.0-beta.2 → 2.0.0-beta.20

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,66 @@ 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(`#${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");
+    } else {
+      section.setAttribute("hidden", "");
+    }
+  }
+
   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

@@ -14,8 +14,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 +32,7 @@ const Accordion: React.FC<AccordionProps> = ({
   headingLevel = 3,
   size,
   isEnclosed,
-  lastItemNoBottomBorder,
+  noTopBorder,
   ...other
 }) => {
   const [accordionRef] = useStatic(AccordionStatic);
@@ -42,7 +42,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

@@ -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

@@ -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 })}

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

@@ -1,8 +1,9 @@
-@use '../../../styles/tokens/space';
+@use "../../../styles/tools/convert";
+@use "../../../styles/tokens/space";
 
 $spacing: (
-  default: space.get('small') 0,
-  large: space.get('medium') 0,
+  default: convert.to-rem(15px) 0,
+  large: space.get() 0,
 );
 
-$enclosed-spacing: space.get('medium');
+$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;
 }
 
@@ -20,10 +20,14 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  border-top: 1px solid var(--color-border-strong);
+  border-bottom: 1px solid var(--color-border-strong);
+
+  &:first-child {
+    border-top: 1px solid var(--color-border-strong);
+  }
 
   &:last-child {
-    border-bottom: 1px solid var(--color-border-strong);
+    border-bottom: 0px;
   }
 
   ul {
@@ -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.unit.test.js

@@ -6,7 +6,6 @@ import { Accordion } from "../Accordion";
 import AccordionHeader from "../AccordionHeader";
 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 +21,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 +105,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", () => {
@@ -441,19 +430,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 +587,6 @@ describe("Accordion Component Tests", () => {
             headingLevel={2}
             size="large"
             isEnclosed
-            lastItemNoBottomBorder
             className="custom-accordion"
             data-testid="complex-accordion"
           >
@@ -626,7 +613,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");

package/src/components/Alert/Alert.tsx

@@ -27,8 +27,6 @@ interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Type of alert, sets icon and color */
   type?: AlertType;
   className?: string;
-  /** Sets Alert to use specific color scheme */
-  colorScheme?: "dark" | "light";
 }
 
 const CLASS_ROOT = "alert";
@@ -42,7 +40,6 @@ const Alert: React.FC<AlertProps> = ({
   headingLevel = 3,
   actionButtons,
   isFullWidth,
-  colorScheme,
   onClose,
   ...other
 }) => {
@@ -52,8 +49,6 @@ const Alert: React.FC<AlertProps> = ({
     {
       [`${CLASS_ROOT}--${type}`]: type,
       [`${CLASS_ROOT}--full-width`]: isFullWidth,
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
     },
     className,
   );
@@ -69,7 +64,6 @@ const Alert: React.FC<AlertProps> = ({
         headingLevel,
         actionButtons,
         isFullWidth,
-        colorScheme,
         onClose,
         ...other,
       })) ||

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

@@ -5,7 +5,7 @@
 
 $base: (
   max-width: convert.to-rem(590px),
-  margin-bottom: space.get(),
+  margin-bottom: space.get("large"),
   padding: space.get("medium"),
   background: var(--color-fill-information),
   border: 1px solid var(--color-border-information),

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

@@ -46,7 +46,9 @@
   margin-top: convert.to-rem(2px);
 
   p {
-    @include generate.css-map(typography.$body-text, "small");
+    @include generate.css-map(
+      sass-map.get(sass-map.get(typography.$body-text, "small"), "default")
+    );
   }
 
   > :last-child {

package/src/components/Alert/tests/Alert.test.js

@@ -86,20 +86,6 @@ describe("rendering", () => {
   });
 
   describe("palette and theme logic", () => {
-    it("should have is-dark class when colorScheme is 'dark'", () => {
-      const { getByTestId } = render(
-        <Alert data-testid="test" colorScheme="dark" />,
-      );
-      expect(getByTestId("test")).toHaveClass("is-dark");
-    });
-
-    it("should have is-light class when colorScheme is 'light'", () => {
-      const { getByTestId } = render(
-        <Alert data-testid="test" colorScheme="light" />,
-      );
-      expect(getByTestId("test")).toHaveClass("is-light");
-    });
-
     it("should inherit color variables from parent theme", () => {
       const { getByTestId } = render(
         <div className="is-dark">