@eturnity/eturnity_reusable_components 7.39.5-qa-elisee-7.42.1 → 7.45.1-EPDM-12459.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.39.5-qa-elisee-7.42.1",
+  "version": "7.45.1-EPDM-12459.0",
   "files": [
     "dist",
     "src"

package/src/assets/theme.js

@@ -35,9 +35,6 @@ const theme = {
     tablet: '768px',
     tabletLarge: '950px',
   },
-  fonts: {
-    mainFont: '"Figtree", sans-serif',
-  },
   borderRadius: '4px',
 }
 

package/src/components/banner/infoBanner/InfoBanner.spec.js

@@ -0,0 +1,70 @@
+/* eslint-disable */
+import { h } from 'vue'
+import { mount } from '@vue/test-utils'
+import InfoBanner from '@/components/banner/infoBanner'
+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('Info Banner Component', () => {
+  const props = {
+    isOpen: false,
+    buttonLabel: 'Gotcha',
+  }
+
+  const global = {
+    provide: {
+      theme,
+    },
+  }
+
+  it('info banner is shown when isOpen props is true', async () => {
+    const wrapper = mount(InfoBanner, {
+      props,
+      global,
+    })
+
+    const bannerWrapper = wrapper.find('[data-test-id="info_banner_wrapper"]')
+    expect(bannerWrapper.exists()).toBe(true)
+    expect(bannerWrapper.classes()).not.toContain('visible')
+    expect(bannerWrapper.classes()).toContain('hidden')
+    await wrapper.setProps({ isOpen: true })
+    expect(bannerWrapper.classes()).toContain('visible')
+    expect(bannerWrapper.classes()).not.toContain('hidden')
+  })
+
+  it('info banner slots is display when user passed slots content', async () => {
+    const titleText = 'Sample title'
+    const bodyText = 'Sample body text'
+
+    const wrapper = mount(InfoBanner, {
+      props,
+      slots: {
+        title: titleText,
+        body: bodyText,
+      },
+      global,
+    })
+
+    const modalTitleEl = wrapper.find('[data-test-id="modal_title"]')
+    expect(modalTitleEl.text()).toBe(titleText)
+    const modalBodyEl = wrapper.find('[data-test-id="modal_body"]')
+    expect(modalBodyEl.text()).toBe(bodyText)
+  })
+
+  it('info banner on-close event is emitted when modal close button is clicked', async () => {
+    const wrapper = mount(InfoBanner, {
+      props,
+      global,
+    })
+
+    const modalCloseButton = wrapper.find('.close')
+    await modalCloseButton.trigger('click')
+    expect(wrapper.emitted('on-close')).toBeTruthy()
+    const emittedEvent = wrapper.emitted('on-close')
+    expect(emittedEvent).toHaveLength(1)
+  })
+})

package/src/components/banner/infoBanner/InfoBanner.stories.js

@@ -0,0 +1,42 @@
+import InfoBanner from './index.vue'
+import theme from '@/assets/theme'
+export default {
+  title: 'InfoBanner',
+  component: InfoBanner,
+  tags: ['autodocs'],
+}
+
+// <RCInfoBanner
+//   :isOpen="true"
+//   buttonLabel="Got it"
+//   @on-close="handleClose"
+// >
+//   <template #title>Sample title</template>
+//   <template #body>Sample body</template>
+// </RCInfoBanner>
+
+export const Default = {
+  args: {
+    isOpen: false,
+    buttonLabel: 'Got it',
+  },
+}
+
+export const OpenedInfoBanner = {
+  args: {
+    isOpen: true,
+    buttonLabel: 'Got it',
+  },
+  render: (args) => ({
+    components: { InfoBanner },
+    setup() {
+      return { args }
+    },
+    template: `
+      <InfoBanner v-bind="args">
+        <template #title>Sample title</template>
+        <template #body>Sample body</template>
+      </InfoBanner>
+    `,
+  }),
+}

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

@@ -1,45 +1,75 @@
 <template>
-  <ActionModal :is-open="isOpen" @on-close="closeModal">
+  <RCModal
+    data-test-id="info_banner_wrapper"
+    :is-open="isOpen"
+    @on-close="closeModal"
+  >
     <ModalContainer>
-      <template name="title">
+      <ModalTitle v-if="$slots.title" data-test-id="modal_title">
         <slot name="title"></slot>
-      </template>
-      <template name="body">
+      </ModalTitle>
+      <TextContainer v-if="$slots.body" data-test-id="modal_body">
         <slot name="body"></slot>
