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

package/src/components/spinner/Spinner.stories.js

@@ -1,86 +1,86 @@
-import Spinner from './index.vue'
-import theme from '@/assets/theme'
-
-export default {
-  title: 'Spinner',
-  component: Spinner,
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['small', 'medium', 'large'],
-      description: 'Size of the spinner',
-    },
-    isWhite: {
-      control: 'boolean',
-      description: 'Whether to use white color for the spinner',
-    },
-    limitedToModal: {
-      control: 'boolean',
-      description: 'Whether the spinner is limited to a modal context',
-    },
-    fullWidth: {
-      control: 'boolean',
-      description: 'Whether to show the spinner with a full-width overlay',
-    },
-  },
-}
-
-const Template = (args) => ({
-  components: { Spinner },
-  setup() {
-    return { args }
-  },
-  template: '<Spinner v-bind="args" />',
-  provide: {
-    theme,
-  },
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  size: 'medium',
-  isWhite: false,
-  limitedToModal: false,
-  fullWidth: false,
-}
-
-export const Small = Template.bind({})
-Small.args = {
-  size: 'small',
-  isWhite: false,
-  limitedToModal: false,
-  fullWidth: false,
-}
-
-export const Large = Template.bind({})
-Large.args = {
-  size: 'large',
-  isWhite: false,
-  limitedToModal: false,
-  fullWidth: false,
-}
-
-export const White = Template.bind({})
-White.args = {
-  size: 'medium',
-  isWhite: true,
-  limitedToModal: false,
-  fullWidth: false,
-}
-
-export const InModal = Template.bind({})
-InModal.args = {
-  size: 'medium',
-  isWhite: false,
-  limitedToModal: true,
-  fullWidth: false,
-}
-
-export const FullWidth = Template.bind({})
-FullWidth.args = {
-  size: 'medium',
-  isWhite: false,
-  limitedToModal: false,
-  fullWidth: true,
-}
+import Spinner from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Spinner',
+  component: Spinner,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Size of the spinner',
+    },
+    isWhite: {
+      control: 'boolean',
+      description: 'Whether to use white color for the spinner',
+    },
+    limitedToModal: {
+      control: 'boolean',
+      description: 'Whether the spinner is limited to a modal context',
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Whether to show the spinner with a full-width overlay',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { Spinner },
+  setup() {
+    return { args }
+  },
+  template: '<Spinner v-bind="args" />',
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  size: 'medium',
+  isWhite: false,
+  limitedToModal: false,
+  fullWidth: false,
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  size: 'small',
+  isWhite: false,
+  limitedToModal: false,
+  fullWidth: false,
+}
+
+export const Large = Template.bind({})
+Large.args = {
+  size: 'large',
+  isWhite: false,
+  limitedToModal: false,
+  fullWidth: false,
+}
+
+export const White = Template.bind({})
+White.args = {
+  size: 'medium',
+  isWhite: true,
+  limitedToModal: false,
+  fullWidth: false,
+}
+
+export const InModal = Template.bind({})
+InModal.args = {
+  size: 'medium',
+  isWhite: false,
+  limitedToModal: true,
+  fullWidth: false,
+}
+
+export const FullWidth = Template.bind({})
+FullWidth.args = {
+  size: 'medium',
+  isWhite: false,
+  limitedToModal: false,
+  fullWidth: true,
+}

package/src/components/spinner/index.vue

