@bonniernews/dn-design-system-web 15.2.3 → 15.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/components/badge/README-UXD.md +24 -24
- package/components/button-toggle/README-UXD.md +35 -35
- package/components/group-header/README-UXD.md +24 -24
- package/components/icon-button/README-UXD.md +44 -44
- package/components/list-item/README-UXD.md +38 -38
- package/components/pictogram/README-UXD.md +34 -34
- package/components/text-button/README-UXD.md +28 -28
- package/components/tooltip/README-UXD.md +39 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,21 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
## [15.2.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.4...@bonniernews/dn-design-system-web@15.2.5) (2024-05-13)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Maintenance
|
|
11
|
+
|
|
12
|
+
* **deps:** remove Axians and Mellerud from allowed IP:s ([#1297](https://github.com/BonnierNews/dn-design-system/issues/1297)) ([7d93341](https://github.com/BonnierNews/dn-design-system/commit/7d93341ae91733fd77d1b10e8184fcefc1cc2372))
|
|
13
|
+
* **web:** update README-UXD.md ([#1300](https://github.com/BonnierNews/dn-design-system/issues/1300)) ([0fbbef2](https://github.com/BonnierNews/dn-design-system/commit/0fbbef22242e989498ffd7341b3bfe46dc5d18fc))
|
|
14
|
+
|
|
15
|
+
## [15.2.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.3...@bonniernews/dn-design-system-web@15.2.4) (2024-05-07)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Maintenance
|
|
19
|
+
|
|
20
|
+
* **web:** fix uxd readme images ([#1296](https://github.com/BonnierNews/dn-design-system/issues/1296)) ([d143a28](https://github.com/BonnierNews/dn-design-system/commit/d143a28e1a27d8bd28190e8553e7b28baab7bbd4))
|
|
21
|
+
|
|
7
22
|
## [15.2.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.2...@bonniernews/dn-design-system-web@15.2.3) (2024-05-07)
|
|
8
23
|
|
|
9
24
|
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
# Notification Bubble
|
|
2
|
-
|
|
3
|
-
## Anatomy
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
- **Digit:** The numerical value displayed inside the bubble, representing the count of new messages or notifications.
|
|
8
|
-
- **Background:** The colored area surrounding the digit, providing visual emphasis and indicating the urgency or importance of the notification.
|
|
9
|
-
- **Outline:** The border around the background, providing visual separation from surrounding elements and enhancing the bubble's visibility.
|
|
10
|
-
|
|
11
|
-
## Variant Properties
|
|
12
|
-
|
|
13
|
-
| Variant | Description |
|
|
14
|
-
| --------- | ----------------------------------------------------------------------- |
|
|
15
|
-
| Primary | Used for important notifications or updates. |
|
|
16
|
-
| Secondary | Used for less important notifications or updates. |
|
|
17
|
-
|
|
18
|
-
## Digit Properties
|
|
19
|
-
|
|
20
|
-
| Amount | Description |
|
|
21
|
-
| ---------- | ----------------------------------------------------------------------- |
|
|
22
|
-
| None | No numerical value displayed, indicating no new notifications. |
|
|
23
|
-
| Single Digit | Indicates a count of new messages or notifications less than 9. |
|
|
24
|
-
| 9+ | Indicates a count of new messages or notifications greater than 9. |
|
|
1
|
+
# Notification Bubble
|
|
2
|
+
|
|
3
|
+
## Anatomy
|
|
4
|
+
|
|
5
|
+
<img src="/images/uxd/badge.png">
|
|
6
|
+
|
|
7
|
+
- **Digit:** The numerical value displayed inside the bubble, representing the count of new messages or notifications.
|
|
8
|
+
- **Background:** The colored area surrounding the digit, providing visual emphasis and indicating the urgency or importance of the notification.
|
|
9
|
+
- **Outline:** The border around the background, providing visual separation from surrounding elements and enhancing the bubble's visibility.
|
|
10
|
+
|
|
11
|
+
## Variant Properties
|
|
12
|
+
|
|
13
|
+
| Variant | Description |
|
|
14
|
+
| --------- | ----------------------------------------------------------------------- |
|
|
15
|
+
| Primary | Used for important notifications or updates. |
|
|
16
|
+
| Secondary | Used for less important notifications or updates. |
|
|
17
|
+
|
|
18
|
+
## Digit Properties
|
|
19
|
+
|
|
20
|
+
| Amount | Description |
|
|
21
|
+
| ---------- | ----------------------------------------------------------------------- |
|
|
22
|
+
| None | No numerical value displayed, indicating no new notifications. |
|
|
23
|
+
| Single Digit | Indicates a count of new messages or notifications less than 9. |
|
|
24
|
+
| 9+ | Indicates a count of new messages or notifications greater than 9. |
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
# Toggle Button
|
|
2
|
-
|
|
3
|
-
A toggle is used to quickly switch between two possible states. They are commonly used for "on/off" switches.
|
|
4
|
-
|
|
5
|
-
## Anatomy
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
- **Label:** The text displayed on the button, indicating its function.
|
|
11
|
-
- **Toggle Icon:** The visual indicator representing the active state.
|
|
12
|
-
- **Background:** The background area that encompasses the toggle button, providing visual context and affordance.
|
|
13
|
-
- **Border:** The outline surrounding the button, providing visual separation from surrounding elements.
|
|
14
|
-
|
|
15
|
-
## Variants
|
|
16
|
-
|
|
17
|
-
| Variant | How to use |
|
|
18
|
-
| --------- | -------------------------------------------------------------------------------------------------- |
|
|
19
|
-
| Brand | Brand toggle button is used if it's the primary action in a view. I.e. "Follow" on a subject page. |
|
|
20
|
-
| Primary | Not used at the moment. |
|
|
21
|
-
| Secondary | Secondary toggle buttons are used if we have several toggle buttons in a view. |
|
|
22
|
-
|
|
23
|
-
## Usage
|
|
24
|
-
|
|
25
|
-
A toggle is used to quickly switch between two possible states. They are commonly used for "on/off" switches.
|
|
26
|
-
|
|
27
|
-
### Dos
|
|
28
|
-
|
|
29
|
-
- **"On" state refers to the task as completed:** The off label should explain what happens when the toggle is on, i.e. "Follow" - and the on label confirms that the task is done, i.e. "Following".
|
|
30
|
-
- **Pair with other visual cues:** Make sure that it's clear what task the toggle refers to. Typically the button is placed in a list item or next to a subject label.
|
|
31
|
-
|
|
32
|
-
### Don'ts
|
|
33
|
-
|
|
34
|
-
- **Avoid using an On label that refers to the off state:** Don't use a negative copy for call to action, i.e. "Stop following". Instead use the on label to inform of the current state, i.e. "Following".
|
|
35
|
-
- **Overuse of Brand or Primary Toggle Buttons:** If there are several toggle buttons in one view they are all equally important, so don't use high emphasis buttons at all in that case.
|
|
1
|
+
# Toggle Button
|
|
2
|
+
|
|
3
|
+
A toggle is used to quickly switch between two possible states. They are commonly used for "on/off" switches.
|
|
4
|
+
|
|
5
|
+
## Anatomy
|
|
6
|
+
|
|
7
|
+
<img src="/images/uxd/toggle-button.png">
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
- **Label:** The text displayed on the button, indicating its function.
|
|
11
|
+
- **Toggle Icon:** The visual indicator representing the active state.
|
|
12
|
+
- **Background:** The background area that encompasses the toggle button, providing visual context and affordance.
|
|
13
|
+
- **Border:** The outline surrounding the button, providing visual separation from surrounding elements.
|
|
14
|
+
|
|
15
|
+
## Variants
|
|
16
|
+
|
|
17
|
+
| Variant | How to use |
|
|
18
|
+
| --------- | -------------------------------------------------------------------------------------------------- |
|
|
19
|
+
| Brand | Brand toggle button is used if it's the primary action in a view. I.e. "Follow" on a subject page. |
|
|
20
|
+
| Primary | Not used at the moment. |
|
|
21
|
+
| Secondary | Secondary toggle buttons are used if we have several toggle buttons in a view. |
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
A toggle is used to quickly switch between two possible states. They are commonly used for "on/off" switches.
|
|
26
|
+
|
|
27
|
+
### Dos
|
|
28
|
+
|
|
29
|
+
- **"On" state refers to the task as completed:** The off label should explain what happens when the toggle is on, i.e. "Follow" - and the on label confirms that the task is done, i.e. "Following".
|
|
30
|
+
- **Pair with other visual cues:** Make sure that it's clear what task the toggle refers to. Typically the button is placed in a list item or next to a subject label.
|
|
31
|
+
|
|
32
|
+
### Don'ts
|
|
33
|
+
|
|
34
|
+
- **Avoid using an On label that refers to the off state:** Don't use a negative copy for call to action, i.e. "Stop following". Instead use the on label to inform of the current state, i.e. "Following".
|
|
35
|
+
- **Overuse of Brand or Primary Toggle Buttons:** If there are several toggle buttons in one view they are all equally important, so don't use high emphasis buttons at all in that case.
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
# Group Header
|
|
2
|
-
|
|
3
|
-
## Anatomy
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
- **Label:** A text label that provides a brief description or title for the grouped content.
|
|
8
|
-
- **Image:** An optional visual representation or thumbnail accompanying the label, providing additional context or visual appeal.
|
|
9
|
-
- **Trailing Element:** A customizable element positioned at the end of the header, which can include an icon, a link, a toggle button, or swipe icon buttons, providing supplementary actions.
|
|
10
|
-
- **Divider:** A visual divider to visualize where the header stops and the grouped content starts.
|
|
11
|
-
|
|
12
|
-
## Usage
|
|
13
|
-
|
|
14
|
-
The group header is designed to frame and organize a group of other components, such as list items, puffar, or a grid list.
|
|
15
|
-
|
|
16
|
-
### Dos
|
|
17
|
-
|
|
18
|
-
- **Provide Clear and Descriptive Labels:** Ensure that the label accurately describes the content or purpose of the grouped elements, enhancing clarity and usability.
|
|
19
|
-
- **Use Visuals Wisely:** Incorporate images judiciously to provide additional context or visual interest, but avoid overcrowding the header with excessive visuals that may distract from the label.
|
|
20
|
-
- **Customize Trailing Elements Appropriately:** Utilize trailing elements such as icons, links, toggle buttons, or swipe icon buttons to enhance functionality or provide relevant actions related to the grouped content.
|
|
21
|
-
|
|
22
|
-
### Don'ts
|
|
23
|
-
|
|
24
|
-
- **Never use a group header to frame a single component.**
|
|
1
|
+
# Group Header
|
|
2
|
+
|
|
3
|
+
## Anatomy
|
|
4
|
+
|
|
5
|
+
<img src="/images/uxd/group-header.png">
|
|
6
|
+
|
|
7
|
+
- **Label:** A text label that provides a brief description or title for the grouped content.
|
|
8
|
+
- **Image:** An optional visual representation or thumbnail accompanying the label, providing additional context or visual appeal.
|
|
9
|
+
- **Trailing Element:** A customizable element positioned at the end of the header, which can include an icon, a link, a toggle button, or swipe icon buttons, providing supplementary actions.
|
|
10
|
+
- **Divider:** A visual divider to visualize where the header stops and the grouped content starts.
|
|
11
|
+
|
|
12
|
+
## Usage
|
|
13
|
+
|
|
14
|
+
The group header is designed to frame and organize a group of other components, such as list items, puffar, or a grid list.
|
|
15
|
+
|
|
16
|
+
### Dos
|
|
17
|
+
|
|
18
|
+
- **Provide Clear and Descriptive Labels:** Ensure that the label accurately describes the content or purpose of the grouped elements, enhancing clarity and usability.
|
|
19
|
+
- **Use Visuals Wisely:** Incorporate images judiciously to provide additional context or visual interest, but avoid overcrowding the header with excessive visuals that may distract from the label.
|
|
20
|
+
- **Customize Trailing Elements Appropriately:** Utilize trailing elements such as icons, links, toggle buttons, or swipe icon buttons to enhance functionality or provide relevant actions related to the grouped content.
|
|
21
|
+
|
|
22
|
+
### Don'ts
|
|
23
|
+
|
|
24
|
+
- **Never use a group header to frame a single component.**
|
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
# Icon Button
|
|
2
|
-
|
|
3
|
-
An icon-only button lets people take a common and recognizable action where space is limited.
|
|
4
|
-
|
|
5
|
-
## Anatomy
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
- **Icon:** The visual representation of an object, action, or concept, usually depicted in a simplified and recognizable form. See [Icon component](https://designsystem.dn.se/?path=/docs/foundations-icons--docs).
|
|
10
|
-
- **Background:** The background area that encompasses the toggle button, providing visual context and affordance.
|
|
11
|
-
- **Border:** The outline surrounding the button, providing visual separation from surrounding elements.
|
|
12
|
-
- **Shape:** The standard shape is circular but the component also supports a rectangular format.
|
|
13
|
-
|
|
14
|
-
## Variants
|
|
15
|
-
|
|
16
|
-
| Variant | How to use |
|
|
17
|
-
| -------------- | -------------------------------------------------------------------------------------------------- |
|
|
18
|
-
| Brand | Not used at the moment. |
|
|
19
|
-
| Primary | Primary icon buttons are used for key actions or primary functions within a context, providing visual emphasis. |
|
|
20
|
-
| Secondary | Secondary icon buttons denote lesser actions or supplementary functions, serving as supporting elements within the interface. |
|
|
21
|
-
| Static White | Static white icon button is used if the button should have a white background regardless of light/dark theme. |
|
|
22
|
-
|
|
23
|
-
## Emphasis Styles
|
|
24
|
-
|
|
25
|
-
| Style | Description |
|
|
26
|
-
| ----------- | --------------------------------------------------------------------------------------------- |
|
|
27
|
-
| Elevated | Elevated icon buttons have a raised appearance, indicating prominence or importance within the interface. |
|
|
28
|
-
| Default | Default icon buttons maintain a standard appearance, blending seamlessly with the surrounding content. |
|
|
29
|
-
| Outline | Outline icon buttons have a minimalistic outline appearance, providing visual contrast against the background. |
|
|
30
|
-
| Transparent | Transparent icon buttons have no visible background, seamlessly integrating with any background color or pattern. |
|
|
31
|
-
|
|
32
|
-
## Usage
|
|
33
|
-
|
|
34
|
-
An icon-only button lets people take a common and recognizable action where space is limited.
|
|
35
|
-
|
|
36
|
-
### Dos
|
|
37
|
-
|
|
38
|
-
- **Only use conventional icon buttons:** Since the icon is the only cue it's important that the user recognize the call to action. Typical icon buttons are save, share, print, or next/previous in a slideshow.
|
|
39
|
-
- **Consider Button Emphasis:** Choose the appropriate emphasis style (elevated, default, outline, or transparent) based on the context and background.
|
|
40
|
-
|
|
41
|
-
### Don'ts
|
|
42
|
-
|
|
43
|
-
- **Avoid Overloading Icon Buttons:** Refrain from overloading icon buttons with excessive icons or functionalities, as this can reduce clarity and usability.
|
|
44
|
-
- **Unconventional use:** Use icon button variants appropriately, avoiding the use of unambiguous icons.
|
|
1
|
+
# Icon Button
|
|
2
|
+
|
|
3
|
+
An icon-only button lets people take a common and recognizable action where space is limited.
|
|
4
|
+
|
|
5
|
+
## Anatomy
|
|
6
|
+
|
|
7
|
+
<img src="/images/uxd/icon-button.png">
|
|
8
|
+
|
|
9
|
+
- **Icon:** The visual representation of an object, action, or concept, usually depicted in a simplified and recognizable form. See [Icon component](https://designsystem.dn.se/?path=/docs/foundations-icons--docs).
|
|
10
|
+
- **Background:** The background area that encompasses the toggle button, providing visual context and affordance.
|
|
11
|
+
- **Border:** The outline surrounding the button, providing visual separation from surrounding elements.
|
|
12
|
+
- **Shape:** The standard shape is circular but the component also supports a rectangular format.
|
|
13
|
+
|
|
14
|
+
## Variants
|
|
15
|
+
|
|
16
|
+
| Variant | How to use |
|
|
17
|
+
| -------------- | -------------------------------------------------------------------------------------------------- |
|
|
18
|
+
| Brand | Not used at the moment. |
|
|
19
|
+
| Primary | Primary icon buttons are used for key actions or primary functions within a context, providing visual emphasis. |
|
|
20
|
+
| Secondary | Secondary icon buttons denote lesser actions or supplementary functions, serving as supporting elements within the interface. |
|
|
21
|
+
| Static White | Static white icon button is used if the button should have a white background regardless of light/dark theme. |
|
|
22
|
+
|
|
23
|
+
## Emphasis Styles
|
|
24
|
+
|
|
25
|
+
| Style | Description |
|
|
26
|
+
| ----------- | --------------------------------------------------------------------------------------------- |
|
|
27
|
+
| Elevated | Elevated icon buttons have a raised appearance, indicating prominence or importance within the interface. |
|
|
28
|
+
| Default | Default icon buttons maintain a standard appearance, blending seamlessly with the surrounding content. |
|
|
29
|
+
| Outline | Outline icon buttons have a minimalistic outline appearance, providing visual contrast against the background. |
|
|
30
|
+
| Transparent | Transparent icon buttons have no visible background, seamlessly integrating with any background color or pattern. |
|
|
31
|
+
|
|
32
|
+
## Usage
|
|
33
|
+
|
|
34
|
+
An icon-only button lets people take a common and recognizable action where space is limited.
|
|
35
|
+
|
|
36
|
+
### Dos
|
|
37
|
+
|
|
38
|
+
- **Only use conventional icon buttons:** Since the icon is the only cue it's important that the user recognize the call to action. Typical icon buttons are save, share, print, or next/previous in a slideshow.
|
|
39
|
+
- **Consider Button Emphasis:** Choose the appropriate emphasis style (elevated, default, outline, or transparent) based on the context and background.
|
|
40
|
+
|
|
41
|
+
### Don'ts
|
|
42
|
+
|
|
43
|
+
- **Avoid Overloading Icon Buttons:** Refrain from overloading icon buttons with excessive icons or functionalities, as this can reduce clarity and usability.
|
|
44
|
+
- **Unconventional use:** Use icon button variants appropriately, avoiding the use of unambiguous icons.
|
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
# List Item
|
|
2
|
-
|
|
3
|
-
## Anatomy
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
- **Title:** The primary content of the list item, providing a brief description or label. Titles can have various font weights including regular, semibold, or bold.
|
|
8
|
-
- **Subtitle:** Additional information accompanying the title (optional).
|
|
9
|
-
- **Expanded Content:** Additional content that can be toggled or expanded upon user interaction, such as text paragraphs.
|
|
10
|
-
- **Leading Element:** An optional element positioned at the beginning of the list item, which can include radio buttons, checkboxes, icons, or images.
|
|
11
|
-
- **Trailing Element:** An optional element positioned at the end of the list item, providing supplementary information or actions. This can include meta text, toggle switches, toggle buttons, or icons.
|
|
12
|
-
|
|
13
|
-
## Variants
|
|
14
|
-
|
|
15
|
-
| Variant | Description |
|
|
16
|
-
| ----------| ----------------------------------------------------------------------------------------------- |
|
|
17
|
-
| Standard | Standard list items are basic and versatile, suitable for displaying simple text-based content. |
|
|
18
|
-
| Accordion | Accordion list items allow for collapsible sections, enabling users to expand or collapse additional content. |
|
|
19
|
-
| Byline | Byline list items are used to present the contributing journalist in a text. |
|
|
20
|
-
| Image | Image list items feature visual imagery, ideal for showcasing images or thumbnails. |
|
|
21
|
-
| Switch | Switch list items incorporate toggle switches as trailing elements, allowing users to toggle a setting or option. |
|
|
22
|
-
| Radio | Radio list items utilize radio buttons as leading elements, enabling users to select a single option from a list. |
|
|
23
|
-
| Checkbox | Checkbox list items feature checkboxes as leading elements, allowing users to select multiple options from a list. |
|
|
24
|
-
| Toggle | Toggle list items include toggle buttons as trailing elements, providing users with on/off functionality for specific actions or settings. |
|
|
25
|
-
|
|
26
|
-
## Usage
|
|
27
|
-
|
|
28
|
-
Proper utilization of list item variants ensures clarity and consistency throughout the user interface. Here are some guidelines to follow:
|
|
29
|
-
|
|
30
|
-
### Dos
|
|
31
|
-
|
|
32
|
-
- **Provide Clear and Concise Titles:** Ensure list item titles are descriptive and short so they are easy to scan.
|
|
33
|
-
- **Use Leading and Trailing Elements Purposefully:** Incorporate leading and trailing elements wisely to enhance usability and convey additional information or actions.
|
|
34
|
-
- **Order list items in logical ways:** Arrange items alphabetically, numerically, or by function to facilitate user understanding.
|
|
35
|
-
|
|
36
|
-
### Don'ts
|
|
37
|
-
|
|
38
|
-
- **Overcomplicate List Items:** Avoid overloading list items with excessive content or functionality, which can lead to cluttered interfaces and confusion.
|
|
1
|
+
# List Item
|
|
2
|
+
|
|
3
|
+
## Anatomy
|
|
4
|
+
|
|
5
|
+
<img src="/images/uxd/list-item.png">
|
|
6
|
+
|
|
7
|
+
- **Title:** The primary content of the list item, providing a brief description or label. Titles can have various font weights including regular, semibold, or bold.
|
|
8
|
+
- **Subtitle:** Additional information accompanying the title (optional).
|
|
9
|
+
- **Expanded Content:** Additional content that can be toggled or expanded upon user interaction, such as text paragraphs.
|
|
10
|
+
- **Leading Element:** An optional element positioned at the beginning of the list item, which can include radio buttons, checkboxes, icons, or images.
|
|
11
|
+
- **Trailing Element:** An optional element positioned at the end of the list item, providing supplementary information or actions. This can include meta text, toggle switches, toggle buttons, or icons.
|
|
12
|
+
|
|
13
|
+
## Variants
|
|
14
|
+
|
|
15
|
+
| Variant | Description |
|
|
16
|
+
| ----------| ----------------------------------------------------------------------------------------------- |
|
|
17
|
+
| Standard | Standard list items are basic and versatile, suitable for displaying simple text-based content. |
|
|
18
|
+
| Accordion | Accordion list items allow for collapsible sections, enabling users to expand or collapse additional content. |
|
|
19
|
+
| Byline | Byline list items are used to present the contributing journalist in a text. |
|
|
20
|
+
| Image | Image list items feature visual imagery, ideal for showcasing images or thumbnails. |
|
|
21
|
+
| Switch | Switch list items incorporate toggle switches as trailing elements, allowing users to toggle a setting or option. |
|
|
22
|
+
| Radio | Radio list items utilize radio buttons as leading elements, enabling users to select a single option from a list. |
|
|
23
|
+
| Checkbox | Checkbox list items feature checkboxes as leading elements, allowing users to select multiple options from a list. |
|
|
24
|
+
| Toggle | Toggle list items include toggle buttons as trailing elements, providing users with on/off functionality for specific actions or settings. |
|
|
25
|
+
|
|
26
|
+
## Usage
|
|
27
|
+
|
|
28
|
+
Proper utilization of list item variants ensures clarity and consistency throughout the user interface. Here are some guidelines to follow:
|
|
29
|
+
|
|
30
|
+
### Dos
|
|
31
|
+
|
|
32
|
+
- **Provide Clear and Concise Titles:** Ensure list item titles are descriptive and short so they are easy to scan.
|
|
33
|
+
- **Use Leading and Trailing Elements Purposefully:** Incorporate leading and trailing elements wisely to enhance usability and convey additional information or actions.
|
|
34
|
+
- **Order list items in logical ways:** Arrange items alphabetically, numerically, or by function to facilitate user understanding.
|
|
35
|
+
|
|
36
|
+
### Don'ts
|
|
37
|
+
|
|
38
|
+
- **Overcomplicate List Items:** Avoid overloading list items with excessive content or functionality, which can lead to cluttered interfaces and confusion.
|
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
# Pictogram
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
## Anatomy
|
|
5
|
-
|
|
6
|
-
<img width="40"
|
|
7
|
-
|
|
8
|
-
- **Icon:** The graphical representation of the action, object, or concept.
|
|
9
|
-
- **Background:** The area surrounding the icon, providing visual context or emphasis.
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
## Properties
|
|
13
|
-
|
|
14
|
-
| Color (background) | Description |
|
|
15
|
-
| -------- | ------------------------------------- |
|
|
16
|
-
| Brand | Used for icons representing brand-specific actions or concepts |
|
|
17
|
-
| Business | Used for icons representing business-related actions or concepts, i.e. in a conversion flow |
|
|
18
|
-
|
|
19
|
-
## Usage
|
|
20
|
-
|
|
21
|
-
The pictogram component is used to display graphical icons or symbols that represent specific actions, objects, or concepts within a user interface. A typical use case would be an empty state view.
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
## Dos
|
|
25
|
-
|
|
26
|
-
- **Choose Clear and Recognizable Icons:** Select icons that are easily recognizable and intuitive for users to understand.
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
## Don'ts
|
|
30
|
-
|
|
31
|
-
- **Avoid Cluttered Designs:** Avoid using pictograms when there are a lot of other visual elements in a view.
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
1
|
+
# Pictogram
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
## Anatomy
|
|
5
|
+
|
|
6
|
+
<img width="40" src="/images/uxd/pictogram.png">
|
|
7
|
+
|
|
8
|
+
- **Icon:** The graphical representation of the action, object, or concept.
|
|
9
|
+
- **Background:** The area surrounding the icon, providing visual context or emphasis.
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
## Properties
|
|
13
|
+
|
|
14
|
+
| Color (background) | Description |
|
|
15
|
+
| -------- | ------------------------------------- |
|
|
16
|
+
| Brand | Used for icons representing brand-specific actions or concepts |
|
|
17
|
+
| Business | Used for icons representing business-related actions or concepts, i.e. in a conversion flow |
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
The pictogram component is used to display graphical icons or symbols that represent specific actions, objects, or concepts within a user interface. A typical use case would be an empty state view.
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
## Dos
|
|
25
|
+
|
|
26
|
+
- **Choose Clear and Recognizable Icons:** Select icons that are easily recognizable and intuitive for users to understand.
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
## Don'ts
|
|
30
|
+
|
|
31
|
+
- **Avoid Cluttered Designs:** Avoid using pictograms when there are a lot of other visual elements in a view.
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
# Text Button
|
|
2
|
-
|
|
3
|
-
## Anatomy
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
A text button typically comprises the following elements:
|
|
8
|
-
- **Label:** The visible text displayed on the button, indicating its function or action.
|
|
9
|
-
- **Leading Icon:** An optional icon positioned before the label, providing additional context or visual cues.
|
|
10
|
-
- **Trailing Icon:** An optional icon positioned after the label, indicating supplementary actions or functionality.
|
|
11
|
-
- **Notification Bubble:** An optional indicator placed on the button, typically denoting unread messages or notifications.
|
|
12
|
-
|
|
13
|
-
## Usage
|
|
14
|
-
|
|
15
|
-
Text buttons are ideal for scenarios where a more subtle, link-like appearance is desired while still maintaining interactive affordance. Here are some usage guidelines:
|
|
16
|
-
|
|
17
|
-
### Dos
|
|
18
|
-
|
|
19
|
-
- **Use for Non-Destructive Actions:** Employ text buttons for actions that are non-destructive or have minimal impact, such as navigation or secondary actions.
|
|
20
|
-
- **Provide Clear Labels:** Ensure button labels are concise and descriptive, clearly indicating the action or function they perform.
|
|
21
|
-
- **Consider Icon Usage:** Utilize leading and trailing icons judiciously to enhance usability and provide additional context to button actions.
|
|
22
|
-
- **Include Notification Bubbles Sparingly:** If using notification bubbles, do so sparingly and only for relevant actions or updates.
|
|
23
|
-
|
|
24
|
-
### Don'ts
|
|
25
|
-
|
|
26
|
-
- **Avoid Ambiguous Labels:** Refrain from using vague or ambiguous labels that may confuse users about the button's function.
|
|
27
|
-
- **Overuse of Icons:** Avoid overloading text buttons with excessive icons, as this can clutter the interface and reduce clarity.
|
|
28
|
-
- **Excessive Notification Bubble Usage:** Avoid cluttering the interface with too many notification bubbles, as this can distract users and diminish their effectiveness.
|
|
1
|
+
# Text Button
|
|
2
|
+
|
|
3
|
+
## Anatomy
|
|
4
|
+
|
|
5
|
+
<img src="/images/uxd/text-button.png">
|
|
6
|
+
|
|
7
|
+
A text button typically comprises the following elements:
|
|
8
|
+
- **Label:** The visible text displayed on the button, indicating its function or action.
|
|
9
|
+
- **Leading Icon:** An optional icon positioned before the label, providing additional context or visual cues.
|
|
10
|
+
- **Trailing Icon:** An optional icon positioned after the label, indicating supplementary actions or functionality.
|
|
11
|
+
- **Notification Bubble:** An optional indicator placed on the button, typically denoting unread messages or notifications.
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
Text buttons are ideal for scenarios where a more subtle, link-like appearance is desired while still maintaining interactive affordance. Here are some usage guidelines:
|
|
16
|
+
|
|
17
|
+
### Dos
|
|
18
|
+
|
|
19
|
+
- **Use for Non-Destructive Actions:** Employ text buttons for actions that are non-destructive or have minimal impact, such as navigation or secondary actions.
|
|
20
|
+
- **Provide Clear Labels:** Ensure button labels are concise and descriptive, clearly indicating the action or function they perform.
|
|
21
|
+
- **Consider Icon Usage:** Utilize leading and trailing icons judiciously to enhance usability and provide additional context to button actions.
|
|
22
|
+
- **Include Notification Bubbles Sparingly:** If using notification bubbles, do so sparingly and only for relevant actions or updates.
|
|
23
|
+
|
|
24
|
+
### Don'ts
|
|
25
|
+
|
|
26
|
+
- **Avoid Ambiguous Labels:** Refrain from using vague or ambiguous labels that may confuse users about the button's function.
|
|
27
|
+
- **Overuse of Icons:** Avoid overloading text buttons with excessive icons, as this can clutter the interface and reduce clarity.
|
|
28
|
+
- **Excessive Notification Bubble Usage:** Avoid cluttering the interface with too many notification bubbles, as this can distract users and diminish their effectiveness.
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# Tooltip
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Default Variant Anatomy
|
|
5
|
+
|
|
6
|
+
- **Badge:** An optional visual indicator or label displayed at the top of the tooltip.
|
|
7
|
+
- **Title:** The main title or heading of the tooltip, providing a brief description or summary.
|
|
8
|
+
- **Body Text:** Additional text content providing detailed information or instructions.
|
|
9
|
+
- **Close Icon Button:** An icon button allowing users to close or dismiss the tooltip.
|
|
10
|
+
|
|
11
|
+
### Share Variant Anatomy
|
|
12
|
+
|
|
13
|
+
- **Badge:** An optional visual indicator or label displayed at the top of the tooltip.
|
|
14
|
+
- **Title:** The main title or heading of the tooltip, providing a brief description or summary.
|
|
15
|
+
- **Body:** Additional content providing information or instructions.
|
|
16
|
+
- **Share Icon Buttons:** Icon buttons allowing users to perform sharing actions.
|
|
17
|
+
- **Close Icon Button:** An icon button allowing users to close or dismiss the tooltip.
|
|
18
|
+
|
|
19
|
+
## How to Use
|
|
20
|
+
|
|
21
|
+
### Web
|
|
22
|
+
Associate tooltips with relevant elements or UI components using appropriate trigger mechanisms (e.g., hover, click).
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### App
|
|
26
|
+
- Utilize tooltips primarily for providing helpful hints or guidance, avoiding excessive use that may clutter the interface.
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
## Dos
|
|
30
|
+
|
|
31
|
+
- **Provide Clear and Concise Content:** Ensure tooltip content is brief, relevant, and easy to understand.
|
|
32
|
+
- **Use Appropriate Trigger Mechanisms:** Choose trigger mechanisms (e.g., hover, click) that align with user expectations and interaction patterns.
|
|
33
|
+
|
|
34
|
+
## Don'ts
|
|
35
|
+
|
|
36
|
+
- **Avoid Cluttering the Interface:** Refrain from overloading the interface with excessive tooltips, which may overwhelm users and hinder usability.
|
|
37
|
+
- **Don't Hide Essential Information:** Avoid using tooltips as a substitute for essential information or instructions that should be visible without interaction.
|
|
38
|
+
|
|
39
|
+
|
package/package.json
CHANGED