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

package/src/components/FeatureAccordion/FeatureAccordion.tsx

@@ -1,19 +1,35 @@
 "use client";
 
+import cx from "classnames";
 import React, { RefCallback, useMemo } from "react";
+import { useStatic } from "../../utils/hooks";
 import { Accordion } from "../Accordion/Accordion";
 import { Grid } from "../Grid/Grid";
 import { GridCol } from "../Grid/GridCol";
 import { Image } from "../Image";
-import cx from "classnames";
-import { useStatic } from "../../utils/hooks";
 import FeatureAccordionStatic from "./FeatureAccordion.static";
 
 const CLASS_ROOT = "feature-accordion";
 
+export interface FeatureAccordionImageSrc {
+  src: string;
+  srcSet?: string;
+}
+
+export interface FeatureAccordionImageResponsive {
+  default: string;
+  sm?: string;
+  lg?: string;
+  xl?: string;
+  xxl?: string;
+  [key: string]: string | undefined;
+}
+
+export type FeatureAccordionImage =
+  | FeatureAccordionImageSrc
+  | FeatureAccordionImageResponsive;
+
 interface AccordionProps {
-  /** Color scheme for whole FeatureAccordion */
-  colorScheme?: "light" | "dark" | "white";
   /** Additional CSS classes */
   className?: string;
 }
@@ -21,24 +37,35 @@ interface AccordionProps {
 const FeatureAccordion = (
   props: AccordionProps & { children: React.ReactNode },
 ) => {
-  const { className, children, colorScheme, ...other } = props;
+  const { className, children, ...other } = props;
   const [featureAccordionRef] = useStatic(FeatureAccordionStatic);
 
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
-      "is-white": colorScheme === "white",
-    },
-    className,
-  );
+  const classes = cx(CLASS_ROOT, className);
 
   const childrenArray = useMemo(
     () => React.Children.toArray(children) as React.ReactElement<any>[],
     [children],
   );
 
+  // Extract image data once to avoid duplication
+  const childrenWithImageData = useMemo(
+    () =>
+      childrenArray.map((child) => ({
+        child,
+        id: child.props.id,
+        imageSrc:
+          child.props["data-image"] ||
+          child.props.image ||
+          child.props["data-image-url"] ||
+          child.props.imageUrl,
+        imageAlt: child.props["data-image-alt"] || child.props.imageAlt,
+        imageSrcSet:
+          child.props["data-image-srcset"] || child.props.imageSrcSet,
+        imageUrl: child.props["data-image-url"] || child.props.imageUrl,
+      })),
+    [childrenArray],
+  );
+
   return (
     <Grid
       className={classes}
@@ -54,33 +81,31 @@ const FeatureAccordion = (
         className={`${CLASS_ROOT}__accordion`}
       >
         <Accordion>
-          {childrenArray.map((child) => {
-            const id = child.props.id;
-            const imageUrl =
-              child.props["data-image-url"] || child.props.imageUrl;
-            const imageAlt =
-              child.props["data-image-alt"] || child.props.imageAlt;
-            if (!imageUrl) return null;
-            return React.cloneElement(child, {
-              children: (
-                <>
-                  <div className={`${CLASS_ROOT}__content`}>
-                    {child.props.children}
-                  </div>
-                  <div className={cx(`${CLASS_ROOT}__preview`, "hide-md")}>
-                    <Image
-                      key={id}
-                      data-feature-accordion-image
-                      data-feature-accordion-image-for={id}
-                      src={imageUrl}
-                      alt={imageAlt}
-                      className={`${CLASS_ROOT}__image--mobile`}
-                    />
-                  </div>
-                </>
-              ),
-            });
-          })}
+          {childrenWithImageData.map(
+            ({ child, id, imageSrc, imageAlt, imageSrcSet, imageUrl }) => {
+              if (!imageSrc) return null;
+
+              return React.cloneElement(child, {
+                children: (
+                  <>
+                    <div className={`${CLASS_ROOT}__content`}>
+                      {child.props.children}
+                    </div>
+                    <div className={cx(`${CLASS_ROOT}__preview`, "hide-md")}>
+                      <Image
+                        key={id}
+                        data-feature-accordion-image
+                        src={imageSrc}
+                        alt={imageAlt}
+                        srcSet={imageSrcSet}
+                        className={`${CLASS_ROOT}__image--mobile`}
+                      />
+                    </div>
+                  </>
+                ),
+              });
+            },
+          )}
         </Accordion>
       </GridCol>
       <GridCol
@@ -88,26 +113,24 @@ const FeatureAccordion = (
           xs: 12,
           md: 6,
         }}
-        className={cx(`${CLASS_ROOT}__preview`, "hide", "show-md")}
+        className={cx(`${CLASS_ROOT}__preview`, "show-md")}
       >
-        {childrenArray.map((child) => {
-          const id = child.props.id;
-          const imageUrl =
-            child.props["data-image-url"] || child.props.imageUrl;
-          const imageAlt =
-            child.props["data-image-alt"] || child.props.imageAlt;
-          if (!imageUrl) return null;
-          return (
-            <Image
-              key={id}
-              data-feature-accordion-image
-              data-feature-accordion-image-for={id}
-              src={imageUrl}
-              alt={imageAlt}
-              className="hide"
-            />
-          );
-        })}
+        {childrenWithImageData.map(
+          ({ id, imageSrc, imageAlt, imageSrcSet, imageUrl }, index) => {
+            if (!imageSrc) return null;
+
+            return (
+              <Image
+                key={id}
+                data-feature-accordion-image
+                src={imageSrc}
+                alt={imageAlt}
+                srcSet={imageSrcSet}
+                className={cx({ hide: index !== 0 })}
+              />
+            );
+          },
+        )}
       </GridCol>
     </Grid>
   );

