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

package/dist/main.es731.js

@@ -1,4 +1,25 @@
-const __vite_glob_0_348 = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjE2IiB2aWV3Ym94PSIxMiAxMiAxNiAxNiIgd2lkdGg9IjE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMTcgMTVDMTcgMTYuMTA0NiAxNi4xMDQ2IDE3IDE1IDE3QzEzLjg5NTQgMTcgMTMgMTYuMTA0NiAxMyAxNUMxMyAxMy44OTU0IDEzLjg5NTQgMTMgMTUgMTNDMTYuMTA0NiAxMyAxNyAxMy44OTU0IDE3IDE1WiIgZmlsbD0iIzI2MzIzOCI+PC9wYXRoPgo8cGF0aCBkPSJNMjcgMjVDMjcgMjYuMTA0NiAyNi4xMDQ2IDI3IDI1IDI3QzIzLjg5NTQgMjcgMjMgMjYuMTA0NiAyMyAyNUMyMyAyMy44OTU0IDIzLjg5NTQgMjMgMjUgMjNDMjYuMTA0NiAyMyAyNyAyMy44OTU0IDI3IDI1WiIgZmlsbD0iIzI2MzIzOCI+PC9wYXRoPgo8cGF0aCBkPSJNMjEgMTYuNUMyMSAxNS42NzE2IDIxLjY3MTYgMTUgMjIuNSAxNUMyMy4zMjg0IDE1IDI0IDE1LjY3MTYgMjQgMTYuNVYyMUgyNlYxNi41QzI2IDE0LjU2NyAyNC40MzMgMTMgMjIuNSAxM0MyMC41NjcgMTMgMTkgMTQuNTY3IDE5IDE2LjVWMjMuNUMxOSAyNC4zMjg0IDE4LjMyODQgMjUgMTcuNSAyNUMxNi42NzE2IDI1IDE2IDI0LjMyODQgMTYgMjMuNVYxOUgxNFYyMy41QzE0IDI1LjQzMyAxNS41NjcgMjcgMTcuNSAyN0MxOS40MzMgMjcgMjEgMjUuNDMzIDIxIDIzLjVWMTYuNVoiIGZpbGw9IiMyNjMyMzgiPjwvcGF0aD4KPC9zdmc+Cg==";
+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 {
-  __vite_glob_0_348 as default
+  isPerformanceSupported,
+  now
 };

package/dist/main.es732.js

@@ -1,4 +1,64 @@
-const __vite_glob_0_349 = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjEyIiB2aWV3Ym94PSIxMiAxNCAxNiAxMiIgd2lkdGg9IjE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMTMgMTcuOTQ4NkwxNC4yNzI3IDE5LjIyMTNDMTcuNDM1NSAxNi4wNTg2IDIyLjU2NDUgMTYuMDU4NiAyNS43MjczIDE5LjIyMTNMMjcgMTcuOTQ4NkMyMy4xMzczIDE0LjA4NTggMTYuODY5MSAxNC4wODU4IDEzIDE3Ljk0ODZaTTE4LjA5MDkgMjMuMDM5NUwyMCAyNC45NDg2TDIxLjkwOTEgMjMuMDM5NUMyMC44NTkxIDIxLjk4MzEgMTkuMTQ3MyAyMS45ODMxIDE4LjA5MDkgMjMuMDM5NVpNMTUuNTQ1NSAyMC40OTRMMTYuODE4MiAyMS43NjY3QzE4LjU3NDUgMjAuMDEwNCAyMS40MjU1IDIwLjAxMDQgMjMuMTgxOCAyMS43NjY3TDI0LjQ1NDUgMjAuNDk0QzIxLjk5ODIgMTguMDM3NiAxOC4wMDgyIDE4LjAzNzYgMTUuNTQ1NSAyMC40OTRaIiBmaWxsPSIjMjYzMjM4Ij48L3BhdGg+Cjwvc3ZnPgo=";
+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 {
-  __vite_glob_0_349 as default
+  NOOP,
+  capitalize,
+  def,
+  extend,
+  hasChanged,
+  hasOwn,
+  isArray,
+  isFunction,
+  isIntegerKey,
+  isMap,
+  isObject,
+  isString,
+  isSymbol,
+  makeMap,
+  objectToString,
+  toRawType,
+  toTypeString
 };

package/dist/main.es8.js

