@eturnity/eturnity_reusable_components 8.31.5-EPDM-13818.1 → 8.31.5-EPDM-13618.2

package/src/components/progressBar/index.vue

@@ -1,36 +1,26 @@
 <template>
   <Container>
     <ProgressContainer
-      :background-color="backgroundColor"
-      class="progress-container"
-      :max-width="maxWidth"
-      :min-width="minWidth"
+      :app-theme="appTheme"
+      data-test-id="progress_bar_container"
     >
       <ProgressFill
-        class="progress-bar"
-        :fill-color="fillColor"
+        :app-theme="appTheme"
+        data-test-id="progress_bar_progress"
         :fill-progress="fillProgress"
       />
     </ProgressContainer>
-    <LabelText v-if="stepNumber || labelText" class="progress-text">
-      {{ labelText ? labelText : '' }}
-      {{ stepNumber ? stepNumber : '' }}
+    <LabelText
+      v-if="labelText"
+      :app-theme="appTheme"
+      data-test-id="progress_bar_label"
+    >
+      {{ labelText }}
     </LabelText>
   </Container>
 </template>
 
 <script>
-  // import ProgressBar from "@eturnity/eturnity_reusable_components/src/components/progressBar"
-  //To Use:
-  // <progress-bar
-  //   fillColor="#000"
-  //   backgroundColor="#888"
-  //   minWidth="150px"
-  //   maxWidth="100%"
-  //   :fillProgress="50" //should be a number for percent
-  //   stepNumber="4"
-  //   :labelText="translate('step')"
-  // />
   import styled from 'vue3-styled-components'
 
   const Container = styled.div`
@@ -44,34 +34,34 @@
   `
 
   const containerProps = {
-    backgroundColor: String,
-    maxWidth: String,
-    minWidth: String,
+    appTheme: String,
   }
   const ProgressContainer = styled('div', containerProps)`
     width: 100%;
-    min-width: ${(props) => (props.minWidth ? props.minWidth : 'auto')};
-    max-width: ${(props) => (props.maxWidth ? props.maxWidth : 'none')};
     height: 6px;
     background-color: ${(props) =>
-      props.backgroundColor
-        ? props.backgroundColor
-        : props.theme.colors.lightGray};
+      props.theme.progressBar[props.appTheme].backgroundColor};
     @media (max-width: ${(props) => props.theme.screen.mobile}) {
       height: 4px;
     }
   `
 
-  const fillProps = { fillColor: String, fillProgress: String | Number }
+  const fillProps = {
+    appTheme: String,
+    fillProgress: String | Number,
+  }
   const ProgressFill = styled('div', fillProps)`
     height: 100%;
     width: ${(props) => props.fillProgress + '%'};
     background-color: ${(props) =>
-      props.fillColor ? props.fillColor : props.theme.colors.secondary};
+      props.theme.progressBar[props.appTheme].fillColor};
   `
 
-  const LabelText = styled.div`
-    color: ${(props) => props.theme.colors.darkGray};
+  const labelTextProps = {
+    appTheme: String,
+  }
+  const LabelText = styled('div', labelTextProps)`
+    color: ${(props) => props.theme.progressBar[props.appTheme].labelColor};
     font-size: 16px;
 
     @media (max-width: ${(props) => props.theme.screen.tablet}) {
@@ -88,37 +78,19 @@
       LabelText,
     },
     props: {
-      fillColor: {
-        required: false,
-        type: String,
-        default: null,
-      },
-      backgroundColor: {
-        required: false,
-        type: String,
-        default: null,
-      },
-      minWidth: {
-        required: false,
-        type: String,
-        default: null,
-      },
-      maxWidth: {
-        required: false,
-        type: String,
-        default: null,
-      },
       fillProgress: {
         required: false,
+        type: [String, Number],
         default: 0,
       },
       labelText: {
         required: false,
-        default: null,
+        type: String,
+        default: '',
       },
-      stepNumber: {
-        required: false,
-        default: null,
+      appTheme: {
+        type: String,
+        default: 'light',
       },
     },
   }

package/src/components/progressBar/progressBar.spec.js

