@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.2 → 7.24.3-qa-elisee-7.32.0

package/src/components/icon/index.vue

@@ -1,139 +1,139 @@
 <template>
-  <Wrapper :cursor="cursor" :disabled="disabled" :size="size">
-    <IconImage
-      :animation="animation"
-      :background-color="backgroundColor"
+  <wrapper :disabled="disabled" :size="size" :cursor="cursor">
+    <icon-image
       :color="color"
+      :background-color="backgroundColor"
       :hovered-color="hoveredColor"
+      :animation="animation"
     >
-      <i v-html="icon.html"></i>
-    </IconImage>
-    <StrikedLine v-if="isStriked" :color="color" />
-  </Wrapper>
+      <i v-html="icon.html" />
+    </icon-image>
+    <striked-line v-if="isStriked" :color="color"></striked-line>
+  </wrapper>
 </template>
 
 <script setup>
-  // 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
-  //   cursor="default"
-  //   isStriked = "true"
-  // />
+// 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
+//   cursor="default"
+//   isStriked = "true"
+// />
 
-  import { onMounted, reactive, watch } from 'vue'
-  import styled from 'vue3-styled-components'
-  import { fetchIcon } from './iconCache'
+import { onMounted, reactive, watch } from 'vue'
+import styled from 'vue3-styled-components'
+import { fetchIcon } from './iconCache'
 
-  const props = defineProps({
-    disabled: {
-      required: false,
-      default: false,
-    },
-    name: {
-      required: true,
-    },
-    color: {
-      required: false,
-    },
-    hoveredColor: {
-      required: false,
-    },
-    size: {
-      required: false,
-      default: '30px',
-    },
-    cursor: {
-      required: false,
-      default: null,
-    },
-    isStriked: {
-      required: false,
-      default: false,
-    },
-    backgroundColor: {
-      required: false,
-      default: null,
-    },
-    animation: {
-      required: false,
-      default: 'none',
-    },
-  })
+const props = defineProps({
+  disabled: {
+    required: false,
+    default: false
+  },
+  name: {
+    required: true
+  },
+  color: {
+    required: false
+  },
+  hoveredColor: {
+    required: false
+  },
+  size: {
+    required: false,
+    default: '30px'
+  },
+  cursor: {
+    required: false,
+    default: null
+  },
+  isStriked: {
+    required: false,
+    default: false
+  },
+  backgroundColor: {
+    required: false,
+    default: null
+  },
+  animation: {
+    required: false,
+    default: 'none'
+  }
+})
 
-  const Wrapper = styled('div', {
-    size: String,
-    disabled: Boolean,
-    cursor: String,
-  })`
-    display: flex;
-    position: relative;
-    align-content: center;
-    justify-content: center;
-    width: ${(props) => props.size};
-    height: ${(props) => props.size};
-    min-width: ${(props) => props.size};
-    min-height: ${(props) => props.size};
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : props.cursor)};
-    line-height: 0;
-  `
+const Wrapper = styled('div', {
+  size: String,
+  disabled: Boolean,
+  cursor: String
+})`
+  display: flex;
+  position: relative;
+  align-content: center;
+  justify-content: center;
+  width: ${(props) => props.size};
+  height: ${(props) => props.size};
+  min-width: ${(props) => props.size};
+  min-height: ${(props) => props.size};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : props.cursor)};
+  line-height: 0;
+`
 
