@eturnity/eturnity_reusable_components 8.34.0-EPDM-16204.1 → 8.37.0

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

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/sideMenu/index.vue

@@ -8,9 +8,6 @@
         <ListItem
           v-if="!item.children"
           :key="idx"
-          :data-active="
-            (activeTab === item.key || activeParentTab === item.key).toString()
-          "
           :data-id="`sub_menu_settings_${item.key}`"
           :fill-type="item.icon === 'free_technology' ? 'stroke' : 'fill'"
           :is-active="activeTab === item.key || activeParentTab === item.key"
@@ -33,7 +30,6 @@
         </ListItem>
         <CollapseWrapper v-else :key="idx + item.key">
           <CollapseContainer
-            :data-active="activeParentTab === item.key"
             :data-id="`sub_menu_settings_${item.key}`"
             :is-active="activeParentTab === item.key"
             @click="toggleActiveDropdown(item.key)"
@@ -55,11 +51,7 @@
             }}</ListText>
             <ArrowContainer>
               <Icon
-                :color="
-                  activeParentTab === item.key
-                    ? theme.semanticColors.purple[500]
-                    : theme.semanticColors.teal[800]
-                "
+                :color="theme.semanticColors.grey[800]"
                 :name="
                   activeDropdown === item.key
                     ? 'arrow_up_unfilled'
@@ -73,7 +65,6 @@
             <SubRouter
               v-for="subItem in item.children"
               :key="subItem.key"
-              :data-active="activeTab === subItem.key"
               :data-id="`sub_menu_settings_${subItem.key}`"
               :is-active="activeTab === subItem.key"
               @click="
@@ -90,14 +81,19 @@
       </template>
     </ListContainer>
     <BottomSection v-if="hasLogout">
-      <ButtonIcon
+      <IconContainer
         data-id="button_settings_logout"
-        icon-name="logout"
-        text="Logout"
-        type="ghost"
-        variant="tertiary"
+        :is-active="false"
+        :is-button="true"
         @click="$emit('on-logout')"
-      />
+      >
+        <RotateIcon
+          :color="theme.semanticColors.teal[800]"
+          cursor="pointer"
+          name="initial_situation"
+          size="18px"
+        />
+      </IconContainer>
       <AppVersion>{{ appVersion }}</AppVersion>
     </BottomSection>
   </PageContainer>
@@ -108,7 +104,6 @@
   import Icon from '../icon'
   import Spinner from '../spinner'
   import theme from '@/assets/theme.js'
-  import ButtonIcon from '../buttons/buttonIcon'
 
   const PageAttrs = { isLoading: Boolean }
   const PageContainer = styled('div', PageAttrs)`
@@ -136,13 +131,13 @@
     padding: 4px;
     border-radius: 4px;
     background-color: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[100] : ''};
+      props.isActive ? props.theme.semanticColors.purple[50] : ''};
     color: ${(props) =>
       props.isActive
         ? props.theme.semanticColors.purple[500]
         : props.theme.semanticColors.teal[800]};
 
-    &:hover:not([data-active='true']) {
+    :hover {
       background-color: ${(props) => props.theme.semanticColors.purple[100]};
       color: ${(props) => props.theme.semanticColors.purple[500]};
       svg path:not(.fix) {
@@ -171,7 +166,8 @@
       `
         cursor: pointer;
         &:hover {
-          background-color: ${(props) => props.theme.semanticColors.purple[50]};
+          background-color: ${(props) =>
+            props.theme.semanticColors.purple[100]};
         `}
   `
 
@@ -213,10 +209,10 @@
     font-weight: 400;
     font-size: 14px;
     background: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[100] : ''};
+      props.isActive ? props.theme.semanticColors.purple[50] : ''};
 
-    &:hover:not([data-active='true']) {
-      background: ${(props) => props.theme.semanticColors.purple[50]};
+    &:hover {
+      background: ${(props) => props.theme.semanticColors.purple[100]};
       color: ${(props) => props.theme.semanticColors.purple[500]} !important;
     }
   `
@@ -232,15 +228,15 @@
     align-items: center;
     cursor: pointer;
     background: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[100] : ''};
+      props.isActive ? props.theme.semanticColors.purple[50] : ''};
 
     div {
       color: ${(props) =>
         props.isActive ? props.theme.semanticColors.purple[500] : ''};
     }
 
-    &:hover:not([data-active='true']) {
-      background: ${(props) => props.theme.semanticColors.purple[50]};
+    &:hover {
+      background: ${(props) => props.theme.semanticColors.purple[100]};
       color: ${(props) => props.theme.semanticColors.purple[500]};
       svg path:not(.fix) {
         fill: ${(props) => props.theme.semanticColors.purple[500]};
@@ -272,12 +268,12 @@
       Spinner,
       SpinnerContainer,
       BottomSection,
+      RotateIcon,
       AppVersion,
       CollapseWrapper,
       CollapseContainer,
       SubRouter,
       ArrowContainer,
-      ButtonIcon,
     },
     props: {
       tabsData: {

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};
         }