@eturnity/eturnity_reusable_components 8.34.0-EPDM-13618.2 → 8.34.0-EPDM-16204.0

package/src/components/progressBar/index.vue

@@ -1,26 +1,36 @@
 <template>
   <Container>
     <ProgressContainer
-      :app-theme="appTheme"
-      data-test-id="progress_bar_container"
+      :background-color="backgroundColor"
+      class="progress-container"
+      :max-width="maxWidth"
+      :min-width="minWidth"
     >
       <ProgressFill
-        :app-theme="appTheme"
-        data-test-id="progress_bar_progress"
+        class="progress-bar"
+        :fill-color="fillColor"
         :fill-progress="fillProgress"
       />
     </ProgressContainer>
-    <LabelText
-      v-if="labelText"
-      :app-theme="appTheme"
-      data-test-id="progress_bar_label"
-    >
-      {{ labelText }}
+    <LabelText v-if="stepNumber || labelText" class="progress-text">
+      {{ labelText ? labelText : '' }}
+      {{ stepNumber ? stepNumber : '' }}
     </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`
@@ -34,34 +44,34 @@
   `
 
   const containerProps = {
-    appTheme: String,
+    backgroundColor: String,
+    maxWidth: String,
+    minWidth: 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.theme.progressBar[props.appTheme].backgroundColor};
+      props.backgroundColor
+        ? props.backgroundColor
+        : props.theme.colors.lightGray};
     @media (max-width: ${(props) => props.theme.screen.mobile}) {
       height: 4px;
     }
   `
 
-  const fillProps = {
-    appTheme: String,
-    fillProgress: String | Number,
-  }
+  const fillProps = { fillColor: String, fillProgress: String | Number }
   const ProgressFill = styled('div', fillProps)`
     height: 100%;
     width: ${(props) => props.fillProgress + '%'};
     background-color: ${(props) =>
-      props.theme.progressBar[props.appTheme].fillColor};
+      props.fillColor ? props.fillColor : props.theme.colors.secondary};
   `
 
-  const labelTextProps = {
-    appTheme: String,
-  }
-  const LabelText = styled('div', labelTextProps)`
-    color: ${(props) => props.theme.progressBar[props.appTheme].labelColor};
+  const LabelText = styled.div`
+    color: ${(props) => props.theme.colors.darkGray};
     font-size: 16px;
 
     @media (max-width: ${(props) => props.theme.screen.tablet}) {
@@ -78,19 +88,37 @@
       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,
-        type: String,
-        default: '',
+        default: null,
       },
-      appTheme: {
-        type: String,
-        default: 'light',
+      stepNumber: {
+        required: false,
+        default: null,
       },
     },
   }

package/src/components/sideMenu/index.vue

@@ -8,6 +8,9 @@
         <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"
@@ -30,6 +33,7 @@
         </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)"
@@ -51,7 +55,11 @@
             }}</ListText>
             <ArrowContainer>
               <Icon
-                :color="theme.semanticColors.grey[800]"
+                :color="
+                  activeParentTab === item.key
+                    ? theme.semanticColors.purple[500]
+                    : theme.semanticColors.teal[800]
+                "
                 :name="
                   activeDropdown === item.key
                     ? 'arrow_up_unfilled'
@@ -65,6 +73,7 @@
             <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="
@@ -81,19 +90,14 @@
       </template>
     </ListContainer>
     <BottomSection v-if="hasLogout">
-      <IconContainer
+      <ButtonIcon
         data-id="button_settings_logout"
-        :is-active="false"
-        :is-button="true"
+        icon-name="logout"
+        text="Logout"
+        type="ghost"
+        variant="tertiary"
         @click="$emit('on-logout')"
-      >
-        <RotateIcon
-          :color="theme.semanticColors.teal[800]"
-          cursor="pointer"
-          name="initial_situation"
-          size="18px"
-        />
-      </IconContainer>
+      />
       <AppVersion>{{ appVersion }}</AppVersion>
     </BottomSection>
   </PageContainer>
@@ -104,6 +108,7 @@
   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)`
@@ -131,18 +136,18 @@
     padding: 4px;
     border-radius: 4px;
     background-color: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+      props.isActive ? props.theme.semanticColors.purple[100] : ''};
     color: ${(props) =>
       props.isActive
         ? props.theme.semanticColors.purple[500]
         : props.theme.semanticColors.teal[800]};
 
-    :hover {
-      background-color: ${(props) => props.theme.semanticColors.purple[100]};
-      color: ${(props) => props.theme.semanticColors.purple[500]};
+    &:hover:not([data-active='true']) {
+      background-color: ${(props) => props.theme.semanticColors.grey[300]};
+      color: ${(props) => props.theme.semanticColors.teal[800]};
       svg path:not(.fix) {
         ${(props) => props.fillType}: ${(props) =>
-          props.theme.semanticColors.purple[500]};
+          props.theme.semanticColors.teal[800]};
       }
     }
   `
@@ -209,11 +214,11 @@
     font-weight: 400;
     font-size: 14px;
     background: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+      props.isActive ? props.theme.semanticColors.purple[100] : ''};
 
-    &:hover {
-      background: ${(props) => props.theme.semanticColors.purple[100]};
-      color: ${(props) => props.theme.semanticColors.purple[500]} !important;
+    &:hover:not([data-active='true']) {
+      background: ${(props) => props.theme.semanticColors.grey[300]};
+      color: ${(props) => props.theme.semanticColors.teal[800]} !important;
     }
   `
 
@@ -228,18 +233,18 @@
     align-items: center;
     cursor: pointer;
     background: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+      props.isActive ? props.theme.semanticColors.purple[100] : ''};
 
     div {
       color: ${(props) =>
         props.isActive ? props.theme.semanticColors.purple[500] : ''};
     }
 
-    &:hover {
-      background: ${(props) => props.theme.semanticColors.purple[100]};
-      color: ${(props) => props.theme.semanticColors.purple[500]};
+    &:hover:not([data-active='true']) {
+      background: ${(props) => props.theme.semanticColors.grey[300]};
+      color: ${(props) => props.theme.semanticColors.teal[800]};
       svg path:not(.fix) {
-        fill: ${(props) => props.theme.semanticColors.purple[500]};
+        fill: ${(props) => props.theme.semanticColors.teal[800]};
       }
     }
   `
@@ -268,12 +273,12 @@
       Spinner,
       SpinnerContainer,
       BottomSection,
-      RotateIcon,
       AppVersion,
       CollapseWrapper,
       CollapseContainer,
       SubRouter,
       ArrowContainer,
+      ButtonIcon,
     },
     props: {
       tabsData: {

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

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

package/src/components/dropdown/defaultProps.js

@@ -1,7 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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/progressBar/ProgressBar.stories.js

@@ -1,62 +0,0 @@
-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

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

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

@@ -1,52 +0,0 @@
-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)
-  })
-})