@eturnity/eturnity_reusable_components 8.22.23-EPDM-15547.4 → 8.22.23-EPDM-13618.2

package/src/components/dropdown/defaultProps.js

@@ -0,0 +1,7 @@
+const defaultProps = {
+  // info card content slot
+  trigger: 'TRIGGER BUTTON',
+  dropdown: `<div>DROPDOWN OPTION 1</div><div>DROPDOWN OPTION 2</div>`,
+}
+
+export default defaultProps

package/src/components/dropdown/dropdown.spec.js

@@ -0,0 +1,55 @@
+import { mount } from '@vue/test-utils'
+import RCDropdown from '@/components/dropdown'
+import defaultProps from './defaultProps'
+import theme from '@/assets/theme'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  // need to mock this due to how jest handles import.meta
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+describe('dropdown/index.vue', () => {
+  it('dropdown is rendered with correct trigger text', async () => {
+    const wrapper = mount(RCDropdown, {
+      props: { ...defaultProps },
+      slots: { ...defaultProps },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const dropdownTrigger = wrapper.find('[data-test-id="dropdown_trigger"]')
+
+    expect(dropdownTrigger.exists()).toBe(true)
+    expect(dropdownTrigger.text()).toContain(defaultProps.trigger)
+  })
+
+  it('dropdown opens on click only', async () => {
+    const wrapper = mount(RCDropdown, {
+      props: { ...defaultProps, openingMode: 'click' },
+      slots: { ...defaultProps },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const dropdownTrigger = wrapper.find('[data-test-id="dropdown_trigger"]')
+    const dropdownDropdownWrapper = wrapper.find(
+      '[data-test-id="dropdown_dropdown_wrapper"]'
+    )
+
+    expect(dropdownDropdownWrapper.classes('openDropdown')).toBe(false)
+
+    await dropdownTrigger.trigger('hover')
+
+    expect(dropdownDropdownWrapper.classes('openDropdown')).toBe(false)
+
+    await dropdownTrigger.trigger('click')
+
+    expect(dropdownDropdownWrapper.classes('openDropdown')).toBe(true)
+  })
+})

package/src/components/dropdown/index.vue

@@ -1,18 +1,26 @@
 <template>
-  <Wrapper ref="dropdown" :opening-mode="openingMode">
-    <WrapperButton @click="isOpenByClick = !isOpenByClick">
+  <Wrapper
+    data-test-id="dropdown_wrapper"
+    ref="dropdown"
+    :opening-mode="openingMode"
+  >
+    <WrapperButton
+      data-test-id="dropdown_trigger"
+      @click="toggleIsOpenByClick(!isOpenByClick)"
+    >
       <slot name="trigger"></slot>
     </WrapperButton>
     <WrapperDropdown
       :background-color="backgroundColor"
       class="dropdown-content"
-      :class="{ openDropdown: isOpenByClick && openingMode == 'click' }"
+      :class="{ openDropdown: isOpenByClick && openingMode === 'click' }"
+      data-test-id="dropdown_dropdown_wrapper"
       :justify="justify"
-      :position="position"
       :width="width"
     >
       <DropdownWindow
         :background-color="backgroundColor"
+        data-test-id="dropdown_dropdown_content"
         :gap="gap"
         :width="width"
       >
@@ -23,14 +31,6 @@
 </template>
 
 <script>
-  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
-  //  How to use:
-  //<DropdownComponent
-  //    width="300px"
-  //    backgroundColor="red">
-
-  // <DropdownComponent/>
-
   import styled from 'vue3-styled-components'
 
   const wrapperAttrs = {
@@ -45,11 +45,11 @@
     position: relative;
 
     &:hover .dropdown-content {
-      ${(props) => (props.openingMode == 'hover' ? 'display:block' : '')}
+      ${(props) => (props.openingMode === 'hover' ? 'display: block;' : '')}
     }
     & .openDropdown {
       ${(props) =>
-        props.openingMode == 'click' ? 'display:block !important' : ''}
+        props.openingMode === 'click' ? 'display: block !important;' : ''}
     }
   `
   const WrapperDropdown = styled('div', wrapperAttrs)`
@@ -57,7 +57,7 @@
     display: none;
     position: absolute;
     z-index: 1;
-    ${(props) => (props.justify == 'right' ? 'right:0;' : '')}
+    ${(props) => (props.justify === 'right' ? 'right: 0;' : '')}
   `
   const DropdownWindow = styled('div', wrapperAttrs)`
     width: ${(props) => props.width};
@@ -86,26 +86,27 @@
     props: {
       width: {
         required: false,
+        type: String,
         default: '300px',
       },
       gap: {
         required: false,
+        type: String,
         default: '10px',
       },
-      position: {
-        required: false,
-        default: 'bottom',
-      },
       justify: {
         required: false,
+        type: String,
         default: 'left',
       },
       openingMode: {
         required: false,
+        type: String,
         default: 'hover',
       },
       backgroundColor: {
         required: false,
+        type: String,
         default: 'white',
       },
     },
@@ -121,18 +122,26 @@
       document.removeEventListener('click', this.clickOutside)
     },
     methods: {
+      toggleIsOpenByClick(value) {
+        this.isOpenByClick = value
+      },
       clickOutside(event) {
         if (this.openingMode != 'click') return
         if (
           this.$refs.dropdown &&
-          (this.$refs.dropdown.$el == event.target ||
+          (this.$refs.dropdown.$el === event.target ||
             this.$refs.dropdown.$el.contains(event.target))
         ) {
           return
         } else {
-          this.isOpenByClick = false
+          this.toggleIsOpenByClick(false)
         }
       },
     },
+    watch: {
+      isOpenByClick(newVal) {
+        this.$emit('on-dropdown-toggle', newVal)
+      },
+    },
   }
 </script>

package/src/components/errorMessage/index.vue

@@ -19,7 +19,7 @@
     background: ${(props) => props.theme.colors.red};
     padding: 10px;
     width: max-content;
-    /* max-width: 100%; */
+    max-width: 100%;
     min-width: min-content;
     font-size: 11px;
     font-weight: 400;

package/src/components/filterComponent/viewFilter.vue

@@ -24,6 +24,16 @@
                 ref="selectSortDropdown"
                 align-items="vertical"
                 class="sort-dropdown"
+                :data-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'column')
+                    .replace('${index}', index)
+                "
+                :data-qa-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'column')
+                    .replace('${index}', index)
+                "
                 :dropdown-auto-close="false"
                 select-height="40px"
                 @input-change="
@@ -57,6 +67,16 @@
                 ref="selectSortDropdown"
                 align-items="vertical"
                 class="sort-dropdown"
+                :data-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'constraint')
+                    .replace('${index}', index)
+                "
+                :data-qa-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'constraint')
+                    .replace('${index}', index)
+                "
                 :disabled="!item.column"
                 :dropdown-auto-close="false"
                 select-height="40px"
