diff --git a/site/docs/components/buttons.mdx b/site/docs/components/buttons.mdx index ee696d5dff..f727e962a7 100644 --- a/site/docs/components/buttons.mdx +++ b/site/docs/components/buttons.mdx @@ -15,6 +15,7 @@ import Text from "../../src/components/Text"; # Buttons Stable +Accessible Buttons are meant to make actions easily visible and understandable to the user. HDS offers different kinds of button variations which each suit for different needs. diff --git a/site/docs/components/card.mdx b/site/docs/components/card.mdx index e19968badb..36ebfddda1 100644 --- a/site/docs/components/card.mdx +++ b/site/docs/components/card.mdx @@ -13,7 +13,8 @@ import Link from "../../src/components/Link"; # Card New -Pre-release +Pre-release +Accessible Cards can be used to divide and organise interface content for better understandability and readability. When used correctly, Cards can help your users to scan through vast amounts of information quicker. diff --git a/site/docs/components/checkbox.mdx b/site/docs/components/checkbox.mdx index faa02d986d..5a888e7ab5 100644 --- a/site/docs/components/checkbox.mdx +++ b/site/docs/components/checkbox.mdx @@ -14,6 +14,7 @@ import Text from "../../src/components/Text"; # Checkboxes Stable +Accessible Checkboxes are used to pick an option when one or more options can be chosen. diff --git a/site/docs/components/component_overview.mdx b/site/docs/components/component_overview.mdx index c271da7daa..46ca3e3be4 100644 --- a/site/docs/components/component_overview.mdx +++ b/site/docs/components/component_overview.mdx @@ -36,13 +36,13 @@ The React components and technical documentation are available in [Helsinki Desi ## Component status -**Since HDS is still in alpha stage, the component libraries are still experimental. The existing components can be used in projects but changes may still occur even for stable components.** +**Since HDS is still in beta stage, the component libraries are still experimental. The existing components can be used in projects but changes may still occur even for stable components.** HDS uses a simple labeling system for components to communicate their completeness and susceptibility to changes: Status | Description -----------------------------------------------------|-------------- -Pre-release | Component may be missing some features and/or is subject to breaking changes. These components are also open for feedback. **Avoid using in production.** +Pre-release | Component has been released/changed recently and we are monitoring if it needs fixes. **Be cautious of using in production** because breaking changes are still possible. Stable | Component's implementation, design and documentation are stable and fully featured. **These components can be used in production.** **In the alpha stage we reserve a possibility to do breaking changes to stable components but this is unlikely!** Accessible | Component has been tested for accessibility by a 3rd party auditor. New | Component has been released in or after the latest major release. @@ -56,16 +56,16 @@ Component | Status [Button](/components/button) | Stable | [](/storybook/core/?path=/story/components-button--primary) | [](/storybook/react/?path=/story/components-button--primary) [Card](/components/card) | Pre-release | [](/storybook/core/?path=/story/components-card--empty) | [](/storybook/react/?path=/story/components-card--empty) [Checkbox](/components/checkbox) | Stable | [](/storybook/core/?path=/story/components-checkbox--default) | [](/storybook/react/?path=/story/components-checkbox--default) -[Combobox](/components/dropdown) | Pre-release | | [](/storybook/react/?path=/story/components-dropdowns-combobox--default) +[Combobox](/components/dropdown) | Stable | | [](/storybook/react/?path=/story/components-dropdowns-combobox--default) Dropdown | Deprecated | | [Footer](/components/footer) | Pre-release | | [](/storybook/react/?path=/story/components-footer--default) [Icon](/components/icons) | Stable | [](/storybook/core/?path=/story/icons-icons--discord) | [](/storybook/react/?path=/story/icons-some--icondiscord) [Logo](/components/logo) | Stable | | [](/storybook/react/?path=/story/components-logo--playground) [Navigation](/components/navigation) | Pre-release | | [](/storybook/react/?path=/story/components-navigation) -[Notification](/components/notification) | Pre-release | [](/storybook/core/?path=/story/components-notification--default) | [](/storybook/react/?path=/story/components-notification--default) +[Notification](/components/notification) | Stable | [](/storybook/core/?path=/story/components-notification--default) | [](/storybook/react/?path=/story/components-notification--default) [Koros (wave elements)](/components/koros) | Stable | | [](/storybook/react/?path=/story/components-koros--basic) [Radio button](/components/radio-button) | Stable | [](/storybook/core/?path=/story/components-radio-button--default) | [](/storybook/react/?path=/story/components-radiobutton--default) -[Select](/components/dropdown) | Pre-release | | [](/storybook/react/?path=/story/components-dropdowns-select--default) +[Select](/components/dropdown) | Stable | | [](/storybook/react/?path=/story/components-dropdowns-select--default) [Status label](/components/status-label) | Stable | [](/storybook/core/?path=/story/components-status-label--default) | [](/storybook/react/?path=/story/components-status-label) [Text input](/components/text-field) | Stable | [](/storybook/core/?path=/story/components-textinput--default) | [](/storybook/react/?path=/story/components-textinput--default) [Text area](/components/text-field#text-area) | Stable | [](/storybook/core/?path=/story/components-text-input--default) | [](/storybook/react/?path=/story/components-textarea--default) diff --git a/site/docs/components/dropdown.mdx b/site/docs/components/dropdown.mdx index 58eb82b943..393aaa1813 100644 --- a/site/docs/components/dropdown.mdx +++ b/site/docs/components/dropdown.mdx @@ -15,8 +15,8 @@ import Link from "../../src/components/Link"; # Dropdown -Updated -Pre-release +Stable +Accessible A dropdown offers a user a list of options, of which one or multiple can be selected. Dropdowns are often used as part of forms and filters. diff --git a/site/docs/components/footer.mdx b/site/docs/components/footer.mdx index 148ca23368..7521c8a2d4 100644 --- a/site/docs/components/footer.mdx +++ b/site/docs/components/footer.mdx @@ -13,8 +13,8 @@ import LargeParagraph from "../../src/components/LargeParagraph"; # Footer -New -Pre-release +Pre-release +Accessible The Footer component is located at the bottom of the page below the main body content. It provides a place for secondary navigation, site wide actions and additional information. diff --git a/site/docs/components/icons.mdx b/site/docs/components/icons.mdx index 3345981f3d..272d823858 100644 --- a/site/docs/components/icons.mdx +++ b/site/docs/components/icons.mdx @@ -13,6 +13,7 @@ import Link from "../../src/components/Link"; # Icon Stable +Accessible Icons are used for providing visual cues and highlighting actions, denoting types and classes of information, and giving additional meaning to content. diff --git a/site/docs/components/koros.mdx b/site/docs/components/koros.mdx index ebdbc3aef7..ec85c849a6 100644 --- a/site/docs/components/koros.mdx +++ b/site/docs/components/koros.mdx @@ -13,6 +13,7 @@ import Link from "../../src/components/Link"; # Koros Stable +Accessible Koros, also known as Wave motifs, are part of the visual identity of City of Helsinki. The Koros can be used as visual elements, for example as part of the hero image or the footer and as a divider of content in the user interface. diff --git a/site/docs/components/logo.mdx b/site/docs/components/logo.mdx index 06f70ddc41..ed4502b6e9 100644 --- a/site/docs/components/logo.mdx +++ b/site/docs/components/logo.mdx @@ -12,8 +12,8 @@ import Link from "../../src/components/Link"; # Logo -New -Stable +Stable +Accessible Logo is used to identify the site or application as an official City of Helsinki service. diff --git a/site/docs/components/navigation.mdx b/site/docs/components/navigation.mdx index 71c24ffed9..e530d0d2c5 100644 --- a/site/docs/components/navigation.mdx +++ b/site/docs/components/navigation.mdx @@ -13,8 +13,8 @@ import LargeParagraph from "../../src/components/LargeParagraph"; # Navigation -New -Pre-release +Pre-release +Accessible A navigation component is the main way for users to navigate and locate themselves when using a service. It includes some key features present in most services to keep user experience consistent between them. diff --git a/site/docs/components/notification.mdx b/site/docs/components/notification.mdx index 3e20f4cf07..25f62aa3aa 100644 --- a/site/docs/components/notification.mdx +++ b/site/docs/components/notification.mdx @@ -14,8 +14,8 @@ import Text from "../../src/components/Text"; # Notifications -New -Pre-release +Stable +Accessible Notifications are used to present timely information to the user. HDS offers two types of notifications for different use cases. diff --git a/site/docs/components/radio_button.mdx b/site/docs/components/radio_button.mdx index 0911a36ee7..afbb4aed7c 100644 --- a/site/docs/components/radio_button.mdx +++ b/site/docs/components/radio_button.mdx @@ -14,6 +14,7 @@ import Text from "../../src/components/Text"; # Radio buttons Stable +Accessible Radio buttons are used to pick an option when only one option can be chosen. diff --git a/site/docs/components/status_label.mdx b/site/docs/components/status_label.mdx index 906159161c..1a3f90e5cd 100644 --- a/site/docs/components/status_label.mdx +++ b/site/docs/components/status_label.mdx @@ -12,7 +12,8 @@ import Link from "../../src/components/Link"; # Status label -Stable +Stable +Accessible Status labels can be used to highlight different statuses or items to the user. Status labels cannot be interacted with and they are only meant to convey relevant information. diff --git a/site/docs/components/text_fields.mdx b/site/docs/components/text_fields.mdx index 14210cf1bd..9b75ca8b8a 100644 --- a/site/docs/components/text_fields.mdx +++ b/site/docs/components/text_fields.mdx @@ -14,6 +14,7 @@ import Text from "../../src/components/Text"; # Text fields Stable +Accessible A text field is an input field that the user can interact with and input content and data. The user can also be provided with helper text if needed. Text inputs are used for shorter information while Text areas can be used for multiline answers. diff --git a/site/docs/components/tooltip.mdx b/site/docs/components/tooltip.mdx index 792893d3ce..e18ee69dd6 100644 --- a/site/docs/components/tooltip.mdx +++ b/site/docs/components/tooltip.mdx @@ -13,7 +13,8 @@ import LargeParagraph from "../../src/components/LargeParagraph"; # Tooltip New -Pre-release +Pre-release +Accessible Tooltips are used to present context or background information to the user.