@eturnity/eturnity_reusable_components 7.45.1 → 7.45.2-EPDM-10609.0

package/package.json

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

package/src/assets/theme.js

@@ -11,6 +11,7 @@ const theme = {
     lightGray: '#f2f2f2',
     white: '#ffffff',
     blue: '#48a2d0',
+    blue2: '#6CD4D4',
     red: '#ff5656',
     blue1: '#e4efff',
     brightBlue: '#0068DE',

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/infoText/constants.js

@@ -0,0 +1,4 @@
+export const TEXT_OVERLAY_TOP_OFFSET = 45
+export const TEXT_OVERLAY_LEFT_OFFSET = 3
+export const TEXT_OVERLAY_ARROW_LEFT_OFFSET = 78
+export const TEXT_OVERLAY_ARROW_RIGHT_NEGATIVE_OFFSET = 86

package/src/components/infoText/index.vue

@@ -1,29 +1,48 @@
 <template>
   <ComponentWrapper>
-    <IconWrapper :size="size">
+    <IconWrapper :size="type === 'dot' ? 'unset' : size">
       <IconImg
+        ref="iconImg"
         data-test-id="infoText_trigger"
         @click.prevent="toggleShowInfo()"
         @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
         @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
       >
+        <Dot v-if="type === 'dot'" :color="dotColor" />
         <IconComponent
+          v-else
           :color="iconColor"
           cursor="pointer"
           name="info"
           :size="size"
         />
       </IconImg>
-      <TextOverlay
-        v-if="showInfo"
-        :align-arrow="alignArrow"
-        :half-computed-text-info-width="halfComputedTextInfoWidth"
-        :icon-size="size"
-        :max-width="maxWidth"
-        :width="width"
-        ><slot></slot>
-        <span v-html="text"></span>
-      </TextOverlay>
+      <template v-if="!shouldUseTeleport">
+        <TextOverlay
+          v-if="showInfo"
+          :align-arrow="alignArrow"
+          :half-computed-text-info-width="halfComputedTextInfoWidth"
+          :icon-size="size"
+          :max-width="maxWidth"
+          :width="width"
+          ><slot></slot>
+          <span v-html="text"></span>
+        </TextOverlay>
+      </template>
+      <Teleport v-else to="#portal-target">
+        <TextOverlay
+          v-if="showInfo"
+          :align-arrow="alignArrow"
+          :half-computed-text-info-width="halfComputedTextInfoWidth"
+          :icon-size="size"
+          :max-width="maxWidth"
+          :width="width"
+          :top="position.top"
+          :left="position.left"
+          ><slot></slot>
+          <span v-html="text"></span>
+        </TextOverlay>
+      </Teleport>
     </IconWrapper>
   </ComponentWrapper>
 </template>
@@ -36,25 +55,37 @@
   //     size="20px"
   //     alignArrow="right" // which side the arrow should be on
   // />
+  import { Teleport } from 'vue'
   import theme from '../../assets/theme.js'
   import styled from 'vue3-styled-components'
   import IconComponent from '../icon'
+  import {
+    TEXT_OVERLAY_ARROW_LEFT_OFFSET,
+    TEXT_OVERLAY_ARROW_RIGHT_NEGATIVE_OFFSET,
+    TEXT_OVERLAY_TOP_OFFSET,
+  } from './constants.js'
 
   const textAttrs = {
     iconSize: String,
     alignArrow: String,
     width: String,
     halfComputedTextInfoWidth: Number,
+    top: String,
+    left: String,
   }
   const TextOverlay = styled('div', textAttrs)`
     position: absolute;
-    top: ${(props) => 'calc(' + props.iconSize + ' + 15px)'};
+    top: ${(props) =>
+      props.top ? props.top : 'calc(' + props.iconSize + ' + 15px)'};
     ${(props) =>
-      props.alignArrow === 'left'
+      props.left
+        ? 'left: ' + props.left
+        : props.alignArrow === 'left'
         ? 'left: calc(' + props.iconSize + ' /2 - 18px)'
         : props.alignArrow === 'center'
         ? 'left: calc((-' + props.width + ' + ' + props.iconSize + ') /2 + 2px)'
         : 'right: calc(' + props.iconSize + ' /2 - 17px)'};
+
     text-align: left;
     background: ${(props) => props.theme.colors.black};
     padding: 10px;
@@ -95,6 +126,14 @@
     height: ${(props) => props.size};
   `
 
+  const Dot = styled('div')`
+    width: 5px;
+    height: 5px;
+    background-color: ${(props) => props.color};
+    border-radius: 50%;
+    display: inline-block;
+  `
+
   const IconImg = styled.div`
     line-height: 0;
   `
@@ -106,29 +145,37 @@
   export default {
     name: 'InfoText',
     components: {
+      Dot,
       IconWrapper,
       TextOverlay,
       ComponentWrapper,
       IconImg,
       IconComponent,
+      Teleport,
     },
     props: {
       text: {
+        type: String,
         required: false,
+        default: '',
       },
       size: {
+        type: String,
         required: false,
         default: '14px',
       },
       alignArrow: {
+        type: String,
         required: false,
         default: 'center',
       },
       openTrigger: {
+        type: String,
         required: false,
         default: 'onHover', // onHover, onClick
       },
       width: {
+        type: String,
         required: false,
         default: '200px',
       },
@@ -136,10 +183,28 @@
         type: String,
         default: '400px',
       },
+      shouldUseTeleport: {
+        type: Boolean,
+        default: false,
+      },
+      dotColor: {
+        type: String,
+        required: false,
+        default: theme.colors.blue2,
+      },
+      type: {
+        type: String,
+        required: false,
+        default: 'info', // info, dot
+      },
     },
     data() {
       return {
         showInfo: false,
+        position: {
+          top: null,
+          left: null,
+        },
       }
     },
     computed: {
@@ -159,6 +224,10 @@
         } else {
           document.removeEventListener('click', this.clickOutside)
         }
+
+        if (this.shouldUseTeleport && this.showInfo) {
+          this.getTeleportPosition()
+        }
       },
       clickOutside(event) {
         if (this.$el.contains(event.target)) {
@@ -166,6 +235,35 @@
         }
         this.toggleShowInfo()
       },
+      getTextOverlayTop() {
+        const iconImg = this.$refs.iconImg.$el
+        const iconImgTop = iconImg.getBoundingClientRect().top
+        const iconImgHeight = iconImg.clientHeight
+        const textOverlayTop =
+          iconImgTop - iconImgHeight / 2 + TEXT_OVERLAY_TOP_OFFSET
+
+        console.log(textOverlayTop)
+
+        return `${textOverlayTop}px`
+      },
+      getTextOverlayLeft() {
+        const iconImg = this.$refs.iconImg.$el
+        const iconImgLeft = iconImg.getBoundingClientRect().left
+        const iconImgWidth = iconImg.clientWidth
+        const textOverlayLeft = iconImgLeft + iconImgWidth / 2 - 100 + 3
+
+        if (this.alignArrow === 'center') {
+          return `${textOverlayLeft}px`
+        } else if (this.alignArrow === 'left') {
+          return `${textOverlayLeft + TEXT_OVERLAY_ARROW_LEFT_OFFSET}px`
+        }
+
+        return `${textOverlayLeft - TEXT_OVERLAY_ARROW_RIGHT_NEGATIVE_OFFSET}px`
+      },
+      getTeleportPosition() {
+        this.position.top = this.getTextOverlayTop()
+        this.position.left = this.getTextOverlayLeft()
+      },
     },
   }
 </script>