@@ -226,6 +226,18 @@ const theme = (() => {
     boxShadow: {
       card: "0px 2px 8px 2px rgba(0, 0, 0, 0.15)"
     },
+    progressBar: {
+      light: {
+        fillColor: semanticColors.purple[500],
+        backgroundColor: semanticColors.grey[200],
+        labelColor: semanticColors.grey[700]
+      },
+      dark: {
+        fillColor: colors.white,
+        backgroundColor: semanticColors.grey[700],
+        labelColor: semanticColors.grey[200]
+      }
+    },
     mainButton: {
       light: {
         // theme

package/dist/main.es9.js

@@ -1,10 +1,10 @@
 import styled from "./main.es7.js";
-import _sfc_main$1 from "./main.es24.js";
+import _sfc_main$1 from "./main.es15.js";
 import theme from "./main.es8.js";
 import "./main.es3.js";
 import _export_sfc from "./main.es11.js";
 import { resolveComponent, openBlock, createBlock, withCtx, createVNode, createTextVNode } from "./main.es6.js";
-import { toDisplayString } from "./main.es23.js";
+import { toDisplayString } from "./main.es16.js";
 const TagContainer = styled.div`
     display: inline-flex;
     align-items: baseline;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.31.5-EPDM-13818.1",
+  "version": "8.31.5-EPDM-13618.2",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/sorting.svg

@@ -1,3 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.22498 2.08203C4.41903 1.95408 4.6831 1.97571 4.85388 2.14648L7.35388 4.64648L7.41833 4.72461C7.54631 4.91859 7.5245 5.1827 7.35388 5.35352C7.1831 5.52429 6.91903 5.54592 6.72498 5.41797L6.64685 5.35352L5.00037 3.70703V13.5C5.00037 13.776 4.77632 13.9998 4.50037 14C4.22422 14 4.00037 13.7761 4.00037 13.5V3.70703L2.35388 5.35352C2.15869 5.54871 1.84213 5.54857 1.64685 5.35352C1.45159 5.15825 1.45159 4.84175 1.64685 4.64648L4.14685 2.14648L4.22498 2.08203ZM11.5004 2C11.7763 2.00021 12.0004 2.22399 12.0004 2.5V12.293L13.6469 10.6465L13.725 10.582C13.919 10.4541 14.1831 10.4757 14.3539 10.6465C14.5245 10.8173 14.5463 11.0814 14.4183 11.2754L14.3539 11.3535L11.8539 13.8535C11.7602 13.9472 11.6328 13.9999 11.5004 14C11.401 14 11.3045 13.9703 11.223 13.916L11.1469 13.8535L8.64685 11.3535C8.45159 11.1583 8.45159 10.8417 8.64685 10.6465C8.84213 10.4514 9.15869 10.4513 9.35388 10.6465L11.0004 12.293V2.5C11.0004 2.22386 11.2242 2 11.5004 2Z" fill="#263238"/>
+<svg fill="none" height="14" viewbox="14 13 12 14" width="12" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 14L25 19H15L20 14Z" fill="#263238"></path>
+<path d="M20 26L15 21L25 21L20 26Z" fill="#263238"></path>
 </svg>

package/src/assets/theme.js

@@ -217,6 +217,18 @@ const theme = (() => {
     boxShadow: {
       card: '0px 2px 8px 2px rgba(0, 0, 0, 0.15)',
     },
+    progressBar: {
+      light: {
+        fillColor: semanticColors.purple[500],
+        backgroundColor: semanticColors.grey[200],
+        labelColor: semanticColors.grey[700],
+      },
+      dark: {
+        fillColor: colors.white,
+        backgroundColor: semanticColors.grey[700],
+        labelColor: semanticColors.grey[200],
+      },
+    },
     mainButton: {
       light: {
         // theme

package/src/components/buttons/mainButton/MainButton.stories.js

@@ -104,6 +104,12 @@ WithIcon.args = {
   appTheme: 'light',
 }
 
+export const WithIconLast = Template.bind({})
+WithIconLast.args = {
+  ...WithIcon.args,
+  iconLast: true,
+}
+
 export const Disabled = Template.bind({})
 Disabled.args = {
   type: 'primary',

package/src/components/buttons/mainButton/index.vue

@@ -15,7 +15,7 @@
       :variant="variant"
       :width="width"
     >
-      <LabelComponent :has-icon="Boolean(icon)">
+      <LabelComponent :has-icon="Boolean(icon)" :reverse-direction="iconLast">
         <Icon
           v-if="icon"
           :color="getIconColor"
@@ -146,10 +146,13 @@
 
   const LabelAttrs = {
     hasIcon: Boolean,
+    reverseDirection: Boolean,
   }
 
   const LabelComponent = styled('span', LabelAttrs)`
     display: flex;
+    flex-direction: ${(props) =>
+      props.reverseDirection ? 'row-reverse' : 'row'};
     align-items: center;
     justify-content: center;
     gap: ${(props) => (props.hasIcon ? '5px' : '0')};
@@ -212,6 +215,11 @@
         default: '',
         type: String,
       },
+      iconLast: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
       iconAltStyle: {
         required: false,
         default: false,

package/src/components/dropdown/Dropdown.stories.js

@@ -1,53 +1,125 @@
+import defaultDropdownProps from './defaultProps'
 import Dropdown from './index.vue'
+import theme from '@/assets/theme'
 
 export default {
   title: 'Dropdown',
   component: Dropdown,
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { Dropdown },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: `<Dropdown v-bind="$props">
-  <template #trigger>
-      trigger button
-  </template>
-  <template #dropdown>
-      <div>
-        <h3>fully customizable dropdown</h3>
-        <ul>
-          <li>item</li>
-          <li>item</li>
-          <li>item</li>
-        </ul>
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      description: '',
+    },
+    gap: {
+      description: 'Gap between trigger and dropdown content',
+    },
+    justify: {
+      description:
+        'Rule to allign the dropdown content relatively to the trigger',
+      control: 'select',
+      options: ['right', 'left'],
+    },
+    openingMode: {
+      description:
+        'Way to open the dropdown content: eigther by clicking on trigger or hovering it',
+      control: 'select',
+      options: ['hover', 'click'],
+    },
+    backgroundColor: {
+      description: 'Backbround color of dropdown content',
+      control: {
+        type: 'color',
+        presetColors: [
+          theme.colors.white,
+          theme.colors.grey3,
+          theme.colors.grey4,
+          theme.colors.red,
+        ],
+      },
+    },
+
+    // slots
+    trigger: {
+      description: 'Trigger button slot',
+    },
+    dropdown: {
+      description: 'Dropdown content slot',
+    },
+  },
+}
+
+// To use:
+// import Dropdown from '@eturnity/eturnity_reusable_components/src/components/dropdown'
+// <Dropdown
+//   width="fit-content"
+//   gap="20px"
+//   justify="right"
+//   opening-mode="click"
+//   background-color="red"
+// >
+//   <template #trigger>
+//     TRIGGER BUTTON
+//   </template>
+//   <template #dropdown>
+//     <div>
+//       <div>OPTION 1</div>
+//       <div>OPTION 2</div>
+//     </div>
+//   </template>
+// <Dropdown/>
+
+const Template = (args) => {
+  return {
+    components: { Dropdown },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="margin-left: 30px;">
+        <Dropdown v-bind="args">
+          <template #trigger>
+            {{ args.trigger }}
+          </template>
+          <template #dropdown>
+            <div v-html="args.dropdown"></div>
+          </template>
+        </Dropdown>
       </div>
-  </template>
-</Dropdown>`,
-  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
-  //  How to use:
-  //<icon
-  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
-  //   color="red"
-  //   hoveredColor="blue"
-  //   size="60px" by default, this is 30px
-  // />
-})
+    `,
+  }
+}
 
 export const Default = Template.bind({})
 Default.args = {
-  openingMode: 'click',
+  ...defaultDropdownProps,
+}
+
+export const DropdownWidth = Template.bind({})
+DropdownWidth.args = {
+  ...defaultDropdownProps,
+  width: 'max-content',
+}
+
+export const DropdownGap = Template.bind({})
+DropdownGap.args = {
+  ...defaultDropdownProps,
   gap: '0px',
-  justify: 'left',
-  width: '150px',
 }
 
-export const withHover = Template.bind({})
-withHover.args = {
-  openingMode: 'hover',
-  gap: '20px',
+export const DropdownJustifyRight = Template.bind({})
+DropdownJustifyRight.args = {
+  ...defaultDropdownProps,
   justify: 'right',
-  width: '250px',
+}
+
+export const DropdownOpeningModeClick = Template.bind({})
+DropdownOpeningModeClick.args = {
+  ...defaultDropdownProps,
+  openingMode: 'click',
+}
+
+export const DropdownBackgroundColor = Template.bind({})
+DropdownBackgroundColor.args = {
+  ...defaultDropdownProps,
+  backgroundColor: theme.colors.red,
 }

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/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