Update Toasts examples / docs

trimble-oss · Jul 10, 2024 · 88b189d · 88b189d
1 parent 9a97984
commit 88b189d
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 51 deletions.
diff --git a/content/components/web/toasts/_index.md b/content/components/web/toasts/_index.md
@@ -79,7 +79,7 @@ Toasts display low priority, event-driven feedback which usually doesn’t requi
             3 Emails Deleted
             <button
               type="button"
-              class="btn btn-text-dark"
+              class="btn btn-text-dark text-white btn-outline border-white"
               data-dismiss="toast"
               aria-label="Close"
             >

diff --git a/content/components/web/toasts/styles.md b/content/components/web/toasts/styles.md
@@ -16,20 +16,11 @@ disableAnatomy: true
 popoverCSSInspector: true
 ---
 
-<style>
-.toast-body {padding: .594rem;}
-</style>
-
 ## Specifications
 
-- Container (Height: 42px; Radius: 2px; Padding: 16px; Margin: 16px; solid color; [level 3 shadow](/foundations/shadows-and-depth/)) _required_
-- Toast text (Font: Open Sans 14px) _required_
-- Leading non-interactive icon (16x16px) _optional_
-- Trailing close icon (16x16px) or a Text Only [Button](/components/web/buttons/) _optional_
-
 <div class="guide-example-block my-3 py-4 bg-body-secondary bg-opacity-10">
     <div
-      class="toast show my-5 mx-auto pe-none"
+      class="toast toast-secondary show my-5 mx-auto pe-none"
       style=""
       role="alert"
       aria-live="assertive"
@@ -38,13 +29,17 @@ popoverCSSInspector: true
       data-bs-x-template="<div class='popover popover-css-inspector bs-popover-left fade show' role='tooltip'><div class='popover-arrow'></div><div class='popover-body'></div></div>"
       data-bs-custom-class="popover-css-inspector"
       data-bs-placement="left"
-      data-css-inspector-hide="bg-color margin max-width padding width"
-      data-css-inspector-show="box-shadow">
-      <div class="d-flex align-items-center">
-      <div class="toast-body">Aww yeah, you read a toast.</div>
-      <button type="button" class="btn-close me-2 m-auto" aria-disabled="true">
-      </button>
+      data-css-inspector-hide="bg-color height margin max-width padding"
+      data-css-inspector-show="width">
+      <div class="toast-header pe-2 align-items-start">
+    <i class="modus-icons me-2 align-items-top" aria-hidden="true">info</i>
+    <div>
+    <h4 class="mb-0">Title</h4>
+This is an informal toast. It shows you did something, but it's not very important.
     </div>
+    <button type="button" class="btn-close me-0 m-auto" data-bs-dismiss="toast" aria-label="Close">
+    </button>
+  </div>
   </div>
 </div>
 
@@ -57,31 +52,50 @@ popoverCSSInspector: true
 - Can sometimes be dismissed with a close icon.
 - Cannot include links.
 
-<div class="toast show mb-3" role="alert" aria-live="assertive" aria-atomic="true">
-  <div class="d-flex align-items-center">
-    <div class="toast-body">Aww yeah, you read a toast.</div>
-    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close">
+<div class="toast toast-primary show align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
+  <div class="toast-header pe-2 align-items-start">
+    <i class="modus-icons me-2 align-items-top" aria-hidden="true">info</i>
+    <div>
+    <h4 class="mb-0">Title</h4>
+This is an informal toast. It shows you did something, but it's not very important.
+    </div>
+    <button type="button" class="btn-close me-0 m-auto" data-bs-dismiss="toast" aria-label="Close">
     </button>
   </div>
 </div>
-<div class="toast toast-primary show mb-3" role="alert" aria-live="assertive" aria-atomic="true">
-  <div class="d-flex align-items-center">
-    <div class="toast-body">Aww yeah, you read a primary toast.</div>
-    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close">
+
+<div class="toast toast-secondary show align-items-center mt-2" role="alert" aria-live="assertive" aria-atomic="true">
+  <div class="toast-header pe-2 align-items-start">
+    <i class="modus-icons me-2 align-items-top" aria-hidden="true">info</i>
+    <div>
+    <h4 class="mb-0">Title</h4>
+This is a neutral toast. It shows that you did you did something okay.
+    </div>
+    <button type="button" class="btn-close me-0 m-auto" data-bs-dismiss="toast" aria-label="Close">
     </button>
   </div>
 </div>
-<div class="toast toast-danger show mb-3" role="alert" aria-live="assertive" aria-atomic="true">
-  <div class="d-flex align-items-center">
-    <div class="toast-body">Aww yeah, you read a danger toast.</div>
-    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="alert">
+
+<div class="toast toast-success show align-items-center mt-2" role="alert" aria-live="assertive" aria-atomic="true">
+  <div class="toast-header pe-2 align-items-start" data-bs-theme="dark">
+    <i class="modus-icons me-2 align-items-top" aria-hidden="true">check_circle</i>
+    <div>
+    <h4 class="mb-0">Title</h4>
+This is a success toast. It shows that you did you did something really well.
+    </div>
+    <button type="button" class="btn-close me-0 m-auto" data-bs-dismiss="toast" aria-label="Close">
     </button>
   </div>
 </div>