-      </template>
-      <template name="buttons">
-        <ButtonContainer>
-          <Button
-            min-width="150px"
-            :text="$gettext('Got it')"
-            type="primary"
-            @click="closeModal"
-          />
-        </ButtonContainer>
-      </template>
+      </TextContainer>
+      <ButtonContainer>
+        <RCButton
+          data-test-id="modal_buttons"
+          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 '@/components/modals/modal'
+  import RCButton from '@/components/buttons/mainButton'
 
   const ModalContainer = styled.div`
     width: 450px;
+    display: flex;
+    flex-direction: column;
     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;
+    flex-grow: 1;
+    align-items: flex-end;
     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: {
       ModalContainer,
+      ModalTitle,
+      TextContainer,
       ButtonContainer,
-      ActionModal,
+      RCModal,
+      RCButton,
     },
     props: {
       isOpen: {
@@ -47,6 +77,16 @@
         default: false,
         type: Boolean,
       },
+      buttonLabel: {
+        default: null,
+        type: String,
+      },
+    },
+    computed: {
+      buttonText() {
+        //work around for storybook not finding the $gettext function
+        return this.buttonLabel || this.$gettext('Got it')
+      },
     },
     methods: {
       closeModal() {

package/src/components/icon/index.vue

@@ -111,10 +111,10 @@
         props.backgroundColor ? props.backgroundColor : 'transparent'};
       padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
     }
-    svg path:not(.fix) {
+    svg path {
       ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
     }
-    &:hover svg path:not(.fix) {
+    &:hover svg path {
       ${({ theme, hoveredColor }) =>
         hoveredColor && `fill: ${theme.colors[hoveredColor] || hoveredColor};`}
     }

package/src/components/infoCard/index.vue

@@ -1,10 +1,6 @@
 <template>
-  <InfoContainer
-    background-color="backgrounColor"
-    :border-color="borderColor"
-    :has-dashed-border="hasDashedBorder"
-  >
-    <RCIcon :color="color" name="info" size="24px" />
+  <InfoContainer>
+    <RCIcon name="info" size="24px" :color="color" />
     <TextContainer>
       <slot></slot>
     </TextContainer>
@@ -14,24 +10,12 @@
 <script>
   import styled from 'vue3-styled-components'
   import RCIcon from '../icon'
-  const propsContainer = {
-    backgroundColor: String,
-    hasDashedBorder: Boolean,
-    borderColor: String,
-  }
-  const InfoContainer = styled('div', propsContainer)`
+
+  const InfoContainer = styled.div`
     display: flex;
     gap: 15px;
-    padding: 15px;
-    border: 1px ${(props) => (props.hasDashedBorder ? 'dashed' : 'solid')}
-      ${(props) =>
-        props.theme.colors[props.borderColor]
-          ? props.theme.colors[props.borderColor]
-          : props.borderColor};
-    background-color: ${(props) =>
-      props.theme.colors[props.backgroundColor]
-        ? props.theme.colors[props.backgroundColor]
-        : props.backgroundColor};
+    padding: 20px;
+    border: 1px dashed ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
   `
 
@@ -49,19 +33,8 @@
     },
     props: {
       color: {
-        required: false,
-      },
-      backgrounColor: {
-        required: false,
-      },
-      hasDashedBorder: {
-        required: false,
-        default: true,
-      },
-      borderColor: {
-        required: false,
-        default: 'grey4',
-      },
-    },
+        required: false
+      }
+    }
   }
 </script>

package/src/components/infoText/index.vue

@@ -2,6 +2,7 @@
   <ComponentWrapper>
     <IconWrapper :size="size">
       <IconImg
+        data-test-id="infoText_trigger"
         @click.prevent="toggleShowInfo()"
         @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
         @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
@@ -18,11 +19,10 @@
         :align-arrow="alignArrow"
         :half-computed-text-info-width="halfComputedTextInfoWidth"
         :icon-size="size"
-        :info-position="infoPosition"
         :max-width="maxWidth"
         :width="width"
         ><slot></slot>
-        <span v-if="text.length > 0" v-html="text"></span>
+        <span v-html="text"></span>
       </TextOverlay>
     </IconWrapper>
   </ComponentWrapper>
@@ -45,14 +45,10 @@
     alignArrow: String,
     width: String,
     halfComputedTextInfoWidth: Number,
