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

package/src/components/Controls/Controls.mdx

@@ -1,469 +0,0 @@
-import { ComponentDocs, Code } from "@lighting-beetle/lighter-styleguide";
-
-import { Preview } from "../../styleguide/";
-import { Controls } from "./Controls";
-
-# Controls
-
-Controls komponent je univerzálny tlačidlový element určený pre navigáciu a ovládanie aplikácie. Poskytuje konzistentný vzhľad a správanie pre rôzne typy ovládacích prvkov s ikonami.
-
-## Základné použitie
-
-Controls komponent vyžaduje `icon` prop pre zobrazenie ikony a podporuje všetky štandardné HTML button atribúty. Nový prop `colorScheme` umožňuje prepínať medzi svetlou a tmavou farebnou schémou.
-
-<Preview>
-  <Controls icon="close" />
-  <Controls icon="menu" />
-  <Controls icon="search" />
-  <Controls icon="close" colorScheme="dark" />
-  <Controls icon="menu" colorScheme="dark" />
-  <Controls icon="search" colorScheme="dark" />
-</Preview>
-
-## Varianty
-
-### Štandardný variant (default)
-
-Štandardný variant s svetlým pozadím a tmavou ikonou.
-
-<Preview>
-  <Controls icon="close" colorScheme="light" />
-  <Controls icon="menu" colorScheme="light" />
-  <Controls icon="search" colorScheme="light" />
-  <Controls icon="chevron-down" colorScheme="light" />
-  <Controls icon="chevron-up" colorScheme="light" />
-</Preview>
-
-### Tmavý variant
-
-Tmavý variant s tmavým pozadím a svetlou ikonou, vhodný pre svetlé pozadia.
-
-<Preview>
-  <div
-    style={{ backgroundColor: "#333", padding: "1rem", borderRadius: "4px" }}
-  >
-    <Controls icon="close" colorScheme="dark" />
-    <Controls icon="menu" colorScheme="dark" />
-    <Controls icon="search" colorScheme="dark" />
-    <Controls icon="chevron-down" colorScheme="dark" />
-    <Controls icon="chevron-up" colorScheme="dark" />
-  </div>
-</Preview>
-
-## Typy ikon
-
-Controls komponent podporuje všetky dostupné ikony z Icon komponentu:
-
-### Navigačné ikony
-
-<Preview>
-  <Controls icon="chevron-left" />
-  <Controls icon="chevron-right" />
-  <Controls icon="chevron-up" />
-  <Controls icon="chevron-down" />
-  <Controls icon="arrow-left" />
-  <Controls icon="arrow-right" />
-</Preview>
-
-### Akčné ikony
-
-<Preview>
-  <Controls icon="close" />
-  <Controls icon="check" />
-  <Controls icon="plus" />
-  <Controls icon="minus" />
-  <Controls icon="edit" />
-  <Controls icon="delete" />
-</Preview>
-
-### Funkčné ikony
-
-<Preview>
-  <Controls icon="search" />
-  <Controls icon="filter" />
-  <Controls icon="sort" />
-  <Controls icon="refresh" />
-  <Controls icon="download" />
-  <Controls icon="upload" />
-</Preview>
-
-### Menu a navigačné ikony
-
-<Preview>
-  <Controls icon="menu" />
-  <Controls icon="home" />
-  <Controls icon="user" />
-  <Controls icon="settings" />
-  <Controls icon="help" />
-  <Controls icon="info" />
-</Preview>
-
-## Stavy komponentu
-
-### Aktívny stav
-
-Controls komponent automaticky zobrazuje hover a focus stavy.
-
-<Preview>
-  <Controls icon="close" />
-  <Controls icon="menu" />
-  <Controls icon="search" />
-</Preview>
-
-### Zakázaný stav
-
-Zakázaný stav sa používa, keď akcia nie je dostupná.
-
-<Preview>
-  <Controls icon="close" disabled />
-  <Controls icon="menu" disabled />
-  <Controls icon="search" disabled />
-</Preview>
-
-### Kombinované stavy
-
-Môžete kombinovať rôzne stavy a varianty.
-
-<Preview>
-  <div
-    style={{ backgroundColor: "#333", padding: "1rem", borderRadius: "4px" }}
-  >
-    <Controls icon="close" colorScheme="dark" disabled />
-    <Controls icon="menu" colorScheme="dark" />
-    <Controls icon="search" colorScheme="dark" />
-  </div>
-</Preview>
-
-## Typy tlačidiel
-
-### Štandardné tlačidlo (button)
-
-Štandardný typ pre akcie, ktoré neovplyvňujú formulár.
-
-<Preview>
-  <Controls icon="close" onClick={() => alert("Tlačidlo bolo kliknuté")} />
-</Preview>
-
-### Submit tlačidlo
-
-Pre odoslanie formulárov.
-
-<Preview>
-  <form
-    onSubmit={(e) => {
-      e.preventDefault();
-      alert("Formulár odoslaný");
-    }}
-  >
-    <Controls icon="check" type="submit" />
-  </form>
-</Preview>
-
-### Reset tlačidlo
-
-Pre resetovanie formulárov.
-
-<Preview>
-  <form onReset={() => alert("Formulár resetovaný")}>
-    <Controls icon="refresh" type="reset" />
-  </form>
-</Preview>
-
-## Use Cases
-
-### 1. Zatváranie modálnych okien
-
-Najčastejšie použitie pre zatváranie dialogov a modálnych okien.
-
-```jsx
-<Controls
-  icon="close"
-  onClick={handleCloseModal}
-  aria-label="Zatvoriť dialog"
-/>
-```
-
-### 2. Navigačné menu
-
-Pre otváranie a zatváranie navigačných menu.
-
-```jsx
-<Controls
-  icon="menu"
-  onClick={toggleNavigation}
-  aria-label="Otvoriť navigáciu"
-  aria-expanded={isNavigationOpen}
-/>
-```
-
-### 3. Vyhľadávanie
-
-Pre spúšťanie vyhľadávania.
-
-```jsx
-<Controls icon="search" onClick={openSearch} aria-label="Vyhľadať" />
-```
-
-### 4. Rozbaľovanie/zabaľovanie obsahu
-
-Pre accordion komponenty a podobné interakcie.
-
-```jsx
-<Controls
-  icon={isExpanded ? "chevron-up" : "chevron-down"}
-  onClick={toggleExpansion}
-  aria-expanded={isExpanded}
-  aria-controls="content-section"
-/>
-```
-
-### 5. Formulárové akcie
-
-Pre odoslanie a resetovanie formulárov.
-
-```jsx
-<Controls icon="check" type="submit" aria-label="Uložiť zmeny" />
-```
-
-### 6. Filtrovanie a triedenie
-
-Pre ovládanie filtrov a triedenia.
-
-```jsx
-<Controls icon="filter" onClick={openFilters} aria-label="Filtrovať výsledky" />
-```
-
-### 7. Aktualizácia obsahu
-
-Pre refresh a aktualizáciu dát.
-
-```jsx
-<Controls icon="refresh" onClick={refreshData} aria-label="Aktualizovať" />
-```
-
-### 8. Súborové operácie
-
-Pre upload a download súborov.
-
-```jsx
-<Controls icon="download" onClick={downloadFile} aria-label="Stiahnuť súbor" />
-```
-
-### 9. Užívateľské akcie
-
-Pre správu užívateľských účtov a nastavení.
-
-```jsx
-<Controls icon="settings" onClick={openSettings} aria-label="Nastavenia" />
-```
-
-### 10. Pomoc a informácie
-
-Pre zobrazenie pomoci a informácií.
-
-```jsx
-<Controls icon="help" onClick={showHelp} aria-label="Zobraziť pomoc" />
-```
-
-## Prístupnosť (Accessibility)
-
-### ARIA atribúty
-
-Controls komponent podporuje všetky štandardné ARIA atribúty pre tlačidlá:
-
-- `aria-label` - pre popis akcie
-- `aria-describedby` - pre dodatočný popis
-- `aria-expanded` - pre rozbaľovacie/zabaľovacie stavy
-- `aria-pressed` - pre toggle stavy
-- `aria-controls` - pre ovládanie iných elementov
-
-### Klávesnicová navigácia
-
-Komponent podporuje štandardnú klávesnicovú navigáciu:
-
-- **Tab** - pre navigáciu medzi elementmi
-- **Enter** - pre aktiváciu tlačidla
-- **Space** - pre aktiváciu tlačidla
-- **Escape** - pre zatvorenie (ak je implementované)
-
-### Screen reader podpora
-
-Komponent je plne kompatibilný so screen reader technológiami a poskytuje správne informácie o svojom stave a účele.
-
-## Štýlovanie
-
-### Základné CSS triedy
-
-- `.controls` - základná trieda komponentu
-- `.controls--inverse` - inverzný variant
-
-### Vlastné štýly
-
-Môžete pridať vlastné CSS triedy cez `className` prop:
-
-```jsx
-<Controls icon="close" className="custom-controls my-theme-controls" />
-```
-
-### Responzívne správanie
-
-Komponent sa automaticky prispôsobuje rôznym veľkostiam obrazovky a zachováva konzistentný vzhľad.
-
-## Technické detaily
-
-### Rozmery
-
-- **Šírka**: 40px (2.5rem)
-- **Výška**: 40px (2.5rem)
-- **Border radius**: 22px (1.375rem)
-
-### Transitions
-
-- **Dĺžka**: 200ms
-- **Timing function**: ease-in-out
-- **Vlastnosti**: border-color, background-color, color, outline-color
-
-### Farbové schémy
-
-Komponent podporuje svetlé a tmavé farebné schémy s automatickým prepínaním na základe `isInverse` prop.
-
-## Best Practices
-
-### 1. Vždy používajte aria-label
-
-Pre lepšiu prístupnosť vždy pridajte popisný `aria-label`:
-
-```jsx
-// ✅ Správne
-<Controls icon="close" aria-label="Zatvoriť dialog" />
-
-// ❌ Nesprávne
-<Controls icon="close" />
-```
-
-### 2. Používajte správne ikony
-
-Vyberajte ikony, ktoré jasne komunikujú účel tlačidla:
-
-```jsx
-// ✅ Správne - jasný účel
-<Controls icon="close" aria-label="Zatvoriť" />
-<Controls icon="check" aria-label="Potvrdiť" />
-
-// ❌ Nesprávne - nejasný účel
-<Controls icon="circle" aria-label="Zatvoriť" />
-```
-
-### 3. Kombinujte stavy správne
-
-Pri kombinovaní rôznych stavov myslite na užívateľskú skúsenosť:
-
-```jsx
-// ✅ Správne - zakázané tlačidlo má správne ARIA atribúty
-<Controls
-  icon="close"
-  disabled
-  aria-label="Zatvoriť (nie je dostupné)"
-/>
-
-// ✅ Správne - toggle tlačidlo má správne ARIA atribúty
-<Controls
-  icon={isOpen ? "chevron-up" : "chevron-down"}
-  aria-expanded={isOpen}
-  aria-label={isOpen ? "Zabaľovať" : "Rozbaľovať"}
-/>
-```
-
-### 4. Testujte klávesnicovú navigáciu
-
-Vždy otestujte, či komponent funguje správne s klávesnicou:
-
-```jsx
-// Testujte Tab, Enter, Space klávesy
-<Controls
-  icon="close"
-  onKeyDown={(e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      handleClose();
-    }
-  }}
-/>
-```
-
-## Props
-
-<ComponentDocs title="<Controls />" component={Controls} />
-
-### Props
-
-- `icon` (string) – názov ikony
-- `colorScheme` ("dark" | "light") – farebná schéma komponentu
-- `isDisabled` (boolean) – zakázaný stav
-- `className` (string) – vlastné CSS triedy
-- všetky štandardné button HTML atribúty
-
-## Príklady použitia
-
-### Základný príklad
-
-```jsx
-import { Controls } from "./Controls";
-
-function MyComponent() {
-  const handleClose = () => {
-    console.log("Tlačidlo bolo kliknuté");
-  };
-
-  return <Controls icon="close" onClick={handleClose} aria-label="Zatvoriť" />;
-}
-```
-
-### S tmavým variantom
-
-```jsx
-function DarkThemeComponent() {
-  return (
-    <div style={{ backgroundColor: "#333", padding: "1rem" }}>
-      <Controls icon="menu" colorScheme="dark" aria-label="Otvoriť menu" />
-    </div>
-  );
-}
-```
-
-### V formulári
-
-```jsx
-function MyForm() {
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    // Spracovanie formulára
-  };
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <input type="text" placeholder="Zadajte text" />
-      <Controls icon="check" type="submit" aria-label="Uložiť" />
-    </form>
-  );
-}
-```
-
-### Toggle príklad
-
-```jsx
-function ToggleExample() {
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  return (
-    <div>
-      <Controls
-        icon={isExpanded ? "chevron-up" : "chevron-down"}
-        onClick={() => setIsExpanded(!isExpanded)}
-        aria-expanded={isExpanded}
-        aria-label={isExpanded ? "Zabaľovať" : "Rozbaľovať"}
-      />
-      {isExpanded && <div>Rozbaľovaný obsah</div>}
-    </div>
-  );
-}
-```

