@eturnity/eturnity_reusable_components 7.32.1-qa-elisee-7.32.1 → 7.33.0-EPDM-11313.0

package/src/assets/svgIcons/way.svg

@@ -1,5 +1,5 @@
-<svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-<path d="M17 15C17 16.1046 16.1046 17 15 17C13.8954 17 13 16.1046 13 15C13 13.8954 13.8954 13 15 13C16.1046 13 17 13.8954 17 15Z" fill="#263238"></path>
-<path d="M27 25C27 26.1046 26.1046 27 25 27C23.8954 27 23 26.1046 23 25C23 23.8954 23.8954 23 25 23C26.1046 23 27 23.8954 27 25Z" fill="#263238"></path>
-<path d="M21 16.5C21 15.6716 21.6716 15 22.5 15C23.3284 15 24 15.6716 24 16.5V21H26V16.5C26 14.567 24.433 13 22.5 13C20.567 13 19 14.567 19 16.5V23.5C19 24.3284 18.3284 25 17.5 25C16.6716 25 16 24.3284 16 23.5V19H14V23.5C14 25.433 15.567 27 17.5 27C19.433 27 21 25.433 21 23.5V16.5Z" fill="#263238"></path>
-</svg>
+<svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 15C17 16.1046 16.1046 17 15 17C13.8954 17 13 16.1046 13 15C13 13.8954 13.8954 13 15 13C16.1046 13 17 13.8954 17 15Z" fill="#263238"></path>
+<path d="M27 25C27 26.1046 26.1046 27 25 27C23.8954 27 23 26.1046 23 25C23 23.8954 23.8954 23 25 23C26.1046 23 27 23.8954 27 25Z" fill="#263238"></path>
+<path d="M21 16.5C21 15.6716 21.6716 15 22.5 15C23.3284 15 24 15.6716 24 16.5V21H26V16.5C26 14.567 24.433 13 22.5 13C20.567 13 19 14.567 19 16.5V23.5C19 24.3284 18.3284 25 17.5 25C16.6716 25 16 24.3284 16 23.5V19H14V23.5C14 25.433 15.567 27 17.5 27C19.433 27 21 25.433 21 23.5V16.5Z" fill="#263238"></path>
+</svg>

package/src/assets/svgIcons/wifi.svg

@@ -1,3 +1,3 @@
-<svg fill="none" height="12" viewbox="12 14 16 12" width="16" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 17.9486L14.2727 19.2213C17.4355 16.0586 22.5645 16.0586 25.7273 19.2213L27 17.9486C23.1373 14.0858 16.8691 14.0858 13 17.9486ZM18.0909 23.0395L20 24.9486L21.9091 23.0395C20.8591 21.9831 19.1473 21.9831 18.0909 23.0395ZM15.5455 20.494L16.8182 21.7667C18.5745 20.0104 21.4255 20.0104 23.1818 21.7667L24.4545 20.494C21.9982 18.0376 18.0082 18.0376 15.5455 20.494Z" fill="#263238"></path>
-</svg>
+<svg fill="none" height="12" viewbox="12 14 16 12" width="16" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 17.9486L14.2727 19.2213C17.4355 16.0586 22.5645 16.0586 25.7273 19.2213L27 17.9486C23.1373 14.0858 16.8691 14.0858 13 17.9486ZM18.0909 23.0395L20 24.9486L21.9091 23.0395C20.8591 21.9831 19.1473 21.9831 18.0909 23.0395ZM15.5455 20.494L16.8182 21.7667C18.5745 20.0104 21.4255 20.0104 23.1818 21.7667L24.4545 20.494C21.9982 18.0376 18.0082 18.0376 15.5455 20.494Z" fill="#263238"></path>
+</svg>

package/src/assets/svgIcons/winter.svg

