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

package/src/components/Controls/Controls.mdx

@@ -0,0 +1,469 @@
+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/Controls/Controls.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import cx from "classnames";
+import { Icon } from "../Icon";
+
+interface IControlsProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  elemRef?: React.Ref<any>;
+  icon: string;
+  className?: string;
+  colorScheme?: "dark" | "light";
+  isDisabled?: boolean;
+}
+
+const CLASS_ROOT = "controls";
+
+type NativeButtonProps = IControlsProps &
+  Omit<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    keyof IControlsProps | "href" | "ref"
+  > & {
+    href?: undefined;
+  };
+
+export type ControlsProps = NativeButtonProps;
+
+const Controls = React.forwardRef<any, ControlsProps>((props, ref) => {
+  const { elemRef, className, icon, colorScheme, isDisabled, ...rest } = props;
+  const classes = cx(
+    CLASS_ROOT,
+    { "is-dark": colorScheme === "dark", "is-light": colorScheme === "light" },
+    className,
+  );
+
+  const buttonProps = rest as React.ButtonHTMLAttributes<HTMLButtonElement>;
+  return (
+    <button
+      type="button"
+      className={classes}
+      disabled={isDisabled ? true : undefined}
+      aria-disabled={isDisabled ? "true" : undefined}
+      ref={elemRef || ref}
+      {...buttonProps}
+    >
+      <Icon name={icon} />
+    </button>
+  );
+});
+
+Controls.displayName = "Controls";
+
+export { Controls };

package/src/components/Controls/index.ts

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

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

@@ -0,0 +1,52 @@
+@use "../../../styles/tools/convert";
+
+$base: (
+  default: (
+    width: convert.to-rem(40px),
+    height: convert.to-rem(40px),
+    border: 2px solid transparent,
+    border-radius: convert.to-rem(22px),
+    margin: 2px,
+
+    font-size: convert.to-rem(18px),
+    font-weight: bold,
+  ),
+  active: (
+    transition-property: none,
+  ),
+  focus: (
+    outline-offset: 2px,
+  ),
+);
+
+$states: (
+  default: (
+    color: var(--color-text-default),
+    background-color: var(--color-fill-disabled),
+    border-color: var(--color-fill-disabled),
+  ),
+  hover: (
+    color: var(--color-text-inverse),
+    background-color: var(--color-fill-contrast),
+    border-color: var(--color-fill-contrast),
+  ),
+  active: (
+    color: var(--color-text-inverse),
+    background-color: var(--color-fill-tertiary),
+    border-color: var(--color-fill-tertiary),
+  ),
+  focus: (
+    color: var(--color-text-inverse),
+    background-color: var(--color-fill-contrast),
+    border-color: var(--color-fill-contrast),
+    outline: 2px solid var(--color-fill-contrast),
+  ),
+  disabled: (
+    color: var(--color-text-disabled),
+    background-color: transparent,
+    border-color: var(--color-fill-disabled),
+  ),
+);
+
+$icon-offset-from-edge: -0.25em;
+$icon-offset-from-text: 0.5em;

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

@@ -0,0 +1,70 @@
+@use "../../../styles/tools/convert";
+@use "../../../styles/tools/generate";
+@use "./config";
+
+/// Applies base controls styles used for every controls-base
+/// @param {map} $states - Map of controls states
+@mixin base($states: config.$base) {
+  @include generate.css-map($states, "default");
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: baseline;
+  cursor: pointer;
+
+  @media (hover: hover) {
+    &:hover {
+      @include generate.css-map($states, "hover");
+    }
+  }
+
+  &:focus-visible {
+    @include generate.css-map($states, "focus");
+  }
+
+  &:active,
+  &.is-active {
+    @include generate.css-map($states, "active");
+
+    z-index: 2;
+  }
+
+  &[aria-disabled="true"],
+  &[disabled] {
+    @include generate.css-map($states, "disabled");
+
+    cursor: not-allowed;
+  }
+}
+
+@mixin color() {
+  @include generate.css-map(config.$states, "default");
+
+  @media (hover: hover) {
+    &:hover {
+      @include generate.css-map(config.$states, "hover");
+      z-index: 2;
+    }
+  }
+
+  &:focus-visible {
+    @include generate.css-map(config.$states, "focus");
+
+    z-index: 2;
+  }
+
+  &:active,
+  &.is-active {
+    @include generate.css-map(config.$states, "active");
+    z-index: 2;
+  }
+
+  &[aria-disabled="true"],
+  &[disabled] {
+    @include generate.css-map(config.$states, "disabled");
+    cursor: not-allowed;
+  }
+}

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

@@ -0,0 +1,16 @@
+@use "../../../styles/tools/generate";
+@use "../../../styles/tokens/color";
+@use "./config";
+@use "./mixins";
+
+@layer components {
+  .controls {
+    @include mixins.base;
+  }
+
+  @each $variant, $props in config.$states {
+    .controls#{generate.variant-name($variant)} {
+      @include mixins.color;
+    }
+  }
+}