@@ -1,129 +1,129 @@
-<template>
-  <SpinnerContainer
-    v-if="fullWidth"
-    data-test-id="spinner_full_container"
-    :size="size"
-  >
-    <Container>
-      <SpinnerWrapper data-test-id="spinner_full_wrapper" :size="size">
-        <SpinnerCircle :is-white="isWhite" :size="size" />
-      </SpinnerWrapper>
-    </Container>
-  </SpinnerContainer>
-  <Container
-    v-else
-    data-test-id="spinner_container"
-    :limited-to-modal="limitedToModal"
-  >
-    <SpinnerWrapper data-test-id="spinner_wrapper" :size="size">
-      <SpinnerCircle :is-white="isWhite" :size="size" />
-    </SpinnerWrapper>
-  </Container>
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-
-  const SpinnerContainer = styled.div`
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.8);
-    display: grid;
-    align-items: center;
-    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: 100%;
-    width: 100%;
-  `
-
-  const wrapperAttrs = { size: String }
-  const SpinnerWrapper = styled('div', wrapperAttrs)`
-    width: ${(props) => getSpinnerSize(props.size)};
-    height: ${(props) => getSpinnerSize(props.size)};
-  `
-
-  const getSpinnerSize = (size) => {
-    switch (size) {
-      case 'small':
-        return '24px'
-      case 'large':
-        return '56px'
-      case 'medium':
-      default:
-        return '40px'
-    }
-  }
-
-  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.semanticColors.purple[500]};
-    border-right-color: ${(props) =>
-      props.isWhite
-        ? props.theme.colors.white
-        : props.theme.semanticColors.purple[500]};
-    border-bottom-color: ${(props) =>
-      props.isWhite
-        ? props.theme.colors.white
-        : props.theme.semanticColors.purple[500]};
-    animation: spin 1s linear infinite;
-    transform: rotate(90deg);
-
-    @keyframes spin {
-      to {
-        transform: rotate(450deg);
-      }
-    }
-  `
-
-  export default {
-    name: 'NewSpinner',
-    components: {
-      SpinnerContainer,
-      SpinnerCircle,
-      Container,
-      SpinnerWrapper,
-    },
-    props: {
-      size: {
-        type: String,
-        default: 'medium',
-        validator: (value) => ['small', 'medium', 'large'].includes(value),
-      },
-      isWhite: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-      limitedToModal: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-      fullWidth: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-    },
-  }
-</script>
+<template>
+  <SpinnerContainer
+    v-if="fullWidth"
+    data-test-id="spinner_full_container"
+    :size="size"
+  >
+    <Container>
+      <SpinnerWrapper data-test-id="spinner_full_wrapper" :size="size">
+        <SpinnerCircle :is-white="isWhite" :size="size" />
+      </SpinnerWrapper>
+    </Container>
+  </SpinnerContainer>
+  <Container
+    v-else
+    data-test-id="spinner_container"
+    :limited-to-modal="limitedToModal"
+  >
+    <SpinnerWrapper data-test-id="spinner_wrapper" :size="size">
+      <SpinnerCircle :is-white="isWhite" :size="size" />
+    </SpinnerWrapper>
+  </Container>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+
+  const SpinnerContainer = styled.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.8);
+    display: grid;
+    align-items: center;
+    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: 100%;
+    width: 100%;
+  `
+
+  const wrapperAttrs = { size: String }
+  const SpinnerWrapper = styled('div', wrapperAttrs)`
+    width: ${(props) => getSpinnerSize(props.size)};
+    height: ${(props) => getSpinnerSize(props.size)};
+  `
+
+  const getSpinnerSize = (size) => {
+    switch (size) {
+      case 'small':
+        return '24px'
+      case 'large':
+        return '56px'
+      case 'medium':
+      default:
+        return '40px'
+    }
+  }
+
+  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.semanticColors.purple[500]};
+    border-right-color: ${(props) =>
+      props.isWhite
+        ? props.theme.colors.white
+        : props.theme.semanticColors.purple[500]};
+    border-bottom-color: ${(props) =>
+      props.isWhite
+        ? props.theme.colors.white
+        : props.theme.semanticColors.purple[500]};
+    animation: spin 1s linear infinite;
+    transform: rotate(90deg);
+
+    @keyframes spin {
+      to {
+        transform: rotate(450deg);
+      }
+    }
+  `
+
+  export default {
+    name: 'NewSpinner',
+    components: {
+      SpinnerContainer,
+      SpinnerCircle,
+      Container,
+      SpinnerWrapper,
+    },
+    props: {
+      size: {
+        type: String,
+        default: 'medium',
+        validator: (value) => ['small', 'medium', 'large'].includes(value),
+      },
+      isWhite: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      limitedToModal: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      fullWidth: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+    },
+  }
+</script>

package/src/components/spinner/spinner.spec.js

@@ -1,69 +1,69 @@
-/* eslint-disable */
-import { mount } from '@vue/test-utils'
-import Spinner from '@/components/spinner'
-import theme from '@/assets/theme'
-
-describe('Spinner.vue', () => {
-  let wrapper
-  beforeEach(() => {
-    wrapper = mount(Spinner, {
-      props: {
-        size: '30px',
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-  })
-  it('it is rendered with initial props', async () => {
-    await wrapper.vm.$nextTick()
-    const componentWrapper = wrapper.find('[data-test-id="spinner_container"]')
-    const componentSvg = wrapper.find('[data-test-id="spinner_icon"]')
-    // check that the element exists
-    expect(componentWrapper.exists()).toBe(true)
-    expect(componentSvg.exists()).toBe(true)
-    expect(wrapper.vm.size).toBe('30px')
-    expect(wrapper.vm.limitedToModal).toBe(false)
-    expect(wrapper.vm.fullWidth).toBe(false)
-  })
-  it('full width spinner is shown', async () => {
-    await wrapper.setProps({ fullWidth: true })
-    await wrapper.vm.$nextTick()
-    const componentWrapper = wrapper.find('[data-test-id="spinner_container"]')
-    const componentFullWrapper = wrapper.find(
-      '[data-test-id="spinner_full_container"]'
-    )
-    const componentSvg = wrapper.find('[data-test-id="spinner_full_icon"]')
-    // check that the element exists
-    expect(componentWrapper.exists()).toBe(false)
-    expect(componentFullWrapper.exists()).toBe(true)
-    expect(componentSvg.exists()).toBe(true)
-    expect(wrapper.vm.size).toBe('30px')
-    expect(wrapper.vm.limitedToModal).toBe(false)
-    expect(wrapper.vm.fullWidth).toBe(true)
-  })
-  it('limited to modal is shown', async () => {
-    await wrapper.setProps({ limitedToModal: true, fullWidth: false })
-    await wrapper.vm.$nextTick()
-    const componentFullWrapper = wrapper.find(
-      '[data-test-id="spinner_full_container"]'
-    )
-    const componentWrapper = wrapper.find('[data-test-id="spinner_wrapper"]')
-    const componentSvg = wrapper.find('[data-test-id="spinner_icon"]')
-    // check that the element exists
-    expect(componentWrapper.exists()).toBe(true)
-    expect(componentFullWrapper.exists()).toBe(false)
-    expect(componentSvg.exists()).toBe(true)
-    expect(wrapper.vm.size).toBe('30px')
-    expect(wrapper.vm.limitedToModal).toBe(true)
-    expect(wrapper.vm.fullWidth).toBe(false)
-  })
-  it('size of spinner is correct', async () => {
-    await wrapper.setProps({ size: '90px' })
-    await wrapper.vm.$nextTick()
-    // check that the element exists
-    expect(wrapper.vm.size).toBe('90px')
-  })
-})
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import Spinner from '@/components/spinner'
+import theme from '@/assets/theme'
+
+describe('Spinner.vue', () => {
+  let wrapper
+  beforeEach(() => {
+    wrapper = mount(Spinner, {
+      props: {
+        size: '30px',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+  })
+  it('it is rendered with initial props', async () => {
+    await wrapper.vm.$nextTick()
+    const componentWrapper = wrapper.find('[data-test-id="spinner_container"]')
+    const componentSvg = wrapper.find('[data-test-id="spinner_icon"]')
+    // check that the element exists
+    expect(componentWrapper.exists()).toBe(true)
+    expect(componentSvg.exists()).toBe(true)
+    expect(wrapper.vm.size).toBe('30px')
+    expect(wrapper.vm.limitedToModal).toBe(false)
+    expect(wrapper.vm.fullWidth).toBe(false)
+  })
+  it('full width spinner is shown', async () => {
+    await wrapper.setProps({ fullWidth: true })
+    await wrapper.vm.$nextTick()
+    const componentWrapper = wrapper.find('[data-test-id="spinner_container"]')
+    const componentFullWrapper = wrapper.find(
+      '[data-test-id="spinner_full_container"]'
+    )
+    const componentSvg = wrapper.find('[data-test-id="spinner_full_icon"]')
+    // check that the element exists
+    expect(componentWrapper.exists()).toBe(false)
+    expect(componentFullWrapper.exists()).toBe(true)
+    expect(componentSvg.exists()).toBe(true)
+    expect(wrapper.vm.size).toBe('30px')
+    expect(wrapper.vm.limitedToModal).toBe(false)
+    expect(wrapper.vm.fullWidth).toBe(true)
+  })
+  it('limited to modal is shown', async () => {
+    await wrapper.setProps({ limitedToModal: true, fullWidth: false })
+    await wrapper.vm.$nextTick()
+    const componentFullWrapper = wrapper.find(
+      '[data-test-id="spinner_full_container"]'
+    )
+    const componentWrapper = wrapper.find('[data-test-id="spinner_wrapper"]')
+    const componentSvg = wrapper.find('[data-test-id="spinner_icon"]')
+    // check that the element exists
+    expect(componentWrapper.exists()).toBe(true)
+    expect(componentFullWrapper.exists()).toBe(false)
+    expect(componentSvg.exists()).toBe(true)
+    expect(wrapper.vm.size).toBe('30px')
+    expect(wrapper.vm.limitedToModal).toBe(true)
+    expect(wrapper.vm.fullWidth).toBe(false)
+  })
+  it('size of spinner is correct', async () => {
+    await wrapper.setProps({ size: '90px' })
+    await wrapper.vm.$nextTick()
+    // check that the element exists
+    expect(wrapper.vm.size).toBe('90px')
+  })
+})