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

package/src/components/card/card.spec.js

@@ -1,135 +1,135 @@
-/* eslint-disable */
-import { mount, config } from '@vue/test-utils'
-import Card from '@/components/card'
-import theme from '@/assets/theme'
-
-config.global.components = {
-  EtPopover: {
-    template: '<div>{{ text }}</div>',
-    props: ['text'],
-  },
-}
-
-config.global.mocks = {
-  $gettext: (msg) => msg,
-}
-
-describe('Card Component', () => {
-  it('card title is shown when a title props is passed', () => {
-    const title = 'Test Card Title'
-    const wrapper = mount(Card, {
-      props: {
-        title,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    expect(wrapper.text()).toContain(title)
-  })
-
-  it('card spinner is shown when user set isLoading props to true', async () => {
-    // Start with isLoading is false
-    const wrapper = mount(Card, {
-      props: {
-        title: 'Test Card Title',
-        isLoading: false,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    let cardSpinner = wrapper.find('[data-test-id="card_spinner"]')
-    expect(cardSpinner.exists()).toBe(false)
-    await wrapper.setProps({ isLoading: true })
-    await wrapper.vm.$nextTick()
-    cardSpinner = wrapper.find('[data-test-id="card_spinner"]')
-    expect(cardSpinner.exists()).toBe(true)
-  })
-
-  it('card wrapper has custom class when viewCardClass props is passed', async () => {
-    const viewCardClass = 'sampleClass'
-    const wrapper = mount(Card, {
-      props: {
-        title: 'Test Card Title',
-        viewCardClass,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const cardMainWrapper = wrapper.find('[data-test-id="card_main_wrapper"]')
-    expect(cardMainWrapper.classes()).toContain(viewCardClass)
-  })
-
-  it('card title has custom class when titleClass props is passed', async () => {
-    const titleClass = 'sampleClass'
-    const wrapper = mount(Card, {
-      props: {
-        title: 'Test Card Title',
-        titleClass,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const cardTitle = wrapper.find('[data-test-id="card_title"]')
-    expect(cardTitle.classes()).toContain(titleClass)
-  })
-
-  it('card popover is shown when user set showPopover props to true', async () => {
-    // Start with showPopover is false
-    const wrapper = mount(Card, {
-      props: {
-        title: 'Test Card Title',
-        showPopover: false,
-        popoverText: 'Sample popover text',
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    let cardPopover = wrapper.find('[data-test-id="card_popover"]')
-    expect(cardPopover.exists()).toBe(false)
-    await wrapper.setProps({ showPopover: true })
-    await wrapper.vm.$nextTick()
-    cardPopover = wrapper.find('[data-test-id="card_popover"]')
-    expect(cardPopover.exists()).toBe(true)
-    expect(cardPopover.text()).toContain('Sample popover text')
-  })
-
-  it('card popover text is set when user passed a popoverText props value', async () => {
-    const popoverText = 'Sample popover text'
-    const wrapper = mount(Card, {
-      props: {
-        title: 'Test Card Title',
-        showPopover: true,
-        popoverText,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    let cardPopover = wrapper.find('[data-test-id="card_popover"]')
-    expect(cardPopover.exists()).toBe(true)
-    expect(cardPopover.text()).toContain('Sample popover text')
-  })
-})
+/* eslint-disable */
+import { mount, config } from '@vue/test-utils'
+import Card from '@/components/card'
+import theme from '@/assets/theme'
+
+config.global.components = {
+  EtPopover: {
+    template: '<div>{{ text }}</div>',
+    props: ['text'],
+  },
+}
+
+config.global.mocks = {
+  $gettext: (msg) => msg,
+}
+
+describe('Card Component', () => {
+  it('card title is shown when a title props is passed', () => {
+    const title = 'Test Card Title'
+    const wrapper = mount(Card, {
+      props: {
+        title,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    expect(wrapper.text()).toContain(title)
+  })
+
+  it('card spinner is shown when user set isLoading props to true', async () => {
+    // Start with isLoading is false
+    const wrapper = mount(Card, {
+      props: {
+        title: 'Test Card Title',
+        isLoading: false,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    let cardSpinner = wrapper.find('[data-test-id="card_spinner"]')
+    expect(cardSpinner.exists()).toBe(false)
+    await wrapper.setProps({ isLoading: true })
+    await wrapper.vm.$nextTick()
+    cardSpinner = wrapper.find('[data-test-id="card_spinner"]')
+    expect(cardSpinner.exists()).toBe(true)
+  })
+
+  it('card wrapper has custom class when viewCardClass props is passed', async () => {
+    const viewCardClass = 'sampleClass'
+    const wrapper = mount(Card, {
+      props: {
+        title: 'Test Card Title',
+        viewCardClass,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const cardMainWrapper = wrapper.find('[data-test-id="card_main_wrapper"]')
+    expect(cardMainWrapper.classes()).toContain(viewCardClass)
+  })
+
+  it('card title has custom class when titleClass props is passed', async () => {
+    const titleClass = 'sampleClass'
+    const wrapper = mount(Card, {
+      props: {
+        title: 'Test Card Title',
+        titleClass,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const cardTitle = wrapper.find('[data-test-id="card_title"]')
+    expect(cardTitle.classes()).toContain(titleClass)
+  })
+
+  it('card popover is shown when user set showPopover props to true', async () => {
+    // Start with showPopover is false
+    const wrapper = mount(Card, {
+      props: {
+        title: 'Test Card Title',
+        showPopover: false,
+        popoverText: 'Sample popover text',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    let cardPopover = wrapper.find('[data-test-id="card_popover"]')
+    expect(cardPopover.exists()).toBe(false)
+    await wrapper.setProps({ showPopover: true })
+    await wrapper.vm.$nextTick()
+    cardPopover = wrapper.find('[data-test-id="card_popover"]')
+    expect(cardPopover.exists()).toBe(true)
+    expect(cardPopover.text()).toContain('Sample popover text')
+  })
+
+  it('card popover text is set when user passed a popoverText props value', async () => {
+    const popoverText = 'Sample popover text'
+    const wrapper = mount(Card, {
+      props: {
+        title: 'Test Card Title',
+        showPopover: true,
+        popoverText,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    let cardPopover = wrapper.find('[data-test-id="card_popover"]')
+    expect(cardPopover.exists()).toBe(true)
+    expect(cardPopover.text()).toContain('Sample popover text')
+  })
+})

package/src/components/card/index.vue

@@ -1,116 +1,116 @@
-<template>
-  <Wrapper
-    v-show="!isLoading"
-    :class="viewCardClass"
-    data-test-id="card_main_wrapper"
-    :min-width="minWidth"
-    :width="width"
-  >
-    <Spinner
-      v-if="isLoading"
-      data-test-id="card_spinner"
-      :limited-to-modal="true"
-      size="50px"
-    />
-    <CardWrapper v-else>
-      <CardTitle :class="titleClass" data-test-id="card_title">
-        {{ $gettext(title) }}
-        <EtPopover
-          v-if="showPopover && popoverText !== ''"
-          data-test-id="card_popover"
-          :text="popoverText"
-        />
-      </CardTitle>
-      <slot></slot>
-    </CardWrapper>
-  </Wrapper>
-</template>
-
-<script>
-  // To use:
-  // import RCCard from "@eturnity/eturnity_reusable_components/src/components/card"
-  // <RCCard
-  //   :isLoading="true"
-  //   minWidth="150px"
-  //   popoverText="Sample popover text"
-  //   :showPopover="true"
-  //   title="Sample title"
-  //   titleClass="sampleTitleClass"
-  //   viewCardClass="sampleViewCardClass"
-  //   width="200px"
-  // />
-
-  import styled from 'vue3-styled-components'
-  import Spinner from '../spinner'
-
-  const WrapperProps = { width: [Number, String], minWidth: [Number, String] }
-  const Wrapper = styled('div', WrapperProps)`
-    max-width: ${(props) => props.width};
-    min-width: ${(props) => props.minWidth};
-    padding: 20px;
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-      0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-    border-radius: 4px;
-    background-color: ${(props) => props.theme.colors.white};
-    height: 100%;
-  `
-
-  const CardWrapper = styled('div')`
-    height: 100%;
-    width: auto;
-  `
-
-  const CardTitle = styled('p')`
-    font-size: 14px;
-    line-height: 1;
-    color: ${(props) => props.theme.colors.black};
-    font-weight: 700;
-    margin-bottom: 10px;
-  `
-
-  export default {
-    name: 'Card',
-    components: {
-      Spinner,
-      Wrapper,
-      CardTitle,
-      CardWrapper,
-    },
-    props: {
-      title: {
-        type: String,
-        default: '',
-      },
-      width: {
-        type: [Number, String],
-        required: false,
-        default: '400px',
-      },
-      minWidth: {
-        type: [Number, String],
-        required: false,
-        default: null,
-      },
-      titleClass: {
-        type: String,
-        default: '',
-      },
-      showPopover: {
-        type: Boolean,
-        default: false,
-      },
-      viewCardClass: {
-        type: String,
-        default: '',
-      },
-      popoverText: {
-        type: String,
-        default: '',
-      },
-      isLoading: {
-        type: Boolean,
-        default: false,
-      },
-    },
-  }
-</script>
+<template>
+  <Wrapper
+    v-show="!isLoading"
+    :class="viewCardClass"
+    data-test-id="card_main_wrapper"
+    :min-width="minWidth"
+    :width="width"
+  >
+    <Spinner
+      v-if="isLoading"
+      data-test-id="card_spinner"
+      :limited-to-modal="true"
+      size="50px"
+    />
+    <CardWrapper v-else>
+      <CardTitle :class="titleClass" data-test-id="card_title">
+        {{ $gettext(title) }}
+        <EtPopover
+          v-if="showPopover && popoverText !== ''"
+          data-test-id="card_popover"
+          :text="popoverText"
+        />
+      </CardTitle>
+      <slot></slot>
+    </CardWrapper>
+  </Wrapper>
+</template>
+
+<script>
+  // To use:
+  // import RCCard from "@eturnity/eturnity_reusable_components/src/components/card"
+  // <RCCard
+  //   :isLoading="true"
+  //   minWidth="150px"
+  //   popoverText="Sample popover text"
+  //   :showPopover="true"
+  //   title="Sample title"
+  //   titleClass="sampleTitleClass"
+  //   viewCardClass="sampleViewCardClass"
+  //   width="200px"
+  // />
+
+  import styled from 'vue3-styled-components'
+  import Spinner from '../spinner'
+
+  const WrapperProps = { width: [Number, String], minWidth: [Number, String] }
+  const Wrapper = styled('div', WrapperProps)`
+    max-width: ${(props) => props.width};
+    min-width: ${(props) => props.minWidth};
+    padding: 20px;
+    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+      0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 4px;
+    background-color: ${(props) => props.theme.colors.white};
+    height: 100%;
+  `
+
+  const CardWrapper = styled('div')`
+    height: 100%;
+    width: auto;
+  `
+
+  const CardTitle = styled('p')`
+    font-size: 14px;
+    line-height: 1;
+    color: ${(props) => props.theme.colors.black};
+    font-weight: 700;
+    margin-bottom: 10px;
+  `
+
+  export default {
+    name: 'Card',
+    components: {
+      Spinner,
+      Wrapper,
+      CardTitle,
+      CardWrapper,
+    },
+    props: {
+      title: {
+        type: String,
+        default: '',
+      },
+      width: {
+        type: [Number, String],
+        required: false,
+        default: '400px',
+      },
+      minWidth: {
+        type: [Number, String],
+        required: false,
+        default: null,
+      },
+      titleClass: {
+        type: String,
+        default: '',
+      },
+      showPopover: {
+        type: Boolean,
+        default: false,
+      },
+      viewCardClass: {
+        type: String,
+        default: '',
+      },
+      popoverText: {
+        type: String,
+        default: '',
+      },
+      isLoading: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  }
+</script>