@eturnity/eturnity_reusable_components 7.48.1-dev-14.0 → 7.48.1-qa-elisee-7.51.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.48.1-dev-14.0",
+  "version": "7.48.1-qa-elisee-7.51.1",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/lock.svg

@@ -1,3 +1,3 @@
-<svg fill="none" height="16" viewbox="14 12 12 16" width="12" xmlns="http://www.w3.org/2000/svg">
+<svg fill="none" height="16" viewbox="14 12 12 16" width="16" xmlns="http://www.w3.org/2000/svg">
 <path clip-rule="evenodd" d="M16.5 18.25V16.5C16.5 14.567 18.067 13 20 13C21.933 13 23.5 14.567 23.5 16.5V18.25H25.25V27H14.75V18.25H16.5ZM18.25 16.5C18.25 15.5335 19.0335 14.75 20 14.75C20.9665 14.75 21.75 15.5335 21.75 16.5V18.25H18.25V16.5ZM19.125 24.375V20.875H20.875V24.375H19.125Z" fill="#263238" fill-rule="evenodd"></path>
 </svg>

package/src/assets/theme.js

@@ -12,7 +12,6 @@ const theme = {
     white: '#ffffff',
     blue: '#48a2d0',
     red: '#ff5656',
-    pureRed: '#ff0000',
     blue1: '#e4efff',
     brightBlue: '#0068DE',
     grey1: '#666',

package/src/components/icon/Icons.stories.js

@@ -3,24 +3,14 @@ import IconCollection from './iconCollection.vue'
 export default {
   title: 'icon',
   component: IconCollection,
-  // argTypes: {},
 }
 
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
+const Template = (args) => ({
   components: { IconCollection },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<IconCollection v-bind="$props" />',
-
-  // 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
-  // />
+  setup() {
+    return { args }
+  },
+  template: '<IconCollection v-bind="args" />',
 })
 
 export const Default = Template.bind({})
@@ -28,14 +18,14 @@ Default.args = {
   size: '30px',
 }
 
-export const withColor = Template.bind({})
-withColor.args = {
+export const WithColor = Template.bind({})
+WithColor.args = {
   size: '30px',
   color: 'red',
   hoveredColor: 'crimson',
 }
 
-export const large = Template.bind({})
-large.args = {
+export const Large = Template.bind({})
+Large.args = {
   size: '60px',
 }

package/src/components/icon/icon.spec.js

@@ -0,0 +1,66 @@
+import { mount } from '@vue/test-utils'
+import RCIcon from '@/components/icon'
+import theme from '@/assets/theme'
+import 'jest-styled-components'
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+describe('RCIcon.vue', () => {
+  it('renders icon with default props', async () => {
+    const wrapper = mount(RCIcon, {
+      props: { name: 'House' },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const iconWrapper = wrapper.find('[data-test-id="icon_wrapper"]')
+    const iconImage = wrapper.find('[data-test-id="icon_image"]')
+
+    expect(iconWrapper.exists()).toBe(true)
+    expect(iconImage.exists()).toBe(true)
+    expect(wrapper.props('size')).toBe('30px')
+  })
+
+  it('renders striked line when isStriked is true', async () => {
+    const wrapper = mount(RCIcon, {
+      props: {
+        name: 'House',
+        isStriked: true,
+        color: 'red',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const strikedLine = wrapper.find('[data-test-id="icon_striked_line"]')
+    expect(strikedLine.exists()).toBe(true)
+  })
+
+  it('applies correct styling based on props', async () => {
+    const wrapper = mount(RCIcon, {
+      props: {
+        name: 'House',
+        size: '60px',
+        color: 'red',
+        hoveredColor: 'blue',
+        backgroundColor: 'yellow',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const iconImage = wrapper.find('[data-test-id="icon_image"]')
+    expect(iconImage.exists()).toBe(true)
+    // Add assertions for styling if needed
+  })
+})

package/src/components/icon/iconCollection.vue

@@ -2,6 +2,7 @@
   <Wrapper>
     <IconWrapper v-for="iconItem in iconList" :key="iconItem.name">
       <div>
+        color:{{ color }}
         <RCIcon
           :color="color"
           :hovered-color="hoveredColor"
@@ -39,9 +40,9 @@
     name: 'CollectionComponent',
     components: { RCIcon, IconWrapper, Wrapper },
     props: {
-      size: { required: false },
-      color: { required: false },
-      hoveredColor: { required: false },
+      size: { required: false, type: String, default: '30px' },
+      color: { required: false, type: String, default: 'white' },
+      hoveredColor: { required: false, type: String, default: 'grey' },
     },
     data() {
       return {

package/src/components/icon/index.vue

@@ -1,14 +1,24 @@
 <template>
-  <Wrapper :cursor="cursor" :disabled="disabled" :size="size">
+  <Wrapper
+    :cursor="cursor"
+    data-test-id="icon_wrapper"
+    :disabled="disabled"
+    :size="size"
+  >
     <IconImage
       :animation="animation"
       :background-color="backgroundColor"
       :color="color"
+      data-test-id="icon_image"
       :hovered-color="hoveredColor"
     >
-      <i v-html="icon.html"></i>
+      <i data-test-id="icon_svg" v-html="icon.html"></i>
     </IconImage>
-    <StrikedLine v-if="isStriked" :color="color" />
+    <StrikedLine
+      v-if="isStriked"
+      :color="color"
+      data-test-id="icon_striked_line"
+    />
   </Wrapper>
 </template>
 

package/src/components/infoCard/index.vue

@@ -1,21 +1,11 @@
 <template>
   <InfoContainer
-    :align-items="alignItems"
+    background-color="backgrounColor"
     :border-color="borderColor"
-    :border-style="borderStyle"
-    :color="color"
-    data-test-id="info_card_wrapper"
-    :min-width="minWidth"
-    :padding="padding"
-    :preset-styles="presetStyles"
+    :has-dashed-border="hasDashedBorder"
   >
-    <RCIcon
-      :color="iconColor ? iconColor : presetStyles.iconColor"
-      data-test-id="info_card_icon"
-      name="info"
-      size="24px"
-    />
-    <TextContainer data-test-id="info_card_text_container">
+    <RCIcon :color="color" name="info" size="24px" />
+    <TextContainer>
       <slot></slot>
     </TextContainer>
   </InfoContainer>
@@ -23,37 +13,26 @@
 
 <script>
   import styled from 'vue3-styled-components'
-  import theme from '../../assets/theme.js'
   import RCIcon from '../icon'
-
-  const infoContainerAttrs = {
-    minWidth: String,
-    color: String,
-    alignItems: String,
-    padding: String,
+  const propsContainer = {
+    backgroundColor: String,
+    hasDashedBorder: Boolean,
     borderColor: String,
-    borderStyle: String,
-    presetStyles: Object,
   }
-  const InfoContainer = styled('div', infoContainerAttrs)`
+  const InfoContainer = styled('div', propsContainer)`
     display: flex;
-    align-items: ${(props) =>
-      props.alignItems ? props.alignItems : props.presetStyles.alignItems};
     gap: 15px;
-    min-width: ${(props) => props.minWidth};
-    padding: ${(props) =>
-      props.padding ? props.padding : props.presetStyles.padding};
-    color: ${(props) => (props.color ? props.color : props.presetStyles.color)};
-    border-radius: 4px;
+    padding: 15px;
+    border: 1px ${(props) => (props.hasDashedBorder ? 'dashed' : 'solid')}
+      ${(props) =>
+        props.theme.colors[props.borderColor]
+          ? props.theme.colors[props.borderColor]
+          : props.borderColor};
     background-color: ${(props) =>
-      props.backgroundColor
-        ? props.backgroundColor
-        : props.presetStyles.backgroundColor};
-    border-width: ${(props) => props.presetStyles.borderWidth};
-    border-style: ${(props) =>
-      props.borderStyle ? props.borderStyle : props.presetStyles.borderStyle};
-    border-color: ${(props) =>
-      props.borderColor ? props.borderColor : props.presetStyles.borderColor};
+      props.theme.colors[props.backgroundColor]
+        ? props.theme.colors[props.backgroundColor]
+        : props.backgroundColor};
+    border-radius: 4px;
   `
 
   const TextContainer = styled.div`
@@ -69,83 +48,19 @@
       TextContainer,
     },
     props: {
-      type: {
-        required: false,
-        type: String,
-        default: 'info',
-      },
-      minWidth: {
-        required: false,
-        type: String,
-        default: '',
-      },
-      iconColor: {
-        required: false,
-        type: String,
-        default: '',
-      },
       color: {
         required: false,
-        type: String,
-        default: '',
       },
-      alignItems: {
+      backgrounColor: {
         required: false,
-        type: String,
-        default: '',
       },
-      padding: {
+      hasDashedBorder: {
         required: false,
-        type: String,
-        default: '',
+        default: true,
       },
       borderColor: {
         required: false,
-        type: String,
-        default: '',
-      },
-      borderStyle: {
-        required: false,
-        type: String,
-        default: '',
-      },
-    },
-    computed: {
-      isInfo() {
-        // this property is used for tests
-        return this.type === 'info'
-      },
-      isWarning() {
-        return this.type === 'warning'
-      },
-      isErrorMinor() {
-        return this.type === 'error_minor'
-      },
-      presetStyles() {
-        // the types that doesn't have explicit border anyway have it transparent
-        // to avoid flickering in case the same info card would switch the types
-        let stylesCollection = {
-          alignItems: 'flex-start',
-          padding: '20px',
-          borderWidth: '1px',
-          borderStyle: 'solid',
-          borderColor: 'transparent',
-        }
-
-        if (this.isWarning) {
-          stylesCollection.color = theme.colors.white
-          stylesCollection.backgroundColor = theme.colors.yellow
-          stylesCollection.iconColor = theme.colors.white
-        } else if (this.isErrorMinor) {
-          stylesCollection.borderStyle = 'dashed'
-          stylesCollection.borderColor = theme.colors.pureRed
-          stylesCollection.iconColor = theme.colors.pureRed
-        } else {
-          stylesCollection.borderStyle = 'dashed'
-          stylesCollection.borderColor = theme.colors.grey4
-        }
-
-        return stylesCollection
+        default: 'grey4',
       },
     },
   }

package/src/components/inputs/inputNumber/index.vue

@@ -4,6 +4,7 @@
       v-if="hasLabelSlot"
       :align-items="alignItems"
       :border-color="borderColor"
+      :is-disabled="disabled"
       :is-error="isError"
       :is-interactive="isInteractive"
       :no-border="noBorder"
@@ -273,18 +274,22 @@
         : props.theme.colors.mediumGray};
   `
 
-  const LabelWrapper = styled('div', inputProps)`
+  const LabelWrapper = styled('div')`
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 8px;
-    cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
   `
   const LabelSlotWrapper = styled('div', inputProps)`
     display: flex;
     gap: 10px;
     align-items: center;
-    cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
+    cursor: ${(props) =>
+      props.isDisabled
+        ? 'not-allowed'
+        : props.isInteractive
+        ? 'ew-resize'
+        : 'auto'};
     border: ${(props) =>
       props.alignItems == 'vertical'
         ? 'none'
@@ -760,12 +765,18 @@
         }
       },
       initInteraction(e) {
+        if (this.disabled) {
+          return
+        }
         this.focusInput()
         e.preventDefault()
         window.addEventListener('mousemove', this.interact, false)
         window.addEventListener('mouseup', this.stopInteract, false)
       },
       interact(e) {
+        if (this.disabled) {
+          return
+        }
         e.preventDefault()
         let value = parseFloat(this.value || 0)
         value += parseFloat(this.interactionStep) * parseInt(e.movementX)

package/src/components/inputs/radioButton/defaultProps.js

@@ -1,4 +1,6 @@
 const defaultRadioButtonProps = {
+  dataId: 'radio_buttons',
+  name: 'options',
   options: [
     {
       label: 'Option 1',

package/src/components/inputs/select/index.vue

@@ -43,6 +43,7 @@
             buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
           "
           class="select-button"
+          :color-mode="colorMode"
           :data-id="dataId"
           :disabled="disabled"
           :font-color="
@@ -86,7 +87,6 @@
           />
           <Selector
             v-else
-            :disabled="disabled"
             :padding-left="paddingLeft"
             :select-width="selectWidth"
             :show-border="showBorder"
@@ -97,9 +97,7 @@
             <Icon
               v-if="isDropdownOpen"
               :color="
-                caretColor || disabled
-                  ? 'grey2'
-                  : colorMode == 'dark'
+                caretColor || colorMode == 'dark'
                   ? 'white'
                   : 'transparentBlack1'
               "
@@ -109,9 +107,7 @@
             <Icon
               v-else
               :color="
-                caretColor || disabled
-                  ? 'grey2'
-                  : colorMode == 'dark'
+                caretColor || colorMode == 'dark'
                   ? 'white'
                   : 'transparentBlack1'
               "
@@ -204,13 +200,11 @@
   `
 
   const selectorProps = {
-    disabled: Boolean,
     selectWidth: String,
     paddingLeft: String,
     showBorder: Boolean,
   }
   const Selector = styled('div', selectorProps)`
-    color: ${(props) => (props.disabled ? props.theme.colors.grey2 : '')};
     ${(props) =>
       props.selectWidth === '100%'
         ? 'width: 100%;'
@@ -281,6 +275,7 @@
     noRelative: Boolean,
     tablePaddingLeft: String,
     showDisabledBackground: Boolean,
+    colorMode: String,
   }
   const SelectButton = styled('div', selectButtonAttrs)`
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
@@ -318,12 +313,16 @@
   `}
     background-color:${(props) =>
       props.disabled && props.showDisabledBackground
-        ? props.theme.colors.grey5
+        ? props.colorMode == 'dark'
+          ? props.theme.transparentBlack1
+          : props.theme.colors.grey5
         : props.theme.colors[props.bgColor]
         ? props.theme.colors[props.bgColor]
         : props.bgColor};
     color: ${(props) =>
-      props.theme.colors[props.fontColor]
+      props.disabled
+        ? props.theme.colors.grey2
+        : props.theme.colors[props.fontColor]
         ? props.theme.colors[props.fontColor]
         : props.fontColor};
     ${(props) => (props.disabled ? 'pointer-events: none' : '')};
@@ -542,7 +541,6 @@
       },
       disabled: {
         required: false,
-        type: Boolean,
         default: false,
       },
       isAutoSearch: {
@@ -621,7 +619,7 @@
         if (this.isDropdownOpen) {
           return this.$refs.dropdown.$el.childElementCount > 1
             ? this.$refs.dropdown.$el.childElementCount
-            : !!this.$refs.dropdown.$el.children[0]
+            : this.$refs.dropdown.$el.children[0]
             ? this.$refs.dropdown.$el.children[0].childElementCount
             : 0
         }

package/src/components/modals/modal/index.vue

@@ -5,7 +5,7 @@
     :is-open="isOpen"
     :position="position"
   >
-    <ModalContainer :overflow="overflowRule" @click="onClickModalContainer">
+    <ModalContainer @click="onClickModalContainer">
       <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
       <ContentContainer :visible="!isLoading">
         <slot></slot>
@@ -67,8 +67,7 @@
   }
 `
 
-  const modalContainerAttrs = { overflow: String }
-  const ModalContainer = styled('div', modalContainerAttrs)`
+  const ModalContainer = styled.div`
     align-self: center;
     justify-self: center;
     position: relative;
@@ -76,7 +75,7 @@
     border-radius: 4px;
     background: white;
     margin: 0 auto;
-    overflow: ${(props) => props.overflow};
+    overflow: auto;
     max-width: 95%;
     max-height: 95%;
     min-width: 100px;
@@ -153,11 +152,6 @@
         type: Boolean,
         default: true,
       },
-      overflowRule: {
-        required: false,
-        type: String,
-        default: 'auto',
-      },
     },
     watch: {
       isOpen: {

package/src/components/sideMenu/index.vue

@@ -254,6 +254,9 @@
         activeDropdown: null,
       }
     },
+    mounted() {
+      this.activeDropdown = this.activeParentTab
+    },
     methods: {
       toggleActiveDropdown(value) {
         if (this.activeDropdown === value) {
@@ -263,17 +266,5 @@
         }
       },
     },
-    watch: {
-      activeTab: {
-        // once active tab is received, check if any parent
-        // tab is active and if so open according dropdown
-        handler() {
-          if (this.activeParentTab) {
-            this.activeDropdown = this.activeParentTab
-          }
-        },
-        once: true,
-      },
-    },
   }
 </script>

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

@@ -10,11 +10,7 @@
       ref="tableRef"
       :is-position-absolute="doesTableContainDraggables"
     >
-      <TableWrapper
-        class="main-table-wrapper"
-        :full-width="fullWidth"
-        :is-overflow-hidden="isOverflowHidden"
-      >
+      <TableWrapper class="main-table-wrapper" :full-width="fullWidth">
         <SpinnerWrapper v-if="isLoading">
           <Spinner />
         </SpinnerWrapper>
@@ -74,12 +70,12 @@
   `}
   `
 
-  const wrapperAttrs = { fullWidth: Boolean, isOverflowHidden: Boolean }
+  const wrapperAttrs = { fullWidth: Boolean }
   const TableWrapper = styled('div', wrapperAttrs)`
     width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
     max-width: 100%;
-    ${(props) =>
-      props.isOverflowHidden ? 'overflow-x: auto; overflow-y: hidden;' : ''}
+    overflow-x: auto;
+    overflow-y: hidden;
 
     ::-webkit-scrollbar {
       height: 10px; //height of the whole scrollbar area
@@ -413,10 +409,6 @@
         required: false,
         default: false,
       },
-      isOverflowHidden: {
-        required: false,
-        default: true,
-      },
       titleText: {
         required: false,
         default: null,

package/src/components/infoCard/InfoCard.stories.js

@@ -1,170 +0,0 @@
-import defaultInfoCardProps from './defaultProps'
-import InfoCard from './index.vue'
-import theme from '@/assets/theme'
-
-export default {
-  title: 'InfoCard',
-  component: InfoCard,
-  tags: ['autodocs'],
-  argTypes: {
-    type: {
-      description: 'Defines preset styles',
-      control: 'select',
-      options: ['info', 'warning'],
-    },
-    minWidth: {
-      description: '',
-    },
-    color: {
-      description: 'Color of the text (can overwrite preset styles)',
-      control: {
-        type: 'color',
-        presetColors: [
-          theme.colors.grey3,
-          theme.colors.grey4,
-          theme.colors.red,
-        ],
-      },
-    },
-    iconColor: {
-      description: 'Color of the icon (can overwrite preset styles)',
-      control: {
-        type: 'color',
-        presetColors: [
-          theme.colors.grey3,
-          theme.colors.grey4,
-          theme.colors.red,
-        ],
-      },
-    },
-    alignItems: {
-      description: 'Icon and text alignment (can overwrite preset styles)',
-      control: 'select',
-      options: ['flex-start', 'flex-end', 'center'],
-    },
-    padding: {
-      description: 'Info card padding (can overwrite preset styles)',
-    },
-    borderColor: {
-      description: 'Info card border color (can overwrite preset styles)',
-      control: {
-        type: 'color',
-        presetColors: [
-          theme.colors.grey3,
-          theme.colors.grey4,
-          theme.colors.red,
-        ],
-      },
-    },
-    borderStyle: {
-      description: 'Info card border style (can overwrite preset styles)',
-      control: 'select',
-      options: ['dashed', 'dotted', 'inset', 'dashed solid', 'none'],
-    },
-
-    // info card content slot
-    default: {
-      description: 'Info card slot content',
-    },
-  },
-}
-
-// To use:
-// <InfoCard
-//   type="warning"
-//   min-width="auto'
-//   color="red"
-//   align-items="center"
-//   padding="100px"
-//   border-color="red"
-//   border-style="solid"
-// >
-//   Some Text
-// </InfoCard>
-// all props after "min-width" are used to overwrite the preset styles set by "type"
-
-const Template = (args) => {
-  return {
-    components: { InfoCard },
-    setup() {
-      return { args }
-    },
-    template: `
-      <InfoCard v-bind="args">
-        {{ args.default }}
-      </InfoCard>
-    `,
-  }
-}
-
-export const Default = Template.bind({})
-Default.args = {
-  ...defaultInfoCardProps,
-}
-
-export const InfoCardTypeWarning = Template.bind({})
-InfoCardTypeWarning.args = {
-  ...defaultInfoCardProps,
-  type: 'warning',
-}
-
-export const InfoCardTypeErrorMinor = Template.bind({})
-InfoCardTypeErrorMinor.args = {
-  ...defaultInfoCardProps,
-  type: 'error_minor',
-}
-
-export const InfoCardTypeInfoMinWidth = Template.bind({})
-InfoCardTypeInfoMinWidth.args = {
-  ...defaultInfoCardProps,
-
-  minWidth: '250px',
-}
-
-export const InfoCardTypeInfoColorOverwritten = Template.bind({})
-InfoCardTypeInfoColorOverwritten.args = {
-  ...defaultInfoCardProps,
-
-  color: theme.colors.green,
-}
-
-export const InfoCardTypeInfoIconColorOverwritten = Template.bind({})
-InfoCardTypeInfoIconColorOverwritten.args = {
-  ...defaultInfoCardProps,
-
-  iconColor: theme.colors.green,
-}
-
-export const InfoCardTypeWarningAlignItemsOverwritten = Template.bind({})
-InfoCardTypeWarningAlignItemsOverwritten.args = {
-  ...defaultInfoCardProps,
-  type: 'warning',
-  default:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-
-  alignItems: 'center',
-}
-
-export const InfoCardTypeWarningPaddingOverwritten = Template.bind({})
-InfoCardTypeWarningPaddingOverwritten.args = {
-  ...defaultInfoCardProps,
-  type: 'warning',
-
-  padding: '50px',
-}
-
-export const InfoCardTypeErrorMinorBorderColorOverwritten = Template.bind({})
-InfoCardTypeErrorMinorBorderColorOverwritten.args = {
-  ...defaultInfoCardProps,
-  type: 'error_minor',
-
-  borderColor: theme.colors.green,
-}
-
-export const InfoCardTypeErrorMinorBorderStyleOverwritten = Template.bind({})
-InfoCardTypeErrorMinorBorderStyleOverwritten.args = {
-  ...defaultInfoCardProps,
-  type: 'error_minor',
-
-  borderStyle: 'solid none',
-}

package/src/components/infoCard/defaultProps.js

@@ -1,7 +0,0 @@
-const defaultInfoCardProps = {
-  // info card content slot
-  default:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-}
-
-export default defaultInfoCardProps

package/src/components/infoCard/infoCard.spec.js

@@ -1,64 +0,0 @@
-import { mount } from '@vue/test-utils'
-import RCInfoCard from '@/components/infoCard'
-import RCIcon from '@/components/icon'
-import defaultInfoCardProps 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('RCInfoCard.vue', () => {
-  it('info card is rendered with icon and correct text', async () => {
-    const wrapper = mount(RCInfoCard, {
-      props: { ...defaultInfoCardProps },
-      slots: {
-        default: defaultInfoCardProps.default,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const iconComponent = wrapper.findComponent(RCIcon)
-    const infoCardText = wrapper.find(
-      '[data-test-id="info_card_text_container"]'
-    )
-
-    expect(iconComponent.exists()).toBe(true)
-    expect(infoCardText.exists()).toBe(true)
-    expect(infoCardText.text()).toContain(defaultInfoCardProps.default)
-  }),
-    it('info card rendered with type info have correct computed values', async () => {
-      const wrapper = mount(RCInfoCard, {
-        props: { ...defaultInfoCardProps },
-        slots: {
-          default: defaultInfoCardProps.default,
-        },
-        global: {
-          provide: {
-            theme,
-          },
-        },
-      })
-
-      expect(wrapper.vm.isInfo).toBe(true)
-      expect(wrapper.vm.isWarning).toBe(false)
-      expect(wrapper.vm.isErrorMinor).toBe(false)
-
-      await wrapper.setProps({ type: 'warning' })
-
-      expect(wrapper.vm.isInfo).toBe(false)
-      expect(wrapper.vm.isWarning).toBe(true)
-      expect(wrapper.vm.isErrorMinor).toBe(false)
-
-      await wrapper.setProps({ type: 'error_minor' })
-
-      expect(wrapper.vm.isInfo).toBe(false)
-      expect(wrapper.vm.isWarning).toBe(false)
-      expect(wrapper.vm.isErrorMinor).toBe(true)
-    })
-})