@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.3

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

@@ -0,0 +1,121 @@
+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-accordion-toggle]",
+  imageSelector: "[data-feature-accordion-image]",
+};
+
+export default class FeatureAccordion {
+  private element: HTMLElement;
+  private config: FeatureAccordionConfig;
+  private items: HTMLElement[] = [];
+  private bodies: HTMLElement[] = [];
+  private buttons: HTMLElement[] = [];
+  private images: HTMLElement[] = [];
+  private activeId: string | null = null;
+
+  constructor(element: HTMLElement, config?: Partial<FeatureAccordionConfig>) {
+    this.element = element;
+    this.config = { ...defaultConfig, ...config };
+    (this.element as any).ODS_FeatureAccordion = this;
+    this.init();
+    return this;
+  }
+
+  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 initialActive = this.items[0] || null;
+    const initialId = initialActive?.getAttribute("id") || null;
+    this.setActive(initialId);
+
+    this.buttons.forEach((button) => {
+      button.addEventListener("click", this.onClick);
+    });
+  }
+
+  private onClick = (e: Event): void => {
+    const button = e.currentTarget as HTMLElement;
+    // Find the parent item for this button
+    const item = button.closest(this.config.itemSelector) as HTMLElement;
+    const itemId = item?.getAttribute("id") || null;
+    // Only allow one open at a time: close all, open this
+    this.setActive(itemId);
+  };
+
+  private setActive(itemId: string | null): void {
+    if (!itemId) return;
+    this.activeId = itemId;
+
+    const activeBtn = this.buttons.find(
+      (btn) => btn.getAttribute("id") === itemId,
+    );
+
+    const activeControls = activeBtn?.getAttribute("aria-controls");
+
+    this.bodies.forEach((body) => {
+      if (body.id === activeControls) {
+        body.removeAttribute("hidden");
+      } else {
+        body.setAttribute("hidden", "");
+      }
+    });
+
+    this.buttons.forEach((btn) => {
+      const isActive = btn.getAttribute("id") === itemId;
+      const item = btn.closest(".feature-accordion__item");
+
+      item?.classList.toggle("is-active", isActive);
+
+      toggle({
+        element: btn,
+        attribute: "aria-expanded",
+        value: isActive ? "true" : "false",
+      });
+    });
+
+    // 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 !== itemId);
+    });
+  }
+
+  destroy(): void {
+    this.buttons.forEach((button) => {
+      button.removeEventListener("click", this.onClick);
+    });
+  }
+
+  update(): void {
+    this.destroy();
+    this.init();
+  }
+
+  static getInstance(el: HTMLElement): FeatureAccordion | null {
+    return el && (el as any).ODS_FeatureAccordion
+      ? (el as any).ODS_FeatureAccordion
+      : null;
+  }
+}

package/src/components/FeatureAccordion/FeatureAccordion.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import React, { RefCallback, useMemo } from "react";
+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";
+
+interface AccordionProps {
+  /** Color scheme for whole FeatureAccordion */
+  colorScheme?: "light" | "dark" | "white";
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const FeatureAccordion = (
+  props: AccordionProps & { children: React.ReactNode },
+) => {
+  const { className, children, colorScheme, ...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 childrenArray = useMemo(
+    () => React.Children.toArray(children) as React.ReactElement<any>[],
+    [children],
+  );
+
+  return (
+    <Grid
+      className={classes}
+      data-feature-accordion
+      ref={featureAccordionRef as RefCallback<HTMLDivElement>}
+      {...other}
+    >
+      <GridCol
+        size={{
+          xs: 12,
+          md: 6,
+        }}
+        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>
+                </>
+              ),
+            });
+          })}
+        </Accordion>
+      </GridCol>
+      <GridCol
+        size={{
+          xs: 12,
+          md: 6,
+        }}
+        className={cx(`${CLASS_ROOT}__preview`, "hide", "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"
+            />
+          );
+        })}
+      </GridCol>
+    </Grid>
+  );
+};
+
+export { FeatureAccordion };

package/src/components/FeatureAccordion/FeatureAccordionItem.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import React from "react";
+import cx from "classnames";
+import { AccordionItem, AccordionItemProps } from "../Accordion/AccordionItem";
+
+const CLASS_ROOT = "feature-accordion__item";
+
+interface FeatureAccordionItemProps extends AccordionItemProps {
+  imageUrl?: string;
+  imageAlt?: string;
+  [key: string]: any;
+}
+
+const FeatureAccordionItem: React.FC<
+  FeatureAccordionItemProps & { defaultOpen?: boolean }
+> = ({ imageUrl, imageAlt, className, defaultOpen, ...props }) => {
+  return (
+    <AccordionItem
+      className={cx(CLASS_ROOT, className)}
+      data-feature-accordion-item
+      data-image-url={imageUrl}
+      data-image-alt={imageAlt}
+      isActive={defaultOpen}
+      {...props}
+    />
+  );
+};
+
+FeatureAccordionItem.displayName = "FeatureAccordionItem";
+export { FeatureAccordionItem };

