@eturnity/eturnity_reusable_components 8.34.0-EPDM-16204.1 → 8.37.0

package/dist/main.es99.js

@@ -2,17 +2,17 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "8",
-  height: "16",
+  width: "13",
+  height: "23",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
   fill: "#263238",
-  d: "M21.5 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.5 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+  d: "M21.5 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.5 20a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.5 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
 }, null, -1);
 const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
   fill: "#99DB0C",
-  d: "m22.94 18.96-3.78 3.73-2.1.25.25-2.1 3.73-3.78z"
+  d: "m28.94 7.96-3.78 3.73-2.1.25.25-2.1 3.73-3.78z"
 }, null, -1);
 const _hoisted_4 = [
   _hoisted_2,
@@ -21,8 +21,8 @@ const _hoisted_4 = [
 function render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
 }
-const context_menu2 = { render };
+const context_menu1 = { render };
 export {
-  context_menu2 as default,
+  context_menu1 as default,
   render
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.34.0-EPDM-16204.1",
+  "version": "8.37.0",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/electricity_tariff.svg

@@ -1,3 +1,3 @@
-<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.5125 0.999636C9.0643 1.00006 9.51229 1.44779 9.5125 1.99964V4.44104C9.56257 4.43332 9.61457 4.42835 9.6668 4.42835H11.8973C12.449 4.4288 12.8971 4.87652 12.8973 5.42835V11.9996C12.8971 12.5515 12.4491 12.9992 11.8973 12.9996H8.6668V12.986C8.61656 12.9938 8.56492 12.9996 8.5125 12.9996H6.28203L6.1795 12.9948C6.16229 12.993 6.14468 12.9896 6.12774 12.9869V12.9996H2.89727L2.79473 12.9948C2.29064 12.9434 1.89733 12.5173 1.89727 11.9996V11.3092C2.25984 11.3343 2.61386 11.2265 2.89727 11.0153V11.9996H5.12774V7.99964H4.18633L4.51934 6.99964H5.12774C5.18011 6.99968 5.23184 7.00454 5.28203 7.01233V1.99964C5.28223 1.48213 5.67549 1.05584 6.1795 1.00452L6.28203 0.999636H8.5125ZM6.28203 11.9996H8.5125V1.99964H6.28203V11.9996ZM9.6668 11.9996H11.8973V5.42835H9.6668V11.9996ZM1.5252 0.656862C1.61252 0.394909 1.89606 0.253171 2.15801 0.340456C2.41998 0.42778 2.56174 0.711297 2.47442 0.973268L1.19414 4.81507H3.22246C3.70002 4.81516 4.03723 5.28288 3.88653 5.73596L2.47442 9.97327C2.38695 10.235 2.10346 10.377 1.84161 10.2897C1.57979 10.2024 1.43813 9.91871 1.5252 9.65686L2.80547 5.81507H0.777152C0.299817 5.81486 -0.0372931 5.34708 0.11309 4.89417L1.5252 0.656862Z" fill="black"/>
+<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.36652 9.33445C9.4832 9.20595 9.39203 9 9.21845 9H6.16767L8.29896 0.785289C8.35143 0.583073 8.09775 0.44595 7.95731 0.60061L0.633784 8.66555C0.517096 8.79405 0.608271 9 0.781847 9H3.83263L1.70134 17.2147C1.64887 17.4169 1.90255 17.5541 2.04299 17.3994L9.36652 9.33445Z" fill="#263238"/>
 </svg>

package/src/assets/svgIcons/suitcase.svg

@@ -1,3 +1,3 @@
-<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 0C9.10457 3.22133e-08 10 0.895431 10 2V3H12.5L12.6533 3.00781C13.4097 3.08461 14 3.72334 14 4.5V11.5C14 12.2767 13.4097 12.9154 12.6533 12.9922L12.5 13H1.5C0.723336 13 0.0846097 12.4097 0.0078125 11.6533L0 11.5V4.5C0 3.67157 0.671573 3 1.5 3H4V2C4 0.895431 4.89543 3.22128e-08 6 0H8ZM1.5 4C1.22386 4 1 4.22386 1 4.5V11.5C1 11.7761 1.22386 12 1.5 12H12.5C12.7761 12 13 11.7761 13 11.5V4.5C13 4.22386 12.7761 4 12.5 4H1.5ZM6 1C5.44772 1 5 1.44772 5 2V3H9V2C9 1.44772 8.55228 1 8 1H6Z" fill="black"/>
+<svg fill="none" height="15" viewbox="12 12 16 15" width="16" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.6 16.15H23.5V14.75C23.5 13.973 22.877 13.35 22.1 13.35H17.9C17.123 13.35 16.5 13.973 16.5 14.75V16.15H14.4C13.623 16.15 13 16.773 13 17.55V25.25C13 26.027 13.623 26.65 14.4 26.65H25.6C26.377 26.65 27 26.027 27 25.25V17.55C27 16.773 26.377 16.15 25.6 16.15ZM17.9 14.75H22.1V16.15H17.9V14.75ZM25.6 21.75H14.4V17.55H16.5H17.9H22.1H23.5H25.6V21.75Z" fill="#263238"></path>
 </svg>

package/src/assets/theme.js

@@ -26,8 +26,6 @@ const theme = (() => {
     red2: '#de5959',
     red3: '#FFCCCC',
     red4: '#FF9A9A',
-    red6: '#FFEBEB',
-    red5: '#CC4545',
     pureRed: '#ff0000',
     darkRed: '#d00000',
     cornellRed: '#a52019',
@@ -68,8 +66,6 @@ const theme = (() => {
     purple4: '#D0D6F5',
     purple5: '#533181',
     purple6: '#6F20DC',
-    purple7: '#F5EEFF',
-    purple8: '#B17BFA',
     orange: '#ffc338',
     disabled: '#dfe1e1',
     transparentWhite2: '#ffffff32',
@@ -184,9 +180,25 @@ const theme = (() => {
     },
   }
 
+  const chartGradients = {
+    simple: {
+      from: semanticColors.purple[500],
+      to: semanticColors.purple[400],
+    },
+    stacked: [
+      { from: '#F5EDFF', to: '#DEC5FF' },
+      { from: '#CAA2FF', to: '#F2E8FF' },
+      { from: '#B987FC', to: '#904AEF' },
+      { from: '#8B40F2', to: '#4A1394' },
+      { from: '#6A05F2', to: '#4905A5' },
+      { from: '#5402C3', to: '#2B0362' },
+    ],
+  }
+
   return {
     colors,
     semanticColors,
+    chartGradients,
     fonts: {
       mainFont: '"Figtree", sans-serif',
     },
@@ -205,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
@@ -403,26 +427,28 @@ const theme = (() => {
               borderColor: '',
             },
           },
-          tertiary: {
+        },
+        protag: {
+          main: {
             default: {
-              backgroundColor: 'transparent',
+              backgroundColor: semanticColors.yellow[300],
               textColor: semanticColors.teal[800],
-              borderColor: semanticColors.teal[100],
+              borderColor: 'transparent',
             },
             hover: {
-              backgroundColor: semanticColors.grey[200],
+              backgroundColor: semanticColors.yellow[300],
               textColor: semanticColors.teal[800],
-              borderColor: semanticColors.teal[100],
+              borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.grey[400],
+              backgroundColor: semanticColors.yellow[300],
               textColor: semanticColors.teal[800],
-              borderColor: semanticColors.teal[100],
+              borderColor: '',
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
-              borderColor: semanticColors.grey[800],
+              backgroundColor: semanticColors.yellow[300],
+              textColor: semanticColors.teal[400],
+              borderColor: '',
             },
           },
         },
@@ -450,152 +476,153 @@ const theme = (() => {
             },
           },
         },
-        protag: {
+      },
+      dark: {
+        // theme
+        primary: {
+          // type
           main: {
+            // variant: this is the default variant
             default: {
-              backgroundColor: semanticColors.yellow[200],
+              backgroundColor: colors.white,
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.yellow[200],
+              backgroundColor: semanticColors.purple[100],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.yellow[200],
+              backgroundColor: semanticColors.purple[100],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             disabled: {
-              backgroundColor: semanticColors.yellow[200],
-              textColor: semanticColors.teal[400],
+              textColor: semanticColors.grey[800],
+              backgroundColor: semanticColors.grey[400],
               borderColor: '',
             },
           },
-        },
-        freeTrialTag: {
-          main: {
+          cancel: {
+            // variant
             default: {
-              backgroundColor: semanticColors.blue[200],
+              backgroundColor: semanticColors.red[400],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.blue[200],
+              backgroundColor: semanticColors.red[100],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.blue[200],
+              backgroundColor: semanticColors.red[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             disabled: {
-              backgroundColor: semanticColors.blue[200],
-              textColor: semanticColors.teal[400],
+              backgroundColor: semanticColors.grey[300],
+              textColor: semanticColors.grey[800],
               borderColor: '',
             },
           },
         },
-      },
-      dark: {
-        // theme
-        primary: {
+        secondary: {
           // type
           main: {
             // variant: this is the default variant
             default: {
-              backgroundColor: colors.white,
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.teal[800],
+              textColor: semanticColors.purple[50],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.purple[100],
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.teal[600],
+              textColor: semanticColors.purple[50],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.purple[100],
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.teal[700],
+              textColor: semanticColors.purple[50],
               borderColor: '',
             },
             disabled: {
-              textColor: semanticColors.grey[800],
-              backgroundColor: semanticColors.grey[400],
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
               borderColor: '',
             },
           },
           cancel: {
             // variant
             default: {
-              backgroundColor: semanticColors.red[400],
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.red[800],
+              textColor: semanticColors.red[400],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.red[100],
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.red[700],
+              textColor: semanticColors.red[300],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.red[200],
-              textColor: semanticColors.teal[800],
+              backgroundColor: semanticColors.red[600],
+              textColor: semanticColors.red[200],
               borderColor: '',
             },
             disabled: {
-              backgroundColor: semanticColors.grey[300],
-              textColor: semanticColors.grey[800],
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
               borderColor: '',
             },
           },
         },
-        secondary: {
+        tertiary: {
           // type
           main: {
             // variant: this is the default variant
             default: {
-              backgroundColor: semanticColors.teal[800],
+              backgroundColor: 'transparent',
               textColor: semanticColors.purple[50],
-              borderColor: '',
+              borderColor: semanticColors.teal[500],
             },
             hover: {
               backgroundColor: semanticColors.teal[600],
               textColor: semanticColors.purple[50],
-              borderColor: '',
+              borderColor: semanticColors.teal[400],
             },
             active: {
               backgroundColor: semanticColors.teal[700],
               textColor: semanticColors.purple[50],
-              borderColor: '',
+              borderColor: semanticColors.teal[300],
             },
             disabled: {
               textColor: semanticColors.grey[600],
               backgroundColor: semanticColors.grey[500],
-              borderColor: '',
+              borderColor: semanticColors.grey[800],
             },
           },
           cancel: {
             // variant
             default: {
-              backgroundColor: semanticColors.red[800],
+              backgroundColor: semanticColors.teal[200],
               textColor: semanticColors.red[400],
-              borderColor: '',
+              borderColor: semanticColors.teal[500],
             },
             hover: {
               backgroundColor: semanticColors.red[700],
-              textColor: semanticColors.red[300],
-              borderColor: '',
+              textColor: semanticColors.red[700],
+              borderColor: semanticColors.teal[400],
             },
             active: {
               backgroundColor: semanticColors.red[600],
               textColor: semanticColors.red[200],
-              borderColor: '',
+              borderColor: semanticColors.teal[300],
             },
             disabled: {
               textColor: semanticColors.grey[600],
               backgroundColor: semanticColors.grey[500],
-              borderColor: '',
+              borderColor: semanticColors.grey[800],
             },
           },
         },
@@ -739,9 +766,9 @@ const theme = (() => {
           iconWidth: '26px',
         },
         tiny: {
-          padding: '3px 5px',
-          fontSize: '11px',
-          iconWidth: '14px',
+          padding: '2px 5px',
+          fontSize: '10px',
+          iconWidth: '18px',
         },
       },
     },

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)
+  })
+})