Gå til hovedinnhold
KOMPONENTER

Alerts

Varsler brukes for å fange brukerens oppmerksomhet og inneholder korte viktige meldinger som man bør ta hensyn til.

Komponenter

Lokale varsler

NavnTypePåkrevd?Default-verdiBeskrivelse
childrenReactNode

Innholdet i alert-boksen

classNamestring

Ekstra klassenavn

closeButtonLabelstring

Skjermleser-label for lukkeknappen, om den vises

onClose(() => void)

Callback som kalles når man lukker boksen

closableboolean false

Om denne er true, vil boksen få en lukkeknapp i høyre hjørne

titlestring

Tittel på boksen - oppsummer virkning

variant"success" | "info" | "warning" | "error"

Farge og uttrykk på alert-boksen

Lokale varsler brukes forskjellige steder på en side for å informere om noe viktig.

Systemene våre er oppe igjen!

Etter planlagt nedetid, er systemene våre igjen 100 % operasjonelle!

Vi bruker informasjonskapsler

Ved å bruke denne siden godtar du at vi bruker informasjonskapsler.

Systemene våre er ustabile

Systemene våre kan oppleves litt ustabile akkurat nå. Vi jobber med å fikse problemet!

Kjøp kan ikke gjennomføres nå

Vi har et teknisk problem akkurat nå. Du kan fortsatt bruke reiseplanleggeren, men kjøpsløsningen for billetter fungerer ikke.

Toast-varsler

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Innholdet i toasten

classNamestring

Ekstra klassenavn

closeButtonLabelstring

Skjermleser-label for lukkeknappen, om den vises

onClose(() => void)

Callback som kalles når man lukker boksen

closableboolean

Om denne er true, vil boksen få en lukkeknapp i høyre hjørne

titlestring

Tittel på boksen - oppsummer virkning

variant"success" | "info"

Farge og uttrykk på toasten

NavnTypePåkrevd?Default-verdiBeskrivelse
delaynumber 6000

Antall millisekunder før toasts forsvinner av seg selv

Toasts brukes for å bekrefte handlinger brukeren har gjort. De bør dukke opp av seg selv øverst i høyre hjørne, og skal forsvinne automatisk etter minst seks sekunder.

Nå har du billett!

Ha det gøy på togturen til Bergen!

Toget går fra plattform 2

Husk å sjekke plattform når du ankommer.

Hvordan bruke toasts

Du får fiks ferdige toast-funksjonalitet på null komma niks med @entur/alert. Først må du wrappe appen din i en <ToastProvider />.

import { ToastProvider } from '@entur/alert';

const App = () => {
  return (
    <ToastProvider>
      <Router>{/* Osv */}</Router>
    </ToastProvider>
  );
};

For å lage en toast, så må du bruke hooken useToast.

import { useToast } from '@entur/alert';

const SaveButton = ({ children }) => {
  const { addToast } = useToast();
  return <button onClick={() => addToast('Lagret!')}>
}

Du kan enten sende inn en string, eller et objekt med følgende form:

{
  title: 'Tittelen på toasten',
  content: <>Mer <em>utfyllende</em> informasjon</>
  variant: 'info' // eller 'success', som er default
}

Toasts vil lukkes automatisk etter 6 sekunder, med mindre du flytter musepekeren over dem, eller lukker dem manuelt. Du kan sette den automatiske lukketiden for toasts i din app ved å sette delay propen på <ToastProvider /> (antall millisekunder):

<ToastProvider delay={10000} />

Små varsler

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Innholdet i alert-boksen

classNamestring

Ekstra klassenavn

closeButtonLabelstring

Skjermleser-label for lukkeknappen, om den vises

onClose(() => void)

Callback som kalles når man lukker boksen

titlestring

Tittel på boksen - oppsummer virkning

width"fluid" | "fit-content"

Bredden på boksen - fullbredde eller tilpasset innholdet

variant"success" | "info" | "warning" | "error"

Farge og uttrykk på alert-boksen

Små alert-bokser brukes når de skal plasseres inni en annen UI-komponent.

Kjøpet gikk i orden!
Toget går fra plattform 2
Snøvær på Bergensbanen
Kjøpet kunne ikke gjennomføres!

Default så opptar disse varslene full bredde. Om ønskelig kan du sette width="fit-content" for å la dem ta størrelsen til innholdet.

Retningslinjer

Globale varsler

Vi bruker informasjonskapsler

Entur sine løsninger bruker noen informasjonskapsler for å tilby sine tjenester til deg som bruker. Ved å bruke denne tjenesten, godtar du denne bruken. Se hvilke informasjonskapsler vi bruker, og hva de gjør.

Globale varsler brukes når man ønsker å meddele informasjon på tvers av en applikasjon. Eksempler kan være cookie-info, et API som er nede eller generalstreik som påvirker alt og alle.

Globale varsler finnes i info, warning og error-utførelse (ikke suksess). De skal dekke hele toppen av siden, og skyver ned sidens innhold. De har vanligvis muligheten til å bli lukket, slik at brukerne kan fjerne den. Beskjeden bør dukke opp igjen neste gang man laster siden, men dette er opp til konsumenten.

