@eturnity/eturnity_reusable_components 8.7.5-EPDM-12459.0 → 8.7.5-EPDM-13082-EPDM-9631.0

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

@@ -1,97 +1,97 @@
-<template>
-  <RCModal
-    data-test-id="info_banner_wrapper"
-    :is-open="isOpen"
-    @on-close="closeModal"
-  >
-    <ModalContainer>
-      <ModalTitle v-if="$slots.title" data-test-id="modal_title">
-        <slot name="title"></slot>
-      </ModalTitle>
-      <TextContainer v-if="$slots.body" data-test-id="modal_body">
-        <slot name="body"></slot>
-      </TextContainer>
-      <ButtonContainer>
-        <RCButton
-          data-test-id="modal_buttons"
-          min-width="150px"
-          :text="buttonText"
-          type="primary"
-          @click="closeModal"
-        />
-      </ButtonContainer>
-    </ModalContainer>
-  </RCModal>
-</template>
-<script>
-  import styled from 'vue3-styled-components'
-  import RCModal from '@/components/modals/modal'
-  import RCButton from '@/components/buttons/mainButton'
-
-  const ModalContainer = styled.div`
-    width: 450px;
-    display: flex;
-    flex-direction: column;
-    min-height: 205px;
-    padding: 40px 40px 30px 40px;
-  `
-
-  const ModalTitle = styled.div`
-    color: ${(props) => props.theme.colors.black};
-    font-family: inherit;
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 120%;
-    text-transform: uppercase;
-  `
-  const ButtonContainer = styled.div`
-    display: inline-flex;
-    flex-grow: 1;
-    align-items: flex-end;
-    gap: 20px;
-  `
-  const TextContainer = styled.div`
-    color: ${(props) => props.theme.colors.black};
-    font-family: inherit;
-    font-size: 13px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    padding: 30px 0px;
-    white-space: pre-wrap;
-  `
-  export default {
-    name: 'InfoModal',
-    components: {
-      ModalContainer,
-      ModalTitle,
-      TextContainer,
-      ButtonContainer,
-      RCModal,
-      RCButton,
-    },
-    props: {
-      isOpen: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
-      buttonLabel: {
-        default: null,
-        type: String,
-      },
-    },
-    computed: {
-      buttonText() {
-        //work around for storybook not finding the $gettext function
-        return this.buttonLabel || this.$gettext('Got it')
-      },
-    },
-    methods: {
-      closeModal() {
-        this.$emit('on-close')
-      },
-    },
-  }
-</script>
+<template>
+  <RCModal
+    data-test-id="info_banner_wrapper"
+    :is-open="isOpen"
+    @on-close="closeModal"
+  >
+    <ModalContainer>
+      <ModalTitle v-if="$slots.title" data-test-id="modal_title">
+        <slot name="title"></slot>
+      </ModalTitle>
+      <TextContainer v-if="$slots.body" data-test-id="modal_body">
+        <slot name="body"></slot>
+      </TextContainer>
+      <ButtonContainer>
+        <RCButton
+          data-test-id="modal_buttons"
+          min-width="150px"
+          :text="buttonText"
+          type="primary"
+          @click="closeModal"
+        />
+      </ButtonContainer>
+    </ModalContainer>
+  </RCModal>
+</template>
+<script>
+  import styled from 'vue3-styled-components'
+  import RCModal from '@/components/modals/modal'
+  import RCButton from '@/components/buttons/mainButton'
+
+  const ModalContainer = styled.div`
+    width: 450px;
+    display: flex;
+    flex-direction: column;
+    min-height: 205px;
+    padding: 40px 40px 30px 40px;
+  `
+
+  const ModalTitle = styled.div`
+    color: ${(props) => props.theme.colors.black};
+    font-family: inherit;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 120%;
+    text-transform: uppercase;
+  `
+  const ButtonContainer = styled.div`
+    display: inline-flex;
+    flex-grow: 1;
+    align-items: flex-end;
+    gap: 20px;
+  `
+  const TextContainer = styled.div`
+    color: ${(props) => props.theme.colors.black};
+    font-family: inherit;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding: 30px 0px;
+    white-space: pre-wrap;
+  `
+  export default {
+    name: 'InfoModal',
+    components: {
+      ModalContainer,
+      ModalTitle,
+      TextContainer,
+      ButtonContainer,
+      RCModal,
+      RCButton,
+    },
+    props: {
+      isOpen: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      buttonLabel: {
+        default: null,
+        type: String,
+      },
+    },
+    computed: {
+      buttonText() {
+        //work around for storybook not finding the $gettext function
+        return this.buttonLabel || this.$gettext('Got it')
+      },
+    },
+    methods: {
+      closeModal() {
+        this.$emit('on-close')
+      },
+    },
+  }
+</script>

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

@@ -1,131 +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>
+<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>