@eturnity/eturnity_reusable_components 8.19.8-EPDM-12618.6 → 8.19.8-EPDM-13618.0

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

@@ -1,220 +1,220 @@
-import Icon from './index.vue'
-import theme from '@/assets/theme'
-
-export default {
-  title: 'Icon',
-  component: Icon,
-  tags: ['autodocs'],
-  argTypes: {
-    name: {
-      control: 'select',
-      options: [
-        'settings',
-        'warning',
-        'checkmark',
-        'close',
-        'arrow_up',
-        'arrow_down',
-      ],
-      description: 'Name of the SVG icon file (without .svg extension)',
-    },
-    color: {
-      control: 'color',
-      description: 'Color of the icon',
-    },
-    hoveredColor: {
-      control: 'color',
-      description: 'Color of the icon when hovered',
-    },
-    size: {
-      control: 'text',
-      description: 'Size of the icon (e.g., "30px")',
-    },
-    cursor: {
-      control: 'select',
-      options: ['default', 'pointer', 'not-allowed'],
-      description: 'Cursor style when hovering over the icon',
-    },
-    isStriked: {
-      control: 'boolean',
-      description: 'Whether to show a strikethrough line',
-    },
-    backgroundColor: {
-      control: 'color',
-      description: 'Background color of the icon container',
-    },
-    count: {
-      control: 'number',
-      description: 'Number to display in the count badge',
-    },
-    animation: {
-      control: 'select',
-      options: ['none', 'fade'],
-      description: 'Animation type for the icon',
-    },
-    fillType: {
-      control: 'select',
-      options: ['fill', 'stroke'],
-      description: 'How to apply the color to the icon',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the icon is disabled',
-    },
-  },
-}
-
-const Template = (args) => ({
-  components: { Icon },
-  setup() {
-    return { args }
-  },
-  template: '<Icon v-bind="args" />',
-  provide: {
-    theme,
-  },
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  name: 'settings',
-  color: 'blue',
-  size: '30px',
-  cursor: 'default',
-  isStriked: false,
-  count: 0,
-  animation: 'none',
-  fillType: 'fill',
-  disabled: false,
-}
-
-export const Large = Template.bind({})
-Large.args = {
-  name: 'settings',
-  color: 'blue',
-  size: '60px',
-  cursor: 'default',
-  isStriked: false,
-  count: 0,
-  animation: 'none',
-  fillType: 'fill',
-  disabled: false,
-}
-
-export const WithHover = Template.bind({})
-WithHover.args = {
-  name: 'warning',
-  color: 'blue',
-  hoveredColor: 'red',
-  size: '30px',
-  cursor: 'pointer',
-  isStriked: false,
-  count: 0,
-  animation: 'none',
-  fillType: 'fill',
-  disabled: false,
-}
-
-export const WithBackground = Template.bind({})
-WithBackground.args = {
-  name: 'checkmark',
-  color: 'white',
-  size: '30px',
-  cursor: 'default',
-  isStriked: false,
-  count: 0,
-  animation: 'none',
-  fillType: 'fill',
-  backgroundColor: 'blue',
-  disabled: false,
-}
-
-export const WithCount = Template.bind({})
-WithCount.args = {
-  name: 'close',
-  color: 'blue',
-  size: '30px',
-  cursor: 'default',
-  isStriked: false,
-  count: 5,
-  animation: 'none',
-  fillType: 'fill',
-  disabled: false,
-}
-
-export const Striked = Template.bind({})
-Striked.args = {
-  name: 'arrow_up',
-  color: 'blue',
-  size: '30px',
-  cursor: 'default',
-  isStriked: true,
-  count: 0,
-  animation: 'none',
-  fillType: 'fill',
-  disabled: false,
-}
-
-export const Animated = Template.bind({})
-Animated.args = {
-  name: 'arrow_down',
-  color: 'blue',
-  size: '30px',
-  cursor: 'default',
-  isStriked: false,
-  count: 0,
-  animation: 'fade',
-  fillType: 'fill',
-  disabled: false,
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  name: 'settings',
-  color: 'blue',
-  size: '30px',
-  cursor: 'default',
-  isStriked: false,
-  count: 0,
-  animation: 'none',
-  fillType: 'fill',
-  disabled: true,
-}
-
-const IconLibraryTemplate = (args) => ({
-  components: { Icon },
-  setup() {
-    const icons = import.meta.glob('@/assets/svgIcons/*.svg', { eager: true })
-    const iconNames = Object.keys(icons)
-      .map((path) => {
-        const fileName = path.split('/').pop()
-        return fileName.replace('.svg', '')
-      })
-      .sort()
-
-    return { args, iconNames }
-  },
-  template: `
-    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 20px; padding: 20px;">
-      <div v-for="iconName in iconNames" :key="iconName" style="text-align: center;">
-        <Icon v-bind="args" :name="iconName" />
-        <div style="font-size: 12px; margin-top: 8px; word-break: break-word;">{{ iconName }}</div>
-      </div>
-    </div>
-  `,
-  provide: {
-    theme,
-  },
-})
-
-export const IconLibrary = IconLibraryTemplate.bind({})
-IconLibrary.args = {
-  color: 'blue',
-  size: '30px',
-  cursor: 'default',
-  isStriked: false,
-  count: 0,
-  animation: 'none',
-  fillType: 'fill',
-  disabled: false,
-}
+import Icon from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Icon',
+  component: Icon,
+  tags: ['autodocs'],
+  argTypes: {
+    name: {
+      control: 'select',
+      options: [
+        'settings',
+        'warning',
+        'checkmark',
+        'close',
+        'arrow_up',
+        'arrow_down',
+      ],
+      description: 'Name of the SVG icon file (without .svg extension)',
+    },
+    color: {
+      control: 'color',
+      description: 'Color of the icon',
+    },
+    hoveredColor: {
+      control: 'color',
+      description: 'Color of the icon when hovered',
+    },
+    size: {
+      control: 'text',
+      description: 'Size of the icon (e.g., "30px")',
+    },
+    cursor: {
+      control: 'select',
+      options: ['default', 'pointer', 'not-allowed'],
+      description: 'Cursor style when hovering over the icon',
+    },
+    isStriked: {
+      control: 'boolean',
+      description: 'Whether to show a strikethrough line',
+    },
+    backgroundColor: {
+      control: 'color',
+      description: 'Background color of the icon container',
+    },
+    count: {
+      control: 'number',
+      description: 'Number to display in the count badge',
+    },
+    animation: {
+      control: 'select',
+      options: ['none', 'fade'],
+      description: 'Animation type for the icon',
+    },
+    fillType: {
+      control: 'select',
+      options: ['fill', 'stroke'],
+      description: 'How to apply the color to the icon',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the icon is disabled',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { Icon },
+  setup() {
+    return { args }
+  },
+  template: '<Icon v-bind="args" />',
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  name: 'settings',
+  color: 'blue',
+  size: '30px',
+  cursor: 'default',
+  isStriked: false,
+  count: 0,
+  animation: 'none',
+  fillType: 'fill',
+  disabled: false,
+}
+
+export const Large = Template.bind({})
+Large.args = {
+  name: 'settings',
+  color: 'blue',
+  size: '60px',
+  cursor: 'default',
+  isStriked: false,
+  count: 0,
+  animation: 'none',
+  fillType: 'fill',
+  disabled: false,
+}
+
+export const WithHover = Template.bind({})
+WithHover.args = {
+  name: 'warning',
+  color: 'blue',
+  hoveredColor: 'red',
+  size: '30px',
+  cursor: 'pointer',
+  isStriked: false,
+  count: 0,
+  animation: 'none',
+  fillType: 'fill',
+  disabled: false,
+}
+
+export const WithBackground = Template.bind({})
+WithBackground.args = {
+  name: 'checkmark',
+  color: 'white',
+  size: '30px',
+  cursor: 'default',
+  isStriked: false,
+  count: 0,
+  animation: 'none',
+  fillType: 'fill',
+  backgroundColor: 'blue',
+  disabled: false,
+}
+
+export const WithCount = Template.bind({})
+WithCount.args = {
+  name: 'close',
+  color: 'blue',
+  size: '30px',
+  cursor: 'default',
+  isStriked: false,
+  count: 5,
+  animation: 'none',
+  fillType: 'fill',
+  disabled: false,
+}
+
+export const Striked = Template.bind({})
+Striked.args = {
+  name: 'arrow_up',
+  color: 'blue',
+  size: '30px',
+  cursor: 'default',
+  isStriked: true,
+  count: 0,
+  animation: 'none',
+  fillType: 'fill',
+  disabled: false,
+}
+
+export const Animated = Template.bind({})
+Animated.args = {
+  name: 'arrow_down',
+  color: 'blue',
+  size: '30px',
+  cursor: 'default',
+  isStriked: false,
+  count: 0,
+  animation: 'fade',
+  fillType: 'fill',
+  disabled: false,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  name: 'settings',
+  color: 'blue',
+  size: '30px',
+  cursor: 'default',
+  isStriked: false,
+  count: 0,
+  animation: 'none',
+  fillType: 'fill',
+  disabled: true,
+}
+
+const IconLibraryTemplate = (args) => ({
+  components: { Icon },
+  setup() {
+    const icons = import.meta.glob('@/assets/svgIcons/*.svg', { eager: true })
+    const iconNames = Object.keys(icons)
+      .map((path) => {
+        const fileName = path.split('/').pop()
+        return fileName.replace('.svg', '')
+      })
+      .sort()
+
+    return { args, iconNames }
+  },
+  template: `
+    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 20px; padding: 20px;">
+      <div v-for="iconName in iconNames" :key="iconName" style="text-align: center;">
+        <Icon v-bind="args" :name="iconName" />
+        <div style="font-size: 12px; margin-top: 8px; word-break: break-word;">{{ iconName }}</div>
+      </div>
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const IconLibrary = IconLibraryTemplate.bind({})
+IconLibrary.args = {
+  color: 'blue',
+  size: '30px',
+  cursor: 'default',
+  isStriked: false,
+  count: 0,
+  animation: 'none',
+  fillType: 'fill',
+  disabled: false,
+}

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`)
+  }
+}