Skip to content

Commit

Permalink
fixup! 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
curdaj committed May 22, 2024
1 parent 7451399 commit 74a20d2
Showing 1 changed file with 42 additions and 40 deletions.
82 changes: 42 additions & 40 deletions packages/web/src/scss/components/Toast/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ <h2 class="docs-Heading">Static Toast</h2>
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#warning" />
</svg>
<div class="ToastBar__message">
I was hidden and you exposed me!
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message">I was hidden and you exposed me!</div>
</div>
</div>
<button
Expand Down Expand Up @@ -228,7 +228,9 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
<svg width="20" height="20" aria-hidden="true" data-spirit-populate-field="icon">
<use xlink:href="/assets/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 All @@ -253,9 +255,9 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#check-plain" />
</svg>
<div class="ToastBar__message">
I was first!
<a href="#" class="link-inverted link-underlined">Action</a>
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message">I was first!</div>
<a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
</div>
</div>
<button
Expand All @@ -280,9 +282,9 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#info" />
</svg>
<div class="ToastBar__message">
I appeared later. This toast has a long message that wraps automatically.
<a href="#" class="link-inverted link-underlined">Action</a>
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message">I appeared later. This toast has a long message that wraps automatically.</div>
<a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
</div>
</div>
<button
Expand Down Expand Up @@ -317,8 +319,8 @@ <h2 class="docs-Heading">Content Variations</h2>
<div class="ToastBar ToastBar--inverted">
<div class="ToastBar__box">
<div class="ToastBar__container">
<div class="ToastBar__message">
Message only
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message">Message only</div>
</div>
</div>
</div>
Expand All @@ -327,9 +329,9 @@ <h2 class="docs-Heading">Content Variations</h2>
<div class="ToastBar ToastBar--inverted">
<div class="ToastBar__box">
<div class="ToastBar__container">
<div class="ToastBar__message">
Message with action
<a href="#" class="link-inverted link-underlined">Action</a>
<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>
Expand All @@ -338,9 +340,9 @@ <h2 class="docs-Heading">Content Variations</h2>
<div class="ToastBar ToastBar--inverted">
<div class="ToastBar__box">
<div class="ToastBar__container">
<div class="ToastBar__message">
When the text is long and reaches the maximum width limit, the action automatically wraps to the next line.
<a href="#" class="link-inverted link-underlined">Action</a>
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message">When the text is long and reaches the maximum width limit, the action automatically wraps to the next line.</div>
<a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
</div>
</div>
</div>
Expand All @@ -352,9 +354,9 @@ <h2 class="docs-Heading">Content Variations</h2>
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#info" />
</svg>
<div class="ToastBar__message">
Message with icon and action
<a href="#" class="link-inverted link-underlined">Action</a>
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message">Message with icon and action</div>
<a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
</div>
</div>
</div>
Expand All @@ -363,8 +365,8 @@ <h2 class="docs-Heading">Content Variations</h2>
<div id="my-toast-variation-dismissible" class="ToastBar ToastBar--inverted ToastBar--dismissible">
<div class="ToastBar__box">
<div class="ToastBar__container">
<div class="ToastBar__message">
Dismissible message
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message">Dismissible message</div>
</div>
</div>
<button
Expand All @@ -388,9 +390,9 @@ <h2 class="docs-Heading">Content Variations</h2>
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#download" />
</svg>
<div class="ToastBar__message">
Dismissible message with custom icon and action
<a href="#" class="link-inverted link-underlined">Action</a>
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message">Dismissible message with custom icon and action</div>
<a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
</div>
</div>
<button
Expand Down Expand Up @@ -423,9 +425,9 @@ <h2 class="docs-Heading">Colors</h2>
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#info" />
</svg>
<div class="ToastBar__message">
Inverted
<a href="#" class="link-inverted link-underlined">Action</a>
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message">Inverted</div>
<a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
</div>
</div>
<button
Expand All @@ -449,9 +451,9 @@ <h2 class="docs-Heading">Colors</h2>
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#info" />
</svg>
<div class="ToastBar__message">
Informative
<a href="#" class="link-inverted link-underlined">Action</a>
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message">Informative</div>
<a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
</div>
</div>
<button
Expand All @@ -475,9 +477,9 @@ <h2 class="docs-Heading">Colors</h2>
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#check-plain" />
</svg>
<div class="ToastBar__message">
Success
<a href="#" class="link-inverted link-underlined">Action</a>
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message">Success</div>
<a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
</div>
</div>
<button
Expand All @@ -501,9 +503,9 @@ <h2 class="docs-Heading">Colors</h2>
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#warning" />
</svg>
<div class="ToastBar__message">
Warning
<a href="#" class="link-inverted link-underlined">Action</a>
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message">Warning</div>
<a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
</div>
</div>
<button
Expand All @@ -527,9 +529,9 @@ <h2 class="docs-Heading">Colors</h2>
<svg width="20" height="20" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#danger" />
</svg>
<div class="ToastBar__message">
Danger
<a href="#" class="link-inverted link-underlined">Action</a>
<div class="ToastBar__content">
<div class="text-truncate-multiline" data-spirit-populate-field="message">Danger</div>
<a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
</div>
</div>
<button
Expand Down

0 comments on commit 74a20d2

Please sign in to comment.