@@ -1,3 +1,3 @@
-<svg fill="none" height="26" viewbox="7 7 26 26" width="26" xmlns="http://www.w3.org/2000/svg">
-<path d="M31.6196 20.5231V19.4663H29.6856L32 17.1625L31.2497 16.4122L28.1955 19.4663H21.2734L26.1664 14.5733H30.4888V13.5165H27.2233L28.5865 12.1532L27.8468 11.4029L26.4729 12.7768V9.51123H25.4161V13.8336L20.5231 18.7266V11.8045L23.5878 8.75033L22.8375 8L20.5231 10.3144V8.36988H19.4663V10.3144L17.1625 8L16.4122 8.75033L19.4663 11.8045V18.7266L14.5733 13.8336V9.51123H13.5165V12.7768L12.1532 11.4029L11.4029 12.1532L12.7768 13.5165H9.51123V14.5733H13.8336L18.7266 19.4663H11.8045L8.75033 16.4122L8 17.1625L10.3144 19.4663H8.36988V20.5231H10.3144L8 22.8375L8.75033 23.5773L11.8045 20.5231H18.7266L13.8336 25.4161H9.51123V26.4729H12.7768L11.4029 27.8468L12.1532 28.5865L13.5165 27.2233V30.4888H14.5733V26.1664L19.4663 21.2734V28.1955L16.4122 31.2497L17.1625 32L19.4663 29.6856V31.6196H20.5231V29.6856L22.8375 32L23.5878 31.2497L20.5231 28.1955V21.2734L25.4161 26.1664V30.4888H26.4729V27.2233L27.8468 28.5865L28.5865 27.8468L27.2233 26.4729H30.4888V25.4161H26.1664L21.2734 20.5231H28.1955L31.2497 23.5773L32 22.8375L29.6856 20.5231H31.6196Z" fill="#20A4CA"></path>
-</svg>
+<svg fill="none" height="26" viewbox="7 7 26 26" width="26" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.6196 20.5231V19.4663H29.6856L32 17.1625L31.2497 16.4122L28.1955 19.4663H21.2734L26.1664 14.5733H30.4888V13.5165H27.2233L28.5865 12.1532L27.8468 11.4029L26.4729 12.7768V9.51123H25.4161V13.8336L20.5231 18.7266V11.8045L23.5878 8.75033L22.8375 8L20.5231 10.3144V8.36988H19.4663V10.3144L17.1625 8L16.4122 8.75033L19.4663 11.8045V18.7266L14.5733 13.8336V9.51123H13.5165V12.7768L12.1532 11.4029L11.4029 12.1532L12.7768 13.5165H9.51123V14.5733H13.8336L18.7266 19.4663H11.8045L8.75033 16.4122L8 17.1625L10.3144 19.4663H8.36988V20.5231H10.3144L8 22.8375L8.75033 23.5773L11.8045 20.5231H18.7266L13.8336 25.4161H9.51123V26.4729H12.7768L11.4029 27.8468L12.1532 28.5865L13.5165 27.2233V30.4888H14.5733V26.1664L19.4663 21.2734V28.1955L16.4122 31.2497L17.1625 32L19.4663 29.6856V31.6196H20.5231V29.6856L22.8375 32L23.5878 31.2497L20.5231 28.1955V21.2734L25.4161 26.1664V30.4888H26.4729V27.2233L27.8468 28.5865L28.5865 27.8468L27.2233 26.4729H30.4888V25.4161H26.1664L21.2734 20.5231H28.1955L31.2497 23.5773L32 22.8375L29.6856 20.5231H31.6196Z" fill="#20A4CA"></path>
+</svg>

package/src/assets/svgIcons/workflow_template.svg

