aksel icon indicating copy to clipboard operation
aksel copied to clipboard

[FEATURE] Timeline interne-flater

Open KenAJoh opened this issue 2 years ago • 5 comments

WIP branch for ny tidslinje bruk på interne flater

Tidligere brukt kode

  • https://github.com/navikt/helse-frontend-moduler/blob/master/packages/tidslinje/src/components/tidslinje/Tidslinje.tsx
  • https://github.com/navikt/familie-felles-frontend/tree/master/packages/familie-tidslinje

Storybook:

  • https://navikt.github.io/helse-frontend-moduler/?path=/docs/tidslinje-tidslinje--basic@
  • https://navikt.github.io/familie-felles-frontend/?path=/story/komponenter-tidslinje--basic-clickable

KenAJoh avatar Oct 14 '22 19:10 KenAJoh

Chromatic build-output:

commit: 649f70a8b

github-actions[bot] avatar Oct 14 '22 19:10 github-actions[bot]

Forslag til førsteutkast for API

<Timeline>
  <Timeline.Row label=ReactNode>
	    <Timeline.Period from=Date to=Date .../>
	    <Timeline.Period from=Date to=Date icon=ReactNode onClick >
		      Statusboble-innhold
	    </Timeline.Period>
  </Timeline.Row>
  <Timeline.Pin date=Date>
	    Statusboble-innhold
  </Timeline.Pin>
  <Timeline.Pin date=Date>
	    Statusboble-innhold
  </Timeline.Pin>
</Timeline>

  • Bør alle rows være i en egen wrapper eks Timeline.Rows?
  • Bør row ha en egen komponent for label?
<Timeline.Row>
	<Timeline.Label>
	<Timeline.Periods>
		<Timeline.Period>

KenAJoh avatar Oct 18 '22 08:10 KenAJoh

Det vil vel kun være en gruppering av Rows per tidslinje, så jeg tenker at det å tilby Timeline.Rows er å gi brukeren et unødvendig ansvar da dette er noe vi kan bygge inn fra vår side. Med mindre du ser noen fordeler ved å gi brukeren kontroll over dette? @KenAJoh

kschieren avatar Oct 18 '22 09:10 kschieren

Det vil vel kun være en gruppering av Rows per tidslinje, så jeg tenker at det å tilby Timeline.Rows er å gi brukeren et unødvendig ansvar da dette er noe vi kan bygge inn fra vår side. Med mindre du ser noen fordeler ved å gi brukeren kontroll over dette? @KenAJoh

Tenker egentlig også det for denne versjonen. Hvis vi frem i tid hvis vi skal tilby "accordion-rows", er wrapper nødvendig for at det ikke skal være breaking da? Kanskje default er uten wrapper, men med collapsible (hvis vi implementerer i fremtiden) at man har en "Timeline.CollapsibleRow" eller noe lignende.

KenAJoh avatar Oct 18 '22 10:10 KenAJoh

Det vil vel kun være en gruppering av Rows per tidslinje, så jeg tenker at det å tilby Timeline.Rows er å gi brukeren et unødvendig ansvar da dette er noe vi kan bygge inn fra vår side. Med mindre du ser noen fordeler ved å gi brukeren kontroll over dette? @KenAJoh

Tenker egentlig også det for denne versjonen. Hvis vi frem i tid hvis vi skal tilby "accordion-rows", er wrapper nødvendig for at det ikke skal være breaking da? Kanskje default er uten wrapper, men med collapsible (hvis vi implementerer i fremtiden) at man har en "Timeline.CollapsibleRow" eller noe lignende.

Ja det høres fornuftig ut i mitt hode i hvert fall, så da blir det en wrapper rundt collapsible rows eventuelt

kschieren avatar Oct 18 '22 11:10 kschieren

Kort oppsummering fra UU/UX møte:

Aria-hidden på axis header

Teste å løse det på samme måte som Stepper:

  • ol -> li
  • aria-labelledby header (row-header)

Date-format:

  • suksess fra 01.01.2020 til 01.02.2020

Pins:

  • Bake inn pins i hver rad (fokuserbar)?
  • Gi hver pin et navn: eks [pin] for lettere søk

KenAJoh avatar Oct 24 '22 12:10 KenAJoh

Supplerende Stønad Uføre kunne tenke seg å bytte til denne i su-se-framover. Hvordan er ståa på denne?

hestad avatar Jan 09 '23 12:01 hestad

Supplerende Stønad Uføre kunne tenke seg å bytte til denne i su-se-framover. Hvordan er ståa på denne?

Heisann! Vi planlegger å få den ut i beta neste uke @hestad

kschieren avatar Jan 10 '23 13:01 kschieren