@orangesk/orange-design-system 2.0.0-beta.2 → 2.0.0-beta.20

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/Divider/Divider.mdx

@@ -1,65 +0,0 @@
-import { ComponentDocs } from "@lighting-beetle/lighter-styleguide";
-
-import { Preview } from "../../styleguide/";
-
-import Card, { CardHeader, CardSection } from "../Card";
-import { headerColors } from "../Card/CardHeader";
-import Divider from "../Divider";
-import Button from "../Button";
-import { Image } from "../Image";
-import Grid, { GridCol } from "../Grid";
-
-# Divider
-
-Divider serves as an option for horizontal division of spaces/elements/contents.
-
-## Example
-
-<Preview>
-  <Divider />
-</Preview>
-
-## Width
-
-Width of the divider line can be reduced to 1 pixel using `.divider__line--thin` class.
-
-<Preview>
-  <Divider />
-  <Divider thinLine />
-</Preview>
-
-## Content
-
-Divider can hold different contents if you need to visualise separation with
-something like a word or icon, you can do it here.
-
-<Preview>
-  <Divider />
-  <Divider icon="add" />
-  <Divider content={<strong>custom text</strong>} />
-</Preview>
-
-## Color
-
-If you need to use divider on **non-white backgrounds** use
-`.divider--black` or `.divider--white` class
-
-Default color is gray and it's used on white backgrounds only
-
-<Preview>
-  <Divider />
-  <Divider icon="add" />
-  <Divider content={<strong>custom text</strong>} />
-  <div className="bg-black">
-    <Divider color="white" />
-    <Divider color="white" icon="add" />
-    <Divider color="white" content={<strong>custom text</strong>} />
-  </div>
-  <Divider color="black" />
-  <Divider color="black" icon="add" />
-  <Divider color="black" content={<strong>custom text</strong>} />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Divider />" component={Divider} />