@@ -0,0 +1,52 @@
+import { mount } from '@vue/test-utils'
+import RCProgressBar from '@/components/progressBar'
+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('progressBar/index.vue', () => {
+  it('progress bar is rendered with correct props', async () => {
+    const labelText = 'test_label_text'
+
+    const wrapper = mount(RCProgressBar, {
+      props: { ...defaultProps, labelText },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const progressBarProgress = wrapper.find(
+      '[data-test-id="progress_bar_progress"]'
+    )
+    const progressBarLabel = wrapper.find('[data-test-id="progress_bar_label"]')
+
+    expect(wrapper.vm.fillProgress).toBe(defaultProps.fillProgress)
+    expect(progressBarProgress.exists()).toBe(true)
+    expect(progressBarLabel.exists()).toBe(true)
+
+    expect(progressBarLabel.text()).toContain(labelText)
+  })
+
+  it('progress bar progress changes', async () => {
+    const wrapper = mount(RCProgressBar, {
+      props: {},
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    expect(wrapper.vm.fillProgress).toBe(0)
+
+    await wrapper.setProps({ fillProgress: defaultProps.fillProgress })
+
+    expect(wrapper.vm.fillProgress).toBe(defaultProps.fillProgress)
+  })
+})

package/src/components/tables/mainTable/index.vue

@@ -251,7 +251,8 @@
         visibility: hidden;
       }
 
-      &.footer {
+      &.footer,
+      &.total-row {
         td {
           background-color: ${(props) => props.theme.colors.grey5};
         }

package/src/components/threeDots/index.vue

@@ -2,10 +2,9 @@
   <PageContainer
     ref="pageContainer"
     :activated="isOpen"
-    :hovered-background-color="hoveredBackgroundColor"
     @click="toggleButton()"
   >
-    <ButtonContainer ref="dropdownItem" :icon-color="iconColor">
+    <ButtonContainer ref="dropdownItem">
       <DotItem />
       <DotItem />
       <DotItem />
@@ -132,10 +131,9 @@
 
   import styled from 'vue3-styled-components'
   import Spinner from '../spinner'
-  import theme from '../../assets/theme'
+
   const PageContainerAttrs = {
     activated: Boolean,
-    hoveredBackgroundColor: String,
   }
   const PageContainer = styled('div', PageContainerAttrs)`
     display: grid;
@@ -145,14 +143,14 @@
     height: 30px;
     border-radius: 4px;
     background-color: ${(props) =>
-      props.activated ? props.hoveredBackgroundColor : ''};
+      props.activated ? props.theme.colors.grey5 : ''};
 
     &:hover {
-      background-color: ${(props) => props.hoveredBackgroundColor};
+      background-color: ${(props) => props.theme.colors.grey5};
     }
   `
 
-  const ButtonContainer = styled('div', { iconColor: String })`
+  const ButtonContainer = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -162,7 +160,7 @@
 
     div {
       // This is the dot color
-      background-color: ${({ iconColor }) => iconColor};
+      background-color: #263238;
     }
   `
 
@@ -307,14 +305,6 @@
         required: false,
         default: true,
       },
-      iconColor: {
-        type: String,
-        default: '#263238',
-      },
-      hoveredBackgroundColor: {
-        type: String,
-        default: theme.colors.grey5,
-      },
     },
     data() {
       return {
@@ -322,7 +312,6 @@
         hoverItem: null,
         childOpen: null,
         containerWidth: 16,
-        theme,
       }
     },
     methods: {

package/dist/main.es733.js

@@ -1,4 +0,0 @@
-const __vite_glob_0_350 = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI2IiB2aWV3Ym94PSI3IDcgMjYgMjYiIHdpZHRoPSIyNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMxLjYxOTYgMjAuNTIzMVYxOS40NjYzSDI5LjY4NTZMMzIgMTcuMTYyNUwzMS4yNDk3IDE2LjQxMjJMMjguMTk1NSAxOS40NjYzSDIxLjI3MzRMMjYuMTY2NCAxNC41NzMzSDMwLjQ4ODhWMTMuNTE2NUgyNy4yMjMzTDI4LjU4NjUgMTIuMTUzMkwyNy44NDY4IDExLjQwMjlMMjYuNDcyOSAxMi43NzY4VjkuNTExMjNIMjUuNDE2MVYxMy44MzM2TDIwLjUyMzEgMTguNzI2NlYxMS44MDQ1TDIzLjU4NzggOC43NTAzM0wyMi44Mzc1IDhMMjAuNTIzMSAxMC4zMTQ0VjguMzY5ODhIMTkuNDY2M1YxMC4zMTQ0TDE3LjE2MjUgOEwxNi40MTIyIDguNzUwMzNMMTkuNDY2MyAxMS44MDQ1VjE4LjcyNjZMMTQuNTczMyAxMy44MzM2VjkuNTExMjNIMTMuNTE2NVYxMi43NzY4TDEyLjE1MzIgMTEuNDAyOUwxMS40MDI5IDEyLjE1MzJMMTIuNzc2OCAxMy41MTY1SDkuNTExMjNWMTQuNTczM0gxMy44MzM2TDE4LjcyNjYgMTkuNDY2M0gxMS44MDQ1TDguNzUwMzMgMTYuNDEyMkw4IDE3LjE2MjVMMTAuMzE0NCAxOS40NjYzSDguMzY5ODhWMjAuNTIzMUgxMC4zMTQ0TDggMjIuODM3NUw4Ljc1MDMzIDIzLjU3NzNMMTEuODA0NSAyMC41MjMxSDE4LjcyNjZMMTMuODMzNiAyNS40MTYxSDkuNTExMjNWMjYuNDcyOUgxMi43NzY4TDExLjQwMjkgMjcuODQ2OEwxMi4xNTMyIDI4LjU4NjVMMTMuNTE2NSAyNy4yMjMzVjMwLjQ4ODhIMTQuNTczM1YyNi4xNjY0TDE5LjQ2NjMgMjEuMjczNFYyOC4xOTU1TDE2LjQxMjIgMzEuMjQ5N0wxNy4xNjI1IDMyTDE5LjQ2NjMgMjkuNjg1NlYzMS42MTk2SDIwLjUyMzFWMjkuNjg1NkwyMi44Mzc1IDMyTDIzLjU4NzggMzEuMjQ5N0wyMC41MjMxIDI4LjE5NTVWMjEuMjczNEwyNS40MTYxIDI2LjE2NjRWMzAuNDg4OEgyNi40NzI5VjI3LjIyMzNMMjcuODQ2OCAyOC41ODY1TDI4LjU4NjUgMjcuODQ2OEwyNy4yMjMzIDI2LjQ3MjlIMzAuNDg4OFYyNS40MTYxSDI2LjE2NjRMMjEuMjczNCAyMC41MjMxSDI4LjE5NTVMMzEuMjQ5NyAyMy41NzczTDMyIDIyLjgzNzVMMjkuNjg1NiAyMC41MjMxSDMxLjYxOTZaIiBmaWxsPSIjMjBBNENBIj48L3BhdGg+Cjwvc3ZnPgo=";
-export {
-  __vite_glob_0_350 as default
-};

package/dist/main.es734.js

@@ -1,4 +0,0 @@
-const __vite_glob_0_351 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxOCAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMi40IDEuMkMyLjQgMS44NjI3NCAxLjg2Mjc0IDIuNCAxLjIgMi40QzAuNTM3MjU4IDIuNCAwIDEuODYyNzQgMCAxLjJDMCAwLjUzNzI1OCAwLjUzNzI1OCAwIDEuMiAwQzEuODYyNzQgMCAyLjQgMC41MzcyNTggMi40IDEuMloiIGZpbGw9IiMyNjMyMzgiIC8+CiAgPHBhdGggZD0iTTYgMS4yQzYgMS44NjI3NCA1LjQ2Mjc0IDIuNCA0LjggMi40QzQuMTM3MjYgMi40IDMuNiAxLjg2Mjc0IDMuNiAxLjJDMy42IDAuNTM3MjU4IDQuMTM3MjYgMCA0LjggMEM1LjQ2Mjc0IDAgNiAwLjUzNzI1OCA2IDEuMloiIGZpbGw9IiMyNjMyMzgiIC8+CiAgPHBhdGggZD0iTTIuNCA0LjhDMi40IDUuNDYyNzQgMS44NjI3NCA2IDEuMiA2QzAuNTM3MjU4IDYgMCA1LjQ2Mjc0IDAgNC44QzAgNC4xMzcyNiAwLjUzNzI1OCAzLjYgMS4yIDMuNkMxLjg2Mjc0IDMuNiAyLjQgNC4xMzcyNiAyLjQgNC44WiIgZmlsbD0iIzI2MzIzOCIgLz4KICA8cGF0aCBkPSJNNiA0LjhDNiA1LjQ2Mjc0IDUuNDYyNzQgNiA0LjggNkM0LjEzNzI2IDYgMy42IDUuNDYyNzQgMy42IDQuOEMzLjYgNC4xMzcyNiA0LjEzNzI2IDMuNiA0LjggMy42QzUuNDYyNzQgMy42IDYgNC4xMzcyNiA2IDQuOFoiIGZpbGw9IiMyNjMyMzgiIC8+CiAgPHBhdGggZmlsbD0iIzI2MzIzOCIgZD0iTTEwIDFoNnMyIDAgMiAydjBzMCAyIC0yIDJoLTZzLTIgMCAtMiAtMnYwczAgLTIgMiAtMiIgLz4KICA8cGF0aCBkPSJNMi40IDExLjJDMi40IDExLjg2MjcgMS44NjI3NCAxMi40IDEuMiAxMi40QzAuNTM3MjU4IDEyLjQgMCAxMS44NjI3IDAgMTEuMkMwIDEwLjUzNzMgMC41MzcyNTggMTAgMS4yIDEwQzEuODYyNzQgMTAgMi40IDEwLjUzNzMgMi40IDExLjJaIiBmaWxsPSIjMjYzMjM4IiAvPgogIDxwYXRoIGQ9Ik02IDExLjJDNiAxMS44NjI3IDUuNDYyNzQgMTIuNCA0LjggMTIuNEM0LjEzNzI2IDEyLjQgMy42IDExLjg2MjcgMy42IDExLjJDMy42IDEwLjUzNzMgNC4xMzcyNiAxMCA0LjggMTBDNS40NjI3NCAxMCA2IDEwLjUzNzMgNiAxMS4yWiIgZmlsbD0iIzI2MzIzOCIgLz4KICA8cGF0aCBkPSJNMi40IDE0LjhDMi40IDE1LjQ2MjcgMS44NjI3NCAxNiAxLjIgMTZDMC41MzcyNTggMTYgMCAxNS40NjI3IDAgMTQuOEMwIDE0LjEzNzMgMC41MzcyNTggMTMuNiAxLjIgMTMuNkMxLjg2Mjc0IDEzLjYgMi40IDE0LjEzNzMgMi40IDE0LjhaIiBmaWxsPSIjMjYzMjM4IiAvPgogIDxwYXRoIGQ9Ik02IDE0LjhDNiAxNS40NjI3IDUuNDYyNzQgMTYgNC44IDE2QzQuMTM3MjYgMTYgMy42IDE1LjQ2MjcgMy42IDE0LjhDMy42IDE0LjEzNzMgNC4xMzcyNiAxMy42IDQuOCAxMy42QzUuNDYyNzQgMTMuNiA2IDE0LjEzNzMgNiAxNC44WiIgZmlsbD0iIzI2MzIzOCIgLz4KICA8cGF0aCBmaWxsPSIjMjYzMjM4IiBkPSJNMTAgMTFoNnMyIDAgMiAydjBzMCAyIC0yIDJoLTZzLTIgMCAtMiAtMnYwczAgLTIgMiAtMiIgLz4KPC9zdmc+";
-export {
-  __vite_glob_0_351 as default
-};

package/dist/main.es735.js

@@ -1,25 +0,0 @@
-let supported;
-let perf;
-function isPerformanceSupported() {
-  var _a;
-  if (supported !== void 0) {
-    return supported;
-  }
-  if (typeof window !== "undefined" && window.performance) {
-    supported = true;
-    perf = window.performance;
-  } else if (typeof globalThis !== "undefined" && ((_a = globalThis.perf_hooks) === null || _a === void 0 ? void 0 : _a.performance)) {
-    supported = true;
-    perf = globalThis.perf_hooks.performance;
-  } else {
-    supported = false;
-  }
-  return supported;
-}
-function now() {
-  return isPerformanceSupported() ? perf.now() : Date.now();
-}
-export {
-  isPerformanceSupported,
-  now
-};

package/dist/main.es736.js

@@ -1,64 +0,0 @@
-function makeMap(str, expectsLowerCase) {
-  const map = /* @__PURE__ */ Object.create(null);
-  const list = str.split(",");
-  for (let i = 0; i < list.length; i++) {
-    map[list[i]] = true;
-  }
-  return expectsLowerCase ? (val) => !!map[val.toLowerCase()] : (val) => !!map[val];
-}
-!!(process.env.NODE_ENV !== "production") ? Object.freeze({}) : {};
-!!(process.env.NODE_ENV !== "production") ? Object.freeze([]) : [];
-const NOOP = () => {
-};
-const extend = Object.assign;
-const hasOwnProperty = Object.prototype.hasOwnProperty;
-const hasOwn = (val, key) => hasOwnProperty.call(val, key);
-const isArray = Array.isArray;
-const isMap = (val) => toTypeString(val) === "[object Map]";
-const isFunction = (val) => typeof val === "function";
-const isString = (val) => typeof val === "string";
-const isSymbol = (val) => typeof val === "symbol";
-const isObject = (val) => val !== null && typeof val === "object";
-const objectToString = Object.prototype.toString;
-const toTypeString = (value) => objectToString.call(value);
-const toRawType = (value) => {
-  return toTypeString(value).slice(8, -1);
-};
-const isIntegerKey = (key) => isString(key) && key !== "NaN" && key[0] !== "-" && "" + parseInt(key, 10) === key;
-const cacheStringFunction = (fn) => {
-  const cache = /* @__PURE__ */ Object.create(null);
-  return (str) => {
-    const hit = cache[str];
-    return hit || (cache[str] = fn(str));
-  };
-};
-const capitalize = cacheStringFunction(
-  (str) => str.charAt(0).toUpperCase() + str.slice(1)
-);
-const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
-const def = (obj, key, value) => {
-  Object.defineProperty(obj, key, {
-    configurable: true,
-    enumerable: false,
-    value
-  });
-};
-export {
-  NOOP,
-  capitalize,
-  def,
-  extend,
-  hasChanged,
-  hasOwn,
-  isArray,
-  isFunction,
-  isIntegerKey,
-  isMap,
-  isObject,
-  isString,
-  isSymbol,
-  makeMap,
-  objectToString,
-  toRawType,
-  toTypeString
-};

package/src/assets/svgIcons/down.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.99866 2C8.2748 2 8.49866 2.22386 8.49866 2.5V12.2939L11.1461 9.64648L11.2242 9.58203C11.4183 9.45391 11.6823 9.4758 11.8532 9.64648C12.024 9.81735 12.0458 10.0813 11.9176 10.2754L11.8532 10.3535L8.35217 13.8535C8.25843 13.9471 8.1311 14 7.99866 14C7.89938 13.9998 7.80269 13.9703 7.72131 13.916L7.64514 13.8535L4.14612 10.3535C3.95114 10.1583 3.95112 9.84168 4.14612 9.64648C4.34132 9.45131 4.65789 9.45143 4.85315 9.64648L7.49866 12.293V2.5C7.49866 2.22412 7.72287 2.00042 7.99866 2Z" fill="#263238"/>
-</svg>

package/src/assets/svgIcons/up.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.99866 13.9999C8.2748 13.9999 8.49866 13.7761 8.49866 13.4999V3.70599L11.1461 6.35345L11.2242 6.41791C11.4183 6.54603 11.6823 6.52414 11.8532 6.35345C12.024 6.18259 12.0458 5.91861 11.9176 5.72455L11.8532 5.64642L8.35217 2.14642C8.25843 2.05289 8.1311 1.99993 7.99866 1.99994C7.89938 2.00009 7.80269 2.0296 7.72131 2.08392L7.64514 2.14642L4.14612 5.64642C3.95114 5.84164 3.95112 6.15825 4.14612 6.35345C4.34132 6.54863 4.65789 6.54851 4.85315 6.35345L7.49866 3.70697V13.4999C7.49866 13.7758 7.72287 13.9995 7.99866 13.9999Z" fill="#263238"/>
-</svg>

package/src/components/icon/sortingIcon.vue

@@ -1,32 +0,0 @@
-<template>
-  <RCIcon v-if="isDescending" :color="color" name="down" :size="size" />
-  <RCIcon v-else-if="isAscending" :color="color" name="up" :size="size" />
-  <RCIcon v-else :color="color" name="sorting" :size="size" />
-</template>
-<script>
-  import RCIcon from './index.vue'
-  export default {
-    name: 'SortingIcon',
-    components: {
-      RCIcon,
-    },
-    props: {
-      isAscending: {
-        type: Boolean,
-        default: false,
-      },
-      isDescending: {
-        type: Boolean,
-        default: false,
-      },
-      color: {
-        type: String,
-        default: 'black',
-      },
-      size: {
-        type: String,
-        default: '16px',
-      },
-    },
-  }
-</script>