digdir/designsystemet

Designsystemet

designsystemet's Issues

Add keyboard navigation/controll as a part of the design specification

Some of the components we make are not standard html components and need to be correctly specified and developed so that they work as excpected.

• Add a "keyboard navigation" frame to our Figma template
• Add to checklist in Issue template and Figma

Figma: Upgrade to organization plan

With the org licence we will have:

• Org-wide libraries
• Design system analytics
• Branching and merging
• Centralized file management
• Private plugins and widgets

React: Legge til scss mixins for breakpoints og pxToRem

Date picker: Design component in Figma

New component: Chip

Related information and research findings:

• Chip in Entur design system
• Chip in Aksel design system

Chip specification

• Should come in three variants:
  • Chip
    • Should support polymorphism (chip can be used as navigation links or buttons)
    • By default a button. Should always be an interactive element. For static elements use the Tag component instead.
  • Chip removable
  • Chip toggle
    • Single (radio)
    • Multi (checkbox)
• Should come in two sizes in first version: xsmall, small.
• Should not support different colors
• There should be a Chip.group component for grouping chips

Tasks

Beta Give feedback

1. Chip: Design Chip component in Figma
2. Tokens for Chip designsystem#360
   +0
   
3. Chip: Write guidelines for usage designsystem#51
   1 of 3
   component documentation/guidelines +2
   
4. Chip: Develop React component designsystem#367
   react +1
   

   
5. Chip: Multiselect already has a chip, make sure the same chip as developed here is used in multiselect.

Figma component library:

https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/DDS---Core-Components?node-id=7882%3A46619&t=gzm3ed7E13uV63R1-1

(Legacy) Select not synced with design

Description of the bug

1. Tab-focus (purple outline) should only show when using keyboard navigation, not when you activate the select-box.

2. When resizing window (storybook) the component seems to be a fix width and does not scale.
   

3. There should be two sizes: Medium with 18px, and Small with 16px font size both for label, description and options. Seems like the options is larger than the selected text.
   

4. The X on the chip is not centered
   

5. Should be named "Single select" and "Multi select" instead of "Flervalgsmeny" and E"nkel"
   

See Figma sketches for correct design:
https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/DDS---Core-Components?node-id=7577%3A43639&t=xlYDTn7VXmpckqPy-1

Steps To Reproduce

Go to https://digdir.github.io/designsystem/?path=/story/kjernekomponenter-select-flervalgsmeny--normal to reproduce the behavior.

Additional Information

No response

New component: Link

What component is it that needs specification?

Link

Tasks

Link to correct placement in our Figma component library.

• Design is fully specified in Figma
  • Design component with all relevant states
  • Do a accessibility test of the sketches
  • Functionality/animation is described and prototyped if relevant
  • Describe keyboardnavigation (Only relevant if its not a native html component)
• Write acceptance criteria and link to Figma

SVG

• If there are used any svgs in this component is it available for the developer?

Sammenstilling av gameplan + forankring

Logo: Opprette side i figma for oppretting av nye logoer

SEO: Remove Team-specific Storybooks from google search

<meta name="robots" content="noindex">

Prøve å lage "preview-head.html" file i ".storybook" mappa og putte meta taggen inn der: https://storybook.js.org/docs/react/configure/story-rendering

Altinn Storybook: On page "introduction" link to "Felles Designsystem" for core components

