@eturnity/eturnity_reusable_components 7.48.1-EPDM-10964.0 → 7.48.1-EPDM-10679.1

package/src/assets/tests/helpers.js

@@ -1,12 +1,12 @@
-export function convertHexToRGB(hex) {
-  // Remove the '#' if it's included in the input
-  hex = hex.replace(/^#/, '')
-
-  // Parse the hex values into separate R, G, and B values
-  const red = parseInt(hex.substring(0, 2), 16)
-  const green = parseInt(hex.substring(2, 4), 16)
-  const blue = parseInt(hex.substring(4, 6), 16)
-
-  // Return the RGB values as a string
-  return `rgb(${red}, ${green}, ${blue})`
-}
+export function convertHexToRGB(hex) {
+  // Remove the '#' if it's included in the input
+  hex = hex.replace(/^#/, '')
+
+  // Parse the hex values into separate R, G, and B values
+  const red = parseInt(hex.substring(0, 2), 16)
+  const green = parseInt(hex.substring(2, 4), 16)
+  const blue = parseInt(hex.substring(4, 6), 16)
+
+  // Return the RGB values as a string
+  return `rgb(${red}, ${green}, ${blue})`
+}

package/src/assets/theme.js

@@ -1,44 +1,45 @@
-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',
-  },
-  fonts: {
-    mainFont: '"Figtree", sans-serif',
-  },
-  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',
+    pureRed: '#ff0000',
+    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',
+  },
+  fonts: {
+    mainFont: '"Figtree", sans-serif',
+  },
+  borderRadius: '4px',
+}
+
+export default theme

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

@@ -1,17 +1,17 @@
-import AddNewButton from './index.vue'
-
-export default {
-  title: 'AddNewButton',
-  component: AddNewButton,
-  tags: ['autodocs'],
-}
-
-// import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
-// To use:
-// <add-new-button :shouldPosition="true" />
-
-export const Default = {
-  args: {
-    shouldPosition: true,
-  },
-}
+import AddNewButton from './index.vue'
+
+export default {
+  title: 'AddNewButton',
+  component: AddNewButton,
+  tags: ['autodocs'],
+}
+
+// import AddNewButton from "@eturnity/eturnity_reusable_components/src/components/addNewButton"
+// To use:
+// <add-new-button :shouldPosition="true" />
+
+export const Default = {
+  args: {
+    shouldPosition: true,
+  },
+}

package/src/components/addNewButton/addNewButton.spec.js

@@ -1,23 +1,23 @@
-/* eslint-disable */
-import { mount } from '@vue/test-utils'
-import AddNewButton from '@/components/addNewButton'
-import theme from '@/assets/theme'
-
-describe('addNewButton.vue', () => {
-  it('it is rendered with initial props', async () => {
-    // a very simple test to make sure the component renders
-    // no other tests needed since there aren't any other props
-    const wrapper = mount(AddNewButton, {
-      props: { dataId: 'button_wrapper', shouldPosition: true },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-    await wrapper.vm.$nextTick()
-    const componentWrapper = wrapper.find('[data-id="button_wrapper"]')
-    // check that the element exists
-    expect(componentWrapper.exists()).toBe(true)
-  })
-})
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import AddNewButton from '@/components/addNewButton'
+import theme from '@/assets/theme'
+
+describe('addNewButton.vue', () => {
+  it('it is rendered with initial props', async () => {
+    // a very simple test to make sure the component renders
+    // no other tests needed since there aren't any other props
+    const wrapper = mount(AddNewButton, {
+      props: { dataId: 'button_wrapper', shouldPosition: true },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    await wrapper.vm.$nextTick()
+    const componentWrapper = wrapper.find('[data-id="button_wrapper"]')
+    // check that the element exists
+    expect(componentWrapper.exists()).toBe(true)
+  })
+})

package/src/components/addNewButton/index.vue

@@ -1,62 +1,62 @@
-<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,
-        type: Boolean,
-      },
-      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,
+        type: Boolean,
+      },
+      dataId: {
+        type: String,
+        default: '',
+      },
+    },
+  }
+</script>

package/src/components/banner/actionBanner/ActionBanner.stories.js

