Esikatselu
function ExamplePanel() {
const [isOpen, setIsOpen] = useState(false);
return (
<Panel heading="Lorem ipsum" isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
<PanelBody>Dolor sit amet</PanelBody>
</Panel>
);
}
Käyttötarkoitus
Panel-komponentti on tarkoitettu saman aihealueen sisältöjen ryhmittelyyn selkeiksi asiakokonaisuuksiksi. Esimerkiksi lomakkeet sisäisissä järjestelmissä.
- Ryhmittele paneeliin samaan asiakokonaisuuteen liittyviä elementtejä.
- Asemoi paneelin painikkeet pääsääntöisesti oikeaan alareunaan.
- Muuta paneeli ryhmäksi
role="group" attribuutilla, jos se ryhmittelee lomakekenttiä.
- Älä aseta paneeleita sisäkkäin.
- Älä käytä paneelia ryhmittelemään listoja (esim. hakutulokset) tai muuta staattista sisältöä kuten kuvia ja tekstiä.
- Älä käytä paneelia nostoelementtinä.
Saavutettavuus
Komponentti tuottaa oletuksena section-elementillä toteutetun alueen, joka on nimetty aria-labelledby-attribuutilla paneelin otsikon mukaisesti.
Komponentti lisää avattavalle ja suljettavalle paneelille automaattisesti ruudunlukijoille tarvittavat ARIA-attribuutit.
Otsikkotasona käytetään oletuksena h2-otsikkoa, joka tulee asettaa headingAs-propilla sopimaan sivun muuhun otsikkorakenteeseen.
Paneelille tulee lisätä role="group"-attribuutti, kun sitä käytetään lomake-elementtien ryhmittelyyn.
Rakenne
Paneeli koostuu useammasta komponentista:
Panel - PaneeliPanelBody - Paneelin sisennetty sisältöalue, esim. lomake-elementeillePanelActions - Paneeliin liittyvät toimintopainikkeet
Esimerkit
Avattava paneeli
Paneelista saa tehtyä avattavan ja suljettavan lisäämällä sille isOpen- ja onClick-propit. Tilan hallinta tapahtuu komponentin ulkopuolella.
Paneelin otsikkotaso tulee määrittää headingAs-propilla sopimaan sivun muuhun otsikkorakenteeseen.
Paneeli voidaan avata automaattisesti, kun selaimen hakutoiminto löytää hakusanan paneelin sisällöstä. Toiminnon saa käyttöön lisäämällä paneelille onBeforeMatch-propin, joka suorittaa avausfunktion.
Toiminto kannattaa ottaa käyttöön, jos paneelin sisällä on paljon käyttäjälle hyödyllistä sisältöä, joka voi muuten jäädä löytämättä.
function ExamplePanel() {
const [isOpen, setIsOpen] = useState(false);
return (
<Panel
heading="Avattava paneeli"
headingAs="h4"
isOpen={isOpen}
onBeforeMatch={() => setIsOpen(true)}
onClick={() => setIsOpen(!isOpen)}
variant="primary"
>
<PanelBody>
<Text mb={0}>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros
ullamcorper quis, lacinia quis facilisis sed sapien.
</Text>
</PanelBody>
</Panel>
);
}
Lomake ja ilmoitus
Esimerkki paneelista, jonka sisälle on ryhmitelty samaan aiheeseen liittyviä lomakekenttiä. Paneeli muutetaan ryhmäksi lisäämällä sille role="group"-attribuutti.
Paneelin sisällä olevat ilmoitukset tasataan oletuksena paneelin reunoihin. Ilmoitukset sijoitetaan PanelBody-komponentin ulkopuolelle.
function ExamplePanel() {
const [isOpen, setIsOpen] = useState(true);
return (
<form noValidate autoComplete="off">
<Panel
heading="Käsittelyn aloitus"
headingAs="h4"
isOpen={isOpen}
onClick={() => setIsOpen(!isOpen)}
role="group"
variant="primary"
>
<Alert variant="danger" flush className="kds-mb-0">
<Text>
<strong>Tallennus epäonnistui.</strong> Pakollinen tieto puuttuu.
</Text>
</Alert>
<PanelBody>
<TextInput
element="select"
labelText="Saapumiskanava"
leftCol={(children) => <Column xl={3}>{children}</Column>}
inputWidth={(children) => <Column xl={5}>{children}</Column>}
>
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolor</option>
</TextInput>
<DatePickerV2
labelText="Vireilletulopäivä"
defaultValue="2020-10-30"
leftCol={(children) => <Column xl={3}>{children}</Column>}
inputWidth={(children) => <Column xl={5}>{children}</Column>}
/>
<TextInput
element="select"
labelText="Käsittelyn tyyppi"
leftCol={(children) => <Column xl={3}>{children}</Column>}
inputWidth={(children) => <Column xl={5}>{children}</Column>}
>
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolor</option>
</TextInput>
<DateRangePickerV2
labelText="Haettu aika"
leftCol={(children) => <Column xl={3}>{children}</Column>}
invalid={{ from: true, to: true }}
errorText="Haettu aika puuttuu. Syötä alkamis- ja päättymispäivämäärä."
/>
<InputGroup row className="kds-mb-0">
<Column xl={3} />
<Column>
<Checkbox labelText="Kiireellinen käsittely" />
</Column>
</InputGroup>
</PanelBody>
<PanelActions>
<ButtonGroup horizontal="sm">
<Button>Tallenna</Button>
<Button appearance="outline">Peruuta</Button>
</ButtonGroup>
</PanelActions>
</Panel>
</form>
);
}
Taulukko ja haitarielementti
Taulukot ja haitarielementit tulee tasata oletuksena paneelin reunoihin asettamalla ne PanelBody-komponentin ulkopuolelle.
Lisäksi Table-komponentille annetaan kds-table--panel-apuluokka, joka muuttaa taulukon marginaalit vastaamaan paneelia.
<form noValidate autoComplete="off">
<Panel heading="Asumistiedot" headingAs="h4" variant="primary" role="group">
<TableV2Container className="kds-mb-0">
<TableV2 className="kds-mb-0 kds-table-v2--panel" isScrollable={false}>
<TableV2Head>
<TableV2HeadRow>
<TableV2HeadCell>Osoite</TableV2HeadCell>
<TableV2HeadCell>Asumisaika</TableV2HeadCell>
<TableV2HeadCell>Asumismuoto</TableV2HeadCell>
</TableV2HeadRow>
</TableV2Head>
<TableV2Body>
<TableV2Row>
<TableV2Cell>Puumökki, Röllimetsä</TableV2Cell>
<TableV2Cell>1.1.1986-</TableV2Cell>
<TableV2Cell>Omistusasunto</TableV2Cell>
</TableV2Row>
<TableV2Row>
<TableV2Cell>Pikku Kakkosen posti, PL 347, 33101 Tampere</TableV2Cell>
<TableV2Cell>1.11.1977-</TableV2Cell>
<TableV2Cell>Omistusasunto</TableV2Cell>
</TableV2Row>
<TableV2Row>
<TableV2Cell>Kneippbyn 11, 622 61 Visby, Ruotsi</TableV2Cell>
<TableV2Cell>1.1.1970-</TableV2Cell>
<TableV2Cell>Omistusasunto</TableV2Cell>
</TableV2Row>
</TableV2Body>
</TableV2>
</TableV2Container>
<PanelBody>
<Checkbox labelText="Asumistietoja ei ole tarvetta antaa" />
</PanelBody>
<PanelActions>
<Button appearance="outline">Lisää asunto</Button>
</PanelActions>
</Panel>
</form>
Paneeli haitarielementeillä
Haitarielementtiä voi käyttää ryhmittelyyn paneelin sisällä. Vältä kuitenkin sisäkkäisiä haitarielementtejä.
function ExamplePanel() {
const { isToggleOn, flipToggle } = useToggle();
return (
<Panel className="kds-mb-0" heading="Poikkeuksellinen käsittely" headingAs="h4" variant="primary">
<Accordion id="panel-accordion-1" isOpen={isToggleOn("panel-accordion-1")}>
<AccordionToggle onClick={() => flipToggle("panel-accordion-1")}>
Lokitiedot mahdollistavat valvonnan
</AccordionToggle>
<AccordionBody>
<Text>
Terveydenhuollon ammattilainen saa katsella ja käyttää potilastietoja ainoastaan silloin, kun tietoja
tarvitaan asiakkaan hoitamiseen. Terveydenhuolto hallinnoi, kenellä on oikeudet potilastietojen käsittelyyn
tietojärjestelmissä. Tietoja käsittelevien ammattilaisten tulee tunnistautua terveydenhuollon
ammattikorteilla.
</Text>
</AccordionBody>
</Accordion>
<Accordion id="panel-accordion-2" isOpen={isToggleOn("panel-accordion-2")}>
<AccordionToggle onClick={() => flipToggle("panel-accordion-2")}>
<span className="kds-flex kds-justify-between kds-items-center">
<span>Rekisterinpitäjä vastaa tietojen oikeellisuudesta</span>
<Badge variant="primary">Ei annettu</Badge>
</span>
</AccordionToggle>
<AccordionBody>
<Text>
Potilastietojen rekisterinpitäjä on se terveydenhuollon palvelunantaja, joka tiedot on tuottanut ja
tallentanut Potilastiedon arkistoon. Rekisterinpitäjä on vastuussa tuottamiensa potilastietojen
oikeellisuudesta ja virheellisten tietojen korjaamisesta.
</Text>
</AccordionBody>
</Accordion>
<Accordion id="panel-accordion-3" isOpen={isToggleOn("panel-accordion-3")}>
<AccordionToggle onClick={() => flipToggle("panel-accordion-3")}>
<span className="kds-flex kds-justify-between kds-items-center">
<span>Tietojen luovuttaminen</span>
<Badge variant="primary">Ei annettu</Badge>
</span>
</AccordionToggle>
<AccordionBody>
<Text>
Potilastiedon arkistoon tallennetut potilastiedot ovat aina tiedot tallentaneen rekisterinpitäjän
käytettävissä. Jos potilastietoja haetaan toisen terveydenhuollon rekisterinpitäjän rekisteristä, kyseessä
on tietojen luovuttaminen, johon tarvitaan asiakkaan luovutuslupa.
</Text>
</AccordionBody>
</Accordion>
</Panel>
);
}
Tiivistetty paneeli
Paneelia voi tarvittaessa tiivistää asettamalla size="xs" propin. Tällöin myös paneelin sisällä olevat komponentit asetetaan käyttämään tiiviimpää asettelua.
Otsikon kokoa voi säätää headingSize-propilla. Tiivistetyssä paneelissa käytetään arvoa 5 (oletus) tai 6.
Tiivistä asettelua käytetään tarvittaessa asiantuntijakäyttöliittymissä.
function ExamplePanel() {
const [isOpen, setIsOpen] = useState(true);
return (
<form noValidate autoComplete="off">
<Panel
heading="Käsittelyn aloitus"
headingAs="h4"
isOpen={isOpen}
onClick={() => setIsOpen(!isOpen)}
role="group"
size="xs"
variant="primary"
>
<Alert variant="danger" flush className="kds-mb-2" size="xs">
<Text size="sm">
<strong>Tallennus epäonnistui.</strong> Pakollinen tieto puuttuu.
</Text>
</Alert>
<PanelBody>
<TextInput
element="select"
labelText="Saapumiskanava"
leftCol={(children) => <Column xl={3}>{children}</Column>}
inputWidth={(children) => <Column xl={5}>{children}</Column>}
size="xs"
>
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolor</option>
</TextInput>
<DatePickerV2
labelText="Vireilletulopäivä"
defaultValue="2020-10-30"
leftCol={(children) => <Column xl={3}>{children}</Column>}
inputWidth={(children) => <Column xl={5}>{children}</Column>}
size="xs"
/>
<TextInput
element="select"
labelText="Käsittelyn tyyppi"
leftCol={(children) => <Column xl={3}>{children}</Column>}
inputWidth={(children) => <Column xl={5}>{children}</Column>}
size="xs"
>
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolor</option>
</TextInput>
<DateRangePickerV2
labelText="Haettu aika"
leftCol={(children) => <Column xl={3}>{children}</Column>}
invalid={{ from: true, to: true }}
errorText="Haettu aika puuttuu. Syötä alkamis- ja päättymispäivämäärä."
size="xs"
/>
<InputGroup row className="kds-mb-0" size="xs">
<Column xl={3} />
<Column>
<Checkbox labelText="Kiireellinen käsittely" size="xs" />
</Column>
</InputGroup>
</PanelBody>
<PanelActions>
<ButtonGroup horizontal="sm" size="xs">
<Button size="sm">Tallenna</Button>
<Button size="sm" appearance="outline">
Peruuta
</Button>
</ButtonGroup>
</PanelActions>
</Panel>
</form>
);
}
<form noValidate autoComplete="off">
<Panel heading="Asumistiedot" headingAs="h4" variant="primary" role="group" size="xs">
<TableV2Container className="kds-mb-0">
<TableV2 className="kds-mb-0 kds-table-v2--panel" isScrollable={false} size="xs">
<TableV2Head>
<TableV2HeadRow>
<TableV2HeadCell>Osoite</TableV2HeadCell>
<TableV2HeadCell>Asumisaika</TableV2HeadCell>
<TableV2HeadCell>Asumismuoto</TableV2HeadCell>
</TableV2HeadRow>
</TableV2Head>
<TableV2Body>
<TableV2Row>
<TableV2Cell>Puumökki, Röllimetsä</TableV2Cell>
<TableV2Cell>1.1.1986-</TableV2Cell>
<TableV2Cell>Omistusasunto</TableV2Cell>
</TableV2Row>
<TableV2Row>
<TableV2Cell>Pikku Kakkosen posti, PL 347, 33101 Tampere</TableV2Cell>
<TableV2Cell>1.11.1977-</TableV2Cell>
<TableV2Cell>Omistusasunto</TableV2Cell>
</TableV2Row>
<TableV2Row>
<TableV2Cell>Kneippbyn 11, 622 61 Visby, Ruotsi</TableV2Cell>
<TableV2Cell>1.1.1970-</TableV2Cell>
<TableV2Cell>Omistusasunto</TableV2Cell>
</TableV2Row>
</TableV2Body>
</TableV2>
</TableV2Container>
<PanelBody>
<Checkbox labelText="Asumistietoja ei ole tarvetta antaa" size="xs" />
</PanelBody>
<PanelActions>
<Button appearance="outline" size="sm">
Lisää asunto
</Button>
</PanelActions>
</Panel>
</form>
function ExamplePanel() {
const { isToggleOn, flipToggle } = useToggle();
return (
<Panel className="kds-mb-0" heading="Poikkeuksellinen käsittely" headingAs="h4" variant="primary" size="xs">
<Accordion id="panel-accordion-xs-1" isOpen={isToggleOn("panel-accordion-xs-1")} size="xs">
<AccordionToggle onClick={() => flipToggle("panel-accordion-xs-1")}>
Lokitiedot mahdollistavat valvonnan
</AccordionToggle>
<AccordionBody>
<Text size="sm">
Terveydenhuollon ammattilainen saa katsella ja käyttää potilastietoja ainoastaan silloin, kun tietoja
tarvitaan asiakkaan hoitamiseen. Terveydenhuolto hallinnoi, kenellä on oikeudet potilastietojen käsittelyyn
tietojärjestelmissä. Tietoja käsittelevien ammattilaisten tulee tunnistautua terveydenhuollon
ammattikorteilla.
</Text>
</AccordionBody>
</Accordion>
<Accordion id="panel-accordion-xs-2" isOpen={isToggleOn("panel-accordion-xs-2")} size="xs">
<AccordionToggle onClick={() => flipToggle("panel-accordion-xs-2")}>
<span className="kds-flex kds-justify-between kds-items-center">
<span>Rekisterinpitäjä vastaa tietojen oikeellisuudesta</span>
<Badge variant="primary">Ei annettu</Badge>
</span>
</AccordionToggle>
<AccordionBody>
<Text size="sm">
Potilastietojen rekisterinpitäjä on se terveydenhuollon palvelunantaja, joka tiedot on tuottanut ja
tallentanut Potilastiedon arkistoon. Rekisterinpitäjä on vastuussa tuottamiensa potilastietojen
oikeellisuudesta ja virheellisten tietojen korjaamisesta.
</Text>
</AccordionBody>
</Accordion>
<Accordion id="panel-accordion-xs-3" isOpen={isToggleOn("panel-accordion-xs-3")} size="xs">
<AccordionToggle onClick={() => flipToggle("panel-accordion-xs-3")}>
<span className="kds-flex kds-justify-between kds-items-center">
<span>Tietojen luovuttaminen</span>
<Badge variant="primary">Ei annettu</Badge>
</span>
</AccordionToggle>
<AccordionBody>
<Text size="sm">
Potilastiedon arkistoon tallennetut potilastiedot ovat aina tiedot tallentaneen rekisterinpitäjän
käytettävissä. Jos potilastietoja haetaan toisen terveydenhuollon rekisterinpitäjän rekisteristä, kyseessä
on tietojen luovuttaminen, johon tarvitaan asiakkaan luovutuslupa.
</Text>
</AccordionBody>
</Accordion>
</Panel>
);
}
Skeleton
Esimerkki Skeleton-komponentin soveltamisesta paneelissa.
Skeleton räätälöidään vastaamaan paneelin karkeaa rakennetta. Skeletonin kanssa käytetään variant="light"-vaihtoehtoa.
<Panel
variant="light"
heading={
<>
<span className="kds-sr-only">Sisältöä ladataan. Odota hetki.</span>
<Skeleton className="kds-block kds-w-2/4 kds-mb-4" />
</>
}
headingAs="h4"
>
<PanelBody>
<InputGroup row className="kds-items-center">
<Column xl={3}>
<Skeleton variant="text" className="kds-block kds-w-3/4" />
</Column>
<Column xl={5}>
<Skeleton className="kds-p-2" />
</Column>
</InputGroup>
<InputGroup row className="kds-items-center">
<Column xl={3}>
<Skeleton variant="text" className="kds-block kds-w-3/4" />
</Column>
<Column xl={5}>
<Skeleton className="kds-p-2" />
</Column>
</InputGroup>
<InputGroup row className="kds-items-center kds-mb-0">
<Column xl={3}>
<Skeleton variant="text" className="kds-block kds-w-3/4" />
</Column>
<Column xl={5}>
<Skeleton className="kds-p-2" />
</Column>
</InputGroup>
</PanelBody>
<PanelActions>
<Skeleton className="kds-p-2 kds-w-24" />
</PanelActions>
</Panel>
Huomioitavaa selaintuessa