@eturnity/eturnity_reusable_components 7.45.5-EPDM-11692.0 → 7.45.5-EPDM-11313-EPDM-11314.2

package/src/components/infoCard/index.vue

@@ -1,140 +1,140 @@
-<template>
-  <InfoContainer
-    :align-items="alignItems"
-    :border-color="borderColor"
-    :border-style="borderStyle"
-    :color="color"
-    data-test-id="info_card_wrapper"
-    :min-width="minWidth"
-    :padding="padding"
-    :preset-styles="presetStyles"
-  >
-    <RCIcon
-      :color="color ? color : presetStyles.iconColor"
-      data-test-id="info_card_icon"
-      name="info"
-      size="24px"
-    />
-    <TextContainer data-test-id="info_card_text_container">
-      <slot></slot>
-    </TextContainer>
-  </InfoContainer>
-</template>
-
-<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,
-    borderColor: String,
-    borderStyle: String,
-    presetStyles: Object,
-  }
-  const InfoContainer = styled('div', infoContainerAttrs)`
-    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;
-    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};
-  `
-
-  const TextContainer = styled.div`
-    font-size: 13px;
-    width: 100%;
-  `
-
-  export default {
-    name: 'InfoCard',
-    components: {
-      RCIcon,
-      InfoContainer,
-      TextContainer,
-    },
-    props: {
-      type: {
-        required: false,
-        type: String,
-        default: 'info',
-      },
-      minWidth: {
-        required: false,
-        type: String,
-        default: '',
-      },
-      color: {
-        required: false,
-        type: String,
-        default: '',
-      },
-      alignItems: {
-        required: false,
-        type: String,
-        default: '',
-      },
-      padding: {
-        required: false,
-        type: String,
-        default: '',
-      },
-      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'
-      },
-      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 {
-          stylesCollection.borderStyle = 'dashed'
-          stylesCollection.borderColor = theme.colors.grey4
-        }
-
-        return stylesCollection
-      },
-    },
-  }
-</script>
+<template>
+  <InfoContainer
+    :align-items="alignItems"
+    :border-color="borderColor"
+    :border-style="borderStyle"
+    :color="color"
+    data-test-id="info_card_wrapper"
+    :min-width="minWidth"
+    :padding="padding"
+    :preset-styles="presetStyles"
+  >
+    <RCIcon
+      :color="color ? color : presetStyles.iconColor"
+      data-test-id="info_card_icon"
+      name="info"
+      size="24px"
+    />
+    <TextContainer data-test-id="info_card_text_container">
+      <slot></slot>
+    </TextContainer>
+  </InfoContainer>
+</template>
+
+<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,
+    borderColor: String,
+    borderStyle: String,
+    presetStyles: Object,
+  }
+  const InfoContainer = styled('div', infoContainerAttrs)`
+    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;
+    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};
+  `
+
+  const TextContainer = styled.div`
+    font-size: 13px;
+    width: 100%;
+  `
+
+  export default {
+    name: 'InfoCard',
+    components: {
+      RCIcon,
+      InfoContainer,
+      TextContainer,
+    },
+    props: {
+      type: {
+        required: false,
+        type: String,
+        default: 'info',
+      },
+      minWidth: {
+        required: false,
+        type: String,
+        default: '',
+      },
+      color: {
+        required: false,
+        type: String,
+        default: '',
+      },
+      alignItems: {
+        required: false,
+        type: String,
+        default: '',
+      },
+      padding: {
+        required: false,
+        type: String,
+        default: '',
+      },
+      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'
+      },
+      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 {
+          stylesCollection.borderStyle = 'dashed'
+          stylesCollection.borderColor = theme.colors.grey4
+        }
+
+        return stylesCollection
+      },
+    },
+  }
+</script>

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

@@ -1,56 +1,56 @@
-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)
-
-      await wrapper.setProps({ type: 'warning' })
-
-      expect(wrapper.vm.isInfo).toBe(false)
-      expect(wrapper.vm.isWarning).toBe(true)
-    })
-})
+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)
+
+      await wrapper.setProps({ type: 'warning' })
+
+      expect(wrapper.vm.isInfo).toBe(false)
+      expect(wrapper.vm.isWarning).toBe(true)
+    })
+})