@eturnity/eturnity_reusable_components 8.13.3-EPDM-14657.1 → 8.13.3-EPDM-14657.3

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

@@ -1,48 +1,78 @@
 <template>
-  <ActionModal :is-open="isOpen" @on-close="closeModal">
+  <RCModal data-test-id="infoModal" :is-open="isOpen" @on-close="closeModal">
     <ModalContainer>
-      <template #title>
+      <ModalTitle v-if="$slots.title" data-test-id="modal_title">
         <slot name="title"></slot>
-      </template>
-      <template #body>
+      </ModalTitle>
+      <TextContainer v-if="$slots.body" data-test-id="modal_body">
         <slot name="body"></slot>
-      </template>
-      <template #buttons>
-        <ButtonContainer>
-          <RCMainButton
-            min-width="150px"
-            :text="$gettext('Got it')"
-            type="primary"
-            @click="closeModal"
-          />
-        </ButtonContainer>
-      </template>
+      </TextContainer>
+      <ButtonContainer>
+        <RCMainButton
+          min-width="150px"
+          :text="buttonText"
+          type="primary"
+          @click="closeModal"
+        />
+      </ButtonContainer>
     </ModalContainer>
-  </ActionModal>
+  </RCModal>
 </template>
 <script>
   import styled from 'vue3-styled-components'
-  import ActionModal from '../actionModal'
+  import RCModal from '../modal'
   import RCMainButton from '../../buttons/mainButton'
+
   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: inherit;
+    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: inherit;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding: 30px 0px;
+    white-space: pre-wrap;
+  `
+
   export default {
     name: 'InfoModal',
     components: {
+      RCModal,
       ModalContainer,
+      ModalTitle,
       ButtonContainer,
-      ActionModal,
+      TextContainer,
       RCMainButton,
     },
-    props: ['isOpen'],
+    props: {
+      isOpen: {
+        type: Boolean,
+        required: true,
+      },
+      buttonText: {
+        type: String,
+        default: 'Got it',
+      },
+    },
     methods: {
       closeModal() {
         this.$emit('on-close')

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

@@ -0,0 +1,55 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import InfoModal from '@/components/modals/infoModal'
+import theme from '@/assets/theme'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  // need to mock this due to how jest handles import.meta
+  fetchIcon: jest.fn(() => Promise.resolve('')),
+}))
+
+
+describe('InfoModal Component', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(InfoModal, {
+      props: {
+        isOpen: true,
+        buttonText: 'Close',
+      },
+      slots: {
+        title: 'Sample title',
+        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.',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+  })
+
+  test('renders InfoModal component with default props', () => {
+    expect(wrapper.find('[data-test-id="infoModal"]').exists()).toBe(true)
+
+    expect(wrapper.vm.isOpen).toBe(true)
+    expect(wrapper.vm.buttonText).toContain('Close')
+  })
+
+  test('info modal slots is display when user passed slots content', () => {
+    const modalTitleEl = wrapper.find('[data-test-id="modal_title"]')
+    expect(modalTitleEl.text()).toBe('Sample title')
+
+    const modalBodyEl = wrapper.find('[data-test-id="modal_body"]')
+    expect(modalBodyEl.text()).toContain('Lorem ipsum dolor sit amet')
+  })
+
+  test('info modal on-close event is emitted when modal close button is clicked', async () => {
+    const modalCloseButton = wrapper.find('.close')
+
+    modalCloseButton.trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted('on-close')).toBeTruthy()
+  })
+})

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

@@ -0,0 +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>
+    `,
+  }),
+}

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

@@ -1,8 +1,10 @@
 <template>
   <PageWrapper
     v-if="isOpen"
+    ref="modalRef"
     :add-padding-top="addPaddingTop"
     :backdrop="backdrop"
+    class="rc-modal-wrapper"
     :is-open="isOpen"
     :position="position"
   >
@@ -16,7 +18,11 @@
       <ContentContainer v-if="!isLoading">
         <slot></slot>
       </ContentContainer>
-      <CloseButton v-if="!hideClose" class="close" @click="onCloseModal()" />
+      <CloseButton
+        v-if="!hideClose && !isLoading"
+        class="close"
+        @click="onCloseModal()"
+      />
     </ModalContainer>
   </PageWrapper>
 </template>
@@ -32,6 +38,7 @@
   //   <div>Data....</div>
   // </modal>
 
+  import { ref, provide } from 'vue'
   import styled from 'vue3-styled-components'
   import CloseButton from '../../buttons/closeButton'
   import Spinner from '../../spinner'
