@eturnity/eturnity_reusable_components 7.51.16-EPDM-10609.13 → 7.51.16-EPDM-13568.1

package/src/components/sideMenu/index.vue

@@ -9,12 +9,10 @@
           v-if="!item.children"
           :key="idx"
           :data-id="`sub_menu_settings_${item.key}`"
-          :is-active="activeTab === item.key || activeParentTab === item.key"
+          :is-active="activeTab === item.key"
           @click="$emit('tab-click', { activeKey: item.key })"
         >
-          <IconContainer
-            :is-active="activeTab === item.key || activeParentTab === item.key"
-          >
+          <IconContainer :is-active="activeTab === item.key">
             <Icon color="#fff" cursor="pointer" :name="item.icon" size="18px" />
           </IconContainer>
           <ListText>{{ $gettext(item.label) }}</ListText>

package/src/components/spinner/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <SpinnerContainer v-if="fullWidth" data-test-id="spinner_full_container">
+  <SpinnerContainer
+    v-if="fullWidth"
+    data-test-id="spinner_full_container"
+    :size="size"
+  >
     <Container>
-      <SpinnerWrapper data-test-id="spinner_full_wrapper">
-        <SpinnerSvg
-          :class="{ white: isWhite }"
-          data-test-id="spinner_full_icon"
-          :style="{ width: size, height: size }"
-        />
+      <SpinnerWrapper data-test-id="spinner_full_wrapper" :size="size">
+        <SpinnerCircle :is-white="isWhite" :size="size" />
       </SpinnerWrapper>
     </Container>
   </SpinnerContainer>
@@ -15,21 +15,14 @@
     data-test-id="spinner_container"
     :limited-to-modal="limitedToModal"
   >
-    <SpinnerWrapper data-test-id="spinner_wrapper">
-      <SpinnerSvg
-        :class="{ white: isWhite }"
-        data-test-id="spinner_icon"
-        :style="{ width: size, height: size }"
-      />
+    <SpinnerWrapper data-test-id="spinner_wrapper" :size="size">
+      <SpinnerCircle :is-white="isWhite" :size="size" />
     </SpinnerWrapper>
   </Container>
 </template>
 
 <script>
-  // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
-  // <spinner size="30px" />
   import styled from 'vue3-styled-components'
-  import SpinnerSvg from '../../assets/icons/black_spinner.svg'
 
   const SpinnerContainer = styled.div`
     position: fixed;
@@ -43,35 +36,72 @@
     justify-items: center;
     z-index: 100;
   `
+
   const containerAttrs = { limitedToModal: Boolean }
   const Container = styled('div', containerAttrs)`
     display: grid;
     align-items: center;
     justify-items: center;
     position: ${(props) => (props.limitedToModal ? 'absolute' : 'inherit')};
-    height: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
-    width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
+    height: ${(props) => (props.limitedToModal ? '100%' : 'auto')};
+    width: ${(props) => (props.limitedToModal ? '100%' : 'auto')};
   `
 
-  const SpinnerWrapper = styled.div`
-    width: ${(props) => (props.size ? props.size : '60px')};
-    height: auto;
+  const wrapperAttrs = { size: String }
+  const SpinnerWrapper = styled('div', wrapperAttrs)`
+    width: ${(props) =>
+      props.size === 'large'
+        ? '56px'
+        : props.size === 'medium'
+        ? '40px'
+        : '24px'};
+    height: ${(props) =>
+      props.size === 'large'
+        ? '56px'
+        : props.size === 'medium'
+        ? '40px'
+        : '24px'};
+  `
+
+  const circleAttrs = { size: String, isWhite: Boolean }
+  const SpinnerCircle = styled('div', circleAttrs)`
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+    border: ${(props) => (props.size === 'large' ? '4px' : '2px')} solid
+      ${(props) =>
+        props.isWhite ? props.theme.colors.grey5 : props.theme.colors.white};
+    border-top-color: ${(props) =>
+      props.isWhite ? props.theme.colors.white : props.theme.colors.brightBlue};
+    border-right-color: ${(props) =>
+      props.isWhite ? props.theme.colors.white : props.theme.colors.brightBlue};
+    border-bottom-color: ${(props) =>
+      props.isWhite ? props.theme.colors.white : props.theme.colors.brightBlue};
+    animation: spin 1s linear infinite;
+    transform: rotate(90deg);
 
