From 31bccfa88a636b31ec3bb01ae0ff5a2bc270f3b8 Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Fri, 8 Nov 2024 15:07:41 -0700 Subject: [PATCH 01/12] feat(pie-docs): DSW-2475 added images to toast docs --- .../assets/img/components/toast/anatomy.svg | 60 +++++ ...ehaviours-toast-with-close-icon-button.svg | 33 +++ .../behaviours-toast-with-dismiss-button.svg | 38 +++ .../img/components/toast/behaviours-toast.svg | 31 +++ .../components/toast/example-ltr-toast.svg | 49 ++++ .../components/toast/example-rtl-toast.svg | 43 ++++ .../toast/interactions-close-icon-button.svg | 34 +++ .../toast/interactions-dismiss-button.svg | 39 +++ .../components/toast/layout-ltr-position.svg | 77 ++++++ .../components/toast/layout-rtl-position.svg | 76 ++++++ .../components/toast/modifiers-actions-do.svg | 85 +++++++ .../toast/modifiers-actions-dont.svg | 47 ++++ .../components/toast/modifiers-icons-do.svg | 79 ++++++ .../components/toast/modifiers-icons-dont.svg | 35 +++ .../img/components/toast/modifiers-strong.svg | 196 +++++++++++++++ .../img/components/toast/modifiers-subtle.svg | 235 ++++++++++++++++++ .../assets/img/components/toast/overflow.svg | 78 ++++++ .../img/components/toast/sizes-height.svg | 49 ++++ .../img/components/toast/sizes-width.svg | 49 ++++ .../components/toast/variations-default.svg | 40 +++ .../toast/variations-multi-line.svg | 48 ++++ 21 files changed, 1421 insertions(+) create mode 100644 apps/pie-docs/src/assets/img/components/toast/anatomy.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/behaviours-toast-with-close-icon-button.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/behaviours-toast-with-dismiss-button.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/behaviours-toast.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/example-ltr-toast.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/example-rtl-toast.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/interactions-close-icon-button.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/interactions-dismiss-button.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/layout-ltr-position.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/layout-rtl-position.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/modifiers-actions-do.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/modifiers-actions-dont.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/modifiers-icons-do.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/modifiers-icons-dont.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/modifiers-strong.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/modifiers-subtle.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/overflow.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/sizes-height.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/sizes-width.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/variations-default.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/variations-multi-line.svg diff --git a/apps/pie-docs/src/assets/img/components/toast/anatomy.svg b/apps/pie-docs/src/assets/img/components/toast/anatomy.svg new file mode 100644 index 0000000000..dfa5f046c7 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/anatomy.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/behaviours-toast-with-close-icon-button.svg b/apps/pie-docs/src/assets/img/components/toast/behaviours-toast-with-close-icon-button.svg new file mode 100644 index 0000000000..f67178c8e1 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/behaviours-toast-with-close-icon-button.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/behaviours-toast-with-dismiss-button.svg b/apps/pie-docs/src/assets/img/components/toast/behaviours-toast-with-dismiss-button.svg new file mode 100644 index 0000000000..a497ac2e8d --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/behaviours-toast-with-dismiss-button.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/behaviours-toast.svg b/apps/pie-docs/src/assets/img/components/toast/behaviours-toast.svg new file mode 100644 index 0000000000..fd62645ae5 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/behaviours-toast.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/example-ltr-toast.svg b/apps/pie-docs/src/assets/img/components/toast/example-ltr-toast.svg new file mode 100644 index 0000000000..d93748e7a9 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/example-ltr-toast.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/example-rtl-toast.svg b/apps/pie-docs/src/assets/img/components/toast/example-rtl-toast.svg new file mode 100644 index 0000000000..fa1b91b0d6 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/example-rtl-toast.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/interactions-close-icon-button.svg b/apps/pie-docs/src/assets/img/components/toast/interactions-close-icon-button.svg new file mode 100644 index 0000000000..468c800815 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/interactions-close-icon-button.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/interactions-dismiss-button.svg b/apps/pie-docs/src/assets/img/components/toast/interactions-dismiss-button.svg new file mode 100644 index 0000000000..85184f5e31 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/interactions-dismiss-button.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/layout-ltr-position.svg b/apps/pie-docs/src/assets/img/components/toast/layout-ltr-position.svg new file mode 100644 index 0000000000..105f5482f9 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/layout-ltr-position.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/layout-rtl-position.svg b/apps/pie-docs/src/assets/img/components/toast/layout-rtl-position.svg new file mode 100644 index 0000000000..50b39f0e64 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/layout-rtl-position.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/modifiers-actions-do.svg b/apps/pie-docs/src/assets/img/components/toast/modifiers-actions-do.svg new file mode 100644 index 0000000000..10f94dacf4 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/modifiers-actions-do.svg @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/modifiers-actions-dont.svg b/apps/pie-docs/src/assets/img/components/toast/modifiers-actions-dont.svg new file mode 100644 index 0000000000..da97524209 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/modifiers-actions-dont.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/modifiers-icons-do.svg b/apps/pie-docs/src/assets/img/components/toast/modifiers-icons-do.svg new file mode 100644 index 0000000000..d1a3b966a5 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/modifiers-icons-do.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/modifiers-icons-dont.svg b/apps/pie-docs/src/assets/img/components/toast/modifiers-icons-dont.svg new file mode 100644 index 0000000000..85b2130f20 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/modifiers-icons-dont.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/modifiers-strong.svg b/apps/pie-docs/src/assets/img/components/toast/modifiers-strong.svg new file mode 100644 index 0000000000..bf224dc04e --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/modifiers-strong.svg @@ -0,0 +1,196 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/modifiers-subtle.svg b/apps/pie-docs/src/assets/img/components/toast/modifiers-subtle.svg new file mode 100644 index 0000000000..c8eda4970d --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/modifiers-subtle.svg @@ -0,0 +1,235 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/overflow.svg b/apps/pie-docs/src/assets/img/components/toast/overflow.svg new file mode 100644 index 0000000000..d90f3de822 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/overflow.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/sizes-height.svg b/apps/pie-docs/src/assets/img/components/toast/sizes-height.svg new file mode 100644 index 0000000000..96a19c8f4c --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/sizes-height.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/sizes-width.svg b/apps/pie-docs/src/assets/img/components/toast/sizes-width.svg new file mode 100644 index 0000000000..79e3fef8f9 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/sizes-width.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/variations-default.svg b/apps/pie-docs/src/assets/img/components/toast/variations-default.svg new file mode 100644 index 0000000000..77f336800d --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/variations-default.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/variations-multi-line.svg b/apps/pie-docs/src/assets/img/components/toast/variations-multi-line.svg new file mode 100644 index 0000000000..2c85c346f4 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/variations-multi-line.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From e89d2df9ee79b580c13792cc0c4d9a0a97c9d9a8 Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Fri, 8 Nov 2024 15:09:06 -0700 Subject: [PATCH 02/12] feat(pie-docs): DSW-2475 created overview page for toast in the docs --- .../assets/img/components/toast/overview.svg | 68 ++-- .../src/components/toast/overview/overview.md | 369 ++++++++++++++++++ .../toast/overview/priority-queue.json | 59 +++ apps/pie-docs/src/components/toast/toast.md | 25 +- yarn.lock | 58 +-- 5 files changed, 501 insertions(+), 78 deletions(-) create mode 100644 apps/pie-docs/src/components/toast/overview/overview.md create mode 100644 apps/pie-docs/src/components/toast/overview/priority-queue.json diff --git a/apps/pie-docs/src/assets/img/components/toast/overview.svg b/apps/pie-docs/src/assets/img/components/toast/overview.svg index 125f299fe6..bdd66b7eac 100644 --- a/apps/pie-docs/src/assets/img/components/toast/overview.svg +++ b/apps/pie-docs/src/assets/img/components/toast/overview.svg @@ -1,49 +1,65 @@ - + - - - + + + - - - - - - + + + + + + + + + + + + + + + + - + - + - + - - + + - + - - - + + + - + - - + + - - + + - - + + + + + + + + diff --git a/apps/pie-docs/src/components/toast/overview/overview.md b/apps/pie-docs/src/components/toast/overview/overview.md new file mode 100644 index 0000000000..587f152ce4 --- /dev/null +++ b/apps/pie-docs/src/components/toast/overview/overview.md @@ -0,0 +1,369 @@ +--- +eleventyNavigation: + key: Overview + parent: Toast + order: 1 +eleventyComputed: + priorityQueue: "{% include './priority-queue.json' %}" +shouldShowContents: true +permalink: components/toast/ +--- + +## Overview +Toasts are used to inform users about processes within a system. They can also provide contextual feedback. They appear temporarily at the bottom-left of the screen and disappear after a certain time period or when the user performs an action to remove them. + +{% contentPageImage { + src:"../../../assets/img/components/toast/overview.svg", + alt: "A toast placed at the bottom of the page." +} %} + +--- + +## Dos and Don’ts + +{% usage { + do: { + type: usageTypes.text, + items: [ + "Only one toast at a time.", + "Limit your message to 35 characters (abbr) for one line toast or 90 characters (abbr) for multi-line toast.", + "Be mindful of how often you trigger toasts.", + "Use for short messages that confirm an action taken by a user." + ] + }, + dont: { + type: usageTypes.text, + items: [ + "Interrupt the user experience.", + "Use a toast of critical information that user needs to action consider using a pop-alert instead.", + "Place the toast over any navigation." + ] + } +} %} + +--- + +## Anatomy + +{% contentPageImage { + src:"../../../assets/img/components/toast/anatomy.svg", + alt: "Anatomy of a toast.", + width: 426 +} %} + +{% list { + type: listTypes.ordered, + items: [ + "**Icon:** Leading icon that visually supports the label.", + "**Message:** Informs the user of the action they have performed", + "**Action (optional):** [Button](/components/button/) action to either dismiss the toast or to undo the action.", + "**Close (optional):** [Icon button](/components/icon-button/) to close the Toast." + ] +} %} + +--- +## Variations + +### Default + +A default one-line toast, this can be used with or without an icon or action. + +{% contentPageImage { + src:"../../../assets/img/components/toast/variations-default.svg", + alt: "A toast component on its default variation.", + width: 300 +} %} + +### Multi-line + +If you require additional text for your message, please use the multi-line component. Maximum of 3 lines. + +{% contentPageImage { + src:"../../../assets/img/components/toast/variations-multi-line.svg", + alt: "A toast component on its multi-line variation.", + width: 300 +} %} + +--- +## Modifiers + +### Strong + +To create a stronger impact with your message, you can use strong variant. This uses colour to back-up your message + +{% contentPageImage { + src:"../../../assets/img/components/toast/modifiers-strong.svg", + alt: "Multiple toasts with strong modifier.", + width: 866 +} %} + +{% list { + type: listTypes.ordered, + items: [ + "**Info:** Providing contextual information about the progress of an action", + "**Warning:** Providing non-critical information about the progress of an action", + "**Success:** Providing positive information about the progress of an action", + "**Error:** Providing critical information about the progress of an action. Please review if Toast is correct to use it might be better to use a dialogue, notification or banner" + ] +} %} + +### Subtle + +To create a message with less prominence you can use the subtle variant. + +{% contentPageImage { + src:"../../../assets/img/components/toast/modifiers-subtle.svg", + alt: "Multiple toasts with strong modifier.", + width: 788 +} %} + +{% list { + type: listTypes.ordered, + items: [ + "**Info:** Providing contextual information about the progress of an action", + "**Warning:** Providing non-critical information about the progress of an action", + "**Success:** Providing positive information about the progress of an action", + "**Error:** Providing critical information about the progress of an action. Please review if Toast is correct to use it might be better to use a dialogue, notification or banner", + "**Neutral:** Providing critical information about the progress of an action. Please review if Toast is correct to use it might be better to use a dialogue, notification or banner" + ] +} %} + +### Icons + +When incorporating an icon into a Toast, it is essential to ensure that the icon clearly conveys the intended feedback. You should only use the icons built into the component and not use a different icon. + +{% usage { + do: { + type: usageTypes.image, + items: [{ + src: "../../../assets/img/components/toast/modifiers-icons-do.svg", + width: "456px", + alt: "Two toast components with close icon button" + }] + }, + dont: { + type: usageTypes.image, + items: [{ + src: "../../../assets/img/components/toast/modifiers-icons-dont.svg", + width: "280px", + alt: "A toast without close icon button nor dismiss button" + }] + } +} %} + +### Actions + +If you are using actions, only use the pre-built button in the toast. + +{% usage { + do: { + type: usageTypes.image, + items: [{ + src: "../../../assets/img/components/toast/modifiers-actions-do.svg", + width: "456px", + alt: "Two toast components with close icon button and dismiss button" + }] + }, + dont: { + type: usageTypes.image, + items: [{ + src: "../../../assets/img/components/toast/modifiers-actions-dont.svg", + width: "280px", + alt: "A toast with a wrong dismiss button variation" + }] + } +} %} + +--- +## Sizes + +### Height + +The toast has a minimum height of 48px when displaying one line of body copy, and it should not exceed 122px in height to accommodate up to three lines of multi-line body copy. + +{% contentPageImage { + src:"../../../assets/img/components/toast/sizes-height.svg", + alt: "A regular toast and a multi-line toast.", + width: 300 +} %} + +### Width + +The toast has a minimum width of 300px and a maximum width of 420px. + +{% contentPageImage { + src:"../../../assets/img/components/toast/sizes-width.svg", + alt: "A regular toast and a multi-line toast.", + width: 420 +} %} + +--- +## Overflow + +If the body copy extends beyond one line, it should automatically wrap to multiple lines. Yet, ensure that multi-line text is truncated to a maximum of three lines. For longer text content, consider utilising a pop-up component. + +{% contentPageImage { + src:"../../../assets/img/components/toast/overflow.svg", + alt: "A regular toast and a multi-line toast.", + width: 968 +} %} + +--- +## Priority queue + +Only one toast is displayed at a time. When toasts are consecutively or simultaneously triggered, their display order is defined by the priority queue. + +{% componentDetailsTable { + tableData: priorityQueue +} %} + +--- +## Behaviours + +### Auto-dismiss +By default the toast automatically disappears after 5 seconds. However, the user can manually dismiss the toast before the timer ends if a close option is present. Additionally, users can pause the auto-dismissal by hovering over the toast, with the timer resetting once the mouse moves away. + +{% contentLayout %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/toast/behaviours-toast.svg", + width: 300, + alt: "A toast without close icon button nor dismiss button." + } %} + {% endcontentItem %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/toast/behaviours-toast-with-close-icon-button.svg", + width: 300, + alt: "A toast without with a close icon button." + } %} + {% endcontentItem %} +{% endcontentLayout %} + +{% contentLayout %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/toast/behaviours-toast-with-dismiss-button.svg", + width: 300, + alt: "A toast without a dismiss button." + } %} + {% endcontentItem %} +{% endcontentLayout %} + +### Persistent + +If the toast includes a close icon button or button with a dismissing purpose, the toast can remain persistent until the user manually dismisses it using either of these actions. + +{% contentLayout %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/toast/behaviours-toast-with-close-icon-button.svg", + width: 300, + alt: "A toast without with a close icon button." + } %} + {% endcontentItem %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/toast/behaviours-toast-with-dismiss-button.svg", + width: 300, + alt: "A toast without a dismiss button." + } %} + {% endcontentItem %} +{% endcontentLayout %} + +--- +## Interactions + +If the toast includes a close option, the user can select either option to automatically dismiss the toast. + +{% contentLayout %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/toast/interactions-close-icon-button.svg", + width: 300, + alt: "A toast without with a close icon button." + } %} + {% endcontentItem %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/toast/interactions-dismiss-button.svg", + width: 300, + alt: "A toast without a dismiss button." + } %} + {% endcontentItem %} +{% endcontentLayout %} + +--- +## Layout + +### LTR position + +A toast should be located at the bottom left of the page’s content are; excluding any navigation. + +{% contentPageImage { + src:"../../../assets/img/components/toast/layout-ltr-position.svg", + alt: "A toast placed at the bottom of the page in LTR position." +} %} + +{% list { + type: listTypes.ordered, + items: [ + "**Wide:** 24px padding", + "**Narrow:** 16px padding" + ] +} %} + +### RTL position + +A toast should be located at the bottom right of the page’s content are; excluding any navigation. + +{% contentPageImage { + src:"../../../assets/img/components/toast/layout-rtl-position.svg", + alt: "A toast placed at the bottom of the page in RTL position." +} %} + +{% list { + type: listTypes.ordered, + items: [ + "**Wide:** 24px padding", + "**Narrow:** 16px padding" + ] +} %} + +--- + +## Examples + +### LTR examples + +Here are some examples of Toast in left-to-right context: + +{% contentPageImage { + src:"../../../assets/img/components/toast/example-ltr-toast.svg", + alt: "A Toast in left-to-right context.", + width: 272 +} %} + + +### RTL examples + +Here are some examples of Toast in right-to-left context: + +{% contentPageImage { + src:"../../../assets/img/components/toast/example-rtl-toast.svg", + alt: "A Toast in right-to-left context.", + width: 272 +} %} + +--- + +## Resources + +{% notification { + type: "warning", + message: "We’re currently working on updating our Toast documentation, please see the resources below." +} %} + +{% resourceTable { + componentName: 'Toast' +} %} \ No newline at end of file diff --git a/apps/pie-docs/src/components/toast/overview/priority-queue.json b/apps/pie-docs/src/components/toast/overview/priority-queue.json new file mode 100644 index 0000000000..cce86ac402 --- /dev/null +++ b/apps/pie-docs/src/components/toast/overview/priority-queue.json @@ -0,0 +1,59 @@ +{ + "headings": [ + "Priority", + "Variant", + "Behaviour" + ], + "rows": [ + [ + "1", + "Error - actionable", + "Takes precedence over lower priority ones, queuing alongside same priority toasts" + ], + [ + "2", + "Error", + "Second level priority, and takes precedence over lower priority ones, queuing alongside same priority toasts and yielding to higher priority ones." + ], + [ + "3", + "Warning - actionable", + "Third level priority, and takes precedence over lower priority ones, queuing alongside same priority toasts and yielding to higher priority ones." + ], + [ + "4", + "Positive - actionable", + "Fourth level priority, and takes precedence over lower priority ones, queuing alongside same priority toasts and yielding to higher priority ones." + ], + [ + "5", + "Info - actionable", + "Fifth level priority, and takes precedence over lower priority ones, queuing alongside same priority toasts and yielding to higher priority ones." + ], + [ + "6", + "Neutral - actionable", + "Sixth level priority, and takes precedence over lower priority ones, queuing alongside same priority toasts and yielding to higher priority ones." + ], + [ + "7", + "Warning", + "Seventh level priority, and takes precedence over lower priority ones, queuing alongside same priority toasts and yielding to higher priority ones." + ], + [ + "8", + "Positive", + "Eighth level priority, and takes precedence over lower priority ones, queuing alongside same priority toasts and yielding to higher priority ones." + ], + [ + "9", + "Info", + "Ninth level priority, and takes precedence over lower priority ones, queuing alongside same priority toasts and yielding to higher priority ones." + ], + [ + "10", + "Neutral", + "Tenth level priority, queuing alongside same priority toasts and yielding to higher priority ones." + ] + ] +} \ No newline at end of file diff --git a/apps/pie-docs/src/components/toast/toast.md b/apps/pie-docs/src/components/toast/toast.md index 7630c5d9bb..f5a57e01bf 100644 --- a/apps/pie-docs/src/components/toast/toast.md +++ b/apps/pie-docs/src/components/toast/toast.md @@ -2,28 +2,7 @@ eleventyNavigation: key: 'Toast' parent: Components + url: /components/toast/ order: 48 +permalink: false --- - -## Overview -The purpose of toasts is to provide users with timely and relevant information in an unobtrusive manner. It enhances the user experience by keeping users informed without requiring them to navigate to a different screen or take immediate action. - -Toast notifications are typically displayed at the bottom of the screen and disappear automatically after a short period of time. They are often used to notify users about successful actions, errors, warnings, or important updates without interrupting their current tasks. - -{% contentPageImage { - src:"../../assets/img/components/toast/overview.svg", - alt: "A toast placed at the bottom of the page." -} %} - ---- - -## Resources - -{% notification { - type: "warning", - message: "We’re currently working on updating our Toast documentation, please see the resources below." -} %} - -{% resourceTable { - componentName: 'Toast' -} %} diff --git a/yarn.lock b/yarn.lock index d42ea56077..0c6300747b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4742,7 +4742,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/generator-pie-component@0.23.0, @justeattakeaway/generator-pie-component@workspace:packages/tools/generator-pie-component": +"@justeattakeaway/generator-pie-component@0.24.0, @justeattakeaway/generator-pie-component@workspace:packages/tools/generator-pie-component": version: 0.0.0-use.local resolution: "@justeattakeaway/generator-pie-component@workspace:packages/tools/generator-pie-component" dependencies: @@ -4796,13 +4796,13 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-checkbox-group@0.7.3, @justeattakeaway/pie-checkbox-group@workspace:packages/components/pie-checkbox-group": +"@justeattakeaway/pie-checkbox-group@0.7.4, @justeattakeaway/pie-checkbox-group@workspace:packages/components/pie-checkbox-group": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-checkbox-group@workspace:packages/components/pie-checkbox-group" dependencies: "@custom-elements-manifest/analyzer": 0.9.0 "@justeattakeaway/pie-assistive-text": 0.7.4 - "@justeattakeaway/pie-checkbox": 0.13.3 + "@justeattakeaway/pie-checkbox": 0.13.4 "@justeattakeaway/pie-components-config": 0.18.0 "@justeattakeaway/pie-css": 0.13.1 "@justeattakeaway/pie-webc-core": 0.24.2 @@ -4810,7 +4810,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-checkbox@0.13.3, @justeattakeaway/pie-checkbox@workspace:packages/components/pie-checkbox": +"@justeattakeaway/pie-checkbox@0.13.4, @justeattakeaway/pie-checkbox@workspace:packages/components/pie-checkbox": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-checkbox@workspace:packages/components/pie-checkbox" dependencies: @@ -4849,7 +4849,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-cookie-banner@1.0.0, @justeattakeaway/pie-cookie-banner@workspace:packages/components/pie-cookie-banner": +"@justeattakeaway/pie-cookie-banner@1.0.1, @justeattakeaway/pie-cookie-banner@workspace:packages/components/pie-cookie-banner": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-cookie-banner@workspace:packages/components/pie-cookie-banner" dependencies: @@ -4860,7 +4860,7 @@ __metadata: "@justeattakeaway/pie-divider": 0.14.2 "@justeattakeaway/pie-icon-button": 0.29.0 "@justeattakeaway/pie-link": 0.18.2 - "@justeattakeaway/pie-modal": 0.49.1 + "@justeattakeaway/pie-modal": 0.49.2 "@justeattakeaway/pie-switch": 0.30.4 "@justeattakeaway/pie-webc-core": 0.24.2 "@justeattakeaway/pie-wrapper-react": 0.14.2 @@ -5039,7 +5039,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-modal@0.49.1, @justeattakeaway/pie-modal@workspace:packages/components/pie-modal": +"@justeattakeaway/pie-modal@0.49.2, @justeattakeaway/pie-modal@workspace:packages/components/pie-modal": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-modal@workspace:packages/components/pie-modal" dependencies: @@ -5076,7 +5076,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-radio-group@0.1.2, @justeattakeaway/pie-radio-group@workspace:packages/components/pie-radio-group": +"@justeattakeaway/pie-radio-group@0.2.0, @justeattakeaway/pie-radio-group@workspace:packages/components/pie-radio-group": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-radio-group@workspace:packages/components/pie-radio-group" dependencies: @@ -5084,13 +5084,13 @@ __metadata: "@justeattakeaway/pie-assistive-text": 0.7.4 "@justeattakeaway/pie-components-config": 0.18.0 "@justeattakeaway/pie-css": 0.13.1 - "@justeattakeaway/pie-radio": 0.3.0 + "@justeattakeaway/pie-radio": 0.4.0 "@justeattakeaway/pie-webc-core": 0.24.2 cem-plugin-module-file-extensions: 0.0.5 languageName: unknown linkType: soft -"@justeattakeaway/pie-radio@0.3.0, @justeattakeaway/pie-radio@workspace:packages/components/pie-radio": +"@justeattakeaway/pie-radio@0.4.0, @justeattakeaway/pie-radio@workspace:packages/components/pie-radio": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-radio@workspace:packages/components/pie-radio" dependencies: @@ -5210,27 +5210,27 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-webc@0.5.46, @justeattakeaway/pie-webc@workspace:packages/components/pie-webc": +"@justeattakeaway/pie-webc@0.5.47, @justeattakeaway/pie-webc@workspace:packages/components/pie-webc": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-webc@workspace:packages/components/pie-webc" dependencies: "@justeattakeaway/pie-assistive-text": 0.7.4 "@justeattakeaway/pie-button": 0.49.3 "@justeattakeaway/pie-card": 0.21.2 - "@justeattakeaway/pie-checkbox": 0.13.3 - "@justeattakeaway/pie-checkbox-group": 0.7.3 + "@justeattakeaway/pie-checkbox": 0.13.4 + "@justeattakeaway/pie-checkbox-group": 0.7.4 "@justeattakeaway/pie-chip": 0.9.0 "@justeattakeaway/pie-components-config": 0.18.0 - "@justeattakeaway/pie-cookie-banner": 1.0.0 + "@justeattakeaway/pie-cookie-banner": 1.0.1 "@justeattakeaway/pie-divider": 0.14.2 "@justeattakeaway/pie-form-label": 0.14.3 "@justeattakeaway/pie-icon-button": 0.29.0 "@justeattakeaway/pie-link": 0.18.2 "@justeattakeaway/pie-lottie-player": 0.0.4 - "@justeattakeaway/pie-modal": 0.49.1 + "@justeattakeaway/pie-modal": 0.49.2 "@justeattakeaway/pie-notification": 0.12.3 - "@justeattakeaway/pie-radio": 0.3.0 - "@justeattakeaway/pie-radio-group": 0.1.2 + "@justeattakeaway/pie-radio": 0.4.0 + "@justeattakeaway/pie-radio-group": 0.2.0 "@justeattakeaway/pie-spinner": 0.7.2 "@justeattakeaway/pie-switch": 0.30.4 "@justeattakeaway/pie-tag": 0.11.0 @@ -22616,7 +22616,7 @@ __metadata: "@commitlint/config-conventional": 17.4.4 "@justeat/pie-design-tokens": 6.5.0 "@justeattakeaway/browserslist-config-pie": 0.2.0 - "@justeattakeaway/generator-pie-component": 0.23.0 + "@justeattakeaway/generator-pie-component": 0.24.0 "@justeattakeaway/pie-icons": 5.0.0 "@justeattakeaway/pie-webc-testing": 0.13.4 "@justeattakeaway/pie-wrapper-react": 0.14.2 @@ -22679,10 +22679,10 @@ __metadata: "@justeattakeaway/pie-assistive-text": 0.7.4 "@justeattakeaway/pie-button": 0.49.3 "@justeattakeaway/pie-card": 0.21.2 - "@justeattakeaway/pie-checkbox": 0.13.3 - "@justeattakeaway/pie-checkbox-group": 0.7.3 + "@justeattakeaway/pie-checkbox": 0.13.4 + "@justeattakeaway/pie-checkbox-group": 0.7.4 "@justeattakeaway/pie-chip": 0.9.0 - "@justeattakeaway/pie-cookie-banner": 1.0.0 + "@justeattakeaway/pie-cookie-banner": 1.0.1 "@justeattakeaway/pie-css": 0.13.1 "@justeattakeaway/pie-divider": 0.14.2 "@justeattakeaway/pie-form-label": 0.14.3 @@ -22691,10 +22691,10 @@ __metadata: "@justeattakeaway/pie-icons-webc": 1.0.0 "@justeattakeaway/pie-link": 0.18.2 "@justeattakeaway/pie-lottie-player": 0.0.4 - "@justeattakeaway/pie-modal": 0.49.1 + "@justeattakeaway/pie-modal": 0.49.2 "@justeattakeaway/pie-notification": 0.12.3 - "@justeattakeaway/pie-radio": 0.3.0 - "@justeattakeaway/pie-radio-group": 0.1.2 + "@justeattakeaway/pie-radio": 0.4.0 + "@justeattakeaway/pie-radio-group": 0.2.0 "@justeattakeaway/pie-spinner": 0.7.2 "@justeattakeaway/pie-switch": 0.30.4 "@justeattakeaway/pie-tag": 0.11.0 @@ -29588,7 +29588,7 @@ __metadata: "@angular/platform-browser-dynamic": 15.2.0 "@angular/router": 15.2.0 "@justeattakeaway/pie-css": 0.13.1 - "@justeattakeaway/pie-webc": 0.5.46 + "@justeattakeaway/pie-webc": 0.5.47 rxjs: 7.8.0 tslib: 2.3.0 typescript: 4.9.4 @@ -29602,7 +29602,7 @@ __metadata: dependencies: "@babel/preset-env": 7.24.5 "@justeattakeaway/pie-css": 0.13.1 - "@justeattakeaway/pie-webc": 0.5.46 + "@justeattakeaway/pie-webc": 0.5.47 babel-loader: 8 core-js: 3.30.0 nuxt: 2.17.0 @@ -29617,7 +29617,7 @@ __metadata: resolution: "wc-react17@workspace:apps/examples/wc-react17" dependencies: "@justeattakeaway/pie-css": 0.13.1 - "@justeattakeaway/pie-webc": 0.5.46 + "@justeattakeaway/pie-webc": 0.5.47 "@lit/react": 1.0.5 "@types/react": ^17.0.2 "@types/react-dom": ^17.0.2 @@ -29637,7 +29637,7 @@ __metadata: resolution: "wc-react18@workspace:apps/examples/wc-react18" dependencies: "@justeattakeaway/pie-css": 0.13.1 - "@justeattakeaway/pie-webc": 0.5.46 + "@justeattakeaway/pie-webc": 0.5.47 "@lit/react": 1.0.5 "@types/react": 18.3.3 "@types/react-dom": 18.3.0 @@ -29657,7 +29657,7 @@ __metadata: resolution: "wc-vue3@workspace:apps/examples/wc-vue3" dependencies: "@justeattakeaway/pie-css": 0.13.1 - "@justeattakeaway/pie-webc": 0.5.46 + "@justeattakeaway/pie-webc": 0.5.47 "@types/node": 18.15.11 "@vitejs/plugin-vue": 4.0.0 "@vue/tsconfig": 0.1.3 From 30fe1a2e000fac549cc665a72e79b841cc0e2b98 Mon Sep 17 00:00:00 2001 From: Jose De Freitas Jr Date: Fri, 8 Nov 2024 15:25:09 -0700 Subject: [PATCH 03/12] feat(pie-docs): DSW-2475 added changesets --- .changeset/happy-eagles-speak.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/happy-eagles-speak.md diff --git a/.changeset/happy-eagles-speak.md b/.changeset/happy-eagles-speak.md new file mode 100644 index 0000000000..983d5ae38b --- /dev/null +++ b/.changeset/happy-eagles-speak.md @@ -0,0 +1,5 @@ +--- +"pie-docs": minor +--- + +[Changed] - Complete the toast overview page From 5fb1c8fbf0b0fc0108513a19f23ee99ca174fee7 Mon Sep 17 00:00:00 2001 From: Raouf Date: Mon, 11 Nov 2024 12:28:10 +0100 Subject: [PATCH 04/12] fix(pie-docs): DSW-2475 update order list styles --- .../src/assets/styles/components/_list.scss | 4 ---- .../src/components/toast/overview/overview.md | 17 ++++++++++++----- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/apps/pie-docs/src/assets/styles/components/_list.scss b/apps/pie-docs/src/assets/styles/components/_list.scss index ca839a5df5..5b04b158db 100644 --- a/apps/pie-docs/src/assets/styles/components/_list.scss +++ b/apps/pie-docs/src/assets/styles/components/_list.scss @@ -19,10 +19,6 @@ @include p.line-height(--dt-font-body-l-line-height); display: flex; - @include f.media('>=wide') { - align-items: center; - } - &:before { content: counter(item); @include p.font-size(--dt-font-body-s-size); diff --git a/apps/pie-docs/src/components/toast/overview/overview.md b/apps/pie-docs/src/components/toast/overview/overview.md index 587f152ce4..9f36f6a703 100644 --- a/apps/pie-docs/src/components/toast/overview/overview.md +++ b/apps/pie-docs/src/components/toast/overview/overview.md @@ -10,6 +10,7 @@ permalink: components/toast/ --- ## Overview + Toasts are used to inform users about processes within a system. They can also provide contextual feedback. They appear temporarily at the bottom-left of the screen and disappear after a certain time period or when the user performs an action to remove them. {% contentPageImage { @@ -55,13 +56,14 @@ Toasts are used to inform users about processes within a system. They can also p type: listTypes.ordered, items: [ "**Icon:** Leading icon that visually supports the label.", - "**Message:** Informs the user of the action they have performed", + "**Message:** Informs the user of the action they have performed.", "**Action (optional):** [Button](/components/button/) action to either dismiss the toast or to undo the action.", "**Close (optional):** [Icon button](/components/icon-button/) to close the Toast." ] } %} --- + ## Variations ### Default @@ -85,6 +87,7 @@ If you require additional text for your message, please use the multi-line compo } %} --- + ## Modifiers ### Strong @@ -175,6 +178,7 @@ If you are using actions, only use the pre-built button in the toast. } %} --- + ## Sizes ### Height @@ -198,6 +202,7 @@ The toast has a minimum width of 300px and a maximum width of 420px. } %} --- + ## Overflow If the body copy extends beyond one line, it should automatically wrap to multiple lines. Yet, ensure that multi-line text is truncated to a maximum of three lines. For longer text content, consider utilising a pop-up component. @@ -209,6 +214,7 @@ If the body copy extends beyond one line, it should automatically wrap to multip } %} --- + ## Priority queue Only one toast is displayed at a time. When toasts are consecutively or simultaneously triggered, their display order is defined by the priority queue. @@ -218,6 +224,7 @@ Only one toast is displayed at a time. When toasts are consecutively or simultan } %} --- + ## Behaviours ### Auto-dismiss @@ -272,6 +279,7 @@ If the toast includes a close icon button or button with a dismissing purpose, t {% endcontentLayout %} --- + ## Interactions If the toast includes a close option, the user can select either option to automatically dismiss the toast. @@ -294,6 +302,7 @@ If the toast includes a close option, the user can select either option to autom {% endcontentLayout %} --- + ## Layout ### LTR position @@ -308,8 +317,7 @@ A toast should be located at the bottom left of the page’s content are; exclud {% list { type: listTypes.ordered, items: [ - "**Wide:** 24px padding", - "**Narrow:** 16px padding" + "**Wide:** 24px padding
**Narrow:** 16px padding" ] } %} @@ -325,8 +333,7 @@ A toast should be located at the bottom right of the page’s content are; exclu {% list { type: listTypes.ordered, items: [ - "**Wide:** 24px padding", - "**Narrow:** 16px padding" + "**Wide:** 24px padding
**Narrow:** 16px padding" ] } %} From b49f47ab0a99bec7087b60573fb2a557799ab53a Mon Sep 17 00:00:00 2001 From: Raouf Date: Tue, 12 Nov 2024 16:17:34 +0100 Subject: [PATCH 05/12] fix(pie-docs): DSW-2475 update alt messages --- .../src/components/toast/overview/overview.md | 41 ++++++++----------- 1 file changed, 18 insertions(+), 23 deletions(-) diff --git a/apps/pie-docs/src/components/toast/overview/overview.md b/apps/pie-docs/src/components/toast/overview/overview.md index 9f36f6a703..bdb659e004 100644 --- a/apps/pie-docs/src/components/toast/overview/overview.md +++ b/apps/pie-docs/src/components/toast/overview/overview.md @@ -82,7 +82,7 @@ If you require additional text for your message, please use the multi-line compo {% contentPageImage { src:"../../../assets/img/components/toast/variations-multi-line.svg", - alt: "A toast component on its multi-line variation.", + alt: "A toast component with multiple lines of text. The text is truncated so that a maximum of three lines are shown.", width: 300 } %} @@ -96,7 +96,7 @@ To create a stronger impact with your message, you can use strong variant. This {% contentPageImage { src:"../../../assets/img/components/toast/modifiers-strong.svg", - alt: "Multiple toasts with strong modifier.", + alt: "The info, warning, success and error toast variants with the strong modifier applied.", width: 866 } %} @@ -116,7 +116,7 @@ To create a message with less prominence you can use the subtle variant. {% contentPageImage { src:"../../../assets/img/components/toast/modifiers-subtle.svg", - alt: "Multiple toasts with strong modifier.", + alt: "Multiple toasts with the subtle modifier.", width: 788 } %} @@ -141,7 +141,7 @@ When incorporating an icon into a Toast, it is essential to ensure that the icon items: [{ src: "../../../assets/img/components/toast/modifiers-icons-do.svg", width: "456px", - alt: "Two toast components with close icon button" + alt: "Two toast components using approved icons for the error and info states." }] }, dont: { @@ -149,7 +149,7 @@ When incorporating an icon into a Toast, it is essential to ensure that the icon items: [{ src: "../../../assets/img/components/toast/modifiers-icons-dont.svg", width: "280px", - alt: "A toast without close icon button nor dismiss button" + alt: "An error toast using an unapproved icon" }] } } %} @@ -172,7 +172,7 @@ If you are using actions, only use the pre-built button in the toast. items: [{ src: "../../../assets/img/components/toast/modifiers-actions-dont.svg", width: "280px", - alt: "A toast with a wrong dismiss button variation" + alt: "A toast incorrectly using a custom dismiss button." }] } } %} @@ -197,7 +197,7 @@ The toast has a minimum width of 300px and a maximum width of 420px. {% contentPageImage { src:"../../../assets/img/components/toast/sizes-width.svg", - alt: "A regular toast and a multi-line toast.", + alt: "A 420px wide toast", width: 420 } %} @@ -235,14 +235,14 @@ By default the toast automatically disappears after 5 seconds. However, the user {% contentPageImage { src: "../../../assets/img/components/toast/behaviours-toast.svg", width: 300, - alt: "A toast without close icon button nor dismiss button." + alt: "A toast without a close icon button nor a dismiss button." } %} {% endcontentItem %} {% contentItem %} {% contentPageImage { src: "../../../assets/img/components/toast/behaviours-toast-with-close-icon-button.svg", width: 300, - alt: "A toast without with a close icon button." + alt: "A toast with a close icon button." } %} {% endcontentItem %} {% endcontentLayout %} @@ -252,7 +252,7 @@ By default the toast automatically disappears after 5 seconds. However, the user {% contentPageImage { src: "../../../assets/img/components/toast/behaviours-toast-with-dismiss-button.svg", width: 300, - alt: "A toast without a dismiss button." + alt: "A toast with a dismiss button." } %} {% endcontentItem %} {% endcontentLayout %} @@ -266,14 +266,14 @@ If the toast includes a close icon button or button with a dismissing purpose, t {% contentPageImage { src: "../../../assets/img/components/toast/behaviours-toast-with-close-icon-button.svg", width: 300, - alt: "A toast without with a close icon button." + alt: "A toast with a close icon button." } %} {% endcontentItem %} {% contentItem %} {% contentPageImage { src: "../../../assets/img/components/toast/behaviours-toast-with-dismiss-button.svg", width: 300, - alt: "A toast without a dismiss button." + alt: "A toast with a dismiss button." } %} {% endcontentItem %} {% endcontentLayout %} @@ -289,14 +289,14 @@ If the toast includes a close option, the user can select either option to autom {% contentPageImage { src: "../../../assets/img/components/toast/interactions-close-icon-button.svg", width: 300, - alt: "A toast without with a close icon button." + alt: "A toast with a close icon button." } %} {% endcontentItem %} {% contentItem %} {% contentPageImage { src: "../../../assets/img/components/toast/interactions-dismiss-button.svg", width: 300, - alt: "A toast without a dismiss button." + alt: "A toast with a dismiss button." } %} {% endcontentItem %} {% endcontentLayout %} @@ -311,7 +311,7 @@ A toast should be located at the bottom left of the page’s content are; exclud {% contentPageImage { src:"../../../assets/img/components/toast/layout-ltr-position.svg", - alt: "A toast placed at the bottom of the page in LTR position." + alt: "A toast placed at the bottom-left of a page with a left-to-right direction." } %} {% list { @@ -327,7 +327,7 @@ A toast should be located at the bottom right of the page’s content are; exclu {% contentPageImage { src:"../../../assets/img/components/toast/layout-rtl-position.svg", - alt: "A toast placed at the bottom of the page in RTL position." + alt: "A toast placed at the bottom-left of a page with a right-to-left direction." } %} {% list { @@ -347,7 +347,7 @@ Here are some examples of Toast in left-to-right context: {% contentPageImage { src:"../../../assets/img/components/toast/example-ltr-toast.svg", - alt: "A Toast in left-to-right context.", + alt: "A toast component in a left-to-right context.", width: 272 } %} @@ -358,7 +358,7 @@ Here are some examples of Toast in right-to-left context: {% contentPageImage { src:"../../../assets/img/components/toast/example-rtl-toast.svg", - alt: "A Toast in right-to-left context.", + alt: "A toast component in a right-to-left context.", width: 272 } %} @@ -366,11 +366,6 @@ Here are some examples of Toast in right-to-left context: ## Resources -{% notification { - type: "warning", - message: "We’re currently working on updating our Toast documentation, please see the resources below." -} %} - {% resourceTable { componentName: 'Toast' } %} \ No newline at end of file From 771771b10d7be7314183d431683be7495a4ae01f Mon Sep 17 00:00:00 2001 From: Raouf Date: Wed, 13 Nov 2024 12:32:59 +0100 Subject: [PATCH 06/12] fix(pie-docs): DSW-2475 update content --- .../assets/img/components/toast/overflow.svg | 2 +- .../src/components/toast/overview/overview.md | 26 +++++++++---------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/apps/pie-docs/src/assets/img/components/toast/overflow.svg b/apps/pie-docs/src/assets/img/components/toast/overflow.svg index d90f3de822..b4aa6d0ffa 100644 --- a/apps/pie-docs/src/assets/img/components/toast/overflow.svg +++ b/apps/pie-docs/src/assets/img/components/toast/overflow.svg @@ -15,7 +15,7 @@ - + diff --git a/apps/pie-docs/src/components/toast/overview/overview.md b/apps/pie-docs/src/components/toast/overview/overview.md index bdb659e004..d75aeea42a 100644 --- a/apps/pie-docs/src/components/toast/overview/overview.md +++ b/apps/pie-docs/src/components/toast/overview/overview.md @@ -11,7 +11,7 @@ permalink: components/toast/ ## Overview -Toasts are used to inform users about processes within a system. They can also provide contextual feedback. They appear temporarily at the bottom-left of the screen and disappear after a certain time period or when the user performs an action to remove them. +Toasts are used to inform users about processes within a system. They can also provide contextual feedback. They appear temporarily at the bottom of the screen and disappear after a certain time period or when the user performs an action to remove them. {% contentPageImage { src:"../../../assets/img/components/toast/overview.svg", @@ -26,8 +26,8 @@ Toasts are used to inform users about processes within a system. They can also p do: { type: usageTypes.text, items: [ - "Only one toast at a time.", - "Limit your message to 35 characters (abbr) for one line toast or 90 characters (abbr) for multi-line toast.", + "Display only one toast at a time.", + "Limit your message to 35 characters for a single-line toast or 90 characters for a multi-line toast.", "Be mindful of how often you trigger toasts.", "Use for short messages that confirm an action taken by a user." ] @@ -68,7 +68,7 @@ Toasts are used to inform users about processes within a system. They can also p ### Default -A default one-line toast, this can be used with or without an icon or action. +A default single-line toast; this can be used with or without an icon or action. {% contentPageImage { src:"../../../assets/img/components/toast/variations-default.svg", @@ -92,7 +92,7 @@ If you require additional text for your message, please use the multi-line compo ### Strong -To create a stronger impact with your message, you can use strong variant. This uses colour to back-up your message +Use strong colour variants to increase the visual impact of your message. {% contentPageImage { src:"../../../assets/img/components/toast/modifiers-strong.svg", @@ -183,7 +183,7 @@ If you are using actions, only use the pre-built button in the toast. ### Height -The toast has a minimum height of 48px when displaying one line of body copy, and it should not exceed 122px in height to accommodate up to three lines of multi-line body copy. +The toast has a minimum height of 48px when displaying one line of text. It should not exceed 122px in height, which is enough to accommodate up to three lines of text. {% contentPageImage { src:"../../../assets/img/components/toast/sizes-height.svg", @@ -205,7 +205,7 @@ The toast has a minimum width of 300px and a maximum width of 420px. ## Overflow -If the body copy extends beyond one line, it should automatically wrap to multiple lines. Yet, ensure that multi-line text is truncated to a maximum of three lines. For longer text content, consider utilising a pop-up component. +If the body copy extends beyond one line, it should automatically wrap to multiple lines. Multi-line text will be truncated so that it does not exceed three lines. For longer text content, consider utilising a pop-up component. {% contentPageImage { src:"../../../assets/img/components/toast/overflow.svg", @@ -259,7 +259,7 @@ By default the toast automatically disappears after 5 seconds. However, the user ### Persistent -If the toast includes a close icon button or button with a dismissing purpose, the toast can remain persistent until the user manually dismisses it using either of these actions. +If the toast has a close icon button or a dismiss button, the toast can be persisted until the user manually dismisses it. {% contentLayout %} {% contentItem %} @@ -282,7 +282,7 @@ If the toast includes a close icon button or button with a dismissing purpose, t ## Interactions -If the toast includes a close option, the user can select either option to automatically dismiss the toast. +If the toast includes either a close icon button or a dismiss button, either can be used to dismiss the toast. {% contentLayout %} {% contentItem %} @@ -307,7 +307,7 @@ If the toast includes a close option, the user can select either option to autom ### LTR position -A toast should be located at the bottom left of the page’s content are; excluding any navigation. +A toast should be located at the bottom left of the page’s content area, excluding any navigation. {% contentPageImage { src:"../../../assets/img/components/toast/layout-ltr-position.svg", @@ -323,7 +323,7 @@ A toast should be located at the bottom left of the page’s content are; exclud ### RTL position -A toast should be located at the bottom right of the page’s content are; excluding any navigation. +A toast should be located at the bottom right of the page’s content area, excluding any navigation. {% contentPageImage { src:"../../../assets/img/components/toast/layout-rtl-position.svg", @@ -343,7 +343,7 @@ A toast should be located at the bottom right of the page’s content are; exclu ### LTR examples -Here are some examples of Toast in left-to-right context: +Here are some examples of the toast component in a left-to-right context: {% contentPageImage { src:"../../../assets/img/components/toast/example-ltr-toast.svg", @@ -354,7 +354,7 @@ Here are some examples of Toast in left-to-right context: ### RTL examples -Here are some examples of Toast in right-to-left context: +Here are some examples of the toast component in a right-to-left context: {% contentPageImage { src:"../../../assets/img/components/toast/example-rtl-toast.svg", From afe13a351248b99b4e2e4a1ce17a13610ce56239 Mon Sep 17 00:00:00 2001 From: Raouf Date: Wed, 13 Nov 2024 16:06:50 +0100 Subject: [PATCH 07/12] fix(pie-docs): DSW-2475 update content --- .../src/components/toast/overview/overview.md | 9 ++--- .../toast/overview/priority-queue.json | 33 +++++++------------ 2 files changed, 16 insertions(+), 26 deletions(-) diff --git a/apps/pie-docs/src/components/toast/overview/overview.md b/apps/pie-docs/src/components/toast/overview/overview.md index d75aeea42a..edf34c760c 100644 --- a/apps/pie-docs/src/components/toast/overview/overview.md +++ b/apps/pie-docs/src/components/toast/overview/overview.md @@ -35,9 +35,8 @@ Toasts are used to inform users about processes within a system. They can also p dont: { type: usageTypes.text, items: [ - "Interrupt the user experience.", - "Use a toast of critical information that user needs to action consider using a pop-alert instead.", - "Place the toast over any navigation." + "Don’t use toasts for critical information.", + "Don’t place the toast over any navigational elements." ] } } %} @@ -205,7 +204,7 @@ The toast has a minimum width of 300px and a maximum width of 420px. ## Overflow -If the body copy extends beyond one line, it should automatically wrap to multiple lines. Multi-line text will be truncated so that it does not exceed three lines. For longer text content, consider utilising a pop-up component. +If the body copy extends beyond one line, it should automatically wrap to multiple lines. Multi-line text will be truncated so that it does not exceed three lines. For longer text content, consider an alternative component. {% contentPageImage { src:"../../../assets/img/components/toast/overflow.svg", @@ -219,6 +218,8 @@ If the body copy extends beyond one line, it should automatically wrap to multip Only one toast is displayed at a time. When toasts are consecutively or simultaneously triggered, their display order is defined by the priority queue. +Each level takes priority over those below it, queues alongside toasts of the same priority, and yields to higher priority levels. + {% componentDetailsTable { tableData: priorityQueue } %} diff --git a/apps/pie-docs/src/components/toast/overview/priority-queue.json b/apps/pie-docs/src/components/toast/overview/priority-queue.json index cce86ac402..e47860064e 100644 --- a/apps/pie-docs/src/components/toast/overview/priority-queue.json +++ b/apps/pie-docs/src/components/toast/overview/priority-queue.json @@ -1,59 +1,48 @@ { "headings": [ "Priority", - "Variant", - "Behaviour" + "Variant" ], "rows": [ [ "1", - "Error - actionable", - "Takes precedence over lower priority ones, queuing alongside same priority toasts" + "Error - actionable" ], [ "2", - "Error", - "Second level priority, and takes precedence over lower priority ones, queuing alongside same priority toasts and yielding to higher priority ones." + "Error" ], [ "3", - "Warning - actionable", - "Third level priority, and takes precedence over lower priority ones, queuing alongside same priority toasts and yielding to higher priority ones." + "Warning - actionable" ], [ "4", - "Positive - actionable", - "Fourth level priority, and takes precedence over lower priority ones, queuing alongside same priority toasts and yielding to higher priority ones." + "Positive - actionable" ], [ "5", - "Info - actionable", - "Fifth level priority, and takes precedence over lower priority ones, queuing alongside same priority toasts and yielding to higher priority ones." + "Info - actionable" ], [ "6", - "Neutral - actionable", - "Sixth level priority, and takes precedence over lower priority ones, queuing alongside same priority toasts and yielding to higher priority ones." + "Neutral - actionable" ], [ "7", - "Warning", - "Seventh level priority, and takes precedence over lower priority ones, queuing alongside same priority toasts and yielding to higher priority ones." + "Warning" ], [ "8", - "Positive", - "Eighth level priority, and takes precedence over lower priority ones, queuing alongside same priority toasts and yielding to higher priority ones." + "Positive" ], [ "9", - "Info", - "Ninth level priority, and takes precedence over lower priority ones, queuing alongside same priority toasts and yielding to higher priority ones." + "Info" ], [ "10", - "Neutral", - "Tenth level priority, queuing alongside same priority toasts and yielding to higher priority ones." + "Neutral" ] ] } \ No newline at end of file From 1c6b95d17a63e7361bc851106ae5036819c4281c Mon Sep 17 00:00:00 2001 From: Raouf Date: Wed, 13 Nov 2024 16:23:55 +0100 Subject: [PATCH 08/12] fix(pie-docs): DSW-2475 update content --- .../src/components/toast/overview/overview.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/pie-docs/src/components/toast/overview/overview.md b/apps/pie-docs/src/components/toast/overview/overview.md index edf34c760c..0ec73914c1 100644 --- a/apps/pie-docs/src/components/toast/overview/overview.md +++ b/apps/pie-docs/src/components/toast/overview/overview.md @@ -102,10 +102,10 @@ Use strong colour variants to increase the visual impact of your message. {% list { type: listTypes.ordered, items: [ - "**Info:** Providing contextual information about the progress of an action", - "**Warning:** Providing non-critical information about the progress of an action", - "**Success:** Providing positive information about the progress of an action", - "**Error:** Providing critical information about the progress of an action. Please review if Toast is correct to use it might be better to use a dialogue, notification or banner" + "**Info:** Providing contextual information about the progress of an action.", + "**Warning:** Providing non-critical information about the progress of an action.", + "**Success:** Providing positive information about the progress of an action.", + "**Error:** Providing critical information about the progress of an action. Please review if toast is the correct component to use. It may be better to use a dialogue, notification or banner." ] } %} @@ -122,17 +122,17 @@ To create a message with less prominence you can use the subtle variant. {% list { type: listTypes.ordered, items: [ - "**Info:** Providing contextual information about the progress of an action", - "**Warning:** Providing non-critical information about the progress of an action", - "**Success:** Providing positive information about the progress of an action", - "**Error:** Providing critical information about the progress of an action. Please review if Toast is correct to use it might be better to use a dialogue, notification or banner", - "**Neutral:** Providing critical information about the progress of an action. Please review if Toast is correct to use it might be better to use a dialogue, notification or banner" + "**Info:** Providing contextual information about the progress of an action.", + "**Warning:** Providing non-critical information about the progress of an action.", + "**Success:** Providing positive information about the progress of an action.", + "**Error:** Providing critical information about the progress of an action. Please review if toast is the correct component to use. It may be better to use a dialogue, notification or banner.", + "**Neutral:** Neutral: Providing non-urgent general information about the progress of an action." ] } %} ### Icons -When incorporating an icon into a Toast, it is essential to ensure that the icon clearly conveys the intended feedback. You should only use the icons built into the component and not use a different icon. +When using an icon inside the toast component, you should make sure that the icon clearly conveys the intended meaning. Only use the icons that have been built into the component - do not supply your own. {% usage { do: { From fe96ccf7e25e919f51fe43e80e16752a52e76e8f Mon Sep 17 00:00:00 2001 From: Raouf Date: Wed, 13 Nov 2024 16:55:42 +0100 Subject: [PATCH 09/12] fix(pie-docs): DSW-2475 update resource table --- apps/pie-docs/src/componentStatusData.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/pie-docs/src/componentStatusData.js b/apps/pie-docs/src/componentStatusData.js index 3c453ef941..16ebd2fd25 100644 --- a/apps/pie-docs/src/componentStatusData.js +++ b/apps/pie-docs/src/componentStatusData.js @@ -2009,11 +2009,12 @@ const rows = [ }, { resource: resourceTypes.DOCUMENTATION, - status: statusTypes.PLANNED, + link: 'https://www.figma.com/design/pPSC73rPin4csb8DiK1CRr/branch/sjkhCbCcv7t4QkDrz7g0Xx/%E2%9C%A8-%5BCore%5D-Web-Components-%5BPIE-3%5D?node-id=7934-11960&node-type=frame&t=SxRV1mF3FT7S4lAP-0', + status: statusTypes.STABLE, }, { resource: resourceTypes.WEB_COMPONENTS, - status: statusTypes.PLANNED, + status: webComponentStatuses['pie-toast'], }, { resource: resourceTypes.VUE, From c95d7c5da8e03ce9843d9a174c764228cf8be47c Mon Sep 17 00:00:00 2001 From: Raouf Date: Thu, 14 Nov 2024 15:52:18 +0100 Subject: [PATCH 10/12] fix(pie-docs): DSW-2475 add motion docs --- .../toast/motion-enter-transition.svg | 43 +++++++++++++++++ .../img/components/toast/motion-example.svg | 28 +++++++++++ .../toast/motion-exit-transition.svg | 43 +++++++++++++++++ .../toast/motion/enter-transition.json | 16 +++++++ .../toast/motion/exit-transition.json | 16 +++++++ .../src/components/toast/motion/motion.md | 46 +++++++++++++++++++ 6 files changed, 192 insertions(+) create mode 100644 apps/pie-docs/src/assets/img/components/toast/motion-enter-transition.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/motion-example.svg create mode 100644 apps/pie-docs/src/assets/img/components/toast/motion-exit-transition.svg create mode 100644 apps/pie-docs/src/components/toast/motion/enter-transition.json create mode 100644 apps/pie-docs/src/components/toast/motion/exit-transition.json create mode 100644 apps/pie-docs/src/components/toast/motion/motion.md diff --git a/apps/pie-docs/src/assets/img/components/toast/motion-enter-transition.svg b/apps/pie-docs/src/assets/img/components/toast/motion-enter-transition.svg new file mode 100644 index 0000000000..2cb95dd1b5 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/motion-enter-transition.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/motion-example.svg b/apps/pie-docs/src/assets/img/components/toast/motion-example.svg new file mode 100644 index 0000000000..9129fa3c59 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/motion-example.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/toast/motion-exit-transition.svg b/apps/pie-docs/src/assets/img/components/toast/motion-exit-transition.svg new file mode 100644 index 0000000000..f84f612004 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/toast/motion-exit-transition.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/components/toast/motion/enter-transition.json b/apps/pie-docs/src/components/toast/motion/enter-transition.json new file mode 100644 index 0000000000..bd3c7f8062 --- /dev/null +++ b/apps/pie-docs/src/components/toast/motion/enter-transition.json @@ -0,0 +1,16 @@ +{ + "headings": [ + "Property", + "Cubic Bezier", + "Easing token", + "Notes" + ], + "rows": [ + [ + "X Translate", + "(0, 0, .18, .99)", + "$easing-out", + "Enters into view from the left, gently decelerates to a stop." + ] + ] +} diff --git a/apps/pie-docs/src/components/toast/motion/exit-transition.json b/apps/pie-docs/src/components/toast/motion/exit-transition.json new file mode 100644 index 0000000000..df0727db7c --- /dev/null +++ b/apps/pie-docs/src/components/toast/motion/exit-transition.json @@ -0,0 +1,16 @@ +{ + "headings": [ + "Property", + "Cubic Bezier", + "Easing token", + "Notes" + ], + "rows": [ + [ + "X Translate", + "(0.8, 0, 1, 1)", + "$easing-in", + "Exits from view to the left, gently accelerates from stationary." + ] + ] +} diff --git a/apps/pie-docs/src/components/toast/motion/motion.md b/apps/pie-docs/src/components/toast/motion/motion.md new file mode 100644 index 0000000000..0badff56e9 --- /dev/null +++ b/apps/pie-docs/src/components/toast/motion/motion.md @@ -0,0 +1,46 @@ +--- +eleventyNavigation: + key: Motion + parent: 'Toast' + order: 2 +eleventyComputed: + enterTransition: "{% include './enter-transition.json' %}" + existTransition: "{% include './exit-transition.json' %}" +--- + +## Example + +Illustrates the animations that happen when the Toast component enters and exits from view. You can see an animated example of this component here. + +{% contentPageImage { + src:"../../../assets/img/components/toast/motion-example.svg", + alt: "A toast component is displayed in the bottom left of the page." +} %} + +___ + +## Enter transition + +When the toast component enters into view, it always enters from the left hand side of the screen at 200ms on the x axis. We use $easing-out to show the toast decelerate into position. + +{% contentWrapper %} + {% contentPageImage { + src:"../../../assets/img/components/toast/motion-enter-transition.svg", + alt: "A chart showing the toast component's enter transition with an X Translate animation. It slides in from the left over 200ms, using an easing-out effect." + } %} + {% componentDetailsTable { tableData: enterTransition } %} +{% endcontentWrapper %} + +___ + +## Exit transition + +When the toast component exits from view, it always exits towards the left hand side of the screen at 100ms on the X axis. We use $easing-in to show the toast accelerate from stationary to off the screen. Exit transitions are always quicker than entrance transitions because they are no longer needed. + +{% contentWrapper %} + {% contentPageImage { + src:"../../../assets/img/components/toast/motion-exit-transition.svg", + alt: "A chart showing the toast component's exit transition with an X Translate animation. It exits to the left over 100ms, using an easing-in effect to gently accelerate out of view." + } %} + {% componentDetailsTable { tableData: existTransition } %} +{% endcontentWrapper %} \ No newline at end of file From 8024347fb301716b145016f519a22b07783dbb63 Mon Sep 17 00:00:00 2001 From: Raouf Date: Thu, 14 Nov 2024 15:54:57 +0100 Subject: [PATCH 11/12] fix(pie-docs): DSW-2475 update resource table --- apps/pie-docs/src/componentStatusData.js | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/pie-docs/src/componentStatusData.js b/apps/pie-docs/src/componentStatusData.js index 4100e1d370..e37655cce7 100644 --- a/apps/pie-docs/src/componentStatusData.js +++ b/apps/pie-docs/src/componentStatusData.js @@ -2015,6 +2015,7 @@ const rows = [ }, { resource: resourceTypes.WEB_COMPONENTS, + link: 'https://webc.pie.design/?path=/story/toast--neutral', status: webComponentStatuses['pie-toast'], }, { From dc9607604686d63d4face252cde56a8179439f06 Mon Sep 17 00:00:00 2001 From: Raouf Date: Thu, 14 Nov 2024 16:13:04 +0100 Subject: [PATCH 12/12] fix(pie-docs): DSW-2475 routes --- apps/pie-docs/test/snapshots/expected-routes.snapshot.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json index e4e5b1b83c..0bd9bbe7c9 100644 --- a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json +++ b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json @@ -80,6 +80,7 @@ "components/textarea/code", "components/thumbnail", "components/toast", + "components/toast/motion", "components/tooltip", "components/uploader", "designers", @@ -134,4 +135,4 @@ "support", "support/contact-us", "support/faq" -] +] \ No newline at end of file