@eturnity/eturnity_reusable_components 7.48.1-EPDM-12680.25 → 7.48.1-EPDM-12680.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.48.1-EPDM-12680.25",
+  "version": "7.48.1-EPDM-12680.26",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/checkmark.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.0686 17.0686C20.9771 13.1601 20.9771 6.83992 17.0686 2.93139C13.1601 -0.977131 6.83992 -0.977131 2.93139 2.93139C-0.977131 6.83992 -0.977131 13.1601 2.93139 17.0686C6.83992 20.9771 13.1601 20.9771 17.0686 17.0686ZM6.42412 8.50312L8.66944 10.7484L13.5759 5.842L15.3222 7.58836L10.4158 12.4948L8.66944 14.158L6.92308 12.4948L4.67775 10.2495L6.42412 8.50312Z" fill="white"/>
+</svg>

package/src/components/banner/notificationBanner/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <PageContainer v-if="showBanner">
+    <BannerContainer
+      :background-color="backgroundColor"
+      :text-color="textColor"
+    >
+      <IconContainer>
+        <RCIcon color="white" :name="iconName" size="20px" />
+      </IconContainer>
+      <TextContainer>
+        <TextContent>
+          {{ mainText }}
+        </TextContent>
+      </TextContainer>
+      <ButtonContainer>
+        <MainButton
+          :custom-color="theme.colors.white"
+          :font-color="theme.colors.black"
+          :text="buttonText"
+          @click="$emit('on-button-click')"
+        />
+      </ButtonContainer>
+    </BannerContainer>
+  </PageContainer>
+</template>
+
+<script>
+  // import NotificationBanner from "@eturnity/eturnity_reusable_components/src/components/banner/notificationBanner"
+  import styled from 'vue3-styled-components'
+  import RCIcon from '../../icon'
+  import MainButton from '../../buttons/mainButton'
+  import theme from '@/assets/theme'
+
+  const PageContainer = styled.div`
+    position: fixed;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 999999;
+  `
+
+  const bannerAttrs = { backgroundColor: String, textColor: String }
+  const BannerContainer = styled('div', bannerAttrs)`
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: 20px;
+    padding: 10px 20px;
+    border-radius: 4px;
+    align-items: center;
+    justify-content: center;
+    background-color: ${(props) => props.theme.colors[props.backgroundColor]};
+    color: ${(props) => props.theme.colors[props.textColor]};
+    font-size: 14px;
+  `
+
+  const IconContainer = styled.div``
+
+  const TextContainer = styled.div``
+
+  const TextContent = styled.div`
+    line-height: 150%;
+  `
+
+  const ButtonContainer = styled.div`
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    justify-content: center;
+  `
+
+  export default {
+    name: 'NotificationBanner',
+    components: {
+      PageContainer,
+      BannerContainer,
+      RCIcon,
+      IconContainer,
+      TextContainer,
+      TextContent,
+      ButtonContainer,
+      MainButton,
+    },
+    props: {
+      backgroundColor: {
+        type: String,
+        default: 'green',
+        required: false,
+      },
+      textColor: {
+        type: String,
+        default: 'white',
+        required: false,
+      },
+      iconName: {
+        type: String,
+        default: 'checkmark',
+        required: false,
+      },
+      mainText: {
+        type: String,
+        required: true,
+      },
+      buttonText: {
+        type: String,
+        required: true,
+      },
+      isOpen: {
+        type: Boolean,
+        default: false,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        theme,
+        showBanner: false,
+      }
+    },
+    watch: {
+      isOpen(newVal) {
+        if (newVal) {
+          this.showBanner = true
+          setTimeout(() => {
+            this.showBanner = false
+            this.$emit('on-close')
+          }, 10000)
+        }
+      },
+    },
+  }
+</script>

package/src/components/inputs/checkbox/index.vue

@@ -163,7 +163,7 @@
   const LabelText = styled.div`
     font-size: 13px;
     display: grid;
-    align-items: flex-start;
+    align-items: center;
     min-height: 18px;
   `