From 78d167125344bd763c9616f7f925279d368fed0e Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Tue, 16 Jan 2018 16:09:51 -0800
Subject: [PATCH] Move button styleguide material to a component

---
 .../components/freestyle/sg-buttons.hbs       | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 ui/app/templates/components/freestyle/sg-buttons.hbs

diff --git a/ui/app/templates/components/freestyle/sg-buttons.hbs b/ui/app/templates/components/freestyle/sg-buttons.hbs
new file mode 100644
index 000000000..069427c59
--- /dev/null
+++ b/ui/app/templates/components/freestyle/sg-buttons.hbs
@@ -0,0 +1,54 @@
+{{#freestyle-collection defaultKey="standard" as |collection|}}
+  {{#collection.variant key="standard"}}
+    {{#freestyle-usage 'buttons-standard' title='Standard Buttons'}}
+      <div class="block">
+        <a class="button">Button</a>
+        <a class="button is-white">White</a>
+        <a class="button is-light">Light</a>
+        <a class="button is-dark">Dark</a>
+        <a class="button is-black">Black</a>
+        <a class="button is-link">Link</a>
+      </div>
+      <div class="block">
+        <a class="button is-primary">Primary</a>
+        <a class="button is-info">Info</a>
+        <a class="button is-success">Success</a>
+        <a class="button is-warning">Warning</a>
+        <a class="button is-danger">Danger</a>
+      </div>
+    {{/freestyle-usage}}
+  {{/collection.variant}}
+  {{#collection.variant key="outlines"}}
+    {{#freestyle-usage 'buttons-outlines' title='Outline Buttons'}}
+      <div class="block">
+        <a class="button is-outlined">Outlined</a>
+        <a class="button is-primary is-outlined">Primary</a>
+        <a class="button is-info is-outlined">Info</a>
+        <a class="button is-success is-outlined">Success</a>
+        <a class="button is-warning is-outlined">Warning</a>
+        <a class="button is-danger is-outlined is-important">Danger</a>
+      </div>
+    {{/freestyle-usage}}
+  {{/collection.variant}}
+  {{#collection.variant key="hollow"}}
+    {{#freestyle-usage 'buttons-hollow' title='Hollow Buttons'}}
+      <div class="block" style="background:#25BA81; padding:30px">
+        <a class="button is-primary is-inverted is-outlined">Primary</a>
+        <a class="button is-info is-inverted is-outlined">Info</a>
+        <a class="button is-success is-inverted is-outlined">Success</a>
+        <a class="button is-warning is-inverted is-outlined">Warning</a>
+        <a class="button is-danger is-inverted is-outlined">Danger</a>
+      </div>
+    {{/freestyle-usage}}
+  {{/collection.variant}}
+  {{#collection.variant key="sizing"}}
+    {{#freestyle-usage 'buttons-sizing' title='Button Sizes'}}
+      <div class="block">
+        <a class="button is-small">Small</a>
+        <a class="button">Normal</a>
+        <a class="button is-medium">Medium</a>
+        <a class="button is-large">Large</a>
+      </div>
+    {{/freestyle-usage}}
+  {{/collection.variant}}
+{{/freestyle-collection}}