@@ -88,7 +108,18 @@
                 </template>
               </SelectComponent>
               <template v-if="item.column === 'updated'">
-                <DatePickerContainer>
+                <DatePickerContainer
+                  :data-id="
+                    rowDataId.dataId
+                      .replace('${type}', 'selectedDate')
+                      .replace('${index}', index)
+                  "
+                  :data-qa-id="
+                    rowDataId.dataQaId
+                      .replace('${type}', 'selectedDate')
+                      .replace('${index}', index)
+                  "
+                >
                   <VueDatePicker
                     ref="datePicker"
                     :auto-apply="true"
@@ -122,6 +153,16 @@
                 ref="selectSortDropdown"
                 align-items="vertical"
                 class="sort-dropdown"
+                :data-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'selectedOptions')
+                    .replace('${index}', index)
+                "
+                :data-qa-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'selectedOptions')
+                    .replace('${index}', index)
+                "
                 :disabled="!item.column || !item.constraint"
                 :dropdown-auto-close="false"
                 :is-searchable="false"
@@ -182,6 +223,16 @@
                 <RCIcon
                   :color="theme.semanticColors.teal[800]"
                   cursor="pointer"
+                  :data-id="
+                    rowDataId.dataId
+                      .replace('${type}', 'remove')
+                      .replace('${index}', index)
+                  "
+                  :data-qa-id="
+                    rowDataId.dataId
+                      .replace('${type}', 'remove')
+                      .replace('${index}', index)
+                  "
                   name="close"
                   size="14px"
                   @click.stop="removeItem(index)"
@@ -196,6 +247,16 @@
                 ref="selectSortDropdown"
                 align-items="vertical"
                 class="sort-dropdown"
+                :data-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'column')
+                    .replace('${index}', 0)
+                "
+                :data-qa-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'column')
+                    .replace('${index}', 0)
+                "
                 :dropdown-auto-close="false"
                 select-height="40px"
                 @input-change="
@@ -223,6 +284,16 @@
                 ref="selectSortDropdown"
                 align-items="vertical"
                 class="sort-dropdown"