@@ -54,14 +61,14 @@
     props.backdrop == 'dark'
       ? 'rgba(0, 0, 0, 0.4)'
       : 'rgba(255, 255, 255, 0.9)'};
-  z-index: 99999;
+  z-index: 9999999;
   overflow: auto;
   padding-top: ${(props) => (props.addPaddingTop ? '80px' : '0')};
 
-  @media (max-width: 425px) {
-    background: white;
-  }
-`
+    @media (max-width: 425px) {
+      background: white;
+    }
+  `
 
   const modalContainerAttrs = { overflow: String, isLoading: Boolean }
   const ModalContainer = styled('div', modalContainerAttrs)`
@@ -159,6 +166,14 @@
         default: false,
       },
     },
+    setup() {
+      const modalRef = ref(null)
+      provide('modalRef', modalRef)
+
+      return {
+        modalRef,
+      }
+    },
     watch: {
       isOpen: {
         immediate: true,

package/src/components/pageSubtitle/PageSubtitle.stories.js

@@ -16,7 +16,6 @@ export default {
       description: 'Text for tooltip',
     },
   },
-  tags: ['autodocs'],
 }
 
 // To use:

package/src/components/pageTitle/index.vue

@@ -1,8 +1,8 @@
 <template>
   <TitleWrap data-test-id="page_wrapper" :has-info-text="!!infoText">
     <TitleText
-      data-test-id="page_title_text"
       :color="color"
+      data-test-id="page_title_text"
       :font-size="fontSize"
       :uppercase="uppercase"
     >
@@ -10,8 +10,8 @@
     </TitleText>
     <InfoText
       v-if="!!infoText"
-      data-test-id="page_title_tooltip"
       :align-arrow="infoAlign"
+      data-test-id="page_title_tooltip"
       :text="infoText"
     />
   </TitleWrap>
@@ -44,9 +44,8 @@
   const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
   const TitleText = styled('span', titleAttrs)`
     color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
-    font-weight: bold;
+    font-weight: 500;
     font-size: ${(props) => (props.fontSize ? props.fontSize : '20px')};
-    text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
   `
 
   export default {

package/src/components/spinner/index.vue

@@ -43,8 +43,8 @@
     align-items: center;
     justify-items: center;
     position: ${(props) => (props.limitedToModal ? 'absolute' : 'inherit')};
-    height: ${(props) => (props.limitedToModal ? '100%' : 'auto')};
-    width: ${(props) => (props.limitedToModal ? '100%' : 'auto')};
+    height: 100%;
+    width: 100%;
   `
 
   const wrapperAttrs = { size: String }

package/src/components/spinnerGif/index.vue

@@ -1,7 +1,7 @@
 <template>
   <SpinnerContainer v-if="fullWidth" data-test-id="spinner_full_container">
     <Container>
-      <SpinnerWrapper data-test-id="spinner_full_wrapper">
+      <SpinnerWrapper data-test-id="spinner_full_wrapper" :size="size">
         <img
           :class="{ white: isWhite }"
           data-test-id="spinner_full_icon"
@@ -16,7 +16,7 @@
     data-test-id="spinner_container"
     :limited-to-modal="limitedToModal"
   >
-    <SpinnerWrapper data-test-id="spinner_wrapper">
+    <SpinnerWrapper data-test-id="spinner_wrapper" :size="size">
       <img
         :class="{ white: isWhite }"
         data-test-id="spinner_full_icon"
@@ -55,7 +55,7 @@
     width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
   `
 
-  const SpinnerWrapper = styled.div`
+  const SpinnerWrapper = styled('div', { size: String })`
     width: ${(props) => (props.size ? props.size : '60px')};
     height: auto;
 

package/src/components/tableDropdown/index.vue

@@ -25,7 +25,7 @@
                 item.type === 'template')
             "
           />
-          <TableItem
+          <TemplateItem
             v-if="
               item.type &&
               item.type === 'template' &&
@@ -40,7 +40,7 @@
               :variant="showArchived ? 'cancel' : 'main'"
               @click.stop="onTemplateClick(item.row)"
             />
-          </TableItem>
+          </TemplateItem>
           <TemplateLink
             v-else-if="
               item.type && item.type === 'template' && item.value !== ''
@@ -101,7 +101,7 @@
         <ArrowWrapper :show-archived="showArchived">
           <InfoWrapper v-if="showArchived">
             <InfoText
-              icon-color="red"
+              button-type="error"
               :text="
                 $gettext(`Component has been archived and shouldn't be used`)
               "
@@ -140,10 +140,10 @@
               @keyup.enter="onItemClick(item)"
             >
               <template v-for="(option, idx) in optionsDisplay" :key="idx">
