[R] 13.0.0 (#513)

* [F] [CE-1541] extend HdButton (#489)

* ✨ add quaternary modifier to HdButton

* ✅ added snapshot for quaternary button

* ♻️ refactor .btn-primary styles to match DS

* ♻️ refactor .btn-secondary base styles to match DS

* ♻️ create mixin to add ripple to btn

* 🔥 remove quaternary modifier of HdButton

* ♻️ add dark-background prop to HdButton

* ♻️ add isInDarkBackground prop to story playground

* ♻️ refactor .btn-tertiary base styles to match DS

* ♻️ add iconSrc as prop to HdButton

* ♻️ add disable styles to .btn--tertiary

* ✅ updating tests that have HdButton after icon support

* ♻️ remove color that was not in our DS

* ♻️ updated color for disabled button

* 👌 (HdButton): rename disabled classes to be BEM compliant

* 👌 (HdButton): remove support for default button

* 👌 (HdButton): add dark-background styles for tertiary button

* 👌 (HdButton): add unit test to showcase icon usage

* 🔖 bump to 13.0.0

* ✅ (HdButton): add unit test to test isInDarkBackground

package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeday-blocks",
-  "version": "12.3.2",
+  "version": "13.0.0",
   "description": "A Vue component library built by Homeday's frontend team.",
   "main": "main.js",
   "repository": {

src/components/buttons/HdButton.vue

@@ -3,13 +3,19 @@
     v-on="$listeners"
     :class="computedClasses"
   >
+    <HdIcon
+      v-if="iconSrc"
+      :src="iconSrc"
+      class="btn__icon"
+    />
     <slot />
   </button>
 </template>
 
 <script>
+import HdIcon from 'homeday-blocks/src/components/HdIcon.vue';
+
 export const TYPES = {
-  DEFAULT: '',
   PRIMARY: 'primary',
   SECONDARY: 'secondary',
   TERTIARY: 'tertiary',
@@ -19,16 +25,27 @@ export const TYPES = {
 
 export default {
   name: 'HdButton',
+  components: {
+    HdIcon,
+  },
   props: {
     modifier: {
       type: String,
-      default: TYPES.DEFAULT,
+      default: TYPES.PRIMARY,
       validator(value) {
         const allTypes = Object.values(TYPES);
 
         return allTypes.includes(value);
       },
     },
+    isInDarkBackground: {
+      type: Boolean,
+      default: false,
+    },
+    iconSrc: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     computedClasses() {
@@ -39,14 +56,24 @@ export default {
         classes.push(`${baseClass}--${this.modifier}`);
       }
 
+      if (this.isInDarkBackground) {
+        classes.push(`${baseClass}--dark-background`);
+      }
+
       return classes;
     },
   },
 };
 </script>
 
-<style lang="scss" scoped>
-.btn {
-  width: 100%;
+<style lang="scss">
+@import 'homeday-blocks/src/styles/_variables.scss';
+
+.btn__icon {
+  margin-right: $inline-xs;
+
+  path {
+    fill: currentColor;
+  }
 }
 </style>

src/stories/HdButton.stories.js

@@ -1,12 +1,14 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { storiesOf } from '@storybook/vue';
 import { action } from '@storybook/addon-actions';
-import { text, select } from '@storybook/addon-knobs';
+import { text, boolean, select } from '@storybook/addon-knobs';
 import {
   HdButton,
   HdButtonTypes as TYPES,
 } from 'homeday-blocks';
 
+import { plusIcon } from 'homeday-blocks/src/assets/small-icons';
+
 const stories = storiesOf('Components|HdButton', module);
 
 Object.entries(TYPES)
@@ -38,14 +40,57 @@ stories
         type: String,
         default: select('Modifier', Object.values(TYPES), TYPES.default),
       },
+      isInDarkBackground: {
+        default: boolean('Dark background', false),
+      },
+      disabled: {
+        default: boolean('Disabled', false),
+      },
+      showIcon: {
+        default: boolean('Show icon', false),
+      },
+    },
+    data() {
+      return {
+        plusIcon,
+        styleWrapper: {
+          position: 'relative',
+          width: '100vw',
+          height: '100vh',
+          padding: '50px',
+        },
+        styleDarkBackground: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          backgroundColor: '#1C3553',
+          zIndex: -1,
+        },
+      };
     },
     methods: {
       onClick: action('onClick'),
     },
     template: `
-      <HdButton
-        :modifier=modifier
-        @click="onClick"
-      >{{ text }}</HdButton>
+      <div :style="styleWrapper">
+        <HdButton
+          v-if="showIcon"
+          :modifier=modifier
+          :isInDarkBackground=isInDarkBackground
+          :disabled=disabled
+          @click="onClick"
+          :iconSrc=plusIcon
+        >{{ text }}</HdButton>
+        <HdButton
+          v-else
+          :modifier=modifier
+          :isInDarkBackground=isInDarkBackground
+          :disabled=disabled
+          @click="onClick"
+        >{{ text }}</HdButton>
+        <div v-if="isInDarkBackground" :style="styleDarkBackground" />
+      </div>
     `,
   }), { percy: { skip: true } });