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

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

@@ -0,0 +1,112 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from "react";
+import { render } from "@testing-library/react";
+
+import { SpritePathContext } from "../SpritePathContext";
+import { Icon } from "../";
+
+//name prop is required
+describe("rendering Icon", () => {
+  describe("initial state", () => {
+    it("has default class icon", () => {
+      const { getByTestId } = render(
+        <Icon data-testid="test-id" name="test-name" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("icon");
+    });
+
+    it("has aria-hidden set to true", () => {
+      const { getByTestId } = render(
+        <Icon data-testid="test-id" name="test-name" />,
+      );
+      const attr = getByTestId("test-id").getAttribute("aria-hidden");
+      expect(attr).toBeTruthy();
+    });
+
+    it("has default spritePath", () => {
+      const { getByTestId } = render(
+        <Icon data-testid="test-id" name="test-name" />,
+      );
+      const use = getByTestId("test-id").querySelector("use");
+      expect(use.getAttribute("xlink:href")).toEqual("/sprite.svg#test-name");
+    });
+  });
+
+  describe("passed props", () => {
+    ["info", "success", "warning", "danger"].map((color) => {
+      it(`has icon--${color} class when color is ${color}`, () => {
+        const { getByTestId } = render(
+          <Icon data-testid="test-id" color={color} name="test-name" />,
+        );
+        expect(getByTestId("test-id")).toHaveClass(`icon--${color}`);
+      });
+    });
+
+    ["small", "medium", "large", "xlarge", "xxlarge", "huge"].map((size) => {
+      it(`has icon--${size} class when size is ${size}`, () => {
+        const { getByTestId } = render(
+          <Icon data-testid="test-id" size={size} name="test-name" />,
+        );
+        expect(getByTestId("test-id")).toHaveClass(`icon--${size}`);
+      });
+    });
+
+    it("has additional class when set", () => {
+      const { getByTestId } = render(
+        <Icon data-testid="test-id" className="test-class" name="test-name" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("icon");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+
+    it("has aria-hidden set to undefined when alt is set", () => {
+      const { getByTestId } = render(
+        <Icon data-testid="test-id" alt="test-alt" name="test-name" />,
+      );
+      expect(getByTestId("test-id").getAttribute("aria-hidden")).toBeFalsy();
+    });
+
+    it("passes spritePath into xlinkhref", () => {
+      const { getByTestId } = render(
+        <Icon
+          data-testid="test-id"
+          spritePath="/test-path/"
+          name="test-name"
+        />,
+      );
+      const use = getByTestId("test-id").querySelector("use");
+      expect(use.getAttribute("xlink:href")).toEqual("/test-path/#test-name");
+    });
+
+    it("passes context value into xlinkhref", () => {
+      const { getByTestId } = render(
+        <SpritePathContext.Provider value={"/test-path--context/"}>
+          <Icon data-testid="test-id" name="test-name" />
+        </SpritePathContext.Provider>,
+      );
+      const use = getByTestId("test-id").querySelector("use");
+      expect(use.getAttribute("xlink:href")).toEqual(
+        "/test-path--context/#test-name",
+      );
+    });
+
+    it("passes spritePath into xlinkhref when context value is also defined", () => {
+      const { getByTestId } = render(
+        <SpritePathContext.Provider value={"/test-path--context/"}>
+          <Icon
+            data-testid="test-id"
+            spritePath="/test-path--prop/"
+            name="test-name"
+          />
+        </SpritePathContext.Provider>,
+      );
+      const use = getByTestId("test-id").querySelector("use");
+      expect(use.getAttribute("xlink:href")).toEqual(
+        "/test-path--prop/#test-name",
+      );
+    });
+  });
+});

package/src/components/Image/Image.mdx

@@ -0,0 +1,166 @@
+import { Code, Preview } from '../../styleguide/';
+import { ComponentDocs, Note, md } from '@lighting-beetle/lighter-styleguide';
+import Grid, { GridCol } from '../Grid/';
+import Image from './index';
+import Icon from '../Icon/index';
+
+import handsImage from '../../assets/images/developers/hands-with-phones.svg';
+
+# Image
+
+Komponenta `<Image />` umožňuje vkladať obrázky s podporou responzivity, rôznych breakpointov, SVG, retina obrázkov a accessibility best practices.
+
+---
+
+## Rýchly prehľad možností
+
+- **Jednoduchý obrázok:** `src` je string
+- **Responzívny obrázok:** `src` je objekt s kľúčmi pre breakpointy
+- **Retina obrázky:** `srcSet` v rámci hodnoty pre breakpoint
+- **SVG:** podporované
+- **Dodatočné props:** className, id, data-testid, atď.
+- **Accessibility:** povinný `alt` atribút
+- **Edge cases:** prázdny objekt, chýbajúci default, vlastné breakpointy
+
+---
+
+## `<img/>` element
+
+Jednoduchý obrázok, ktorý sa hodí kdekoľvek.
+
+<Preview>
+  <Image src="https://placehold.co/320x320" alt="Gray square with dimensions" />
+</Preview>
+
+## `<picture />` element
+
+Rôzne obrázky pre rôzne veľkosti displeja.
+
+<Preview>
+  <Image
+    src={{
+      default: 'https://placehold.co/150x150?text=150x150+on+XS',
+      xxxl: 'https://placehold.co/450x450?text=450x450+on+XXXL',
+      xxl: 'https://placehold.co/400x400?text=400x400+on+XXL',
+      xl: 'https://placehold.co/350x350?text=350x350+on+XL',
+      lg: 'https://placehold.co/300x300?text=300x300+on+LG',
+      md: 'https://placehold.co/250x250?text=250x250+on+MD',
+      sm: 'https://placehold.co/200x200?text=200x200+on+SM',
+    }}
+    alt="Gray square with dimensions"
+  />
+</Preview>
+
+### Príklad s vlastnými breakpointami
+
+<Preview>
+  <Image
+    src={{
+      default: 'https://placehold.co/150x150?text=default',
+      custom: 'https://placehold.co/200x200?text=custom',
+      another: 'https://placehold.co/250x250?text=another',
+    }}
+    alt="Obrázok s vlastnými breakpointami"
+  />
+</Preview>
+
+### Príklad s dodatočnými props
+
+<Preview>
+  <Image
+    src="https://placehold.co/320x320"
+    alt="Obrázok s custom className a id"
+    className="custom-image-class"
+    id="unique-image-id"
+    data-testid="test-image"
+    loading="lazy"
+  />
+</Preview>
+
+### Edge cases
+
+- **Len default:**
+
+  <Preview>
+    <Image src={{ default: 'https://placehold.co/150x150?text=default-only' }} alt="Len default" />
+  </Preview>
+
+- **Chýbajúci default:**
+
+  <Preview>
+    <Image src={{ xl: 'https://placehold.co/350x350?text=xl', lg: 'https://placehold.co/300x300?text=lg' }} alt="Chýba default" />
+  </Preview>
+
+- **Prázdny objekt:**
+
+  <Preview>
+    <Image src={{}} alt="Prázdny objekt" />
+  </Preview>
+
+---
+
+### Breakpoint order
+
+While ODS uses mobile first breakpoints, they **MUST** be ordered **from
+largest to smallest** v tomto prípade, pretože sa používajú na renderovanie `<source />` elementov.
+
+`<source />` elements are evaluated first to last, which means larger rules need to be specified first.
+
+> If the source's media condition evaluates to false, the browser skips it and evaluates the next element inside picture
+>
+> [The Picture element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture#The_media_attribute) on MDN
+
+```
+  default: '/path/to/default/image', // default image to load (fallback)
+  // order from largest to smallest
+  xxxl: '/path/to/xxxl/image',
+  xxl: '/path/to/xxl/image',
+  xl: '/path/to/xl/image',
+  lg: '/path/to/lg/image',
+  md: '/path/to/md/image',
+  sm: '/path/to/sm/image',
+  xs: '/path/to/xs/image',
+```
+
+---
+
+### Retina images
+
+[The srcset attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture#The_srcset_attribute) akceptuje zoznam obrázkov pre rôzne hustoty pixelov.
+
+<Preview>
+  <Image
+    src={{
+      default: 'https://placehold.co/300x300?text=1x-pixel-density',
+      xs: 'https://placehold.co/300x300?text=1x-pixel-density, https://placehold.co/600x600?text=2x-pixel-density 2x',
+    }}
+    alt="Gray square with dimensions"
+    isRounded
+  />
+</Preview>
+
+---
+
+## SVG
+
+Oba `<img />` aj `<picture />` podporujú SVG ako zdroj obrázka. Pre správne škálovanie v Internet Exploreri musí SVG obsahovať `viewBox` a `<img />` musí mať nastavený `width` alebo `height`.
+
+<Preview>
+  <Image src={handsImage} alt="Four hands with holding phones" />
+</Preview>
+
+---
+
+## Props
+
+<ComponentDocs title="<Image />" component={Image} />
+
+---
+
+## Accessibility
+
+- **Vždy používajte `alt` atribút** – popíšte význam obrázka, alebo nechajte prázdny pre dekoratívne obrázky.
+- **Nepoužívajte obrázky na prenášanie dôležitých informácií bez textovej alternatívy.**
+- Viac info: [How to write alternative texts](https://webaim.org/techniques/alttext/)
+
+---

package/src/components/Image/Image.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import cx from 'classnames';
+
+import breakpoints from '../../styles/export/breakpoint';
+
+
+const overlayBreakpoints: { [key: string]: string } = {
+  ...breakpoints,
+  xxxl: '1920px',
+};
+
+interface ImageSrcObject {
+  default: string;
+  xxxl?: string;
+  xxl?: string;
+  xl?: string;
+  lg?: string;
+  md?: string;
+  sm?: string;
+  xs?: string;
+  [key: string]: string | undefined;
+}
+
+interface ImageProps {
+  alt: string;
+  src: string | ImageSrcObject;
+  className?: string;
+  [key: string]: any;
+}
+
+const CLASS_ROOT = 'img';
+
+const Image: React.FC<ImageProps> = ({ className, src, alt, ...other }) => {
+  const classes = cx(CLASS_ROOT, className);
+
+  if (typeof src === 'object') {
+    // autocorrect to descending keys
+    const descendingSrcKeys = Object.keys(src).sort(
+      (a, b) =>
+        parseInt(overlayBreakpoints[b]) - parseInt(overlayBreakpoints[a])
+    );
+    // this could be done via conditional rendering, but that breaks <ComponentDocs /> ¯\_(ツ)_/¯
+    return (
+      <picture className={classes}>
+        {descendingSrcKeys.map(
+          breakpoint =>
+            breakpoint !== 'default' && (
+              <source
+                key={breakpoint}
+                srcSet={src[breakpoint]}
+                media={`(min-width: ${overlayBreakpoints[breakpoint]})`}
+              />
+            )
+        )}
+        <img src={src.default} alt={alt} {...other} />
+      </picture>
+    );
+  }
+
+  return <img className={classes} src={src} alt={alt} {...other} />;
+};
+
+Image.displayName = 'Image';
+
+export default Image;

package/src/components/Image/index.ts

@@ -0,0 +1,7 @@
+// import React from 'react';
+
+import Image from './Image';
+
+import './styles/style.scss';
+
+export default Image;

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

@@ -0,0 +1,12 @@
+@use '../../../styles/tokens/space';
+
+@mixin base() {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 100%;
+  height: auto;
+}
+
+@mixin spacing() {
+  margin-bottom: space.get('medium');
+}

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

@@ -0,0 +1,9 @@
+@use './mixins';
+
+img, picture {
+  @include mixins.base();
+}
+
+.img {
+  @include mixins.spacing();
+}

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

@@ -0,0 +1,264 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import Image from "../";
+
+/**
+ * Conformance testy pre Image komponentu
+ *
+ * Testy pokrývajú:
+ *
+ * **Individuálne test cases (9 scenárov):**
+ * • Jednoduchý obrázok s string src a zmysluplným alt textom
+ * • Dekoratívny obrázok s prázdnym alt atribútom
+ * • Responzívny obrázok so všetkými breakpointmi (xxxl až xs)
+ * • Responzívny obrázok s čiastočnými breakpointmi (xl, lg)
+ * • Responzívny obrázok s len default breakpointom
+ * • Obrázok s vlastnou CSS triedou
+ * • Obrázok s dodatočnými atribútmi (data-testid, id, loading)
+ * • Responzívny obrázok s vlastnými breakpoint kľúčmi
+ * • Responzívny obrázok s prázdnym objektom
+ *
+ * **Viacero obrázkov spolu:**
+ * • HTML validácia pre kombináciu všetkých scenárov
+ * • Accessibility test pre kombináciu všetkých scenárov
+ * • Overenie správneho počtu vyrenderovaných obrázkov
+ *
+ * **Accessibility specific testy:**
+ * • Obrázky so zmysluplným alt textom sú accessible
+ * • Dekoratívne obrázky s prázdnym alt sú accessible
+ * • Responzívne obrázky zachovávajú accessibility
+ *
+ * **HTML validácia specific testy:**
+ * • Jednoduchý img element je validný HTML
+ * • Picture element so source elementmi je validný HTML
+ * • Picture element s viacerými source elementmi je validný HTML
+ *
+ * **Každý test case sa testuje na:**
+ * • HTML validitu (toHTMLValidate)
+ * • Accessibility (axe)
+ * • Bezchybné renderovanie (bez exceptions)
+ */
+
+// Test cases covering different scenarios
+const testCases = [
+  // Simple string src
+  {
+    name: "simple image with string src",
+    component: (
+      <Image src="https://placehold.co/150x150" alt="Simple test image" />
+    ),
+  },
+  {
+    name: "decorative image with empty alt",
+    component: <Image src="https://placehold.co/150x150" alt="" />,
+  },
+  // Responsive images with different breakpoint combinations
+  {
+    name: "responsive image with all breakpoints",
+    component: (
+      <Image
+        src={{
+          default: "https://placehold.co/150x150?text=150x150+on+XS",
+          xxxl: "https://placehold.co/450x450?text=450x450+on+XXXL",
+          xxl: "https://placehold.co/400x400?text=400x400+on+XXL",
+          xl: "https://placehold.co/350x350?text=350x350+on+XL",
+          lg: "https://placehold.co/300x300?text=300x300+on+LG",
+          md: "https://placehold.co/250x250?text=250x250+on+MD",
+          sm: "https://placehold.co/200x200?text=200x200+on+SM",
+          xs: "https://placehold.co/175x175?text=175x175+on+XS",
+        }}
+        alt="Responsive image with all breakpoints"
+      />
+    ),
+  },
+  {
+    name: "responsive image with partial breakpoints",
+    component: (
+      <Image
+        src={{
+          default: "https://placehold.co/150x150?text=default",
+          xl: "https://placehold.co/350x350?text=xl",
+          lg: "https://placehold.co/300x300?text=lg",
+        }}
+        alt="Responsive image with partial breakpoints"
+      />
+    ),
+  },
+  {
+    name: "responsive image with only default",
+    component: (
+      <Image
+        src={{
+          default: "https://placehold.co/150x150?text=default-only",
+        }}
+        alt="Responsive image with only default"
+      />
+    ),
+  },
+  // Images with additional props
+  {
+    name: "image with custom className",
+    component: (
+      <Image
+        src="https://placehold.co/150x150"
+        alt="Image with custom class"
+        className="custom-image-class"
+      />
+    ),
+  },
+  {
+    name: "image with additional attributes",
+    component: (
+      <Image
+        src="https://placehold.co/150x150"
+        alt="Image with additional attributes"
+        data-testid="test-image"
+        id="unique-image-id"
+        loading="lazy"
+      />
+    ),
+  },
+  // Edge cases
+  {
+    name: "responsive image with custom breakpoint keys",
+    component: (
+      <Image
+        src={{
+          default: "https://placehold.co/150x150?text=default",
+          custom: "https://placehold.co/200x200?text=custom",
+          another: "https://placehold.co/250x250?text=another",
+        }}
+        alt="Image with custom breakpoint keys"
+      />
+    ),
+  },
+];
+
+// Combined test case for multiple images
+const multipleImagesExample = (
+  <>
+    {testCases.map((testCase, index) => (
+      <div key={index} data-testid={`test-case-${index}`}>
+        {testCase.component}
+      </div>
+    ))}
+  </>
+);
+
+describe("Image Component Conformance Tests", () => {
+  describe("Individual test cases", () => {
+    testCases.forEach((testCase) => {
+      it(`${testCase.name} is valid HTML`, () => {
+        const { container } = render(testCase.component);
+        expect(container).toHTMLValidate();
+      });
+
+      it(`${testCase.name} is accessible`, async () => {
+        const { container } = render(testCase.component);
+        const results = await axe(container);
+        expect(results).toHaveNoViolations();
+      });
+
+      it(`${testCase.name} renders without errors`, () => {
+        expect(() => render(testCase.component)).not.toThrow();
+      });
+    });
+  });
+
+  describe("Multiple images together", () => {
+    it("all images together are valid HTML", () => {
+      const { container } = render(multipleImagesExample);
+      expect(container).toHTMLValidate();
+    });
+
+    it("all images together are accessible", async () => {
+      const { container } = render(multipleImagesExample);
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+
+    it("renders correct number of images", () => {
+      const { container } = render(multipleImagesExample);
+      const images = container.querySelectorAll("img");
+      // Každý test case má img element (buď priamo alebo v picture elemente)
+      expect(images.length).toBe(testCases.length);
+    });
+  });
+
+  describe("Accessibility specific tests", () => {
+    it("images with meaningful alt text are accessible", async () => {
+      const { container } = render(
+        <Image
+          src="https://placehold.co/150x150"
+          alt="Meaningful description of the image content"
+        />,
+      );
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+
+    it("decorative images with empty alt are accessible", async () => {
+      const { container } = render(
+        <Image src="https://placehold.co/150x150" alt="" />,
+      );
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+
+    it("responsive images maintain accessibility", async () => {
+      const { container } = render(
+        <Image
+          src={{
+            default: "https://placehold.co/150x150",
+            xl: "https://placehold.co/300x300",
+          }}
+          alt="Responsive image description"
+        />,
+      );
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+  });
+
+  describe("HTML validation specific tests", () => {
+    it("simple img element is valid HTML", () => {
+      const { container } = render(
+        <Image src="https://placehold.co/150x150" alt="Test" />,
+      );
+      expect(container).toHTMLValidate();
+    });
+
+    it("picture element with sources is valid HTML", () => {
+      const { container } = render(
+        <Image
+          src={{
+            default: "https://placehold.co/150x150",
+            xl: "https://placehold.co/300x300",
+          }}
+          alt="Test"
+        />,
+      );
+      expect(container).toHTMLValidate();
+    });
+
+    it("picture element with multiple sources is valid HTML", () => {
+      const { container } = render(
+        <Image
+          src={{
+            default: "https://placehold.co/150x150",
+            xxxl: "https://placehold.co/450x450",
+            xxl: "https://placehold.co/400x400",
+            xl: "https://placehold.co/350x350",
+            lg: "https://placehold.co/300x300",
+            md: "https://placehold.co/250x250",
+            sm: "https://placehold.co/200x200",
+            xs: "https://placehold.co/175x175",
+          }}
+          alt="Test"
+        />,
+      );
+      expect(container).toHTMLValidate();
+    });
+  });
+});