package/src/components/FeatureAccordion/index.ts

@@ -0,0 +1,2 @@
+export { FeatureAccordion } from "./FeatureAccordion";
+export { FeatureAccordionItem } from "./FeatureAccordionItem";

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

@@ -0,0 +1,74 @@
+@use "sass:map" as sass-map;
+@use "../../../styles/tools/convert";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/breakpoint";
+
+@mixin accordion {
+  @include breakpoint.get("md") {
+    color: var(--color-text-default);
+    background-color: var(--color-fill-subtle);
+    border-color: var(--color-fill-disabled);
+  }
+
+  .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") {
+      margin: space.get("xlarge") space.get("large");
+    }
+
+    @include breakpoint.get("sm", "down") {
+      margin: 0;
+    }
+  }
+}
+
+@mixin preview {
+  display: flex;
+  padding: 0px !important;
+
+  color: var(--color-text-default);
+  background-color: var(--color-fill-subtle);
+  border-color: var(--color-fill-disabled);
+
+  img {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+    object-position: left center;
+    margin: 0px !important;
+  }
+}
+
+@mixin item() {
+  border-top: 1px solid var(--color-fill-disabled);
+
+  &:first-child {
+    border-top: none;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.is-active {
+    border-top: 4px solid var(--color-border-accent);
+  }
+
+  .accordion__body {
+    margin-bottom: 0;
+  }
+
+  @include breakpoint.get("sm", "down") {
+    .accordion__header,
+    .feature-accordion__content {
+      padding-left: space.get("large");
+      padding-right: space.get("large");
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+@use "./mixins";
+
+@layer components {
+  .feature-accordion {
+    &__accordion {
+      @include mixins.accordion();
+    }
+
+    &__preview {
+      @include mixins.preview();
+    }
+
+    &__item {
+      @include mixins.item();
+    }
+
+    &.is-white {
+      --color-fill-subtle: #fff;
+    }
+  }
+}

package/src/components/FeatureAccordion/tests/FeatureAccordion.conformance.test.js

@@ -0,0 +1,92 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { FeatureAccordion } from "../FeatureAccordion";
+import { FeatureAccordionItem } from "../FeatureAccordionItem";
+
+describe("FeatureAccordion conformance", () => {
+  it("renders valid HTML structure", () => {
+    const { container } = render(
+      <FeatureAccordion>
+        <FeatureAccordionItem
+          id="item-1"
+          title="Item 1"
+          imageUrl="/img1.png"
+          imageAlt="Image 1"
+        >
+          Content 1
+        </FeatureAccordionItem>
+        <FeatureAccordionItem
+          id="item-2"
+          title="Item 2"
+          imageUrl="/img2.png"
+          imageAlt="Image 2"
+        >
+          Content 2
+        </FeatureAccordionItem>
+      </FeatureAccordion>,
+    );
+    expect(container).toHTMLValidate({
+      rules: {
+        "attribute-boolean-style": "off",
+      },
+    });
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(
+      <FeatureAccordion>
+        <FeatureAccordionItem
+          id="item-1"
+          title="Item 1"
+          imageUrl="/img1.png"
+          imageAlt="Image 1"
+        >
+          Content 1
+        </FeatureAccordionItem>
+        <FeatureAccordionItem
+          id="item-2"
+          title="Item 2"
+          imageUrl="/img2.png"
+          imageAlt="Image 2"
+        >
+          Content 2
+        </FeatureAccordionItem>
+      </FeatureAccordion>,
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("applies default and custom className", () => {
+    const { container } = render(
+      <FeatureAccordion className="custom-class">
+        <FeatureAccordionItem
+          id="item-1"
+          title="Item 1"
+          imageUrl="/img1.png"
+          imageAlt="Image 1"
+        >
+          Content 1
+        </FeatureAccordionItem>
+      </FeatureAccordion>,
+    );
+    expect(container.firstChild).toHaveClass("feature-accordion");
+    expect(container.firstChild).toHaveClass("custom-class");
+  });
+
+  it("forwards props to the root element", () => {
+    const { container } = render(
+      <FeatureAccordion data-testid="fa-root">
+        <FeatureAccordionItem
+          id="item-1"
+          title="Item 1"
+          imageUrl="/img1.png"
+          imageAlt="Image 1"
+        >
+          Content 1
+        </FeatureAccordionItem>
+      </FeatureAccordion>,
+    );
+    expect(container.firstChild).toHaveAttribute("data-testid", "fa-root");
+  });
+});

package/src/components/FeatureAccordion/tests/FeatureAccordion.unit.test.js

@@ -0,0 +1,80 @@
+import React from "react";
+import { render, fireEvent, screen } from "@testing-library/react";
+import { FeatureAccordion } from "../FeatureAccordion";
+import { FeatureAccordionItem } from "../FeatureAccordionItem";
+
+const renderAccordion = (props = {}) =>
+  render(
+    <FeatureAccordion {...props}>
+      <FeatureAccordionItem
+        id="item-1"
+        title="Item 1"
+        imageUrl="/img1.png"
+        imageAlt="Image 1"
+      >
+        Content 1
+      </FeatureAccordionItem>
+      <FeatureAccordionItem
+        id="item-2"
+        title="Item 2"
+        imageUrl="/img2.png"
+        imageAlt="Image 2"
+      >
+        Content 2
+      </FeatureAccordionItem>
+    </FeatureAccordion>,
+  );
+
+describe("FeatureAccordion", () => {
+  it("renders with default class", () => {
+    const { container } = renderAccordion();
+    expect(container.firstChild).toHaveClass("feature-accordion");
+  });
+
+  it("renders all items", () => {
+    renderAccordion();
+    expect(screen.getByText("Item 1")).toBeInTheDocument();
+    expect(screen.getByText("Item 2")).toBeInTheDocument();
+  });
+
+  it("renders children as FeatureAccordionItem", () => {
+    renderAccordion();
+    expect(screen.getByText("Item 1")).toBeInTheDocument();
+    expect(screen.getByText("Item 2")).toBeInTheDocument();
+  });
+
+  it("opens only one item at a time", () => {
+    renderAccordion();
+    const item1 = screen.getByText("Item 1");
+    const item2 = screen.getByText("Item 2");
+    fireEvent.click(item2);
+    const item1Container = item1.closest(".feature-accordion__item");
+    const item2Container = item2.closest(".feature-accordion__item");
+    expect(item2Container).toHaveClass("is-active");
+    expect(item1Container).not.toHaveClass("is-active");
+  });
+
+  it("shows correct image for active item", () => {
+    renderAccordion();
+    fireEvent.click(screen.getByText("Item 2"));
+    const imgs = screen.getAllByAltText("Image 2");
+    const visibleImg = imgs.find((img) => !img.classList.contains("hide"));
+    expect(visibleImg).toBeInTheDocument();
+    expect(visibleImg).toHaveAttribute("src", "/img2.png");
+  });
+
+  it("merges additional className", () => {
+    const { container } = renderAccordion({ className: "test-class" });
+    expect(container.firstChild).toHaveClass("test-class");
+  });
+
+  it("spreads additional props to the rendered element", () => {
+    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.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import cx from "classnames";
+
+import { Section } from "../Section";
+import { SectionProps } from "../Section/Section";
+import { Image } from "../Image";
+import { Grid, GridCol } from "../Grid";
+import { Link } from "../Link";
+import footerData from "./data";
+import { Bar, BarItem } from "../Bar";
+
+interface FooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Sets Footer to use inverse color scheme */
+  isInverse?: boolean;
+  /** Custom data to override default footer data */
+  data?: typeof footerData;
+  className?: string;
+}
+
+const CLASS_ROOT = "footer";
+
+const Footer: React.FC<FooterProps & SectionProps> = ({
+  className,
+  isInverse,
+  data = footerData,
+  ...other
+}) => {
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      [`${CLASS_ROOT}--inverse`]: isInverse,
+    },
+    className,
+  );
+
+  return (
+    <Section tag="footer" className={classes} {...other}>
+      <Image src="/logo.svg" alt="logo" className="mb-xlarge" />
+      <Grid rowGapSize="medium">
+        {data.columns.map((column, index) => (
+          <GridCol
+            size={{
+              lg: 3,
+              md: 4,
+              sm: 6,
+              xs: 12,
+            }}
+            key={`footer-column-${index}`}
+          >
+            <h5 className="mb-large">{column.title}</h5>
+            <ul className="list-unstyled">
+              {column.links.map((link, linkIndex) => (
+                <li
+                  className="mb-small"
+                  key={`footer-link-${index}-${linkIndex}`}
+                >
+                  <Link className={`${CLASS_ROOT}__link`} href={link.url}>
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </GridCol>
+        ))}
+      </Grid>
+
+      <hr />
+      {/* TODO - socky siete */}
+      <p className="small">Sledujte nás</p>
+
+      <hr />
+
+      <Grid className="align-items-end" rowGapSize="xlarge">
+        <GridCol size={{ xs: 12, md: 9 }}>
+          <Bar className="mb-none" space="small">
+            {data.bottomLinks?.map((link, index) => (
+              <BarItem key={`footer-bottom-link-${index}`}>
+                <Link href={link.url} isNormal>
+                  {link.label}
+                </Link>
+              </BarItem>
+            ))}
+          </Bar>
+        </GridCol>
+        <GridCol size={{ xs: 12, md: 3 }}>{data.copyright}</GridCol>
+      </Grid>
+    </Section>
+  );
+};
+
+Footer.displayName = "Footer";
+
+export { Footer };