@eturnity/eturnity_reusable_components 7.22.4-qa-25.0 → 7.22.4-qa-25.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.22.4-qa-25.0",
+  "version": "7.22.4-qa-25.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/icon/index.vue

@@ -4,6 +4,7 @@
       :color="color"
       :background-color="backgroundColor"
       :hovered-color="hoveredColor"
+      :animation="animation"
     >
       <i v-html="icon.html" />
     </icon-image>
@@ -56,6 +57,10 @@ const props = defineProps({
   backgroundColor: {
     required: false,
     default: null
+  },
+  animation: {
+    required: false,
+    default: 'none'
   }
 })
 
@@ -94,8 +99,10 @@ const StrikedLine = styled('div', { color: String })`
 const IconImage = styled('div', {
   color: String,
   backgroundColor: String,
-  hoveredColor: String
+  hoveredColor: String,
+  animation: String
 })`
+  animation: ${(props) => props.animation};
   width: 100%;
   svg {
     width: 100%;
@@ -113,6 +120,11 @@ const IconImage = styled('div', {
   &:hover + div {
     background-color: ${(props) => props.hoveredColor};
   }
+  @keyframes fade {
+    50% {
+      opacity: 0.3;
+    }
+  }
 `
 
 const icon = reactive({ html: '' })

package/src/components/iconWrapper/index.vue

@@ -17,6 +17,7 @@
       :color="iconColor"
       :hoveredColor="hoveredIconColor"
       :isStriked="isStriked"
+      :animation="isLoading ? 'fade 3s infinite' : 'none'"
     />
 
     <caret v-if="hasCaret">
@@ -44,6 +45,7 @@
 
 import styled from 'vue3-styled-components'
 import icon from '../icon'
+
 const wrapperAttrs = {
   color: String,
   isHovered: Boolean,
@@ -147,6 +149,10 @@ export default {
     isStriked: {
       required: false,
       default: false
+    },
+    isLoading: {
+      required: false,
+      default: false
     }
   }
 }