@@ -1,12 +1,12 @@
-<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M2.4 1.2C2.4 1.86274 1.86274 2.4 1.2 2.4C0.537258 2.4 0 1.86274 0 1.2C0 0.537258 0.537258 0 1.2 0C1.86274 0 2.4 0.537258 2.4 1.2Z" fill="#263238" />
-  <path d="M6 1.2C6 1.86274 5.46274 2.4 4.8 2.4C4.13726 2.4 3.6 1.86274 3.6 1.2C3.6 0.537258 4.13726 0 4.8 0C5.46274 0 6 0.537258 6 1.2Z" fill="#263238" />
-  <path d="M2.4 4.8C2.4 5.46274 1.86274 6 1.2 6C0.537258 6 0 5.46274 0 4.8C0 4.13726 0.537258 3.6 1.2 3.6C1.86274 3.6 2.4 4.13726 2.4 4.8Z" fill="#263238" />
-  <path d="M6 4.8C6 5.46274 5.46274 6 4.8 6C4.13726 6 3.6 5.46274 3.6 4.8C3.6 4.13726 4.13726 3.6 4.8 3.6C5.46274 3.6 6 4.13726 6 4.8Z" fill="#263238" />
-  <path fill="#263238" d="M10 1h6s2 0 2 2v0s0 2 -2 2h-6s-2 0 -2 -2v0s0 -2 2 -2" />
-  <path d="M2.4 11.2C2.4 11.8627 1.86274 12.4 1.2 12.4C0.537258 12.4 0 11.8627 0 11.2C0 10.5373 0.537258 10 1.2 10C1.86274 10 2.4 10.5373 2.4 11.2Z" fill="#263238" />
-  <path d="M6 11.2C6 11.8627 5.46274 12.4 4.8 12.4C4.13726 12.4 3.6 11.8627 3.6 11.2C3.6 10.5373 4.13726 10 4.8 10C5.46274 10 6 10.5373 6 11.2Z" fill="#263238" />
-  <path d="M2.4 14.8C2.4 15.4627 1.86274 16 1.2 16C0.537258 16 0 15.4627 0 14.8C0 14.1373 0.537258 13.6 1.2 13.6C1.86274 13.6 2.4 14.1373 2.4 14.8Z" fill="#263238" />
-  <path d="M6 14.8C6 15.4627 5.46274 16 4.8 16C4.13726 16 3.6 15.4627 3.6 14.8C3.6 14.1373 4.13726 13.6 4.8 13.6C5.46274 13.6 6 14.1373 6 14.8Z" fill="#263238" />
-  <path fill="#263238" d="M10 11h6s2 0 2 2v0s0 2 -2 2h-6s-2 0 -2 -2v0s0 -2 2 -2" />
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2.4 1.2C2.4 1.86274 1.86274 2.4 1.2 2.4C0.537258 2.4 0 1.86274 0 1.2C0 0.537258 0.537258 0 1.2 0C1.86274 0 2.4 0.537258 2.4 1.2Z" fill="#263238" />
+  <path d="M6 1.2C6 1.86274 5.46274 2.4 4.8 2.4C4.13726 2.4 3.6 1.86274 3.6 1.2C3.6 0.537258 4.13726 0 4.8 0C5.46274 0 6 0.537258 6 1.2Z" fill="#263238" />
+  <path d="M2.4 4.8C2.4 5.46274 1.86274 6 1.2 6C0.537258 6 0 5.46274 0 4.8C0 4.13726 0.537258 3.6 1.2 3.6C1.86274 3.6 2.4 4.13726 2.4 4.8Z" fill="#263238" />
+  <path d="M6 4.8C6 5.46274 5.46274 6 4.8 6C4.13726 6 3.6 5.46274 3.6 4.8C3.6 4.13726 4.13726 3.6 4.8 3.6C5.46274 3.6 6 4.13726 6 4.8Z" fill="#263238" />
+  <path fill="#263238" d="M10 1h6s2 0 2 2v0s0 2 -2 2h-6s-2 0 -2 -2v0s0 -2 2 -2" />
+  <path d="M2.4 11.2C2.4 11.8627 1.86274 12.4 1.2 12.4C0.537258 12.4 0 11.8627 0 11.2C0 10.5373 0.537258 10 1.2 10C1.86274 10 2.4 10.5373 2.4 11.2Z" fill="#263238" />
+  <path d="M6 11.2C6 11.8627 5.46274 12.4 4.8 12.4C4.13726 12.4 3.6 11.8627 3.6 11.2C3.6 10.5373 4.13726 10 4.8 10C5.46274 10 6 10.5373 6 11.2Z" fill="#263238" />
+  <path d="M2.4 14.8C2.4 15.4627 1.86274 16 1.2 16C0.537258 16 0 15.4627 0 14.8C0 14.1373 0.537258 13.6 1.2 13.6C1.86274 13.6 2.4 14.1373 2.4 14.8Z" fill="#263238" />
+  <path d="M6 14.8C6 15.4627 5.46274 16 4.8 16C4.13726 16 3.6 15.4627 3.6 14.8C3.6 14.1373 4.13726 13.6 4.8 13.6C5.46274 13.6 6 14.1373 6 14.8Z" fill="#263238" />
+  <path fill="#263238" d="M10 11h6s2 0 2 2v0s0 2 -2 2h-6s-2 0 -2 -2v0s0 -2 2 -2" />
 </svg>