• In readme. Done: Altinn/altinn-design-system@0cccbb3
• Rediger forsiden/introduksjonssiden. (Can´t be done until this is fixed: Altinn/altinn-design-system#232)
• Forklar på introduksjonssiden til Atlinn Storybook at dette gjelder kun komponenter som er unike for altinn, men at vi nå jobber med felles designsystem med gjenbrukbare komponenter på tvers.

Storybook: Oppdatere storybook readme til engelsk

Article: Routines for user testing

Storybook: Legge til changelog for react NPM pakken

• Lage test-commits med conventional commits standarden som tester "docs" og" feat" prefix og generere changelog for v0.1 av react pakken

Checkbox: Write guidelines for usage

• Generelle retningslinjer
• "Do´s and don´t"-eksempel på plassering av checkboxes vertical/horizontal
• Lage et eksempel på at det er en logisk sammenheng mellom ledetekst og svaralternativer.

Tasks

Beta Give feedback

1. Lag mal for komponent
2. Samle informasjon om avkrysningboks
3. Skrive utkast
4. Sende utkast til gjennomsyn hos Dorte
5. Legge i Figma og sette til review/informere Marianne
6. Innarbeide kommentarer fra review
7. Eventuelt lage tekster i eksempler
8. Marianne oppdaterer Storybook
9. Gørild ser over Storybook

Tokens: Grid and breakpoints

Schema components need more flexible text properties

In order to add custom formatting and components to labels, descriptions etc., it is not sufficient to take in these properties as simple strings. I suggest changing their type to React.ReactNode. This will make it possible to use the design system components in the preview mode of the form builder in Altinn Studio:

Endre fra BSD3 til MIT lisens for designsystemet

• Legge til lisens i readme i repo
• Legge til lisens i react storybook dokumentasjon

Workshop: Overordnet Strategi WS med Marked/Kom

Workshop med Marked/Kom

• Hvordan kommunisere og involvere eksternt mtp. det vi ønsker å oppnå: Et samarbeid rundt felles designsystem i det offentlige.
• Mål for markedsføringsarbeidet
• Identifisere avhengigheter og se på hvordan det henger sammen med andre initiativ i Digdir
• Kanalstrategi - Hvilke området er det viktig at vi er synlige.

Det er satt opp to økter med Marked og Kom 8.juni.

Tokens: Assess the basis + add missing tokens

Component: Text area (Not synced with design)

Text-area er påbegynt i denne issuen, men mangler noen detaljer fra Figma-designet:

• Mulighet for Counter
• Mulighet for å sette default høyde, slik at bruker for en antydning av forventet mengde input (feltet skal fortsatt kunne resizes i høyden av bruker).
• Feil border (se design)

New component: Popover

What component is it that needs specification?

Popover

Tasks

Link to correct placement in our Figma component library.
https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/DDS---Core-Components?node-id=10702%3A68732&t=gzm3ed7E13uV63R1-1

• Design is fully specified in Figma
  • Design component with all relevant states
  • Do a accessibility test of the sketches
  • Functionality/animation is described and prototyped if relevant
  • Describe keyboardnavigation (Only relevant if its not a native html component)
• Write acceptance criteria and link to Figma

SVG

• If there are used any svgs in this component is it available for the developer?

Tokens for: Chip

Tokens: Endre NPM pakken til å peke mot designsystemet

• Endre navn på NPM pakken til "@digdir/design-system-tokens" og publisere
• Markere gamle NPM pakken som depricated og peke til nye NPM pakken
• Oppdatere pakke-avhengigheten i storybook for designsystemet
• Oppdatere dokumentasjon i storybook: Endre navn i shield/badge og fikse path i tokens-table komponenten

Chip: Write guidelines for usage

Chip Guidelines and examples

Tasks

Beta Give feedback

1. Write/update guidelines
2. Do's and don'ts
3. Examples

Docs: First page in storybook (Content)

Docs: Make guidelines for how to contribute

Notes:

• https://generator.contributing.md/
• https://contributing.md/example/
• What to think about when contributing for the first time?
• Describe how we use conventional commits and PRs

Storybook: Design interface for common Storybook

Component/Popover

Describe the component

Features:

• Should be able to specify any ReactNode as the trigger
• Popover content should be able to contain any ReactNode
• Popover should be given color style by using variant-prop. Ex: Default: white, Info: blue, Warning: yellow, Danger: red.
• Popover should handle keyboard navigation and handle screen-readers
• Popover should be WCAG compliant

Issue in app-frontend-react for tracking purposes: https://github.com/orgs/Altinn/projects/39/views/2?pane=issue&itemId=18161239

If you have any examples or similar components feel free to include links or screenshots here

Font: Replace FF-DIN and Altinn-DIN with Inter in code

Combobox: Write guidelines for usage

Component: Accordion (Figma design)

Related issues:

• Altinn/app-frontend-react#165

Tokens: Fluid sizing

Tokens: Legge til changelog basert på github releases i storybook

Lage en docs-component i storybook som henter ut changelog fra github og viser den på tokens siden i storybook.

• Legge til changelog for tokens pakken i en MDX fil
• Lagre fila som draft
• Skru på fila når tokens pakken er ute

Docs: Is it possible to sync guidelines text from Figma to Storybook markdown?

Ikoner: Lage til eksport og bygging av ikoner fra figma til repo

Design: Prioritize components based on needs from Altinn Studio/Apps (and other teams)

Vi må finne ut hva som blir viktigst av komponenter fremover, slik at design kan ligge i forkant av utvikling

SEO: Check if old design system (patternlab) is removed from google search

Remove this: https://altinn.github.io/DesignSystem/ from google search.

Add a PR to https://github.com/Altinn/DesignSystem

metatag i header som gjør at den ikke indekseres i søkemotorer:

<meta name="robots" content="noindex">

Repo: Lage conventional-commit regel i repoet

Legge til en commit-regel i repoet som tvinger brukere til å følge conventional-commits standarden. Konsekvensen av denne endringen er at brukere får ikke lov til å commite om det ikke følger standarden.

New component: Helptext

What component is it that needs specification?

Helptext

Tasks

Link to correct placement in our Figma component library

• Design is fully specified in Figma
  • Design component with all relevant states
  • Do a accessibility test of the sketches
  • Functionality/animation is described and prototyped if relevant
  • Keyboard navigation specified

SVG

• If there are used any svgs in this component is it available for the developer?
  • The outlined and filled questionmark icon is a part of core icons

Storefront: Consider making our own storefront

Vi bruker Storybook som mellomløsning inntil videre, med mål om å lage en egen dokumentasjonsside senere. React komponentene vi bygger opp i markdown filene kan flyttes over til ny løsning (ikonsøk, komponent-bruk osv). NAV bruker https://www.sanity.io/, og har en react-app som konsumerer CMSet via et API. Siden det er et CMS, gir det alle med tilgang gode redigeringsmuligheter på nettsiden.

Establish team, backlog, activities ++

• Søknad om midler: Medfinansieringsordningen (Utgår i denne runden)
• Ressurser
• Roadmap
• Backlog
• Activities: Panning, daily, review, retro

Storybook: Show only menu items for first level (one menu item per component)

Kanskje vi bør vurdere å ikke vise de overskriftene som ikke er egne sider i venstremenyen. Det blir litt voldsomt. Er dette mulig @Thuneer ? :) Slik at vi under Select viser kun "Enkel" og "Flervalgsmeny".

