[Release] v11.1.0 #458

# Changelog

## Minor
- ✨ Browser autofill behavior (#457)
- ✨ validate only non-empty input value (#452)
- ✨ Gitmoji CLI hook (#448)
- ✨ enable html and obj on radio button (#441)

## Patch
- 💄 radio item gap to 16px (#454)
- 💄 disabled state on loader button (#442)
- 🔧 Add Lars to CODEOWNERS (#455)
- ⬆️🔒 Bump websocket-extensions from 0.1.3 to 0.1.4 (#451)
- 📝 Use homeday-blocks/ instead of homeday/ (#447)
- [B] Remove blurred transition of image slide on Gallery (#435)

.github/CODEOWNERS

@@ -1 +1 @@
-* @viniciuskneves @SinisaG @drapisarda @ilyasmez @aym3nb @volcanioo @leandroinacio @metal-gogo
+* @viniciuskneves @SinisaG @drapisarda @ilyasmez @aym3nb @volcanioo @leandroinacio @metal-gogo @LarsFe

package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeday-blocks",
-  "version": "11.0.1",
+  "version": "11.1.0",
   "description": "A Vue component library built by Homeday's frontend team.",
   "main": "main.js",
   "repository": {
@@ -67,6 +67,8 @@
     "dotenv": "^8.2.0",
     "eslint": "^6.5.1",
     "eslint-plugin-vue": "5.2.3",
+    "gitmoji-cli": "3.2.4",
+    "husky": "4.2.5",
     "lint-staged": "9.5.0",
     "node-fetch": "^2.6.0",
     "node-sass": "4.13.1",
@@ -81,9 +83,12 @@
     "*.json",
     "*.js"
   ],
-  "gitHooks": {
-    "pre-commit": "lint-staged",
-    "pre-push": "npm run test:unit"
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "prepare-commit-msg": "exec < /dev/tty && gitmoji --hook $HUSKY_GIT_PARAMS || true",
+      "pre-push": "npm run test:unit"
+    }
   },
   "lint-staged": {
     "*.js": [

src/components/buttons/HdLoaderButton.vue

@@ -12,6 +12,7 @@
       ref="button"
       :style="buttonStyles"
       class="btn btn--primary loaderButton__button"
+      :class="customClasses"
       @click="clicked"
       @keyup.enter.space="clicked"
       @transitionend="runTransitionQueue"
@@ -175,6 +176,11 @@ export default {
         borderWidth: setIfLoading(this.loadingCircleStrokeWidth),
       };
     },
+    customClasses() {
+      return {
+        'btn--primary-disabled': this.disabled,
+      };
+    },
   },
   watch: {
     loadedAmount(val) {
@@ -313,7 +319,7 @@ export default {
       pointer-events: none;
       width: 46px; /* make a circle */
       border-width: 4px;
-      border-color: getShade($quaternary-color, 50);;
+      border-color: getShade($quaternary-color, 50);
       border-style: solid;
       border-radius: 30px;
       background-color: transparent;

src/components/buttons/HdRadioButton.vue

@@ -32,7 +32,7 @@
         class="radioButton__icon"
       />
     </div>
-    <label :for="name" class="radioButton__label" v-text="label" />
+    <label :for="name" class="radioButton__label" v-html="label" />
     <HdIcon
       :src="chevronIcon"
       class="radioButton__chevron"
@@ -52,7 +52,7 @@ export default {
   props: {
     label: String,
     value: {
-      type: [String, Number],
+      type: [String, Number, Object],
       required: true,
     },
     name: {

src/components/form/HdInput.vue

@@ -194,36 +194,47 @@ export default {
     showError(errorMessage) {
       this.error = errorMessage;
       this.isValid = false;
+
+      return false;
     },
     showHelper(message) {
       this.helper = message;
     },
     hideError() {
       this.isValid = true;
       this.error = null;
+
+      return true;
     },
     validate() {
       if (this.required && this.isEmpty) {
-        this.showError(this.t.FORM.VALIDATION.REQUIRED);
-      } else if (this.currentType === 'email' && !validateEmail(this.value)) {
-        this.showError(this.t.FORM.VALIDATION.INVALID_EMAIL);
-      } else if (this.currentType === 'date' && !validateDate(this.value)) {
-        this.showError(this.t.FORM.VALIDATION.INVALID_DATE);
-      } else if (this.customRules.length && !this.isEmpty) {
-        this.validateCustomRules();
-      } else {
-        this.hideError();
+        return this.showError(this.t.FORM.VALIDATION.REQUIRED);
       }
 
-      return !this.error;
+      if (!this.isEmpty) {
+        if (this.currentType === 'email' && !validateEmail(this.value)) {
+          return this.showError(this.t.FORM.VALIDATION.INVALID_EMAIL);
+        }
+
+        if (this.currentType === 'date' && !validateDate(this.value)) {
+          return this.showError(this.t.FORM.VALIDATION.INVALID_DATE);
+        }
+
+        if (this.customRules.length) {
+          return this.validateCustomRules();
+        }
+      }
+
+      return this.hideError();
     },
     validateCustomRules() {
       const firstFailingRule = this.customRules.find(({ validate }) => !validate(this.value));
+
       if (firstFailingRule) {
-        this.showError(firstFailingRule.errorMessage);
-      } else {
-        this.hideError();
+        return this.showError(firstFailingRule.errorMessage);
       }
+
+      return this.hideError();
     },
   },
 };

src/components/form/HdRadio.vue

@@ -369,6 +369,10 @@ export default {
 
     .radio {
       margin-left: 0;
+
+      &:not(:first-child) {
+        margin-top: $stack-m;
+      }
     }
   }
 

src/components/gallery/HdGalleryMedia.vue

@@ -118,13 +118,12 @@ export default {
 
     &__thumbnail {
       opacity: 0;
-      transition: opacity ($time-s * 2) ease-in-out, transform .2s;
-      filter: blur(4px);
+      transition: opacity ($time-s * 2) ease-in-out;
+      filter: blur(3px);
 
       &.isVisible {
         opacity: 1;
         transition: none;
-        transform: scale(1.03);
       }
     }
   }

src/notes/HdIconFillFromClass.md

@@ -1,6 +1,6 @@
 **⚠️ The manipulation of the icons is not reactive.**
 
-Please note that the the icon's paths originally have the fill `#1C3553` with class `color-1` and `#1895FF` with class `color-2`.
+Please note that the icon's paths originally have the fill `#1C3553` with class `color-1` and `#1895FF` with class `color-2`.
 
 ### The component usage:
 

src/notes/HdLoaderButton.md

@@ -0,0 +1,4 @@
+**⚠️ The disabled option still triggers a "click" event.**
+
+Please note that the disabled prop will change the state and block clicks to trigger the animation, but still emits a click event.<br>
+This is working as designed, as some forms want to trigger long running processes for validations.

src/stories/HdLoaderButton.stories.js

@@ -3,9 +3,10 @@ import { storiesOf } from '@storybook/vue';
 import { action } from '@storybook/addon-actions';
 import { text, boolean, number } from '@storybook/addon-knobs';
 import { HdLoaderButton } from 'homeday-blocks';
+import hdLoaderButtonNote from '../notes/HdLoaderButton.md';
 
 storiesOf('Components|HdLoaderButton', module)
-  .add('Playground 🎛', () => ({
+  .add('Playground 📝🎛', () => ({
     components: { HdLoaderButton },
     props: {
       label: {
@@ -54,4 +55,6 @@ storiesOf('Components|HdLoaderButton', module)
       success: action('success'),
       error: action('error'),
     },
-  }));
+  }), {
+    notes: hdLoaderButtonNote,
+  });

src/stories/icons.stories.js

@@ -30,7 +30,7 @@ storiesOf('Assets|Icons', module)
     template: `
       <div>
         <vue-code-highlight>{{
-          'import { mailIcon } from "homeday/src/assets/small-icons";'
+          'import { mailIcon } from "homeday-blocks/src/assets/small-icons";'
         }}</vue-code-highlight>
         <section style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;">
           <div
@@ -59,7 +59,7 @@ storiesOf('Assets|Icons', module)
     template: `
       <div>
         <vue-code-highlight>{{
-          'import { mailIcon } from "homeday/src/assets/big-icons";'
+          'import { mailIcon } from "homeday-blocks/src/assets/big-icons";'
         }}</vue-code-highlight>
         <section style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;">
           <div
@@ -88,7 +88,7 @@ storiesOf('Assets|Icons', module)
     template: `
       <div>
         <vue-code-highlight>{{
-          'import { mailIcon } from "homeday/src/assets/bicolor-icons";'
+          'import { mailIcon } from "homeday-blocks/src/assets/bicolor-icons";'
         }}</vue-code-highlight>
         <section style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;">
           <div

src/styles/buttons.scss

@@ -75,14 +75,14 @@ $button-transition: all $time-s ease-in-out;
 
 .btn--primary[disabled],
 .btn--primary-disabled {
-  background-color: $quaternary-color;
-  color: getShade($quaternary-color, 50);
+  background-color: getShade($neutral-gray, 60);
+  color: $white;
   box-shadow: 0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);
   &:after {
     display: none;
   }
   &:hover, &:active, &:focus, &:active:focus {
-    background-color: $quaternary-color;
+    background-color: getShade($neutral-gray, 60);
     cursor: not-allowed;
     box-shadow: none;
     transform: none;

src/styles/inputs.scss

@@ -126,7 +126,7 @@ $focusedLabelTop: 5px;
     z-index: 9;
     pointer-events: none;
 
-    #{$f}--filled &, #{$f}--active &, #{$f}--select &, #{$f}--double & {
+    #{$f}--filled &, #{$f}--active &, #{$f}--select &, #{$f}--double &, #{$f}__input:-webkit-autofill + & {
       font-size: 14px;
       line-height: 18px;
       top: $focusedLabelTop;

tests/unit/components/buttons/HdLoaderButton.spec.js

@@ -105,4 +105,23 @@ describe('HdLoaderButton', () => {
 
     expect(clicked).toHaveBeenCalled();
   });
+
+  it('should toggle disabled class', async () => {
+    // Enabled
+    const disabledClass = 'btn--primary-disabled';
+    const wrapper = wrapperBuilder({
+      props: {
+        disabled: false,
+      },
+    });
+    const button = wrapper.get(BUTTON_SELECTOR);
+    expect(button.classes()).not.toContain(disabledClass);
+
+    // Disabled
+    wrapper.setProps({
+      disabled: true,
+    });
+    await wrapper.vm.$nextTick();
+    expect(button.classes()).toContain(disabledClass);
+  });
 });

tests/unit/components/form/HdInput.spec.js

@@ -105,11 +105,11 @@ describe('HdInput', () => {
     it('validates email', async () => {
       const VALID_EMAIL = '[email protected]';
       const INVALID_EMAIL = 'unvalid@email@com';
-      const wrapper = emailWrapperBuilder({
-        props: {
-          value: INVALID_EMAIL,
-        },
-      });
+      const wrapper = emailWrapperBuilder();
+
+      expect(wrapper.vm.validate()).toBe(true);
+
+      wrapper.setProps({ value: INVALID_EMAIL });
 
       expect(wrapper.vm.validate()).toBe(false);
 
@@ -143,11 +143,11 @@ describe('HdInput', () => {
     it('validates date', async () => {
       const VALID_DATE = '1990-01-01';
       const INVALID_DATE = '01-01-1990';
-      const wrapper = dateWrapperBuilder({
-        props: {
-          value: INVALID_DATE,
-        },
-      });
+      const wrapper = dateWrapperBuilder();
+
+      expect(wrapper.vm.validate()).toBe(true);
+
+      wrapper.setProps({ value: INVALID_DATE });
 
       expect(wrapper.vm.validate()).toBe(false);