@eturnity/eturnity_reusable_components 7.45.5-EPDM-11314.2 → 7.45.5-EPDM-10609.1

package/src/components/infoText/index.vue

@@ -1,190 +1,287 @@
-<template>
-  <ComponentWrapper>
-    <IconWrapper :size="size">
-      <IconImg
-        data-test-id="infoText_trigger"
-        @click.prevent="toggleShowInfo()"
-        @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
-        @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
-      >
-        <IconComponent
-          :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"
-        :info-position="infoPosition"
-        :max-width="maxWidth"
-        :width="width"
-        ><slot></slot>
-        <span v-if="text.length > 0" v-html="text"></span>
-      </TextOverlay>
-    </IconWrapper>
-  </ComponentWrapper>
-</template>
-
-<script>
-  // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
-  //To use:
-  // <info-text
-  //     text="Veritatis et quasi architecto beatae vitae"
-  //     size="20px"
-  //     alignArrow="right" // which side the arrow should be on
-  // />
-  import theme from '../../assets/theme.js'
-  import styled from 'vue3-styled-components'
-  import IconComponent from '../icon'
-
-  const textAttrs = {
-    iconSize: String,
-    alignArrow: String,
-    width: String,
-    halfComputedTextInfoWidth: Number,
-    infoPosition: String,
-  }
-  const TextOverlay = styled('div', textAttrs)`
-    position: absolute;
-    ${(props) =>
-      props.infoPosition == 'top'
-        ? 'bottom : calc(' + props.iconSize + ' + 15px)'
-        : 'top : calc(' + props.iconSize + ' + 15px)'};
-    ${(props) =>
-      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;
-    width: ${(props) => props.width};
-    max-width: ${(props) => props.maxWidth};
-    font-size: 13px;
-    font-weight: 400;
-    line-height: normal;
-    border-radius: 4px;
-    z-index: 999;
-    color: ${(props) => props.theme.colors.white};
-
-    :before {
-      content: '';
-      background-color: ${(props) => props.theme.colors.black};
-      position: absolute;
-
-      ${(props) =>
-        props.infoPosition == 'top' ? 'bottom : -10px' : 'top: 2px'};
-
-      ${(props) =>
-        props.alignArrow === 'left'
-          ? 'left:40px;'
-          : props.alignArrow == 'center'
-          ? 'left: calc(50% + 19px);'
-          : 'right:-13px;'};
-      height: 8px;
-      width: 8px;
-      transform-origin: center center;
-      transform: translate(-2em, -0.5em) rotate(45deg);
-    }
-
-    span a {
-      color: #2cc0eb;
-    }
-  `
-
-  const iconAttrs = { size: String }
-  const IconWrapper = styled('div', iconAttrs)`
-    position: relative;
-    height: ${(props) => props.size};
-  `
-
-  const IconImg = styled.div`
-    line-height: 0;
-  `
-
-  const ComponentWrapper = styled.div`
-    display: inline-block;
-  `
-
-  export default {
-    name: 'InfoText',
-    components: {
-      IconWrapper,
-      TextOverlay,
-      ComponentWrapper,
-      IconImg,
-      IconComponent,
-    },
-    props: {
-      text: {
-        required: false,
-        default: '',
-        type: String,
-      },
-      size: {
-        required: false,
-        default: '14px',
-        type: String,
-      },
-      infoPosition: {
-        required: false,
-        default: 'bottom',
-        type: String,
-      },
-      alignArrow: {
-        required: false,
-        default: 'center',
-        type: String,
-      },
-      openTrigger: {
-        required: false,
-        default: 'onHover', // onHover, onClick
-        type: String,
-      },
-      width: {
-        required: false,
-        default: '165px',
-        type: String,
-      },
-      maxWidth: {
-        default: '400px',
-        type: String,
-      },
-    },
-    data() {
-      return {
-        showInfo: false,
-      }
-    },
-    computed: {
-      iconColor() {
-        return theme.colors.mediumGray
-      },
-      halfComputedTextInfoWidth() {
-        return parseInt(this.width) / 2
-      },
-    },
-    methods: {
-      toggleShowInfo() {
-        this.showInfo = !this.showInfo
-
-        if (this.showInfo) {
-          document.addEventListener('click', this.clickOutside)
-        } else {
-          document.removeEventListener('click', this.clickOutside)
-        }
-      },
-      clickOutside(event) {
-        if (this.$el.contains(event.target)) {
-          return
-        }
-        this.toggleShowInfo()
-      },
-    },
-  }
-</script>
+<template>
+  <ComponentWrapper>
+    <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>
+      <template v-if="!shouldUseTeleport">
+        <TextOverlay
+          v-if="showInfo"
+          :align-arrow="alignArrow"
+          :half-computed-text-info-width="halfComputedTextInfoWidth"
+          :icon-size="size"
+          :info-position="infoPosition"
+          :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"
+          :info-position="infoPosition"
+          :left="position.left"
+          :max-width="maxWidth"
+          :top="position.top"
+          :width="width"
+          ><slot></slot>
+          <span v-html="text"></span>
+        </TextOverlay>
+      </Teleport>
+    </IconWrapper>
+  </ComponentWrapper>
+</template>
+
+<script>
+  // import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+  //To use:
+  // <info-text
+  //     text="Veritatis et quasi architecto beatae vitae"
+  //     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,
+    infoPosition: String,
+  }
+  const TextOverlay = styled('div', textAttrs)`
+    position: absolute;
+    ${(props) => (props.infoPosition === 'top' ? 'bottom' : 'top')} : ${(
+      props
+    ) => (props.top ? props.top : 'calc(' + props.iconSize + ' + 5px)')};
+    ${(props) =>
+      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)'};
+
+    ${(props) => (props.infoPosition === 'left' ? 'right' : 'left')} : 0;
+
+    text-align: left;
+    background: ${(props) => props.theme.colors.black};
+    padding: 10px;
+    width: ${(props) => props.width};
+    max-width: ${(props) => props.maxWidth};
+    font-size: 13px;
+    font-weight: 400;
+    line-height: normal;
+    border-radius: 4px;
+    z-index: 999;
+    color: ${(props) => props.theme.colors.white};
+
+    :before {
+      content: '';
+      background-color: ${(props) => props.theme.colors.black};
+      position: absolute;
+
+      ${(props) =>
+        props.infoPosition == 'top' ? 'bottom : -10px' : 'top: 2px'};
+
+      ${(props) =>
+        props.alignArrow === 'left'
+          ? 'left:40px;'
+          : props.alignArrow == 'center'
+          ? 'left: calc(50% + 19px);'
+          : 'right:-13px;'};
+      height: 8px;
+      width: 8px;
+      transform-origin: center center;
+      transform: translate(-2em, -0.5em) rotate(45deg);
+    }
+
+    span a {
+      color: #2cc0eb;
+    }
+  `
+
+  const iconAttrs = { size: String }
+  const IconWrapper = styled('div', iconAttrs)`
+    position: relative;
+    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;
+  `
+
+  const ComponentWrapper = styled.div`
+    display: inline-block;
+  `
+
+  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',
+        type: String,
+      },
+      infoPosition: {
+        required: false,
+        default: 'bottom',
+        type: String,
+      },
+      alignArrow: {
+        type: String,
+        required: false,
+        default: 'center',
+        type: String,
+      },
+      openTrigger: {
+        type: String,
+        required: false,
+        default: 'onHover', // onHover, onClick
+        type: String,
+      },
+      width: {
+        type: String,
+        required: false,
+        default: '165px',
+        type: String,
+      },
+      maxWidth: {
+        default: '400px',
+        type: String,
+      },
+      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: {
+      iconColor() {
+        return theme.colors.mediumGray
+      },
+      halfComputedTextInfoWidth() {
+        return parseInt(this.width) / 2
+      },
+    },
+    methods: {
+      toggleShowInfo() {
+        this.showInfo = !this.showInfo
+
+        if (this.showInfo) {
+          document.addEventListener('click', this.clickOutside)
+        } else {
+          document.removeEventListener('click', this.clickOutside)
+        }
+
+        if (this.shouldUseTeleport && this.showInfo) {
+          this.getTeleportPosition()
+        }
+      },
+      clickOutside(event) {
+        if (this.$el.contains(event.target)) {
+          return
+        }
+        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>

package/src/components/inputs/checkbox/Checkbox.stories.js

@@ -1,63 +1,63 @@
-import Checkbox from './index.vue'
-
-export default {
-  title: 'Checkbox',
-  component: Checkbox,
-  tags: ['autodocs'],
-}
-
-// <checkbox
-//     label="Do you accept the Terms?"
-//     :isChecked="isChecked" //required
-//     @on-event-handler="onInputChange($event)" //required
-//     checkColor="blue"
-//     size="small"
-//     backgroundColor="red"
-//     :isDisabled="true"
-//     cursorType="default"
-// />
-
-export const DefaultCheckbox = {
-  args: {
-    isChecked: 'false',
-  },
-}
-
-export const IsChecked = {
-  args: {
-    isChecked: 'true',
-  },
-}
-
-export const CheckboxLabel = {
-  args: {
-    isChecked: 'false',
-    label: 'Click me',
-  },
-}
-
-export const SmallCheckbox = {
-  args: {
-    isChecked: 'false',
-    label: 'Click me',
-    size: 'small',
-  },
-}
-
-export const DisabledCheckbox = {
-  args: {
-    isChecked: false,
-    label: 'Click me',
-    size: 'small',
-    isDisabled: 'true',
-  },
-}
-
-export const CustomColor = {
-  args: {
-    isChecked: 'false',
-    size: 'medium',
-    checkColor: 'blue',
-    backgroundColor: 'yellow',
-  },
-}
+import Checkbox from './index.vue'
+
+export default {
+  title: 'Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+}
+
+// <checkbox
+//     label="Do you accept the Terms?"
+//     :isChecked="isChecked" //required
+//     @on-event-handler="onInputChange($event)" //required
+//     checkColor="blue"
+//     size="small"
+//     backgroundColor="red"
+//     :isDisabled="true"
+//     cursorType="default"
+// />
+
+export const DefaultCheckbox = {
+  args: {
+    isChecked: 'false',
+  },
+}
+
+export const IsChecked = {
+  args: {
+    isChecked: 'true',
+  },
+}
+
+export const CheckboxLabel = {
+  args: {
+    isChecked: 'false',
+    label: 'Click me',
+  },
+}
+
+export const SmallCheckbox = {
+  args: {
+    isChecked: 'false',
+    label: 'Click me',
+    size: 'small',
+  },
+}
+
+export const DisabledCheckbox = {
+  args: {
+    isChecked: false,
+    label: 'Click me',
+    size: 'small',
+    isDisabled: 'true',
+  },
+}
+
+export const CustomColor = {
+  args: {
+    isChecked: 'false',
+    size: 'medium',
+    checkColor: 'blue',
+    backgroundColor: 'yellow',
+  },
+}