Info tip

export const Default = () => (
  <Labeled text="the (i) after a heading — click or tap opens the explanation, a tap outside or Esc closes it">
    <span style={inline}>
      Znalostní báze
      <InfoTip>{KB}</InfoTip>
    </span>
  </Labeled>
);

export const States = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-7)', paddingBottom: 'var(--sp-7)' }}>
    <Labeled text="closed — secondary glyph, 24 px; on touch the hit area is 44 px (--tap-min)">
      <span style={inline}>
        Telefonní čísla
        <InfoTip>Každý obchodník má vlastní číslo — klientovi se při hovoru ukáže ono.</InfoTip>
      </span>
    </Labeled>
    <div style={{ height: 110 }}>
      <Labeled text="open — aria-expanded, the panel below the (i), kept 16 px inside the window">
        <span style={inline}>
          Telefonní čísla
          <InfoTip defaultOpen>
            Každý obchodník má vlastní číslo — klientovi se při hovoru ukáže ono.
          </InfoTip>
        </span>
      </Labeled>
    </div>
    <div style={{ height: 130 }}>
      <Labeled text="long text — two sentences is the limit; the panel wraps at 280 px">
        <span style={inline}>
          Viditelnost
          <InfoTip defaultOpen>
            Veřejné = asistent smí obsah použít i v textu pro klienta. Interní = čte ho jen pro
            vlastní odpovědi uvnitř firmy.
          </InfoTip>
        </span>
      </Labeled>
    </div>
  </div>
);

export const Composition = () => (
  <div style={{ display: 'grid', gap: 'var(--sp-6)', width: 480 }}>
    <Labeled text="section heading — the (i) carries what used to be the grey description under it">
      <div style={{ width: 480 }}>
        <SecHeading title="Znalostní báze" info={<InfoTip>{KB}</InfoTip>} />
      </div>
    </Labeled>
    <Labeled text="field label — Field.labelExtra; an example of the value goes to the placeholder, not to (i)">
      <div style={{ display: 'grid', gap: 'var(--sp-4)', width: 480 }}>
        <Field
          label="Viditelnost"
          labelExtra={
            <InfoTip>
              Veřejné = asistent smí obsah použít i v textu pro klienta. Interní = čte ho jen pro
              vlastní odpovědi uvnitř firmy.
            </InfoTip>
          }
        >
          <Select defaultValue="int" aria-label="Viditelnost">
            <option value="int">Interní</option>
            <option value="pub">Veřejné</option>
          </Select>
        </Field>
        <Field label="Tón komunikace">
          <Input placeholder="např. věcně, zdvořile, bez superlativů" />
        </Field>
      </div>
    </Labeled>
    <Labeled text="stays visible, never in (i): a state, an error, data and a warning that must be read first">
      <span style={{ ...inline, color: 'var(--fg-muted)', font: 'var(--small)' }}>
        <Icon name="alert-triangle" />
        Zapnutí odešle reálné e-maily i za posledních 6 hodin.
      </span>
    </Labeled>
  </div>
);