Component: Lage grid komponenter

• Kalle inn til møte med DS-teamet for å diskutere hvordan komponentene skal se ut
• Legge ut forslaget i design-systen slack kanalen

React: Legge til scss-modul støtte

Font: Replace FF-DIN and Altinn-DIN with Inter in Figma

Description
Because of lisens issues and lacking functionality on FF DIN and Altinn-DIN we have to find one font that we can use on all our products. After reviewing different potensial Open Source fonts we landed on Inter as the best solution.

The font should be replaced in all components and texts in Figma. Inter is larger than the previous used DIN-font, so we should make sure it aligns correct in different contexts, and that the vertical space inside containers is correct.

In scope

• Define the different weights and sizes we need to replace FF DIN
• Test how the different pages will look/behave after a font change
• Replace all fonts in Figma

Relevant:
Change the font on relevant pages/systems in code

Component: Select (combine multiselect and single select in Figma and fix size issue)

Storybook: Publish the new design system as an NPM-package

Before we can remove the components from Altinn Storybook, we need to publish the new design system as an NPM package.

Git: Issue templates

Hvordan fungerer issue malene?

https://github.com/digdir/designsystem/issues/new/choose

Article: Hvordan håndterer disabled/read-only

(Se kommentar fra Dorthe/Gørild i Figma)