Define and apply labels to indicate status of components in figma & storybook

[thrbnhrtmnn]

Description / User Story

We need to define and apply labels to Figma and Storybook to indicate wether a component is for example ready, experimental or planned. This label then indicates to user if they can use the component or if they maybe should not expect the component to work 100 %.

---

Acceptance Criteria

• Possible Status Badges of components have been defined > see here or background info below
• Status badges have been applied to all components in Figma
• Status badges have been applied to all components in Storybook
• Definition is part of SB and Repo (will be added to Figma file with Update Component Overview in Figma #912 )

---

Background information

• We could use a badge addon in storybook to have something similar to https://nordhealth.design/components/
• Google Sheet file with Status suggestions
• Definitions from the Google Sheet:
  • Draft: "Draft" components are in the initial stages of development. They are shared with the team for feedback and collaboration but are not yet ready for broader use.
  • New: Components labeled as "New" have been newly introduced. Designers and developers are encouraged to use them cautiously, understanding that updates and modifications are likely. Teams are evaluating its readiness for a stable release. Feedback is highly welcomed.
  • Stable: Stable components have been approved by consuming teams and proven stable over multiple releases. The component has reached a mature and reliable state, suitable for widespread use.
  • Updated: Components labeled as "Updated"are stable components which have newly introduced functionality. Designers and developers are encouraged to use these new functionalities cautiously, understanding that updates and modifications are likely. Teams are evaluating the readiness of the new functionalities for a stable release. Feedback for the new functionalities is highly welcomed.
  • Deprecated: A "deprecated" component is one that is still available for use, but it's no longer actively supported or recommended for new implementations. Teams are advised to transition to alternative components or follow the suggested migration path.

[thrbnhrtmnn]

I added a list of all components, and their current status and also added a suggestion for the labels here

[thrbnhrtmnn]

A new list of possible status has been evaluated today together with @larserbach . The status are defined in the google sheet, which has been added to the issue description.

[thrbnhrtmnn]

Hey @larserbach , for this to be done we need to update the labels in the badges documentation component.

I created the design branch feature/606-update-badge-labels for this and did some changes. I did not add the "updated" status yet, as I am still not sure if we will need it and because I did not know how to add it to the ComponentStatus component. I also changed the color for the Stable label to match the "encourage" color we use in the button, as I also used the "destructive" color for the new deprecated label.

If you approve the changes, I would create a branch in the B01LER file where I update all the status of the components. I think it would also make sense to replace the ComponentStatus with the Badges component here, as there is no cases that I can think of where we have multiple Bades for a component and I also think we do not need the Figma or Storybook Icon. Lets discuss this when you have time :-)

[thrbnhrtmnn]

As discussed today, we merged the changes of the ComponentStatus and Badges components.

I also updated the status of all components according to the google sheet in this design branch: feature/858-component-grouping

[thrbnhrtmnn]

Hey @JpunktWpunkt , this issue is done from design side and could be picked up next. Please contact me when you have time to go over it together :-)