Design systém gov.cz4.7.0

Použití s Reactem

Pro React existuje balíček @gov-design-system-ce/react.

Skeleton

Funkční projekt k naklonování: starters/react.

Jak se React wrapper liší ​

Toto je nejdůležitější část celé stránky. @gov-design-system-ce/react není obal nad Web Components — jsou to samostatně napsané React komponenty, které renderují běžné HTML s třídami .gov-*. Ve výsledném DOM nenajdete žádný element <gov-*>.

Z toho plynou tři důsledky, které nikde jinde neplatí:

  1. Používají se kořenové soubory stylů.
  2. Sloty nefungují — obsah se předává přes props.
  3. Některé props se jmenují jinak než atributy Web Component.

Verze react a styles musí jít spolu

@gov-design-system-ce/react má vlastní řadu verzí. Verze 4.7.0 a novější vyžaduje @gov-design-system-ce/styles ve verzi 4.6.4 nebo novější.

React 19 na elementech <div> a <span> zahazuje atributy size, disabled a open, takže je wrapper vydává jako data-size, data-disabled a data-open. Odpovídající selektory přidává components.css až od verze 4.6.4. Se starší verzí stylů se komponenty vykreslí nesprávně — a bez jakékoli chyby v konzoli.

Oba balíčky proto aktualizujte společně. Podrobnosti v seznamu změn.

1. Instalace ​

shell
npm install @gov-design-system-ce/react \
            @gov-design-system-ce/components \
            @gov-design-system-ce/styles \
            @gov-design-system-ce/icons \
            @gov-design-system-ce/fonts

2. Styly ​

Migrace z variant html/*

Dřívější verze této dokumentace doporučovala pro React soubory @gov-design-system-ce/styles/html/*. Bylo to chybné doporučení — komponenty s nimi měly správné rozměry a žádnou barvu — a od verze 4.7.0 už tyto soubory balíček neobsahuje.

Pokud jste je používali, přepište importy na kořenové cesty níže. Do té doby, než to uděláte, build skončí chybou o nenalezeném modulu.

Naimportujte kořenové soubory. Na pořadí záleží — tokens.css musí být první:

css
/* Proměnné (design tokeny). Vždy jako první. */
@import "@gov-design-system-ce/styles/tokens.css";
/* Základní nastavení. */
@import "@gov-design-system-ce/styles/styles.css";
/* Layout a kontejnery. */
@import "@gov-design-system-ce/styles/layout.css";
/* Styly jednotlivých komponent. */
@import "@gov-design-system-ce/styles/components.css";
/* Animace. */
@import "@gov-design-system-ce/styles/animations.css";

3. Ikony a fonty ​

Postupujte podle stránky Pro vývojáře. Ikony zkopírujte se zachováním podadresářů components, complex a colored.

Ve skeletonu je to vyřešené pluginem vite-plugin-static-copy:

typescript
viteStaticCopy({
  targets: [
    {src: "node_modules/@gov-design-system-ce/icons/lib/components/*", dest: "assets/icons/components"},
    {src: "node_modules/@gov-design-system-ce/icons/lib/complex/*", dest: "assets/icons/complex"},
    {src: "node_modules/@gov-design-system-ce/icons/lib/colored/*", dest: "assets/icons/colored"},
    {src: "node_modules/@gov-design-system-ce/fonts/lib/*.woff2", dest: "assets/fonts"},
  ],
})

4. Vstupní bod aplikace ​

Konfigurace musí být nastavená před registrací komponent. Volání defineCustomElements patří do modulového rozsahu, nikoli do useEffect — v režimu StrictMode se efekty spouští dvakrát.

tsx
// 1. Konfigurace — před registrací komponent.
window.GOV_DS_CONFIG = {
  iconsPath: "/assets/icons",
};

// 2. Styly (kořenové varianty).
import "@gov-design-system-ce/styles/tokens.css";
import "@gov-design-system-ce/styles/styles.css";
import "@gov-design-system-ce/styles/layout.css";
import "@gov-design-system-ce/styles/components.css";
import "@gov-design-system-ce/styles/animations.css";

import React from "react";
import ReactDOM from "react-dom/client";
import { defineCustomElements } from "@gov-design-system-ce/components/loader";
import { App } from "./App";

// 3. Registrace Web Components. Některé komponenty (například gov-icon) je
//    interně používají i přes React wrapper.
defineCustomElements(window);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

5. Použití komponent ​

tsx
import {
  GovButton,
  GovCard,
  GovContainer,
  GovFormControl,
  GovFormInput,
  GovFormLabel,
  GovIcon,
} from "@gov-design-system-ce/react";

export function App() {
  return (
    <GovContainer>
      {/* Nadpis karty je prop, ne slot. */}
      <GovCard headline={<h3>Nadpis karty</h3>}>
        <p>Obsah karty.</p>
      </GovCard>

      {/* Popisek se skládá z GovFormControl a GovFormLabel. */}
      <GovFormControl top={<GovFormLabel identifier="jmeno">Jméno</GovFormLabel>}>
        <GovFormInput identifier="jmeno" placeholder="Jan Novák" />
      </GovFormControl>

      {/* Ikona je prop iconEnd, ne slot="icon-end". */}
      <GovButton
        type="solid"
        color="primary"
        size="m"
        iconEnd={<GovIcon name="chevron-right" />}
      >
        Odeslat
      </GovButton>
    </GovContainer>
  );
}

Sloty a jejich ekvivalenty v props ​

Web ComponentReact
<h3 slot="headline"> v gov-card<GovCard headline={<h3>…</h3>}>
slot="icon" v gov-card<GovCard icon={…}>
slot="footer" v gov-card<GovCard footer={…}>
slot="img" v gov-card<GovCard img={…}>
slot="icon-start" v gov-button<GovButton iconStart={…}>
slot="icon-end" v gov-button<GovButton iconEnd={…}>
gov-form-label uvnitř gov-form-control<GovFormControl top={<GovFormLabel …>}>

Pokud slot předáte jako potomka (<GovCard><h3 slot="headline">…), vykreslí se jako běžný obsah a komponenta o odpovídající oblast přijde — bez jakékoli chybové hlášky.

Rozdíly v props proti Web Components ​

React wrapper nepřebírá atributy Web Component jeden k jednomu:

  • GovButton nemá prop variant. Používá type, color a size.
  • GovFormInput nemá prop label. Popisek řeší GovFormControl + GovFormLabel spojené shodným identifier.

Dostupné props si necháte napovědět z typů — balíček obsahuje kompletní deklarace.

Známé problémy ​

Pokud potomky komponenty renderujete podmíněně (například uvnitř GovContainer nebo GovWizard), obalte je do <div>, aby React správně sesouhlasil změny v DOM:

tsx
<GovContainer>
  <div>
    {nejakaPodminka && <GovCard headline={<h3>Karta</h3>} />}
  </div>
</GovContainer>