@eturnity/eturnity_reusable_components 7.8.1-EPDM-8441.1 → 7.8.2

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

@@ -1,178 +1,178 @@
-<template>
-  <page-wrapper
-    :position="position"
-    :isOpen="isOpen"
-    :class="{ visible: isOpen, hidden: !isOpen }"
-    @click.native="onOutsideClose()"
-    :backdrop="backdrop"
-  >
-    <modal-container @click.stop>
-      <spinner v-if="isLoading" size="50px" :limitedToModal="true" />
-      <content-container :visible="!isLoading">
-        <slot />
-      </content-container>
-      <close-button
-        v-if="!hideClose"
-        @click.native="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')" :preventOutsideClose="true" :isLoading="true" :hideClose="true">
-//   <div>Data....</div>
-// </modal>
-
-import styled from 'vue-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
-    },
-    preventOutsideClose: {
-      required: false,
-      default: false
-    },
-    isLoading: {
-      required: false,
-      default: false
-    },
-    hideClose: {
-      required: false,
-      default: false
-    },
-    backdrop: {
-      required: false,
-      default: 'white'
-    },
-    position: {
-      required: false,
-      default: 'fixed'
-    }
-  },
-  methods: {
-    onCloseModal() {
-      this.$emit('on-close')
-    },
-    onOutsideClose() {
-      // If true, then only allow closing to come from clicking the X or wherever the onCloseModal is called
-      if (!this.preventOutsideClose) {
-        this.$emit('on-close')
-      }
-    }
-  },
-  watch: {
-    isOpen: function (newVal) {
-      document.body.style.overflow = newVal ? 'hidden' : ''
-    }
-  }
-}
-</script>
+<template>
+  <page-wrapper
+    :position="position"
+    :isOpen="isOpen"
+    :class="{ visible: isOpen, hidden: !isOpen }"
+    @click.native="onOutsideClose()"
+    :backdrop="backdrop"
+  >
+    <modal-container @click.stop>
+      <spinner v-if="isLoading" size="50px" :limitedToModal="true" />
+      <content-container :visible="!isLoading">
+        <slot />
+      </content-container>
+      <close-button
+        v-if="!hideClose"
+        @click.native="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')" :preventOutsideClose="true" :isLoading="true" :hideClose="true">
+//   <div>Data....</div>
+// </modal>
+
+import styled from 'vue-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
+    },
+    preventOutsideClose: {
+      required: false,
+      default: false
+    },
+    isLoading: {
+      required: false,
+      default: false
+    },
+    hideClose: {
+      required: false,
+      default: false
+    },
+    backdrop: {
+      required: false,
+      default: 'white'
+    },
+    position: {
+      required: false,
+      default: 'fixed'
+    }
+  },
+  methods: {
+    onCloseModal() {
+      this.$emit('on-close')
+    },
+    onOutsideClose() {
+      // If true, then only allow closing to come from clicking the X or wherever the onCloseModal is called
+      if (!this.preventOutsideClose) {
+        this.$emit('on-close')
+      }
+    }
+  },
+  watch: {
+    isOpen: function (newVal) {
+      document.body.style.overflow = newVal ? 'hidden' : ''
+    }
+  }
+}
+</script>

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

@@ -1,31 +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 = {};
+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/navigationTabs/index.vue