-                <TableItem v-if="option !== 'template'">
+                <DropdownItem v-if="option !== 'template'">
                   {{ !!item[option] ? item[option] : '-' }}
-                </TableItem>
-                <TableItem
+                </DropdownItem>
+                <TemplateItem
                   v-else-if="option === 'template' && item.has_template"
                 >
                   <MainButton
@@ -152,7 +152,7 @@
                     type="secondary"
                     @click.stop="onTemplateClick(item)"
                   />
-                </TableItem>
+                </TemplateItem>
                 <NoTemplate
                   v-else-if="option === 'template' && !item.has_template"
                 >
@@ -219,7 +219,7 @@
 
     .input-placeholder {
       height: 25px;
-      padding-left: 12px;
+      margin-left: -2px;
     }
   `
 
@@ -250,6 +250,12 @@
     padding-left: 15px;
   `
 
+  const TemplateItem = styled.span`
+    padding-left: 15px;
+  `
+
+  const DropdownItem = styled.span``
+
   const containerAttrs = { colSpan: Number, width: String }
   const ComponentContainer = styled('div', containerAttrs)`
     display: contents;
@@ -390,7 +396,7 @@
   const inputContainerAttrs = { hasMessage: Boolean }
   const InputContainer = styled('div', inputContainerAttrs)`
     margin-left: ${(props) => (props.hasMessage ? '10px' : '0')};
-    display: flex;
+    display: block;
     align-items: center;
     justify-content: flex-start;
 
@@ -480,6 +486,8 @@
       InfoText,
       InfoWrapper,
       TableItem,
+      TemplateItem,
+      DropdownItem,
     },
     props: {
       colSpan: {

package/src/components/tables/mainTable/index.vue

@@ -239,8 +239,6 @@
 
       &.checkbox-header {
         min-width: 40px;
-        display: flex;
-        gap: 10px;
       }
     }
 
@@ -258,6 +256,10 @@
           background-color: ${(props) => props.theme.colors.grey5};
         }
 
+        td:first-of-type {
+          padding-left: 15px !important;
+        }
+
         .text {
           cursor: auto !important;
         }

package/src/helpers/dateTimeFormatting.js

@@ -0,0 +1,51 @@
+// functions for standard date and time formatting
+
+// e.g. 13.12.2024
+export const toLocaleDate = ({
+  locale = localStorage.getItem('lang'),
+  value,
+}) => {
+  const localeLC = locale.toLowerCase()
+  const options = {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+  }
+
+  return new Intl.DateTimeFormat(localeLC, options).format(Date.parse(value))
+}
+
+// e.g. 31 December 2024
+export const toLocaleDateLong = ({
+  locale = localStorage.getItem('lang'),
+  value,
+}) => {
+  const localeLC = locale.toLowerCase()
+  const options = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }
+
+  return new Intl.DateTimeFormat(localeLC, options).format(Date.parse(value))
+}
+
+// e.g. 08:45
+export const toLocaleTime = ({
+  locale = localStorage.getItem('lang'),
+  value,
+}) => {
+  const nonDefaultFormatting = {
+    'es-es': { hour: '2-digit' },
+    'cs-es': { hour: '2-digit' },
+  }
+
+  const localeLC = locale.toLowerCase()
+  const options = {
+    hour: 'numeric',
+    minute: 'numeric',
+    ...nonDefaultFormatting[localeLC],
+  }
+
+  return new Intl.DateTimeFormat(localeLC, options).format(Date.parse(value))
+}

package/src/main.js

@@ -2,14 +2,7 @@ import App from './App.vue'
 import { createApp } from 'vue'
 import router from './router/dynamicRoutes'
 
-const link = document.createElement('link')
-link.href =
-  'https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300&display=swap'
-link.rel = 'stylesheet'
-document.getElementsByTagName('head')[0].appendChild(link)
-
 const app = createApp(App)
 
-app.config.globalProperties.$c = console
 app.use(router)
 app.mount('#app')

package/src/router/dynamicRoutes.js

@@ -1,8 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Test from '@/Test.vue'
 import Toggle from '@/components/inputs/toggle/index.vue'
-import TestChart from '@/TestChart.vue'
-import DemoCharts from '@/DemoCharts.vue'
 
 const routes = [
   {
@@ -15,16 +13,6 @@ const routes = [
     name: 'Toggle',
     component: Toggle,
   },
-  {
-    path: '/test-chart',
-    name: 'TestChart',
-    component: TestChart,
-  },
-  {
-    path: '/demo-charts',
-    name: 'DemoCharts',
-    component: DemoCharts,
-  },
 ]
 
 const router = createRouter({