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

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

@@ -1,131 +0,0 @@
-<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/spinnerGif/index.vue

@@ -1,98 +0,0 @@
-<template>
-  <SpinnerContainer v-if="fullWidth" data-test-id="spinner_full_container">
-    <Container>
-      <SpinnerWrapper data-test-id="spinner_full_wrapper">
-        <img
-          :class="{ white: isWhite }"
-          data-test-id="spinner_full_icon"
-          src="../../assets/gifs/spinner.gif"
-          :style="{ width: size, height: size }"
-        />
-      </SpinnerWrapper>
-    </Container>
-  </SpinnerContainer>
-  <Container
-    v-else
-    data-test-id="spinner_container"
-    :limited-to-modal="limitedToModal"
-  >
-    <SpinnerWrapper data-test-id="spinner_wrapper">
-      <img
-        :class="{ white: isWhite }"
-        data-test-id="spinner_full_icon"
-        src="../../assets/gifs/spinner.gif"
-        :style="{ width: size, height: size }"
-      />
-    </SpinnerWrapper>
-  </Container>
-</template>
-
-<script>
-  // import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
-  // <spinner size="30px" />
-  import styled from 'vue3-styled-components'
-  import SpinnerSvg from '../../assets/icons/black_spinner.svg'
-
-  const SpinnerContainer = styled.div`
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.8);
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    z-index: 100;
-  `
-  const containerAttrs = { limitedToModal: Boolean }
-  const Container = styled('div', containerAttrs)`
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    position: ${(props) => (props.limitedToModal ? 'absolute' : 'inherit')};
-    height: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
-    width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
-  `
-
-  const SpinnerWrapper = styled.div`
-    width: ${(props) => (props.size ? props.size : '60px')};
-    height: auto;
-
-    .white {
-      filter: brightness(0) invert(1);
-    }
-  `
-
-  export default {
-    name: 'SpinnerComponent',
-    components: {
-      Container,
-      SpinnerWrapper,
-      SpinnerContainer,
-      SpinnerSvg,
-    },
-    props: {
-      fullWidth: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-      limitedToModal: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-      size: {
-        required: false,
-        default: '60px',
-        type: String,
-      },
-      isWhite: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-    },
-  }
-</script>