From e99a3c66de314769d3f2658cf76b7980d6b43073 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 16 Oct 2017 12:25:22 -0400
Subject: [PATCH] Add more alert styles, extract reusable code sample partial

---
 docs/source/_partials/code-sample.blade.php |   8 ++
 docs/source/examples/alerts.blade.md        | 103 ++++++++++++--------
 2 files changed, 71 insertions(+), 40 deletions(-)
 create mode 100644 docs/source/_partials/code-sample.blade.php

diff --git a/docs/source/_partials/code-sample.blade.php b/docs/source/_partials/code-sample.blade.php
new file mode 100644
index 000000000..32ddaf4fb
--- /dev/null
+++ b/docs/source/_partials/code-sample.blade.php
@@ -0,0 +1,8 @@
+<div class="border border-dark-softer rounded mask mb-4">
+  <div class="p-6 border-b border-dark-softer">
+    {{ $slot }}
+  </div>
+  <div>
+    <pre class="markdown language-{{ $lang }}" style="margin: 0;"><code>{{ e($code ?? $slot) }}</code></pre>
+  </div>
+</div>
diff --git a/docs/source/examples/alerts.blade.md b/docs/source/examples/alerts.blade.md
index d63bee23c..e5f79595c 100644
--- a/docs/source/examples/alerts.blade.md
+++ b/docs/source/examples/alerts.blade.md
@@ -9,53 +9,76 @@ We don't ship alert components because every app has it's own visual style, and
 
 Here's a bunch of examples:
 
-### Bootstrap Style
+### Bootstrap-style
 
-<div class="border border-dark-softer rounded mask">
-  <div class="p-6 border-b border-dark-softer">
-    <div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded">
-      <strong>Holy smokes!</strong> Something seriously bad happened.
-    </div>
-  </div>
-  <div>
-    <pre class="markdown language-html" style="margin: 0;"><code>{{
-'<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded">
+@component('_partials.code-sample', ['lang' => 'html'])
+<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded relative">
   <strong>Holy smokes!</strong> Something seriously bad happened.
-</div>'
-    }}</code></pre>
+  <span class="absolute pin-t pin-b pin-r px-4 py-3">
+    <svg class="h-6 w-6 text-red-dark" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
+  </span>
+</div>
+@endcomponent
+
+---
+
+### HelpScout-style
+
+@component('_partials.code-sample', ['lang' => 'html'])
+<div class="bg-orange-lightest border-l-4 border-orange text-orange-dark p-4">
+  <p class="text-bold">Be Warned</p>
+  <p>Something not ideal might be happening.</p>
+</div>
+@endcomponent
+
+---
+
+### HelpScout-style
+
+@component('_partials.code-sample', ['lang' => 'html'])
+<div>
+  <div class="bg-red text-light text-bold rounded-t px-4 py-2">
+    Danger
+  </div>
+  <div class="border border-red-light rounded-b bg-red-lightest px-4 py-3 text-red-dark">
+    <p>Something not ideal might be happening.</p>
   </div>
 </div>
+@endcomponent
 
-### HelpScout Style
+---
 
-<div class="border border-dark-softer rounded mask">
-  <div class="p-6 border-b border-dark-softer">
-    <div class="bg-orange-lightest border-l-4 border-orange text-orange-dark p-4">
-      Something not ideal might be happening.
-    </div>
-  </div>
-  <div>
-    <pre class="markdown language-html" style="margin: 0;"><code>{{
-'<div class="bg-orange-lightest border-l-4 border-orange text-orange-dark p-4">
-  Something not ideal might be happening.
-</div>'
-    }}</code></pre>
-  </div>
-</div>
+### Heroku-style
 
-### Heroku Style
-
-<div class="border border-dark-softer rounded mask">
-  <div class="p-6 border-b border-dark-softer">
-    <div class="bg-blue text-light text-sm text-bold px-4 py-3">
-      Something happened that you should know about but is probably good or at least not bad.
-    </div>
-  </div>
-  <div>
-    <pre class="markdown language-html" style="margin: 0;"><code>{{
-'<div class="bg-blue text-light text-sm text-bold px-4 py-3">
+@component('_partials.code-sample', ['lang' => 'html'])
+<div class="bg-blue text-light text-sm text-bold px-4 py-3">
   Something happened that you should know about but is probably good or at least not bad.
-</div>'
-    }}</code></pre>
+</div>
+@endcomponent
+
+---
+
+### Shopify-style
+
+@component('_partials.code-sample', ['lang' => 'html'])
+<div class="bg-teal-lightest border-t-4 border-teal rounded-b text-dark px-4 py-3 shadow-2">
+  <div class="flex">
+    <svg class="h-6 w-6 text-teal mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
+    <div>
+      <p class="text-medium">USPS has updated their rates</p>
+      <p class="text-sm">Make sure you know how these changes affect your store.</p>
+    </div>
   </div>
 </div>
+@endcomponent
+
+---
+
+### Banner-style
+
+@component('_partials.code-sample', ['lang' => 'html'])
+<div class="bg-blue-lightest border-t border-b border-blue text-blue-dark px-4 py-3">
+  <p class="text-bold">Informational message</p>
+  <p class="text-sm">Some additional text to explain said message.</p>
+</div>
+@endcomponent