From 3f6710a09c953405cc0bc8014eab89887122b17d Mon Sep 17 00:00:00 2001
From: Derick Montague <derick.montague@ibm.com>
Date: Wed, 4 Mar 2020 00:59:47 -0600
Subject: Add buttons documentation

- Add documentation for how to use buttons
- Update markup and CSS rulesets to support icons on the left or the
right of text

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ic897f416e85824287360bc7ef5dc47c402d64eba
---
 docs/.vuepress/components/BmcButtons.vue | 50 ++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 docs/.vuepress/components/BmcButtons.vue

(limited to 'docs/.vuepress/components')

diff --git a/docs/.vuepress/components/BmcButtons.vue b/docs/.vuepress/components/BmcButtons.vue
new file mode 100644
index 00000000..2035e4db
--- /dev/null
+++ b/docs/.vuepress/components/BmcButtons.vue
@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <h3 class="h4">Enabled</h3>
+        <b-button variant="primary">Primary</b-button>
+        <b-button variant="primary">
+            <icon-add />
+            <span>Primary with icon</span>
+        </b-button>
+        <b-button variant="secondary">Secondary</b-button>
+        <b-button variant="danger">Danger</b-button>
+        <b-button variant="link">Link Button</b-button>
+        <b-button variant="link">
+            <icon-add />
+            <span>Link Button</span>
+        </b-button>
+
+        <h3 class="h4">Disabled</h3>
+        <b-button disabled variant="primary">Primary</b-button>
+        <b-button disabled variant="primary">
+            <icon-add />
+            <span>Primary with icon</span>
+        </b-button>
+        <b-button disabled variant="secondary">Secondary</b-button>
+        <b-button disabled variant="danger">Danger</b-button>
+        <b-button disabled variant="link">Link Button</b-button>
+        <b-button disabled variant="link">
+            <icon-add />
+            <span>Link Button</span>
+        </b-button>
+    </div>
+</template>
+
+<script>
+import IconAdd from '@carbon/icons-vue/es/add--alt/20';
+import IconArrowRight from '@carbon/icons-vue/es/arrow--right/16';
+export default {
+    name: 'BmcButtons',
+    components: { IconAdd, IconArrowRight }
+}
+</script>
+<style scoped>
+    button {
+        margin-bottom: 1rem;
+        margin-right: .5rem;
+    }
+
+    h3 {
+        margin: .5rem 0 1rem;
+    }
+</style>
\ No newline at end of file
-- 
cgit v1.2.3