feat(button): primary button mode (#53)

* feat(button): primary button mode

* test(button): primary mode covered

* docs(button): primary mode example

* fix(button): primary and disabled styling

__tests__/__snapshots__/button.test.js.snap

@@ -4,4 +4,6 @@ exports[`Button by default renders correctly 1`] = `<button type="button" class=
 
 exports[`Button can be disabled renders correctly 1`] = `<button type="button" disabled="disabled" class="vnt-button">Button</button>`;
 
+exports[`Button can be set in a primary mode renders correctly 1`] = `<button type="button" class="vnt-button vnt-button--primary">Button</button>`;
+
 exports[`Button can have content set using slot 1`] = `<button type="button" class="vnt-button"><span>Custom content</span></button>`;

__tests__/button.test.js

@@ -26,6 +26,10 @@ describe('Button', () => {
       expect(wrapper.vm.disabled).toBe(false);
     });
 
+    test('is not in primary mode', () => {
+      expect(wrapper.vm.primary).toBe(false);
+    });
+
     test('label text is "Button"', () => {
       expect(wrapper.vm.label).toBe('Button');
     });
@@ -85,4 +89,24 @@ describe('Button', () => {
     expect(mockClick).toHaveBeenCalled();
   });
 
+  describe('can be set in a primary mode', () => {
+
+    beforeAll(() => {
+      wrapper = mount(VntButton, {
+        propsData: {
+          primary: true
+        }
+      });
+    });
+
+    test('sets prop correctly', () => {
+      expect(wrapper.vm.primary).toBe(true);
+    });
+
+    test('renders correctly', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+  });
+
 });

docs/.vuepress/components/button-primary.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="playground">
+    <vnt-button primary>Primary</vnt-button>
+  </div>
+</template>
+
+<script>
+import { VntButton } from '../../../src/components';
+
+export default {
+  name: 'ButtonPrimary',
+  components: {
+    VntButton
+  }
+}
+</script>

docs/components/button.md

@@ -16,6 +16,14 @@ or
 <vnt-button label="Button"></vnt-button>
 ```
 
+## Primary
+
+<button-primary />
+
+```html
+<vnt-button primary>Primary</vnt-button>
+```
+
 ## Disabled
 
 <button-disabled />
@@ -39,7 +47,12 @@ Determines whether the button should be in disabled mode or not.
 ### `label`
 Default: `'Button'`
 
-The button's text
+The button's text.
+
+### `primary`
+Default: `false`
+
+Determines whether the button has primary button styling or not.
 
 ### `type`
 Default: `button`

src/components/button/Button.vue

@@ -1,5 +1,6 @@
 <template>
   <button class="vnt-button"
+          :class="{'vnt-button--primary': primary}"
           :type="type"
           :disabled="disabled"
           @click="click">
@@ -27,6 +28,10 @@ export default {
     click: {
       type: Function,
       default: () => {}
+    },
+    primary: {
+      type: Boolean,
+      default: false
     }
   }
 };
@@ -35,13 +40,15 @@ export default {
 <style lang="scss">
 @import '../../scss/mixins/component';
 
+$buttonBaseColor: #ccc;
+
 .vnt-button {
   @include component-base();
 
   line-height: 30px;
-  background: #ccc;
+  background: $buttonBaseColor;
   padding: 0 37px;
-  border: 1px solid #ccc;
+  border: 1px solid $buttonBaseColor;
   color: #000100;
 
   & ~ & {
@@ -60,8 +67,23 @@ export default {
     color: #7a7a7a;
 
     &:hover {
-      border-color: #ccc;
+      border-color: $buttonBaseColor;
     }
   }
 }
+
+.vnt-button--primary {
+  background: var(--vnt-accent-color, $fallbackAccentColor);
+  border-color: var(--vnt-accent-color, $fallbackAccentColor);
+  color: #fff;
+
+  &:hover {
+    border-color: #7a7a7a;
+  }
+
+  &:disabled {
+    background: $buttonBaseColor;
+    border-color: $buttonBaseColor;
+  }
+}
 </style>

src/components/button/README.md

@@ -27,3 +27,8 @@ The action handler invoked once user clicks the button. Must be a JS function.
 Default: `false`
 
 Determines whether the button should be in disabled mode or not.
+
+#### `primary`
+Default: `false`
+
+Determines whether the button has primary button styling or not.