@eturnity/eturnity_reusable_components 7.24.1-EPDM-10857.3 → 7.24.2

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.24.1-EPDM-10857.3",
+  "version": "7.24.2",
   "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/assets/svgIcons/anchor.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 204.851 204.851" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path fill="white" d="M139.518,128.595l16.834,16.336c0,0-20.644,29.877-42.725,30.473
+				c0.479,0,0.117-84.092,0.039-104.472c14.694-4.797,25.402-18.182,25.402-34.117c0-20.009-16.697-36.218-37.273-36.218
+				c-20.615,0-37.312,16.209-37.312,36.208c0,15.671,10.376,28.929,24.748,33.961l0.098,104.277
+				c-26.643-1.837-42.061-27.474-42.061-27.474l17.997-17.41L0,120.505l9.887,63.301l17.362-16.795
+				c15.036,12.105,32.017,37.244,72.876,37.244c51.332-1.309,63.184-28.939,76.344-39.804l18.993,18.514l9.389-63.907
+				L139.518,128.595z M82.558,36.208c0-10.298,8.608-18.661,19.218-18.661s19.257,8.363,19.257,18.661
+				c0,10.327-8.647,18.681-19.257,18.681S82.558,46.535,82.558,36.208z"/>
+		</g>
+	</g>
+</g>
+</svg>

package/src/assets/svgIcons/flatten_roof.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="16"
+   height="8"
+   viewBox="0 0 16 8"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <g
+     transform="translate(-55.350933,-93.588073)">
+    <path
+       fill="#000000"
+       d="m 61.719348,100.39494 1.004406,0.0185 -0.0013,-2.679323 0.88345,-4.27e-4 c -0.0051,-0.01381 -0.01401,2.69128 -0.01401,2.69128 l 1.05348,-0.0159 -1.582401,1.44453 z m -6.368415,-0.817395 7.856738,-5.989472 7.616581,6.321372 -1.240034,1.266145 -6.409573,-5.185912 -6.581971,5.125212 z"
+       id="path874"
+       />
+  </g>
+</svg>

package/src/assets/svgIcons/house_3d-1.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <mask id="path-1-inside-1_57915_53334" fill="white">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.0303 2.75757L0 5.30302V11.2424L3.41022 12.4091V8.96996L4.53143 9.41845V12.7926L8.0606 14V8.0606L4.0303 2.75757Z"/>
+  </mask>
+  <path d="M0 5.30302L-0.694191 4.20389L-1.3 4.5865V5.30302H0ZM4.0303 2.75757L5.06531 1.97096L4.344 1.02187L3.33611 1.65843L4.0303 2.75757ZM0 11.2424H-1.3V12.1716L-0.420794 12.4724L0 11.2424ZM3.41022 12.4091L2.98943 13.6391L4.71022 14.2278V12.4091H3.41022ZM3.41022 8.96996L3.89303 7.76294L2.11022 7.04982V8.96996H3.41022ZM4.53143 9.41845H5.83143V8.5383L5.01424 8.21143L4.53143 9.41845ZM4.53143 12.7926H3.23143V13.7219L4.11064 14.0227L4.53143 12.7926ZM8.0606 14L7.63981 15.23L9.3606 15.8187V14H8.0606ZM8.0606 8.0606H9.3606V7.62266L9.09561 7.27399L8.0606 8.0606ZM0.694191 6.40216L4.72449 3.8567L3.33611 1.65843L-0.694191 4.20389L0.694191 6.40216ZM1.3 11.2424V5.30302H-1.3V11.2424H1.3ZM3.83102 11.1791L0.420794 10.0124L-0.420794 12.4724L2.98943 13.6391L3.83102 11.1791ZM4.71022 12.4091V8.96996H2.11022V12.4091H4.71022ZM2.92741 10.177L4.04862 10.6255L5.01424 8.21143L3.89303 7.76294L2.92741 10.177ZM3.23143 9.41845V12.7926H5.83143V9.41845H3.23143ZM8.48139 12.77L4.95223 11.5626L4.11064 14.0227L7.63981 15.23L8.48139 12.77ZM6.7606 8.0606V14H9.3606V8.0606H6.7606ZM2.99529 3.54418L7.02559 8.8472L9.09561 7.27399L5.06531 1.97096L2.99529 3.54418Z" fill="#0068DE" mask="url(#path-1-inside-1_57915_53334)"/>
+  <path d="M8.55859 13.2165V8.37967L13.498 6.08638V10.9232L8.55859 13.2165Z" fill="#0068DE" stroke="#0068DE"/>
+  <path d="M8.21608 7.43759L4.80515 2.94953L9.81611 0.623007L13.227 5.11107L8.21608 7.43759Z" fill="#0068DE" stroke="#0068DE"/>
+</svg>

