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
diff --git a/docs/.vuepress/components/BmcButtons.vue b/docs/.vuepress/components/BmcButtons.vue
new file mode 100644
index 0000000..2035e4d
--- /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
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 5a8e601..2be074e 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -42,7 +42,10 @@
},
{
title: "Components",
- children: ["/guide/components/", "/guide/components/page-section"]
+ children: [
+ "/guide/components/",
+ "/guide/components/button",
+ ]
}
],
"/themes/": [""]
diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
new file mode 100644
index 0000000..59c1f92
--- /dev/null
+++ b/docs/.vuepress/enhanceApp.js
@@ -0,0 +1,10 @@
+
+import "../../src/assets/styles/_obmc-custom.scss";
+import {
+ ButtonPlugin
+ } from 'bootstrap-vue';
+
+
+export default ({ Vue }) => {
+ Vue.use(ButtonPlugin);
+}
\ No newline at end of file