@eturnity/eturnity_reusable_components 7.24.3-EPDM-11143.1 → 7.24.3-EPDM-11320.1

package/src/components/infoText/index.vue

@@ -1,160 +1,161 @@
 <template>
-  <component-wrapper>
-    <icon-wrapper :size="size">
-      <icon-img
+  <ComponentWrapper>
+    <IconWrapper :size="size">
+      <IconImg
         @click.prevent="toggleShowInfo()"
         @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
         @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
       >
-        <icon :size="size" name="info" :color="iconColor" cursor="pointer" />
-      </icon-img>
-      <text-overlay
+        <RCIcon :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"
         :width="width"
-        :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
-        :alignArrow="alignArrow"
-        :iconSize="size"
-        ><slot />
+      >
+        <slot></slot>
         <span v-html="text"></span>
-      </text-overlay>
-    </icon-wrapper>
-  </component-wrapper>
+      </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 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: 400px;
-  font-size: 13px;
-  font-weight: 400;
-  line-height: normal;
-  border-radius: 4px;
-  z-index: 99;
-  color: ${(props) => props.theme.colors.white};
+  // 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 RCIcon from '../icon'
 
-  :before {
-    content: '';
-    background-color: ${(props) => props.theme.colors.black};
+  const textAttrs = {
+    iconSize: String,
+    alignArrow: String,
+    width: String,
+    halfComputedTextInfoWidth: Number,
+  }
+  const TextOverlay = styled('div', textAttrs)`
     position: absolute;
-    top: 2px;
+    top: ${(props) => 'calc(' + props.iconSize + ' + 15px)'};
     ${(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);
-  }
+        ? '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: 400px;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: normal;
+    border-radius: 4px;
+    z-index: 99;
+    color: ${(props) => props.theme.colors.white};
 
-  span a {
-    color: #2cc0eb;
-  }
-`
+    :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 iconAttrs = { size: String }
+  const IconWrapper = styled('div', iconAttrs)`
+    position: relative;
+    height: ${(props) => props.size};
+  `
 
-const IconImg = styled.div`
-  line-height: 0;
-`
+  const IconImg = styled.div`
+    line-height: 0;
+  `
 
-const ComponentWrapper = styled.div`
-  display: inline-block;
-`
+  const ComponentWrapper = styled.div`
+    display: inline-block;
+  `
 
-export default {
-  name: 'info-text',
-  components: {
-    IconWrapper,
-    TextOverlay,
-    ComponentWrapper,
-    IconImg,
-    icon
-  },
-  props: {
-    text: {
-      required: false
+  export default {
+    name: 'InfoText',
+    components: {
+      IconWrapper,
+      TextOverlay,
+      ComponentWrapper,
+      IconImg,
+      RCIcon,
     },
-    size: {
-      required: false,
-      default: '14px'
+    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',
+      },
     },
-    alignArrow: {
-      required: false,
-      default: 'center'
+    data() {
+      return {
+        showInfo: false,
+      }
     },
-    openTrigger: {
-      required: false,
-      default: 'onHover' // onHover, onClick
+    computed: {
+      iconColor() {
+        return theme.colors.mediumGray
+      },
+      halfComputedTextInfoWidth() {
+        return parseInt(this.width) / 2
+      },
     },
-    width: {
-      required: false,
-      default: '165px'
-    }
-  },
-  methods: {
-    toggleShowInfo() {
-      this.showInfo = !this.showInfo
+    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
+        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()
+      },
     },
-    halfComputedTextInfoWidth() {
-      return parseInt(this.width) / 2
-    }
   }
-}
 </script>

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

@@ -1,7 +1,7 @@
-import Checkbox from "./index.vue"
+import Checkbox from './index.vue'
 
 export default {
-  title: "Checkbox",
+  title: 'Checkbox',
   component: Checkbox,
   // argTypes: {},
 }
@@ -29,29 +29,29 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({})
 Default.args = {
   isChecked: true,
-  size: "medium", // "small" or "medium"
+  size: 'medium', // "small" or "medium"
   isDisabled: false,
 }
 
 export const Small = Template.bind({})
 Small.args = {
   isChecked: true,
-  size: "small", // "small" or "medium"
+  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",
+  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"
+  size: 'medium', // "small" or "medium"
   isDisabled: true,
 }