+                :data-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'constraint')
+                    .replace('${index}', 0)
+                "
+                :data-qa-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'constraint')
+                    .replace('${index}', 0)
+                "
                 :disabled="true"
                 :dropdown-auto-close="false"
                 select-height="40px"
@@ -235,6 +306,16 @@
                 ref="selectSortDropdown"
                 align-items="vertical"
                 class="sort-dropdown"
+                :data-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'selectedOptions')
+                    .replace('${index}', 0)
+                "
+                :data-qa-id="
+                  rowDataId.dataId
+                    .replace('${type}', 'selectedOptions')
+                    .replace('${index}', 0)
+                "
                 :disabled="true"
                 :dropdown-auto-close="false"
                 select-height="40px"
@@ -249,6 +330,16 @@
         <BottomContainer>
           <PlaceholderText>{{ $gettext('if') }}</PlaceholderText>
           <ButtonIcon
+            :data-id="
+              rowDataId.dataId
+                .replace('${type}', 'addFilter')
+                .replace('${index}', 0)
+            "
+            :data-qa-id="
+              rowDataId.dataId
+                .replace('${type}', 'addFilter')
+                .replace('${index}', 0)
+            "
             icon-name="plus_button"
             :text="$gettext('add_filter')"
             type="ghost"
@@ -391,6 +482,11 @@
         required: false,
         default: 'en-us',
       },