package/src/components/FeatureAccordion/FeatureAccordionItem.tsx

@@ -1,27 +1,39 @@
 "use client";
 
-import React from "react";
 import cx from "classnames";
+import React from "react";
 import { AccordionItem, AccordionItemProps } from "../Accordion/AccordionItem";
 
 const CLASS_ROOT = "feature-accordion__item";
 
 interface FeatureAccordionItemProps extends AccordionItemProps {
+  image?: string | object;
   imageUrl?: string;
   imageAlt?: string;
+  imageSrcSet?: string;
   [key: string]: any;
 }
 
-const FeatureAccordionItem: React.FC<
-  FeatureAccordionItemProps & { defaultOpen?: boolean }
-> = ({ imageUrl, imageAlt, className, defaultOpen, ...props }) => {
+const FeatureAccordionItem: React.FC<FeatureAccordionItemProps> = ({
+  image,
+  imageUrl,
+  imageAlt,
+  imageSrcSet,
+  className,
+  ...props
+}) => {
+  const dataImageUrl = props["data-image-url"] || imageUrl;
+  const dataImageAlt = props["data-image-alt"] || imageAlt;
+  const dataImage = props["data-image"] || image;
+  const dataImageSrcSet = props["data-image-srcset"] || imageSrcSet;
+
   return (
     <AccordionItem
       className={cx(CLASS_ROOT, className)}
-      data-feature-accordion-item
-      data-image-url={imageUrl}
-      data-image-alt={imageAlt}
-      isActive={defaultOpen}
+      data-image-url={dataImageUrl}
+      data-image-alt={dataImageAlt}
+      data-image={dataImage}
+      data-image-srcset={dataImageSrcSet}
       toggleAttribute="data-feature-accordion-toggle"
       {...props}
     />
@@ -29,4 +41,5 @@ const FeatureAccordionItem: React.FC<
 };
 
 FeatureAccordionItem.displayName = "FeatureAccordionItem";
+
 export { FeatureAccordionItem };

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

@@ -4,18 +4,19 @@
 @use "../../../styles/tokens/space";
 @use "../../../styles/tokens/breakpoint";
 
+@mixin base {
+  color: var(--color-text-default);
+  background-color: var(--color-fill-subtle);
+  border-color: var(--color-fill-disabled);
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
 @mixin accordion {
-  @include breakpoint.get("md") {
-    color: var(--color-text-default);
-    background-color: var(--color-fill-subtle);
-    border-color: var(--color-fill-disabled);
-  }
+  padding-left: 0 !important;
+  padding-right: 0 !important;
 
   .accordion {
-    color: var(--color-text-default);
-    background-color: var(--color-fill-subtle);
-    border-color: var(--color-fill-disabled);
-
     margin: convert.to-rem(87px) space.get("xlarge");
 
     @include breakpoint.get("md", "down") {
@@ -32,19 +33,28 @@
   display: flex;
   padding: 0px !important;
 
-  color: var(--color-text-default);
-  background-color: var(--color-fill-subtle);
-  border-color: var(--color-fill-disabled);
+  .img {
+    margin-bottom: 0px;
+    width: 100%;
+  }
 
   img {
     width: 100%;
-    height: auto;
+    height: 100%;
     object-fit: cover;
     object-position: left center;
     margin: 0px !important;
   }
 }
 
+@mixin content() {
+  margin-bottom: space.get("large");
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+}
+
 @mixin item() {
   border-top: 1px solid var(--color-fill-disabled);
 
@@ -67,8 +77,8 @@
   @include breakpoint.get("sm", "down") {
     .accordion__header,
     .feature-accordion__content {
-      padding-left: space.get("large");
-      padding-right: space.get("large");
+      padding-left: convert.to-rem(15px);
+      padding-right: convert.to-rem(15px);
     }
   }
 }

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

@@ -2,20 +2,22 @@
 
 @layer components {
   .feature-accordion {
+    @include mixins.base();
+
     &__accordion {
       @include mixins.accordion();
     }
 
-    &__preview {
-      @include mixins.preview();
-    }
-
     &__item {
       @include mixins.item();
     }
 
-    &.is-white {
-      --color-fill-subtle: #fff;
+    &__content {
+      @include mixins.content();
+    }
+
+    &__preview {
+      @include mixins.preview();
     }
   }
 }

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

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from "vitest-axe";
 import { FeatureAccordion } from "../FeatureAccordion";
 import { FeatureAccordionItem } from "../FeatureAccordionItem";
 
@@ -28,6 +28,8 @@ describe("FeatureAccordion conformance", () => {
     expect(container).toHTMLValidate({
       rules: {
         "attribute-boolean-style": "off",
+        "prefer-native-element": "off",
+        "attribute-empty-style": "off",
       },
     });
   });

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

@@ -1,8 +1,7 @@
-import React from "react";
-import { render, fireEvent, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { FeatureAccordion } from "../FeatureAccordion";
-import { FeatureAccordionItem } from "../FeatureAccordionItem";
 import FeatureAccordionStatic from "../FeatureAccordion.static";
+import { FeatureAccordionItem } from "../FeatureAccordionItem";
 
 // Helper function to initialize feature accordion static behavior
 const initializeFeatureAccordion = (container) => {
@@ -93,9 +92,4 @@ describe("FeatureAccordion", () => {
     const { container } = renderAccordion({ "data-testid": "fa" });
     expect(container.firstChild).toHaveAttribute("data-testid", "fa");
   });
-
-  it("applies is-white class when colorScheme='white'", () => {
-    const { container } = renderAccordion({ colorScheme: "white" });
-    expect(container.firstChild).toHaveClass("is-white");
-  });
 });

package/src/components/Footer/Footer.static.ts

@@ -0,0 +1,130 @@
+import { CLASS_ACCORDION_TOGGLE, CLASS_MENU_SECTION } from "./constants";
+
+const MOBILE_MEDIA_QUERY = "(max-width: 479.98px)";
+
+interface FooterSection {
+  element: HTMLElement;
+  toggle: HTMLButtonElement | null;
+  panel: HTMLElement | null;
+}
+
+export default class Footer {
+  element!: HTMLElement;
+  sections!: FooterSection[];
+  mediaQueryList!: MediaQueryList;
+  onToggleClick!: (event: Event) => void;
+  onMediaQueryChange!: () => void;
+
+  constructor(element: HTMLElement) {
+    if ((element as any).ODS_Footer) {
+      return (element as any).ODS_Footer;
+    }
+
+    this.element = element;
+    this.sections = [];
+    this.mediaQueryList = window.matchMedia(MOBILE_MEDIA_QUERY);
+
+    this.onToggleClick = this.handleToggleClick.bind(this);
+    this.onMediaQueryChange = this.syncViewportState.bind(this);
+
+    (this.element as any).ODS_Footer = this;
+
+    this.init();
+    return this;
+  }
+
+  static getInstance(el: HTMLElement): Footer | null {
+    return el && (el as any).ODS_Footer ? (el as any).ODS_Footer : null;
+  }
+
+  init(): void {
+    this.sections = Array.from(
+      this.element.querySelectorAll(
+        `[data-footer-section].${CLASS_MENU_SECTION}`,
+      ),
+    ).map((section) => {
+      const toggle = section.querySelector(
+        `.${CLASS_ACCORDION_TOGGLE}`,
+      ) as HTMLButtonElement | null;
+      const panelId = toggle?.getAttribute("aria-controls");
+      const panel = panelId
+        ? (this.element.querySelector(`#${panelId}`) as HTMLElement | null)
+        : null;
+
+      if (toggle) {
+        toggle.addEventListener("click", this.onToggleClick);
+      }
+
+      return {
+        element: section as HTMLElement,
+        toggle,
+        panel,
+      };
+    });
+
+    this.mediaQueryList.addEventListener("change", this.onMediaQueryChange);
+
+    this.syncViewportState();
+  }
+
+  private setSectionState(section: FooterSection, isExpanded: boolean): void {
+    if (!section.toggle || !section.panel) return;
+
+    section.toggle.setAttribute("aria-expanded", String(isExpanded));
+    section.panel.hidden = !isExpanded;
+  }
+
+  private syncViewportState(): void {
+    const isMobile = this.mediaQueryList.matches;
+
+    this.sections.forEach((section, index) => {
+      if (!section.toggle || !section.panel) return;
+
+      if (!isMobile) {
+        this.setSectionState(section, true);
+        section.element.removeAttribute("data-footer-mobile-initialized");
+        return;
+      }
+
+      const isInitialized =
+        section.element.getAttribute("data-footer-mobile-initialized") ===
+        "true";
+
+      if (!isInitialized) {
+        this.setSectionState(section, index === 0);
+        section.element.setAttribute("data-footer-mobile-initialized", "true");
+        return;
+      }
+
+      const isExpanded =
+        section.toggle.getAttribute("aria-expanded") === "true";
+      this.setSectionState(section, isExpanded);
+    });
+  }
+
+  private handleToggleClick(event: Event): void {
+    if (!this.mediaQueryList.matches) return;
+
+    const toggle = event.currentTarget as HTMLButtonElement;
+    const section = this.sections.find((item) => item.toggle === toggle);
+
+    if (!section || !section.toggle) return;
+
+    const isExpanded = section.toggle.getAttribute("aria-expanded") === "true";
+    this.setSectionState(section, !isExpanded);
+  }
+
+  destroy(): void {
+    this.sections.forEach((section) => {
+      if (!section.toggle) return;
+      section.toggle.removeEventListener("click", this.onToggleClick);
+    });
+
+    this.mediaQueryList.removeEventListener("change", this.onMediaQueryChange);
+  }
+
+  update(): void {
+    this.destroy();
+    this.init();
+  }
+}