@eturnity/eturnity_reusable_components 8.16.8 → 8.16.9-EPDM-13618.0

package/src/components/modals/infoModal/infoModal.stories.js

@@ -1,47 +1,47 @@
-import InfoModal from './index.vue'
-
-export default {
-  title: 'Components/InfoModal',
-  component: InfoModal,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-}
-
-// import InfoModal from "@eturnity/eturnity_reusable_components/src/components/modals/infoModal"
-// This is a reusable modal component that can be used to display information to the user.
-// To use:
-// <InfoModal :isOpen="isOpen" @on-close="$emit('on-close-summary')" >
-//   <template #title>
-//     <h1>Header</h1>
-//   </template>
-//   <template #body>
-//     <p>Body</p>
-//   </template>
-// </InfoModal>
-
-export const Default = {
-  args: {
-    isOpen: true,
-    buttonText: 'Close',
-  },
-  render: (args) => ({
-    components: { InfoModal },
-    setup() {
-      return { args }
-    },
-    template: `
-      <InfoModal v-bind="args">
-        <template #title>Sample title</template>
-        <template #body>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt commodo mollis. Fusce urna felis,
-          malesuada sed elementum et, fermentum ac massa. Integer in massa vel orci fermentum bibendum in ut ante.
-          Donec risus risus, luctus quis ex a, pulvinar placerat lacus. Sed pharetra augue a elit volutpat, eu dignissim
-          ex pretium. Aenean imperdiet, nulla in pharetra rutrum, mauris mauris tincidunt tellus, non tempus quam lorem
-          laoreet lectus.
-        </template>
-      </InfoModal>
-    `,
-  }),
-}
+import InfoModal from './index.vue'
+
+export default {
+  title: 'Components/InfoModal',
+  component: InfoModal,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+// import InfoModal from "@eturnity/eturnity_reusable_components/src/components/modals/infoModal"
+// This is a reusable modal component that can be used to display information to the user.
+// To use:
+// <InfoModal :isOpen="isOpen" @on-close="$emit('on-close-summary')" >
+//   <template #title>
+//     <h1>Header</h1>
+//   </template>
+//   <template #body>
+//     <p>Body</p>
+//   </template>
+// </InfoModal>
+
+export const Default = {
+  args: {
+    isOpen: true,
+    buttonText: 'Close',
+  },
+  render: (args) => ({
+    components: { InfoModal },
+    setup() {
+      return { args }
+    },
+    template: `
+      <InfoModal v-bind="args">
+        <template #title>Sample title</template>
+        <template #body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt commodo mollis. Fusce urna felis,
+          malesuada sed elementum et, fermentum ac massa. Integer in massa vel orci fermentum bibendum in ut ante.
+          Donec risus risus, luctus quis ex a, pulvinar placerat lacus. Sed pharetra augue a elit volutpat, eu dignissim
+          ex pretium. Aenean imperdiet, nulla in pharetra rutrum, mauris mauris tincidunt tellus, non tempus quam lorem
+          laoreet lectus.
+        </template>
+      </InfoModal>
+    `,
+  }),
+}

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

@@ -1,211 +1,211 @@
-<template>
-  <PageWrapper
-    v-if="isOpen"
-    ref="modalRef"
-    :add-padding-top="addPaddingTop"
-    :backdrop="backdrop"
-    class="rc-modal-wrapper"
-    :is-open="isOpen"
-    :position="position"
-  >
-    <ModalContainer
-      v-if="isOpen"
-      :is-loading="isLoading"
-      :overflow="overflowRule"
-      @click="onClickModalContainer"
-    >
-      <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
-      <ContentContainer v-if="!isLoading">
-        <slot></slot>
-      </ContentContainer>
-      <CloseButton
-        v-if="!hideClose && !isLoading"
-        class="close"
-        @click="onCloseModal()"
-      />
-    </ModalContainer>
-  </PageWrapper>
-</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 { ref, provide } from 'vue'
-  import styled from 'vue3-styled-components'
-  import CloseButton from '../../buttons/closeButton'
-  import Spinner from '../../spinner'
-
-  const ContentContainer = styled.div``
-
-  const pageAttrs = {
-    backdrop: String,
-    position: String,
-    addPaddingTop: Boolean,
-  }
-  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: 9999999;
-  overflow: auto;
-  padding-top: ${(props) => (props.addPaddingTop ? '80px' : '0')};
-
-    @media (max-width: 425px) {
-      background: white;
-    }
-  `
-
-  const modalContainerAttrs = { overflow: String, isLoading: Boolean }
-  const ModalContainer = styled('div', modalContainerAttrs)`
-    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: ${(props) => props.overflow};
-    max-width: 95%;
-    max-height: 95%;
-    min-width: ${(props) => (props.isLoading ? '400px' : '100px')};
-    min-height: ${(props) => (props.isLoading ? '500px' : '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,
-      },
-      overflowRule: {
-        required: false,
-        type: String,
-        default: 'auto',
-      },
-      addPaddingTop: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    setup() {
-      const modalRef = ref(null)
-      provide('modalRef', modalRef)
-
-      return {
-        modalRef,
-      }
-    },
-    watch: {
-      isOpen: {
-        immediate: true,
-        handler(isOpen) {
-          document.body.style.overflow = isOpen ? 'hidden' : null
-          if (isOpen) {
-            window.addEventListener('keydown', this.handleKeyDown)
-          } else {
-            window.removeEventListener('keydown', this.handleKeyDown)
-          }
-        },
-      },
-    },
-    beforeUnmount() {
-      document.body.style.overflow = null
-      window.removeEventListener('keydown', this.handleKeyDown)
-    },
-    methods: {
-      onCloseModal() {
-        document.body.style.overflow = null
-        this.$emit('on-close')
-      },
-      handleKeyDown({ key }) {
-        if (key === 'Escape') {
-          this.onCloseModal()
-        }
-      },
-      onClickModalContainer(event) {
-        if (this.stopPropagation) {
-          event.stopPropagation()
-        }
-      },
-    },
-  }
-</script>
+<template>
+  <PageWrapper
+    v-if="isOpen"
+    ref="modalRef"
+    :add-padding-top="addPaddingTop"
+    :backdrop="backdrop"
+    class="rc-modal-wrapper"
+    :is-open="isOpen"
+    :position="position"
+  >
+    <ModalContainer
+      v-if="isOpen"
+      :is-loading="isLoading"
+      :overflow="overflowRule"
+      @click="onClickModalContainer"
+    >
+      <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
+      <ContentContainer v-if="!isLoading">
+        <slot></slot>
+      </ContentContainer>
+      <CloseButton
+        v-if="!hideClose && !isLoading"
+        class="close"
+        @click="onCloseModal()"
+      />
+    </ModalContainer>
+  </PageWrapper>
+</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 { ref, provide } from 'vue'
+  import styled from 'vue3-styled-components'
+  import CloseButton from '../../buttons/closeButton'
+  import Spinner from '../../spinner'
+
+  const ContentContainer = styled.div``
+
+  const pageAttrs = {
+    backdrop: String,
+    position: String,
+    addPaddingTop: Boolean,
+  }
+  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: 9999999;
+  overflow: auto;
+  padding-top: ${(props) => (props.addPaddingTop ? '80px' : '0')};
+
+    @media (max-width: 425px) {
+      background: white;
+    }
+  `
+
+  const modalContainerAttrs = { overflow: String, isLoading: Boolean }
+  const ModalContainer = styled('div', modalContainerAttrs)`
+    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: ${(props) => props.overflow};
+    max-width: 95%;
+    max-height: 95%;
+    min-width: ${(props) => (props.isLoading ? '400px' : '100px')};
+    min-height: ${(props) => (props.isLoading ? '500px' : '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,
+      },
+      overflowRule: {
+        required: false,
+        type: String,
+        default: 'auto',
+      },
+      addPaddingTop: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup() {
+      const modalRef = ref(null)
+      provide('modalRef', modalRef)
+
+      return {
+        modalRef,
+      }
+    },
+    watch: {
+      isOpen: {
+        immediate: true,
+        handler(isOpen) {
+          document.body.style.overflow = isOpen ? 'hidden' : null
+          if (isOpen) {
+            window.addEventListener('keydown', this.handleKeyDown)
+          } else {
+            window.removeEventListener('keydown', this.handleKeyDown)
+          }
+        },
+      },
+    },
+    beforeUnmount() {
+      document.body.style.overflow = null
+      window.removeEventListener('keydown', this.handleKeyDown)
+    },
+    methods: {
+      onCloseModal() {
+        document.body.style.overflow = null
+        this.$emit('on-close')
+      },
+      handleKeyDown({ key }) {
+        if (key === 'Escape') {
+          this.onCloseModal()
+        }
+      },
+      onClickModalContainer(event) {
+        if (this.stopPropagation) {
+          event.stopPropagation()
+        }
+      },
+    },
+  }
+</script>

package/src/components/modals/modal/modal.stories.js

@@ -1,31 +1,31 @@
-import Modal from './index.vue'
-
-export default {
-  title: 'Components/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({})
-Default.args = {
-  isOpen: true,
-  preventOutsideClose: true,
-  isLoading: false,
-  hideClose: false,
-  backdrop: 'dark',
-}
+import Modal from './index.vue'
+
+export default {
+  title: 'Components/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({})
+Default.args = {
+  isOpen: true,
+  preventOutsideClose: true,
+  isLoading: false,
+  hideClose: false,
+  backdrop: 'dark',
+}