Skip to content

Commit

Permalink
Feat(web): Add Message and Link for ToastBar #DS-1213
Browse files Browse the repository at this point in the history
  • Loading branch information
curdaj committed May 22, 2024
1 parent 24fba09 commit e8aa8bd
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 81 deletions.
88 changes: 69 additions & 19 deletions packages/web/src/scss/components/Toast/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ Toast is a composition of a few subcomponents:

- [Toast](#toast)
- [ToastBar](#toastbar)
- [ToastBarMessage](#toastbarmessage)
- [ToastBarLink](#toastbarlink)

## JavaScript Plugin

Expand Down Expand Up @@ -164,8 +166,10 @@ Minimum example:
```html
<div class="ToastBar ToastBar--inverted">
<div class="ToastBar__box">
<div class="ToastBar__content">
<div class="ToastBar__message">Message only</div>
<div class="ToastBar__container">
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message">Message only</div>
</div>
</div>
</div>
</div>
Expand All @@ -178,33 +182,75 @@ An icon can be added to the ToastBar component:
```html
<div class="ToastBar ToastBar--inverted">
<div class="ToastBar__box">
<div class="ToastBar__content">
<div class="ToastBar__container">
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#info" />
</svg>
<div class="ToastBar__message">Message with icon</div>
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message">Message with icon</div>
</div>
</div>
</div>
</div>
```

### ToastBar Components

The content of `ToastBar` can be assembled from the following components:

#### ToastBarMessage

`ToastBarMessage` is a component designates for main message in `ToastBar`.

Usage example:

```html
<div class="ToastBar ToastBar--inverted">
<div class="ToastBar__box">
<div class="ToastBar__container">
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message">Message with action</div>
</div>
</div>
</div>
</div>
```

### Action Link
#### API

| Name | Type | Default | Required | Description |
| ---------- | -------- | ------- | -------- | ------------------------------ |
| `children` | `string` ||| Content of the ToastBarMessage |

#### ToastBarLink

An action link can be added to the ToastBar component:
`ToastBarLink` is a component designated to create an action link within `ToastBar`.

Usage example:

```html
<div class="ToastBar ToastBar--inverted">
<div class="ToastBar__box">
<div class="ToastBar__content">
<div class="ToastBar__message">
Message with action
<a href="#" class="link-inverted link-underlined">Action</a>
<div class="ToastBar__container">
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message">Message with action</div>
<a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
</div>
</div>
</div>
</div>
```

#### API

| Name | Type | Default | Required | Description |
| -------------- | ------------------------------------------------ | ---------- | -------- | ------------------------------ |
| `children` | `string` ||| Content of the ToastBarLink |
| `color` | [Action Link Color dictionary][dictionary-color] | `inverted` || Color of the link |
| `href` | `string` ||| ToastBarLink's href attribute |
| `isDisabled` | `bool` | `false` || Whether is the link disabled |
| `isUnderlined` | `bool` | `true` || Whether is the link underlined |

👉 **Do not put any important actions** like "Undo" in the ToastBar component (unless there are other means to perform
said action), as it is very hard (if not impossible) to reach for users with assistive technologies. Read more about
[Toast accessibility][scott-o-hara-toast] at Scott O'Hara's blog.
Expand All @@ -219,8 +265,10 @@ For example:
```html
<div class="ToastBar ToastBar--success">
<div class="ToastBar__box">
<div class="ToastBar__content">
<div class="ToastBar__message">Success message</div>
<div class="ToastBar__container">
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message">Success message</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -256,7 +304,7 @@ button:
```html
<div id="my-dismissible-toast" class="ToastBar ToastBar--inverted ToastBar--dismissible">
<div class="ToastBar__box">
<div class="ToastBar__content">
<div class="ToastBar__container">
<div class="ToastBar__message">Dismissible message</div>
</div>
<button
Expand Down Expand Up @@ -298,13 +346,13 @@ button:
<!-- ToastBar: start -->
<div id="my-dismissible-toast" class="ToastBar ToastBar--inverted ToastBar--dismissible is-hidden">
<div class="ToastBar__box">
<div class="ToastBar__content">
<div class="ToastBar__container">
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#info" />
</svg>
<div class="ToastBar__message">
Toast message
<a href="#" class="link-inverted link-underlined">Action</a>
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message">Toast message</div>
<a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
</div>
</div>
<button
Expand Down Expand Up @@ -341,11 +389,13 @@ the template and apply it on any toasts to be shown to the user, using the confi
<template data-spirit-snippet="item">
<div class="ToastBar is-hidden" data-spirit-color="inverted" data-spirit-populate-field="item">
<div class="ToastBar__box">
<div class="ToastBar__content">
<div class="ToastBar__container">
<svg width="20" height="20" aria-hidden="true" data-spirit-populate-field="icon">
<use xlink:href="/icons/svg/sprite.svg#info" />
</svg>
<div class="ToastBar__message" data-spirit-populate-field="message"></div>
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message"></div>
</div>
</div>
<button
type="button"
Expand Down
12 changes: 5 additions & 7 deletions packages/web/src/scss/components/Toast/_ToastBar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -48,32 +48,30 @@
align-items: start;
}

.ToastBar__content:has(> svg:first-child) {
.ToastBar__container:has(> svg:first-child) {
display: grid;
grid-template-columns: auto 1fr;
column-gap: theme.$bar-content-gap;
}

.ToastBar:is(.ToastBar--dismissible, :has([data-spirit-dismiss='toast'])) .ToastBar__content {
.ToastBar:is(.ToastBar--dismissible, :has([data-spirit-dismiss='toast'])) .ToastBar__container {
align-self: center; // 4.
}

.ToastBar__container {
.ToastBar__content {
@include typography.generate(theme.$bar-typography);

display: flex;
flex-wrap: wrap; // 5.
gap: theme.$bar-message-gap-y theme.$bar-message-gap-x;
}

.ToastBar__container > :is(a, button):last-child {
.ToastBar__link {
font-weight: 400;
}

// stylelint-disable-next-line selector-max-specificity -- Specificity is needed to precisely target the action.
.ToastBar:is(.ToastBar--dismissible, :has([data-spirit-dismiss='toast']))
.ToastBar__container
> :is(a, button):last-child {
.ToastBar:is(.ToastBar--dismissible, :has([data-spirit-dismiss='toast'])) .ToastBar__link {
margin-inline-end: theme.$bar-action-margin-inline-end; // 6.
}

Expand Down
Loading

0 comments on commit e8aa8bd

Please sign in to comment.