-  const StrikedLine = styled('div', { color: String })`
-    display: flex;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    align-content: center;
-    justify-content: center;
-    width: 143%;
-    height: 8%;
-    background-color: ${({ theme, color }) => theme.colors[color] || color};
-    min-height: 0;
-    line-height: 0;
-    transform-origin: 0% 100%;
-    transform: rotate(-45deg);
-  `
-  const IconImage = styled('div', {
-    color: String,
-    backgroundColor: String,
-    hoveredColor: String,
-    animation: String,
-  })`
-    animation: ${(props) => props.animation};
+const StrikedLine = styled('div', { color: String })`
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  align-content: center;
+  justify-content: center;
+  width: 143%;
+  height: 8%;
+  background-color: ${({ theme, color }) => theme.colors[color] || color};
+  min-height: 0;
+  line-height: 0;
+  transform-origin: 0% 100%;
+  transform: rotate(-45deg);
+`
+const IconImage = styled('div', {
+  color: String,
+  backgroundColor: String,
+  hoveredColor: String,
+  animation: String
+})`
+  animation: ${(props) => props.animation};
+  width: 100%;
+  svg {
     width: 100%;
-    svg {
-      width: 100%;
-      height: 100%;
-      background-color: ${(props) =>
-        props.backgroundColor ? props.backgroundColor : 'transparent'};
-      padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
-    }
-    svg path {
-      ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
-    }
-    &:hover > svg path {
-      ${props.hoveredColor && `fill: ${props.hoveredColor};`}
-    }
-    &:hover + div {
-      background-color: ${(props) => props.hoveredColor};
-    }
-    @keyframes fade {
-      50% {
-        opacity: 0.3;
-      }
+    height: 100%;
+    background-color: ${(props) =>
+      props.backgroundColor ? props.backgroundColor : 'transparent'};
+    padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
+  }
+  svg path {
+    ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
+  }
+  &:hover > svg path {
+    ${props.hoveredColor && `fill: ${props.hoveredColor};`}
+  }
+  &:hover + div {
+    background-color: ${(props) => props.hoveredColor};
+  }
+  @keyframes fade {
+    50% {
+      opacity: 0.3;
     }
-  `
+  }
+`
 
-  const icon = reactive({ html: '' })
+const icon = reactive({ html: '' })
 
-  const loadSvg = async () => {
-    icon.html = await fetchIcon(props.name.toLowerCase())
-  }
+const loadSvg = async () => {
+  icon.html = await fetchIcon(props.name.toLowerCase())
+}
 
-  onMounted(() => loadSvg())
+onMounted(() => loadSvg())
 
-  watch(() => props.name, loadSvg)
+watch(() => props.name, loadSvg)
 </script>

package/src/components/iconWrapper/index.vue

@@ -1,179 +1,179 @@
 <template>
   <Wrapper
-    :background-color="backgroundColor"
-    :border-radius="borderRadius"
-    :color="iconColor"
-    :data-id="dataId"
     :disabled="disabled"
-    :has-border="hasBorder"
-    :hovered-background-color="hoveredBackgroundColor"
-    :is-hovered="isHovered"
-    :no-cursor="noCursor"
     :size="size"
+    :backgroundColor="backgroundColor"
+    :borderRadius="borderRadius"
+    :hasBorder="hasBorder"
+    :color="iconColor"
+    :hoveredBackgroundColor="hoveredBackgroundColor"
+    :isHovered="isHovered"
+    :data-id="dataId"
+    :noCursor="noCursor"
   >
-    <Icon
-      :animation="isLoading ? 'fade 3s infinite' : 'none'"
-      :color="iconColor"
+    <icon
       :disabled="disabled"
-      :hovered-color="hoveredIconColor"
-      :is-striked="isStriked"
-      :name="name"
       :size="iconSize"
+      :name="name"
+      :color="iconColor"
+      :hoveredColor="hoveredIconColor"
+      :isStriked="isStriked"
+      :animation="isLoading ? 'fade 3s infinite' : 'none'"
     />
 
-    <CaretIcon v-if="hasCaret">
-      <IconWrapper
-        border-radius="1px"
+    <caret v-if="hasCaret">
+      <iconWrapper
         :disabled="disabled"
-        :hovered-background-color="hoveredIconColor"
-        :icon-color="iconColor"
-        name="arrow_down"
         size="10px"
+        name="arrow_down"
+        :iconColor="iconColor"
+        :hoveredBackgroundColor="hoveredIconColor"
+        borderRadius="1px"
       />
-    </CaretIcon>
-    <LockContainer v-if="hasLock">
-      <RCIcon color="yellow" name="lock" size="9px" />
-    </LockContainer>
+    </caret>
+    <lockContainer v-if="hasLock">
+      <icon size="9px" name="lock" color="yellow" />
+    </lockContainer>
   </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 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 'vue3-styled-components'
-  import RCIcon from '../icon'
+import styled from 'vue3-styled-components'
+import icon from '../icon'
 
-  const wrapperAttrs = {
-    color: String,
-    isHovered: Boolean,
-    borderRadius: String,
-    disabled: Boolean,
-    size: String,
-    backgroundColor: String,
-    hoveredBackgroundColor: String,
-    hasBorder: Boolean,
-    noCursor: Boolean,
-  }
-  const LockContainer = styled.div`
-    position: absolute;
-    bottom: 6px;
-    right: 6px;
-  `
-  const Wrapper = styled('div', wrapperAttrs)`
-    position: relative;
-    display: inline-flex;
-    width: ${(props) => props.size};
-    height: ${(props) => props.size};
-    border: ${(props) =>
-      props.hasBorder
-        ? 'solid 1px ' + props.theme.colors[props.color] || props.color
-        : ''};
-    justify-content: center;
-    align-items: center;
-    cursor: ${(props) =>
-      props.noCursor ? 'auto' : props.disabled ? 'not-allowed' : 'pointer'};
+const wrapperAttrs = {
+  color: String,
+  isHovered: Boolean,
+  borderRadius: String,
+  disabled: Boolean,
+  size: String,
+  backgroundColor: String,
+  hoveredBackgroundColor: String,
+  hasBorder: Boolean,
+  noCursor: Boolean
+}
+const lockContainer = styled.div`
+  position: absolute;
+  bottom: 6px;
+  right: 6px;
+`
+const Wrapper = styled('div', wrapperAttrs)`
+  position: relative;
+  display: inline-flex;
+  width: ${(props) => props.size};
+  height: ${(props) => props.size};
+  border: ${(props) =>
+    props.hasBorder
+      ? 'solid 1px ' + props.theme.colors[props.color] || props.color
+      : ''};
+  justify-content: center;
+  align-items: center;
+  cursor: ${(props) =>
+    props.noCursor ? 'auto' : 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.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 CaretIcon = styled.div`
-    position: absolute;
-    bottom: 3px;
-    right: 2px;
-    height: 10px;
-  `
+      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,
-      RCIcon,
-      CaretIcon,
-      LockContainer,
-    },
-    props: {
-      disabled: {
-        required: false,
-        default: false,
-      },
-      name: {
-        required: true,
-      },
-      iconColor: {
-        required: false,
-        default: 'white',
-      },
-      hoveredIconColor: {
-        required: false,
-      },
-      backgroundColor: {
-        required: false,
-      },
-      hasBorder: {
-        required: false,
-      },
-      hoveredBackgroundColor: {
-        required: false,
-        default: 'transparentWhite2',
-      },
-      size: {
-        required: false,
-        default: '32px',
-      },
-      iconSize: {
-        required: false,
-        default: '18px',
-      },
-      hasCaret: {
-        required: false,
-        default: false,
-      },
-      borderRadius: {
-        required: false,
-        default: '6px',
-      },
-      dataId: {
-        type: String,
-        default: '',
-      },
-      isHovered: {
-        required: false,
-        default: false,
-      },
-      isStriked: {
-        required: false,
-        default: false,
-      },
-      isLoading: {
-        required: false,
-        default: false,
-      },
-      noCursor: {
-        required: false,
-        default: false,
-      },
-      hasLock: {
-        required: false,
-        default: false,
-      },
+export default {
+  name: 'iconWrapper',
+  components: {
+    Wrapper,
+    icon,
+    caret,
+    lockContainer
+  },
+  props: {
+    disabled: {
+      required: false,
+      default: false
+    },
+    name: {
+      required: true
     },
+    iconColor: {
+      required: false,
+      default: 'white'
+    },
+    hoveredIconColor: {
+      required: false
+    },
+    backgroundColor: {
+      required: false
+    },
+    hasBorder: {
+      required: false
+    },
+    hoveredBackgroundColor: {
+      required: false,
+      default: 'transparentWhite2'
+    },
+    size: {
+      required: false,
+      default: '32px'
+    },
+    iconSize: {
+      required: false,
+      default: '18px'
+    },
+    hasCaret: {
+      required: false,
+      default: false
+    },
+    borderRadius: {
+      required: false,
+      default: '6px'
+    },
+    dataId: {
+      type: String,
+      default: ''
+    },
+    isHovered: {
+      required: false,
+      default: false
+    },
+    isStriked: {
+      required: false,
+      default: false
+    },
+    isLoading: {
+      required: false,
+      default: false
+    },
+    noCursor: {
+      required: false,
+      default: false
+    },
+    hasLock: {
+      required: false,
+      default: false
+    }
   }
+}
 </script>

package/src/components/infoCard/index.vue

@@ -1,35 +1,35 @@
 <template>
-  <InfoContainer>
-    <RCIcon name="info" size="24px" />
-    <TextContainer>
-      <slot></slot>
-    </TextContainer>
-  </InfoContainer>
+  <info-container>
+    <icon name="info" size="24px" />
+    <text-container>
+      <slot />
+    </text-container>
+  </info-container>
 </template>
 
 <script>
-  import styled from 'vue3-styled-components'
-  import RCIcon from '../icon'
+import styled from 'vue3-styled-components'
+import Icon from '../icon'
 
-  const InfoContainer = styled.div`
-    display: flex;
-    gap: 15px;
-    padding: 20px;
-    border: 1px dashed ${(props) => props.theme.colors.grey4};
-    border-radius: 4px;
-  `
+const InfoContainer = styled.div`
+  display: flex;
+  gap: 15px;
+  padding: 20px;
+  border: 1px dashed ${(props) => props.theme.colors.grey4};
+  border-radius: 4px;
+`
 
-  const TextContainer = styled.div`
-    font-size: 13px;
-    width: 100%;
-  `
+const TextContainer = styled.div`
+  font-size: 13px;
+  width: 100%;
+`
 
-  export default {
-    name: 'InfoCard',
-    components: {
-      RCIcon,
-      InfoContainer,
-      TextContainer,
-    },
+export default {
+  name: 'InfoCard',
+  components: {
+    Icon,
+    InfoContainer,
+    TextContainer
   }
+}
 </script>