@eturnity/eturnity_reusable_components 1.2.25-EPDM-5202.2 → 1.2.26-3d-master.0

package/src/components/iconWrapper/index.vue

@@ -0,0 +1,116 @@
+<template>
+    <Wrapper 
+    :disabled="disabled" 
+    :size="size" 
+    :backgroundColor="backgroundColor" 
+    :borderRadius="borderRadius"
+    :hoveredBackgroundColor="hoveredBackgroundColor"
+    :isHovered="isHovered"
+    >
+        <icon :disabled="disabled" 
+            :size="iconSize" 
+            :name="name" 
+            :color="iconColor" 
+            :hoveredColor="hoveredIconColor" />
+        <caret v-if="hasCaret">
+          <iconWrapper :disabled="disabled" 
+            size="10px" 
+            name="arrow_down" 
+            :iconColor="iconColor" 
+            :hoveredBackgroundColor="hoveredIconColor"
+            borderRadius="1px"
+            />  
+        </caret>
+    </Wrapper>
+  </template>
+  
+  <script>
+  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+  //  How to use:
+  //<icon
+  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
+  //   color="red"
+  //   hoveredColor="blue"
+  //   size="60px" by default, this is 30px
+  // />
+  
+  import styled from 'vue-styled-components'
+  import icon from '../icon'
+  const wrapperAttrs = { isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String }
+  const Wrapper = styled('div', wrapperAttrs)`
+    position:relative;
+    display: inline-flex;
+    width: ${(props) => props.size};
+    height: ${(props) => props.size};
+    justify-content:center;
+    align-items:center;
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    background-color: ${(props)=>props.theme.colors[props.backgroundColor] || props.backgroundColor};
+    border-radius: ${(props) => props.borderRadius};
+    ${(props)=>(props.isHovered ? 'background-color:'+props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor : "")};
+    &:hover{
+        background-color:${(props)=>props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor};
+    }
+  `
+  const caret=styled.div`
+  position:absolute;
+  bottom:3px;
+  right:2px;
+  height:10px;
+  `
+
+  export default {
+    name: 'iconWrapper',
+    components: {
+      Wrapper,
+      icon,
+      caret
+    },
+    props: {
+      disabled: {
+        required: false,
+        default: false
+      },
+      name: {
+        required: true
+      },
+      iconColor: {
+        required: false,
+        default: 'white'
+      },
+      hoveredIconColor: {
+        required: false
+      },
+      backgroundColor: {
+        required: false,
+      },
+      hoveredBackgroundColor: {
+        required: false,
+        default:"transparentWhite1"
+      },
+      size: {
+        required: false,
+        default: '32px'
+      },
+      iconSize:{
+        required: false,
+        default:'18px'
+      },
+      hasCaret:{
+        required: false,
+        default: false
+      },
+      borderRadius:{
+        required:false,
+        default:'6px'
+      },
+      isHovered:{
+        required:false,
+        default:false
+      }
+    },
+    data() {
+      return {}
+    }
+  }
+  </script>

package/src/components/infoText/index.vue

@@ -1,151 +1,166 @@
-<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" 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:String, borderColor: String, alignArrow:String, alignText: String, width:String,halfComputedTextInfoWidth:Number }
+const TextOverlay = styled('div', textAttrs)`
+  position: absolute;
+  top: ${(props) => '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: ${(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: String, borderColor: String }
+
+const IconWrapper = styled('div', iconAttrs)`
+  position: relative;
+  top: 1px;
+  height: ${(props) => props.size};
+`
+const IconImg = styled('div', iconAttrs)`
+  cursor: pointer;
+  height: ${(props) => props.size};
+`
+
+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: '14px'
+    },
+    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,
+}