@@ -1,107 +1,107 @@
-<template>
-  <roofTabWrap>
-    <tab
-      v-for="(tab, index) in tabsData"
-      :key="tab.id"
-      :isDisabled="!!tab['isDisabled']"
-      :textColor="tab['textColor']"
-      :active="isIndexKey ? index === activeTab : tab[tabKey] === activeTab"
-      @click="$emit('tab-click', isIndexKey ? index : tab[tabKey])"
-    >
-        <Option :isDisabled="!!tab['isDisabled']" :textColor="tab['textColor']">
-            <Uppercase>{{ tab[tabLabel] }}</Uppercase>
-            <info-text
-                v-if="tab['labelInfoText']"
-                :text="tab['labelInfoText']"
-                borderColor="#ccc"
-                size="14px"
-                :alignArrow="tab['labelInfoAlign']"
-            />
-        </Option>
-    </tab>
-    <bottomLine />
-  </roofTabWrap>
-</template>
-
-<script>
-import styled from 'vue-styled-components'
-import InfoText from '../infoText'
-const TabAttr = {
-  active: Boolean,
-  isDisabled: Boolean,
-  textColor: String
-}
-
-const bottomLine = styled('div')`
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 1px;
-    width: 100%;
-    background-color: #b2b9c5;
-`
-const roofTabWrap = styled('div')`
-  display: flex;
-  align-items: center;
-  position: relative;
-  font-size: 13px;
-  font-weight: 700;
-`
-const Uppercase = styled('span')`
-  text-transform: uppercase;
-`
-const Option = styled('div',TabAttr)`
-    font-size: 13px;
-    font-weight: 700;
-    display:flex;
-    justify-content: center;
-    flex-direction: row;
-    gap: 10px;
-    color: ${props=>props.textColor ? 
-        props.theme.colors[props.textColor] ? props.theme.colors[props.textColor] : props.textColor :
-        props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
-  `
-const Tab = styled('div', TabAttr)`
-  padding: 16px 10px;
-  margin-right: 5px;
-  position: relative;
-  top: ${(props) => (props.isDisabled ? '-1px' : '0')};
-  z-index: 10;
-  border-bottom: 2px solid
-    ${(props) => (props.active ? props.theme.colors.primary : 'transparent')};
-  background-color: ${(props) => (props.isDisabled ? props.theme.colors.grey5 : 'transparent')};
-  transition: 0.2s ease;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-  min-width: 140px;
-  display: flex !important;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 55px;
-  &:hover {
-    border-color: ${(props) => props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.primary};
-  }
-`
-
-export default {
-  name: 'Tabs',
-
-  components: {
-    Tab,
-    bottomLine,
-    roofTabWrap,
-    Option,
-    InfoText,
-    Uppercase
-  },
-
-  props: {
-    tabsData: { required: true },
-    activeTab: { required: true },
-    isIndexKey: { type: Boolean, default: false },
-    tabKey: { type: String, default: '' },
-    tabLabel: { type: String, default: '' }
-  }
-}
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <roofTabWrap>
+    <tab
+      v-for="(tab, index) in tabsData"
+      :key="tab.id"
+      :isDisabled="!!tab['isDisabled']"
+      :textColor="tab['textColor']"
+      :active="isIndexKey ? index === activeTab : tab[tabKey] === activeTab"
+      @click="$emit('tab-click', isIndexKey ? index : tab[tabKey])"
+    >
+        <Option :isDisabled="!!tab['isDisabled']" :textColor="tab['textColor']">
+            <Uppercase>{{ tab[tabLabel] }}</Uppercase>
+            <info-text
+                v-if="tab['labelInfoText']"
+                :text="tab['labelInfoText']"
+                borderColor="#ccc"
+                size="14px"
+                :alignArrow="tab['labelInfoAlign']"
+            />
+        </Option>
+    </tab>
+    <bottomLine />
+  </roofTabWrap>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import InfoText from '../infoText'
+const TabAttr = {
+  active: Boolean,
+  isDisabled: Boolean,
+  textColor: String
+}
+
+const bottomLine = styled('div')`
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+    width: 100%;
+    background-color: #b2b9c5;
+`
+const roofTabWrap = styled('div')`
+  display: flex;
+  align-items: center;
+  position: relative;
+  font-size: 13px;
+  font-weight: 700;
+`
+const Uppercase = styled('span')`
+  text-transform: uppercase;
+`
+const Option = styled('div',TabAttr)`
+    font-size: 13px;
+    font-weight: 700;
+    display:flex;
+    justify-content: center;
+    flex-direction: row;
+    gap: 10px;
+    color: ${props=>props.textColor ? 
+        props.theme.colors[props.textColor] ? props.theme.colors[props.textColor] : props.textColor :
+        props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
+  `
+const Tab = styled('div', TabAttr)`
+  padding: 16px 10px;
+  margin-right: 5px;
+  position: relative;
+  top: ${(props) => (props.isDisabled ? '-1px' : '0')};
+  z-index: 10;
+  border-bottom: 2px solid
+    ${(props) => (props.active ? props.theme.colors.primary : 'transparent')};
+  background-color: ${(props) => (props.isDisabled ? props.theme.colors.grey5 : 'transparent')};
+  transition: 0.2s ease;
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  min-width: 140px;
+  display: flex !important;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 55px;
+  &:hover {
+    border-color: ${(props) => props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.primary};
+  }
+`
+
+export default {
+  name: 'Tabs',
+
+  components: {
+    Tab,
+    bottomLine,
+    roofTabWrap,
+    Option,
+    InfoText,
+    Uppercase
+  },
+
+  props: {
+    tabsData: { required: true },
+    activeTab: { required: true },
+    isIndexKey: { type: Boolean, default: false },
+    tabKey: { type: String, default: '' },
+    tabLabel: { type: String, default: '' }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>