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

package/src/components/spinner/index.vue

@@ -1,85 +1,96 @@
-<template>
-  <SpinnerContainer v-if="fullWidth" data-test-id="spinner_full_container">
-    <Container>
-      <SpinnerWrapper data-test-id="spinner_full_wrapper">
-        <SpinnerSvg
-          data-test-id="spinner_full_icon"
-          :style="{ width: size, height: size }"
-        />
-      </SpinnerWrapper>
-    </Container>
-  </SpinnerContainer>
-  <Container
-    v-else
-    data-test-id="spinner_container"
-    :limited-to-modal="limitedToModal"
-  >
-    <SpinnerWrapper data-test-id="spinner_wrapper">
-      <SpinnerSvg
-        data-test-id="spinner_icon"
-        :style="{ width: size, height: size }"
-      />
-    </SpinnerWrapper>
-  </Container>
-</template>
-
-<script>
-  // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
-  // <spinner size="30px" />
-  import styled from 'vue3-styled-components'
-  import SpinnerSvg from '../../assets/icons/black_spinner.svg'
-
-  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: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
-    width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
-  `
-
-  const SpinnerWrapper = styled.div`
-    width: ${(props) => (props.size ? props.size : '60px')};
-    height: auto;
-  `
-
-  export default {
-    name: 'SpinnerComponent',
-    components: {
-      Container,
-      SpinnerWrapper,
-      SpinnerContainer,
-      SpinnerSvg,
-    },
-    props: {
-      fullWidth: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-      limitedToModal: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-      size: {
-        required: false,
-        default: '60px',
-        type: String,
-      },
-    },
-  }
-</script>
+<template>
+  <SpinnerContainer v-if="fullWidth" data-test-id="spinner_full_container">
+    <Container>
+      <SpinnerWrapper data-test-id="spinner_full_wrapper">
+        <SpinnerSvg
+          :class="{ white: isWhite }"
+          data-test-id="spinner_full_icon"
+          :style="{ width: size, height: size }"
+        />
+      </SpinnerWrapper>
+    </Container>
+  </SpinnerContainer>
+  <Container
+    v-else
+    data-test-id="spinner_container"
+    :limited-to-modal="limitedToModal"
+  >
+    <SpinnerWrapper data-test-id="spinner_wrapper">
+      <SpinnerSvg
+        :class="{ white: isWhite }"
+        data-test-id="spinner_icon"
+        :style="{ width: size, height: size }"
+      />
+    </SpinnerWrapper>
+  </Container>
+</template>
+
+<script>
+  // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
+  // <spinner size="30px" />
+  import styled from 'vue3-styled-components'
+  import SpinnerSvg from '../../assets/icons/black_spinner.svg'
+
+  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: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
+    width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
+  `
+
+  const SpinnerWrapper = styled.div`
+    width: ${(props) => (props.size ? props.size : '60px')};
+    height: auto;
+
+    .white {
+      filter: brightness(0) invert(1);
+    }
+  `
+
+  export default {
+    name: 'SpinnerComponent',
+    components: {
+      Container,
+      SpinnerWrapper,
+      SpinnerContainer,
+      SpinnerSvg,
+    },
+    props: {
+      fullWidth: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      limitedToModal: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      size: {
+        required: false,
+        default: '60px',
+        type: String,
+      },
+      isWhite: {
+        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')
+  })
+})