@eturnity/eturnity_reusable_components 7.45.1 → 7.45.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.45.1",
+  "version": "7.45.3",
   "files": [
     "dist",
     "src"

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

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

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

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

package/src/components/card/index.vue

@@ -2,15 +2,22 @@
   <Wrapper
     v-show="!isLoading"
     :class="viewCardClass"
+    data-test-id="card_main_wrapper"
     :min-width="minWidth"
     :width="width"
   >
-    <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
+    <Spinner
+      v-if="isLoading"
+      data-test-id="card_spinner"
+      :limited-to-modal="true"
+      size="50px"
+    />
     <CardWrapper v-else>
-      <CardTitle :class="titleClass">
+      <CardTitle :class="titleClass" data-test-id="card_title">
         {{ $gettext(title) }}
         <EtPopover
           v-if="showPopover && popoverText !== ''"
+          data-test-id="card_popover"
           :text="popoverText"
         />
       </CardTitle>
@@ -20,6 +27,19 @@
 </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'
 

package/src/components/infoCard/index.vue

@@ -1,6 +1,10 @@
 <template>
-  <InfoContainer>
-    <RCIcon name="info" size="24px" :color="color" />
+  <InfoContainer
+    background-color="backgrounColor"
+    :border-color="borderColor"
+    :has-dashed-border="hasDashedBorder"
+  >
+    <RCIcon :color="color" name="info" size="24px" />
     <TextContainer>
       <slot></slot>
     </TextContainer>
@@ -10,12 +14,24 @@
 <script>
   import styled from 'vue3-styled-components'
   import RCIcon from '../icon'
-
-  const InfoContainer = styled.div`
+  const propsContainer = {
+    backgroundColor: String,
+    hasDashedBorder: Boolean,
+    borderColor: String,
+  }
+  const InfoContainer = styled('div', propsContainer)`
     display: flex;
     gap: 15px;
-    padding: 20px;
-    border: 1px dashed ${(props) => props.theme.colors.grey4};
+    padding: 15px;
+    border: 1px ${(props) => (props.hasDashedBorder ? 'dashed' : 'solid')}
+      ${(props) =>
+        props.theme.colors[props.borderColor]
+          ? props.theme.colors[props.borderColor]
+          : props.borderColor};
+    background-color: ${(props) =>
+      props.theme.colors[props.backgroundColor]
+        ? props.theme.colors[props.backgroundColor]
+        : props.backgroundColor};
     border-radius: 4px;
   `
 
@@ -33,8 +49,19 @@
     },
     props: {
       color: {
-        required: false
-      }
-    }
+        required: false,
+      },
+      backgrounColor: {
+        required: false,
+      },
+      hasDashedBorder: {
+        required: false,
+        default: true,
+      },
+      borderColor: {
+        required: false,
+        default: 'grey4',
+      },
+    },
   }
 </script>