package/src/assets/theme.js

@@ -1,41 +1,41 @@
-const theme = {
-  colors: {
-    primary: '#48a2d0',
-    secondary: '#fdb813',
-    tertiary: '#d5d5d5',
-    black: '#263238',
-    yellow: '#fdb813',
-    darkGray: '#818181',
-    gray1: '#666',
-    mediumGray: '#d5d5d5',
-    lightGray: '#f2f2f2',
-    white: '#ffffff',
-    blue: '#48a2d0',
-    red: '#ff5656',
-    blue1: '#e4efff',
-    brightBlue: '#0068DE',
-    grey1: '#666',
-    grey2: '#c4c4c4',
-    grey3: '#b2b9c5',
-    grey4: '#dee2eb',
-    grey5: '#fafafa',
-    grey6: '#555d61',
-    green: '#99db0c',
-    transparentWhite1: '#ffffff32',
-    transparentWhite2: '#ffffff16',
-    transparentWhite3: '#ffffff48',
-    transparentBlack1: '#263238e6',
-    disabled: '#dfe1e1',
-    eturnityGrey: '#263238',
-  },
-  screen: {
-    mobileSmall: '345px',
-    mobile: '425px',
-    mobileLarge: '530px',
-    tablet: '768px',
-    tabletLarge: '950px',
-  },
-  borderRadius: '4px',
-}
-
-export default theme
+const theme = {
+  colors: {
+    primary: '#48a2d0',
+    secondary: '#fdb813',
+    tertiary: '#d5d5d5',
+    black: '#263238',
+    yellow: '#fdb813',
+    darkGray: '#818181',
+    gray1: '#666',
+    mediumGray: '#d5d5d5',
+    lightGray: '#f2f2f2',
+    white: '#ffffff',
+    blue: '#48a2d0',
+    red: '#ff5656',
+    blue1: '#e4efff',
+    brightBlue: '#0068DE',
+    grey1: '#666',
+    grey2: '#c4c4c4',
+    grey3: '#b2b9c5',
+    grey4: '#dee2eb',
+    grey5: '#fafafa',
+    grey6: '#555d61',
+    green: '#99db0c',
+    transparentWhite1: '#ffffff32',
+    transparentWhite2: '#ffffff16',
+    transparentWhite3: '#ffffff48',
+    transparentBlack1: '#263238e6',
+    disabled: '#dfe1e1',
+    eturnityGrey: '#263238',
+  },
+  screen: {
+    mobileSmall: '345px',
+    mobile: '425px',
+    mobileLarge: '530px',
+    tablet: '768px',
+    tabletLarge: '950px',
+  },
+  borderRadius: '4px',
+}
+
+export default theme

package/src/components/addNewButton/AddNewButton.stories.js

@@ -1,24 +1,24 @@
-import AddNewButton from './index.vue'
-
-export default {
-  title: 'AddNewButton',
-  component: AddNewButton,
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { AddNewButton },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<add-new-button v-bind="$props" />',
-
-  // import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
-  // To use:
-  // <add-new-button :shouldPosition="true" />
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  shouldPosition: true,
-}
+import AddNewButton from './index.vue'
+
+export default {
+  title: 'AddNewButton',
+  component: AddNewButton,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { AddNewButton },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<add-new-button v-bind="$props" />',
+
+  // import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
+  // To use:
+  // <add-new-button :shouldPosition="true" />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  shouldPosition: true,
+}