package/src/assets/svgIcons/house_3d.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16" fill="none">
+  <mask id="path-1-inside-1_57915_3657" fill="white">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.03081 3.71851L0 6.28736V12.2814L3.41065 13.4587V9.98801L4.532 10.4406V13.8458L8.06161 15.0643V9.07028L4.03081 3.71851Z"/>
+  </mask>
+  <path d="M0 6.28736L-0.698673 5.19107L-1.3 5.5743V6.28736H0ZM4.03081 3.71851L5.06922 2.9364L4.34595 1.9761L3.33213 2.62221L4.03081 3.71851ZM0 12.2814H-1.3V13.2079L-0.424205 13.5102L0 12.2814ZM3.41065 13.4587L2.98645 14.6876L4.71065 15.2828V13.4587H3.41065ZM3.41065 9.98801L3.89722 8.78251L2.11065 8.0614V9.98801H3.41065ZM4.532 10.4406H5.832V9.56343L5.01858 9.23511L4.532 10.4406ZM4.532 13.8458H3.232V14.7723L4.1078 15.0747L4.532 13.8458ZM8.06161 15.0643L7.63741 16.2931L9.36161 16.8883V15.0643H8.06161ZM8.06161 9.07028H9.36161V8.63549L9.10003 8.28818L8.06161 9.07028ZM0.698673 7.38365L4.72948 4.8148L3.33213 2.62221L-0.698673 5.19107L0.698673 7.38365ZM1.3 12.2814V6.28736H-1.3V12.2814H1.3ZM3.83485 12.2299L0.424205 11.0525L-0.424205 13.5102L2.98645 14.6876L3.83485 12.2299ZM4.71065 13.4587V9.98801H2.11065V13.4587H4.71065ZM2.92408 11.1935L4.04543 11.6461L5.01858 9.23511L3.89722 8.78251L2.92408 11.1935ZM3.232 10.4406V13.8458H5.832V10.4406H3.232ZM8.48582 13.8354L4.95621 12.617L4.1078 15.0747L7.63741 16.2931L8.48582 13.8354ZM6.76161 9.07028V15.0643H9.36161V9.07028H6.76161ZM2.99239 4.50061L7.0232 9.85239L9.10003 8.28818L5.06922 2.9364L2.99239 4.50061Z" fill="white" mask="url(#path-1-inside-1_57915_3657)"/>
+  <path d="M8.5625 14.2779V9.38818L13.5026 7.07375V11.9634L8.5625 14.2779Z" fill="white" stroke="white"/>
+  <path d="M8.21735 8.44534L4.80134 3.90984L9.81609 1.56045L13.2321 6.09596L8.21735 8.44534Z" fill="white" stroke="white"/>
+</svg>

package/src/assets/svgIcons/split.svg

@@ -1,94 +1,12 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
-   version="1.1"
-   id="svg438"
    width="838"
    height="833"
    viewBox="0 0 838 833"
