LAN-1007: Add new timezone icon to OXD Icons and new OXD Linear Progr…

…ess component (#777)

* Add "oxdTimeZone" icon

* Add linear progress bar component

* Update changelog.md

* Modify variables

* Add code improvements

---------

Co-authored-by: shachiniM <shachini@orangehrmlive.com>

changelog.md

@@ -1,3 +1,7 @@
+2024-05-06 - 78c22c31a971adbf9a9c146f871994bcf7eaa648 - components/LinearProgress/LinearProgress.vue - Add new component LinearProgress to support linear progress
+
+2024-05-06 - e9f660cd0022162a017d8fc58f7690cba72be1af - Icon/icons.ts - Add oxd-time-zone icon
+
 2024-05-03 - 0730e0e90cdeea36fd64f7d5fd3e3aaf01a138d6 - Icon/icons.ts - Add oxd-shortlist icon
 
 2024-04-29 - 61f578cf1dcbff808e64ba8b915fb853a74d2932 - Input/FileInput.vue - File input create output file for 0 byte files

components/src/core/components/Icon/icons.ts

@@ -1531,6 +1531,16 @@ export const oxdShortlist: icon = {
   </svg>`,
 };
 
+export const oxdTimeZone: icon = {
+  name: 'oxd-time-zone',
+  value: `<svg width="100%" height="100%" viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg">
+  <path style="fill:currentColor" d="M9,24H1a1,1,0,0,1,0-2H9a1,1,0,0,1,0,2Z
+  M7,20H1a1,1,0,0,1,0-2H7a1,1,0,0,1,0,2Z
+  M5,16H1a1,1,0,0,1,0-2H5a1,1,0,0,1,0,2Z
+  M13,23.955a1,1,0,0,1-.089-2A10,10,0,1,0,2.041,11.09a1,1,0,0,1-1.992-.18A12,12,0,0,1,24,12,11.934,11.934,0,0,1,13.09,23.951C13.06,23.954,13.029,23.955,13,23.955Z
+  M12,6a1,1,0,0,0-1,1v5a1,1,0,0,0,.293.707l3,3a1,1,0,0,0,1.414-1.414L13,11.586V7A1,1,0,0,0,12,6Z"/></svg>`,
+};
+
 const icons: Icons = {
   'oxd-likes': oxdLikes,
   'oxd-birthday': oxdBirthday,
@@ -1705,6 +1715,7 @@ const icons: Icons = {
   'oxd-move-down': oxdMoveDown,
   'oxd-tick-circle': oxdTickCircle,
   'oxd-shortlist': oxdShortlist,
+  'oxd-time-zone': oxdTimeZone,
 };
 
 export default icons;

components/src/core/components/LinearProgress/LinearProgress.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="oxd-linear-progress-wrapper">
+    <div
+      class="oxd-progress oxd-linear-progress-outer"
+      :style="customProgressBarBackgroundStyles"
+    >
+      <div
+        class="oxd-linear-progress-inner"
+        :style="customProgressBarFillStyles"
+      ></div>
+    </div>
+    <span
+      v-if="showPercentageValue"
+      class="oxd-linear-progress-value"
+      :style="progressPercentageValueStyles"
+    >
+      {{ progressPercentage }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent} from 'vue';
+
+export default defineComponent({
+  name: 'oxd-linear-progress',
+
+  props: {
+    progressValue: {
+      type: Number,
+      default: 0,
+    },
+    showPercentageValue: {
+      type: Boolean,
+      default: false,
+    },
+    progressBarHeight: {
+      type: String,
+    },
+    progressBarFillColor: {
+      type: String,
+    },
+    progressBarBackgroundColor: {
+      type: String,
+    },
+    progressPercentageValueStyles: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  setup: function(props) {
+    const progressPercentage = computed(() => {
+      if (props.progressValue > 0)
+        return `${Math.min(props.progressValue, 100)}%`;
+      return '0%';
+    });
+
+    const customProgressBarFillStyles: object = computed(() => ({
+      '--progress-value': progressPercentage.value,
+      ...(props.progressBarFillColor && {
+        'background-color': props.progressBarFillColor,
+      }),
+      ...(props.progressBarHeight && {
+        height: props.progressBarHeight,
+      }),
+    }));
+
+    const customProgressBarBackgroundStyles: object = computed(() => ({
+      ...(props.progressBarBackgroundColor && {
+        'background-color': props.progressBarBackgroundColor,
+      }),
+      ...(props.progressBarHeight && {
+        height: props.progressBarHeight,
+      }),
+    }));
+    return {
+      progressPercentage,
+      customProgressBarFillStyles,
+      customProgressBarBackgroundStyles,
+    };
+  },
+});
+</script>
+
+<style src="./linear-progress.scss" lang="scss" scoped></style>

components/src/core/components/LinearProgress/__tests__/linearProgress.spec.ts

@@ -0,0 +1,96 @@
+import {mount} from '@vue/test-utils';
+import LinearProgress from '@orangehrm/oxd/core/components/LinearProgress/LinearProgress.vue';
+
+describe('LinearProgress.vue', () => {
+  it('renders OXD LinearProgress with default values', () => {
+    const wrapper = mount(LinearProgress);
+    expect(wrapper.find('.oxd-linear-progress-outer').exists()).toBeTruthy();
+    expect(wrapper.find('.oxd-linear-progress-inner').exists()).toBeTruthy();
+    expect(wrapper.find('.oxd-linear-progress-value').exists()).toBeFalsy();
+    expect(
+      wrapper.find('.oxd-linear-progress-inner').attributes('style'),
+    ).toContain('--progress-value: 0%');
+  });
+
+  it('renders OXD LinearProgress with custom value', () => {
+    const wrapper = mount(LinearProgress, {
+      props: {progressValue: '60'},
+    });
+    expect(
+      wrapper.find('.oxd-linear-progress-inner').attributes('style'),
+    ).toContain('--progress-value: 60%');
+  });
+
+  it('show progress value as a percentage', () => {
+    const wrapper = mount(LinearProgress, {
+      props: {progressValue: 60, showPercentageValue: true},
+    });
+    expect(wrapper.find('.oxd-linear-progress-value').exists()).toBeTruthy();
+  });
+
+  it('renders oxd progress bar with custom styles', () => {
+    const wrapper = mount(LinearProgress, {
+      props: {
+        progressValue: 55,
+        showPercentageValue: true,
+        progressBarHeight: '20px',
+        progressBarFillColor: '#17a954',
+        progressBarBackgroundColor: '#ff7b1d',
+        progressPercentageValueStyles: {
+          'font-size': '15px',
+          color: '#eb0910',
+        },
+      },
+    });
+    expect(
+      wrapper.find('.oxd-linear-progress-inner').attributes('style'),
+    ).toContain('--progress-value: 55%');
+    expect(
+      wrapper.find('.oxd-linear-progress-outer').attributes('style'),
+    ).toContain('background-color: rgb(255, 123, 29)');
+    expect(
+      wrapper.find('.oxd-linear-progress-outer').attributes('style'),
+    ).toContain('height: 20px');
+    expect(
+      wrapper.find('.oxd-linear-progress-inner').attributes('style'),
+    ).toContain('height: 20px');
+    expect(
+      wrapper.find('.oxd-linear-progress-inner').attributes('style'),
+    ).toContain('background-color: rgb(23, 169, 84)');
+    expect(
+      wrapper.find('.oxd-linear-progress-value').attributes('style'),
+    ).toContain('font-size: 15px');
+    expect(
+      wrapper.find('.oxd-linear-progress-value').attributes('style'),
+    ).toContain('color: rgb(235, 9, 16)');
+    expect(wrapper.find('.oxd-linear-progress-value').text()).toStrictEqual(
+      '55%',
+    );
+  });
+
+  it('when the percentage value is empty', () => {
+    const wrapper = mount(LinearProgress, {
+      props: {progressValue: '', showPercentageValue: true},
+    });
+    expect(wrapper.find('.oxd-linear-progress-value').text()).toStrictEqual(
+      '0%',
+    );
+  });
+
+  it('when the percentage value is greater than 100', () => {
+    const wrapper = mount(LinearProgress, {
+      props: {progressValue: 105, showPercentageValue: true},
+    });
+    expect(wrapper.find('.oxd-linear-progress-value').text()).toStrictEqual(
+      '100%',
+    );
+  });
+  it('when the percentage value is less than 0', () => {
+    const wrapper = mount(LinearProgress, {
+      props: {progressValue: -10, showPercentageValue: true},
+    });
+    expect(wrapper.find('.oxd-linear-progress-value').text()).toStrictEqual(
+      '0%',
+    );
+  });
+});

components/src/core/components/LinearProgress/_variables.scss

@@ -0,0 +1,9 @@
+$oxd-linear-progress-background-color: $oxd-interface-gray-lighten-1-color !default;
+$oxd-linear-progress-fill-color: $oxd-interface-gray-darken-1-color !default;
+$oxd-linear-progress-value-text-color: $oxd-interface-gray-darken-1-color !default;
+
+$oxd-linear-progress-bar-height: 8px !default;
+$oxd-linear-progress-bar-radius: 4px !default;
+
+$oxd-linear-progress-value-text-size: 12px !default;
+$oxd-linear-progress-value-text-weight: 800 !default;

components/src/core/components/LinearProgress/linear-progress.scss

@@ -0,0 +1,35 @@
+@import "../../../styles";
+@import 'variables';
+
+.oxd-linear-progress-wrapper {
+  display: flex;
+  align-items: center;
+  .oxd-linear-progress-outer {
+    background-color: $oxd-linear-progress-background-color;
+    height: $oxd-linear-progress-bar-height;
+    border-radius: $oxd-linear-progress-bar-radius;
+    width: 100%;
+  }
+
+  .oxd-progress {
+    margin: 0;
+  }
+
+  .oxd-progress .oxd-linear-progress-inner {
+    background-color: $oxd-linear-progress-fill-color;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    height: $oxd-linear-progress-bar-height;
+    width: var(--progress-value);
+    border-radius: $oxd-linear-progress-bar-radius;
+    transition: width 0.8s;
+  }
+
+  .oxd-linear-progress-value {
+    color: $oxd-linear-progress-value-text-color;
+    font-size: $oxd-linear-progress-value-text-size;
+    font-weight: $oxd-linear-progress-value-text-weight;
+    margin-left: 0.25rem;
+  }
+}

storybook/stories/core/components/LinearProgress/LinearProgress.stories.js

@@ -0,0 +1,109 @@
+import LinearProgress from '@orangehrm/oxd/core/components/LinearProgress/LinearProgress.vue';
+
+export default {
+  title: 'Information/LinearProgress',
+  component: LinearProgress,
+  argTypes: {
+    progressValue: {
+      control: {type: 'number'},
+      table: {
+        type: {summary: 'Progress valus as a percentage'},
+      },
+      defaultValue: 0
+    },
+    showPercentageValue: {
+      control: {type: 'boolean'},
+      table: {
+        type: {summary: 'Whether to show the percentage value or not'},
+      },
+      defaultValue: false
+    },
+    progressBarHeight: {
+      control: {type: 'text'},
+      table: {
+        type: {summary: 'Height of the progress bar'},
+      },
+      defaultValue: '8px'
+    },
+    progressBarFillColor: {
+      control: {type: 'text'},
+      table: {
+        type: {summary: 'Fill color of the progress bar'},
+      },
+    },
+    progressBarBackgroundColor: {
+      control: {type: 'text'},
+      table: {
+        type: {summary: 'Background color of the progress bar'},
+      },
+    },
+    progressPercentageValueStyles: {
+      control: {type: 'object'},
+      table: {
+        type: {summary: 'Custom style object for the percenage value'},
+      },
+    }
+  }}
+
+  const Template = (args) => ({
+    setup() {
+      return {args};
+    },
+    components: {'oxd-linear-progress': LinearProgress},
+    template: '<oxd-linear-progress v-bind="args"> </oxd-linear-progress>',
+  });
+
+  export const Default = Template.bind({});
+  Default.parameters = {
+    docs: {
+      source: {
+        code: '<oxd-linear-progress/>',
+      },
+    },
+  };
+
+  export const CustomProgressValue = Template.bind({});
+  CustomProgressValue.args = {
+    progressValue: 20,
+  };
+  CustomProgressValue.parameters = {
+    docs: {
+      source: {
+        code: '<oxd-progress-circle :progressValue=20/>',
+      },
+    },
+  };
+
+  export const ShowPercentageValue = Template.bind({});
+  ShowPercentageValue.args = {
+    progressValue: 55,
+    showPercentageValue: true,
+  };
+  ShowPercentageValue.parameters = {
+    docs: {
+      source: {
+        code: '<oxd-progress-circle :progressValue=55 :showPercentageValue=true />',
+      },
+    },
+  };
+  export const CustomProgressBarStyles = Template.bind({});
+  CustomProgressBarStyles.args = {
+    progressValue: 55,
+    showPercentageValue: true,
+    progressBarHeight: '20px',
+    progressBarFillColor: '#17a954',
+    progressBarBackgroundColor: '#ff7b1d',
+    progressPercentageValueStyles: {
+      'font-size': '15px',
+      'color': '#eb0910'
+    }
+  };
+  CustomProgressBarStyles.parameters = {
+    docs: {
+      source: {
+        code: '<oxd-progress-circle :progressValue=55 :showPercentageValue=true :progressBarHeight="20px"/>',
+      },
+    },
+  };
+
+