@eturnity/eturnity_reusable_components 7.12.6-EPDM-7951.3 → 7.12.7

package/src/components/iconWrapper/index.vue

@@ -1,153 +1,156 @@
-<template>
-  <Wrapper
-    :disabled="disabled"
-    :size="size"
-    :backgroundColor="backgroundColor"
-    :borderRadius="borderRadius"
-    :hasBorder="hasBorder"
-    :color="iconColor"
-    :hoveredBackgroundColor="hoveredBackgroundColor"
-    :isHovered="isHovered"
-    :data-id="dataId"
-  >
-    <icon
-      :disabled="disabled"
-      :size="iconSize"
-      :name="name"
-      :color="iconColor"
-      :hoveredColor="hoveredIconColor"
-      :isStriked="isStriked"
-    />
-
-    <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 '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
-}
-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.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
-    },
-    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
-    }
-  }
-}
-</script>
+<template>
+  <Wrapper
+    :disabled="disabled"
+    :size="size"
+    :backgroundColor="backgroundColor"
+    :borderRadius="borderRadius"
+    :hasBorder="hasBorder"
+    :color="iconColor"
+    :hoveredBackgroundColor="hoveredBackgroundColor"
+    :isHovered="isHovered"
+    :data-id="dataId"
+  >
+    <icon
+      :disabled="disabled"
+      :size="iconSize"
+      :name="name"
+      :color="iconColor"
+      :hoveredColor="hoveredIconColor"
+      :isStriked="isStriked"
+    />
+
+    <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 = {
+  color: String,
+  isHovered: Boolean,
+  borderRadius: String,
+  disabled: Boolean,
+  size: String,
+  backgroundColor: String,
+  hoveredBackgroundColor: String,
+  hasBorder: Boolean
+}
+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.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
+    },
+    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
+    }
+  },
+  data() {
+    return {}
+  }
+}
+</script>

package/src/components/infoCard/index.vue

@@ -1,35 +1,36 @@
-<template>
-  <info-container>
-    <icon name="info" size="24px" />
-    <text-container>
-      <slot />
-    </text-container>
-  </info-container>
-</template>
-
-<script>
-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 TextContainer = styled.div`
-  font-size: 13px;
-  width: 100%;
-`
-
-export default {
-  name: 'InfoCard',
-  components: {
-    Icon,
-    InfoContainer,
-    TextContainer
-  }
-}
-</script>
+<template>
+  <info-container>
+    <icon name="info" size="24px" />
+    <text-container>
+      <slot />
+    </text-container>
+  </info-container>
+</template>
+
+<script>
+import styled from 'vue-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 TextContainer = styled.div`
+  font-size: 13px;
+  width: 100%;
+`
+
+
+export default {
+  name: 'InfoCard',
+  components: {
+    Icon,
+    InfoContainer,
+    TextContainer
+  }
+}
+</script>