OHRM5X-1627: OXD 1.0.6 Release (#484)

* OHRM5X-778: Add localization date format support to date input (#287) * OHRM5X-1355: Add OXD-Color input field (#292) * OHRM5X-1385: Add thumbs up/down icons (#341) * OHRM5X-1456: Change variables for OXD theming (#363) * OHRM5X-1352: Add social media svg icons (#371) * OHRM5X-377: Fix general defects (#378) * OHRM5X-390: OXD Grid side margin fix to allow grid content alignment in card * OHRM5X-379: OXD sheet/table filter padding fixes * OHRM5X-378: OXD Grid remove verticle paddings * OHRM5X-629: OXD Dialog style issue fixes * OHRM5X-1481: Fix color input TouchEvent undefined issue in Firefox (#387) * OHRM5X-629: OXD Dialog gutters prop added * OHRM5X-1481: OXD Color fix Firefox issue with TouchEvent undefined * OHRM5X-377: OXD Form prevents showing errors while loading * OHRM5X-1501: Upload jest coverage artifacts (#402) * OHRM5X-1500: Support 8 columns grid (#408) * OHRM5X-1500: OXD Grid add 8 column support * OHRM5X-1402: OXD multiselect autocomplete selected items are removed on backspace fix * OHRM5X-1491: Improve useResponsive composable (#434) * OHRM5X-1507: Add SVG client logo & banner support to layout (#449) * OHRM5X-1507: Add SVG support for layout * OHRM5X-1507: Append version to title * OHRM5X-1507: Change storybook favicon * OHRM5X-1586: Prevent OXD Form validation of disabled fields (#458) * OHRM5X-1588: Validate date input value with display date format (#463) * OHRM5X-1628: Bump version to 1.0.6 (#483) Co-authored-by: devishke-orange <[email protected]> Co-authored-by: Rajitha Kumara <[email protected]>
orangehrm · Jul 22, 2022 · 5bcfab9 · 5bcfab9
1 parent 3fac47b
commit 5bcfab9
Show file tree

Hide file tree

Showing 95 changed files with 3,063 additions and 308 deletions.
diff --git a/.github/workflows/linting.yml b/.github/workflows/linting.yml
@@ -3,7 +3,7 @@ name: Lint
 on: [push, pull_request]
 
 jobs:
-  build:
+  lint:
     runs-on: ubuntu-latest
 
     steps:

diff --git a/.github/workflows/unit-tests.yml b/.github/workflows/unit-tests.yml
@@ -3,12 +3,19 @@ name: Unit Tests
 on: [push, pull_request]
 
 jobs:
-  build:
+  test:
     runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v2
       - name: Install npm dependencies
         run: yarn install
+
       - name: Unit tests
-        run: yarn workspace oxd-components test:unit
+        run: yarn workspace oxd-components test:unit --coverage
+
+      - name: Upload jest coverage
+        uses: actions/upload-artifact@v2
+        with:
+          name: jest-coverage
+          path: components/coverage
diff --git a/components/jest.config.js b/components/jest.config.js
@@ -3,4 +3,5 @@ module.exports = {
   transform: {
     '^.+\\.vue$': 'vue-jest',
   },
+  coverageReporters: ['html'],
 };
diff --git a/components/package.json b/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "oxd-components",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "license": "GPL-3.0",
   "scripts": {
     "test:unit": "vue-cli-service test:unit",

diff --git a/components/src/assets/images/orangehrm-logo.png b/components/src/assets/images/orangehrm-logo.png
diff --git a/components/src/composables/__tests__/useResponsive.spec.ts b/components/src/composables/__tests__/useResponsive.spec.ts
@@ -0,0 +1,135 @@
+/*
+ * This file is part of OrangeHRM Inc
+ *
+ * Copyright (C) 2020 onwards OrangeHRM Inc
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see  http://www.gnu.org/licenses
+ */
+
+import {nextTick, toRefs} from 'vue';
+import {shallowMount} from '@vue/test-utils';
+import useResponsive, {DEVICE_XL, DEVICE_XS} from '../useResponsive';
+
+describe('components/src/composables/useResponsive', () => {
+  const addEventListener = jest.spyOn(window, 'addEventListener');
+  const removeEventListener = jest.spyOn(window, 'removeEventListener');
+
+  beforeEach(() => {
+    Object.defineProperty(window, 'innerHeight', {
+      writable: true,
+      configurable: true,
+      value: 1080,
+    });
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 1920,
+    });
+  });
+
+  it('sets event handler for resize event', async () => {
+    shallowMount({
+      setup() {
+        useResponsive();
+      },
+      template: '<div></div>',
+    });
+    await nextTick();
+    expect(addEventListener).toHaveBeenCalled();
+  });
+
+  it('remove event handler for resize event', async () => {
+    shallowMount({
+      setup() {
+        useResponsive();
+      },
+      template: '<div></div>',
+    }).unmount();
+    await nextTick();
+    expect(removeEventListener).toHaveBeenCalled();
+  });
+
+  it('returns correct window height & width on mount', async () => {
+    const wrapper = shallowMount({
+      setup() {
+        const responsiveState = useResponsive();
+        return {
+          ...toRefs(responsiveState),
+        };
+      },
+      template: '<div></div>',
+    });
+    await nextTick();
+
+    expect(wrapper.vm.windowWidth).toStrictEqual(1920);
+    expect(wrapper.vm.windowHeight).toStrictEqual(1080);
+  });
+
+  it('update window height & width on resize', async () => {
+    const wrapper = shallowMount({
+      setup() {
+        const responsiveState = useResponsive();
+        return {
+          ...toRefs(responsiveState),
+        };
+      },
+      template: '<div></div>',
+    });
+
+    Object.defineProperty(window, 'innerHeight', {
+      writable: true,
+      configurable: true,
+      value: 720,
+    });
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 1280,
+    });
+    window.dispatchEvent(new Event('resize'));
+    await nextTick();
+
+    expect(wrapper.vm.windowWidth).toStrictEqual(1280);
+    expect(wrapper.vm.windowHeight).toStrictEqual(720);
+  });
+
+  it('update screen type on resize', async () => {
+    const wrapper = shallowMount({
+      setup() {
+        const responsiveState = useResponsive();
+        return {
+          ...toRefs(responsiveState),
+        };
+      },
+      template: '<div></div>',
+    });
+    await nextTick();
+    expect(wrapper.vm.screenType).toStrictEqual(DEVICE_XL);
+
+    Object.defineProperty(window, 'innerHeight', {
+      writable: true,
+      configurable: true,
+      value: 320,
+    });
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 568,
+    });
+    window.dispatchEvent(new Event('resize'));
+    await nextTick();
+
+    expect(wrapper.vm.screenType).toStrictEqual(DEVICE_XS);
+  });
+});
diff --git a/components/src/composables/useField.ts b/components/src/composables/useField.ts
@@ -28,6 +28,7 @@ export default function useField(fieldContext: {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   modelValue: Ref<any>;
   onReset: () => Promise<void>;
+  disabled: Ref<boolean>;
 }) {
   const form = injectStrict<FormAPI>(formKey);
   const cid = ref<string>(nanoid());
@@ -38,6 +39,10 @@ export default function useField(fieldContext: {
   let watchHandler: WatchStopHandle;
 
   const validate = () => {
+    if (fieldContext.disabled.value) {
+      return Promise.resolve({cid: cid.value, errors: []});
+    }
+
     processing.value = true;
     const allValidations = Promise.all(
       fieldContext.rules.map(func => {

diff --git a/components/src/composables/useFormValidation.ts b/components/src/composables/useFormValidation.ts
@@ -17,7 +17,7 @@
  * along with this program.  If not, see  http://www.gnu.org/licenses
  */
 
-import {provide, reactive, toRefs, unref} from 'vue';
+import {provide, reactive, Ref, toRefs, unref} from 'vue';
 import {
   ErrorBag,
   ErrorField,
@@ -32,13 +32,14 @@ interface State {
   errorbag: ErrorBag;
 }
 
-export default function useFormValidation() {
+export default function useFormValidation(isLoading: Ref<boolean>) {
   const formState: State = reactive({
     fieldset: [],
     errorbag: [],
   });
 
   const searchErrors = (id: string) => {
+    if (isLoading.value === true) return [];
     return formState.errorbag.filter(item => {
       return item.cid === id;
     });

diff --git a/components/src/composables/useResponsive.ts b/components/src/composables/useResponsive.ts
@@ -69,8 +69,8 @@ export default function useResponsive() {
   });
 
   const setWindowSize = () => {
-    const width = document.documentElement.clientWidth;
-    const height = document.documentElement.clientHeight;
+    const width = window.innerWidth;
+    const height = window.innerHeight;
     state.windowWidth = width;
     state.windowHeight = height;
     for (const screenType in breakpoints) {

diff --git a/components/src/core/components/Button/Icon.vue b/components/src/core/components/Button/Icon.vue
@@ -21,17 +21,18 @@
 
 <template>
   <button
-    :disabled="disabled"
     v-if="withContainer"
-    type="button"
+    :disabled="disabled"
     :class="classes"
+    type="button"
     @click="onClick"
   >
-    <oxd-icon :class="{'--disabled': disabled}" :name="name" />
+    <oxd-icon :class="{'--disabled': disabled}" :name="name" :type="iconType" />
   </button>
   <oxd-icon
     v-else
     :name="name"
+    :type="iconType"
     :class="{'oxd-icon-button__icon': true, '--disabled': disabled}"
     @click="onClick"
   />
@@ -40,6 +41,7 @@
 <script lang="ts">
 import {defineComponent} from 'vue';
 import {ICON_TYPES, ButtonType} from './types';
+import {TYPE_BOOTSTRAP, TYPES} from '../Icon/types';
 import Icon from '@ohrm/oxd/core/components/Icon/Icon.vue';
 
 export default defineComponent({
@@ -69,6 +71,13 @@ export default defineComponent({
         return !value || ICON_TYPES.indexOf(value) !== -1;
       },
     },
+    iconType: {
+      type: String,
+      default: TYPE_BOOTSTRAP,
+      validator: (value: string) => {
+        return TYPES.indexOf(value) !== -1;
+      },
+    },
   },
 
   emits: ['click'],

diff --git a/components/src/core/components/Button/__tests__/__snapshots__/icon-button.spec.ts.snap b/components/src/core/components/Button/__tests__/__snapshots__/icon-button.spec.ts.snap
@@ -2,4 +2,4 @@
 
 exports[`Button > Icon.vue should renders OXD icon button 1`] = `<i class="oxd-icon bi-trash oxd-icon-button__icon"></i>`;
 
-exports[`Button > Icon.vue should renders OXD icon button with container 1`] = `<button type="button" class="oxd-icon-button"><i class="oxd-icon bi-trash"></i></button>`;
+exports[`Button > Icon.vue should renders OXD icon button with container 1`] = `<button class="oxd-icon-button" type="button"><i class="oxd-icon bi-trash"></i></button>`;
diff --git a/components/src/core/components/Button/_mixins.scss b/components/src/core/components/Button/_mixins.scss
@@ -15,31 +15,30 @@
 // You should have received a copy of the GNU General Public License
 // along with this program.  If not, see  http://www.gnu.org/licenses
 
-@mixin oxd-button-color($background-color) {
-  color: $oxd-button-font-color;
-  background-color: $background-color;
-}
-
 @mixin oxd-button-solid($type: 'main') {
   @include oxd-button-base;
   $oxd-button: map-get($oxd-solid-buttons, $type);
-
-  @include oxd-button-color(map-get($oxd-button, 'active'));
+  color: map-get($oxd-button, 'font');
+  background-color: map-get($oxd-button, 'active');
 
   &:focus {
-    @include oxd-button-color(map-get($oxd-button, 'focus'));
+    color: map-get($oxd-button, 'font');
+    background-color: map-get($oxd-button, 'focus');
   }
 
   &:hover {
-    @include oxd-button-color(map-get($oxd-button, 'hover'));
+    color: map-get($oxd-button, 'font');
+    background-color: map-get($oxd-button, 'hover');
   }
 
   &:active {
-    @include oxd-button-color(map-get($oxd-button, 'pressed'));
+    color: map-get($oxd-button, 'font');
+    background-color: map-get($oxd-button, 'pressed');
   }
 
   &:disabled {
-    @include oxd-button-color(map-get($oxd-button, 'inactive'));
+    color: map-get($oxd-button, 'font');
+    background-color: map-get($oxd-button, 'inactive');
   }
 }
 
@@ -135,33 +134,31 @@
   $oxd-icon-button-color: map-get($oxd-list-button-pallete, $type);
 
   color: $oxd-icon-button-color;
-  background-color: rgba($oxd-icon-button-color, 0.1);
+  background-color: map-get($oxd-list-button-pallete, '#{$type}-alpha-10');
 
   &:focus,
   &:hover {
     outline: 0;
-    background-color: rgba($oxd-icon-button-color, 0.15);
+    background-color: map-get($oxd-list-button-pallete, '#{$type}-alpha-15');
   }
 
   &:active {
-    background-color: rgba($oxd-icon-button-color, 0.2);
+    background-color: map-get($oxd-list-button-pallete, '#{$type}-alpha-20');
   }
 }
 
 @mixin oxd-icon-button-solid($type: 'default') {
-  $oxd-icon-bg-color: map-get($oxd-list-button-pallete, $type);
-
   color: $oxd-white-color;
-  background-color: $oxd-icon-bg-color;
+  background-color: map-get($oxd-list-button-pallete, $type);
 
   &:focus,
   &:hover {
     outline: 0;
-    background-color: lighten($oxd-icon-bg-color, 5%);
+    background-color: map-get($oxd-list-button-pallete, '#{$type}-lighten-5');
   }
 
   &:active {
-    background-color: darken($oxd-icon-bg-color, 5%);
+    background-color: map-get($oxd-list-button-pallete, '#{$type}-darken-5');
   }
 }
 
@@ -175,13 +172,13 @@
   &:focus,
   &:hover {
     outline: 0;
-    color: lighten($oxd-icon-color, 5%);
-    border: $oxd-border lighten($oxd-icon-color, 5%);
+    color: map-get($oxd-list-button-pallete, '#{$type}-lighten-5');
+    border: $oxd-border map-get($oxd-list-button-pallete, '#{$type}-lighten-5');
   }
 
   &:active {
-    color: lighten($oxd-icon-color, 5%);
-    border: $oxd-border lighten($oxd-icon-color, 5%);
+    color: map-get($oxd-list-button-pallete, '#{$type}-lighten-5');
+    border: $oxd-border map-get($oxd-list-button-pallete, '#{$type}-lighten-5');
   }
 
   &:disabled {
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,7 @@ name: Lint @@
     on: [push, pull_request]
     jobs:
-      build:
+      lint:
         runs-on: ubuntu-latest
         steps:
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,4 @@

		exports[`Button > Icon.vue should renders OXD icon button 1`] = `<i class="oxd-icon bi-trash oxd-icon-button__icon"></i>`;

		exports[`Button > Icon.vue should renders OXD icon button with container 1`] = `<button type="button" class="oxd-icon-button"><i class="oxd-icon bi-trash"></i></button>`;
		exports[`Button > Icon.vue should renders OXD icon button with container 1`] = `<button class="oxd-icon-button" type="button"><i class="oxd-icon bi-trash"></i></button>`;