Merge pull request #285 from City-of-Helsinki/content/beta-component-…

…statuses [Documentation] Component status update for beta release
City-of-Helsinki · Oct 29, 2020 · 411e01f · 411e01f
2 parents 11759ad + 204e41b
commit 411e01f
Show file tree

Hide file tree

Showing 15 changed files with 27 additions and 18 deletions.
diff --git a/site/docs/components/buttons.mdx b/site/docs/components/buttons.mdx
@@ -15,6 +15,7 @@ import Text from "../../src/components/Text";
 # Buttons
 
 <StatusLabel type="info">Stable</StatusLabel>
+<StatusLabel type="success" style={{marginLeft: 'var(--spacing-xs)'}}>Accessible</StatusLabel>
 
 <LargeParagraph>
   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
@@ -13,7 +13,8 @@ import Link from "../../src/components/Link";
 # Card
 
 <StatusLabel>New</StatusLabel>
-<StatusLabel type="alert" style={{marginLeft: 'var(--spacing-xs)'}}>Pre-release</StatusLabel> 
+<StatusLabel type="alert" style={{marginLeft: 'var(--spacing-xs)'}}>Pre-release</StatusLabel>
+<StatusLabel type="success" style={{marginLeft: 'var(--spacing-xs)'}}>Accessible</StatusLabel>
 
 <LargeParagraph>
     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
@@ -14,6 +14,7 @@ import Text from "../../src/components/Text";
 # Checkboxes
 
 <StatusLabel type="info">Stable</StatusLabel>
+<StatusLabel type="success" style={{marginLeft: 'var(--spacing-xs)'}}>Accessible</StatusLabel>
 
 <LargeParagraph>
   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
@@ -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
 -----------------------------------------------------|--------------
-<StatusLabel type="alert">Pre-release</StatusLabel>  | Component may be missing some features and/or is subject to breaking changes. These components are also open for feedback. **Avoid using in production.**
+<StatusLabel type="alert">Pre-release</StatusLabel>  | 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.
 <StatusLabel type="info">Stable</StatusLabel>        | 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!** 
 <StatusLabel type="success">Accessible</StatusLabel> | Component has been tested for accessibility by a 3rd party auditor.
 <StatusLabel>New</StatusLabel>                       | Component has been released in or after the latest major release.
@@ -56,16 +56,16 @@ Component                                                        | Status
 [Button](/components/button)                                     | <StatusLabel type="info">Stable</StatusLabel>        | [<IconCheck/>](/storybook/core/?path=/story/components-button--primary)       | [<IconCheck/>](/storybook/react/?path=/story/components-button--primary)
 [Card](/components/card)                                         | <StatusLabel type="alert">Pre-release</StatusLabel>  | [<IconCheck/>](/storybook/core/?path=/story/components-card--empty)           | [<IconCheck/>](/storybook/react/?path=/story/components-card--empty)
 [Checkbox](/components/checkbox)                                 | <StatusLabel type="info">Stable</StatusLabel>        | [<IconCheck/>](/storybook/core/?path=/story/components-checkbox--default)     | [<IconCheck/>](/storybook/react/?path=/story/components-checkbox--default)
-[Combobox](/components/dropdown)                                 | <StatusLabel type="alert">Pre-release</StatusLabel>  |                                                                               | [<IconCheck/>](/storybook/react/?path=/story/components-dropdowns-combobox--default)
+[Combobox](/components/dropdown)                                 | <StatusLabel type="info">Stable</StatusLabel>        |                                                                               | [<IconCheck/>](/storybook/react/?path=/story/components-dropdowns-combobox--default)
 Dropdown                                                         | <StatusLabel type="error">Deprecated</StatusLabel>   |                                                                               |
 [Footer](/components/footer)                                     | <StatusLabel type="alert">Pre-release</StatusLabel>  |                                                                               | [<IconCheck/>](/storybook/react/?path=/story/components-footer--default)
 [Icon](/components/icons)                                        | <StatusLabel type="info">Stable</StatusLabel>        | [<IconCheck/>](/storybook/core/?path=/story/icons-icons--discord)             | [<IconCheck/>](/storybook/react/?path=/story/icons-some--icondiscord)
 [Logo](/components/logo)                                         | <StatusLabel type="info">Stable</StatusLabel>        |                                                                               | [<IconCheck/>](/storybook/react/?path=/story/components-logo--playground)
 [Navigation](/components/navigation)                             | <StatusLabel type="alert">Pre-release</StatusLabel>  |                                                                               | [<IconCheck/>](/storybook/react/?path=/story/components-navigation)