-    .white {
-      filter: brightness(0) invert(1);
+    @keyframes spin {
+      to {
+        transform: rotate(450deg);
+      }
     }
   `
 
   export default {
-    name: 'SpinnerComponent',
+    name: 'NewSpinner',
     components: {
+      SpinnerContainer,
+      SpinnerCircle,
       Container,
       SpinnerWrapper,
-      SpinnerContainer,
-      SpinnerSvg,
     },
     props: {
-      fullWidth: {
+      size: {
+        type: String,
+        default: 'medium',
+        validator: (value) => ['small', 'medium', 'large'].includes(value),
+      },
+      isWhite: {
         required: false,
         default: false,
         type: Boolean,
@@ -81,12 +111,7 @@
         default: false,
         type: Boolean,
       },
-      size: {
-        required: false,
-        default: '60px',
-        type: String,
-      },
-      isWhite: {
+      fullWidth: {
         required: false,
         default: false,
         type: Boolean,

package/src/components/tableDropdown/index.vue

@@ -119,7 +119,7 @@
                 @on-change="onSearch($event)"
               />
             </SearchContainer>
-            <Spinner v-if="optionsLoading" />
+            <Spinner v-if="optionsLoading" size="small" />
             <EmptyText v-else-if="!optionsLoading && !optionItems.length">
               {{ emptyText ? emptyText : $gettext('No components found.') }}
             </EmptyText>

package/src/assets/svgIcons/plus_button.svg

@@ -1,4 +0,0 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M22 10V12L0 12L1.19209e-07 10L22 10Z" fill="white"/>
-<path d="M10 0H12V22H10V0Z" fill="white"/>
-</svg>

package/src/assets/svgIcons/star.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 9.46199L9.708 11.7L8.724 7.48199L12 4.64399L7.686 4.27799L6 0.299988L4.314 4.27799L0 4.64399L3.276 7.48199L2.292 11.7L6 9.46199Z" fill="#FDB813"/>
-</svg>

package/src/components/infoText/constants.js

@@ -1,4 +0,0 @@
-export const TEXT_OVERLAY_TOP_OFFSET = 35
-export const TEXT_OVERLAY_LEFT_OFFSET = 3
-export const TEXT_OVERLAY_ARROW_LEFT_OFFSET = 62
-export const TEXT_OVERLAY_ARROW_RIGHT_NEGATIVE_OFFSET = 68

package/src/components/infoText/infoText.spec.js

@@ -1,62 +0,0 @@
-/* eslint-disable */
-import { mount } from '@vue/test-utils'
-import InfoText from '@/components/infoText'
-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('close_for_modals,_tool_tips.svg')),
-}))
-
-describe('InfoText Component', () => {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = mount(InfoText, {
-      props: {
-        text: 'default text',
-        size: '14px',
-        infoPosition: 'bottom',
-        alignArrow: 'center',
-        openTrigger: 'onHover',
-        width: '165px',
-        maxWidth: '165px',
-        shouldUseTeleport: false,
-        dotColor: '#00009f',
-        type: 'info',
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-  })
-
-  test('renders InfoText component with default props', () => {
-    expect(wrapper.find('[data-test-id="infoText_info"]').exists()).toBe(true)
-    expect(wrapper.vm.text).toContain('default text')
-    expect(wrapper.vm.size).toContain('14px')
-    expect(wrapper.vm.infoPosition).toContain('bottom')
-    expect(wrapper.vm.alignArrow).toContain('center')
-  })
-
-  test('openTrigger prop is set to onClick', async () => {
-    await wrapper.setProps({ openTrigger: 'onClick' })
-
-    //should not see text upon hover
-    expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
-      false
-    )
-    //should see text upon click
-    await wrapper.find('[data-test-id="infoText_trigger"]').trigger('click')
-    expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
-      true
-    )
-  })
-
-  test('position type is dot', async () => {
-    await wrapper.setProps({ type: 'dot' })
-    expect(wrapper.find('[data-test-id="infoText_dot"]').exists()).toBe(true)
-  })
-})

package/src/components/infoText/infoText.stories.js

@@ -1,48 +0,0 @@
-import InfoText from './index.vue'
-
-export default {
-  title: 'infoText',
-  component: InfoText,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-}
-
-// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
-//To use:
-// <info-text
-//     text="Veritatis et quasi architecto beatae vitae"
-//     size="20px"
-//     alignArrow="right" // which side the arrow should be on
-// />
-
-export const Default = {
-  args: {
-    text: 'default text',
-    size: '14px',
-    infoPosition: 'bottom',
-    alignArrow: 'center',
-    openTrigger: 'onHover',
-    width: '165px',
-    maxWidth: '165px',
-    shouldUseTeleport: false,
-    dotColor: '#00009f',
-    type: 'info',
-  },
-}
-
-export const Dot = {
-  args: {
-    ...Default.args,
-    type: 'dot',
-  },
-}
-
-//will only show the info text on click
-export const OnClick = {
-  args: {
-    ...Default.args,
-    openTrigger: 'onClick',
-  },
-}