@eturnity/eturnity_reusable_components 1.2.19-EPDM-5310.5 → 1.2.19-dev03.0

package/src/components/infoText/index.vue

@@ -1,151 +1,164 @@
-<template>
-  <component-wrapper>
-    <icon-wrapper>
-      <icon-img
-        :isActive="showInfo"
-        :size="size"
-        :borderColor="borderColor"
-        @click.prevent="toggleShowInfo()"
-        @mouseenter="toggleShowInfo()"
-        @mouseleave="toggleShowInfo()"
-      >
-        <svg
-          class="img-icon"
-          :width="size"
-          :height="size"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            class="img-icon"
-            d="M20.4853 3.51469C18.2188 1.24823 15.2053 0 12 0C8.79469 0 5.78123 1.24823 3.51469 3.51469C1.24823 5.78123 0 8.79469 0 12C0 15.2053 1.24823 18.2188 3.51469 20.4853C5.78123 22.7518 8.79469 24 12 24C15.2053 24 18.2188 22.7518 20.4853 20.4853C22.7518 18.2188 24 15.2053 24 12C24 8.79469 22.7518 5.78123 20.4853 3.51469ZM12 3.28125C13.4216 3.28125 14.5781 4.4378 14.5781 5.85938C14.5781 7.28095 13.4216 8.4375 12 8.4375C10.5784 8.4375 9.42188 7.28095 9.42188 5.85938C9.42188 4.4378 10.5784 3.28125 12 3.28125ZM15.2812 19.6875H8.71875V18.2812H10.125V11.9167H8.71875V10.5104H13.875V18.2812H15.2812V19.6875Z"
-            fill="#D5D5D5"
-          />
-        </svg>
-      </icon-img>
-      <text-overlay
-        v-if="showInfo"
-        :borderColor="borderColor"
-        :alignText="alignText"
-      >
-        {{ text }}
-      </text-overlay>
-    </icon-wrapper>
-  </component-wrapper>
-</template>
-
-<script>
-// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
-//To use:
-// <info-text
-//     text="Veritatis et quasi architecto beatae vitae"
-//     borderColor="#ccc"
-//     size="20"
-//     alignText="right" // default is left
-// />
-
-import styled from "vue-styled-components"
-
-const IconWrapper = styled.div`
-  position: relative;
-`
-
-const textAttrs = { borderColor: String, alignText: String }
-const TextOverlay = styled("div", textAttrs)`
-  position: absolute;
-  top: 26px;
-  right: ${(props) => (props.alignText === "left" ? "-10px" : "inherit")};
-  left: ${(props) => (props.alignText === "left" ? "inherit" : "-10px")};
-  background: ${(props) => props.theme.colors.black};
-  padding: 10px;
-  width: max-content;
-  max-width: 400px;
-  font-size: 13px;
-  font-weight: 400;
-  border-radius: 4px;
-  z-index: 99;
-  color: ${(props) => props.theme.colors.white};
-
-  :before {
-    content: "";
-    background-color: ${(props) => props.theme.colors.black};
-    position: absolute;
-    top: 2px;
-    right: ${(props) => (props.alignText === "left" ? "-12px" : "inherit")};
-    left: ${(props) => (props.alignText === "left" ? "inherit" : "40px")};
-    height: 8px;
-    width: 8px;
-    transform-origin: center center;
-    transform: translate(-2em, -0.5em) rotate(45deg);
-  }
-`
-
-const iconAttrs = { isActive: Boolean, size: String, borderColor: String }
-const IconImg = styled("div", iconAttrs)`
-  cursor: pointer;
-  height: ${(props) => props.size + "px"};
-
-  .img-icon {
-    fill: ${(props) =>
-      props.isActive
-        ? props.borderColor
-          ? props.borderColor
-          : props.theme.colors.secondary
-        : props.theme.colors.mediumGray};
-  }
-`
-
-const ComponentWrapper = styled.div`
-  display: inline-block;
-`
-
-export default {
-  name: "info-text",
-  components: {
-    IconWrapper,
-    TextOverlay,
-    ComponentWrapper,
-    IconImg,
-  },
-  props: {
-    text: {
-      required: true,
-    },
-    borderColor: {
-      required: false,
-      default: null,
-    },
-    size: {
-      required: false,
-      default: "20",
-    },
-    alignText: {
-      required: false,
-      default: "left", // "left" or "right"
-    },
-  },
-  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()
-    },
-  },
-  data() {
-    return {
-      showInfo: false,
-    }
-  },
-}
-</script>
+<template>
+  <component-wrapper>
+    <icon-wrapper :size="size">
+      <icon-img
+        :isActive="showInfo"
+        :size="size"
+        :borderColor="borderColor"
+        @click.prevent="toggleShowInfo()"
+        @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
+        @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
+      >
+        <icon :size="size + 'px'" name="info" :color="iconColor" />
+      </icon-img>
+      <text-overlay
+        v-if="showInfo"
+        :borderColor="borderColor"
+        :alignText="alignText"
+        :width="width"
+        :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
+        :alignArrow="alignArrow"
+        :iconSize="size"
+      ><slot />
+        {{ text }}
+      </text-overlay>
+    </icon-wrapper>
+  </component-wrapper>
+</template>
+
+<script>
+// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+//To use:
+// <info-text
+//     text="Veritatis et quasi architecto beatae vitae"
+//     borderColor="#ccc"
+//     size="20"
+//     alignText="right" // default is left
+// />
+import theme from '@/assets/theme.js'
+import styled from 'vue-styled-components'
+import icon from '../icon'
+
+const textAttrs = { iconSize:Number, borderColor: String, alignArrow:String, alignText: String, width:String,halfComputedTextInfoWidth:Number }
+const TextOverlay = styled('div', textAttrs)`
+  position: absolute;
+  top: ${(props) => (parseInt(props.iconSize) + 15)}px;
+  ${(props) => (props.alignArrow === 'left' ? 'left: '+((props.iconSize/2)-18)+'px;' :
+    props.alignArrow === 'center' ? 'left: calc((-'+props.width+' + '+props.iconSize+'px)/2 - 7px);':
+    'right: '+((props.iconSize/2)-17)+'px;')};
+  text-align: ${(props) => props.alignText};
+  background: ${(props) => props.theme.colors.black};
+  padding: 10px;
+  width: ${(props) => props.width };
+  max-width: 400px;
+  font-size: 13px;
+  font-weight: 400;
+  border-radius: 4px;
+  z-index: 99;
+  color: ${(props) => props.theme.colors.white};
+
+  :before {
+    content: '';
+    background-color: ${(props) => props.theme.colors.black};
+    position: absolute;
+    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);
+  }
+`
+
+const iconAttrs = { isActive: Boolean, size: Number, borderColor: String }
+
+const IconWrapper = styled('div', iconAttrs)`
+  position: relative;
+  top: 1px;
+  height: ${(props) => props.size}px;
+`
+const IconImg = styled('div', iconAttrs)`
+  cursor: pointer;
+  height: ${(props) => props.size}px;
+`
+
+const ComponentWrapper = styled.div`
+  display: inline-block;
+`
+
+export default {
+  name: 'info-text',
+  components: {
+    IconWrapper,
+    TextOverlay,
+    ComponentWrapper,
+    IconImg,
+    icon
+  },
+  props: {
+    text: {
+      required: false,
+    },
+    borderColor: {
+      required: false,
+      default: null
+    },
+    size: {
+      required: false,
+      default: '14'
+    },
+    alignText: {
+      required: false,
+      default: 'left' // "left" or "right"
+    },
+    alignArrow:{
+      required:false,
+      default:'center'
+    },
+    openTrigger:{
+      required:false,
+      default: 'onClick'
+    },
+    width:{
+      required:false,
+      default:'165px'
+    }
+  },
+  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()
+    }
+  },
+  data() {
+    return {
+      showInfo: false,
+    }
+  },
+  computed: {
+    iconColor() {
+      return this.isActive
+        ? this.borderColor
+          ? this.borderColor
+          : theme.colors.secondary
+        : theme.colors.mediumGray
+    },
+    halfComputedTextInfoWidth() {
+      return parseInt(this.width)/2;
+    }
+  }
+}
+</script>

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