-[Notification](/components/notification)                         | <StatusLabel type="alert">Pre-release</StatusLabel>  | [<IconCheck/>](/storybook/core/?path=/story/components-notification--default) | [<IconCheck/>](/storybook/react/?path=/story/components-notification--default)
+[Notification](/components/notification)                         | <StatusLabel type="info">Stable</StatusLabel>        | [<IconCheck/>](/storybook/core/?path=/story/components-notification--default) | [<IconCheck/>](/storybook/react/?path=/story/components-notification--default)
 [Koros (wave elements)](/components/koros)                       | <StatusLabel type="info">Stable</StatusLabel>        |                                                                               | [<IconCheck/>](/storybook/react/?path=/story/components-koros--basic)
 [Radio button](/components/radio-button)                         | <StatusLabel type="info">Stable</StatusLabel>        | [<IconCheck/>](/storybook/core/?path=/story/components-radio-button--default) | [<IconCheck/>](/storybook/react/?path=/story/components-radiobutton--default)
-[Select](/components/dropdown)                                   | <StatusLabel type="alert">Pre-release</StatusLabel>  |                                                                               | [<IconCheck/>](/storybook/react/?path=/story/components-dropdowns-select--default)
+[Select](/components/dropdown)                                   | <StatusLabel type="info">Stable</StatusLabel>        |                                                                               | [<IconCheck/>](/storybook/react/?path=/story/components-dropdowns-select--default)
 [Status label](/components/status-label)                         | <StatusLabel type="info">Stable</StatusLabel>        | [<IconCheck/>](/storybook/core/?path=/story/components-status-label--default) | [<IconCheck/>](/storybook/react/?path=/story/components-status-label)
 [Text input](/components/text-field)                             | <StatusLabel type="info">Stable</StatusLabel>        | [<IconCheck/>](/storybook/core/?path=/story/components-textinput--default)    | [<IconCheck/>](/storybook/react/?path=/story/components-textinput--default)
 [Text area](/components/text-field#text-area)                    | <StatusLabel type="info">Stable</StatusLabel>        | [<IconCheck/>](/storybook/core/?path=/story/components-text-input--default)   | [<IconCheck/>](/storybook/react/?path=/story/components-textarea--default)

diff --git a/site/docs/components/dropdown.mdx b/site/docs/components/dropdown.mdx
@@ -15,8 +15,8 @@ import Link from "../../src/components/Link";
 
 # Dropdown
 
-<StatusLabel type="error">Updated</StatusLabel> 
-<StatusLabel type="alert" style={{marginLeft: 'var(--spacing-xs)'}}>Pre-release</StatusLabel>
+<StatusLabel type="info">Stable</StatusLabel>
+<StatusLabel type="success" style={{marginLeft: 'var(--spacing-xs)'}}>Accessible</StatusLabel>
 
 <LargeParagraph>
   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
@@ -13,8 +13,8 @@ import LargeParagraph from "../../src/components/LargeParagraph";
 
 # Footer
 
-<StatusLabel>New</StatusLabel>
-<StatusLabel type="alert" style={{marginLeft: 'var(--spacing-xs)'}}>Pre-release</StatusLabel>
+<StatusLabel type="alert">Pre-release</StatusLabel>
+<StatusLabel type="success" style={{marginLeft: 'var(--spacing-xs)'}}>Accessible</StatusLabel>
 
 <LargeParagraph>
     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
@@ -13,6 +13,7 @@ import Link from "../../src/components/Link";
 # Icon
 
 <StatusLabel type="info">Stable</StatusLabel>
+<StatusLabel type="success" style={{marginLeft: 'var(--spacing-xs)'}}>Accessible</StatusLabel>
 
 <LargeParagraph>
   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
@@ -13,6 +13,7 @@ import Link from "../../src/components/Link";
 # Koros
 
 <StatusLabel type="info">Stable</StatusLabel>
+<StatusLabel type="success" style={{marginLeft: 'var(--spacing-xs)'}}>Accessible</StatusLabel>
 
 <LargeParagraph>
   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
@@ -12,8 +12,8 @@ import Link from "../../src/components/Link";
 
 # Logo
 
-<StatusLabel>New</StatusLabel>
-<StatusLabel type="info" style={{marginLeft: 'var(--spacing-xs)'}}>Stable</StatusLabel> 
+<StatusLabel type="info">Stable</StatusLabel>
+<StatusLabel type="success" style={{marginLeft: 'var(--spacing-xs)'}}>Accessible</StatusLabel>
 
 <LargeParagraph>
     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
@@ -13,8 +13,8 @@ import LargeParagraph from "../../src/components/LargeParagraph";
 
 # Navigation
 
-<StatusLabel>New</StatusLabel>
-<StatusLabel type="alert" style={{marginLeft: 'var(--spacing-xs)'}}>Pre-release</StatusLabel> 
+<StatusLabel type="alert">Pre-release</StatusLabel>
+<StatusLabel type="success" style={{marginLeft: 'var(--spacing-xs)'}}>Accessible</StatusLabel>
 
 <LargeParagraph>
   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
@@ -14,8 +14,8 @@ import Text from "../../src/components/Text";
 
 # Notifications
 
-<StatusLabel>New</StatusLabel>
-<StatusLabel type="alert" style={{marginLeft: 'var(--spacing-xs)'}}>Pre-release</StatusLabel> 
+<StatusLabel type="info">Stable</StatusLabel>
+<StatusLabel type="success" style={{marginLeft: 'var(--spacing-xs)'}}>Accessible</StatusLabel>
 
 <LargeParagraph>
     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
@@ -14,6 +14,7 @@ import Text from "../../src/components/Text";
 # Radio buttons
 
 <StatusLabel type="info">Stable</StatusLabel>
+<StatusLabel type="success" style={{marginLeft: 'var(--spacing-xs)'}}>Accessible</StatusLabel>
 
 <LargeParagraph>
   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
@@ -12,7 +12,8 @@ import Link from "../../src/components/Link";
 
 # Status label
 
-<StatusLabel type="info">Stable</StatusLabel> 
+<StatusLabel type="info">Stable</StatusLabel>
+<StatusLabel type="success" style={{marginLeft: 'var(--spacing-xs)'}}>Accessible</StatusLabel>
 
 <LargeParagraph>
   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
@@ -14,6 +14,7 @@ import Text from "../../src/components/Text";
 # Text fields
 
 <StatusLabel type="info">Stable</StatusLabel>
+<StatusLabel type="success" style={{marginLeft: 'var(--spacing-xs)'}}>Accessible</StatusLabel>
 
 <LargeParagraph>
   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
@@ -13,7 +13,8 @@ import LargeParagraph from "../../src/components/LargeParagraph";
 # Tooltip
 
 <StatusLabel>New</StatusLabel>
-<StatusLabel type="alert" style={{marginLeft: 'var(--spacing-xs)'}}>Pre-release</StatusLabel> 
+<StatusLabel type="alert" style={{marginLeft: 'var(--spacing-xs)'}}>Pre-release</StatusLabel>
+<StatusLabel type="success" style={{marginLeft: 'var(--spacing-xs)'}}>Accessible</StatusLabel>
 
 <LargeParagraph>
   Tooltips are used to present context or background information to the user.