@eturnity/eturnity_reusable_components 7.22.4-EPDM-10528.0 → 7.22.4-EPDM-10461.3

package/babel.config.js

@@ -1,3 +1,5 @@
 module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset']
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.22.4-EPDM-10528.0",
+  "version": "7.22.4-EPDM-10461.3",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.12.16",
+    "@babel/eslint-parser": "7.12.16",
     "@vue/cli-plugin-babel": "5.0.8",
     "@vue/cli-plugin-eslint": "5.0.8",
     "@vue/cli-service": "5.0.8",

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

@@ -0,0 +1,65 @@
+<template>
+  <Modal :is-open="isOpen" @on-close="closeModal">
+    <modalContainer>
+      <modalTitle v-if="$slots.title">
+        <slot name="title"></slot>
+      </modalTitle>
+      <textContainer v-if="$slots.body">
+        <slot name="body"></slot>
+      </textContainer>
+      <buttonContainer v-if="$slots.buttons">
+        <slot name="buttons"></slot>
+      </buttonContainer>
+    </modalContainer>
+  </Modal>
+</template>
+<script>
+import styled from 'vue3-styled-components'
+import { mapActions, mapState } from 'vuex'
+import Modal from '../modal'
+const modalContainer = styled.div`
+  width: 450px;
+  min-height: 205px;
+  padding: 40px 40px 30px 40px;
+`
+const modalTitle = styled.div`
+  color: ${(props) => props.theme.colors.black};
+  font-family: ${(props) => props.theme.fonts.mainFont};
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 120%;
+  text-transform: uppercase;
+`
+const buttonContainer = styled.div`
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 20px;
+`
+const textContainer = styled.div`
+  color: ${(props) => props.theme.colors.black};
+  font-family: ${(props) => props.theme.fonts.mainFont};
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  padding: 30px 0px;
+  white-space: pre-wrap;
+`
+export default {
+  name: 'actionModal',
+  props: ['isOpen'],
+  components: {
+    Modal,
+    modalContainer,
+    modalTitle,
+    buttonContainer,
+    textContainer
+  },
+  methods: {
+    closeModal() {
+      this.$emit('on-close')
+    }
+  }
+}
+</script>

package/src/components/banner/banner/banner.stories.js

@@ -0,0 +1,31 @@
+import Modal from "./index.vue";
+
+export default {
+  title: "Modal",
+  component: Modal,
+  // argTypes: {},
+};
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { Modal },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<modal v-bind="$props" />',
+
+  // import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
+  // This is a more flexible modal box, where the parent can decide how the body of the modal looks
+  // To use:
+  // <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :preventOutsideClose="true" :isLoading="true" :hideClose="true">
+  //   <div>Data....</div>
+  // </modal>
+});
+
+export const Default = Template.bind({
+  isOpen: true,
+  preventOutsideClose: true,
+  isLoading: false,
+  hideClose: false,
+  backdrop: 'dark',
+})
+Default.args = {};

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