-   sodipodi:docname="split.svg"
-   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs442">
-    <linearGradient
-       id="linearGradient7383"
-       inkscape:swatch="solid">
-      <stop
-         style="stop-color:#ffffff;stop-opacity:1;"
-         offset="0"
-         id="stop7381" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient6933"
-       inkscape:swatch="solid">
-      <stop
-         style="stop-color:#000000;stop-opacity:1;"
-         offset="0"
-         id="stop6931" />
-    </linearGradient>
-  </defs>
-  <sodipodi:namedview
-     id="namedview440"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     showgrid="false"
-     inkscape:zoom="0.95078031"
-     inkscape:cx="466.45896"
-     inkscape:cy="549.02273"
-     inkscape:window-width="1920"
-     inkscape:window-height="1007"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="g444" />
-  <g
-     inkscape:groupmode="layer"
-     inkscape:label="Image"
-     id="g444">
-    <circle
-       id="path5141"
-       style="fill:none;stroke:#fffeff;stroke-opacity:1"
-       cx="0.66903824"
-       cy="263.65976"
-       r="0.52949077" />
-    <circle
-       id="path5143"
-       style="fill:none;stroke:#fffeff;stroke-opacity:1"
-       cx="0.66903824"
-       cy="263.65976"
-       r="0.52949077" />
-    <g
-       id="path5184"
-       style="stroke:#fffeff;stroke-opacity:1;fill:none">
-      <path
-         style="color:#000000;fill:none;stroke-width:154.42;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
-         d="m -156.35359,113.32885 348.76355,221.92361 744.6236,-498.85799"
-         id="path6861" />
-      <path
-         style="color:#000000;fill:none;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
-         d="M 894.06055,-227.75 191.32227,243.04492 -114.9043,48.1875 -197.80273,178.46875 193.49609,427.45898 980.00781,-99.460937 Z"
-         id="path6863" />
-    </g>
-    <g
-       id="path5186"
-       style="stroke:#fffeff;stroke-opacity:1;fill:none">
-      <path
-         style="color:#000000;fill:none;stroke-width:166.34;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
-         d="M 816.06617,905.68984 357.97591,628.01443 1035.7943,176.14788"
-         id="path6855" />
-      <path
-         style="color:#000000;fill:none;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
-         d="M 989.66016,106.94531 203.03125,631.34961 772.95312,976.81445 859.17773,834.56641 512.91992,624.67773 1081.9277,245.34961 Z"
-         id="path6857" />
-    </g>
-  </g>
+   >
+
+    <path
+       fill="#B2B9C5"
+       d="m -5.0875843,441.73292 3.3936693,-93.74987 847.237645,-2.85667 -3.71049,95.94711 z m 333.6519143,232.4369 -98.27777,-105.35245 43.34233,-0.60608 c 23.83828,-0.33335 56.95483,-0.67085 73.59233,-0.75 l 30.25,-0.14392 L 376,413.05958 374.48738,213.61969 301.67731,213.3632 228.86724,213.10671 326.58798,107.77384 C 380.33439,49.84076 424.5019,2.3657611 424.73801,2.2738411 425.25724,2.0716911 628.96623,212.59506 628.96623,213.35636 c 0,0.29424 -41.55385,0.25035 -81.97885,0.25035 h -73.5 L 475,413.0466 l 1.47122,154.25779 72.81196,0.25649 72.81196,0.25649 -91.89971,99.5 -103.35334,112.2049 z"
+      />
 </svg>

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/buttons/mainButton/index.vue

@@ -8,6 +8,7 @@
       :customColor="customColor"
       :noWrap="noWrap"
       :data-id="dataId"
+      :fontColor="fontColor"
     >
       {{ text }}
     </button-container>
@@ -35,12 +36,14 @@ const ButtonAttrs = {
   isDisabled: Boolean,
   minWidth: String,
   customColor: String,
+  fontColor: String,
   noWrap: Boolean
 }
 const ButtonContainer = styled('div', ButtonAttrs)`
   padding: 7px 15px;
   font-size: 13px;
-  color: ${(props) => props.theme.colors.white};
+  color: ${(props) =>
+    props.fontColor ? props.fontColor : props.theme.colors.white};
   background-color: ${(props) =>
     props.isDisabled
       ? props.theme.colors.disabled
@@ -91,6 +94,9 @@ export default {
       required: false,
       default: null
     },
+    fontColor: {
+      required: false
+    },
     noWrap: {
       required: false,
       default: false

package/src/components/icon/index.vue

@@ -115,7 +115,7 @@ const IconImage = styled('div', {
     ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
   }
   &:hover > svg path {
-    ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
+    ${props.hoveredColor && `fill: ${props.hoveredColor};`}
   }
   &:hover + div {
     background-color: ${(props) => props.hoveredColor};

package/src/components/iconWrapper/index.vue

@@ -9,6 +9,7 @@
     :hoveredBackgroundColor="hoveredBackgroundColor"
     :isHovered="isHovered"
     :data-id="dataId"
+    :noCursor="noCursor"
   >
     <icon
       :disabled="disabled"
@@ -30,6 +31,9 @@
         borderRadius="1px"
       />
     </caret>
+    <lockContainer v-if="hasLock">
+      <icon size="9px" name="lock" color="yellow" />
+    </lockContainer>
   </Wrapper>
 </template>
 
@@ -54,8 +58,14 @@ const wrapperAttrs = {
   size: String,
   backgroundColor: String,
   hoveredBackgroundColor: String,
-  hasBorder: Boolean
+  hasBorder: Boolean,
+  noCursor: Boolean
 }
+const lockContainer = styled.div`
+  position: absolute;
+  bottom: 6px;
+  right: 6px;
+`
 const Wrapper = styled('div', wrapperAttrs)`
   position: relative;
   display: inline-flex;
