+
+ Skip to content
+
+
+
+ {/* Can't manage to use either assert for this rule, even if I copy paste from example */}
+ {/* eslint-disable-next-line */}
+
+ EDS – Equinor Design System
+
+
+ {/* */}
+ {/* */}
+
+ Component Status
+
+
+
+ {/* */}
+ {/* Can't manage to use either assert for this rule, even if I copy paste from example */}
+ {/* eslint-disable-next-line */}
+
+ {/* */}
+ {({ location }) => }
+
+
+ {children}
+
+
+
+ )
+}
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
-export default Layout
+export default Layout // eslint-disable-line
diff --git a/apps/storefront/src/components/seo.jsx b/apps/storefront/src/components/seo.jsx
index 58be19b51d..6285db3c9a 100644
--- a/apps/storefront/src/components/seo.jsx
+++ b/apps/storefront/src/components/seo.jsx
@@ -9,7 +9,6 @@ const detailsQuery = graphql`
siteMetadata {
title
description
- author
}
}
}
@@ -24,6 +23,7 @@ function SEO({ description, lang, meta, keywords, title }) {
description || data.site.siteMetadata.description
return (
{
) : (
- Ops! Can't find the video, please check if your link is correct 🎥
+ Ops! Can't find the video, please check if your link is correct{' '}
+
+ 🎥
+
{url}
)
diff --git a/apps/storefront/src/content/assets/brand-illustrations/overview.mdx b/apps/storefront/src/content/assets/brand-illustrations/overview.mdx
index 31667375a4..7d16ed08b9 100644
--- a/apps/storefront/src/content/assets/brand-illustrations/overview.mdx
+++ b/apps/storefront/src/content/assets/brand-illustrations/overview.mdx
@@ -3,9 +3,8 @@ title: Brand illustration
mode: publish
---
-The Equinor brand illustration style combines solid, flat colours and organic forms, and is a representation of brand personality: simple, optimistic and human. It differs from the technical illustrations and is used for rich visual storytelling with a strong Equinor look and feel.
+The Equinor brand illustration style combines solid, flat colours and organic forms, and is a representation of brand personality: simple, optimistic and human. It differs from the technical illustrations and is used for rich visual storytelling with a strong Equinor look and feel.
+## Brand Center Toolbox
-**Brand Center Toolbox**
-
-Please refer to the Equinor [Brand Center](https://communicationtoolbox.equinor.com/brandcenter/en/equinorbc/component/default/10456 "Brand Center Toolbox Guidelines") for guidelines on making brand illustrations.
+Please refer to the Equinor [Brand Center](https://communicationtoolbox.equinor.com/brandcenter/en/equinorbc/component/default/10456 'Brand Center Toolbox Guidelines') for guidelines on making brand illustrations.
diff --git a/apps/storefront/src/content/assets/image-placeholder/overview.mdx b/apps/storefront/src/content/assets/image-placeholder/overview.mdx
index ec34d371c8..f6afe6ecc0 100644
--- a/apps/storefront/src/content/assets/image-placeholder/overview.mdx
+++ b/apps/storefront/src/content/assets/image-placeholder/overview.mdx
@@ -1,43 +1,51 @@
---
title: Image placeholder
tabs:
- - Overview
- - Usage
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
mode: publish
---
+An image placeholder shows an image in a specific aspect ratio.
-**An image placeholder shows an image in a specific aspect ratio.**
-***
-
-
## Guidelines
+
-An `image placeholder` provides a space for the image before it is loaded, this is to avoid the page "jumping" when the image loads. It keeps the aspect ratio of the image. An aspect ratio is the proportional relationship between its width and its height. Informational photography and illustrations are used within these aspect ratios.
+An `image placeholder` provides a space for the image before it is loaded, this is to avoid the page "jumping" when the image loads. It keeps the aspect ratio of the image. An aspect ratio is the proportional relationship between its width and its height. Informational photography and illustrations are used within these aspect ratios.
+## Variations
-## Variations
### Avatar
There are two avatar image placeholders to choose between: `Avatar/Circle` and `Avatar/Square corners`. Avatars can represent users or brands. If a user does not have an image to represent themself, the user's initials can be used on a solid background.
-
-
+
### Rounded corners
-There are five `Rounded corner` aspect ratios available for use: `1:1`, `2:1`, `4:3`, `5:7` and `16:9`.
-
-
+There are five `Rounded corner` aspect ratios available for use: `1:1`, `2:1`, `4:3`, `5:7` and `16:9`.
+
### Straight corners
-There are five `Straight corner` aspect ratios available for use: `1:1`, `2:1`, `4:3`, `5:7` and `16:9`.
+There are five `Straight corner` aspect ratios available for use: `1:1`, `2:1`, `4:3`, `5:7` and `16:9`.
-
+
diff --git a/apps/storefront/src/content/assets/logo/overview.mdx b/apps/storefront/src/content/assets/logo/overview.mdx
index b692f361d6..c7988686ca 100644
--- a/apps/storefront/src/content/assets/logo/overview.mdx
+++ b/apps/storefront/src/content/assets/logo/overview.mdx
@@ -1,63 +1,66 @@
---
title: Logo
tabs:
- - Overview
- - Usage
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
+ - External use
mode: publish
---
+The logo is used with care to brand interfaces.
-**The logo is used with care to brand interfaces.**
-***
-
-
## Guidelines
-
-For internal interfaces, the Equinor logo is used sparingly as users have already logged into the Equinor network. The logo, star symbol and favicon can be used in `Energy Red` or `White`. Always use the logo spacing that is provided---it is built into each component. This ensures the logo maintains its visual integrity.
+
+For internal interfaces, the Equinor logo is used sparingly as users have already logged into the Equinor network. The logo, star symbol and favicon can be used in `Energy Red` or `White`. Always use the logo spacing that is provided---it is built into each component. This ensures the logo maintains its visual integrity.
**Don't**
-
-* Do not use the logo in `Energy Red` over a `Black` background.
-* Do not use the logo over photography.
-* Do not add any shadows, gradients, outlines or lighting effects.
-* Do not change the proportions, rotate or tilt the logo.
-* The logo should not be used as a link in internal interfaces. This can cause confusion as the logo could be thought to link to www.equinor.com.
+
+- Do not use the logo in `Energy Red` over a `Black` background.
+- Do not use the logo over photography.
+- Do not add any shadows, gradients, outlines or lighting effects.
+- Do not change the proportions, rotate or tilt the logo.
+- The logo should not be used as a link in internal interfaces. This can cause confusion as the logo could be thought to link to www.equinor.com.
-## Variations
+## Variations
-
### Main logo
The preferred use of branding with the logo for internal interfaces is via splash screens. For interfaces, only the horizontal logo is used and it must have a minimum height of 48px.
-
-
+
### Star symbol
The Equinor star can be used on splash screens and in animations. The Equinor star cannot be used as an app icon, as it is used for the main Equinor app icon---all other apps should have unique icons.
-
-
+
### Favicon
-The favicon can be used at 16px or 32px. The favicon cannot be used in any other use cases than a favicon.
-
-
-
-
-***
+The favicon can be used at 16px or 32px. The favicon cannot be used in any other use cases than a favicon.
+
## External use
-Please visit the Equinor [Brand Center](https://communicationtoolbox.equinor.com/brandcenter/en/equinorbc/component/default/97 "Brand Center Toolbox Guidelines") for more information about using the Equinor logo.
+Please visit the Equinor [Brand Center](https://communicationtoolbox.equinor.com/brandcenter/en/equinorbc/component/default/97 'Brand Center Toolbox Guidelines') for more information about using the Equinor logo.
diff --git a/apps/storefront/src/content/assets/photography/overview.mdx b/apps/storefront/src/content/assets/photography/overview.mdx
index 657cc7e758..16f3ac4032 100644
--- a/apps/storefront/src/content/assets/photography/overview.mdx
+++ b/apps/storefront/src/content/assets/photography/overview.mdx
@@ -5,7 +5,6 @@ mode: publish
Great photography is a vital element of the Equinor visual identity. Photographs instantly engage users, drawing them in to the brand’s message. The images should be a visual reflection of the brand tone of voice, telling stories and building emotional connections.
+## Brand Center Toolbox
-**Brand Center Toolbox**
-
-Please refer to the Equinor [Brand Center](https://communicationtoolbox.equinor.com/brandcenter/en/equinorbc/component/default/100 "Brand Center Toolbox Guidelines") for guidelines using photography.
+Please refer to the Equinor [Brand Center](https://communicationtoolbox.equinor.com/brandcenter/en/equinorbc/component/default/100 'Brand Center Toolbox Guidelines') for guidelines using photography.
diff --git a/apps/storefront/src/content/assets/product-icons/overview.mdx b/apps/storefront/src/content/assets/product-icons/overview.mdx
index 4aab93488e..41939c20fd 100644
--- a/apps/storefront/src/content/assets/product-icons/overview.mdx
+++ b/apps/storefront/src/content/assets/product-icons/overview.mdx
@@ -8,28 +8,28 @@ tabs:
mode: publish
---
+Product icons communicate key themes and business areas in a clear, simple and branded style. They enhance visual communication, assist with navigation and reduce cognitive load. Product icons do not provide functional interaction---use system icons instead.
-**Product icons communicate key themes and business areas in a clear, simple and branded style. They enhance visual communication, assist with navigation and reduce cognitive load. Product icons do not provide functional interaction---use system icons instead.**
-
-***
-
-
## Guidelines
+
-The EDS product icons are built on top of the Equinor [Brand Center](https://communicationtoolbox.equinor.com/brandcenter/en/equinorbc/component/default/103 "Brand Center Toolbox Guidelines") guidelines for iconography.
+The EDS product icons are built on top of the Equinor [Brand Center](https://communicationtoolbox.equinor.com/brandcenter/en/equinorbc/component/default/103 'Brand Center Toolbox Guidelines') guidelines for iconography.
Product icons are used in app icons, app launchers and splash screens---always with the name of the product they represent. Simple and clear icons require a strict underlying grid. The EDS icons are built on a 48x48px grid. Product icons can scale up, but not down, depending on context in the grid shape.
+**Don't**
-**Don't**
-* Product icons are not to be used as system icons.
-* Product icons are not used for marketing or decoration.
+- Product icons are not to be used as system icons.
+- Product icons are not used for marketing or decoration.
-
+
-:warning: Product icons are to be created by teams and submitted to the EDS. Over time more examples will be available.
+:warning: Product icons are to be created by teams and submitted to the EDS. Over time more examples will be available.
diff --git a/apps/storefront/src/content/assets/system-icons/contribution.mdx b/apps/storefront/src/content/assets/system-icons/contribution.mdx
index 54622ff1ef..2df4b57a2f 100644
--- a/apps/storefront/src/content/assets/system-icons/contribution.mdx
+++ b/apps/storefront/src/content/assets/system-icons/contribution.mdx
@@ -5,15 +5,16 @@ tabs:
- Library
- Usage
- Contribution
+toc:
+ - Guidelines
+ - Categories
mode: publish
---
+Missing a system icon? You can make it following these simple guidelines:
-Missing a system icon? You can make it following these simple guidelines:
-
-* All icons should be unique. Before creating a new icon, always verify that there is not an existing icon in the library under a different name. Search for keywords associated with the icon you are missing to ensure it is not already in the library.
-* All icons should be understandable regardless of language or location.
-
+- All icons should be unique. Before creating a new icon, always verify that there is not an existing icon in the library under a different name. Search for keywords associated with the icon you are missing to ensure it is not already in the library.
+- All icons should be understandable regardless of language or location.
## Style
@@ -21,32 +22,28 @@ Each icon needs to be reduced to its minimal form --- being bold, geometrical an
The EDS icons are always facing forward and never rotated or dimensional. The icons are made for legibility and are not too literal or complex, neither are they overly playful or bubbly.
-
**Exceptions**
-Extremely complex shapes sometimes require complex details. The guidelines allow for subtle adjustments that help improve legibility of icons --- these adjustments are referred to as **optical corrections**. This exception allows for use of 1.5px internal or external strokes. Using this exception should be avoided if possible.
-
+Extremely complex shapes sometimes require complex details. The guidelines allow for subtle adjustments that help improve legibility of icons --- these adjustments are referred to as **optical corrections**. This exception allows for use of 1.5px internal or external strokes. Using this exception should be avoided if possible.
## Making a new icon
-* Create an artboard that is 24x24px.
- * Place the `System icon grid` from the **Utilities** page in **Assets File** as the bottom layer and lock it.
- * Choose the grid shape: circle, square, vertical rectangle or horizontal rectangle.
- * Make sure to align all artwork to the pixel grid.
-
-
-* Never use centre borders --- centering can cause half pixels.
-* Avoid using the line tool, use the rectangle tool instead since the line tool will align to half pixels.
-* If you end up using borders or the line tool (which is not recommended), make certain to outline (expand) your work.
+- Create an artboard that is 24x24px.
+ - Place the `System icon grid` from the **Utilities** page in **Assets File** as the bottom layer and lock it.
+ - Choose the grid shape: circle, square, vertical rectangle or horizontal rectangle.
+ - Make sure to align all artwork to the pixel grid.
+* Never use centre borders --- centering can cause half pixels.
+* Avoid using the line tool, use the rectangle tool instead since the line tool will align to half pixels.
+* If you end up using borders or the line tool (which is not recommended), make certain to outline (expand) your work.
## Submitting your new icon
-* When your icon has been created, delete the `System icon grid` layer that you had locked.
-* Make sure your icon is not grouped or nested.
-* Make sure all your layers are named logically.
-* Make sure to name the icon what it is --- avoid interpretive names that will make the icon hard to search and find.
- * If you make a filled icon to supplement the outlined icon, both icons need to have this stated in their name. For example, `add circle filled` and `add circle outlined`.
-* Pick a category for the icon to live under. Reference the library for current categories.
-* Supply a list of alternative names that people might associate with your icon. This will help when searching.
-* :warning: More information to come about submitting process. In the mean-time reach out to one of the EDS core members on Slack.
+- When your icon has been created, delete the `System icon grid` layer that you had locked.
+- Make sure your icon is not grouped or nested.
+- Make sure all your layers are named logically.
+- Make sure to name the icon what it is --- avoid interpretive names that will make the icon hard to search and find.
+ - If you make a filled icon to supplement the outlined icon, both icons need to have this stated in their name. For example, `add circle filled` and `add circle outlined`.
+- Pick a category for the icon to live under. Reference the library for current categories.
+- Supply a list of alternative names that people might associate with your icon. This will help when searching.
+- :warning: More information to come about submitting process. In the mean-time reach out to one of the EDS core members on Slack.
diff --git a/apps/storefront/src/content/assets/system-icons/library.mdx b/apps/storefront/src/content/assets/system-icons/library.mdx
index e1e159b619..a8c24712bd 100644
--- a/apps/storefront/src/content/assets/system-icons/library.mdx
+++ b/apps/storefront/src/content/assets/system-icons/library.mdx
@@ -5,9 +5,31 @@ tabs:
- Library
- Usage
- Contribution
+toc:
+ - UI views
+ - UI action
+ - Time + date
+ - Technical
+ - Social
+ - Security
+ - Places
+ - People
+ - Payment + shipping
+ - Notifications + alerts
+ - Navigation
+ - Map + transportation
+ - Hardware
+ - Food + objects
+ - File + collections
+ - Energy
+ - WYSIWYG
+ - Communication + feedback
+ - Charts
+ - AV
+ - Arrows
+ - Labels
+ - Accessibility
mode: publish
---
-
-
-
+
diff --git a/apps/storefront/src/content/assets/system-icons/overview.mdx b/apps/storefront/src/content/assets/system-icons/overview.mdx
index aa3852fb9a..8327d61d4b 100644
--- a/apps/storefront/src/content/assets/system-icons/overview.mdx
+++ b/apps/storefront/src/content/assets/system-icons/overview.mdx
@@ -8,30 +8,29 @@ tabs:
mode: publish
---
+System icons enhance interfaces by adding visual communication to actions, status and feedback while reducing cognitive load. They are to provide meaning at a glance.
-**System icons enhance interfaces by adding visual communication to actions, status and feedback while reducing cognitive load. They are to provide meaning at a glance.**
-
-***
-
-
## Guidelines
-
-The EDS system icons are built on a copy of the outlined [GMD icons](https://material.io/tools/icons/?style=round "Google Material Design Rounded Icons") provided open-source by Google. The icons have been customised and renamed for Equinor's use.
+
-Simple and clear icons require a strict underlying grid. The EDS icons are built on a 24x24px grid. System icons can be used in 16px and 24px sizes.
+The EDS system icons are built on a copy of the outlined [GMD icons](https://material.io/tools/icons/?style=round 'Google Material Design Rounded Icons') provided open-source by Google. The icons have been customised and renamed for Equinor's use.
+Simple and clear icons require a strict underlying grid. The EDS icons are built on a 24x24px grid. System icons can be used in 16px and 24px sizes.
**Don't**
-
-* System icons are not to be used as product icons or as a favicon.
+
+- System icons are not to be used as product icons or as a favicon.
-## Categories
+## Categories
-There are over 600 icons available divided in logical categories to make them easy to find.
+There are over 600 icons available divided in logical categories to make them easy to find.
-
+
diff --git a/apps/storefront/src/content/assets/technical-illustrations/overview.mdx b/apps/storefront/src/content/assets/technical-illustrations/overview.mdx
index 5fc418643c..c5e27d8dfb 100644
--- a/apps/storefront/src/content/assets/technical-illustrations/overview.mdx
+++ b/apps/storefront/src/content/assets/technical-illustrations/overview.mdx
@@ -5,7 +5,6 @@ mode: publish
The technical illustration style differs from the brand illustration style as it is used to convey often detailed and complex information in a way that is clear and easily understood.
+## Brand Center Toolbox
-**Brand Center Toolbox**
-
-Please refer to the Equinor [Brand Center](https://communicationtoolbox.equinor.com/brandcenter/en/equinorbc/component/default/102 "Brand Center Toolbox Guidelines") for guidelines on making technical illustrations.
+Please refer to the Equinor [Brand Center](https://communicationtoolbox.equinor.com/brandcenter/en/equinorbc/component/default/102 'Brand Center Toolbox Guidelines') for guidelines on making technical illustrations.
diff --git a/apps/storefront/src/content/components/accordion/overview.mdx b/apps/storefront/src/content/components/accordion/overview.mdx
index 3c3dab8909..07b06fef48 100644
--- a/apps/storefront/src/content/components/accordion/overview.mdx
+++ b/apps/storefront/src/content/components/accordion/overview.mdx
@@ -1,62 +1,70 @@
---
title: Accordion
-tabs:
-- Overview
-- Usage
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
+ - Interaction
mode: publish
---
+An _accordion_ allows users to collapse and expand sections of content.
-**An *accordion* allows users to collapse and expand sections of content.**
-***
-
-
## Guidelines
+
-Accordions are composed of a header area and a content area. They deliver large amounts of information in user-controlled sections. They can be used to group or hide information which helps to keep order and scannability on a page.
+Accordions are composed of a header area and a content area. They deliver large amounts of information in user-controlled sections. They can be used to group or hide information which helps to keep order and scannability on a page.
+**Don't**
-**Don't**
-* Do not use if there is not enough content. Accordions increase cognitive load, do not use if grouping small amounts of content.
-* Do not change the width of the accordion when it is expanded or collapsed.
-* Do not hide errors or critical information inside an accordion that requires immediate action.
+- Do not use if there is not enough content. Accordions increase cognitive load, do not use if grouping small amounts of content.
+- Do not change the width of the accordion when it is expanded or collapsed.
+- Do not hide errors or critical information inside an accordion that requires immediate action.
+## Variations
-## Variations
### Action right
-
+
### Action left
-
+
### Action dual
-
+
### Header area
-Whether expanded or collapsed, the header height must be 48px. The header area must contain one action indicating that the section expands or collapses and can contain additional actions. The expand/collapse functionality is tied to the entire header. Additional actions are triggered only by interacting directly with that action.
-
+Whether expanded or collapsed, the header height must be 48px. The header area must contain one action indicating that the section expands or collapses and can contain additional actions. The expand/collapse functionality is tied to the entire header. Additional actions are triggered only by interacting directly with that action.
#### Labels
-Labels should provide clear and concise direction. Avoid labels that are too long. Labels should be to the point, short and no more than three words. Note that if the label is longer than the maximum width, it will be truncated and should have a tooltip provided.
-
+Labels should provide clear and concise direction. Avoid labels that are too long. Labels should be to the point, short and no more than three words. Note that if the label is longer than the maximum width, it will be truncated and should have a tooltip provided.
### Content area
When the accordion is expanded, the minimum height for the content area is 96px. There is no maximum height for the content area.
-
## Interaction
-Multiple sections can be expanded simultaneously.
+Multiple sections can be expanded simultaneously.
diff --git a/apps/storefront/src/content/components/buttons-toggle/overview.mdx b/apps/storefront/src/content/components/buttons-toggle/overview.mdx
index 9cbfa6859f..e308e4285a 100644
--- a/apps/storefront/src/content/components/buttons-toggle/overview.mdx
+++ b/apps/storefront/src/content/components/buttons-toggle/overview.mdx
@@ -1,66 +1,63 @@
---
title: Buttons toggle
tabs:
- - Overview
- - Usage
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
+ - Examples
mode: publish
---
-**Toggle buttons allow users to select one of multiple options with a single click or tap.**
-
-
-***
-
+Toggle buttons allow users to select one of multiple options with a single click or tap.
## Guidelines
-The EDS has one set of primary toggle buttons with either an icon and no text, or text and no icon. When using an icon, it must be directly related to the action of the button.
-
+The EDS has one set of primary toggle buttons with either an icon and no text, or text and no icon. When using an icon, it must be directly related to the action of the button.
### Toggle button vs regular button
-Toggle buttons group a set of related actions in one shared common container. Only one option in a group of toggle buttons can be selected and active at a time. Selecting one option deselects any other. A regular button is used when performing an action.
-
+Toggle buttons group a set of related actions in one shared common container. Only one option in a group of toggle buttons can be selected and active at a time. Selecting one option deselects any other. A regular button is used when performing an action.
### Toggle button width
-Toggle buttons have a minimum padding that is automatically built into the component. You can however stretch the button to span one or multiple columns in width.
-
+Toggle buttons have a minimum padding that is automatically built into the component. You can however stretch the button to span one or multiple columns in width.
### Toggle button labels
-Avoid labels that are too long. Titles should be to the point and short, no more than three words.
-
+Avoid labels that are too long. Titles should be to the point and short, no more than three words.
### Don't
-* Do not change the height of the toggle buttons.
-* Do not wrap a label over two lines.
-
+- Do not change the height of the toggle buttons.
+- Do not wrap a label over two lines.
## Variations
-The selected button has a contained background and high-emphasis. Do not use two active buttons in the same set of toggle buttons. The toggle buttons should be placed with 0px spacing between each other when placed inside a group.
-
-Toggle buttons are found in the following variations:
-
-* Primary colour
- * Active
- * Active left, only text
- * Active centre, only text
- * Active right, only text
- * Active left, only icon
- * Active centre, only icon
- * Active right, only icon
- * Inactive
- * Inactive left, only text
- * Inactive centre, only text
- * Inactive right, only text
- * Inactive left, only icon
- * Inactive centre, only icon
- * Inactive right, only icon
-
+The selected button has a contained background and high-emphasis. Do not use two active buttons in the same set of toggle buttons. The toggle buttons should be placed with 0px spacing between each other when placed inside a group.
+
+Toggle buttons are found in the following variations:
+
+- Primary colour
+ - Active
+ - Active left, only text
+ - Active centre, only text
+ - Active right, only text
+ - Active left, only icon
+ - Active centre, only icon
+ - Active right, only icon
+ - Inactive
+ - Inactive left, only text
+ - Inactive centre, only text
+ - Inactive right, only text
+ - Inactive left, only icon
+ - Inactive centre, only icon
+ - Inactive right, only icon
## Examples
-
+
diff --git a/apps/storefront/src/content/components/buttons-toggle/usage.mdx b/apps/storefront/src/content/components/buttons-toggle/usage.mdx
index 9e527a4f0f..c3a45af0ba 100644
--- a/apps/storefront/src/content/components/buttons-toggle/usage.mdx
+++ b/apps/storefront/src/content/components/buttons-toggle/usage.mdx
@@ -1,40 +1,37 @@
---
-title: Buttons Toggle
+title: Buttons toggle
tabs:
- - Overview
- - Usage
+ - Overview
+ - Usage
mode: publish
---
-
## Figma
-
### How to add
1. Locate the **Assets** tab in the **Layers Panel**.
-2. There are two ways to locate the `Toggle button` component needed:
- * Use the search bar to search for a component grouping name or variation name.
- * Scroll through the folders list and open the grouping.
-3. Once the component needed is located, click and drag it into the frame/artboard.
+2. There are two ways to locate the `Toggle button` component needed:
+ - Use the search bar to search for a component grouping name or variation name.
+ - Scroll through the folders list and open the grouping.
+3. Once the component needed is located, click and drag it into the frame/artboard.
4. Add as many toggle buttons as needed by snapping them together. At least one `Toggle button left` and one `Toggle button right` is required.
-
### How to use
-1. Select the `Toggle button` in the frame/artboard.
-2. Locate and expand the highlighted *layer* in the **Layers Panel**.
+1. Select the `Toggle button` in the frame/artboard.
+2. Locate and expand the highlighted _layer_ in the **Layers Panel**.
3. Edit the text. If the text wraps over one line, resize the width of the button to avoid line breaks.
4. If using the `Toggle button icon`, change the icon:
- * Locate and select the `Icon > Placeholder Icon` *layer* in the **Layers Panel**.
- * Locate the **Design** tab in the **Inspector Panel**.
- * Under the **Instance** section, click the icon name to expand the menu.
- * Choose a new icon.
-5. Never add height to *toggle buttons*, only resize them horizontally in width.
+ - Locate and select the `Icon > Placeholder Icon` _layer_ in the **Layers Panel**.
+ - Locate the **Design** tab in the **Inspector Panel**.
+ - Under the **Instance** section, click the icon name to expand the menu.
+ - Choose a new icon.
+5. Never add height to _toggle buttons_, only resize them horizontally in width.
6. Add as many toggle buttons as needed, and repeat steps 1–4. You will need at least one `Toggle button left` and one `Toggle button right`.
7. Select all the `Toggle button` layers and convert them to a frame/artboard by using the following shortcut:
- * Mac: `Command` + `Option` + `G`
- * PC: `Ctrl` + `ALT` + `G`
-8. Make sure to name the new group.
+ - Mac: `Command` + `Option` + `G`
+ - PC: `Ctrl` + `ALT` + `G`
+8. Make sure to name the new group.
9. Locate the **Design** tab in the **Inspector Panel**.
10. Under the **Constraints** section, set up constraints.
diff --git a/apps/storefront/src/content/components/buttons/overview.mdx b/apps/storefront/src/content/components/buttons/overview.mdx
index c31369453b..e6f5e1b530 100644
--- a/apps/storefront/src/content/components/buttons/overview.mdx
+++ b/apps/storefront/src/content/components/buttons/overview.mdx
@@ -1,40 +1,36 @@
---
title: Buttons
tabs:
- - Overview
- - Usage
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
+ - Examples
mode: publish
---
-**Buttons allow users to take action with a single click or tap.**
-
-
-***
-
+Buttons allow users to take action with a single click or tap.
## Guidelines
The EDS has primary, secondary and danger colour buttons available in the contained, outlined and ghost variations. All variations can have the following: an icon on the right, an icon on the left, an icon with no text and text only with no icon. When using an icon, it must be directly related to the action and label of the button.
-
### Button vs link
A button is used when performing an action. Actions are almost always on the same page. A link is used when navigating to another place.
-
### Button width
Buttons have a minimum padding that is automatically built into the component. You can however stretch the button to span one or multiple columns in width.
-
### Button labels
Avoid labels that are too long. Titles should be to the point and short, no more than three words. Don´t wrap text over multiple lines, scale the width to make the text fit on one line. Don´t adjust the height of the button.
-
### Buttons with a left or right icon
-Buttons can use an icon to help clarify an action. Always use icons that clearly communicate their intended purpose.
+Buttons can use an icon to help clarify an action. Always use icons that clearly communicate their intended purpose.
## Variations
@@ -47,23 +43,22 @@ To comply with accessibility guidelines, all interactive components must have a
Contained buttons are found in the following variations:
-* Primary colour
- * Contained, only text
- * Contained with icon on right of text
- * Contained with icon on left of text
-* Secondary colour
- * Contained, only text
- * Contained with icon on right of text
- * Contained with icon on left of text
-* Danger colour
- * Contained, only text
- * Contained with icon on right of text
- * Contained with icon on left of text
-* Disabled
- * Contained, only text
- * Contained with icon on right of text
- * Contained with icon on left of text
-
+- Primary colour
+ - Contained, only text
+ - Contained with icon on right of text
+ - Contained with icon on left of text
+- Secondary colour
+ - Contained, only text
+ - Contained with icon on right of text
+ - Contained with icon on left of text
+- Danger colour
+ - Contained, only text
+ - Contained with icon on right of text
+ - Contained with icon on left of text
+- Disabled
+ - Contained, only text
+ - Contained with icon on right of text
+ - Contained with icon on left of text
### Outlined buttons
@@ -74,23 +69,22 @@ To comply with accessibility guidelines, all interactive components must have a
Outlined buttons are found in the following variations:
-* Primary colour
- * Outlined, only text
- * Outlined with icon on right of text
- * Outlined with icon on left of text
-* Secondary colour
- * Outlined, only text
- * Outlined with icon on right of text
- * Outlined with icon on left of text
-* Danger colour
- * Outlined, only text
- * Outlined with icon on right of text
- * Outlined with icon on left of text
-* Disabled
- * Outlined, only text
- * Outlined with icon on right of text
- * Outlined with icon on left of text
-
+- Primary colour
+ - Outlined, only text
+ - Outlined with icon on right of text
+ - Outlined with icon on left of text
+- Secondary colour
+ - Outlined, only text
+ - Outlined with icon on right of text
+ - Outlined with icon on left of text
+- Danger colour
+ - Outlined, only text
+ - Outlined with icon on right of text
+ - Outlined with icon on left of text
+- Disabled
+ - Outlined, only text
+ - Outlined with icon on right of text
+ - Outlined with icon on left of text
### Ghost buttons
@@ -100,35 +94,51 @@ Ghost buttons can be grouped with other text buttons as well as with contained a
Ghost buttons are found in the following variations:
-* Primary colour
- * Ghost, only text
- * Ghost with icon on right of text
- * Ghost with icon on left of text
- * Ghost icon, no text
-* Secondary colour
- * Ghost, only text
- * Ghost with icon on right of text
- * Ghost with icon on left of text
-* Danger colour
- * Ghost, only text
- * Ghost with icon on right of text
- * Ghost with icon on left of text
-* Disabled
- * Ghost, only text
- * Ghost with icon on right of text
- * Ghost with icon on left of text
-
-
+- Primary colour
+ - Ghost, only text
+ - Ghost with icon on right of text
+ - Ghost with icon on left of text
+ - Ghost icon, no text
+- Secondary colour
+ - Ghost, only text
+ - Ghost with icon on right of text
+ - Ghost with icon on left of text
+- Danger colour
+ - Ghost, only text
+ - Ghost with icon on right of text
+ - Ghost with icon on left of text
+- Disabled
+
+ - Ghost, only text
+ - Ghost with icon on right of text
+ - Ghost with icon on left of text
+
## Examples
### Primary colour
-
+
+
### Secondary colour
-
+
+
### Danger colour
-
+
+
### Disabled colour
-
+
+
diff --git a/apps/storefront/src/content/components/cards/overview.mdx b/apps/storefront/src/content/components/cards/overview.mdx
index 73cc37cd88..cf443c6722 100644
--- a/apps/storefront/src/content/components/cards/overview.mdx
+++ b/apps/storefront/src/content/components/cards/overview.mdx
@@ -1,105 +1,114 @@
---
title: Cards
-tabs:
-- Overview
-- Usage
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
mode: publish
---
-**A *card* displays content related to a single subject and acts as an entry point to more detailed information. Card blocks can be combined in a variety of ways.**
-
-
-***
-
+A _card_ displays content related to a single subject and acts as an entry point to more detailed information. Card blocks can be combined in a variety of ways.
## Guidelines
-Cards should display data related to a single topic. They are easy to scan and have clear actions. Cards can be customized by combining different *card* blocks. Dividers can be used to separate sections within a card, however, the divider should not be full-width, except when displaying content that can be expanded.
-
+Cards should display data related to a single topic. They are easy to scan and have clear actions. Cards can be customized by combining different _card_ blocks. Dividers can be used to separate sections within a card, however, the divider should not be full-width, except when displaying content that can be expanded.
**Don't**
-* Do not use cards as or in _Top bars_
-* Do not use cards as _Sidesheets_
-* Do not use cards as or in _Nav drawers_
-* Do not use cards as _Lists_
-* Do not use cards inside other cards
-* Do not use cards as galleries
-* Do not use cards with text over photography or illustrations
-* Do not use cards to group large sets of information
+- Do not use cards as or in _Top bars_
+- Do not use cards as _Sidesheets_
+- Do not use cards as or in _Nav drawers_
+- Do not use cards as _Lists_
+- Do not use cards inside other cards
+- Do not use cards as galleries
+- Do not use cards with text over photography or illustrations
+- Do not use cards to group large sets of information
## Variations
### Card container
-The `container` is the only required block in a card. The card aligns to the artboard/frames grid columns, which gives the card a fluid width. Content blocks within the card, however, follow the card container's own grid. There are four available `card/container` options: `default`, `info`, `danger` and `warning`. The primary action of a card is generally the card itself being a large touch target.
-
-
+The `container` is the only required block in a card. The card aligns to the artboard/frames grid columns, which gives the card a fluid width. Content blocks within the card, however, follow the card container's own grid. There are four available `card/container` options: `default`, `info`, `danger` and `warning`. The primary action of a card is generally the card itself being a large touch target.
+
### Title
There are twelve title blocks to choose between: `Avatar H6 caption`, `Avatar H6 caption action`, `Overline H6`, `Overline H6 action`, `Overline H6 avatar`, `H4 body short`, `H4 body short action`, `H4 body short avatar`, `H5 body short`, `H5 body short action` and `H5 body short avatar`.
-
#### Content
-Title blocks can have:
-* Title
-* Subtitle
-* Avatar
-* Metadata
- * Tags, badges and free text
-* Overflow menu
+Title blocks can have:
-
+- Title
+- Subtitle
+- Avatar
+- Metadata
+ - Tags, badges and free text
+- Overflow menu
+
### Supporting text
-There are two supporting text blocks to choose between: `supporting-text/middle` which is to be used when it is sandwiched between other blocks, and `supporting-text/last` which is to be used when it is the last block.
-
+There are two supporting text blocks to choose between: `supporting-text/middle` which is to be used when it is sandwiched between other blocks, and `supporting-text/last` which is to be used when it is the last block.
#### Content
-Supporting text blocks can have:
-* Supporting text
- * Should not contain multiple paragraphs
- * Use inline links with high caution
+Supporting text blocks can have:
-
+- Supporting text
+ - Should not contain multiple paragraphs
+ - Use inline links with high caution
+
### Rich media
There are three rich media blocks to choose between: `rich-media/middle` which is to be used when it is sandwiched between other blocks, `rich-media/last` which is to be used when it is the last block and `rich-media/leading-image` which is to be used when it is the first block. The `rich-media/middle` and `rich-media/last` blocks are placeholder blocks, meaning that you can add your own rich content to them. Rich media can be used full-width, and if it's the first block on the card, it can go all the way to top
-
#### Content
-Rich media blocks can have:
-* Graph
-* Table
-* Image
- * within the grid when between blocks and full width when leading
-* Dividers
+Rich media blocks can have:
-
+- Graph
+- Table
+- Image
+ - within the grid when between blocks and full width when leading
+- Dividers
+
### Supplemental actions
-There are three supplemental action blocks to choose between: `supplemental-actions/buttons`, `supplemental-actions/icons` and `supplemental-actions/meta`. Supplemental actions are represented by buttons, icons, UI controls and supporting text. A rule of thumb is to place them at the bottom of a card.
-
+There are three supplemental action blocks to choose between: `supplemental-actions/buttons`, `supplemental-actions/icons` and `supplemental-actions/meta`. Supplemental actions are represented by buttons, icons, UI controls and supporting text. A rule of thumb is to place them at the bottom of a card.
#### Content
-Supplemental action blocks can have:
-* Supplemental actions
-* Dividers
- * Content that can be expanded should use full-width dividers, ignoring the horizontal spacing.
-* Overflow menu
-* UI controls
-* Chips
+Supplemental action blocks can have:
+
+- Supplemental actions
+- Dividers
+ - Content that can be expanded should use full-width dividers, ignoring the horizontal spacing.
+- Overflow menu
+- UI controls
+- Chips
-
+
diff --git a/apps/storefront/src/content/components/chips/overview.mdx b/apps/storefront/src/content/components/chips/overview.mdx
index 2a3dcfb6a5..d07a9a5316 100644
--- a/apps/storefront/src/content/components/chips/overview.mdx
+++ b/apps/storefront/src/content/components/chips/overview.mdx
@@ -1,79 +1,85 @@
---
title: Chips
-tabs:
-- Overview
-- Usage
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
+ - Examples
mode: publish
---
+_Chips_, also known as tags or badges, are advanced badges that represent discrete information.
-***Chips*, also known as tags or badges, are advanced badges that represent discrete information.**
-
-***
-
-
## Guidelines
+
-Chips allow users to make selections, perform an action, input information and attributes, filter content and complete tasks. Chips can transform from free text or predefined text.
+Chips allow users to make selections, perform an action, input information and attributes, filter content and complete tasks. Chips can transform from free text or predefined text.
+**Don't**
-**Don't**
-* Do not use chips as call-to-action buttons.
-
-
-### Text
-
-
+- Do not use chips as call-to-action buttons.
+## Variations
-### Icon + text
-
-
-
-
-### Avatar + text + remove
-
-
-
+
-### Icon + text + remove
+### Badge chips
-
+Badge chips contain numeric values and show a running tally. Only use the `Selected` (which has a role of "Selected or active") `Text` chip for badge chips. The colours are allowed to be changed from the default colour provided, however, it is up to the designer to ensure that the colours chosen are accessible.
+### Tag chips
-## Variations
-
+Tags are used for items that need to be labeled, categorised, or organised using keywords that describe them. Use the `Selected` (which has a role of "Selected or active") `Text` chip for tag chips. The colours are allowed to be changed from the default colour provided, however, it is up to the designer to ensure that the colours chosen are accessible.
-### Badge chips
+### Choice chips
-Badge chips contain numeric values and show a running tally. Only use the `Selected` (which has a role of "Selected or active") `Text` chip for badge chips. The colours are allowed to be changed from the default colour provided, however, it is up to the designer to ensure that the colours chosen are accessible.
+When there are at least two predefined options to choose between, choice chips can be used to signify the user's choice. A single selection can be made. Unselected predefined choices should use the `Enabled` `Text` chip and selected chips switch to the `Selected` `Text` chip. Selecting a choice chip automatically deselects all other chips in the set.
+### Filter chips
-### Tag chips
+Multiple predefined keywords can be listed for the user to choose from. Multiple chips can be selected or unselected. Unselected predefined chips should used the `Enabled` `Text` or the `Enabled` `Icon + text + close` chip, and selected chips switch to the `Selected` `Icon + text`, The icon helps indicate that the chip is selected, consider using `System icons > UI action > Done`.
-Tags are used for items that need to be labeled, categorised, or organised using keywords that describe them. Use the `Selected` (which has a role of "Selected or active") `Text` chip for tag chips. The colours are allowed to be changed from the default colour provided, however, it is up to the designer to ensure that the colours chosen are accessible.
+### Input chips
+Input chips are used as tags to represent complex information---such as a person, place or thing. Input chips are not predefined but defined by the user allowing the user to create and edit multiple chips. When pressed, input chips transform into editable text. When the editable text is no longer in focus, it transforms back into a chip. Input chips are removable, meaning the user can delete the input. Both the `Avatar + text + close` chip and the `Icon + text + close` chip can be used as input chips. If a text input is not recognised or validated, it can switch to the `Error` state.
-### Choice chips
+### Action chips
-When there are at least two predefined options to choose between, choice chips can be used to signify the user's choice. A single selection can be made. Unselected predefined choices should use the `Enabled` `Text` chip and selected chips switch to the `Selected` `Text` chip. Selecting a choice chip automatically deselects all other chips in the set.
+When there are at least two predefined options to choose between, action chips trigger actions related to the primary content. Action chips are not removable but can appear dynamically. Use the `Icon + text` chip. Action chips can show progress. While the action is being processed, replace the icon with the `Progress indicator > Circular`.
+## Examples
-### Filter chips
+### Text
-Multiple predefined keywords can be listed for the user to choose from. Multiple chips can be selected or unselected. Unselected predefined chips should used the `Enabled` `Text` or the `Enabled` `Icon + text + close` chip, and selected chips switch to the `Selected` `Icon + text`, The icon helps indicate that the chip is selected, consider using `System icons > UI action > Done`.
+
+### Icon + text
-### Input chips
+
-Input chips are used as tags to represent complex information---such as a person, place or thing. Input chips are not predefined but defined by the user allowing the user to create and edit multiple chips. When pressed, input chips transform into editable text. When the editable text is no longer in focus, it transforms back into a chip. Input chips are removable, meaning the user can delete the input. Both the `Avatar + text + close` chip and the `Icon + text + close` chip can be used as input chips. If a text input is not recognised or validated, it can switch to the `Error` state.
+### Avatar + text + remove
+
-### Action chips
+### Icon + text + remove
-When there are at least two predefined options to choose between, action chips trigger actions related to the primary content. Action chips are not removable but can appear dynamically. Use the `Icon + text` chip. Action chips can show progress. While the action is being processed, replace the icon with the `Progress indicator > Circular`.
+
diff --git a/apps/storefront/src/content/components/component-status/component-status.mdx b/apps/storefront/src/content/components/component-status/component-status.mdx
index 7eca386797..0ba8acad01 100644
--- a/apps/storefront/src/content/components/component-status/component-status.mdx
+++ b/apps/storefront/src/content/components/component-status/component-status.mdx
@@ -7,15 +7,12 @@ mode: publish
-
### Key
-|Tag|Description|
-|---|---|
-|Available|Ready for use|
-|Started development|Currently being worked on|
-|In code review|Almost done, the result is being discussed|
-|Not available|On the roadmap, but work has not yet started|
-|-|Will not be available in the EDS|
-
-
+| Tag | Description |
+| ------------------- | -------------------------------------------- |
+| Available | Ready for use |
+| Started development | Currently being worked on |
+| In code review | Almost done, the result is being discussed |
+| Not available | On the roadmap, but work has not yet started |
+| - | Will not be available in the EDS |
diff --git a/apps/storefront/src/content/components/date-picker/overview.mdx b/apps/storefront/src/content/components/date-picker/overview.mdx
index 5680e6764a..896bdaae43 100644
--- a/apps/storefront/src/content/components/date-picker/overview.mdx
+++ b/apps/storefront/src/content/components/date-picker/overview.mdx
@@ -1,36 +1,72 @@
---
title: Date Picker
tabs:
- - Overview
- - Usage
+ - Overview
+ - Usage
mode: draft
---
## Examples
### Date picker
-
+
+
### Day
-
+
+
### Day today
-
+
+
### Period left
-
+
+
### Period centre
-
+
+
### Period right
-
+
+
### Period left today
-
+
+
### Period centre today
-
+
+
### Period right today
-
+
+
diff --git a/apps/storefront/src/content/components/divider/overview.mdx b/apps/storefront/src/content/components/divider/overview.mdx
index d4d1152cf7..2894b4981e 100644
--- a/apps/storefront/src/content/components/divider/overview.mdx
+++ b/apps/storefront/src/content/components/divider/overview.mdx
@@ -1,32 +1,42 @@
---
title: Divider
-tabs:
-- Overview
-- Usage
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
+ - Example
mode: publish
---
+A divider is a thin line that separates content into clear groups.
-**A divider is a thin line that separates content into clear groups.**
-***
-
## Guidelines
+
-Dividers are not meant to scream, they are subtle ways to group sections. Dividers can only be used in the colors `UI Background/Default`, `UI Background/Light` and `UI Background/Medium`. Dividers can be used full-width where allowed by parent container, or attached to a column's width.
-
+Dividers are not meant to scream, they are subtle ways to group sections. Dividers can only be used in the colors `UI Background/Default`, `UI Background/Light` and `UI Background/Medium`. Dividers can be used full-width where allowed by parent container, or attached to a column's width.
+**Don't**
-**Don't**
-* Do not use colors that are not approved for dividers.
-* Do not change the thickness of the divider.
-* Do not change the style of the divider.
+- Do not use colors that are not approved for dividers.
+- Do not change the thickness of the divider.
+- Do not change the style of the divider.
+
+## Variations
-## Variations
-There are two divider variations available for use---`Divider/Small` and `Divider/Medium`. The divider line is the same in both of these, yet the spacing around the divider is different.
+There are two divider variations available for use---`Divider/Small` and `Divider/Medium`. The divider line is the same in both of these, yet the spacing around the divider is different.
+
+## Example
+
+
diff --git a/apps/storefront/src/content/components/links/overview.mdx b/apps/storefront/src/content/components/links/overview.mdx
index 4be7ebe16b..e707cc0ec0 100644
--- a/apps/storefront/src/content/components/links/overview.mdx
+++ b/apps/storefront/src/content/components/links/overview.mdx
@@ -1,50 +1,52 @@
---
title: Links
-tabs:
-- Overview
-- Usage
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
+ - Exceptions
mode: publish
---
+Links are primarily used as interactive navigational elements, though they can also change how data is viewed.
-**Links are primarily used as interactive navigational elements, though they can also change how data is viewed.**
-***
-
## Guidelines
-
-Links can be used on their own in body text, ordered lists or unordered lists, but always as text.
+
+Links can be used on their own in body text, ordered lists or unordered lists, but always as text.
### Link vs button
-A button is used when performing an action. Actions are almost always on the same page. A link is used when navigating to another place. If the action will change the data, use a button.
+A button is used when performing an action. Actions are almost always on the same page. A link is used when navigating to another place. If the action will change the data, use a button.
+**Don't**
-**Don't**
-* Links are not for actions such as **Submit** or **Create new**.
-
-
-## Variations
+- Links are not for actions such as **Submit** or **Create new**.
+## Variations
### Link style
+
Links are underlined and should always be in an `Interactive` colour.
-
-
+
#### Content
-* Keep link text as short as possible.
-* If possible, avoid terms like **Click here** or **Read more**---instead, use meaningful labels that explain the destination.
-
+- Keep link text as short as possible.
+- If possible, avoid terms like **Click here** or **Read more**---instead, use meaningful labels that explain the destination.
## Exceptions
diff --git a/apps/storefront/src/content/components/lists/overview.mdx b/apps/storefront/src/content/components/lists/overview.mdx
index 995cbfb3c0..209e505ae1 100644
--- a/apps/storefront/src/content/components/lists/overview.mdx
+++ b/apps/storefront/src/content/components/lists/overview.mdx
@@ -1,35 +1,35 @@
---
title: Lists
-tabs:
-- Overview
-- Usage
+tabs:
+ - Overview
+ - Usage
mode: publish
---
+_Lists_ organise information into related groups of content.
-***Lists* organise information into related groups of content.**
-***
-
## Guidelines
+
### Bullet lists
-Bullet lists are used when order is not of importance.
-
+Bullet lists are used when order is not of importance.
### Numbered lists
-Numbered lists are used when order and hierarchy is needed.
-
-
-
+Numbered lists are used when order and hierarchy is needed.
+
**Don't**
+
-* Do not use lists to organise large amounts of information, use a *Table* instead.
-* Do not use lists as navigation.
+- Do not use lists to organise large amounts of information, use a _Table_ instead.
+- Do not use lists as navigation.
diff --git a/apps/storefront/src/content/components/menu/overview.mdx b/apps/storefront/src/content/components/menu/overview.mdx
index 924e98d818..030d92dbd8 100644
--- a/apps/storefront/src/content/components/menu/overview.mdx
+++ b/apps/storefront/src/content/components/menu/overview.mdx
@@ -1,44 +1,49 @@
---
title: Menu
-tabs:
-- Overview
-- Usage
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
mode: publish
---
+A _menu_, also known as a dropdown, is a temporary list of actions or functions.
-**A *menu*, also known as a dropdown, is a temporary list of actions or functions.**
-***
-
## Guidelines
+
-A *menu* should always be triggered from a *button*---use the `Ghost icon` or `Right icon` button or from a *text field*. A menu can be dismissed by pressing `Escape` on the keyboard, clicking outside the menu, or by selecting an action or function in the menu. Full-bleed/full-width dividers are allowed to group content. Menus can be combined to create cascading *menus* allowing users to choose from a large variety of choices. These are organised by displaying menus with multiple levels of hierarchy. Cascading menus appear to the right of the parent and only on the left if there is no room for expansion on the right.
+A _menu_ should always be triggered from a _button_---use the `Ghost icon` or `Right icon` button or from a _text field_. A menu can be dismissed by pressing `Escape` on the keyboard, clicking outside the menu, or by selecting an action or function in the menu. Full-bleed/full-width dividers are allowed to group content. Menus can be combined to create cascading _menus_ allowing users to choose from a large variety of choices. These are organised by displaying menus with multiple levels of hierarchy. Cascading menus appear to the right of the parent and only on the left if there is no room for expansion on the right.
**Don't**
-
-* Do not trigger a menu on hover.
-* Do not use a menu with a scrim.
+
-## Variations
-
+- Do not trigger a menu on hover.
+- Do not use a menu with a scrim.
-
+## Variations
+
-There are three item types available to place in the `Container`: `Subtitle`, `Item` and `Leading + item`.
+
-* Item labels are mandatory.
-* The right aligned command and icon is optional.
-* The left aligned icon is mandatory to use in a menu grouping on at least one item.
+There are three item types available to place in the `Container`: `Subtitle`, `Item` and `Leading + item`.
+- Item labels are mandatory.
+- The right aligned command and icon is optional.
+- The left aligned icon is mandatory to use in a menu grouping on at least one item.
#### Content
-* Keep the item labels as short as possible.
-* Use meaningful item labels that explain the function.
-* Item labels should be in the active tense.
-* Do not mix nouns and verbs. Pick one or the other.
+- Keep the item labels as short as possible.
+- Use meaningful item labels that explain the function.
+- Item labels should be in the active tense.
+- Do not mix nouns and verbs. Pick one or the other.
diff --git a/apps/storefront/src/content/components/navigation-app-launcher/overview.mdx b/apps/storefront/src/content/components/navigation-app-launcher/overview.mdx
index f95513e2ab..82e8127b36 100644
--- a/apps/storefront/src/content/components/navigation-app-launcher/overview.mdx
+++ b/apps/storefront/src/content/components/navigation-app-launcher/overview.mdx
@@ -1,55 +1,59 @@
---
title: Navigation app launcher
-tabs:
-- Overview
-- Usage
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
mode: publish
---
+An _app launcher_ provides navigation for applications related to the application the user is currently viewing.
-**An *app launcher* provides navigation for applications related to the application the user is currently viewing.**
-***
-
## Guidelines
+
-An app launcher is used to organise navigation across different applications related or relevant to the current application. The current application shows as *active* in the app launcher. Each application displayed has a `Product icon` as well as a label that gives clear and concise direction. Note that if the label is longer than the maximum width, it will be truncated and should have a tooltip provided.
+An app launcher is used to organise navigation across different applications related or relevant to the current application. The current application shows as _active_ in the app launcher. Each application displayed has a `Product icon` as well as a label that gives clear and concise direction. Note that if the label is longer than the maximum width, it will be truncated and should have a tooltip provided.
+**Don't**
-**Don't**
+- Do not use `System icons` in the app launchers.
+- Do not scroll within the app launcher.
+- Do not place the app launcher outside of the viewport.
+- Do not list more than three _app buttons_ across the app launcher.
+- Do not change the width of the _listing_.
+- Do not shrink text size to fit a label on a single line.
+- Do not wrap a label over two lines.
-* Do not use `System icons` in the app launchers.
-* Do not scroll within the app launcher.
-* Do not place the app launcher outside of the viewport.
-* Do not list more than three *app buttons* across the app launcher.
-* Do not change the width of the *listing*.
-* Do not shrink text size to fit a label on a single line.
-* Do not wrap a label over two lines.
-
+## Variations
-## Variations
-
### Listing
-
-
+
### App buttons
+When the placeholder icon is replaced with your product icon of choice, the colours will be updated. You will have to manually change them back to the correct colour.
+- _Enabled_ state should use `Interactive Primary/Resting`
+- _Disabled_ state should use `Interactive/Disabled/Text`
+- _Active_ state should use `Interactive Primary/Resting`
+- _Focus state_ should use `Interactive Primary/Resting`
+- _Hover state_ should use `Interactive Primary/Hover`
+- _Pressed state_ should use `Interactive Primary/Hover`
-When the placeholder icon is replaced with your product icon of choice, the colours will be updated. You will have to manually change them back to the correct colour.
-* *Enabled* state should use `Interactive Primary/Resting`
-* *Disabled* state should use `Interactive/Disabled/Text`
-* *Active* state should use `Interactive Primary/Resting`
-* *Focus state* should use `Interactive Primary/Resting`
-* *Hover state* should use `Interactive Primary/Hover`
-* *Pressed state* should use `Interactive Primary/Hover`
-
-
+
diff --git a/apps/storefront/src/content/components/navigation-breadcrumbs/overview.mdx b/apps/storefront/src/content/components/navigation-breadcrumbs/overview.mdx
index a6c878d82f..0aeef947e1 100644
--- a/apps/storefront/src/content/components/navigation-breadcrumbs/overview.mdx
+++ b/apps/storefront/src/content/components/navigation-breadcrumbs/overview.mdx
@@ -1,45 +1,51 @@
---
title: Navigation breadcrumbs
-tabs:
-- Overview
-- Usage
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
mode: publish
---
+_Breadcrumbs_ show the navigational path to users allowing them to navigate up the hierarchy.
-***Breadcrumbs* show the navigational path to users allowing them to navigate up the hierarchy.**
-***
-
## Guidelines
-
-Breadcrumbs allow users to quickly trace or move up the navigation hierarchy. All links in breadcrumbs are clickable, meaning they all must have a page attached. Breadcrumbs are always placed in the uppermost left corner of the page, but below the *Topbar*.
+
+Breadcrumbs allow users to quickly trace or move up the navigation hierarchy. All links in breadcrumbs are clickable, meaning they all must have a page attached. Breadcrumbs are always placed in the uppermost left corner of the page, but below the _Topbar_.
**Don't**
+
-* Do not use breadcrumbs as main navigation.
-* Do not use breadcrumbs for single-level applications.
-* Do not change the height of the tabs.
+- Do not use breadcrumbs as main navigation.
+- Do not use breadcrumbs for single-level applications.
+- Do not change the height of the tabs.
+## Variations
-## Variations
-
+
+
+Breadcrumbs that are many levels deep might not always fit in the space available on a single line, in this case there are three options:
+### Auto-collapse
-Breadcrumbs that are many levels deep might not always fit in the space available on a single line, in this case there are three options:
+Breadcrumbs can auto-collapse and use ellipses (...) to indicate the middle pages. The first and current/last page are shown in auto-collapsed breadcrumbs, clicking the ellipses expands the breadcrumbs.
+### Expanded breadcrumbs
-### Auto-collapse
-Breadcrumbs can auto-collapse and use ellipses (...) to indicate the middle pages. The first and current/last page are shown in auto-collapsed breadcrumbs, clicking the ellipses expands the breadcrumbs.
+Expanded breadcrumbs can wrap to two or more lines.
-### Expanded breadcrumbs
-Expanded breadcrumbs can wrap to two or more lines.
+### Truncation
-### Truncation
-Long labels can be truncated based on pixel width. Truncated labels should always end with an ellipses to indicate there is more text not shown. On hover or long press, a tooltip should appear to show the full label.
+Long labels can be truncated based on pixel width. Truncated labels should always end with an ellipses to indicate there is more text not shown. On hover or long press, a tooltip should appear to show the full label.
diff --git a/apps/storefront/src/content/components/navigation-navigation-drawer/overview.mdx b/apps/storefront/src/content/components/navigation-navigation-drawer/overview.mdx
index 5289302073..02e50bf207 100644
--- a/apps/storefront/src/content/components/navigation-navigation-drawer/overview.mdx
+++ b/apps/storefront/src/content/components/navigation-navigation-drawer/overview.mdx
@@ -1,69 +1,72 @@
---
title: Navigation navigation drawer
-tabs:
-- Overview
-- Usage
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
+ - Interaction
mode: publish
---
+A _navigation drawer_ displays categories of navigational links in a vertical column that can be scrolled.
-**A *navigation drawer* displays categories of navigational links in a vertical column that can be scrolled.**
-***
-
## Guidelines
+
A navigation drawer is used to hold navigation with multiple groupings or many levels. Use a navigation drawer when the content has:
-
-* more sections than would fit in the `Top bar` as *tabs*
-* two or more levels of navigation hierarchy
+
+- more sections than would fit in the `Top bar` as _tabs_
+- two or more levels of navigation hierarchy
Navigation drawer labels should provide clear and concise direction. Note that if the label is longer than the maximum width it will be truncated and should have a tooltip provided.
-**Don't**
+**Don't**
+
-* Do not change the height of the individual items.
-* Do not change the width of the `Container`.
-* Do not open or place on the right side of the viewport.
-* Do not shrink text size to fit a label on a single line.
-* Do not wrap a label over two lines.
+- Do not change the height of the individual items.
+- Do not change the width of the `Container`.
+- Do not open or place on the right side of the viewport.
+- Do not shrink text size to fit a label on a single line.
+- Do not wrap a label over two lines.
-## Variations
-
+## Variations
+
-
-
+
### Subtitle
-Use a `Subtitle` as a divider to separate groups of navigation designations.
-
+Use a `Subtitle` as a divider to separate groups of navigation designations.
### Grandparent
-When using the `Grandparent` grouping items, always use `System icon/Arrows/chevron ...` to indicate nested items.
+When using the `Grandparent` grouping items, always use `System icon/Arrows/chevron ...` to indicate nested items.
-`Grandparent` items are allowed an optional leading icon to supplement the label. Use logical icons.
+`Grandparent` items are allowed an optional leading icon to supplement the label. Use logical icons.
**Don't**
-* Do not repeat the same icon across primary item destinations.
-* Do not apply icons to some items and not others.
+- Do not repeat the same icon across primary item destinations.
+- Do not apply icons to some items and not others.
### Parent
-When using the `Parent` grouping items, always use `System icon/Arrows/chevron ...` to indicate nested items.
-
+When using the `Parent` grouping items, always use `System icon/Arrows/chevron ...` to indicate nested items.
### Child
-A `Child` can be used with and without a `Parent`. It can be orphaned under a `Grandparent`.
-
+A `Child` can be used with and without a `Parent`. It can be orphaned under a `Grandparent`.
-## Interaction
+## Interaction
-A desktop navigation drawer can be persistent or toggled via the navigation icon in the top bar. Below `839px` the navigation drawer transforms into a collapsed drawer or becomes a hidden drawer. Hidden navigation drawers are accessible via the navigation icon in the `Top bar`.
+A desktop navigation drawer can be persistent or toggled via the navigation icon in the top bar. Below `839px` the navigation drawer transforms into a collapsed drawer or becomes a hidden drawer. Hidden navigation drawers are accessible via the navigation icon in the `Top bar`.
diff --git a/apps/storefront/src/content/components/navigation-pagination/overview.mdx b/apps/storefront/src/content/components/navigation-pagination/overview.mdx
index 90f286c2af..f2588780a5 100644
--- a/apps/storefront/src/content/components/navigation-pagination/overview.mdx
+++ b/apps/storefront/src/content/components/navigation-pagination/overview.mdx
@@ -1,36 +1,42 @@
---
title: Navigation pagination
-tabs:
-- Overview
-- Usage
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
+ - Interaction
mode: publish
---
+Pagination allows long sets of data or content to be divided into multiple pages with controls to navigate between these pages.
-**Pagination allows long sets of data or content to be divided into multiple pages with controls to navigate between these pages.**
-***
-
## Guidelines
+
-When content will take a long time to load or is better viewed in smaller sets, pagination can be used to divide this content into multiple pages. Pagination only loads one page at a time.
+When content will take a long time to load or is better viewed in smaller sets, pagination can be used to divide this content into multiple pages. Pagination only loads one page at a time.
-**Don't**
-
-* Do not lazy load content as the user scrolls when using pagination.
+**Don't**
+
-## Variations
-
+- Do not lazy load content as the user scrolls when using pagination.
-There are three variations of *pagination* to use: `Page numbers`, `Total + page numbers`, `Switcher + total + page numbers`.
+## Variations
+
-
+There are three variations of _pagination_ to use: `Page numbers`, `Total + page numbers`, `Switcher + total + page numbers`.
+
## Interaction
-The active page number always stays in the middle, shifting the previous numbers. For example, in pagination with five page buttons but ten pages---pages 1, 2, 9, and 10 will not be able to be centered when they are active, but the rest will be.
+The active page number always stays in the middle, shifting the previous numbers. For example, in pagination with five page buttons but ten pages---pages 1, 2, 9, and 10 will not be able to be centered when they are active, but the rest will be.
diff --git a/apps/storefront/src/content/components/navigation-table-of-contents/overview.mdx b/apps/storefront/src/content/components/navigation-table-of-contents/overview.mdx
index 4467eb5c85..c3b9dbb9d0 100644
--- a/apps/storefront/src/content/components/navigation-table-of-contents/overview.mdx
+++ b/apps/storefront/src/content/components/navigation-table-of-contents/overview.mdx
@@ -1,35 +1,36 @@
---
title: Navigation table of contents
-tabs:
-- Overview
-- Usage
+tabs:
+ - Overview
+ - Usage
mode: publish
---
+A _table of contents_ is a list of hyperlinks that scroll to anchored text on the same page.
-**A *table of contents* is a list of hyperlinks that scroll to anchored text on the same page.**
-***
-
## Guidelines
-
-Table of contents, also known as *anchors* or *article navigation*, link to anchored sections on a page. They always link to the current page. Table of contents can be placed either under the main heading and scroll away with the page, or to the right of the page's main content and be sticky.
+
+Table of contents, also known as _anchors_ or _article navigation_, link to anchored sections on a page. They always link to the current page. Table of contents can be placed either under the main heading and scroll away with the page, or to the right of the page's main content and be sticky.
### Labels
-* Avoid labels that are too long.
-* Labels should be to the point and short, no more than three words.
-* If the label does not fit in the space provided, truncation is allowed and should have a tooltip provided.
-* The label should reflect the section heading it links to.
-
+- Avoid labels that are too long.
+- Labels should be to the point and short, no more than three words.
+- If the label does not fit in the space provided, truncation is allowed and should have a tooltip provided.
+- The label should reflect the section heading it links to.
**Don't**
+
-* Do not use table of contents to link to other pages.
-* Do not use labels like "Click here" or "Jump to".
+- Do not use table of contents to link to other pages.
+- Do not use labels like "Click here" or "Jump to".
-
+
diff --git a/apps/storefront/src/content/components/navigation-tabs/overview.mdx b/apps/storefront/src/content/components/navigation-tabs/overview.mdx
index 833add876e..3eba2f8493 100644
--- a/apps/storefront/src/content/components/navigation-tabs/overview.mdx
+++ b/apps/storefront/src/content/components/navigation-tabs/overview.mdx
@@ -1,45 +1,60 @@
---
title: Navigation tabs
-tabs:
-- Overview
-- Usage
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
+ - Exceptions
mode: publish
---
+Tabs organise related content across different views to be quickly navigated.
-**Tabs organise related content across different views to be quickly navigated.**
-***
-
## Guidelines
+
-Tabs allow for navigation between content that is related and has an equal hierarchy. Each tab's content should be noticeably different from the other. Tabs allow for information to be presented in a space-saving layout.
+Tabs allow for navigation between content that is related and has an equal hierarchy. Each tab's content should be noticeably different from the other. Tabs allow for information to be presented in a space-saving layout.
**Don't**
+
-* Do not use tabs to scroll down through long pages on sequential content.
-* Do not stretch a tab to be wider than 360px.
-* Do not wrap or stack tabs.
-* Do not change the height of the tabs.
-* Do not use less than two tabs.
-* Do not use tabs above imagery.
-* Do not use tabs at the bottom of a layout.
-* Do not nest a set of _Tabs_ within another set of _Tabs_.
+- Do not use tabs to scroll down through long pages on sequential content.
+- Do not stretch a tab to be wider than 360px.
+- Do not wrap or stack tabs.
+- Do not change the height of the tabs.
+- Do not use less than two tabs.
+- Do not use tabs above imagery.
+- Do not use tabs at the bottom of a layout.
+- Do not nest a set of _Tabs_ within another set of _Tabs_.
+## Variations
-## Variations
+### Active
-### Active
-
+
-### Inactive
-
+### Inactive
-### Disabled
-
+
+
+### Disabled
+
+
@@ -49,27 +64,21 @@ Tabs have a minimum width of `Spacer/16 - Medium` on each side of the label. Tab
Tab width can be decided by three factors:
-1. The width of the space available being equally divided by the number of tabs. This method is only to be used for four tabs or less.
-2. The width of the widest tab determining the width of all the tabs to provide visual balance. This should be used with caution ensuring all tabs will be seen in smaller layouts.
-3. Each tab having its own minimum width to conserve space.
-
+1. The width of the space available being equally divided by the number of tabs. This method is only to be used for four tabs or less.
+2. The width of the widest tab determining the width of all the tabs to provide visual balance. This should be used with caution ensuring all tabs will be seen in smaller layouts.
+3. Each tab having its own minimum width to conserve space.
### Horizontal scrolling tabs
Tabs that are wider than the space available are always swipeable/scrollable having a next and previous icon button for navigation.
-
-
### Content
-
#### Labels
-Tab labels should provide clear and concise direction.
+Tab labels should provide clear and concise direction.
Note that if the label is longer than the maximum width it will be truncated and should have a tooltip provided.
-
-
## Exceptions
-If the `Navigation: Navigation Drawer ` is not used, tabs may be used in the `Navigation: Top Bar` as the main navigation linking to unrelated pages.
+If the `Navigation: Navigation Drawer` is not used, tabs may be used in the `Navigation: Top Bar` as the main navigation linking to unrelated pages.
diff --git a/apps/storefront/src/content/components/navigation-top-bar/overview.mdx b/apps/storefront/src/content/components/navigation-top-bar/overview.mdx
index ff5d74d492..aafdf547f4 100644
--- a/apps/storefront/src/content/components/navigation-top-bar/overview.mdx
+++ b/apps/storefront/src/content/components/navigation-top-bar/overview.mdx
@@ -1,62 +1,63 @@
---
-title: Navigation top bar
-tabs:
-- Overview
-- Usage
+title: Navigation top bar
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Sections
mode: publish
---
+The top bar, also known as a header, displays navigation and actions relating to the interface.
-**The top bar, also known as a header, displays navigation and actions relating to the interface.**
-***
-
## Guidelines
-
-
-Top bars span the full width of the viewport and are always the topmost component on a page. The top bar does not scroll away, being a consistent guidepost to users.
+
-
+Top bars span the full width of the viewport and are always the topmost component on a page. The top bar does not scroll away, being a consistent guidepost to users.
+
**Don't**
-
-* Do not hide the top bar when scrolling.
-* Do not change the colour of the top bar.
-* Do not add the `Logo` in the top bar.
-* Do not add imagery in the top bar.
+
+- Do not hide the top bar when scrolling.
+- Do not change the colour of the top bar.
+- Do not add the `Logo` in the top bar.
+- Do not add imagery in the top bar.
## Sections
-
+
### Title and navigation
-The top bar always has a title which is the same throughout the whole application group. A subtitle is allowed, this can be the same throughout the whole application group, or can be specific to sub-apps within the application.
-
-The top bar has one _optional_ main navigational icon button which is always to the far left. This icon can either open the `App launcher` or toggle the `Navigation Drawer`.
+The top bar always has a title which is the same throughout the whole application group. A subtitle is allowed, this can be the same throughout the whole application group, or can be specific to sub-apps within the application.
+The top bar has one _optional_ main navigational icon button which is always to the far left. This icon can either open the `App launcher` or toggle the `Navigation Drawer`.
### Center custom content
-The center block of the top bar can either be left empty, or custom content can be inserted into the placeholder.
-
-#### Custom content allowed:
+The center block of the top bar can either be left empty, or custom content can be inserted into the placeholder.
-* Tabs
- * Tabs are allowed with nested menus
-* Search bars
+#### Custom content allowed:
+- Tabs
+ - Tabs are allowed with nested menus
+- Search bars
### Actions
-The actions on the far-right are standard. This area is for the following common actions within the application:
+The actions on the far-right are standard. This area is for the following common actions within the application:
-* Fullscreen: Users can choose to launch the interface to be fullscreen.
-* Notifications: This opens a `Menu` for the user to see their notifications.
-* Accessibility: This opens a `Menu` with choices for the users to choose light/dark mode and their font size. _This button is mandatory to keep._
-* User profile: This opens a `Menu` where the user can see more account details and log out. _This button is mandatory to keep._
+- Fullscreen: Users can choose to launch the interface to be fullscreen.
+- Notifications: This opens a `Menu` for the user to see their notifications.
+- Accessibility: This opens a `Menu` with choices for the users to choose light/dark mode and their font size. _This button is mandatory to keep._
+- User profile: This opens a `Menu` where the user can see more account details and log out. _This button is mandatory to keep._
diff --git a/apps/storefront/src/content/components/notification-banner/overview.mdx b/apps/storefront/src/content/components/notification-banner/overview.mdx
index 92cae6fcaa..c0dc6c76d8 100644
--- a/apps/storefront/src/content/components/notification-banner/overview.mdx
+++ b/apps/storefront/src/content/components/notification-banner/overview.mdx
@@ -1,54 +1,55 @@
---
-title: Notification banner
-tabs:
-- Overview
-- Usage
+title: Notification banner
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
mode: publish
---
+_Banners_ display important notifications and related optional actions.
-***Banners* display important notifications and related optional actions.**
-***
-
## Guidelines
-
-Notification banners should communicate a change or error. Banners are always at the top of the page but below the *Top bar*. Banners require an action in order to be dismissed. Banners deliver medium priority information---while *Snackbars* deliver low priority and *Dialogs* delivery high priority information. Banners are meant to be slightly interruptive but not overly distracting. Banners can be fixed or scroll away with content.
+
-Banners are also known as *Top bar* or *Alerts*.
+Notification banners should communicate a change or error. Banners are always at the top of the page but below the _Top bar_. Banners require an action in order to be dismissed. Banners deliver medium priority information---while _Snackbars_ deliver low priority and _Dialogs_ delivery high priority information. Banners are meant to be slightly interruptive but not overly distracting. Banners can be fixed or scroll away with content.
+Banners are also known as _Top bar_ or _Alerts_.
**Don't**
-
-
-* Do not put a banner above the top bar.
-* Do not use more than one banner at a time.
-* Do not include links in the text.
-## Variations
-
+
-The `Text` or `Text + icon` with the optional `Actions` combined are to fill 100% of the width of the main content area. They are not to go over open *Navigation drawers* or fixed *sidesheets* but beside them.
+- Do not put a banner above the top bar.
+- Do not use more than one banner at a time.
+- Do not include links in the text.
-
+## Variations
+
+The `Text` or `Text + icon` with the optional `Actions` combined are to fill 100% of the width of the main content area. They are not to go over open _Navigation drawers_ or fixed _sidesheets_ but beside them.
-### Text
+
-Banners should have a single message with specific actions (optional) related to that message. Banner messages should be written as full sentences with punctuation.
+### Text
+Banners should have a single message with specific actions (optional) related to that message. Banner messages should be written as full sentences with punctuation.
### Text + icon
-To help weight the banner more on the screen a supporting icon can be added. Choose an icon from the `System Icons` that helps strengthen your message.
-
+To help weight the banner more on the screen a supporting icon can be added. Choose an icon from the `System Icons` that helps strengthen your message.
### Actions
Actions are optional. Actions should always be related to the message. Banners can have up to two actions. Action labels should be short and text only.
If the screen is not wide enough, place the actions below the message on their own line. (In Figma, remember to turn off the `Text` layers bottom border.)
-
diff --git a/apps/storefront/src/content/components/notification-dialog/overview.mdx b/apps/storefront/src/content/components/notification-dialog/overview.mdx
index 2ef85d6829..a2ce07e1b4 100644
--- a/apps/storefront/src/content/components/notification-dialog/overview.mdx
+++ b/apps/storefront/src/content/components/notification-dialog/overview.mdx
@@ -1,37 +1,42 @@
---
-title: Notification dialog
-tabs:
-- Overview
-- Usage
+title: Notification dialog
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
mode: publish
---
+_Dialogs_ display critical notifications and required actions.
-***Dialogs* display critical notifications and required actions.**
-***
-
## Guidelines
+
-A dialog is a modal window that appears over everything on the screen and always over a *Scrim*. Dialogs can appear without warning and require users to stop their current task so they should be used sparingly. The dialog disables all application functionality and requires an action to be taken in order to be dismissed.
+A dialog is a modal window that appears over everything on the screen and always over a _Scrim_. Dialogs can appear without warning and require users to stop their current task so they should be used sparingly. The dialog disables all application functionality and requires an action to be taken in order to be dismissed.
-In the notification family, dialogs are the most interruptive. *Banners* deliver medium priority slightly interruptive notifications, *Snackbars* deliver low priority un-interruptive notifications. Since dialogs are very disruptive, they should be used only in critical situations.
+In the notification family, dialogs are the most interruptive. _Banners_ deliver medium priority slightly interruptive notifications, _Snackbars_ deliver low priority un-interruptive notifications. Since dialogs are very disruptive, they should be used only in critical situations.
+**Don't**
-**Don't**
-* Do not use a dialog if a Snackbar or Banner would work better.
-* Do not use a dialog without a Scrim behind it.
-* Do not allow a dialog to be dismissed by clicking on the Scrim.
-* Do no scroll away a dialog.
+- Do not use a dialog if a Snackbar or Banner would work better.
+- Do not use a dialog without a Scrim behind it.
+- Do not allow a dialog to be dismissed by clicking on the Scrim.
+- Do no scroll away a dialog.
+## Variations
-## Variations
Dialogs can contain a Title, Content and Actions. A dialog can have one or two actions, but never a third. Actions should always be related to the message. Dialogs should try to avoid scrollable content. When scrolling is necessary, the title and actions are fixed and the content scrolls. There are five dialog variations available for use: `Text + actions`, `Placeholder + actions`, `Placeholder`, `Scrollable placeholder + actions` and `No title + text + actions`.
-
+
diff --git a/apps/storefront/src/content/components/notification-snackbar/overview.mdx b/apps/storefront/src/content/components/notification-snackbar/overview.mdx
index b4bb5bb9b2..f08d3be110 100644
--- a/apps/storefront/src/content/components/notification-snackbar/overview.mdx
+++ b/apps/storefront/src/content/components/notification-snackbar/overview.mdx
@@ -1,34 +1,35 @@
---
-title: Notification snackbar
-tabs:
-- Overview
-- Usage
+title: Notification snackbar
+tabs:
+ - Overview
+ - Usage
mode: publish
---
+_Snackbars_ provide brief temporary non-interrupting notifications at the bottom of the screen.
-***Snackbars* provide brief temporary non-interrupting notifications at the bottom of the screen.**
-***
-
## Guidelines
-
-Snackbars provide an update on a process that has or will be performed. Snackbars deliver low priority information---while *Banners* deliver medium priority and *Dialogs* deliver high priority information. Snackbars appear centered at the bottom of the screen and disappear without user interaction. On wider screens they are left-aligned. Snackbars appear on-screen between 5-10 seconds before dismissing themselves, so keep text short.
+
-Snackbars can have one action. This action should not be "Close " or "Dismiss" since snackbars disappear automatically. Actions such as "Undo" or "Retry" are acceptable. Snackbars can wrap up to two lines of text on smaller screens.
+Snackbars provide an update on a process that has or will be performed. Snackbars deliver low priority information---while _Banners_ deliver medium priority and _Dialogs_ deliver high priority information. Snackbars appear centered at the bottom of the screen and disappear without user interaction. On wider screens they are left-aligned. Snackbars appear on-screen between 5-10 seconds before dismissing themselves, so keep text short.
+Snackbars can have one action. This action should not be "Close " or "Dismiss" since snackbars disappear automatically. Actions such as "Undo" or "Retry" are acceptable. Snackbars can wrap up to two lines of text on smaller screens.
**Don't**
-
-
-* Do not stack snackbars.
-* Do not show more than one snackbar at a time.
-* Do not add links to the text.
-* Do not add more than one action.
-* Do not add icons to snackbars.
-* Do not hide core functionality or navigation in snackbar actions.
+
-
+- Do not stack snackbars.
+- Do not show more than one snackbar at a time.
+- Do not add links to the text.
+- Do not add more than one action.
+- Do not add icons to snackbars.
+- Do not hide core functionality or navigation in snackbar actions.
+
+
diff --git a/apps/storefront/src/content/components/popovers/overview.mdx b/apps/storefront/src/content/components/popovers/overview.mdx
index c93cd6e0d3..9dd3c831dc 100644
--- a/apps/storefront/src/content/components/popovers/overview.mdx
+++ b/apps/storefront/src/content/components/popovers/overview.mdx
@@ -1,28 +1,31 @@
---
-title: Popover
-tabs:
-- Overview
-- Usage
+title: Popover
+tabs:
+ - Overview
+ - Usage
mode: publish
---
-**A *popover* is a floating card that provides more information or actions on hover or click.**
-
+A _popover_ is a floating card that provides more information or actions on hover or click.
-***
+
## Guidelines
-
-A popover provides excess or additional information that did not fit in the main content area. A popover always has an indicator (caret) towards the area it is attached to. Popovers should never be wider than 560px and their height should not be taller than 80% of the screen.
+
-To dismiss a popover, use the close icon, press the `ESC` key, open another popover or click outside the popover. If there are no actions in the popover, then the close icon should be the first focusable element.
+A popover provides excess or additional information that did not fit in the main content area. A popover always has an indicator (caret) towards the area it is attached to. Popovers should never be wider than 560px and their height should not be taller than 80% of the screen.
+To dismiss a popover, use the close icon, press the `ESC` key, open another popover or click outside the popover. If there are no actions in the popover, then the close icon should be the first focusable element.
**Don't**
+
-* Do not use for a single short line of text, use a *Tooltip* instead.
-* Do not have multiple popovers open at the same time.
+- Do not use for a single short line of text, use a _Tooltip_ instead.
+- Do not have multiple popovers open at the same time.
-
+
diff --git a/apps/storefront/src/content/components/progress-indicators/overview.mdx b/apps/storefront/src/content/components/progress-indicators/overview.mdx
index ae78a41fdc..3adf13cd09 100644
--- a/apps/storefront/src/content/components/progress-indicators/overview.mdx
+++ b/apps/storefront/src/content/components/progress-indicators/overview.mdx
@@ -1,58 +1,68 @@
---
-title: Progress indicators
-tabs:
-- Overview
-- Usage
+title: Progress indicators
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
mode: publish
---
-***Progress indicators* are animated helpers that indicate waiting time as content loads.**
-
+_Progress indicators_ are animated helpers that indicate waiting time as content loads.
-***
+
## Guidelines
+
-Progress indicators inform users about the current loading state, giving them insight into the process. Progress indicators may be determinate or indeterminate.
+Progress indicators inform users about the current loading state, giving them insight into the process. Progress indicators may be determinate or indeterminate.
### Determinate
-Determinate progress indicators indicate how long the process will take. They should be used once there is an estimate of wait time available.
-
+Determinate progress indicators indicate how long the process will take. They should be used once there is an estimate of wait time available.
### Indeterminate
-Indeterminate progress indicators indicate an unknown amount of time the process will take. They should be used when there is *not* an estimated wait time available.
+Indeterminate progress indicators indicate an unknown amount of time the process will take. They should be used when there is _not_ an estimated wait time available.
+## Variations
-## Variations
-
### Linear
-Linear progress indicators are great to focus attention to an area. They are great for places like empty pages, at the bottom of the topbar and in cards and in lists.
-
-
+Linear progress indicators are great to focus attention to an area. They are great for places like empty pages, at the bottom of the topbar and in cards and in lists.
+
### Circular
-Circular progress indicators are great for places like icons and empty pages. They should be used for short waiting times.
-
-
+Circular progress indicators are great for places like icons and empty pages. They should be used for short waiting times.
+
### Dots
-Dot progress indicators are for use within buttons.
-
-
+Dot progress indicators are for use within buttons.
+
### Star
-Star progress indicators are to be used on splash screens and empty pages only.
+Star progress indicators are to be used on splash screens and empty pages only.
-
+
diff --git a/apps/storefront/src/content/components/scrim/overview.mdx b/apps/storefront/src/content/components/scrim/overview.mdx
index bde6ed9196..5ec0310daa 100644
--- a/apps/storefront/src/content/components/scrim/overview.mdx
+++ b/apps/storefront/src/content/components/scrim/overview.mdx
@@ -1,21 +1,21 @@
---
title: Scrim
-tabs:
-- Overview
-- Usage
+tabs:
+ - Overview
+ - Usage
mode: publish
---
-**A scrim is a temporary visual effect that fades the general interface while allowing the user to focus on an overlay.**
-
-***
+A scrim is a temporary visual effect that fades the general interface while allowing the user to focus on an overlay.
## Guidelines
-Always use a scrim with an overlay component such as a dialog, elevated sidesheet or elevated navigation drawer (mobile only).
-
-
+Always use a scrim with an overlay component such as a dialog, elevated sidesheet or elevated navigation drawer (mobile only).
+
## Interactions
diff --git a/apps/storefront/src/content/components/search/overview.mdx b/apps/storefront/src/content/components/search/overview.mdx
index 28fe841d78..698233f688 100644
--- a/apps/storefront/src/content/components/search/overview.mdx
+++ b/apps/storefront/src/content/components/search/overview.mdx
@@ -1,43 +1,48 @@
---
title: Search
-tabs:
-- Overview
-- Usage
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
mode: publish
---
+_Search_ allows users to locate or refine content based on simple words or phrases.
-***Search* allows users to locate or refine content based on simple words or phrases.**
-***
-
## Guidelines
-
-Users can type a term and press `Enter` to see the results. Auto-complete, recent searches, suggested searches and pre/post-scoping are available via the *Menu* component.
+
+Users can type a term and press `Enter` to see the results. Auto-complete, recent searches, suggested searches and pre/post-scoping are available via the _Menu_ component.
### Global Search
-Global search can be used a a primary way of discovering content. The global search placeholder text should always say "Search". The global search should replace the *Center custom content, placeholder* of the `Top bar`. The global search can be a button icon that is expanded into the `Search field` if search is less common in the application.
-
+Global search can be used a a primary way of discovering content. The global search placeholder text should always say "Search". The global search should replace the _Center custom content, placeholder_ of the `Top bar`. The global search can be a button icon that is expanded into the `Search field` if search is less common in the application.
### In-context Search
-In-context search allows users to search within a section of content---such as a table. The placeholder text should give users a hint at what type of results they can expect.
+In-context search allows users to search within a section of content---such as a table. The placeholder text should give users a hint at what type of results they can expect.
+## Variations
-## Variations
-
### Field
-
+
### Scope
-Scoping allows users to narrow their search before they start. The *Scope* can be changed by opening the menu. The default choice for the scope should always be "All".
+Scoping allows users to narrow their search before they start. The _Scope_ can be changed by opening the menu. The default choice for the scope should always be "All".
-
+
diff --git a/apps/storefront/src/content/components/selection-controls/overview.mdx b/apps/storefront/src/content/components/selection-controls/overview.mdx
index 80fb7c214a..206c1197b5 100644
--- a/apps/storefront/src/content/components/selection-controls/overview.mdx
+++ b/apps/storefront/src/content/components/selection-controls/overview.mdx
@@ -1,92 +1,128 @@
---
-title: Selection controls
-tabs:
-- Overview
-- Usage
+title: Selection controls
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Switch
+ - Checkbox
+ - Radio
mode: publish
---
-***Selection controls* allow users to select options, make decisions and set preferences.**
-
+_Selection controls_ allow users to select options, make decisions and set preferences.
-***
+
## Guidelines
+
Selection controls are to be visible and understandable at a quick glance. Selected options are more visible than unselected. Selection controls are always accompanied with a clear label. Make sure that the labels are surrounded with a `Clickbound` that activates the selection control as well as the control itself.
-
**Don't**
+
-* Do not mix different selection controls within a grouped list.
-* Do not use a selection control without a label.
-* Do not resize any of the selection controls.
+- Do not mix different selection controls within a grouped list.
+- Do not use a selection control without a label.
+- Do not resize any of the selection controls.
-## Variations
-
+## Variations
+
### Switch
-Switches allow users to toggle a single item between two possible states, taking immediate action. The most common states for a switch is "on/off". There are two variations of the switch provided: `Small switch` and `Switch`. The small switch is best for tight spaces and should be used with caution.
+Switches allow users to toggle a single item between two possible states, taking immediate action. The most common states for a switch is "on/off". There are two variations of the switch provided: `Small switch` and `Switch`. The small switch is best for tight spaces and should be used with caution.
**Don't**
+
-* Do not nest switches, use checkboxes instead.
+- Do not nest switches, use checkboxes instead.
#### Small switch on
-
+
+
#### Small switch off
-
+
+
#### Switch on
-
+
+
#### Switch off
-
+
### Checkbox
-Checkboxes allow users to select one or more items from a list. Checkboxes can be used to turn an option on or off. Generally, checkboxes are used with a confirmation action, however, they can also take immediate effect. The default state of a checkbox is having no option selected.
+Checkboxes allow users to select one or more items from a list. Checkboxes can be used to turn an option on or off. Generally, checkboxes are used with a confirmation action, however, they can also take immediate effect. The default state of a checkbox is having no option selected.
Checkboxes can be nested children.
- * When a parent checkbox is selected, all following children are selected.
- * When a parent checkbox is unselected, all following children are unselected.
- * When a child is unselected while other children are selected, the parent checkbox becomes indeterminate.
-
+- When a parent checkbox is selected, all following children are selected.
+- When a parent checkbox is unselected, all following children are unselected.
+- When a child is unselected while other children are selected, the parent checkbox becomes indeterminate.
#### Checkbox selected
-
+
+
#### Checkbox unselected
-
-#### Checkbox indeterminate
-
+
+#### Checkbox indeterminate
-### Radio button
+
-Radio buttons allow users to choose one single option from a list of mutually exclusive options. The default state of a radio button is to have one option selected.
+### Radio
+Radio buttons allow users to choose one single option from a list of mutually exclusive options. The default state of a radio button is to have one option selected.
**Don't**
+
-* Do not use radio buttons when the user can select more than one item.
-* Do not use a radio button without one item being selected by default.
+- Do not use radio buttons when the user can select more than one item.
+- Do not use a radio button without one item being selected by default.
#### Radio button selected
-
+
#### Radio button unselected
-
-
+
diff --git a/apps/storefront/src/content/components/side-sheet/overview.mdx b/apps/storefront/src/content/components/side-sheet/overview.mdx
index 6455d94bb2..2043c5a7e0 100644
--- a/apps/storefront/src/content/components/side-sheet/overview.mdx
+++ b/apps/storefront/src/content/components/side-sheet/overview.mdx
@@ -1,45 +1,47 @@
---
title: Side sheet
-tabs:
-- Overview
-- Usage
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
mode: publish
---
+A _side sheet_ is a a toggleable area that is anchored to the edge of the viewport with supplementary content.
-**A *side sheet* is a a toggleable area that is anchored to the edge of the viewport with supplementary content.**
-***
-
## Guidelines
+
-Side sheets display content that is supplementary to the primary content. Side sheets can display a list of actions, filters, supplemental content and functionality. Content in side sheets can be broken into tabs.
+Side sheets display content that is supplementary to the primary content. Side sheets can display a list of actions, filters, supplemental content and functionality. Content in side sheets can be broken into tabs.
-Side sheets are not permanent so they should always have a way to be opened and closed. They are always to be anchored to the left of the viewport's right edge. They are to be full height, but can start under the *top bar* if it is visible. Side sheets can be elevated over content using `Elevation/Overlay`, or push primary content to share the same elevation.
+Side sheets are not permanent so they should always have a way to be opened and closed. They are always to be anchored to the left of the viewport's right edge. They are to be full height, but can start under the _top bar_ if it is visible. Side sheets can be elevated over content using `Elevation/Overlay`, or push primary content to share the same elevation.
-
**Don't**
+
-* Do not use a left-anchored side sheet if using a *Navigational Drawer*.
-* Do not change the width of the side sheet.
-* Do not remove the close icon.
+- Do not use a left-anchored side sheet if using a _Navigational Drawer_.
+- Do not change the width of the side sheet.
+- Do not remove the close icon.
+## Variations
-## Variations
-
-
-
+
### Standard side sheet
-Primarily used for desktop and tablet. The side sheet comes in multiple sizes: `Small`, `Medium`, `Large`, `X Large`.
-
+Primarily used for desktop and tablet. The side sheet comes in multiple sizes: `Small`, `Medium`, `Large`, `X Large`.
### Modal side sheet
-Modular side sheets are used for mobile with the addition of a *scrim*.
+Modular side sheets are used for mobile with the addition of a _scrim_.
diff --git a/apps/storefront/src/content/components/slider/overview.mdx b/apps/storefront/src/content/components/slider/overview.mdx
index 7b106890d6..6032a620a1 100644
--- a/apps/storefront/src/content/components/slider/overview.mdx
+++ b/apps/storefront/src/content/components/slider/overview.mdx
@@ -1,59 +1,70 @@
---
-title: Slider
-tabs:
-- Overview
-- Usage
+title: Slider
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
mode: publish
---
-**A *slider* is a flexible input that allowss users to adjust predefined values.**
-
+A _slider_ is a flexible input that allowss users to adjust predefined values.
-***
+
## Guidelines
-
-Sliders reflect values along a bar where users can select a single value or a range of values. Sliders reflect the current state of the values they control, and value changes are immediate to the content in which they belong.
+
+Sliders reflect values along a bar where users can select a single value or a range of values. Sliders reflect the current state of the values they control, and value changes are immediate to the content in which they belong.
### Labels
-Number and abbreviation labels are allowed. They should clearly communicate the values such as: Min., Max, Avg. or a number.
+Number and abbreviation labels are allowed. They should clearly communicate the values such as: Min., Max, Avg. or a number.
**Don't**
-
-* Do not use a slider without a title indicating what the slider controls.
-* Do not use for ranges that are extremely different, e.g., 1-10000.
-* Do not use for ranges that are very small, e.g., 1-4.
+
+- Do not use a slider without a title indicating what the slider controls.
+- Do not use for ranges that are extremely different, e.g., 1-10000.
+- Do not use for ranges that are very small, e.g., 1-4.
## Variations
-
+
### Dot
-On hover, a tooltip can appear to give more guidance.
-
-
+On hover, a tooltip can appear to give more guidance.
+
### Handle
-On hover, a tooltip can appear to give more guidance.
-
-
+On hover, a tooltip can appear to give more guidance.
+
### Indicator
The indicator signifies the selected range.
-
-
+
### Track
-
+
diff --git a/apps/storefront/src/content/components/stepper/overview.mdx b/apps/storefront/src/content/components/stepper/overview.mdx
index 1502212a94..5b6f899bb8 100644
--- a/apps/storefront/src/content/components/stepper/overview.mdx
+++ b/apps/storefront/src/content/components/stepper/overview.mdx
@@ -1,58 +1,68 @@
---
title: Stepper
-tabs:
-- Overview
-- Usage
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Content
+ - Variations
mode: publish
---
+_Steppers_ guide users through the steps of a task.
-***Steppers* guide users through the steps of a task.**
-***
-
## Guidelines
+
-When a task is more advanced or complicated, visual help from a stepper lets the user know where they are in the current process.
+When a task is more advanced or complicated, visual help from a stepper lets the user know where they are in the current process.
+**Don't**
-**Don't**
-* Do not use with less than three steps.
-
+- Do not use with less than three steps.
## Content
-* Avoid titles that are too long. Titles should be to the point and short, no more than three words if possible.
-* Keep the item labels as short as possible.
-* Use meaningful item labels that explain the function.
-* Item labels should be in the active tense.
-* Do not mix nouns and verbs. Pick one or the other.
-* Always use icons that clearly communicate their intended purpose.
+- Avoid titles that are too long. Titles should be to the point and short, no more than three words if possible.
+- Keep the item labels as short as possible.
+- Use meaningful item labels that explain the function.
+- Item labels should be in the active tense.
+- Do not mix nouns and verbs. Pick one or the other.
+- Always use icons that clearly communicate their intended purpose.
+## Variations
-## Variations
+### Horizontal numeric
-### Horizontal numeric
-
-
-
-
-### Horizontal icon
-
-
+
+### Horizontal icon
-### Vertical numeric
+
-
+### Vertical numeric
+
-### Vertical icon
+### Vertical icon
-
+
diff --git a/apps/storefront/src/content/components/table/overview.mdx b/apps/storefront/src/content/components/table/overview.mdx
index f043310004..01e6692ff5 100644
--- a/apps/storefront/src/content/components/table/overview.mdx
+++ b/apps/storefront/src/content/components/table/overview.mdx
@@ -1,84 +1,100 @@
---
-title: Table
-tabs:
-- Overview
-- Usage
+title: Table
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
mode: publish
---
-***Tables* display data in a structured format.**
-
+_Tables_ display data in a structured format.
-***
+
## Guidelines
-
-Tables display information in an easy to scan format. Tables can be in cards or free floating within a page.
+
+Tables display information in an easy to scan format. Tables can be in cards or free floating within a page.
**Don't**
+
-* Do not use a table without a header row.
-* Do not add zebra striping.
-* Do not use a table with less than two columns.
-* Do not spell out numbers in tables.
-* Do not mix text/label alignments within the same column.
-* Do not use center alignment.
-* Do not create a null state that can be confused as content.
+- Do not use a table without a header row.
+- Do not add zebra striping.
+- Do not use a table with less than two columns.
+- Do not spell out numbers in tables.
+- Do not mix text/label alignments within the same column.
+- Do not use center alignment.
+- Do not create a null state that can be confused as content.
-## Variations
-
+## Variations
+
### Header
-The header row can have icons and text. Icons can be used for sorting columns as well as a text alternative.
-
-Avoid labels that are too long. Titles should be to the point and short and no more than three words. Note that if the label is longer than the width available, it will be truncated and should have a tooltip provided. Labels should be aligned left except when numeric---then either left or right alignment is permitted.
+The header row can have icons and text. Icons can be used for sorting columns as well as a text alternative.
+Avoid labels that are too long. Titles should be to the point and short and no more than three words. Note that if the label is longer than the width available, it will be truncated and should have a tooltip provided. Labels should be aligned left except when numeric---then either left or right alignment is permitted.
-#### Header icon (with placeholder icon)
+#### Header icon (with placeholder icon)
-
+
+#### Header text
-#### Header text
-
-The header text component includes options for writing unit for the column and a placeholder icon for sorting icons. This component uses auto layout to place Label text, icon and/or unit with the right spacing next to each other. Make sure to resize the component so that the spacing on the right is aligned to the most right part of the contents.
-
-
+The header text component includes options for writing unit for the column and a placeholder icon for sorting icons. This component uses auto layout to place Label text, icon and/or unit with the right spacing next to each other. Make sure to resize the component so that the spacing on the right is aligned to the most right part of the contents.
+
### Cell
-The cell row can have icons, text, links, inputs, numbers, monospaced numbers and other custom content (by using the placeholder). For cells containing numbers only, use Cell monospaced numeric for better readability and easier comparison and scannability of numbers between rows.
+The cell row can have icons, text, links, inputs, numbers, monospaced numbers and other custom content (by using the placeholder). For cells containing numbers only, use Cell monospaced numeric for better readability and easier comparison and scannability of numbers between rows.
-
-#### Cell icon (with placeholder icon)
+#### Cell icon (with placeholder icon)
Use the color ´Text +static icons/Default´ for icons that are not interactive, but use ´Interactive Primary/Resting´ for icons that are interactive, like checkboxes.
For disabled state, use the color ´Interactive Disabled/Text´ for icons that are not interactive, but use ´Interactive Disabled/Fill´ for icons that are interactive, like checkboxes.
-
-
+
#### Cell text
-
-
+
#### Cell monospaced numeric
-
-
+
#### Cell placeholder
-
-
+
#### Cell with text input
-
+
diff --git a/apps/storefront/src/content/components/text-fields/overview.mdx b/apps/storefront/src/content/components/text-fields/overview.mdx
index c36be57be7..c97d8394ee 100644
--- a/apps/storefront/src/content/components/text-fields/overview.mdx
+++ b/apps/storefront/src/content/components/text-fields/overview.mdx
@@ -1,80 +1,92 @@
---
-title: Text fields
-tabs:
-- Overview
-- Usage
+title: Text fields
+tabs:
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Variations
+ - Examples
mode: publish
---
-**A *text field* lets users enter, interact and edit content, typically in forms and dialogs.**
-
+*A *text field\* lets users enter, interact and edit content, typically in forms and dialogs.
-***
+
## Guidelines
+
-Text fields are used for long and short amounts of text. `Text inputs` are for a single line of text while `Text areas` are for more than a single line of text.
+Text fields are used for long and short amounts of text. `Text inputs` are for a single line of text while `Text areas` are for more than a single line of text.
-The component includes options for writing unit for the field and a placeholder icon. This component uses auto layout to place icon and/or unit with the right spacing next to each other.
+The component includes options for writing unit for the field and a placeholder icon. This component uses auto layout to place icon and/or unit with the right spacing next to each other.
+**Don't**
-### Input
+
-
+- Do not remove the label.
+- Do not use placeholder text instead of the label.
+- Do not use as search.
+- Do not end placeholder text with a period for inputs.
+## Variations
-### Area
+
-
+### Label
+A label text is always required, and helps users know what information is expected from this field. The label can either be above (as it is built into the component in Figma), or to the left of the field (done by hiding the built-in label in Figma and adding a new label to the left).
-**Don't**
-
-* Do not remove the label.
-* Do not use placeholder text instead of the label.
-* Do not use as search.
-* Do not end placeholder text with a period for inputs.
+### Meta
+Character count and required or optional labels can go in meta grouping. Do not assume that all users know what an "\*" means, use \*Required\* as the meta.
-## Variations
-
+### Placeholder text
+Placeholder text should provide hints or examples of what text to enter. For wording, use "e.g. Stavanger" and not "Name your town". For numbers, use "9-digit number" and not "Example: 123-456-789". Placeholder text disappears after the user begins to type, so it should _not_ contain critical information. Also, not all screen readers are capable of reading placeholder text. If the user does not type within the field, the placeholder text reappears in the field.
-### Label
-A label text is always required, and helps users know what information is expected from this field. The label can either be above (as it is built into the component in Figma), or to the left of the field (done by hiding the built-in label in Figma and adding a new label to the left).
+### Input text
+
+For input text containing numbers only, use the style Input/Text monospaced for better readability. For example for phone numbers, values etc.
+### Validation and errors
-### Meta
-Character count and required or optional labels can go in meta grouping. Do not assume that all users know what an "\*" means, use \*Required* as the meta.
+An error or warning must always have helper text with an icon or an icon in the field. Use real-time validation to help streamline the process and make the user experience smoother. Wait to validate until the user has finished interacting with the field.
+Validation helper text should use a passive tone as not to blame the users. For wording, use "Platform name required" and not "You did not enter a platform name".
-### Placeholder text
-Placeholder text should provide hints or examples of what text to enter. For wording, use "e.g. Stavanger" and not "Name your town". For numbers, use "9-digit number" and not "Example: 123-456-789". Placeholder text disappears after the user begins to type, so it should *not* contain critical information. Also, not all screen readers are capable of reading placeholder text. If the user does not type within the field, the placeholder text reappears in the field.
+### Unit
-### Input text
-For input text containing numbers only, use the style Input/Text monospaced for better readability. For example for phone numbers, values etc.
+Units in text fields are optional. Units should be used to explain the unit of the relevant text field, and be abbreviated if a standard unit is used.
+### Icon
-### Validation and errors
-An error or warning must always have helper text with an icon or an icon in the field. Use real-time validation to help streamline the process and make the user experience smoother. Wait to validate until the user has finished interacting with the field.
+Icons in text fields are optional. Icons can be very helpful in expressing extra functionality, input methods or indicating validation.
-Validation helper text should use a passive tone as not to blame the users. For wording, use "Platform name required" and not "You did not enter a platform name".
+- Valid, error or warning
+- Clear
+- Voice input
+- Dropdown
+- Loading
+### Helper text
-### Unit
-Units in text fields are optional. Units should be used to explain the unit of the relevant text field, and be abbreviated if a standard unit is used.
+Help text is always visible to assist the users and should not be hidden behind a tooltip.
+## Examples
-### Icon
-Icons in text fields are optional. Icons can be very helpful in expressing extra functionality, input methods or indicating validation.
+### Input
-* Valid, error or warning
-* Clear
-* Voice input
-* Dropdown
-* Loading
+
+### Area
-### Helper text
-Help text is always visible to assist the users and should not be hidden behind a tooltip.
+
diff --git a/apps/storefront/src/content/components/tooltip/overview.mdx b/apps/storefront/src/content/components/tooltip/overview.mdx
index c132645eb4..caaff3db76 100644
--- a/apps/storefront/src/content/components/tooltip/overview.mdx
+++ b/apps/storefront/src/content/components/tooltip/overview.mdx
@@ -1,39 +1,37 @@
---
-title: Tooltip
-tabs:
-- Overview
-- Usage
+title: Tooltip
+tabs:
+ - Overview
+ - Usage
mode: publish
---
-
-**A tooltip shows when hovered, focused or long-pressed (touch), and displays information such as a text label or a short description.**
-
-
-***
-
+A tooltip shows when hovered, focused or long-pressed (touch), and displays information such as a text label or a short description.
## Guidelines
+
Tooltips disappear after the mouse is no longer hovering the target area, the focus has moved on or the long-press is released. The information provided should be very short and descriptive and explain icon meanings or differences between components.
Tooltips should aim to have a single line of text, that does not wrap, and it kept to under 80 characters in length. The position of the tooltip is flexible. They are always pointed to the component to which they give information about.
-
**Don't**
-
-
-* Do not use tooltips that repeat visible UI text.
-* Do not add tooltips to buttons with text.
-* Do not format the text, such as bold or italics.
-* Do not allow tooltips to be cropped outside the frame.
-* Do not add images, such as avatars or icons.
-* Do not move tooltips to follow the cursor.
-* Do not have links within tooltips.
-* Do not use punctuation other than a `.` in a tooltip.
-* Tooltips are not the place for questions, excitement, etc.
-* Do not spell out numbers, use "12" instead of "twelve"
+
-
+- Do not use tooltips that repeat visible UI text.
+- Do not add tooltips to buttons with text.
+- Do not format the text, such as bold or italics.
+- Do not allow tooltips to be cropped outside the frame.
+- Do not add images, such as avatars or icons.
+- Do not move tooltips to follow the cursor.
+- Do not have links within tooltips.
+- Do not use punctuation other than a `.` in a tooltip.
+- Tooltips are not the place for questions, excitement, etc.
+- Do not spell out numbers, use "12" instead of "twelve"
+
+
diff --git a/apps/storefront/src/content/contributing/documentation/overview-template.mdx b/apps/storefront/src/content/contributing/documentation/overview-template.mdx
index 9a42318414..1349ee916a 100644
--- a/apps/storefront/src/content/contributing/documentation/overview-template.mdx
+++ b/apps/storefront/src/content/contributing/documentation/overview-template.mdx
@@ -1,36 +1,32 @@
---
title: XXX
-tabs:
-- Overview
-- Usage
+tabs:
+ - Overview
+ - Usage
mode: draft
---
+Intro here.
-**Intro here.**
-***
-
## Guidelines
-
+
+**Don't**
-**Don't**
-*
+-
-## Variations
-
-
-
-
+## Variations
+
-### Variation
+
+### Variation
## Interaction
diff --git a/apps/storefront/src/content/contributing/documentation/overview.mdx b/apps/storefront/src/content/contributing/documentation/overview.mdx
index c648553058..7d66d03f5a 100644
--- a/apps/storefront/src/content/contributing/documentation/overview.mdx
+++ b/apps/storefront/src/content/contributing/documentation/overview.mdx
@@ -1,26 +1,22 @@
---
title: Documentation
-tabs:
+tabs:
- Overview
- Content guidelines
mode: publish
---
-
-**One of the many ways you can contribute to the EDS is by writing, editing or approving documentation. Solid documentation ensures that trust is built and confusion is avoided.**
-
+One of the many ways you can contribute to the EDS is by writing, editing or approving documentation. Solid documentation ensures that trust is built and confusion is avoided.
## Component page structure
-Each component page has an *overview* and *usage* tab.
-
+Each component page has an _overview_ and _usage_ tab.
### Overview tab
-When starting a new page, copy the `overview-template.mdx` contents. This template serves as a starting point for the documentation. There must be an ingress and guidelines, however, the rest of the template is only needed if there is content to fill it.
-
+When starting a new page, copy the `overview-template.mdx` contents. This template serves as a starting point for the documentation. There must be an ingress and guidelines, however, the rest of the template is only needed if there is content to fill it.
### Usage tab
-The usage tab is divided into two main sections: *Figma* and *code*. These sections are to help customers when they are familiarising themselves with a new component. The usage guide should be organised by steps, kept to the point and only include necessary information.
+The usage tab is divided into two main sections: _Figma_ and _code_. These sections are to help customers when they are familiarising themselves with a new component. The usage guide should be organised by steps, kept to the point and only include necessary information.
diff --git a/apps/storefront/src/content/getting-started/about/about.mdx b/apps/storefront/src/content/getting-started/about/about.mdx
index b095f05363..a260bdafe2 100644
--- a/apps/storefront/src/content/getting-started/about/about.mdx
+++ b/apps/storefront/src/content/getting-started/about/about.mdx
@@ -1,36 +1,36 @@
---
-title: Introduction
+title: About
mode: publish
+toc:
+ - Goals
+ - Principles
---
-
The Equinor design system (EDS) is Equinor's official design system. It provides a collection of guidelines and reusable components that can be assembled in different combinations to design and build digital interfaces.
-All design and code components are high-quality, production-grade and accessibility-tested.
+All design and code components are high-quality, production-grade and accessibility-tested.
This allows Equinor to manage design at scale by creating a single source of truth for teams to design, prototype and develop.
-
## Goals
**People first**
The EDS creates a visual UI language that is based on standard UI patterns for real people.
**Efficient**
-It's a reliable, working system that allows teams to focus their time on creating great experiences and solving complex logic.
+It's a reliable, working system that allows teams to focus their time on creating great experiences and solving complex logic.
**Collaborative**
The EDS is open for all teams working with design and development at Equinor. Everyone is encouraged to contribute.
-
-## Principles
+## Principles
**Flexible**
-Built to be flexible. Its components are designed to work smoothly with each other.
+Built to be flexible. Its components are designed to work smoothly with each other.
**Accessible**
It's designed and developed to be accessible to everyone---regardless of their ability or situation.
**Meaningful motion**
-Motion is used to focus attention and is not decorative.
+Motion is used to focus attention and is not decorative.
**Cross-platform**
-Maintains the same UI across platforms---using shared components, tokens and guidelines.
+Maintains the same UI across platforms---using shared components, tokens and guidelines.
diff --git a/apps/storefront/src/content/getting-started/designers/introduction.mdx b/apps/storefront/src/content/getting-started/designers/introduction.mdx
index d01ef81826..0eaeacc2ac 100644
--- a/apps/storefront/src/content/getting-started/designers/introduction.mdx
+++ b/apps/storefront/src/content/getting-started/designers/introduction.mdx
@@ -1,18 +1,19 @@
---
title: Designers
tabs:
- - Introduction
- - Starting with Figma
- - Working with Figma
+ - Introduction
+ - Starting with Figma
+ - Working with Figma
+toc:
+ - Figma
+ - Device agnostic
+ - Please don't make your own
mode: publish
---
-
-
The Equinor Design System (EDS) will empower you to design consistently and prototype rapidly.
It is the official interface library for all of Equinor’s internal digital interfaces such as products, apps and web applications. Figma has been chosen as the tool for prototyping and design when using the EDS.
-
## Figma
Figma is a collaborative interface design tool for UI design and prototyping. It increases efficiency with the added flexibility of team libraries (the EDS) with components, styles and fonts automatically distributed.
@@ -32,13 +33,11 @@ Quickly create and share your prototype with others for review or testing.
**Development**
Your development team will always have view access to the current files and prototypes.
-
## Device agnostic
All components have been created for interaction on all devices. This means that all interface components can be used easily by mouse, keyboard or touch input.
This should help make the EDS future-proof to new technologies.
-
## Please don't make your own
Please refrain from spending resources making your own design system.
diff --git a/apps/storefront/src/content/getting-started/designers/starting-with-figma.mdx b/apps/storefront/src/content/getting-started/designers/starting-with-figma.mdx
index 78556d0021..681b52b574 100644
--- a/apps/storefront/src/content/getting-started/designers/starting-with-figma.mdx
+++ b/apps/storefront/src/content/getting-started/designers/starting-with-figma.mdx
@@ -1,85 +1,81 @@
---
title: Designers
tabs:
- - Introduction
- - Starting with Figma
- - Working with Figma
+ - Introduction
+ - Starting with Figma
+ - Working with Figma
+toc:
+ - Figma access in Equinor
+ - Joining a team in Figma
+ - Creating a team in Figma
mode: publish
---
-
## Figma access in Equinor
-* Instructions to apply for access and first time log in are on [Equinor's internal Enterprise Wiki](https://wiki.equinor.com/wiki/index.php/Figma "Equinor Enterprise Wiki").
-
+- Instructions to apply for access and first time log in are on [Equinor's internal Enterprise Wiki](https://wiki.equinor.com/wiki/index.php/Figma 'Equinor Enterprise Wiki').
## Joining a team in Figma
-* Have your team *admin* or *owner* add you to your team or search for the team you wish to join and request access.
- * You will be added as a *viewer* by default. If you plan to edit, ask your team *admin* or *owner* to upgrade you.
- * *Viewers* can:
- * View and comment on files and projects in which they have access.
- * View a list of *all* teams in the Equinor Figma Organisation.
- * Access the EDS components, styles and fonts.
- * *Editors* can do everything a *viewer* can, plus they can create and edit files.
-
+- Have your team _admin_ or _owner_ add you to your team or search for the team you wish to join and request access.
+ - You will be added as a _viewer_ by default. If you plan to edit, ask your team _admin_ or _owner_ to upgrade you.
+ - _Viewers_ can:
+ - View and comment on files and projects in which they have access.
+ - View a list of _all_ teams in the Equinor Figma Organisation.
+ - Access the EDS components, styles and fonts.
+ - _Editors_ can do everything a _viewer_ can, plus they can create and edit files.
## Creating a team in Figma
-New teams are created under the Equinor organisation area. When creating a new team, search first to make sure the team doesn't already exist. Projects should not be mixed, so make one team per project. Give the team an appropriate name, knowing that anyone in Figma can see the name. Please delete the default project folder **Design System** since this is not the EDS and can cause confusion. The user creating a team becomes the team owner, but can be re-assigned to another team member.
-
+New teams are created under the Equinor organisation area. When creating a new team, search first to make sure the team doesn't already exist. Projects should not be mixed, so make one team per project. Give the team an appropriate name, knowing that anyone in Figma can see the name. Please delete the default project folder **Design System** since this is not the EDS and can cause confusion. The user creating a team becomes the team owner, but can be re-assigned to another team member.
### Team owner responsibilities
-Team owners are the single point of contact for the Figma team, and the Figma administrators and EDS Core team will reach out to them when necessary. Team owners are expected to read and follow the Figma guidelines found here on the EDS storefront.
-
+Team owners are the single point of contact for the Figma team, and the Figma administrators and EDS Core team will reach out to them when necessary. Team owners are expected to read and follow the Figma guidelines found here on the EDS storefront.
### Access types
> #### Open teams
-> **Visibility**: Everyone within the organisation can see the *open* team listed, join it, and see all of the associated projects or documents.
+> **Visibility**: Everyone within the organisation can see the _open_ team listed, join it, and see all of the associated projects or documents.
-> **Permissions**: Members choosing to join an open team will be given view access (with the ability to comment, inspect and export assets) by default so they can't accidentally edit something. Team *admins* can grant team edit access to individual people as necessary.
+> **Permissions**: Members choosing to join an open team will be given view access (with the ability to comment, inspect and export assets) by default so they can't accidentally edit something. Team _admins_ can grant team edit access to individual people as necessary.
> **Good for**: Companies that want to foster a highly collaborative environment. When people have a window into what other teams are working on, they have the opportunity to work more cross-functionally and can maintain consistent patterns across different products or projects.
-
> #### Closed teams
-> **Visibility**: Everyone in the organisation can see the *closed* team exists from the **View all teams** modal, but non-members will not be able to immediately see or join the projects and documents inside.
+> **Visibility**: Everyone in the organisation can see the _closed_ team exists from the **View all teams** modal, but non-members will not be able to immediately see or join the projects and documents inside.
-> **Permissions**: Users wishing to join a closed team need to request access to see projects. Team *admins* can permit or deny these requests and give the users the appropriate access level (view or edit).
+> **Permissions**: Users wishing to join a closed team need to request access to see projects. Team _admins_ can permit or deny these requests and give the users the appropriate access level (view or edit).
> **Good for**: This type is best suited for teams who can't share their work with the entire organisation, but can still benefit from everyone knowing about their existence. This gives people a destination to go if they do require access.
-
> #### Secret teams
-> **Visibility**: No one can see that a *secret* team exists within the organisation, unless they are the creator or have been specifically invited to join.
+> **Visibility**: No one can see that a _secret_ team exists within the organisation, unless they are the creator or have been specifically invited to join.
-> **Permissions**: *Owners* of secret teams need to individually invite the members they want to have access. They can also set the appropriate view or edit permissions for each user.
+> **Permissions**: _Owners_ of secret teams need to individually invite the members they want to have access. They can also set the appropriate view or edit permissions for each user.
> **Good for**: This is for top secret projects that require access is given to only very specific subset of users. Examples are work done leading up to an acquisition or something that cannot have organisation-wide knowledge. This access type can be changed at any point to give these teams more visibility when the timing is right.
-> Via [Figma](https://www.figma.com/blog/getting-started-with-teams-in-figma-organization/#team-access-types-and-visibility "Figma blog on Org Teams")
+> Via [Figma](https://www.figma.com/blog/getting-started-with-teams-in-figma-organization/#team-access-types-and-visibility 'Figma blog on Org Teams')
#### Members
-Members are any users that have been added to the Equinor Figma Organisation---their email needs to be an Equinor email.
-
-Members are able to:
+Members are any users that have been added to the Equinor Figma Organisation---their email needs to be an Equinor email.
-* View and comment on files and projects in which they have access.
-* View a list of *all* teams in the Equinor Figma Organisation.
-* Access the EDS components, styles and fonts.
+Members are able to:
+- View and comment on files and projects in which they have access.
+- View a list of _all_ teams in the Equinor Figma Organisation.
+- Access the EDS components, styles and fonts.
#### Member management
-* By default, members added to your team will be added as a *viewer*.
-* It is the *owners'* choice to upgrade the *viewer* to *editor* or *admin*. If you are unable to upgrade a *viewer* to an *editor*, reach out to the EDS core team on Slack.
-* Users are currently able to upgrade themselves to an *editor* by transferring a file into the team from their drafts. However, this can be blocked on a user-by-user basis by the *admins* of the Equinor Figma Organisation.
-* As the team *owner*, it is your responsibility to make sure that *only* those who need it are *editors*. *Owners*, *admins* and *editors* incur a monthly cost to Equinor---however, *viewers* do not. It is possible to upgrade someone to an *editor* and downgrade them within the same billing cycle.
- * If an *editor* is on an extended leave, change their account to *viewer* and upgrade them when they return.
- * If a team member is no longer part of the team, remove them from the team.
+- By default, members added to your team will be added as a _viewer_.
+- It is the _owners'_ choice to upgrade the _viewer_ to _editor_ or _admin_. If you are unable to upgrade a _viewer_ to an _editor_, reach out to the EDS core team on Slack.
+- Users are currently able to upgrade themselves to an _editor_ by transferring a file into the team from their drafts. However, this can be blocked on a user-by-user basis by the _admins_ of the Equinor Figma Organisation.
+- As the team _owner_, it is your responsibility to make sure that _only_ those who need it are _editors_. _Owners_, _admins_ and _editors_ incur a monthly cost to Equinor---however, _viewers_ do not. It is possible to upgrade someone to an _editor_ and downgrade them within the same billing cycle.
+ - If an _editor_ is on an extended leave, change their account to _viewer_ and upgrade them when they return.
+ - If a team member is no longer part of the team, remove them from the team.
diff --git a/apps/storefront/src/content/getting-started/designers/working-with-figma.mdx b/apps/storefront/src/content/getting-started/designers/working-with-figma.mdx
index ff3fc91269..9812c10d28 100644
--- a/apps/storefront/src/content/getting-started/designers/working-with-figma.mdx
+++ b/apps/storefront/src/content/getting-started/designers/working-with-figma.mdx
@@ -1,47 +1,52 @@
---
title: Designers
tabs:
- - Introduction
- - Starting with Figma
- - Working with Figma
+ - Introduction
+ - Starting with Figma
+ - Working with Figma
+toc:
+ - Setting up
+ - Working clean
+ - Grids
+ - Finding components
+ - Component updates
+ - Clickbounds are hidden by default
+ - Placeholders
mode: publish
---
-
## Setting up
-There is no limit to the amount of projects a team can have, which is great since this will help your team stay very organised. Each file created, inside a project, must contain a cover page. A cover page sits on the first page of every file, and the page name should be *Cover*. Place the `Default File Cover` on the page and fill in the information. This allows others, now or later, to know who is responsible for this file and who to ask if they have questions. Change the status badge as the file progresses, remembering to change the background colour of the cover page to match the current badge colour.
-
-
+There is no limit to the amount of projects a team can have, which is great since this will help your team stay very organised. Each file created, inside a project, must contain a cover page. A cover page sits on the first page of every file, and the page name should be _Cover_. Place the `Default File Cover` on the page and fill in the information. This allows others, now or later, to know who is responsible for this file and who to ask if they have questions. Change the status badge as the file progresses, remembering to change the background colour of the cover page to match the current badge colour.
+
## Working clean
-Use the pages on the left side of Figma to stay organised. There is not limit to the amount of pages you can create in Figma. Break apart main sections of your app, if necessary. Create a page for custom components to that project, if needed. Also, consider making a page for sketches and mess. Everything on pages that your team members will be using should be clean and organised.
-
+Use the pages on the left side of Figma to stay organised. There is not limit to the amount of pages you can create in Figma. Break apart main sections of your app, if necessary. Create a page for custom components to that project, if needed. Also, consider making a page for sketches and mess. Everything on pages that your team members will be using should be clean and organised.
### Frames/artboards
-Lay out your frames/artboards to go across the screen horizontally. Make sure that they are all aligned to the same top line and have equal spacing between each frame. Variation of the same page should be organised vertically under the page they relate to. This helps everyone switch between files and teams seamlessly.
+Lay out your frames/artboards to go across the screen horizontally. Make sure that they are all aligned to the same top line and have equal spacing between each frame. Variation of the same page should be organised vertically under the page they relate to. This helps everyone switch between files and teams seamlessly.
Example: https://i.imgur.com/0tM7GGg.jpg
-
## Grids
-* Change your nudge amount to 8px, learn how [here](https://spectrum.chat/figma/help/how-do-i-change-my-nudge-values~f946ed5b-4c6d-42d7-9475-470a4b52639d "Figma Spectrum Chat").
-* Make sure to read the EDS grid guidelines before working with the EDS.
-* Always place everything on an artboard/frame.
-
+- Change your nudge amount to 8px, learn how [here](https://spectrum.chat/figma/help/how-do-i-change-my-nudge-values~f946ed5b-4c6d-42d7-9475-470a4b52639d 'Figma Spectrum Chat').
+- Make sure to read the EDS grid guidelines before working with the EDS.
+- Always place everything on an artboard/frame.
## Finding components
-* In the left sidebar, choose the tab **Assets**
- * Image example like: https://i.imgur.com/cyt9T1Q.png
-* You can then scroll through the list to find the component or you can use the search box.
-* Click and drag the component out to the frame you need it on.
-* Do not change the colours or layouts.
-
+- In the left sidebar, choose the tab **Assets**
+ - Image example like: https://i.imgur.com/cyt9T1Q.png
+- You can then scroll through the list to find the component or you can use the search box.
+- Click and drag the component out to the frame you need it on.
+- Do not change the colours or layouts.
## Component updates
@@ -49,15 +54,13 @@ Example: https://i.imgur.com/CZYkIWQ.png
From time to time, components will be updated in the EDS library---these can be reviewed, then accepted or denied. If accepted, all instances of the updated component(s) will be updated. This will not change the content that you have overridden, like custom colours or text. If denied, you will be asked again the next time you load the file. Read more about it on [Figma.com: Accepting updates from your team library](https://help.figma.com/article/314-accepting-updates-from-your-team-library).
-
## Clickbounds are hidden by default
When starting to use Figma, you might wonder why some components, such as buttons, have a larger bounding box than visual presence. This is due to a layer called the clickbound, which is 48px in height. This is in accordance with the WCAG guidelines for touch targets.
+## Placeholders
-## Placeholders
-
-When building layouts, you can add a placeholder where you don’t have content ready. Placeholders are also built into many EDS components.
+When building layouts, you can add a placeholder where you don’t have content ready. Placeholders are also built into many EDS components.
When a nested component is ready, simply replace the placeholder by dragging the component over the placeholder while holding down the shortcut described below.
diff --git a/apps/storefront/src/content/guidelines/accessibility/overview.mdx b/apps/storefront/src/content/guidelines/accessibility/overview.mdx
index c6f28e4c11..1ef0001a88 100644
--- a/apps/storefront/src/content/guidelines/accessibility/overview.mdx
+++ b/apps/storefront/src/content/guidelines/accessibility/overview.mdx
@@ -1,120 +1,113 @@
---
title: Accessibility
mode: publish
+toc:
+ - What is accessibility?
+ - What are different abilities?
+ - Guidelines
---
+All digital interfaces should be inclusive and accessible for everyone---regardless of impairments or abilities.
+Improving accessibility is not only the responsible thing to do, it also enhances the usability for all users.
+Please use this section as a guide to help ensure your experiences meet or exceed the standards for accessibility.
-All digital interfaces should be inclusive and accessible for everyone---regardless of impairments or abilities.
-Improving accessibility is not only the responsible thing to do, it also enhances the usability for all users.
-Please use this section as a guide to help ensure your experiences meet or exceed the standards for accessibility.
-
-The UI components for all Equinor's internal digital interfaces are built to meet the [WCAG 2.0](https://www.w3.org/TR/WCAG20/ "Web Content Accessibility Guidelines 2.0") and [Difi.no](https://uu.difi.no "Direktoratet for forvaltning og ikt") AA level requirements. While the components built are accessible, as a customer of the EDS there are things you need to remember when creating layouts and prototypes, and combining components.
-
+The UI components for all Equinor's internal digital interfaces are built to meet the [WCAG 2.0](https://www.w3.org/TR/WCAG20/ 'Web Content Accessibility Guidelines 2.0') and [Difi.no](https://uu.difi.no 'Direktoratet for forvaltning og ikt') AA level requirements. While the components built are accessible, as a customer of the EDS there are things you need to remember when creating layouts and prototypes, and combining components.
## What is accessibility?
-Accessibility ensures that users of different abilities can understand, navigate, interact with and contribute to the digital interface in a meaningful way.
-This means:
-* Keyboard interaction alternatives for all mouse-based actions are provided.
-* All button and input fields are properly identified.
-* Images, SVGs and videos have text-based alternatives.
-* All components are built to convey their identity, operation model and state to assistive technologies.
+Accessibility ensures that users of different abilities can understand, navigate, interact with and contribute to the digital interface in a meaningful way.
+This means:
+- Keyboard interaction alternatives for all mouse-based actions are provided.
+- All button and input fields are properly identified.
+- Images, SVGs and videos have text-based alternatives.
+- All components are built to convey their identity, operation model and state to assistive technologies.
## What are different abilities?
-There are many different types of abilities that need consideration:
-
-* Age
-* Blindness
-* Low vision
-* Colour-blindness
-* Hearing disabilities
-* Physical disabilities
-* Cognitive disabilities
-* Situational disabilities (such as a broken arm)
+There are many different types of abilities that need consideration:
-There are also different types of situations that need consideration:
+- Age
+- Blindness
+- Low vision
+- Colour-blindness
+- Hearing disabilities
+- Physical disabilities
+- Cognitive disabilities
+- Situational disabilities (such as a broken arm)
-* Physical location
-* Limited screen size
-* Lighting issues
+There are also different types of situations that need consideration:
+- Physical location
+- Limited screen size
+- Lighting issues
## Guidelines
-
### Spacing
To comply with accessibility guidelines, all interactive components must have at least 8px between them. This is to prevent users from accidentally clicking the wrong place.
-
### Consistent headings
-Strive to make your menus and hierarchies consistent.
+Strive to make your menus and hierarchies consistent.
Use H1, H2, H3, etc., in the correct order. This helps all users navigate and browse the page efficiently.
-
### Form validating inline
-Make sure to use the `helper text` when validation fails. Keep the `helper text` short and to the point.
-
+Make sure to use the `helper text` when validation fails. Keep the `helper text` short and to the point.
### Text and its meaning
-Remember that text can be both visible and invisible `alt text`.
+Remember that text can be both visible and invisible `alt text`.
Make sure all text is meaningful in its context.
-
### Call to actions
-Provide descriptive labels---action verbs are good.
+Provide descriptive labels---action verbs are good.
-Here is an example:
+Here is an example:
Acceptable: **See all platforms** _Indicates what will happen_
-Not acceptable: **All platforms** _Does not indicate what will happen_
-
-If a button's text says "See all platforms", make sure you send the user to a page with all platforms.
-Be consistent with how you use verbs and which terms you use.
+Not acceptable: **All platforms** _Does not indicate what will happen_
+If a button's text says "See all platforms", make sure you send the user to a page with all platforms.
+Be consistent with how you use verbs and which terms you use.
### Images
-Important information should not be in or over images.
-Make sure to always caption your image.
-
+Important information should not be in or over images.
+Make sure to always caption your image.
### Colour
Use the colours provided in the EDS. They have been tested to make sure your work will be WCAG 2.0 compliant.
-Many users have trouble distinguishing colours from each other, so make sure colour is not the only way you convey certain information.
+Many users have trouble distinguishing colours from each other, so make sure colour is not the only way you convey certain information.
For example, danger should not be indicated by red colour alone.
-#### Exceptions
-If you need to use additional colours for domain-specific requirements, charts or graphs, make sure to test your colours for contrast.
-Use high contrast, as this both increases readability in general and assists users with impaired sight.
+#### Exceptions
+If you need to use additional colours for domain-specific requirements, charts or graphs, make sure to test your colours for contrast.
+Use high contrast, as this both increases readability in general and assists users with impaired sight.
-### Navigation Order
+### Navigation Order
Place components on the page in order of importance---the order in which the element receives focus should be logical and predictable. Try to keep navigation to a minimum of steps and make all steps clear.
-Try navigating your own solution by only using a keyboard. Can you navigate? Can you perform all the important tasks? Can you tell where the keyboard focus is?
+Try navigating your own solution by only using a keyboard. Can you navigate? Can you perform all the important tasks? Can you tell where the keyboard focus is?
Do your items follow the order you think? Generally, focus travels up to down, left to right. Test it out by using your `tab` key.
-
### Validating your work
-The EDS is only a foundation for accessible design and development.
-Accessibility is the responsibility of the entire team---designers and developers have specific responsibilities listed in the related sections.
+The EDS is only a foundation for accessible design and development.
+Accessibility is the responsibility of the entire team---designers and developers have specific responsibilities listed in the related sections.
-Please familiarise yourself with the guidelines from [WCAG 2.0](https://www.w3.org/TR/WCAG20/ "Web Content Accessibility Guidelines") and [Difi.no](https://uu.difi.no "Direktoratet for forvaltning og IKT") to verify your interfaces meet the AA level requirements.
+Please familiarise yourself with the guidelines from [WCAG 2.0](https://www.w3.org/TR/WCAG20/ 'Web Content Accessibility Guidelines') and [Difi.no](https://uu.difi.no 'Direktoratet for forvaltning og IKT') to verify your interfaces meet the AA level requirements.
#### Tools and resources
Here are some resources to help validate your work:
-[WebAIM](https://webaim.org/ "Web accessibility in mind")
-[Are my colours accessible?](https://www.aremycoloursaccessible.com/ "Are my colours accessible?]")
-[The A11Y Project](https://a11yproject.com/ "The A11Y Project")
+[WebAIM](https://webaim.org/ 'Web accessibility in mind')
+[Are my colours accessible?](https://www.aremycoloursaccessible.com/ 'Are my colours accessible?]')
+[The A11Y Project](https://a11yproject.com/ 'The A11Y Project')
diff --git a/apps/storefront/src/content/guidelines/colour/overview.mdx b/apps/storefront/src/content/guidelines/colour/overview.mdx
index 96803424ba..9867323d81 100644
--- a/apps/storefront/src/content/guidelines/colour/overview.mdx
+++ b/apps/storefront/src/content/guidelines/colour/overview.mdx
@@ -1,94 +1,119 @@
---
title: Colour
tabs:
- - Overview
- - Usage
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Styles
mode: publish
---
+The EDS's look and feel is light and airy. Colour helps show hierarchy, champion the Equinor brand and indicate interactivity.
-**The EDS's look and feel is light and airy. Colour helps show hierarchy, champion the Equinor brand and indicate interactivity.**
-***
-
## Guidelines
+
-Use the colours provided in the EDS. These have been tested to make sure they will either meet or exceed the accessibility guidelines. Our colours include the brand colours, but also have supplementary colours for infographics and similar.
+Use the colours provided in the EDS. These have been tested to make sure they will either meet or exceed the accessibility guidelines. Our colours include the brand colours, but also have supplementary colours for infographics and similar.
Tip:
_Many people have trouble differentiating certain colours, so make sure colour is not the only way to convey certain information._
-
**Don't**
+
-* Do not add additional colours.
+- Do not add additional colours.
+
+## Styles
-## Styles
### Interactive colours
+Moss Green is dedicated to be the `Interactive Primary` colour for internal digital interfaces and experiences.
+This is different from other branding seen in print and marketing. The decision was made to guarantee that there is no confusion with errors.
-Moss Green is dedicated to be the `Interactive Primary` colour for internal digital interfaces and experiences.
-This is different from other branding seen in print and marketing. The decision was made to guarantee that there is no confusion with errors.
-
-Slate Blue is dedicated to be the `Interactive Secondary` colour.
-
-Energy Red is strategically not used for components in EDS since it is easy to misunderstand as an error or alert colour. If you are developing brand/communication related products, please refer to the Equinor [Brand Center](https://communicationtoolbox.equinor.com/brandcenter/en/equinorbc/component/default/98 "Brand Center Toolbox Guidelines") to see how to utilise Energy Red as part of the interface.
+Slate Blue is dedicated to be the `Interactive Secondary` colour.
-
-
-
+Energy Red is strategically not used for components in EDS since it is easy to misunderstand as an error or alert colour. If you are developing brand/communication related products, please refer to the Equinor [Brand Center](https://communicationtoolbox.equinor.com/brandcenter/en/equinorbc/component/default/98 'Brand Center Toolbox Guidelines') to see how to utilise Energy Red as part of the interface.
+
+
+
#### Feedback colours
Interactive feedback colours for `Danger` (red), `Warning` (orange) and `Success` (green) are also available for use.
-
-
-
-
+
+
+
#### Text + static icon colours
When building interfaces, only use the `Primary` text colour which is used for `Headings` and for `Body` text. The `Secondary` and `Tertiary` text colours are nested into components that are already assembled.
-
-
+
#### UI background colours
-Choose between `Default` (which is white) or `Light` and `Medium` greys for the interface background.
-The other `UI Backgrounds` are nested into components that are already assembled.
+Choose between `Default` (which is white) or `Light` and `Medium` greys for the interface background.
+The other `UI Backgrounds` are nested into components that are already assembled.
Please do not add additional background colours---the default theme is light and airy and does not allow for dark mode at this time.
-
-
+
-### Infographic colours
+### Infographic colours
-Please check the Equinor [Brand Center](https://communicationtoolbox.equinor.com/brandcenter/en/equinorbc/component/default/104 "Brand Center Toolbox Guidelines") for color usage and principles related to infographics. There are two sets of infographic colours to choose between: `Infographic Primary` and `Infographic Substitute`.
+Please check the Equinor [Brand Center](https://communicationtoolbox.equinor.com/brandcenter/en/equinorbc/component/default/104 'Brand Center Toolbox Guidelines') for color usage and principles related to infographics. There are two sets of infographic colours to choose between: `Infographic Primary` and `Infographic Substitute`.
+#### Primary infographic colours
-#### Primary infographic colours
-
-Aim to avoid creating multi-coloured charts and diagrams. Monochrome charts and diagrams are preferred wherever possible. Please take care when using reds with blue and green colours to avoid making the red data points appear as a warning or negative data.
-
-
+Aim to avoid creating multi-coloured charts and diagrams. Monochrome charts and diagrams are preferred wherever possible. Please take care when using reds with blue and green colours to avoid making the red data points appear as a warning or negative data.
+
#### Substitute infographic colours
-The `Infographic Substitute` colours have been developed for enhanced legibility. These can be used when the `Infographic Primary` colours do not offer enough clarity and definition.
-
-
+The `Infographic Substitute` colours have been developed for enhanced legibility. These can be used when the `Infographic Primary` colours do not offer enough clarity and definition.
+
### Exceptions for interactive and infographic colours only
-If it is needed to use additional interactive or infographic colours for domain-specific requirements, make sure to test the added colours for contrast. This is for domain-specific cases only, and new colours are not to be chosen based on personal preferences. Use high contrast colours, as this both increases general readability and includes the needs of users with impaired vision.
+If it is needed to use additional interactive or infographic colours for domain-specific requirements, make sure to test the added colours for contrast. This is for domain-specific cases only, and new colours are not to be chosen based on personal preferences. Use high contrast colours, as this both increases general readability and includes the needs of users with impaired vision.
diff --git a/apps/storefront/src/content/guidelines/elevation/overview.mdx b/apps/storefront/src/content/guidelines/elevation/overview.mdx
index 1c41a3dd73..ff9126db31 100644
--- a/apps/storefront/src/content/guidelines/elevation/overview.mdx
+++ b/apps/storefront/src/content/guidelines/elevation/overview.mdx
@@ -1,33 +1,38 @@
---
title: Elevation
tabs:
- - Overview
- - Usage
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Styles
mode: publish
---
+Elevation is a visual effect that makes an element look like it's floating above the surface (using the z-axis).
-**Elevation is a visual effect that makes an element look like it's floating above the surface (using the z-axis).**
-***
-
## Guidelines
+
The elevation effect is made using shadows to help lift an element into focus --- it is a reference to the physical world. Elements may be stacked on top of each other, but can’t pass through each other.
-
**Don't**
+
-* Do not use elevation on icons.
-* Do not use elevation on text.
+- Do not use elevation on icons.
+- Do not use elevation on text.
+## Styles
-## Styles
-There are six elevation effects to choose between: `None`, `Raised`, `Overlay`, `Sticky`, `Temporary nav` and `Above scrim`.
+There are six elevation effects to choose between: `None`, `Raised`, `Overlay`, `Sticky`, `Temporary nav` and `Above scrim`.
-
+
diff --git a/apps/storefront/src/content/guidelines/grid/overview.mdx b/apps/storefront/src/content/guidelines/grid/overview.mdx
index 28d53e8a25..6e604fab72 100644
--- a/apps/storefront/src/content/guidelines/grid/overview.mdx
+++ b/apps/storefront/src/content/guidelines/grid/overview.mdx
@@ -1,76 +1,71 @@
---
title: Grid
tabs:
- - Overview
- - Usage
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Styles
mode: publish
---
+A grid adapts to screen size and orientation to help keep layouts consistent.
-**A grid adapts to screen size and orientation to help keep layouts consistent.**
-***
-
## Guidelines
-
+
Screen size is determined by the device and the user's window size. The EDS grid has three main content layouts that should cover all desktop, tablet and mobile needs adapting to different screen sizes and orientations.
-
### Grid layouts
-* It is the responsibility of the designer to define a maximum width and choose the correct grid.
-* It is up to the designer to make sure the design will scale correctly on all sizes. Start with a viewport that is the most common for the users. Make sure to test that the content will fit at smaller and larger viewports.
-* It is the responsibility of the developers to implement the maximum width and use the grid as designed.
+- It is the responsibility of the designer to define a maximum width and choose the correct grid.
+- It is up to the designer to make sure the design will scale correctly on all sizes. Start with a viewport that is the most common for the users. Make sure to test that the content will fit at smaller and larger viewports.
+- It is the responsibility of the developers to implement the maximum width and use the grid as designed.
Tip:
_Always remember to test designs and code by scaling the screen size or changing the orientation of the device._
-
### Grid influencers
-When using a canvas navigation drawer or sidesheet, the content container could be resized.
-This will sometimes require a smaller grid to be used.
-
-
-## Styles
+When using a canvas navigation drawer or sidesheet, the content container could be resized.
+This will sometimes require a smaller grid to be used.
+## Styles
### Grid columns
-The columns used in the grid are **fluid** in width. There is not a defined width.
-
-- `Grid/Large`
- - Use in content areas that are between 840px and larger.
-- `Grid/Medium`
- - Use in content areas that are 600--839px.
-- `Grid/Small`
- - Use in content areas that are 0--599px.
+The columns used in the grid are **fluid** in width. There is not a defined width.
+- `Grid/Large`
+ - Use in content areas that are between 840px and larger.
+- `Grid/Medium`
+ - Use in content areas that are 600--839px.
+- `Grid/Small`
+ - Use in content areas that are 0--599px.
### Grid margins
-Grid margins are the space at the outer edge of the grid against the frame's edge.
-Grid styles are available with and without margins.
-It is up to the designer to decide which works best for your interface.
-
-- `Grid/Large`
- - Margins are set to 32px.
-- `Grid/Medium`
- - Margins are set to 24px.
-- `Grid/Small`
- - Margins are set to 16px.
+Grid margins are the space at the outer edge of the grid against the frame's edge.
+Grid styles are available with and without margins.
+It is up to the designer to decide which works best for your interface.
+- `Grid/Large`
+ - Margins are set to 32px.
+- `Grid/Medium`
+ - Margins are set to 24px.
+- `Grid/Small`
+ - Margins are set to 16px.
### Grid gutters
-Grid gutters are the space in between the columns of the grid.
+Grid gutters are the space in between the columns of the grid.
-- `Grid/Large`
- - Gutters are set to 16px.
-- `Grid/Medium`
- - Gutters are set to 16px.
-- `Grid/Small`
- - Gutters are set to 8px.
+- `Grid/Large`
+ - Gutters are set to 16px.
+- `Grid/Medium`
+ - Gutters are set to 16px.
+- `Grid/Small`
+ - Gutters are set to 8px.
diff --git a/apps/storefront/src/content/guidelines/shape/shape.mdx b/apps/storefront/src/content/guidelines/shape/shape.mdx
index 0d9bd4be1e..13b2d4ab23 100644
--- a/apps/storefront/src/content/guidelines/shape/shape.mdx
+++ b/apps/storefront/src/content/guidelines/shape/shape.mdx
@@ -1,25 +1,30 @@
---
title: Shape
mode: publish
+toc:
+ - Guidelines
+ - Variations
---
+Components can have many different shapes---establishing a common shape keeps consistency.
-**Components can have many different shapes---establishing a common shape keeps consistency.**
-***
-
## Guidelines
+
To reflect the round corners of the Equinor logo, our shapes have a default rounded corner of 4px. You will notice this in the corners of buttons, cards, menus and more.
-
-## Variations
+## Variations
### Variation name
+
There are many different shapes to choose between when you are building a component, such as: `Button`, `Icon button`, `Corners`, `Straight`, `Field` and `Circle`.
-
+
diff --git a/apps/storefront/src/content/guidelines/spacing/overview.mdx b/apps/storefront/src/content/guidelines/spacing/overview.mdx
index 6a929bf1c5..7ea11bcaa4 100644
--- a/apps/storefront/src/content/guidelines/spacing/overview.mdx
+++ b/apps/storefront/src/content/guidelines/spacing/overview.mdx
@@ -1,49 +1,56 @@
---
title: Spacing
tabs:
- - Overview
- - Usage
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Spacing hierarchy
+ - Variations
mode: publish
---
+Every part of your interface should be intentional---this includes spacing. While spacing is invisible, it gives air and readability to your interface. Our spacing scale is based on 8px increments.
-**Every part of your interface should be intentional---this includes spacing. While spacing is invisible, it gives air and readability to your interface. Our spacing scale is based on 8px increments.**
-***
-
## Guidelines
+
-Spacing is used to apply margin and padding across all platforms.
+Spacing is used to apply margin and padding across all platforms.
The EDS has a predefined set of spacers. These predefined sizes will ensure consistency across interfaces.
The spacers `XX Small` and `X Small` are only to be used inside of components, while the spacers `Small` up to `XXX Large` can be used both within and between components.
-- Always make sure to follow the [accessibility guidelines](https://eds.equinor.com/guidelines/accessibility/ "EDS accessibility guidelines") by having 8px of spacing between each clickbound.
-
+- Always make sure to follow the [accessibility guidelines](https://eds.equinor.com/guidelines/accessibility/ 'EDS accessibility guidelines') by having 8px of spacing between each clickbound.
## Spacing hierarchy
Too much information without spacing can overwhelm the user. Sufficient spacing helps the user process information and rest the eyes.
-* Less spacing between elements imply they relate to each other.
-* More spacing between elements imply they do not relate to each other.
-* Sufficient spacing around elements helps users process the information.
-* Generally, more spacing around an element makes it seem more important.
+- Less spacing between elements imply they relate to each other.
+- More spacing between elements imply they do not relate to each other.
+- Sufficient spacing around elements helps users process the information.
+- Generally, more spacing around an element makes it seem more important.
+## Variations
-## Variations
### Vertical spacing
-There are eight spacers to choose between: `XX Small`, `X Small`, `Small`, `Medium`, `Large`, `X Large`, `XX Large` and `XXX Large`. The spacers `XX Small` and `X Small` are only to be used inside components, while the other spacers are to be used in layouts.
-
-
+There are eight spacers to choose between: `XX Small`, `X Small`, `Small`, `Medium`, `Large`, `X Large`, `XX Large` and `XXX Large`. The spacers `XX Small` and `X Small` are only to be used inside components, while the other spacers are to be used in layouts.
+
### Horizontal spacing
-There are eight spacers to choose between: `XX Small`, `X Small`, `Small`, `Medium`, `Large`, `X Large`, `XX Large` and `XXX Large`. The spacers `XX Small` and `X Small` are only to be used inside components, while the other spacers are to be used in layouts.
+There are eight spacers to choose between: `XX Small`, `X Small`, `Small`, `Medium`, `Large`, `X Large`, `XX Large` and `XXX Large`. The spacers `XX Small` and `X Small` are only to be used inside components, while the other spacers are to be used in layouts.
-
+
diff --git a/apps/storefront/src/content/guidelines/typography/overview.mdx b/apps/storefront/src/content/guidelines/typography/overview.mdx
index c3c82e584e..c2e7210723 100644
--- a/apps/storefront/src/content/guidelines/typography/overview.mdx
+++ b/apps/storefront/src/content/guidelines/typography/overview.mdx
@@ -1,41 +1,43 @@
---
title: Typography
tabs:
- - Overview
- - Usage
+ - Overview
+ - Usage
+toc:
+ - Guidelines
+ - Styles
mode: publish
---
+Typography presents hierarchy and organises information as clearly and efficiently as possible.
-**Typography presents hierarchy and organises information as clearly and efficiently as possible.**
-***
-
## Guidelines
-
-The Equinor typeface is the primary typeface and is available in four weights: `light`, `regular`, `medium` and `bold` with accompanying italics. Please do not use `light` in digital interfaces except in special cases where the font size is over 48px.
+
+The Equinor typeface is the primary typeface and is available in four weights: `light`, `regular`, `medium` and `bold` with accompanying italics. Please do not use `light` in digital interfaces except in special cases where the font size is over 48px.
### Paragraph length
-Paragraph length is the number of characters in a line of text---this includes spaces.
+Paragraph length is the number of characters in a line of text---this includes spaces.
To ensure readability, line length should be 55-80 characters. Lines less than 55 characters can cause strain on the eye requiring the eye to jump to the next line too quickly, breaking the reading rhythm. Lines greater than 80 characters can make it difficult for users to continue on the correct line in a large body of text.
+## Styles
-## Styles
Too many type sizes can cause confusion. The EDS has a limited set of type sizes that work well together.
-
### Headings
There are seven headings to choose between: `H1 bold`, `H1`, `H2`, `H3`, `H4`, `H5` and `H6`.
-
-
+
### Paragraph
@@ -43,9 +45,11 @@ There are many paragraph styles to choose between: `Overline`, `Ingress`, `Body
The style `Body short` is used for short sentences containing around four words. It is most commonly used within components.
-
-
+
### Additional styles
-There are other typography styles that are used internally within components.
+There are other typography styles that are used internally within components.
diff --git a/apps/storefront/src/content/index.mdx b/apps/storefront/src/content/index.mdx
index 53ad2be596..e06d729004 100644
--- a/apps/storefront/src/content/index.mdx
+++ b/apps/storefront/src/content/index.mdx
@@ -1,22 +1,129 @@
---
title: Equinor Design System (EDS)
mode: publish
+type: landingPage
---
+import { Typography } from '@equinor/eds-core-react'
-**The EDS is currently under development. Figma design components have been released and a first version (MVP) in React will be released later this year.**
+
+ The EDS is the official design system of Equinor and is to be used when
+ designing, prototyping and developing internal digital interfaces.
+
-
-The EDS is the official design system of Equinor and is to be used when designing, prototyping and developing internal digital interfaces. The EDS provides structure, guidance and tools that enable designers and developers to efficiently build consistent, inclusive and flexible solutions.
-
-Components
-- Design for users comes first. A full library of branded Figma and React components built upon tokens.
-
-Documentation
-- Guidelines and principles on how to use the design system built on a common language.
-
-Living
-- Always evolving, invites collaboration and depends on contribution.
-
-Supported
-- Backed and supported by the EDS core team to make your everyday easier.
+
+
+
+
+ Components
+
+
+ Design for users comes first. A full library of branded Figma and React
+ components built upon tokens.
+
+
+
+
+
+ Documentation
+
+
+ Guidelines and principles on how to use the design system built on a
+ common language.
+
+
+
+
+
+ Living
+
+
+ Always evolving, invites collaboration and depends on contribution.
+
+
+
+
+
+ Supported
+
+
+ Backed and supported by the EDS core team to make your everyday easier.
+
+
+
diff --git a/apps/storefront/src/content/patterns/common-actions/common-actions.mdx b/apps/storefront/src/content/patterns/common-actions/common-actions.mdx
index df3029e748..6523fe1f05 100644
--- a/apps/storefront/src/content/patterns/common-actions/common-actions.mdx
+++ b/apps/storefront/src/content/patterns/common-actions/common-actions.mdx
@@ -1,11 +1,13 @@
---
title: Common actions
mode: draft
+toc:
+ - Regressive actions
+ - Progressive actions
---
REF: https://www.carbondesignsystem.com/patterns/common-actions/
-
Some action will be used several times and across components and workflows. To make sure that we are consistent, such actions should only be applied as described below.
## Regressive actions
@@ -44,7 +46,6 @@ Use link.
### Add
-
Add objects to a list or a set.
Use primary button or a button with an icon.
diff --git a/apps/storefront/src/content/patterns/data-formats/data-formats.mdx b/apps/storefront/src/content/patterns/data-formats/data-formats.mdx
index 69785e2f86..ec0b123956 100644
--- a/apps/storefront/src/content/patterns/data-formats/data-formats.mdx
+++ b/apps/storefront/src/content/patterns/data-formats/data-formats.mdx
@@ -1,6 +1,10 @@
---
title: Data formats
mode: draft
+toc:
+ - Date and time
+ - Input formats
+ - Numbers
---
How to format numeric and linguistic data.
@@ -9,14 +13,14 @@ How to format numeric and linguistic data.
Here is an overview of the different accepted formats:
-|Type|How to use|Example|
-|---|---|---|
-|Date, Full|dddd,MMM D, YYYY, hh:mm:ss Z|Monday, August 3, 2020, 09:31:57 UTC+1|
-|Date, Normal|ddd,MMM D, YYYY hh:mm|Mon, Aug 3, 2020, 09:31|
-|Date, Compacy|MMM D, YYYY hh:mm|Aug 3, 2020|
-|Date range example 1||Aug 3-7, 2020|
-|Date range example 2||Mon-Fri, Aug 3-7, 2020|
-|Date range example 3||Aug 3-Aug 7, 2020|
+| Type | How to use | Example |
+| -------------------- | ---------------------------- | -------------------------------------- |
+| Date, Full | dddd,MMM D, YYYY, hh:mm:ss Z | Monday, August 3, 2020, 09:31:57 UTC+1 |
+| Date, Normal | ddd,MMM D, YYYY hh:mm | Mon, Aug 3, 2020, 09:31 |
+| Date, Compacy | MMM D, YYYY hh:mm | Aug 3, 2020 |
+| Date range example 1 | | Aug 3-7, 2020 |
+| Date range example 2 | | Mon-Fri, Aug 3-7, 2020 |
+| Date range example 3 | | Aug 3-Aug 7, 2020 |
## Input formats
@@ -28,22 +32,23 @@ We accept three delimiters: Period, dash and slash.
In addition to all standard display formats and standard copy format, the following formats should be accepted for date fields:
-|Format|Entered value|Interpretation|
-|---|---|---|
-|yyyy/mm/dd|2020/08/03|Aug 3, 2020|
-|yyyy.mm.dd|2020.08.03|Aug 3, 2020|
-|dd.mm.yyyy|03.08.2020|Aug 3, 2020|
-|dd-mm-yyyy|03-08-2020|Aug 3, 2020|
-|hh:mm:ss|09|09:00:00|
+| Format | Entered value | Interpretation |
+| ---------- | ------------- | -------------- |
+| yyyy/mm/dd | 2020/08/03 | Aug 3, 2020 |
+| yyyy.mm.dd | 2020.08.03 | Aug 3, 2020 |
+| dd.mm.yyyy | 03.08.2020 | Aug 3, 2020 |
+| dd-mm-yyyy | 03-08-2020 | Aug 3, 2020 |
+| hh:mm:ss | 09 | 09:00:00 |
### Relative dates
Considersupporting input relative formats like:
-* Today
-* Last month
-* Month -3
-* Today -3d
-* etc.
+
+- Today
+- Last month
+- Month -3
+- Today -3d
+- etc.
These are especially handy if you generate reports or standard views that should display data relative to today's date.
@@ -62,23 +67,22 @@ Correct display format:
x xxx,xxx
### Input formats
+
To ensure compatibility with numeric pads on English keyboards and pasted values from other sources, period should be accepted as decimal separator for inputs. Same applies in reverse if the user has selected period as decimal separator.
Any use of space in the number input should be accepted but removed to support thousand separators, leading or trailing spaces without generating validation error.
If multiple instances of periods and/or commas are present, only regard the last one.
Accepted input formats
-* x
-* x.x
-* x,xx
-* xxxx,xxx
-* x xxx.xxx
-* x.xxx.xxx
-* x,xxx.xxx
-* ,x
-* .x
-
-
+- x
+- x.x
+- x,xx
+- xxxx,xxx
+- x xxx.xxx
+- x.xxx.xxx
+- x,xxx.xxx
+- ,x
+- .x
Martin, ref: https://material.io/design/communication/data-formats.html#data-redaction
diff --git a/apps/storefront/src/content/patterns/data-visualisation/data-visualisation.mdx b/apps/storefront/src/content/patterns/data-visualisation/data-visualisation.mdx
index b961ad0f45..76bec41d8b 100644
--- a/apps/storefront/src/content/patterns/data-visualisation/data-visualisation.mdx
+++ b/apps/storefront/src/content/patterns/data-visualisation/data-visualisation.mdx
@@ -1,83 +1,79 @@
---
title: Data visualisation
mode: publish
+toc:
+ - Infographics
+ - Dashboard
+ - Recommend further reading
---
-**Data visualisation is the graphical presentation of information in a way that makes it easier to understand and process. It is usually interactive and allows for the user to draw their own conclusions about the data. Some common data visualisation formats are tables, bar charts, line charts, scatterplots and maps.**
-
-
-***
-
+Data visualisation is the graphical presentation of information in a way that makes it easier to understand and process. It is usually interactive and allows for the user to draw their own conclusions about the data. Some common data visualisation formats are tables, bar charts, line charts, scatterplots and maps.
## Infographics
-An infographic is very similar to a data visualization since it too is a graphical presentation of information that is presented in a way that is easy to digest and understand. Infographics are more subjective though by telling a complete and premeditated story which guides the user to a particular conclusion. Refer to the Equinor [Brand Center](https://communicationtoolbox.equinor.com/brandcenter/en/equinorbc/component/default/100 "Brand Center Toolbox Guidelines") for guidelines on creating infographics.
-
+An infographic is very similar to a data visualization since it too is a graphical presentation of information that is presented in a way that is easy to digest and understand. Infographics are more subjective though by telling a complete and premeditated story which guides the user to a particular conclusion. Refer to the Equinor [Brand Center](https://communicationtoolbox.equinor.com/brandcenter/en/equinorbc/component/default/100 'Brand Center Toolbox Guidelines') for guidelines on creating infographics.
## Dashboard
-A dashboard is a combination of data visualisations arranged on a single screen which can be monitored at-a-glance. This is usually a summary of the most important data that is needed for users to take action or make decisions. A dashboard should effectively communicate a story using data.
-
+A dashboard is a combination of data visualisations arranged on a single screen which can be monitored at-a-glance. This is usually a summary of the most important data that is needed for users to take action or make decisions. A dashboard should effectively communicate a story using data.
### Data
-Data accuracy is the top priority. Data must be displayed correctly and in a way that does not mislead the user.
-
-* Be careful how missing, null and zero data are displayed.
-* Use visual techniques to effectively highlight and draw the user’s attention to the most important data.
-* Focus on presenting the information needed in the most simple and clear way.
-* Provide adequate context in the form of labels, data values or units to aide in interpretation of the data.
-* Add supplemental data when necessary to provide the correct context to understand the data. Examples are targets, trends, budgets, YTD, averages, etc.
-* Enable users to drill-down with context to perform further analysis away from the dashboard.
-* Sort data for easier comparisons.
-* Minimise use of decimals where they are not relevant or don’t add value.
+Data accuracy is the top priority. Data must be displayed correctly and in a way that does not mislead the user.
+- Be careful how missing, null and zero data are displayed.
+- Use visual techniques to effectively highlight and draw the user’s attention to the most important data.
+- Focus on presenting the information needed in the most simple and clear way.
+- Provide adequate context in the form of labels, data values or units to aide in interpretation of the data.
+- Add supplemental data when necessary to provide the correct context to understand the data. Examples are targets, trends, budgets, YTD, averages, etc.
+- Enable users to drill-down with context to perform further analysis away from the dashboard.
+- Sort data for easier comparisons.
+- Minimise use of decimals where they are not relevant or don’t add value.
### Layout
-To assist the user and simplify the process of finding information, the information should be positioned corresponding to how the users are trained to read. Western cultures read left to right, meaning the most frequently viewed information should be placed in the upper left-hand corner. The least frequently viewed information should therefore be placed in the bottom right-hand corner.
+To assist the user and simplify the process of finding information, the information should be positioned corresponding to how the users are trained to read. Western cultures read left to right, meaning the most frequently viewed information should be placed in the upper left-hand corner. The least frequently viewed information should therefore be placed in the bottom right-hand corner.
-Put thought into how the information is grouped on the dashboard based on the relationships of the data and the desired flow for the user. Keep in mind that users naturally assume that elements located near each other are related. They will also perceive that elements that visually look similar (size, shape, colour) are related even if they are not located near each other.
-* Use the Equinor typeface when possible, otherwise use Arial.
-* Use a screen size ratio of 16:9.
-* The dashboard should be confined to a single screen without scrolling.
-* Distribute content evenly over the width and height of the dashboard. This enables the user to see the whole picture at once.
-* Tabs to other relevant views or pages should be placed along the top below the title. Don’t have more than 6 tabs.
-* Always use common navigation design patterns that users are familiar with such as filter panels and tabs across the top.
-* There should always be an overall dashboard title located at the top.
-* Use whitespace to help group information and to declutter the page.
- * For example, add 16px margin around the entire dashboard, 16px padding around content in a visual, and 16px between visualisations.
-* Global filters should be grouped and placed together either on the top, left or right side of the dashboard. Filters applying to single visualisations should be placed close to the visualisation in which they apply to.
+Put thought into how the information is grouped on the dashboard based on the relationships of the data and the desired flow for the user. Keep in mind that users naturally assume that elements located near each other are related. They will also perceive that elements that visually look similar (size, shape, colour) are related even if they are not located near each other.
+- Use the Equinor typeface when possible, otherwise use Arial.
+- Use a screen size ratio of 16:9.
+- The dashboard should be confined to a single screen without scrolling.
+- Distribute content evenly over the width and height of the dashboard. This enables the user to see the whole picture at once.
+- Tabs to other relevant views or pages should be placed along the top below the title. Don’t have more than 6 tabs.
+- Always use common navigation design patterns that users are familiar with such as filter panels and tabs across the top.
+- There should always be an overall dashboard title located at the top.
+- Use whitespace to help group information and to declutter the page.
+ - For example, add 16px margin around the entire dashboard, 16px padding around content in a visual, and 16px between visualisations.
+- Global filters should be grouped and placed together either on the top, left or right side of the dashboard. Filters applying to single visualisations should be placed close to the visualisation in which they apply to.
### Colour
-Use colour appropriately. Colour can be used to draw the user’s attention to something important, and it is also an easy way to help the user identify patterns or trends.
-
-It is not recommended to rely on colour alone, since some users can have trouble distinguishing certain colours (colour blindness).
-* Follow the guidelines given on EDS.
-* Keep bright and saturated colours to a minimum, only using them to highlight data requiring attention.
-* Make sure that colours used on a dashboard consist of one palette of colours, do not mix from different palettes.
-* Visuals can off a white or light background colour but use a non-white background colour like Light or Medium grey for the overall dashboard.
+Use colour appropriately. Colour can be used to draw the user’s attention to something important, and it is also an easy way to help the user identify patterns or trends.
+It is not recommended to rely on colour alone, since some users can have trouble distinguishing certain colours (colour blindness).
-### Data visualisation types
+- Follow the guidelines given on EDS.
+- Keep bright and saturated colours to a minimum, only using them to highlight data requiring attention.
+- Make sure that colours used on a dashboard consist of one palette of colours, do not mix from different palettes.
+- Visuals can off a white or light background colour but use a non-white background colour like Light or Medium grey for the overall dashboard.
-It is important to understand the different types of visuals available in order to choose the right visual for the intended purpose.
+### Data visualisation types
-Visualisations should include the data and context necessary to communicate the intended information in a clear and effective way.
+It is important to understand the different types of visuals available in order to choose the right visual for the intended purpose.
-* Be consistent with labelling and data formatting. Always label axes, show units and add a title.
-* Be aware of the scaling used and that it conveys the data correctly.
-* The vertical (y-axis) for a bar chart should usually start at zero. The starting point in other chart types should be reasonable for the data.
-* Avoid 3D, background images, animations or other unnecessary effects that reduce comprehension.
-* Ensure the user is not being misled. For example, parts of a whole should always add up to 100.
-* Use visual cues like arrows, colour or text to help users interpret the data.
-* Enhance the data pixels and reduce unnecessary non-data pixels (gridlines, borders, certain fill colours, etc).
-* Add a means for the user to interact with the data such as filters, slicers, sorting and drill-down possibilities.
-* Avoid pie and donut charts as they can be misleading and difficult to interpret.
+Visualisations should include the data and context necessary to communicate the intended information in a clear and effective way.
+- Be consistent with labelling and data formatting. Always label axes, show units and add a title.
+- Be aware of the scaling used and that it conveys the data correctly.
+- The vertical (y-axis) for a bar chart should usually start at zero. The starting point in other chart types should be reasonable for the data.
+- Avoid 3D, background images, animations or other unnecessary effects that reduce comprehension.
+- Ensure the user is not being misled. For example, parts of a whole should always add up to 100.
+- Use visual cues like arrows, colour or text to help users interpret the data.
+- Enhance the data pixels and reduce unnecessary non-data pixels (gridlines, borders, certain fill colours, etc).
+- Add a means for the user to interact with the data such as filters, slicers, sorting and drill-down possibilities.
+- Avoid pie and donut charts as they can be misleading and difficult to interpret.
-## Recommend further reading
+## Recommend further reading
-Explore the books, blogs and articles written by data visualisation experts: Edward R. Tufte, Colin Ware, Wayne W. Eckerson and Stephen Few.
+Explore the books, blogs and articles written by data visualisation experts: Edward R. Tufte, Colin Ware, Wayne W. Eckerson and Stephen Few.
diff --git a/apps/storefront/src/content/patterns/inputs/inputs.mdx b/apps/storefront/src/content/patterns/inputs/inputs.mdx
index c5ea1e83a1..313953a0ee 100644
--- a/apps/storefront/src/content/patterns/inputs/inputs.mdx
+++ b/apps/storefront/src/content/patterns/inputs/inputs.mdx
@@ -3,15 +3,16 @@ title: Inputs
mode: publish
---
-**Inputs are fields or menus that allow the user to write custom input or make a selection out of predefined choices.**
-
----
+Inputs are fields or menus that allow the user to write custom input or make a selection out of predefined choices.
## Menu
A menu (also known as a dropdown) displays a list of choices on temporary surfaces allowing the user make one or multiple selections. The elements needed to create a menu in Figma are the `menu container` and `menu items`. An interaction with an icon, button or other control is needed for the menu to appear. Menus should be easily scannable, easy to interact with and suited to the user's needs.
-
+
### Multiselect dropdown menu
@@ -25,4 +26,7 @@ Watch the short video below to learn how to make a multiselect dropdown menu. Al
Contextual menus appear next to where a user right clicks. The menu displays a set of actions related to the object that has been selected, based on the application's current state.
-
+
diff --git a/apps/storefront/src/images/icon.png b/apps/storefront/src/images/icon.png
new file mode 100755
index 0000000000..178a449ddb
Binary files /dev/null and b/apps/storefront/src/images/icon.png differ
diff --git a/apps/storefront/src/templates/page.jsx b/apps/storefront/src/templates/page.jsx
index d3e9c859c6..78c9151784 100644
--- a/apps/storefront/src/templates/page.jsx
+++ b/apps/storefront/src/templates/page.jsx
@@ -1,82 +1,197 @@
+/* eslint-disable react/jsx-pascal-case */
import React from 'react'
import PropTypes from 'prop-types'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import { graphql, Link } from 'gatsby'
import classNames from 'classnames'
+import { Icon, TableOfContents, Typography } from '@equinor/eds-core-react'
import Layout from '../components/layout'
+import SEO from '../components/seo'
+import { H1 } from '../components/Titles'
+
+import {
+ save,
+ thumbs_down,
+ info_circle,
+ subdirectory_arrow_right,
+ download,
+} from '@equinor/eds-icons'
+import { slugify } from '../utils/'
+import styled from 'styled-components'
+
+Icon.add({ save, thumbs_down, info_circle, subdirectory_arrow_right, download })
+
+const { LinkItem } = TableOfContents
+
+const StyledTableOfContents = styled(TableOfContents)`
+ position: static;
+ margin: 3rem 2rem 0 2rem;
+ box-sizing: content-box;
+ @media (min-width: 1200px) {
+ float: right;
+ position: sticky !important;
+ top: 80px !important;
+ display: inline-block;
+ }
+`
+
+const Wrapper = styled.div`
+ max-width: 65rem;
+`
+
+const ContentHeader = styled.div`
+ background: #f7f7f7;
+ padding: ${({ withTabs }) => (withTabs ? '2rem 2rem 0 2rem' : '2rem')};
+ display: grid;
+ align-content: space-between
+ min-height: 10rem;
+ @media (min-width: 600px) {
+ height: 10rem;
+ }
+`
+
+const Content = styled.div`
+ background: white;
+ padding: 3rem 2rem;
+
+ & > h2,
+ & > h3,
+ & > h4,
+ & > h5,
+ & > h6,
+ & > p,
+ & > ul,
+ & > ol,
+ & > blockquote {
+ max-width: 39rem;
+ }
+ h2 + p,
+ h3 + p,
+ h4 + p,
+ h5 + p,
+ h6 + p,
+ p:first-child {
+ margin-top: 0;
+ }
+`
+
+const LandingPage = styled.div``
const Page = ({ data }) => {
const page = data.mdx
- const { tabs, title, mode = 'draft' } = page.frontmatter
+ const {
+ tabs,
+ title,
+ toc,
+ mode = 'draft',
+ type = 'contentPage',
+ } = page.frontmatter
const { slug } = page.fields
const { currentPage } = page.fields
- const { currentCategory } = page.fields
const linkSlug = slug.substr(0, slug.lastIndexOf(currentPage))
-
+ const withTabs = tabs !== null
const isPublished = (mode || '').toLowerCase() === 'publish'
-
+ const isContentPage = type !== 'landingPage'
return (
-