Disclosure

Om komponenten

En Disclosure kan ekspandere og kollapse relatert innhold. Den består i hovedsak av en knapp og et panel. Knappen styrer om innholdet i panelet vises eller skjules.

Den fungerer på lik måte som <details> og <summary> i HTML, men de elementene kan ofte være litt vanskelig å tilpasse utseendet på.

Egnet til:

• Når det er behov for å vise tilleggsvalg på en strukturert måte, som for eksempel i et filter.
• Disclosure brukes ofte til "Les mer" i komponenter

Den skiller seg fra Accordion ved at:

• Disclosure er som regel frittstående, og må ikke være en del av en gruppe.
• Teksten på knappen er ikke implisitt en heading.
• Innholdet i panelet er ikke nødvendigvis en egen section/group. Det er som regel en kortere tekst, eller noe interaktivt.

Varianter

Et vanlig bruksområde for Disclosure er "Les mer"

<UNSAFE_Disclosure defaultExpanded>
  <UNSAFE_DisclosureButton className="description" withChevron>
    Les mer
  </UNSAFE_DisclosureButton>
  <UNSAFE_DisclosurePanel>
    <p>
      For å komme raskere i gang med å ta i bruk Obos-banken så kan du nå på forhånd velge hvilke type kontoer du ønsker å starte med..
    </p>
  </UNSAFE_DisclosurePanel>
</UNSAFE_Disclosure>

For å lettere kunne bruke komponenten frem til den er stabil, kan det være lurt å rename i importen:

import {
  UNSAFE_Disclosure as Disclosure,
  UNSAFE_DisclosureButton as DisclosureButton,
  UNSAFE_DisclosureGroup as DisclosureGroup,
  UNSAFE_DisclosurePanel as DisclosurePanel,
} from './disclosure';

Bruk med "fieldsets"

For å være tilgjengelig har DisclosurePanel automatisk satt en aria rolle. Dersom Disclosure skal benyttes sammen med for eksempel CheckboxGroup, RadioGroup eller andre fieldsets, er det viktig å overstyre denne rollen og knytte fieldsettet til DisclosureButton ved hjelp av aria-labelledby.

<UNSAFE_Disclosure>
  <UNSAFE_DisclosureButton id="my-id" withChevron>
    Kjøpsalternativer
  </UNSAFE_DisclosureButton>

  <UNSAFE_DisclosurePanel role="none">
    <CheckboxGroup aria-labelledby="my-id">
      <Checkbox value="deleie">Deleie</Checkbox>
      <Checkbox value="bostart">Bostart</Checkbox>
      <Checkbox value="boligbytte">Boligbytte</Checkbox>
    </CheckboxGroup>
  </UNSAFE_DisclosurePanel>
</UNSAFE_Disclosure>

DisclosureGroup

En DisclosureGroup kan benyttes til å gruppere sammen relaterte disclosures. Den støtter at det kun kan være en utvidet Disclosure av gangen, eller opp til flere.

Grunnmuren re-eksporterer React Aria sin DisclosureGroup, så se mer utfyllende dokumentasjon og eksempler på bruk av komponenten der.

<UNSAFE_DisclosureGroup>
<UNSAFE_Disclosure>
  <UNSAFE_DisclosureButton withChevron>Personlig informasjon</UNSAFE_DisclosureButton>
  <UNSAFE_DisclosurePanel>Personlig informasjon her</UNSAFE_DisclosurePanel>
</UNSAFE_Disclosure>
<UNSAFE_Disclosure>
  <UNSAFE_DisclosureButton withChevron>Adresse</UNSAFE_DisclosureButton>
  <UNSAFE_DisclosurePanel>Adresse her</UNSAFE_DisclosurePanel>
</UNSAFE_Disclosure>
</UNSAFE_DisclosureGroup>