+      rowDataId: {
+        type: Object,
+        required: false,
+        default: '',
+      },
     },
     data() {
       return {

package/src/components/iconWrapper/index.vue

@@ -1,13 +1,14 @@
 <template>
   <Wrapper
     :background-color="backgroundColor"
+    :border-color="borderColor || iconColor"
     :border-radius="borderRadius"
-    :color="iconColor"
     :data-id="dataId"
     :data-qa-id="dataQaId"
     :disabled="disabled"
     :has-border="hasBorder"
     :hovered-background-color="hoveredBackgroundColor"
+    :hovered-border-color="hoveredBorderColor"
     :is-hovered="isHovered"
     :no-cursor="noCursor"
     :size="size"
@@ -51,22 +52,24 @@
   import styled from 'vue3-styled-components'
   import RCIcon from '../icon'
 
+  const LockContainer = styled.div`
+    position: absolute;
+    bottom: 6px;
+    right: 6px;
+  `
+
   const wrapperAttrs = {
-    color: String,
     isHovered: Boolean,
+    borderColor: String,
     borderRadius: String,
     disabled: Boolean,
     size: String,
     backgroundColor: String,
     hoveredBackgroundColor: String,
+    hoveredBorderColor: String,
     hasBorder: Boolean,
     noCursor: Boolean,
   }
-  const LockContainer = styled.div`
-    position: absolute;
-    bottom: 6px;
-    right: 6px;
-  `
   const Wrapper = styled('div', wrapperAttrs)`
     position: relative;
     display: inline-flex;
@@ -74,7 +77,8 @@
     height: ${(props) => props.size};
     border: ${(props) =>
       props.hasBorder
-        ? 'solid 1px ' + props.theme.colors[props.color] || props.color
+        ? 'solid 1px ' +
+          (props.theme.colors[props.borderColor] || props.borderColor)
         : ''};
     justify-content: center;
     align-items: center;
@@ -85,14 +89,32 @@
     border-radius: ${(props) => props.borderRadius};
     ${(props) =>
       props.isHovered
-        ? 'background-color:' +
-            props.theme.colors[props.hoveredBackgroundColor] ||
-          props.hoveredBackgroundColor
-        : ''};
+        ? `
+          background-color: ${
+            props.theme.colors[props.hoveredBackgroundColor] ??
+            props.hoveredBackgroundColor
+          };
+          ${
+            props.hoveredBorderColor
+              ? `border-color: ${
+                  props.theme.colors[props.hoveredBorderColor] ??
+                  props.hoveredBorderColor
+                };`
+              : ''
+          }
+        `
+        : ''}
     &:hover {
       background-color: ${(props) =>
-        props.theme.colors[props.hoveredBackgroundColor] ||
+        props.theme.colors[props.hoveredBackgroundColor] ??
         props.hoveredBackgroundColor};
+      ${(props) =>
+        props.hoveredBorderColor
+          ? `border-color: ${
+              props.theme.colors[props.hoveredBorderColor] ??
+              props.hoveredBorderColor
+            };`
+          : ''}
     }
   `
   const CaretIcon = styled.div`
@@ -112,45 +134,69 @@
     },
     props: {
       disabled: {
+        type: Boolean,
         required: false,
         default: false,
       },
       name: {
+        type: String,
         required: true,
       },
       iconColor: {
+        type: String,
         required: false,
         default: 'white',
       },
       hoveredIconColor: {
+        type: String,
         required: false,
+        default: null,
       },
       backgroundColor: {
+        type: String,
         required: false,
+        default: 'transparent',
       },
       hasBorder: {
+        type: Boolean,
         required: false,
+        default: false,
       },
       hoveredBackgroundColor: {
+        type: String,
         required: false,
         default: 'transparentWhite2',
       },
       size: {
+        type: String,
         required: false,
         default: '32px',
       },
       iconSize: {
+        type: String,
         required: false,
         default: '18px',
       },
       hasCaret: {
+        type: Boolean,
         required: false,
         default: false,
       },
       borderRadius: {
+        type: String,
         required: false,
         default: '6px',
       },
+      borderColor: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      hoveredBorderColor: {
+        type: String,
+        required: false,
+        default: null,
+      },
       dataId: {
         type: String,
         default: '',
@@ -160,22 +206,27 @@
         default: '',
       },
       isHovered: {
+        type: Boolean,
         required: false,
         default: false,
       },
       isStriked: {
+        type: Boolean,
         required: false,
         default: false,
       },
       isLoading: {
+        type: Boolean,
         required: false,
         default: false,
       },
       noCursor: {
+        type: Boolean,
         required: false,
         default: false,
       },
       hasLock: {
+        type: Boolean,
         required: false,
         default: false,
       },

package/src/components/inputs/inputNumber/index.vue

@@ -230,6 +230,7 @@
   //</inputNumber>
   import styled from 'vue3-styled-components'
   import {
+    roundViaInteger,
     stringToNumber,
     numberToString,
   } from '../../../helpers/numberConverter'
@@ -861,7 +862,7 @@
             this.inputValue = this.value
             this.enteredValue =
               typeof this.value === 'number' && !isNaN(this.value)
-                ? Number(this.value.toFixed(this.numberPrecision))
+                ? roundViaInteger(this.value, this.numberPrecision)
                 : this.value
           }
         },
@@ -965,7 +966,7 @@
             minDecimals: this.minDecimals,
           })
         } else if (typeof evaluated === 'number') {
-          evaluated = evaluated.toFixed(this.numberPrecision)
+          evaluated = roundViaInteger(evaluated, this.numberPrecision)
         }
         return evaluated
       },

package/src/components/inputs/inputText/index.vue

@@ -179,9 +179,7 @@
     position: relative;
     font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
     color: ${(props) =>
-      props.isError
-        ? props.theme.colors.grey6
-        : props.isDisabled
+      props.isDisabled
         ? props.theme.colors.grey2
         : props.fontColor
         ? props.fontColor + ' !important'

package/src/components/progressBar/ProgressBar.stories.js

@@ -0,0 +1,62 @@
+import defaultDropdownProps from './defaultProps'
+import ProgressBar from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'ProgressBar',
+  component: ProgressBar,
+  tags: ['autodocs'],
+  argTypes: {
+    fillProgress: {
+      description: 'Precentage of progress bar filled in with color',
+    },
+    labelText: {
+      description: 'Label text above the progress bar',
+    },
+    appTheme: {
+      description: 'App color theme',
+      control: 'select',
+      options: ['light', 'dark'],
+    },
+  },
+}
+
+// To use:
+// import ProgressBar from "@eturnity/eturnity_reusable_components/src/components/progressBar"
+// <ProgressBar
+//   :fill-progress="50"
+//   :label-text="some label text"
+// />
+
+const Template = (args) => {
+  return {
+    components: { ProgressBar },
+    setup() {
+      return { args }
+    },
+    provide: {
+      theme,
+    },
+    template: `
+      <ProgressBar v-bind="args"/>
+    `,
+  }
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  ...defaultDropdownProps,
+}
+
+export const ProgressBarLabelText = Template.bind({})
+ProgressBarLabelText.args = {
+  ...defaultDropdownProps,
+  labelText: 'Progress Bar Label Text',
+}
+
+export const ProgressBarLabelTextAppThemeDark = Template.bind({})
+ProgressBarLabelTextAppThemeDark.args = {
+  ...defaultDropdownProps,
+  labelText: 'Progress Bar Label Text',
+  appTheme: 'dark',
+}

package/src/components/progressBar/defaultProps.js

@@ -0,0 +1,5 @@
+const defaultProps = {
+  fillProgress: '65',
+}
+
+export default defaultProps