-    infoPosition: String,
   }
   const TextOverlay = styled('div', textAttrs)`
     position: absolute;
-    ${(props) =>
-      props.infoPosition == 'top'
-        ? 'bottom : calc(' + props.iconSize + ' + 15px)'
-        : 'top : calc(' + props.iconSize + ' + 15px)'};
+    top: ${(props) => 'calc(' + props.iconSize + ' + 15px)'};
     ${(props) =>
       props.alignArrow === 'left'
         ? 'left: calc(' + props.iconSize + ' /2 - 18px)'
@@ -68,17 +64,14 @@
     font-weight: 400;
     line-height: normal;
     border-radius: 4px;
-    z-index: 999;
+    z-index: 99;
     color: ${(props) => props.theme.colors.white};
 
     :before {
       content: '';
       background-color: ${(props) => props.theme.colors.black};
       position: absolute;
-
-      ${(props) =>
-        props.infoPosition == 'top' ? 'bottom : -10px' : 'top: 2px'};
-
+      top: 2px;
       ${(props) =>
         props.alignArrow === 'left'
           ? 'left:40px;'
@@ -122,37 +115,26 @@
     props: {
       text: {
         required: false,
-        default: '',
-        type: String,
       },
       size: {
         required: false,
         default: '14px',
-        type: String,
-      },
-      infoPosition: {
-        required: false,
-        default: 'bottom',
-        type: String,
       },
       alignArrow: {
         required: false,
         default: 'center',
-        type: String,
       },
       openTrigger: {
         required: false,
         default: 'onHover', // onHover, onClick
-        type: String,
       },
       width: {
         required: false,
         default: '200px',
-        type: String,
       },
       maxWidth: {
-        default: '400px',
         type: String,
+        default: '400px',
       },
     },
     data() {

package/src/components/inputs/inputText/InputText.stories.js

@@ -3,68 +3,73 @@ import InputText from './index.vue'
 export default {
   title: 'InputText',
   component: InputText,
-  tags: ['autodocs'],
+  // argTypes: {},
 }
 
-// import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
-// To use:
-// <input-text
-//   placeholder="Company name"
-//   :value="companyName"
-//   @input-change="onInputChange({ value: $event, type: 'companyName' })"
-//   :isError="checkErrors()"
-//   :errorMessage="This is my error message"
-//   infoTextAlign="right" // left by default
-//   infoTextMessage="My info message"
-//   label="Question 5"
-//   alignItems="horizontal" // horizontal, vertical
-//   inputWidth="250px"
-//   minWidth="100px"
-// />
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { InputText },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<input-text v-bind="$props" />',
 
-export const Default = {
-  args: {
-    placeholder: 'Company name',
-    disabled: false,
-    value: '',
-    inputWidth: '200px',
-    minWidth: '10ch',
-    isError: false,
-    label: 'label test',
-    labelOptional: true,
-  },
+  // import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
+  // To use:
+  // <input-text
+  //   placeholder="Company name"
+  //   :value="companyName"
+  //   @input-change="onInputChange({ value: $event, type: 'companyName' })"
+  //   :isError="checkErrors()"
+  //   :errorMessage="This is my error message"
+  //   infoTextAlign="right" // left by default
+  //   infoTextMessage="My info message"
+  //   label="Question 5"
+  //   alignItems="horizontal" // horizontal, vertical
+  //   inputWidth="250px"
+  //   minWidth="100px"
+  // />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  placeholder: 'Company name',
+  disabled: false,
+  value: '',
+  inputWidth: '200px',
+  minWidth: '10ch',
+  unitName: 'pc',
+  isError: false,
+  textAlign: 'left',
 }
 
-export const HasError = {
-  args: {
-    placeholder: 'Enter Value',
-    errorMessage: 'This field is required',
-    isError: true,
-    disabled: false,
-    inputWidth: '200px',
-  },
+export const hasError = Template.bind({})
+hasError.args = {
+  placeholder: 'Enter Value',
+  errorMessage: 'This field is required',
+  isError: true,
+  disabled: false,
+  inputWidth: '200px',
 }
 
-export const Disabled = {
-  args: {
-    placeholder: 'Enter Value',
-    disabled: true,
-    value: '',
-    inputWidth: '200px',
-    isError: false,
-  },
+export const Disabled = Template.bind({})
+Disabled.args = {
+  placeholder: 'Enter Value',
+  disabled: true,
+  value: '',
+  inputWidth: '200px',
+  isError: false,
 }
 
-export const WithLabel = {
-  args: {
-    placeholder: 'Company name',
-    disabled: false,
-    label: 'What is the best company in Switzerland?',
-    value: 'Eturnity',
-    inputWidth: '200px',
-    unitName: 'pc',
-    isError: false,
-    errorMessage: 'Maximum 5 characters',
-    alignItems: 'vertical',
-  },
+export const WithLabel = Template.bind({})
+WithLabel.args = {
+  placeholder: 'Company name',
+  disabled: false,
+  label: 'What is the best company in Switzerland?',
+  value: 'Eturnity',
+  inputWidth: '200px',
+  unitName: 'pc',
+  isError: false,
+  errorMessage: 'Maximum 5 characters',
+  textAlign: 'left',
+  alignItems: 'vertical',
 }