[FEATURE] Timeline interne-flater

[KenAJoh]

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

Forslag zoom

<TimeLine.Zoom>
  <Timeline.Zoom.Item label="3 mnd" interval="month" count={3} />
  <Timeline.Zoom.Item label="7 mnd" interval="month" count={7} />
  <Timeline.Zoom.Item label="9 mnd" interval="month" count={9} />
</TimeLine.Zoom>

[github-actions]

Chromatic build-output:

• 📋 Review
• 🎉 Storybook preview
• 🚫 Changes detected 🚫, review endringer.

commit: 649f70a8b

[KenAJoh]

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>

[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

[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.

[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.

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

[KenAJoh]

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