From ef1c45b59443c08d7245ce9fb1ec5e59713572ab Mon Sep 17 00:00:00 2001
From: Dawid Harat <dawidharat03@gmail.com>
Date: Fri, 3 Jan 2020 19:53:52 +0100
Subject: [PATCH] toasts docs and example class option added

---
 js/tabler.js                     |  1 +
 pages/_docs/toasts.md            | 19 +++++++++++++++++--
 pages/_includes/ui/toast.html    |  4 ++--
 pages/_plugins/jekyll-example.rb |  2 +-
 scss/ui/_toasts.scss             |  3 +++
 5 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/js/tabler.js b/js/tabler.js
index 79ebc0a9..e86be4b6 100644
--- a/js/tabler.js
+++ b/js/tabler.js
@@ -58,6 +58,7 @@ $(document).ready(function() {
 
   // $('[data-toggle="tooltip"]').tooltip();
   // $('[data-toggle="popover"]').popover();
+  $('[data-toggle="toast"]').toast();
 
   /*
   Imask plugin
diff --git a/pages/_docs/toasts.md b/pages/_docs/toasts.md
index 1e5598f6..faf9efda 100644
--- a/pages/_docs/toasts.md
+++ b/pages/_docs/toasts.md
@@ -5,10 +5,25 @@ description: The toast component is like an alert box that is only shown for a c
 bootstrap-link: components/toasts/
 ---
 
-
-
 ### Default markup
 
 {% example %}
 {% include ui/toast.html %}
 {% endexample %}
+
+### Translucent
+
+Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we’ll also attempt to blur the elements under a toast.
+
+{% example html class=bg-gray %}
+{% include ui/toast.html %}
+{% endexample %}
+
+### Stacking toasts
+
+If you want to stack toasts just put them in the same container.
+
+{% example %}
+{% include ui/toast.html person-id=3 %}
+{% include ui/toast.html date="7 mins ago" text="This is another toast message." %}
+{% endexample %}
\ No newline at end of file
diff --git a/pages/_includes/ui/toast.html b/pages/_includes/ui/toast.html
index fd0227a9..ded90207 100644
--- a/pages/_includes/ui/toast.html
+++ b/pages/_includes/ui/toast.html
@@ -1,6 +1,6 @@
 {% assign person-id = include.person-id | default: 2 %}
 {% assign person = site.data.people[person-id] %}
-<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
+<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-toggle="toast">
    <div class="toast-header">
       {% include ui/avatar.html person=person class="mr-2" size="sm" %}
       <strong class="mr-auto">{{ person.full_name }}</strong>
@@ -10,6 +10,6 @@
       </button>
    </div>
    <div class="toast-body">
-      Hello, world! This is a toast message.
+      {{ include.text | default: 'Hello, world! This is a toast message.' }}
    </div>
 </div>
diff --git a/pages/_plugins/jekyll-example.rb b/pages/_plugins/jekyll-example.rb
index d4325087..185e53d3 100644
--- a/pages/_plugins/jekyll-example.rb
+++ b/pages/_plugins/jekyll-example.rb
@@ -82,7 +82,7 @@ Valid syntax: example <lang> [id=foo]
     def example(output)
       output = output.gsub(/<hide>/, "").gsub(/<\/hide>/, "")
 
-      "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + (@options[:"max-width"] ? "<div style=\"max-width: " + @options[:"max-width"] + "px; margin: 0 auto;\">\n" : "") + output + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + (@options[:"max-width"] ? "\n</div>" : "") + "\n</div>"
+      "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + (@options[:class] ? " " + @options[:class] : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + (@options[:"max-width"] ? "<div style=\"max-width: " + @options[:"max-width"] + "px; margin: 0 auto;\">\n" : "") + output + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + (@options[:"max-width"] ? "\n</div>" : "") + "\n</div>"
     end
 
   end
diff --git a/scss/ui/_toasts.scss b/scss/ui/_toasts.scss
index 80e5271a..cf264fd4 100644
--- a/scss/ui/_toasts.scss
+++ b/scss/ui/_toasts.scss
@@ -1,3 +1,6 @@
 .toast-header {
   user-select: none;
 }
+.toast button[data-dismiss="toast"]{
+  outline: none;
+}
-- 
GitLab