@@ -1,45 +1,45 @@
-import ActionBanner from './index.vue'
-import theme from '@/assets/theme'
-export default {
-  title: 'ActionBanner',
-  component: ActionBanner,
-  tags: ['autodocs'],
-}
-
-// <RCActionBanner
-//   :isOpen="true"
-//   @on-close="handleClose"
-// >
-//   <template #title>Sample title</template>
-//   <template #body>Sample body</template>
-//   <template #buttons>
-//     <button>Sample button </button>
-//   </template>
-// </RCActionBanner>
-
-export const Default = {
-  args: {
-    isOpen: false,
-  },
-}
-
-export const OpenedActionBanner = {
-  args: {
-    isOpen: true,
-  },
-  render: (args) => ({
-    components: { ActionBanner },
-    setup() {
-      return { args }
-    },
-    template: `
-      <ActionBanner v-bind="args">
-        <template #title>Sample title</template>
-        <template #body>Sample body</template>
-        <template #buttons>
-          <button>Sample button </button>
-        </template>
-      </ActionBanner>
-    `,
-  }),
-}
+import ActionBanner from './index.vue'
+import theme from '@/assets/theme'
+export default {
+  title: 'ActionBanner',
+  component: ActionBanner,
+  tags: ['autodocs'],
+}
+
+// <RCActionBanner
+//   :isOpen="true"
+//   @on-close="handleClose"
+// >
+//   <template #title>Sample title</template>
+//   <template #body>Sample body</template>
+//   <template #buttons>
+//     <button>Sample button </button>
+//   </template>
+// </RCActionBanner>
+
+export const Default = {
+  args: {
+    isOpen: false,
+  },
+}
+
+export const OpenedActionBanner = {
+  args: {
+    isOpen: true,
+  },
+  render: (args) => ({
+    components: { ActionBanner },
+    setup() {
+      return { args }
+    },
+    template: `
+      <ActionBanner v-bind="args">
+        <template #title>Sample title</template>
+        <template #body>Sample body</template>
+        <template #buttons>
+          <button>Sample button </button>
+        </template>
+      </ActionBanner>
+    `,
+  }),
+}

package/src/components/banner/actionBanner/actionBanner.spec.js

@@ -1,76 +1,76 @@
-/* eslint-disable */
-import { h } from 'vue'
-import { mount } from '@vue/test-utils'
-import ActionBanner from '@/components/banner/actionBanner'
-import theme from '@/assets/theme'
-
-describe('Action Banner Component', () => {
-  it('action banner is shown when isOpen props is true', async () => {
-    const wrapper = mount(ActionBanner, {
-      props: {
-        isOpen: false,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const bannerWrapper = wrapper.find('[data-test-id="action_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('action banner slots is display when user passed slots content', async () => {
-    const titleText = 'Sample title'
-    const bodyText = 'Sample body text'
-    const buttonText = 'Sample button'
-
-    const wrapper = mount(ActionBanner, {
-      props: {
-        isOpen: false,
-      },
-      slots: {
-        title: titleText,
-        body: bodyText,
-        buttons: h('button', {}, buttonText),
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    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)
-    const modalButtonsEl = wrapper.find('[data-test-id="modal_buttons"]')
-    expect(modalButtonsEl.text()).toBe(buttonText)
-  })
-
-  it('action banner on-close event is emitted when modal close button is clicked', async () => {
-    const wrapper = mount(ActionBanner, {
-      props: {
-        isOpen: true,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    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)
-  })
-})
+/* eslint-disable */
+import { h } from 'vue'
+import { mount } from '@vue/test-utils'
+import ActionBanner from '@/components/banner/actionBanner'
+import theme from '@/assets/theme'
+
+describe('Action Banner Component', () => {
+  it('action banner is shown when isOpen props is true', async () => {
+    const wrapper = mount(ActionBanner, {
+      props: {
+        isOpen: false,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const bannerWrapper = wrapper.find('[data-test-id="action_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('action banner slots is display when user passed slots content', async () => {
+    const titleText = 'Sample title'
+    const bodyText = 'Sample body text'
+    const buttonText = 'Sample button'
+
+    const wrapper = mount(ActionBanner, {
+      props: {
+        isOpen: false,
+      },
+      slots: {
+        title: titleText,
+        body: bodyText,
+        buttons: h('button', {}, buttonText),
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    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)
+    const modalButtonsEl = wrapper.find('[data-test-id="modal_buttons"]')
+    expect(modalButtonsEl.text()).toBe(buttonText)
+  })
+
+  it('action banner on-close event is emitted when modal close button is clicked', async () => {
+    const wrapper = mount(ActionBanner, {
+      props: {
+        isOpen: true,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    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)
+  })
+})