package/src/components/addNewButton/index.vue

@@ -1,61 +1,61 @@
-<template>
-  <PageContainer :should-position="shouldPosition">
-    <ButtonContainer :data-id="dataId">
-      <PlusButtonSvg />
-    </ButtonContainer>
-  </PageContainer>
-</template>
-
-<script>
-  // import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
-  import styled from 'vue3-styled-components'
-  import PlusButtonSvg from '../../assets/icons/plus_button.svg'
-
-  const pageAttrs = { shouldPosition: Boolean }
-  const PageContainer = styled('div', pageAttrs)`
-    position: ${(props) => (props.shouldPosition ? 'fixed' : 'unset')};
-    bottom: 30px;
-    right: 30px;
-  `
-
-  const ButtonContainer = styled.div`
-    height: 60px;
-    width: 60px;
-    background-color: ${(props) => props.theme.colors.green};
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-    border-radius: 100%;
-    cursor: pointer;
-    display: grid;
-    align-items: center;
-    justify-items: center;
-
-    &:hover {
-      background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
-        ${(props) => props.theme.colors.green};
-    }
-
-    &:active,
-    &:focus {
-      background: ${(props) => props.theme.colors.green};
-    }
-  `
-
-  export default {
-    name: 'AddNewButton',
-    components: {
-      PageContainer,
-      ButtonContainer,
-      PlusButtonSvg,
-    },
-    props: {
-      shouldPosition: {
-        required: false,
-        default: true,
-      },
-      dataId: {
-        type: String,
-        default: '',
-      },
-    },
-  }
-</script>
+<template>
+  <PageContainer :should-position="shouldPosition">
+    <ButtonContainer :data-id="dataId">
+      <PlusButtonSvg />
+    </ButtonContainer>
+  </PageContainer>
+</template>
+
+<script>
+  // import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
+  import styled from 'vue3-styled-components'
+  import PlusButtonSvg from '../../assets/icons/plus_button.svg'
+
+  const pageAttrs = { shouldPosition: Boolean }
+  const PageContainer = styled('div', pageAttrs)`
+    position: ${(props) => (props.shouldPosition ? 'fixed' : 'unset')};
+    bottom: 30px;
+    right: 30px;
+  `
+
+  const ButtonContainer = styled.div`
+    height: 60px;
+    width: 60px;
+    background-color: ${(props) => props.theme.colors.green};
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 100%;
+    cursor: pointer;
+    display: grid;
+    align-items: center;
+    justify-items: center;
+
+    &:hover {
+      background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
+        ${(props) => props.theme.colors.green};
+    }
+
+    &:active,
+    &:focus {
+      background: ${(props) => props.theme.colors.green};
+    }
+  `
+
+  export default {
+    name: 'AddNewButton',
+    components: {
+      PageContainer,
+      ButtonContainer,
+      PlusButtonSvg,
+    },
+    props: {
+      shouldPosition: {
+        required: false,
+        default: true,
+      },
+      dataId: {
+        type: String,
+        default: '',
+      },
+    },
+  }
+</script>

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

@@ -1,64 +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',
-    components: {
-      Modal,
-      ModalContainer,
-      ModalTitle,
-      ButtonContainer,
-      TextContainer,
-    },
-    props: ['isOpen'],
-    methods: {
-      closeModal() {
-        this.$emit('on-close')
-      },
-    },
-  }
-</script>
+<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',
+    components: {
+      Modal,
+      ModalContainer,
+      ModalTitle,
+      ButtonContainer,
+      TextContainer,
+    },
+    props: ['isOpen'],
+    methods: {
+      closeModal() {
+        this.$emit('on-close')
+      },
+    },
+  }
+</script>

package/src/components/banner/banner/banner.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 = {}