@@ -67,7 +77,8 @@ const Wrapper = styled('div', wrapperAttrs)`
       : ''};
   justify-content: center;
   align-items: center;
-  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+  cursor: ${(props) =>
+    props.noCursor ? 'auto' : props.disabled ? 'not-allowed' : 'pointer'};
   background-color: ${(props) =>
     props.theme.colors[props.backgroundColor] || props.backgroundColor};
   border-radius: ${(props) => props.borderRadius};
@@ -95,7 +106,8 @@ export default {
   components: {
     Wrapper,
     icon,
-    caret
+    caret,
+    lockContainer
   },
   props: {
     disabled: {
@@ -153,6 +165,14 @@ export default {
     isLoading: {
       required: false,
       default: false
+    },
+    noCursor: {
+      required: false,
+      default: false
+    },
+    hasLock: {
+      required: false,
+      default: false
     }
   }
 }

package/src/components/inputs/checkbox/index.vue

@@ -197,6 +197,11 @@ export default {
       return !!this.label.length
     }
   },
+  computed: {
+    hasLabel() {
+      return !!this.label.length
+    }
+  },
   methods: {
     onChangeHandler(value) {
       if (this.isDisabled) {

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

@@ -0,0 +1,64 @@
+<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 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,49 @@
+<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'
+import Button from '../../buttons/mainButton'
+const modalContainer = styled.div`
+  width: 450px;
+  min-height: 205px;
+  padding: 40px 40px 30px 40px;
+`
+const buttonContainer = styled.div`
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 20px;
+`
+export default {
+  name: 'InfoModal',
+  props: ['isOpen'],
+  components: {
+    modalContainer,
+    buttonContainer,
+    ActionModal,
+    Button
+  },
+  methods: {
+    closeModal() {
+      this.$emit('on-close')
+    }
+  }
+}
+</script>

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

@@ -119,7 +119,7 @@ const ModalContainer = styled.div`
 `
 
 export default {
-  name: 'modal',
+  name: 'Modal',
   components: {
     PageWrapper,
     ModalContainer,

package/src/components/collapsableInfoText/index.vue

@@ -1,125 +0,0 @@
-<template>
-  <div>
-    <Text :expand="showButton && showAll" :fontSize="fontSize">{{ text }}</Text>
-    <ToggleContainer>
-      <ToggleButton
-        @click="toggleHandler"
-        v-if="showButton && !showAll"
-        :fontSize="fontSize"
-      >
-        {{ $gettext('Show more') }}
-      </ToggleButton>
-      <ToggleButton
-        @click="toggleHandler"
-        v-if="showButton && showAll"
-        :fontSize="fontSize"
-      >
-        {{ $gettext('Show less') }}
-      </ToggleButton>
-    </ToggleContainer>
-  </div>
-</template>
-
-<script>
-import styled from 'vue3-styled-components'
-import theme from '@/assets/theme.js'
-
-const TextAttrs = {
-  expand: Boolean,
-  fontSize: String
-}
-const Text = styled('p', TextAttrs)`
-  display: block;
-  display: -webkit-box;
-  line-height: 1.3em;
-  -webkit-line-clamp: ${(props) => (props.expand ? 'unset' : '4')};
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  font-size: ${(props) => props.fontSize}px;
-  text-overflow: ellipsis;
-`
-
-const ToggleContainer = styled.div`
-  display: flex;
-  width: 100%;
-`
-
-const ToggleButton = styled('p', TextAttrs)`
-  font-size: ${(props) => props.fontSize}px;
-  cursor: pointer;
-  color: ${(props) => props.theme.colors.blue};
-`
-
-export default {
-  name: 'collapsable-info-text',
-  props: {
-    text: {
-      type: String,
-      required: true
-    },
-    fontSize: {
-      type: String,
-      default: '16px'
-    },
-    lineCount: {
-      type: Number,
-      default: 3
-    },
-    minWidth: {
-      type: String,
-      default: '100%'
-    }
-  },
-  components: {
-    Text,
-    ToggleButton,
-    ToggleContainer
-  },
-  data() {
-    return {
-      showButton: true,
-      showAll: false,
-      lineBreaks: []
-    }
-  },
-  computed: {
-    theme() {
-      return theme
-    }
-  },
-  methods: {
-    displayText() {
-      if (!this.showButton) {
-        return this.text
-      }
-      if (!this.showAll) {
-        let countIndex = 0
-        this.lineBreaks.forEach((el, index) => {
-          if (index < this.lineCount) {
-            countIndex += el.length
-          }
-        })
-
-        return this.text.slice(0, countIndex + 2) + '...'
-      } else {
-        return this.text
-      }
-    },
-    toggleHandler() {
-      this.showAll = !this.showAll
-    }
-  },
-  created() {
-    // TODO: this should divide the text into lines based on with. Currently it's just splitting by line breaks
-    // this.lineBreaks = this.text.split('\n')
-
-    // if (this.lineBreaks.length <= this.lineCount) {
-    //   this.showButton = false
-    // }
-
-    if (this.text.length <= 170) {
-      this.showButton = false
-    }
-  }
-}
-</script>