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

package/src/components/buttons/splitButtons/index.vue

@@ -1,86 +1,86 @@
-<template>
-  <Container>
-    <SplitButton
-      v-for="(option, index) in options"
-      :data-id-key="`${dataIdKey}_${option.value}`"
-      :key="index"
-      :length="options.length"
-      :position="getButtonPosition(index)"
-      :selected="modelValue === option.value"
-      @click.stop="handleSelect(option.value)"
-    >
-      {{ option.label }}
-    </SplitButton>
-  </Container>
-</template>
-
-<script setup>
-  import styled from 'vue3-styled-components'
-  import { computed } from 'vue'
-
-  const Container = styled.div`
-    display: flex;
-    width: fit-content;
-  `
-  const SplitButton = styled('button', {
-    selected: Boolean,
-    position: String,
-    length: Number,
-  })`
-    padding: 8px 16px;
-    border: 1px solid ${(props) => props.theme.semanticColors.teal[100]};
-    ${(props) =>
-      props.position === 'middle'
-        ? `
-      border-left: none;
-      border-right: none;
-    `
-        : props.length === 2 && props.position === 'first'
-        ? 'border-right: none;'
-        : ''}
-    border-radius: ${(props) =>
-      props.position === 'first'
-        ? '4px 0 0 4px'
-        : props.position === 'last'
-        ? '0 4px 4px 0'
-        : '0'};
-    font-family: ${(props) => props.theme.fonts.mainFont};
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 100%;
-    cursor: pointer;
-    background: ${(props) =>
-      props.selected ? props.theme.semanticColors.purple[50] : 'transparent'};
-    color: ${(props) => props.theme.semanticColors.purple[500]};
-  `
-
-  const props = defineProps({
-    options: {
-      type: Array,
-      required: true,
-      // expects array of {label: string, value: string}
-    },
-    modelValue: {
-      type: String,
-      required: true,
-    },
-    dataIdKey: {
-      type: String,
-      default: '',
-    },
-  })
-
-  const emit = defineEmits(['update:modelValue'])
-
-  const getButtonPosition = computed(() => (index) => {
-    if (index === 0) return 'first'
-    if (index === props.options.length - 1) return 'last'
-
-    return 'middle'
-  })
-
-  const handleSelect = (value) => {
-    emit('update:modelValue', value)
-    emit('click', value)
-  }
-</script>
+<template>
+  <Container>
+    <SplitButton
+      v-for="(option, index) in options"
+      :data-id-key="`${dataIdKey}_${option.value}`"
+      :key="index"
+      :length="options.length"
+      :position="getButtonPosition(index)"
+      :selected="modelValue === option.value"
+      @click.stop="handleSelect(option.value)"
+    >
+      {{ option.label }}
+    </SplitButton>
+  </Container>
+</template>
+
+<script setup>
+  import styled from 'vue3-styled-components'
+  import { computed } from 'vue'
+
+  const Container = styled.div`
+    display: flex;
+    width: fit-content;
+  `
+  const SplitButton = styled('button', {
+    selected: Boolean,
+    position: String,
+    length: Number,
+  })`
+    padding: 8px 16px;
+    border: 1px solid ${(props) => props.theme.semanticColors.teal[100]};
+    ${(props) =>
+      props.position === 'middle'
+        ? `
+      border-left: none;
+      border-right: none;
+    `
+        : props.length === 2 && props.position === 'first'
+        ? 'border-right: none;'
+        : ''}
+    border-radius: ${(props) =>
+      props.position === 'first'
+        ? '4px 0 0 4px'
+        : props.position === 'last'
+        ? '0 4px 4px 0'
+        : '0'};
+    font-family: ${(props) => props.theme.fonts.mainFont};
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 100%;
+    cursor: pointer;
+    background: ${(props) =>
+      props.selected ? props.theme.semanticColors.purple[50] : 'transparent'};
+    color: ${(props) => props.theme.semanticColors.purple[500]};
+  `
+
+  const props = defineProps({
+    options: {
+      type: Array,
+      required: true,
+      // expects array of {label: string, value: string}
+    },
+    modelValue: {
+      type: String,
+      required: true,
+    },
+    dataIdKey: {
+      type: String,
+      default: '',
+    },
+  })
+
+  const emit = defineEmits(['update:modelValue'])
+
+  const getButtonPosition = computed(() => (index) => {
+    if (index === 0) return 'first'
+    if (index === props.options.length - 1) return 'last'
+
+    return 'middle'
+  })
+
+  const handleSelect = (value) => {
+    emit('update:modelValue', value)
+    emit('click', value)
+  }
+</script>

package/src/components/card/Card.stories.js

@@ -1,79 +1,79 @@
-import Card from './index.vue'
-
-export default {
-  title: 'Card',
-  component: Card,
-  tags: ['autodocs'],
-}
-
-// To use:
-// <RCCard
-//   :isLoading="true"
-//   minWidth="150px"
-//   popoverText="Sample popover text"
-//   :showPopover="true"
-//   title="Sample title"
-//   titleClass="sampleTitleClass"
-//   viewCardClass="sampleViewCardClass"
-//   width="200px"
-// />
-
-export const Default = {
-  args: {
-    title: 'Sample card title',
-  },
-  render: (args) => ({
-    components: { Card },
-    setup() {
-      return { args }
-    },
-    template: `
-      <Card v-bind="args">
-        Sample card content
-      </ActionBanner>
-    `,
-  }),
-}
-
-export const LoadingCard = {
-  args: {
-    isLoading: true,
-  },
-}
-
-export const CustomWidth = {
-  args: {
-    title: 'Sample card title',
-    width: '600px',
-  },
-  render: (args) => ({
-    components: { Card },
-    setup() {
-      return { args }
-    },
-    template: `
-      <Card v-bind="args">
-        Sample card content
-      </ActionBanner>
-    `,
-  }),
-}
-
-export const PopoverShown = {
-  args: {
-    title: 'Sample card title',
-    showPopover: true,
-    popoverText: 'Sample popover text',
-  },
-  render: (args) => ({
-    components: { Card },
-    setup() {
-      return { args }
-    },
-    template: `
-      <Card v-bind="args">
-        Sample card content
-      </ActionBanner>
-    `,
-  }),
-}
+import Card from './index.vue'
+
+export default {
+  title: 'Card',
+  component: Card,
+  tags: ['autodocs'],
+}
+
+// To use:
+// <RCCard
+//   :isLoading="true"
+//   minWidth="150px"
+//   popoverText="Sample popover text"
+//   :showPopover="true"
+//   title="Sample title"
+//   titleClass="sampleTitleClass"
+//   viewCardClass="sampleViewCardClass"
+//   width="200px"
+// />
+
+export const Default = {
+  args: {
+    title: 'Sample card title',
+  },
+  render: (args) => ({
+    components: { Card },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Card v-bind="args">
+        Sample card content
+      </ActionBanner>
+    `,
+  }),
+}
+
+export const LoadingCard = {
+  args: {
+    isLoading: true,
+  },
+}
+
+export const CustomWidth = {
+  args: {
+    title: 'Sample card title',
+    width: '600px',
+  },
+  render: (args) => ({
+    components: { Card },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Card v-bind="args">
+        Sample card content
+      </ActionBanner>
+    `,
+  }),
+}
+
+export const PopoverShown = {
+  args: {
+    title: 'Sample card title',
+    showPopover: true,
+    popoverText: 'Sample popover text',
+  },
+  render: (args) => ({
+    components: { Card },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Card v-bind="args">
+        Sample card content
+      </ActionBanner>
+    `,
+  }),
+}

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