@eturnity/eturnity_reusable_components 7.30.3-EPDM-10647.0 → 7.30.3-EPDM-8441.0

package/src/components/infoText/index.vue

@@ -1,165 +1,165 @@
-<template>
-  <component-wrapper>
-    <icon-wrapper :size="size">
-      <icon-img
-        @click.prevent="toggleShowInfo()"
-        @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
-        @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
-      >
-        <icon :size="size" name="info" :color="iconColor" cursor="pointer" />
-      </icon-img>
-      <text-overlay
-        v-if="showInfo"
-        :width="width"
-        :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
-        :alignArrow="alignArrow"
-        :iconSize="size"
-        :maxWidth="maxWidth"
-        ><slot />
-        <span v-html="text"></span>
-      </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"
-//     size="20px"
-//     alignArrow="right" // which side the arrow should be on
-// />
-import theme from '../../assets/theme.js'
-import styled from 'vue3-styled-components'
-import icon from '../icon'
-
-const textAttrs = {
-  iconSize: String,
-  alignArrow: 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: 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: 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);
-  }
-
-  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: 'info-text',
-  components: {
-    IconWrapper,
-    TextOverlay,
-    ComponentWrapper,
-    IconImg,
-    icon
-  },
-  props: {
-    text: {
-      required: false
-    },
-    size: {
-      required: false,
-      default: '14px'
-    },
-    alignArrow: {
-      required: false,
-      default: 'center'
-    },
-    openTrigger: {
-      required: false,
-      default: 'onHover' // onHover, onClick
-    },
-    width: {
-      required: false,
-      default: '165px'
-    },
-    maxWidth: {
-      type: String,
-      default: '400px'
-    }
-  },
-  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 theme.colors.mediumGray
-    },
-    halfComputedTextInfoWidth() {
-      return parseInt(this.width) / 2
-    }
-  }
-}
-</script>
+<template>
+  <component-wrapper>
+    <icon-wrapper :size="size">
+      <icon-img
+        @click.prevent="toggleShowInfo()"
+        @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
+        @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
+      >
+        <icon :size="size" name="info" :color="iconColor" cursor="pointer" />
+      </icon-img>
+      <text-overlay
+        v-if="showInfo"
+        :width="width"
+        :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
+        :alignArrow="alignArrow"
+        :iconSize="size"
+        :maxWidth="maxWidth"
+        ><slot />
+        <span v-html="text"></span>
+      </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"
+//     size="20px"
+//     alignArrow="right" // which side the arrow should be on
+// />
+import theme from '../../assets/theme.js'
+import styled from 'vue3-styled-components'
+import icon from '../icon'
+
+const textAttrs = {
+  iconSize: String,
+  alignArrow: 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: 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: 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);
+  }
+
+  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: 'info-text',
+  components: {
+    IconWrapper,
+    TextOverlay,
+    ComponentWrapper,
+    IconImg,
+    icon
+  },
+  props: {
+    text: {
+      required: false
+    },
+    size: {
+      required: false,
+      default: '14px'
+    },
+    alignArrow: {
+      required: false,
+      default: 'center'
+    },
+    openTrigger: {
+      required: false,
+      default: 'onHover' // onHover, onClick
+    },
+    width: {
+      required: false,
+      default: '165px'
+    },
+    maxWidth: {
+      type: String,
+      default: '400px'
+    }
+  },
+  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 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,
+}