@eturnity/eturnity_reusable_components 8.7.4-EPDM-13082.0 → 8.7.4-EPDM-12729.9

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

@@ -1,66 +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
-  })
-})
+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/iconCache.mjs

@@ -1,23 +1,23 @@
-const iconCache = {}
-
-export const fetchIcon = async (fileName) => {
-  if (iconCache[fileName]) {
-    return iconCache[fileName]
-  }
-
-  // We need to use "new URL" to load dynamic assets (https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url)
-  const fetchUrl = new URL(
-    `../../assets/svgIcons/${fileName}.svg`,
-    import.meta.url
-  ).href
-
-  try {
-    const response = await fetch(fetchUrl)
-    const rawFile = await response.text()
-    iconCache[fileName] = rawFile
-
-    return rawFile
-  } catch (error) {
-    console.error(`Failed to load ${fileName}.svg`)
-  }
-}
+const iconCache = {}
+
+export const fetchIcon = async (fileName) => {
+  if (iconCache[fileName]) {
+    return iconCache[fileName]
+  }
+
+  // We need to use "new URL" to load dynamic assets (https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url)
+  const fetchUrl = new URL(
+    `../../assets/svgIcons/${fileName}.svg`,
+    import.meta.url
+  ).href
+
+  try {
+    const response = await fetch(fetchUrl)
+    const rawFile = await response.text()
+    iconCache[fileName] = rawFile
+
+    return rawFile
+  } catch (error) {
+    console.error(`Failed to load ${fileName}.svg`)
+  }
+}

package/src/components/icon/iconCollection.vue

@@ -1,83 +1,83 @@
-<template>
-  <Wrapper>
-    <IconWrapper v-for="iconItem in iconList" :key="iconItem.name">
-      <div>
-        color:{{ color }}
-        <RCIcon
-          :color="color"
-          :hovered-color="hoveredColor"
-          :name="iconItem.name"
-          :size="size"
-        />
-      </div>
-      <h3>{{ iconItem.name }}</h3>
-    </IconWrapper>
-  </Wrapper>
-</template>
-
-<script>
-  import RCIcon from './index.vue'
-  import styled from 'vue3-styled-components'
-
-  const Wrapper = styled.div`
-    display: block;
-    text-align: center;
-    justify-items: center;
-    width: 100%;
-    background-color: #ccc;
-  `
-  const IconWrapper = styled.div`
-    display: inline-flex;
-    flex-direction: column;
-    background-color: white;
-    border-radius: 6px;
-    padding: 10px;
-    width: 220px;
-    text-align: center;
-    margin: 10px;
-  `
-  export default {
-    name: 'CollectionComponent',
-    components: { RCIcon, IconWrapper, Wrapper },
-    props: {
-      size: { required: false, type: String, default: '30px' },
-      color: { required: false, type: String, default: 'white' },
-      hoveredColor: { required: false, type: String, default: 'grey' },
-    },
-    data() {
-      return {
-        iconList: [],
-      }
-    },
-
-    // mounted() {
-    //   this.importAll(require.context('../../assets/svgIcons/', true, /\.svg$/))
-    // },
-    async mounted() {
-      // Use import.meta.glob to import SVGs dynamically
-      const icons = import.meta.glob('../../assets/svgIcons/*.svg')
-
-      for (const path in icons) {
-        const module = await icons[path]()
-
-        this.iconList.push({
-          pathLong: module.default,
-          pathShort: path,
-          name: path.replace('.svg', '').replace('../../assets/svgIcons/', ''),
-        })
-      }
-    },
-
-    methods: {
-      importAll(r) {
-        r.keys().forEach((key) =>
-          this.iconList.push({
-            pathLong: r(key),
-            pathShort: key,
-            name: key.replace('.svg', '').replace('./', ''),
-          })
-        )
-      },
-    },
-  }
-</script>
+<template>
+  <Wrapper>
+    <IconWrapper v-for="iconItem in iconList" :key="iconItem.name">
+      <div>
+        color:{{ color }}
+        <RCIcon
+          :color="color"
+          :hovered-color="hoveredColor"
+          :name="iconItem.name"
+          :size="size"
+        />
+      </div>
+      <h3>{{ iconItem.name }}</h3>
+    </IconWrapper>
+  </Wrapper>
+</template>
+
+<script>
+  import RCIcon from './index.vue'
+  import styled from 'vue3-styled-components'
+
+  const Wrapper = styled.div`
+    display: block;
+    text-align: center;
+    justify-items: center;
+    width: 100%;
+    background-color: #ccc;
+  `
+  const IconWrapper = styled.div`
+    display: inline-flex;
+    flex-direction: column;
+    background-color: white;
+    border-radius: 6px;
+    padding: 10px;
+    width: 220px;
+    text-align: center;
+    margin: 10px;
+  `
+  export default {
+    name: 'CollectionComponent',
+    components: { RCIcon, IconWrapper, Wrapper },
+    props: {
+      size: { required: false, type: String, default: '30px' },
+      color: { required: false, type: String, default: 'white' },
+      hoveredColor: { required: false, type: String, default: 'grey' },
+    },
+    data() {
+      return {
+        iconList: [],
+      }
+    },
+
+    // mounted() {
+    //   this.importAll(require.context('../../assets/svgIcons/', true, /\.svg$/))
+    // },
+    async mounted() {
+      // Use import.meta.glob to import SVGs dynamically
+      const icons = import.meta.glob('../../assets/svgIcons/*.svg')
+
+      for (const path in icons) {
+        const module = await icons[path]()
+
+        this.iconList.push({
+          pathLong: module.default,
+          pathShort: path,
+          name: path.replace('.svg', '').replace('../../assets/svgIcons/', ''),
+        })
+      }
+    },
+
+    methods: {
+      importAll(r) {
+        r.keys().forEach((key) =>
+          this.iconList.push({
+            pathLong: r(key),
+            pathShort: key,
+            name: key.replace('.svg', '').replace('./', ''),
+          })
+        )
+      },
+    },
+  }
+</script>