package/src/components/Cover/Cover.mdx

@@ -1,87 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-import Cover from './Cover';
-
-# Cover
-
-Image overlaid with content.
-
-<Preview>
-  <Cover bgSrc="https://placehold.co/800x300">
-    <h2>Heading</h2>
-  </Cover>
-</Preview>
-
-## Responsive srcset
-
-You can image sources by breakpoints. This is a best practice for designing for
-mobile devices. Making sure small devices get small images. We don't want to
-use more bandwidth if not necessary
-
-<Preview>
-  <Cover
-    bgSrc={{
-      default: 'https://placehold.co/800x300',
-      lg: 'https://placehold.co/2560x1000',
-      md: 'https://placehold.co/1200x500',
-    }}
-  >
-    <h2>Heading</h2>
-  </Cover>
-</Preview>
-
-## Sizes
-
-We have 3 different sizes of overlay. You can choose which one fits your usecase best.
-
-<Preview>
-  <Cover size="small" bgSrc="https://placehold.co/800x300">
-    <h2>Small</h2>
-  </Cover>
-  <hr />
-  <Cover size="medium" bgSrc="https://placehold.co/800x300">
-    <h2>Medium</h2>
-  </Cover>
-  <hr />
-  <Cover size="large" bgSrc="https://placehold.co/800x300">
-    <h2>Large</h2>
-  </Cover>
-  <hr />
-  <Cover
-    size="small"
-    bgSrc="https://placehold.co/800x300?text=800x300+small+without+content"
-  />
-  <hr />
-  <Cover
-    size="medium"
-    bgSrc="https://placehold.co/800x300?text=800x300+medium+without+content"
-  />
-  <hr />
-  <Cover
-    size="large"
-    bgSrc="https://placehold.co/800x300?text=800x300+large+without+content"
-  />
-</Preview>
-
-## Background position
-
-If you need specific area of the background image to be always visible you can
-"stick it" to that position.
-
-<Preview>
-  <Cover size="small" bgSrc="https://placehold.co/800x300">
-    <h2>Center (default)</h2>
-  </Cover>
-  <hr />
-  <Cover size="small" bgPosition="top" bgSrc="https://placehold.co/800x300">
-    <h2>Top</h2>
-  </Cover>
-  <hr />
-  <Cover size="small" bgPosition="bottom" bgSrc="https://placehold.co/800x300">
-    <h2>Bottom</h2>
-  </Cover>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Cover />" component={Cover} />

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