@@ -1,57 +1,57 @@
-import Checkbox from "./index.vue"
-
-export default {
-  title: "Checkbox",
-  component: Checkbox,
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { Checkbox },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<checkbox v-bind="$props" />',
-
-  // import Checkbox from "@eturnity/eturnity_reusable_components/src/components/inputs/checkbox"
-  //To use:
-  // <checkbox
-  //     label="Do you accept the Terms?"
-  //     :isChecked="isChecked" //required
-  //     @on-event-handler="onInputChange($event)" //required
-  //     checkColor="blue"
-  //     size="small"
-  //     backgroundColor="red"
-  //     :isDisabled="true"
-  // />
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  isChecked: true,
-  size: "medium", // "small" or "medium"
-  isDisabled: false,
-}
-
-export const Small = Template.bind({})
-Small.args = {
-  isChecked: true,
-  size: "small", // "small" or "medium"
-  isDisabled: false,
-}
-
-export const CustomColor = Template.bind({})
-CustomColor.args = {
-  isChecked: true,
-  size: "medium", // "small" or "medium"
-  checkColor: "blue",
-  backgroundColor: "red",
-  isDisabled: false,
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  isChecked: false,
-  size: "medium", // "small" or "medium"
-  isDisabled: true,
-}
+import Checkbox from "./index.vue"
+
+export default {
+  title: "Checkbox",
+  component: Checkbox,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { Checkbox },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<checkbox v-bind="$props" />',
+
+  // import Checkbox from "@eturnity/eturnity_reusable_components/src/components/inputs/checkbox"
+  //To use:
+  // <checkbox
+  //     label="Do you accept the Terms?"
+  //     :isChecked="isChecked" //required
+  //     @on-event-handler="onInputChange($event)" //required
+  //     checkColor="blue"
+  //     size="small"
+  //     backgroundColor="red"
+  //     :isDisabled="true"
+  // />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  isChecked: true,
+  size: "medium", // "small" or "medium"
+  isDisabled: false,
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  isChecked: true,
+  size: "small", // "small" or "medium"
+  isDisabled: false,
+}
+
+export const CustomColor = Template.bind({})
+CustomColor.args = {
+  isChecked: true,
+  size: "medium", // "small" or "medium"
+  checkColor: "blue",
+  backgroundColor: "red",
+  isDisabled: false,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  isChecked: false,
+  size: "medium", // "small" or "medium"
+  isDisabled: true,
+}