Lokale varsler

Manglende tariffkoder

Det er noen produkter i listen under som ikke har tilegnede tariffkoder. Dette betyr at man ikke kan kjøpe dette produktet gjennom Entur sine APIer.

Lokale varsler brukes for å vise informasjon om en underside, en seksjon eller et skjema. Oppsummering av valideringsfeil, advarsel om manglende tariffkoder og generell avgangsinformasjon kan være gode brukseksempler.

Lokale varsler bør inneholde kort og konsis informasjon, men kan også inneholde mer detaljert informasjon for "proffe" brukere. Slik ekstra informasjon bør skjules bak en ekspanderbar lenke. Disse varslene bør vanligvis ikke være lukkbare, siden de ikke okkuperer like mye plass som de globale.

Dette er den typen varsel vi bruker oftest i løsningene våre, men de bør fortsatt brukes sparsomt. Siden de er ganske sterke visuelle virkemidler, bør hver og en få stå for seg selv og få den oppmerksomheten den fortjener.

Kontekstuelle varsler

Avgang fra spor 2

Kontekstuelle varsler finnes i alle typer og vises i direkte tilknytning til innholdet det omtaler. De brukes ofte for å supplere innhold med ekstra informasjon.

Kontekstuelle varsler bør ikke kunne lukkes, og bør være ekstra korte og konsise. Disse brukes ikke så ofte, og man kan ofte benytte valideringsmeldinger istedenfor.

Toasts

Kunden ble opprettet

Kunden kan nå kjøpe billetter, bestille reiser og mye mer.

Toasts brukes i respons på visse typer handlinger og hendelser, og vises automatisk. De bør forsvinne etter minst 6 sekunder, eller om man trykker på lukke-knappen. Lukke-knappen bør dukke opp når man holder musepekeren over feltet, og "nedtellingen" for å automatisk fjerne knappen bør starte på nytt.

Toasts er kun tilgjengelige i typene success og info, men vi brukes for det meste success-varselet. De skal kun brukes som reaksjon på en hendelse, eller vise tidssensitiv informasjon. Et godt eksempel kan være at brukeren er oppdatert, eller at en annen bruker har begynt å redigere samme dokument.

Toast-varsler skal ikke plasseres over kritisk funksjonalitet, som knapper, navigasjon og andre funksjoner. De dukker opp nedenfra på små flater, og ligger øverst i høyre hjørne på store flater.

Nivåer

Komponenten skal brukes som en valideringsmelding som varsler brukerne om at noe de nettopp gjorde må korrigeres eller som en bekreftelse på at en handling ble fullført. Varsler brukes også som en utrop eller varsling for viktig informasjon som brukeren bør ta stilling til.

Information

Informasjonsvarslingen er blå. Den gir brukeren relevante tips eller informasjon som man behøver å vite når man skal utføre en oppgave.

Success

Suksessvarselet er grønn og vises når en handling er vellykket. For eksempel en kjøpsflyt der betalingen ble gjennomført.

Warning

Advarselen er gul og brukes for å advare brukeren om viktig informasjon som trenger oppmerksomhet. For eksempel at systemet er nede grunnet vedlikehold eller avvik i reiseforslag.

En advarsel vil ikke stoppe noe, men er der for å fortelle brukeren at det skjedde noe som ikke forventes (eller om et potensielt problem), og at det ikke er kritisk nok til å avslutte. Advarsler brukes først og fremst ved avvik i trafikkbildet, og bør ikke brukes i brukergrensesnittet som en reaksjon på noe brukeren gjør.

Error

Feilvarslingen er rød. Den indikerer at noe gikk galt etter å ha utført en handling, eller for å varsle brukeren om en feil som trenger øyeblikkelig oppmerksomhet. For eksempel at skjemaet ikke kunne lagres fordi noen felter ikke er fylt ut.

Retningslinjer om teksten

Skriv en informativ tekst som gir brukeren en utfyllende beskrivelse av situasjonen, dens konsekvenser og måter å komme seg ut av. Globale og lokale varsler har plass til mer tekst enn kontekstuelle varsler og toasts.

Prinsipper

Innafor
  • Bruk varsler sparsomt
  • Hold det kort og konsist
  • Hvis feilen er knyttet til et spesifikk tekstfelt, bør man også gi disse feltene en feiltilstand
  • Hvis det kreves at brukeren må gjøre noe som svar på et varsel, må man gi beskjed om hva de trenger å gjøre for å gjennomføre oppgaven.
  • Tillatt brukeren å avvise et varsel der det er aktuelt.
  • Bruk standardikonet for info, suksess, advarsel og feil.
Uttafor
  • Ikke legg varsler over innhold på siden
  • Ikke overdriv bruken av varsler. For mange vil enten overvelde eller irritere brukeren
  • Ikke legg skylden på brukeren ved en feilmelding. Ha en vennlig tone og hold språket forståelig
  • Ikke ta med varsler som ikke er relevant for brukerens nåværende oppgave