-<div class="toast toast-success show mb-3" role="alert" aria-live="assertive" aria-atomic="true">
-  <div class="d-flex align-items-center">
-    <div class="toast-body">Aww yeah, you read a success toast.</div>
-    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="alert">
+
+<div class="toast toast-danger show align-items-center mt-2" role="alert" aria-live="assertive" aria-atomic="true">
+   <div class="toast-header pe-2 align-items-start" data-bs-theme="dark">
+    <i class="modus-icons me-2 align-items-top" aria-hidden="true">alert</i>
+    <div>
+    <h4 class="mb-0">Title</h4>
+This is a error toast. It shows that you did you did something not very well.
+    </div>
+    <button type="button" class="btn-close me-0 m-auto" data-bs-dismiss="toast" aria-label="Close">
     </button>
   </div>
 </div>
@@ -100,17 +114,9 @@ popoverCSSInspector: true
   instead.
 - For messages, use full sentences with punctuation. Use sentence case.
 
-### Colors
-
 <!-- prettier-ignore-start -->
 | Element           | Property   | Color                                                                                                     |
 | ----------------- | ---------- | --------------------------------------------------------------------------------------------------------- |
-| Toast             | Color      | {{< color-preview nameL="Trimble Gray" hexL="#252a2e" nameD="White" hexD="#ffffff" >}}                    |
-|                   | Background | {{< color-preview nameL="White" hexL="#ffffff" nameD=" " hexD="rgba(241,241,246,.15)" >}}                 |
-|                   | Border     | {{< color-preview nameL="Black (10%)" hexL="rgba(0,0,0,.1)" nameD="Black (10%)" hexD="rgba(0,0,0,.1)" >}} |
-| Toast (Dark)      | Color      | {{< color-preview nameL="White" hexL="#fff" nameD="White" hexD="#ffffff" >}}                              |
-|                   | Background | {{< color-preview nameL="Trimble Gray" hexL="#252a2e" nameD="Gray 10 (10%)" hexD="#171c1e80" >}}          |
-|                   | Border     | {{< color-preview nameL="Black (10%)" hexL="rgba(0,0,0,.1)" nameD="Gray 10" hexD="#171c1e" >}}            |
 | Toast (Primary)   | Color      | {{< color-preview nameL=" " hexL="#07599b" nameD="Gray Light" hexD="#f1f1f6" >}}                          |
 |                   | Background | {{< color-preview nameL="Blue (10%)" hexL="#cfe1ee" nameD="Trimble Blue (10%)" hexD="#019aeb80" >}}       |
 |                   | Border     | {{< color-preview nameL="Blue" hexL="#0063a3" nameD="Trimble Blue" hexD="#019aeb" >}}                     |
@@ -120,11 +126,8 @@ popoverCSSInspector: true
 | Toast (Danger)    | Color      | {{< color-preview nameL="Trimble Gray" hexL="#252a2e" nameD="Gray Light" hexD="#f1f1f6" >}}               |
 |                   | Background | {{< color-preview nameL="Red (10%)" hexL="#f4d1d3" nameD="Red (10%)" hexD="#da212c80" >}}                 |
 |                   | Border     | {{< color-preview nameL="Red Dark" hexL="#da212c" nameD="Red" hexD="#da212c" >}}                          |
-| Toast (Warning)   | Color      | {{< color-preview nameL="Trimble Gray" hexL="#252a2e" nameD="Gray Light" hexD="#f1f1f6" >}}               |
-|                   | Background | {{< color-preview nameL="Yellow" hexL="#fff2cc" nameD="Yellow (10%)" hexD="#fbad2680" >}}                 |
-|                   | Border     | {{< color-preview nameL="Yellow Dark" hexL="#e49325" nameD="Yellow" hexD="#fbad26" >}}                    |
 | Toast (Success)   | Color      | {{< color-preview nameL="Trimble Gray" hexL="#252a2e" nameD="Gray Light" hexD="#f1f1f6" >}}               |
 |                   | Background | {{< color-preview nameL="Green" hexL="#dfe9d6" nameD="Green (10%)" hexD="#1e8a4480" >}}                   |
 |                   | Border     | {{< color-preview nameL="Green Dark" hexL="#006638" nameD="Green" hexD="#1e8a44" >}}                      |
-{class="table table-sm table-bordered border border-opacity-50"}
+{class="table table-sm table-bordered border border-opacity-50 d-none"}
 <!-- prettier-ignore-end -->
diff --git a/hugo.yml b/hugo.yml
@@ -4,7 +4,7 @@ languageCode: en-US
 locale: en-US
 
 enableInlineShortcodes: true
-googleAnalytics: ""
+googleAnalytics: "G-DZ0V55EQWB"
 
 params:
   title: Trimble Modus Design System

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "6.0.0",
-    "@trimble-oss/modus-bootstrap": "2.0.0-alpha33",
+    "@trimble-oss/modus-bootstrap": "2.0.0-alpha34",
     "@trimble-oss/modus-icons": "1.14.0",
     "autoprefixer": "10.4.19",
     "bootstrap-print-css": "1.0.1",