@@ -1,28 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import { Cover } from '../';
-
-const example = (
-  <>
-    <Cover bgSrc="https://placehold.co/800x150" />;
-    <Cover
-      bgSrc={{
-        default: 'https://placehold.co/800x300',
-        lg: 'https://placehold.co/2560x1000',
-        md: 'https://placehold.co/1200x500',
-      }}
-    />
-  </>
-);
-
-it('is valid html', () => {
-  const { container } = render(example);
-  expect(container).toHTMLValidate();
-});
-
-it('is accessible', async () => {
-  const { container } = render(example);
-  expect(await axe(container)).toHaveNoViolations();
-});

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

@@ -1,116 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { Cover } from '../Cover';
-
-const image = '/test-image.jpg';
-const picture = {
-  default: '/test-picture.jpg',
-  md: '/test-picture-md.jpg',
-  xl: '/test-picture-xl.jpg',
-};
-
-// bgSrc prop is required
-describe('rendering Cover', () => {
-  describe('initial state', () => {
-    it('has default class cover', () => {
-      const { container } = render(<Cover bgSrc={image} />);
-      expect(container.getElementsByClassName('cover').length).toBe(1);
-    });
-    it('has default class cover__image', () => {
-      const { container } = render(<Cover bgSrc={image} />);
-      expect(container.getElementsByClassName('cover__image').length).toBe(1);
-    });
-  });
-  describe('passed props', () => {
-    it('passes other props', () => {
-      const { getByTestId } = render(
-        <Cover data-testid="test" bgSrc={image} />
-      );
-      expect(getByTestId('test')).toBeInTheDocument();
-    });
-    it('renders children', () => {
-      const { getByText } = render(<Cover bgSrc={image}>test-text</Cover>);
-      expect(getByText('test-text')).toBeInTheDocument();
-    });
-    it('has additional class when className is set', () => {
-      const { container } = render(
-        <Cover bgSrc={image} className="test-class" />
-      );
-      expect(container.getElementsByClassName('cover').length).toBe(1);
-      expect(container.getElementsByClassName('test-class').length).toBe(1);
-    });
-    it('has class cover__content when children are set', () => {
-      const { container } = render(<Cover bgSrc={image}>test</Cover>);
-      expect(container.getElementsByClassName('cover__content').length).toBe(1);
-    });
-    it('has additional class when contentClass and children are set', () => {
-      const { container } = render(
-        <Cover bgSrc={image} contentClass="test-content-class">
-          test
-        </Cover>
-      );
-      expect(
-        container.getElementsByClassName('test-content-class').length
-      ).toBe(1);
-    });
-    ['small', 'medium', 'large'].map(size => {
-      it(`has cover--${size} class when size is set to ${size}`, () => {
-        const { container } = render(<Cover bgSrc={image} size={size} />);
-        expect(container.getElementsByClassName(`cover--${size}`).length).toBe(
-          1
-        );
-      });
-    });
-    ['top', 'bottom'].map(position => {
-      it(`has cover__image--${position} class when bgPosition is set to ${position}`, () => {
-        const { container } = render(
-          <Cover bgSrc={image} bgPosition={position} />
-        );
-        expect(
-          container.getElementsByClassName(`cover__image--${position}`).length
-        ).toBe(1);
-      });
-    });
-    it('doesnt have cover__image--center class when bgPosition is set to center', () => {
-      const { container } = render(<Cover bgSrc={image} bgPosition="center" />);
-      expect(
-        container.getElementsByClassName('cover__image--center').length
-      ).toBe(0);
-    });
-    it('renders img element, not picture, when bgSrc is set to string', () => {
-      const { container } = render(<Cover bgSrc={image} />);
-      expect(container.querySelectorAll('img').length).toBe(1);
-      expect(container.querySelectorAll('picture').length).toBe(0);
-    });
-    it('img element has src set to bgSrc when bgSrc is string', () => {
-      const { container } = render(<Cover bgSrc={image} />);
-      expect(container.querySelector('img').getAttribute('src')).toBe(
-        '/test-image.jpg'
-      );
-    });
-    it('renders picture element with source and img elements when bgSrc is set to object with multiple properties', () => {
-      const { container } = render(<Cover bgSrc={picture} />);
-      expect(container.querySelectorAll('picture').length).toBe(1);
-      expect(container.querySelectorAll('img').length).toBe(1);
-      expect(container.querySelectorAll('source').length > 0).toBeTruthy();
-    });
-    it('img element has src set to bgSrc.default when bgSrc is object', () => {
-      const { container } = render(<Cover bgSrc={picture} />);
-      expect(container.querySelector('img').getAttribute('src')).toBe(
-        picture.default
-      );
-    });
-    Object.keys(picture)
-      .filter(el => el !== 'default')
-      .map(key => {
-        it('srcSet of source element has correct value from bgSrc object', () => {
-          const { container } = render(<Cover bgSrc={picture} />);
-          const correctSource = container.querySelector(
-            `source[srcset="${picture[key]}"]`
-          );
-          expect(correctSource).toBeInTheDocument();
-        });
-      });
-  });
-});