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

package/src/assets/icons/snapchat.svg

@@ -0,0 +1,4 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M40.4377 73.4126C40.2541 73.4126 40.0739 73.4075 39.8935 73.3988H39.8931C39.7781 73.4079 39.6579 73.4126 39.5377 73.4126C35.3185 73.4126 32.6105 71.4984 29.9917 69.6469C28.1836 68.3691 26.4773 67.1631 24.4668 66.8283C23.4858 66.6659 22.5092 66.5833 21.5656 66.5833C19.8658 66.5833 18.5246 66.8459 17.5454 67.0372C16.9505 67.154 16.4371 67.254 16.0472 67.254C15.6395 67.254 15.1977 67.1657 15.006 66.5099C14.8391 65.9419 14.7185 65.3916 14.6026 64.8592C14.3034 63.4893 14.0911 62.6467 13.5169 62.5586C6.8252 61.5251 4.90984 60.1156 4.48277 59.1154C4.42237 58.9724 4.38803 58.8291 4.37974 58.6873C4.35813 58.3033 4.63025 57.9639 5.00984 57.9021C15.2967 56.2081 19.9098 45.6942 20.1014 45.2477C20.1066 45.2354 20.1121 45.2235 20.1177 45.2112C20.7474 43.9352 20.8707 42.8275 20.4854 41.9198C19.7795 40.2562 17.4771 39.5249 15.9531 39.0415C15.5801 38.9235 15.2266 38.812 14.9478 38.7019C11.9066 37.4994 11.6537 36.2653 11.7729 35.6364C11.9769 34.5647 13.409 33.8178 14.5674 33.8178C14.885 33.8178 15.1646 33.8742 15.3997 33.9839C16.7678 34.6249 18.0008 34.9495 19.0648 34.9495C20.5347 34.9495 21.1763 34.3318 21.2547 34.2507C21.2173 33.5546 21.1711 32.8275 21.1238 32.0772C20.8173 27.2136 20.4377 21.1705 21.9763 17.721C26.5878 7.38125 36.3672 6.57782 39.2545 6.57782C39.3284 6.57782 40.5203 6.56509 40.5203 6.56509L40.6913 6.56448C43.5854 6.56448 53.3858 7.36913 57.9999 17.7148C59.5389 21.1661 59.1583 27.2144 58.8515 32.0742L58.8387 32.2855C58.7963 32.9623 58.7551 33.6198 58.7208 34.2497C58.7943 34.3247 59.3846 34.8928 60.7171 34.9439H60.7185C61.7313 34.9053 62.8953 34.5823 64.1727 33.9839C64.547 33.8091 64.9628 33.7722 65.2456 33.7722C65.6781 33.7722 66.1163 33.8558 66.4803 34.0077L66.5022 34.0166C67.5355 34.3831 68.2123 35.1071 68.2268 35.8639C68.2404 36.5764 67.6963 37.6477 65.0276 38.7019C64.7513 38.8105 64.3977 38.9227 64.0234 39.0415C62.4977 39.5257 60.1959 40.2562 59.4907 41.9194C59.1048 42.8271 59.2284 43.9338 59.8577 45.2103C59.8634 45.2227 59.8696 45.2348 59.8745 45.2477C60.066 45.6938 64.6749 56.2047 74.9664 57.9006C75.3464 57.9631 75.6177 58.3021 75.5969 58.6865C75.5884 58.8307 75.5533 58.976 75.4917 59.117C75.0672 60.1099 73.1535 61.5176 66.4593 62.552C65.9125 62.6358 65.7004 63.3487 65.3741 64.8429C65.2555 65.3865 65.1351 65.9209 64.9698 66.4827C64.8274 66.9701 64.5234 67.1982 64.0125 67.1982H63.9292C63.5745 67.1982 63.0703 67.1348 62.4313 67.0093C61.2979 66.7875 60.0272 66.5833 58.4107 66.5833C57.4664 66.5833 56.4896 66.6659 55.508 66.8283C53.4997 67.1631 51.7945 68.3669 49.9896 69.6429C47.3658 71.4984 44.6581 73.4126 40.4377 73.4126" fill="currentColor"/>
+</svg>

package/src/assets/icons/tiktok.svg

