@orangesk/orange-design-system 2.0.0-alpha.0 → 2.0.0-alpha.2

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

@@ -0,0 +1,124 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { Expander } from '../Expander';
+import { Icon } from '../../Icon';
+
+describe('Expander', () => {
+  it('renders basic expander with summary text', () => {
+    render(<Expander summary="Show details">Content</Expander>);
+    expect(screen.getByText('Show details')).toBeInTheDocument();
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+
+  it('changes summary text when opened', () => {
+    render(
+      <Expander summary="Show details" summaryOpened="Hide details">
+        Content
+      </Expander>
+    );
+
+    expect(screen.getByText('Show details')).toBeInTheDocument();
+
+    // Click to open the expander
+    fireEvent.click(screen.getByText('Show details'));
+
+    expect(screen.getByText('Hide details')).toBeInTheDocument();
+  });
+
+  it('supports inverse mode', () => {
+    const { container } = render(
+      <Expander summary="Show details" colorScheme="dark">
+        Content
+      </Expander>
+    );
+
+    expect(container.querySelector('.expander.is-dark')).toBeInTheDocument();
+  });
+
+  it('renders custom summary with renderSummary prop', () => {
+    render(
+      <Expander
+        summary="Custom summary"
+        renderSummary={({ summary }) => (
+          <>
+            <span data-testid="custom-summary">{summary}</span>
+            <Icon name="accessibility-motor" data-summary-icon size="medium" />
+          </>
+        )}
+      >
+        Content
+      </Expander>
+    );
+
+    expect(screen.getByTestId('custom-summary')).toHaveTextContent(
+      'Custom summary'
+    );
+  });
+
+  it('renders custom summary when opened with renderSummaryOpened prop', () => {
+    render(
+      <Expander
+        summary="Show details"
+        summaryOpened="Hide details"
+        renderSummaryOpened={({ summaryOpened }) => (
+          <>
+            <span data-testid="custom-summary-opened">{summaryOpened}</span>
+            <Icon name="birthday" size="large" color="danger" />
+          </>
+        )}
+      >
+        Content
+      </Expander>
+    );
+
+    // Click to open the expander
+    fireEvent.click(screen.getByText('Show details'));
+
+    expect(screen.getByTestId('custom-summary-opened')).toHaveTextContent(
+      'Hide details'
+    );
+  });
+
+  it('toggles content visibility when clicked', () => {
+    const { container } = render(
+      <Expander summary="Show details">
+        <p data-testid="content">Hidden content</p>
+      </Expander>
+    );
+
+    const details = container.querySelector('details');
+    expect(details).not.toHaveAttribute('open');
+
+    // Click to open
+    fireEvent.click(screen.getByText('Show details'));
+    expect(details).toHaveAttribute('open');
+
+    // Click to close
+    fireEvent.click(screen.getByText('Show details'));
+    expect(details).not.toHaveAttribute('open');
+  });
+
+  it('has default class expander', () => {
+    const { getByTestId } = render(
+      <Expander data-testid="test-id" summary="Show details">
+        Content
+      </Expander>
+    );
+    expect(getByTestId('test-id')).toHaveClass('expander');
+  });
+
+  it('has additional class when className is set', () => {
+    const { getByTestId } = render(
+      <Expander
+        data-testid="test-id"
+        className="test-class"
+        summary="Show details"
+      >
+        Content
+      </Expander>
+    );
+    expect(getByTestId('test-id')).toHaveClass('expander');
+    expect(getByTestId('test-id')).toHaveClass('test-class');
+  });
+});

package/src/components/FeatureAccordion/FeatureAccordion.mdx

@@ -0,0 +1,33 @@
+import { Preview } from '../../styleguide/';
+import FeatureAccordion from './FeatureAccordion';
+
+# Feature Accordion
+
+Feature Accordion je kombinovaná komponenta, ktorá prepája accordion s obrázkami. Umožňuje zobrazovanie rôznych obrázkov na základe aktívneho accordion itemu, pričom zabezpečuje, že môže byť vždy otvorený len jeden item.
+
+## Základné použitie
+
+<Preview>
+  <FeatureAccordion />
+</Preview>
+
+## Funkcionality
+
+- **Prepojenie s obrázkami**: Každý accordion item je prepojený s príslušným obrázkom cez jedinečný identifikátor
+- **Jednočasné otvorenie**: Vždy môže byť otvorený len jeden accordion item
+- **Automatické prepínanie**: Kliknutím na accordion item sa automaticky zobrazí príslušný obrázok
+- **Responsive layout**: Komponenta používa Grid systém pre responzívne rozloženie
+
+## Štruktúra dát
+
+Komponenta očakáva pole objektov s nasledovnou štruktúrou:
+
+```typescript
+interface FeatureItem {
+  id: string;          // Jedinečný identifikátor
+  title: string;       // Titulok accordion itemu  
+  content: ReactNode;  // Obsah accordion itemu
+  imageUrl: string;    // URL obrázka
+  imageAlt: string;    // Alt text pre obrázok
+}
+``` 

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");
+  });
+});