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

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

@@ -0,0 +1,338 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+// Mock breakpoints since SCSS modules don't work in tests
+jest.mock('../../../styles/export/breakpoint', () => ({
+  xs: '0px',
+  sm: '480px',
+  md: '768px',
+  lg: '992px',
+  xl: '1240px',
+  xxl: '1380px',
+  xxxl: '1920px',
+}));
+
+import Image from '../Image';
+
+/**
+ * Unit testy pre Image komponentu
+ * 
+ * Testy pokrývajú:
+ * 
+ * **Základné renderovanie:**
+ * • Renderovanie s predvolenou CSS triedou 'img'
+ * • Pridávanie dodatočných CSS tried cez className prop
+ * • Správne nastavenie alt atribútu
+ * • Správne nastavenie src atribútu pre string src
+ * • Predávanie dodatočných props do img elementu
+ * 
+ * **String src (jednoduché obrázky):**
+ * • Renderovanie ako img element keď je src string
+ * • Žiadne source elementy pre string src
+ * 
+ * **Object src (responzívne obrázky):**
+ * • Renderovanie ako picture element keď je src objekt
+ * • Nastavenie default src pre img element
+ * • Správny počet source elementov (bez default)
+ * • Vylúčenie default z source elementov
+ * • Správne srcSet atribúty pre source elementy
+ * • Správne media atribúty pre source elementy
+ * • Sortovanie breakpointov v zostupnom poradí
+ * 
+ * **Všetky breakpointy:**
+ * • Správne spracovanie všetkých možných breakpointov (xxxl, xxl, xl, lg, md, sm, xs)
+ * • Sortovanie všetkých breakpointov v správnom zostupnom poradí
+ * • Správne media queries pre všetky breakpointy
+ * 
+ * **Edge cases:**
+ * • Objekt s len default vlastnosťou
+ * • Objekt bez default vlastnosti
+ * • Prázdny objekt
+ * • Objekt s vlastnými breakpoint kľúčmi
+ * 
+ * **Accessibility:**
+ * • Vždy má alt atribút
+ * • Prázdny alt pre dekoratívne obrázky
+ * • Zachovanie alt atribútu v picture elemente
+ * 
+ * **Component metadata:**
+ * • Správny displayName
+ */
+
+const singleSource = '/__image_snapshots__/picture-element-md-snap.png';
+const multipleSources = {
+  default: '/__image_snapshots__/picture-element-md-snap.png',
+  xl: '/__image_snapshots__/picture-element-xl-snap.png',
+  lg: '/__image_snapshots__/picture-element-lg-snap.png',
+};
+
+const allBreakpoints = {
+  default: '/__image_snapshots__/default.png',
+  xxxl: '/__image_snapshots__/xxxl.png',
+  xxl: '/__image_snapshots__/xxl.png',
+  xl: '/__image_snapshots__/xl.png',
+  lg: '/__image_snapshots__/lg.png',
+  md: '/__image_snapshots__/md.png',
+  sm: '/__image_snapshots__/sm.png',
+  xs: '/__image_snapshots__/xs.png',
+};
+
+describe('Image Component', () => {
+  describe('Basic rendering', () => {
+    it('renders with default class when no className provided', () => {
+      const { getByTestId } = render(
+        <Image data-testid="test-id" alt="test" src={singleSource} />
+      );
+      expect(getByTestId('test-id')).toHaveClass('img');
+    });
+
+    it('renders with additional class when className is provided', () => {
+      const { getByTestId } = render(
+        <Image
+          data-testid="test-id"
+          className="test-class"
+          alt="test"
+          src={singleSource}
+        />
+      );
+      expect(getByTestId('test-id')).toHaveClass('img', 'test-class');
+    });
+
+    it('renders with correct alt attribute', () => {
+      render(<Image alt="Test alt text" src={singleSource} />);
+      expect(screen.getByAltText('Test alt text')).toBeInTheDocument();
+    });
+
+    it('renders with correct src attribute for string src', () => {
+      const { container } = render(
+        <Image alt="test" src={singleSource} />
+      );
+      expect(container.querySelector('img').src).toEqual(
+        'http://localhost' + singleSource
+      );
+    });
+
+    it('passes through additional props to img element', () => {
+      const { container } = render(
+        <Image
+          alt="test"
+          src={singleSource}
+          data-custom="custom-value"
+          id="test-id"
+        />
+      );
+      const img = container.querySelector('img');
+      expect(img.getAttribute('data-custom')).toBe('custom-value');
+      expect(img.getAttribute('id')).toBe('test-id');
+    });
+  });
+
+  describe('String src (simple image)', () => {
+    it('renders as img element when src is string', () => {
+      const { container } = render(
+        <Image alt="test" src={singleSource} />
+      );
+      expect(container.querySelector('img')).toBeTruthy();
+      expect(container.querySelector('picture')).toBeFalsy();
+    });
+
+    it('does not render source elements when src is string', () => {
+      const { container } = render(
+        <Image alt="test" src={singleSource} />
+      );
+      expect(container.querySelectorAll('source')).toHaveLength(0);
+    });
+  });
+
+  describe('Object src (responsive image)', () => {
+    it('renders as picture element when src is object', () => {
+      const { container } = render(
+        <Image alt="test" src={multipleSources} />
+      );
+      expect(container.querySelector('picture')).toBeTruthy();
+    });
+
+    it('renders img with default src when src is object', () => {
+      const { container } = render(
+        <Image alt="test" src={multipleSources} />
+      );
+      const img = container.querySelector('img');
+      expect(img.getAttribute('src')).toEqual(multipleSources.default);
+    });
+
+    it('renders correct number of source elements', () => {
+      const { container } = render(
+        <Image alt="test" src={multipleSources} />
+      );
+      // Should have 2 source elements (xl and lg, excluding default)
+      expect(container.querySelectorAll('source')).toHaveLength(2);
+    });
+
+    it('excludes default from source elements', () => {
+      const { container } = render(
+        <Image alt="test" src={multipleSources} />
+      );
+      const sources = container.querySelectorAll('source');
+      sources.forEach(source => {
+        expect(source.getAttribute('srcSet')).not.toBe(multipleSources.default);
+      });
+    });
+
+    it('renders source elements with correct srcSet attributes', () => {
+      const { container } = render(
+        <Image alt="test" src={multipleSources} />
+      );
+      const sources = container.querySelectorAll('source');
+      
+      const srcSetValues = Array.from(sources).map(s => s.getAttribute('srcSet'));
+      expect(srcSetValues).toContain(multipleSources.xl);
+      expect(srcSetValues).toContain(multipleSources.lg);
+    });
+
+    it('renders source elements with correct media attributes', () => {
+      const { container } = render(
+        <Image alt="test" src={multipleSources} />
+      );
+      const sources = container.querySelectorAll('source');
+      
+      const mediaValues = Array.from(sources).map(s => s.getAttribute('media'));
+      expect(mediaValues).toContain('(min-width: 1240px)'); // xl
+      expect(mediaValues).toContain('(min-width: 992px)');  // lg
+    });
+
+    it('sorts breakpoints in descending order', () => {
+      const { container } = render(
+        <Image alt="test" src={multipleSources} />
+      );
+      const sources = container.querySelectorAll('source');
+      
+      // First source should be xl (larger breakpoint)
+      expect(sources[0].getAttribute('media')).toBe('(min-width: 1240px)');
+      // Second source should be lg (smaller breakpoint)
+      expect(sources[1].getAttribute('media')).toBe('(min-width: 992px)');
+    });
+  });
+
+  describe('All breakpoints support', () => {
+    it('handles all possible breakpoints correctly', () => {
+      const { container } = render(
+        <Image alt="test" src={allBreakpoints} />
+      );
+      const sources = container.querySelectorAll('source');
+      
+      // Should have 7 source elements (all except default)
+      expect(sources).toHaveLength(7);
+    });
+
+    it('sorts all breakpoints in correct descending order', () => {
+      const { container } = render(
+        <Image alt="test" src={allBreakpoints} />
+      );
+      const sources = container.querySelectorAll('source');
+      
+      const expectedOrder = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+      const actualOrder = Array.from(sources).map(s => {
+        const srcSet = s.getAttribute('srcSet');
+        return Object.keys(allBreakpoints).find(key => allBreakpoints[key] === srcSet);
+      });
+      
+      expect(actualOrder).toEqual(expectedOrder);
+    });
+
+    it('renders correct media queries for all breakpoints', () => {
+      const { container } = render(
+        <Image alt="test" src={allBreakpoints} />
+      );
+      const sources = container.querySelectorAll('source');
+      
+      const expectedMediaQueries = [
+        '(min-width: 1920px)', // xxxl (custom)
+        '(min-width: 1380px)', // xxl (from SCSS)
+        '(min-width: 1240px)', // xl
+        '(min-width: 992px)',  // lg
+        '(min-width: 768px)',  // md
+        '(min-width: 480px)',  // sm
+        '(min-width: 0px)',    // xs
+      ];
+      
+      const actualMediaQueries = Array.from(sources).map(s => s.getAttribute('media'));
+      expect(actualMediaQueries).toEqual(expectedMediaQueries);
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('handles object with only default property', () => {
+      const srcOnlyDefault = { default: singleSource };
+      const { container } = render(
+        <Image alt="test" src={srcOnlyDefault} />
+      );
+      
+      expect(container.querySelector('picture')).toBeTruthy();
+      expect(container.querySelectorAll('source')).toHaveLength(0);
+      expect(container.querySelector('img').getAttribute('src')).toBe(singleSource);
+    });
+
+    it('handles object with missing default property gracefully', () => {
+      const srcWithoutDefault = { xl: '/test-xl.png', lg: '/test-lg.png' };
+      const { container } = render(
+        <Image alt="test" src={srcWithoutDefault} />
+      );
+      
+      expect(container.querySelector('picture')).toBeTruthy();
+      expect(container.querySelectorAll('source')).toHaveLength(2);
+      // Should still render img but with undefined src
+      expect(container.querySelector('img')).toBeTruthy();
+    });
+
+    it('handles empty object gracefully', () => {
+      const emptySrc = {};
+      const { container } = render(
+        <Image alt="test" src={emptySrc} />
+      );
+      
+      expect(container.querySelector('picture')).toBeTruthy();
+      expect(container.querySelectorAll('source')).toHaveLength(0);
+      expect(container.querySelector('img')).toBeTruthy();
+    });
+
+    it('handles object with custom breakpoint keys', () => {
+      const customSrc = {
+        default: '/default.png',
+        custom: '/custom.png',
+        another: '/another.png'
+      };
+      const { container } = render(
+        <Image alt="test" src={customSrc} />
+      );
+      
+      expect(container.querySelector('picture')).toBeTruthy();
+      expect(container.querySelectorAll('source')).toHaveLength(2);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('always has alt attribute', () => {
+      render(<Image alt="Accessible image" src={singleSource} />);
+      expect(screen.getByAltText('Accessible image')).toBeInTheDocument();
+    });
+
+    it('works with empty alt for decorative images', () => {
+      render(<Image alt="" src={singleSource} />);
+      expect(screen.getByAltText('')).toBeInTheDocument();
+    });
+
+    it('maintains alt attribute in picture element', () => {
+      const { container } = render(
+        <Image alt="Responsive image" src={multipleSources} />
+      );
+      const img = container.querySelector('img');
+      expect(img.getAttribute('alt')).toBe('Responsive image');
+    });
+  });
+
+  describe('Component metadata', () => {
+    it('has correct displayName', () => {
+      expect(Image.displayName).toBe('Image');
+    });
+  });
+});

package/src/components/Link/Link.mdx

@@ -0,0 +1,224 @@
+import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+
+import { Preview } from '../../styleguide/';
+import Icon from '../Icon';
+
+import Link from './Link';
+
+# Link
+
+Links are basic navigation elements that provide interactive text-based navigation. They are always underlined and have consistent styling across the application. Standalone links are bold by default, but when used inline with other text, they inherit the font weight from their parent element.
+
+## Basic Usage
+
+<Preview>
+  <a href="/" className="">
+    Standalone link
+  </a>
+  <p>
+    Links in text{' '}
+    <a href="/" className="">
+      inherit font weight
+    </a>
+  </p>
+  <p>
+    Links in text that are{' '}
+    <a href="/" className="">
+      way too long and need to wrap at the end of the line so it will not break
+      the paragraph of text
+    </a>
+  </p>
+</Preview>
+
+## Link Class Behavior
+
+Default Link styling is automatically applied to all `<a>` elements except those with specific classes: `.btn`, `.list__control`, `.tab-list__tab`, `.stepbar__link`, `.osk-breadcrumbs__link`, `.skip-link`, `.dropdown__item`, `.carousel-promotions__slide`, and elements within `.osk-footer` or `.mm-header`. To force Link styling on these elements, use the `.link` class.
+
+<Preview>
+  <div className="mm-header">
+    <a href="/" className="">
+      Link in megamenu (no styling)
+    </a>
+    <br />
+    <Link href="/">Link with class .link in megamenu</Link>
+  </div>
+</Preview>
+
+## Color Variants
+
+### Default (Black)
+
+The standard link color that works on light backgrounds.
+
+<Preview>
+  <a href="/" className="">
+    Default Link
+  </a>
+</Preview>
+
+### Orange
+
+**Accessibility Warning**: Orange links on white background do not meet [Success Criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) due to insufficient contrast between white and orange brand colors.
+
+<Preview>
+  <a className="link--orange" href="/">
+    Orange Link
+  </a>
+</Preview>
+
+### Inverse (White)
+
+For use on dark backgrounds.
+
+<Preview bgTheme="black">
+  <div className="bg-black">
+    <a href="/">Inverse link without class .link--is-inverse</a>
+  </div>
+  <a className="link--is-inverse" href="/">
+    Inverse Link
+  </a>
+  <div className="bg-black">
+    <a className="link--orange" href="/">
+      Orange Inverse link without class .link--is-inverse
+    </a>
+  </div>
+  <a className="link--is-inverse link--orange" href="/">
+    Orange Inverse Link
+  </a>
+</Preview>
+
+### Black
+
+Link stays black even during focus and hover. Should be used on orange backgrounds.
+
+<Preview>
+  <div className="bg-orange">
+    <a className="link--black" href="/">
+      Black Link
+    </a>
+  </div>
+</Preview>
+
+### Default Important
+
+When white background is used inside black background, links automatically use inverse styling and become white (invisible). Use `.link--default` class to force default black styling.
+
+<Preview bgTheme="black">
+  <div className="bg-black">
+    <div className="bg-white">
+      <div className="d-block">
+        <a href="/">I don't have class link--default {':('}</a>
+        <a className="color-black">{"<-- there's a link"}</a>
+      </div>
+      <a className="link--default" href="/">
+        I do have class link--default {':)'}
+      </a>
+    </div>
+  </div>
+</Preview>
+
+## Icon Integration
+
+### With Icons
+
+Links can include icons positioned to the left or right of the text.
+
+<Preview>
+  <a href="/">
+    <Icon name="chevron-left" className="link__icon-left" />
+    Back
+  </a>
+  <br />
+  <a href="/">
+    Next
+    <Icon name="chevron-right" className="link__icon-right" />
+  </a>
+  <br />
+  <br />
+  <a href="/">
+    <Icon name="chevron-left" size="large" className="link__icon-left" />
+    Back
+  </a>
+  <br />
+  <a href="/">
+    Next
+    <Icon name="chevron-right" size="large" className="link__icon-right" />
+  </a>
+</Preview>
+
+## Element Types
+
+### Render as Button
+
+When a Link doesn't navigate but controls the document (e.g., opens a modal), it can be rendered as a `button` element.
+
+<Preview>
+  <Link tag="button">Perform click action</Link>
+</Preview>
+
+## Use Cases
+
+### 1. Navigation Links
+- **Primary navigation**: Main menu items, breadcrumbs
+- **Secondary navigation**: Footer links, sidebar navigation
+- **Inline navigation**: Links within content text
+
+### 2. Action Links
+- **Modal triggers**: Opening dialogs, popups, or overlays
+- **Form submissions**: Submit buttons styled as links
+- **Toggle actions**: Show/hide content, expand/collapse sections
+
+### 3. External Links
+- **Social media**: Links to external platforms
+- **Documentation**: Links to help pages, guides
+- **Partner sites**: Affiliate or partner website links
+
+### 4. Download Links
+- **File downloads**: PDFs, documents, media files
+- **Software downloads**: Applications, tools, utilities
+
+### 5. Email Links
+- **Contact information**: Email addresses with mailto: protocol
+- **Support links**: Direct email to support teams
+
+### 6. Phone Links
+- **Contact numbers**: Phone numbers with tel: protocol
+- **Support hotlines**: Direct calling to support
+
+### 7. Back/Forward Navigation
+- **Breadcrumb navigation**: Previous page links
+- **Wizard steps**: Next/previous step navigation
+- **Pagination**: Page navigation controls
+
+### 8. Contextual Links
+- **Related content**: "See also" links
+- **Reference links**: Citations, sources, footnotes
+- **Cross-references**: Links to related sections
+
+### 9. Call-to-Action Links
+- **Primary CTAs**: "Get Started", "Learn More", "Sign Up"
+- **Secondary CTAs**: "Cancel", "Back", "Skip"
+
+### 10. Accessibility Links
+- **Skip links**: Jump to main content
+- **Accessibility help**: Screen reader support links
+
+## Accessibility
+
+### Color Contrast
+Orange links on white background do not meet [Success Criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) due to insufficient contrast between white and orange brand colors.
+
+### Focus States
+All links have visible focus states with proper contrast and outline styling.
+
+### Screen Reader Support
+- Links are properly announced to screen readers
+- Icon-only links should include descriptive text
+- External links should indicate they open in new windows
+
+### Keyboard Navigation
+- All links are keyboard accessible
+- Focus order follows logical document flow
+- Focus indicators are clearly visible
+
+<ComponentDocs component={Link} />

package/src/components/Link/Link.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import cx from "classnames";
+
+const CLASS_ROOT = "link";
+
+export interface LinkProps {
+  /** link color. default color is black, and inverts to white */
+  color?: "default" | "orange" | "black";
+  /** destination address */
+  href?: string;
+  /** invert link color for dark background */
+  isInverse?: boolean;
+  /** rendereded HTML element */
+  tag?: "a" | "button";
+  /** additional CSS classes */
+  className?: string;
+  /** link content */
+  children?: React.ReactNode;
+}
+
+export const Link: React.FC<LinkProps & React.HTMLAttributes<HTMLElement>> = ({
+  className,
+  children,
+  color,
+  isInverse,
+  tag = "a",
+  href,
+  ...other
+}) => {
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      [`${CLASS_ROOT}--is-inverse`]: isInverse,
+      [`${CLASS_ROOT}--${color}`]: color,
+    },
+    className,
+  );
+
+  if (tag === "a" && !href) {
+    console.warn(
+      "Anchor element requires a valid address. Provide a valid, navigable address as the href value. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href",
+    );
+  }
+
+  return React.createElement(
+    tag,
+    { href, className: classes, ...other },
+    children,
+  );
+};
+
+Link.displayName = "Link";

package/src/components/Link/index.ts

@@ -0,0 +1,3 @@
+import "./styles/style.scss";
+
+export { Link } from "./Link";

package/src/components/Link/styles/config.scss

@@ -0,0 +1,85 @@
+@use '../../../styles/tokens/color';
+
+$variants: (
+  'default': (
+    'default': (
+      color: color.$black,
+    ),
+    'hover': (
+      color: color.$orange-dark,
+    ),
+    'focus': (
+      color: color.$white,
+      background-color: color.$info,
+      box-shadow: 0 2px 0 0 color.$black,
+      text-decoration: none,
+      outline-width: 0 !important,
+      outline-color: transparent !important,
+    )
+  ),
+  'default-important': (
+    'default': (
+      color: color.$black !important,
+    ),
+    'hover': (
+      color: color.$orange-dark !important,
+    ),
+    'focus': (
+      color: color.$white !important,
+      box-shadow: 0 2px 0 0 color.$black !important,
+    )
+  ),
+  'black': (
+    'default': (
+      color: color.$black !important,
+    ),
+    'hover': (
+      color: color.$black !important,
+    ),
+    'focus': (
+      color: color.$white !important,
+      box-shadow: 0 2px 0 0 color.$white !important,
+    )
+  ),
+  'default-inverse': (
+    'default': (
+      color: color.$white,
+    ),
+    'hover': (
+      color: color.$orange,
+    ),
+    'focus': (
+      box-shadow: 0 2px 0 0 color.$white,
+    )
+  ),
+  'inverse-important': (
+    'default': (
+      color: color.$white !important,
+    ),
+    'hover': (
+      color: color.$orange !important,
+    ),
+    'focus': (
+      box-shadow: 0 2px 0 0 color.$white !important,
+    )
+  ),
+  'orange': (
+    'default': (
+      color: color.$orange-dark !important,
+    ),
+    'hover': (
+      color: color.$black !important,
+    ),
+  ),
+  'orange-inverse': (
+    'default': (
+      color: color.$orange !important,
+    ),
+    'hover': (
+      color: color.$white !important,
+    ),
+    'focus': (
+      color: color.$white !important,
+    )
+  ),
+);