@@ -0,0 +1,188 @@
+<template>
+  <page-wrapper
+    :position="position"
+    :isOpen="isOpen"
+    :class="{ visible: isOpen, hidden: !isOpen }"
+    :backdrop="backdrop"
+  >
+    <modal-container @click="onClickModalContainer">
+      <spinner v-if="isLoading" size="50px" :limitedToModal="true" />
+      <content-container :visible="!isLoading">
+        <slot />
+      </content-container>
+      <close-button v-if="!hideClose" @click="onCloseModal()" class="close" />
+    </modal-container>
+  </page-wrapper>
+</template>
+
+<script>
+// Rules: (as defined in https://e-turnity.atlassian.net/browse/EPDM-9694)
+// 1. On clicking the “escape” key, close the modal onCloseModal()
+// 2. Always prevent outside close
+// import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
+// This is a more flexible modal box, where the parent can decide how the body of the modal looks
+// To use:
+// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true" :stopPropagation="false">
+//   <div>Data....</div>
+// </modal>
+
+import styled from 'vue3-styled-components'
+import CloseButton from '../../buttons/closeButton'
+import Spinner from '../../spinner'
+
+const contentAttrs = { visible: Boolean }
+const ContentContainer = styled('div', contentAttrs)`
+  visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
+`
+
+const pageAttrs = { isOpen: Boolean, backdrop: String, position: String }
+const PageWrapper = styled('div', pageAttrs)`
+  position: ${(props) => props.position}
+  display: grid;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: ${(props) =>
+    props.backdrop == 'dark'
+      ? 'rgba(0, 0, 0, 0.4)'
+      : 'rgba(255, 255, 255, 0.9)'};
+  z-index: 99999;
+  overflow: auto;
+
+  &.visible {
+    visibility: visible;
+    opacity: 1;
+    transition: visibility 0s linear 0s, opacity 300ms;
+  }
+
+  &.hidden {
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0s linear 300ms, opacity 300ms;
+  }
+
+  @media (max-width: 425px) {
+    background: white;
+  }
+`
+
+const ModalContainer = styled.div`
+  align-self: center;
+  justify-self: center;
+  position: relative;
+  box-shadow: 0px 4px 4px 3px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  background: white;
+  margin: 0 auto;
+  overflow: auto;
+  max-width: 95%;
+  max-height: 95%;
+  min-width: 100px;
+  min-height: 100px;
+
+  ::-webkit-scrollbar {
+    width: 0.3em;
+    height: 100%;
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
+
+  /* Make scrollbar visible when needed */
+  ::-webkit-scrollbar-thumb {
+    background-color: ${(props) => props.theme.colors.grey3};
+  }
+
+  /* Make scrollbar track visible when needed */
+  ::-webkit-scrollbar-track {
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
+
+  .close {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+
+    @media (max-width: 425px) {
+      right: 14px;
+      top: 12px;
+      background: white;
+      position: fixed;
+      z-index: 99;
+    }
+  }
+
+  @media (max-width: 425px) {
+    width: 100%;
+    height: 100%;
+    box-shadow: none;
+  }
+`
+
+export default {
+  name: 'modal',
+  components: {
+    PageWrapper,
+    ModalContainer,
+    CloseButton,
+    Spinner,
+    ContentContainer
+  },
+  props: {
+    isOpen: {
+      required: true,
+      default: false
+    },
+    isLoading: {
+      required: false,
+      default: false
+    },
+    hideClose: {
+      required: false,
+      default: false
+    },
+    backdrop: {
+      required: false,
+      default: 'white'
+    },
+    position: {
+      required: false,
+      default: 'fixed'
+    },
+    stopPropagation: {
+      type: Boolean,
+      default: true
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('keydown', this.handleKeyDown)
+  },
+  methods: {
+    onCloseModal() {
+      this.$emit('on-close')
+    },
+    handleKeyDown({ key }) {
+      if (key === 'Escape') {
+        this.onCloseModal()
+      }
+    },
+    onClickModalContainer(event) {
+      if (this.stopPropagation) {
+        event.stopPropagation()
+      }
+    }
+  },
+  watch: {
+    isOpen: {
+      immediate: true,
+      handler(isOpen) {
+        document.body.style.overflow = isOpen ? 'hidden' : ''
+        if (isOpen) {
+          window.addEventListener('keydown', this.handleKeyDown)
+        } else {
+          window.removeEventListener('keydown', this.handleKeyDown)
+        }
+      }
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,69 @@
+<template>
+  <ActionModal :is-open="isOpen" @on-close="closeModal">
+    <modalContainer>
+      <template name="title">
+        <slot name="title"></slot>
+      </template>
+      <template name="body">
+        <slot name="body"></slot>
+      </template>
+      <template name="buttons">
+        <buttonContainer>
+          <Button type="primary" :text="$gettext('Got it')" minWidth="150px" @click="closeModal" />
+        </buttonContainer>
+      </template>
+
+    </modalContainer>
+  </ActionModal>
+</template>
+<script>
+
+import styled from 'vue3-styled-components'
+import ActionModal from '../actionModal'
+
+const modalContainer = styled.div`
+  width: 450px;
+  min-height: 205px;
+  padding: 40px 40px 30px 40px;
+`
+const modalTitle = styled.div`
+  color: ${(props) => props.theme.colors.black};
+  font-family: ${(props) => props.theme.fonts.mainFont};
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 120%;
+  text-transform: uppercase;
+`
+const buttonContainer = styled.div`
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 20px;
+`
+const textContainer = styled.div`
+  color: ${(props) => props.theme.colors.black};
+  font-family: ${(props) => props.theme.fonts.mainFont};
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  padding: 30px 0px;
+  white-space: pre-wrap;
+`
+export default {
+  name: 'InfoModal',
+  props: ['isOpen'],
+  components: {
+    Modal,
+    modalContainer,
+    modalTitle,
+    buttonContainer,
+    textContainer
+  },
+  methods: {
+    closeModal() {
+      this.$emit('on-close')
+    }
+  }
+}
+</script>

package/src/components/modals/actionModal/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <Modal :is-open="isOpen" @on-close="closeModal">
+    <modalContainer>
+      <modalTitle v-if="$slots.title">
+        <slot name="title"></slot>
+      </modalTitle>
+      <textContainer v-if="$slots.body">
+        <slot name="body"></slot>
+      </textContainer>
+      <buttonContainer v-if="$slots.buttons">
+        <slot name="buttons"></slot>
+      </buttonContainer>
+    </modalContainer>
+  </Modal>
+</template>
+<script>
+import styled from 'vue3-styled-components'
+import { mapActions, mapState } from 'vuex'
+import Modal from '../modal'
+const modalContainer = styled.div`
+  width: 450px;
+  min-height: 205px;
+  padding: 40px 40px 30px 40px;
+`
+const modalTitle = styled.div`
+  color: ${(props) => props.theme.colors.black};
+  font-family: ${(props) => props.theme.fonts.mainFont};
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 120%;
+  text-transform: uppercase;
+`
+const buttonContainer = styled.div`
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 20px;
+`
+const textContainer = styled.div`
+  color: ${(props) => props.theme.colors.black};
+  font-family: ${(props) => props.theme.fonts.mainFont};
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  padding: 30px 0px;
+  white-space: pre-wrap;
+`
+export default {
+  name: 'actionModal',
+  props: ['isOpen'],
+  components: {
+    Modal,
+    modalContainer,
+    modalTitle,
+    buttonContainer,
+    textContainer
+  },
+  methods: {
+    closeModal() {
+      this.$emit('on-close')
+    }
+  }
+}
+</script>

package/src/components/modals/infoModal/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <ActionModal :is-open="isOpen" @on-close="closeModal">
+    <modalContainer>
+      <template #title>
+        <slot name="title" />
+      </template>
+      <template #body>
+        <slot name="body" />
+      </template>
+      <template #buttons>
+        <buttonContainer>
+          <Button type="primary" :text="$gettext('Got it')" minWidth="150px" @click="closeModal" />
+        </buttonContainer>
+      </template>
+
+    </modalContainer>
+  </ActionModal>
+</template>
+<script>
+
+import styled from 'vue3-styled-components'
+import ActionModal from '../actionModal'
+
+const modalContainer = styled.div`
+  width: 450px;
+  min-height: 205px;
+  padding: 40px 40px 30px 40px;
+`
+const modalTitle = styled.div`
+  color: ${(props) => props.theme.colors.black};
+  font-family: ${(props) => props.theme.fonts.mainFont};
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 120%;
+  text-transform: uppercase;
+`
+const buttonContainer = styled.div`
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 20px;
+`
+const textContainer = styled.div`
+  color: ${(props) => props.theme.colors.black};
+  font-family: ${(props) => props.theme.fonts.mainFont};
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  padding: 30px 0px;
+  white-space: pre-wrap;
+`
+export default {
+  name: 'InfoModal',
+  props: ['isOpen'],
+  components: {
+    Modal,
+    modalContainer,
+    modalTitle,
+    buttonContainer,
+    textContainer
+  },
+  methods: {
+    closeModal() {
+      this.$emit('on-close')
+    }
+  }
+}
+</script>