Altinn Component library

sorensensig commented 2 months ago

Status

Accepted

Decision

@altinnadmin will create a new repo for the Altinn component library where @digdir/team-dialogporten-frontend, @Altinn/team-access-management, @Altinn/team-access-info and @Altinn/team-portal should be given writing rights.
@digdir/team-dialogporten-frontend will establish a first version of the library and commence moving their own components to the shared library, making them available for use by other teams.
@altinnadmin ought to be involved with the technical setup of the library. Moreover, @framitdavid and @TheTechArch had several suggestions and ideas that ought to be included.
It's vital that we properly communicate a joint understanding of what this library is and how it should be used, which will require quite a bit of work.

Background

What is the change that we're proposing and/or doing?

Establish a single component and pattern repository and adjoined figma library for Altinn specific items that the Designsystem lacks functionality around or that are too Altinn-spesific for the Designsystem to publish.

Also use the component library as a facade for Designsystemet, in the same way

Context

What is the issue that we're seeing that is motivating this decision or change?

We are seeing several different approaches to solve similar needs across teams in Altinn. Internally, Altinn consist of several product teams, however to the end user it's just one product. We are looking to negate inconsistencies across the Altinn products to ensure the end-user experience Altinn as one seamless product. To do this we need to build one repository for Altinn-specific components and patterns that builds on the design system and that follows brand guidelines. Moreover, we must also establish one area for these components and patterns in figma to ensure re-use and consistency across products.

In the same way as the developer-facing Altinn Studio has created https://components.altinn.studio as a facade, we should do the same for our end-user facing products.

https://blogg.impactit.no/hvordan-vi-kan-ta-i-bruk-designsystemet-no-p%C3%A5-en-forusigbar-m%C3%A5te-3988980884a2

Consequences

What becomes easier or more difficult to do because of this change?

This change requires that someone owns and coordinates the components and patters across design and code as well as towards the brand guidelines and design system. With this change we will be better able to align the Altinn product suite so that we can reduce the experience of fragmentation that has occurred recently throughout the Altinn modernisation.

Suggestions

Design

Code

Create a new common GitHub repo for components that all teams has access to
Host the repo (storybook with components and patterns) somewhere
Create a backlog for concrete patterns and components

olavflar commented 2 months ago

Maybe add something about icons? We are using Nav-fellesikonbibliotek But what happens when we add our custom icons, should we have a library for our own Altinn custom icons?

altinnadmin commented 2 months ago

But what happens when we add our custom icons

Seems like Studio has added some icons to their storybook. Some of them seems very generic, and also exists in Aksel. Are they "proxies" like the other components @framitdavid ?

Seems like the model Designsystemet is promoting is contributions upstream if icons are missing: https://www.designsystemet.no/grunnleggende/designelementer/ikoner

Isn't the point to reuse icons across solutions? cc: @mrosvik

Ildest commented 2 months ago

@Annikenkbrathen you are reusing icons from Aksel as much as possible, right?

olavflar commented 1 month ago

Er det slik at de komponentene som vi har i appene; https://docs.altinn.studio/altinn-studio/reference/ux/components/ Skal de flyttes til en felles storybook?

altinnadmin commented 1 month ago

New repo created: https://github.com/Altinn/altinn-components

Annikenkbrathen commented 1 month ago

@Ildest That's correct, we use Aksel's icons as much as we can. In cases where we can't find an Aksel icon that fits our needs, we create new ones. However, these are made according to Aksel's guidelines and are designed to be as similar as possible, so that you can't tell the difference between Aksel's icons and Studio's icons in terms of style.

Altinn / altinn-decision-log