@@ -0,0 +1,4 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.2918 71.929C12.7069 67.7436 9.07935 60.9778 9.07935 53.3433C9.07935 40.637 19.1293 30.3358 31.5275 30.3358C32.5577 30.3352 33.5867 30.4068 34.6074 30.5499L34.607 43.2758C33.6246 42.9562 32.5773 42.7828 31.4909 42.7828C25.8196 42.7828 21.223 47.495 21.223 53.3075C21.223 57.4172 23.5206 60.9758 26.8712 62.7091L27.5804 63.0418C28.786 63.5512 30.106 63.8318 31.4909 63.8318C37.1504 63.8318 41.7391 59.1389 41.7587 53.3433V3.62488H53.9738V5.22584C54.0169 5.70469 54.079 6.18153 54.1599 6.65518L54.3426 7.57586C55.3734 12.1347 58.1501 16.0071 61.9123 18.4135C64.6073 20.1373 67.721 21.0491 70.8975 21.0442V23.6937L70.4424 23.5873L70.0256 23.4784L70.8975 23.6937V33.4921C64.5873 33.4921 58.7447 31.4357 53.9738 27.941V53.3437C53.9738 66.0509 43.9239 76.3521 31.527 76.3521C26.9017 76.3521 22.6023 74.9188 19.0308 72.4606L18.2918 71.929Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/whatsapp.svg

@@ -0,0 +1,4 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M56.6452 47.2391C55.7407 46.7866 51.294 44.5986 50.4648 44.2966C49.6356 43.9947 49.0327 43.8439 48.4297 44.7491C47.8267 45.6546 46.0934 47.692 45.5655 48.2959C45.038 48.8992 44.5104 48.9751 43.6061 48.5222C42.7014 48.0693 39.7869 47.1143 36.3321 44.0326C33.6431 41.6343 31.8279 38.6724 31.3002 37.7667C30.7727 36.8614 31.2442 36.3719 31.697 35.9208C32.1039 35.5155 32.6015 34.8642 33.0537 34.3362C33.506 33.808 33.6566 33.4305 33.9581 32.8273C34.2596 32.2235 34.109 31.6953 33.8828 31.2426C33.6566 30.7899 31.8477 26.3376 31.094 24.5264C30.3598 22.763 29.6141 23.0019 29.0589 22.9738C28.5319 22.9475 27.9282 22.942 27.3254 22.942C26.7224 22.942 25.7424 23.1683 24.9134 24.0737C24.0842 24.9794 21.7476 27.1676 21.7476 31.6196C21.7476 36.0718 24.9887 40.3726 25.4411 40.9763C25.8932 41.5801 31.819 50.716 40.8926 54.6341C43.0506 55.566 44.7355 56.1226 46.0489 56.5392C48.2158 57.228 50.1876 57.1308 51.746 56.8978C53.4838 56.6382 57.0974 54.7097 57.8512 52.597C58.6049 50.4839 58.6049 48.673 58.3787 48.2959C58.1527 47.9185 57.5497 47.692 56.6452 47.2391M40.142 69.7735H40.1298C34.731 69.7714 29.4356 68.321 24.816 65.5796L23.7174 64.9275L12.3298 67.9147L15.3692 56.8119L14.6539 55.6736C11.6421 50.8831 10.0515 45.3467 10.0537 39.6614C10.0603 23.0723 23.5577 9.57596 40.154 9.57596C48.1904 9.57874 55.7448 12.7126 61.4256 18.3997C67.1061 24.0867 70.2327 31.6463 70.2297 39.6856C70.2229 56.2761 56.7255 69.7735 40.142 69.7735M65.7475 14.0783C58.913 7.23586 49.824 3.46601 40.1402 3.4622C20.1874 3.4622 3.9482 19.7002 3.94022 39.659C3.93761 46.0392 5.60444 52.2667 8.77233 57.7567L3.63681 76.5149L22.8267 71.4809C28.1141 74.3649 34.0672 75.885 40.1258 75.8871H40.1405H40.1407C60.0914 75.8871 76.3321 59.6474 76.3401 39.688C76.3438 30.0156 72.5819 20.9206 65.7475 14.0783" fill="currentColor"/>
+</svg>

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