@eturnity/eturnity_reusable_components 7.37.4 → 7.37.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.37.4",
+  "version": "7.37.5",
   "files": [
     "dist",
     "src"

package/src/components/pageTitle/PageTitle.stories.js

@@ -0,0 +1,95 @@
+import PageTitle from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'PageTitle',
+  component: PageTitle,
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: {
+        type: 'color',
+        presetColors: [theme.colors.primary],
+      },
+    },
+    uppercase: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    infoText: {
+      description: 'Text for tooltip',
+    },
+    infoAlign: {
+      description: 'Tooltip alignment',
+      control: 'multi-select',
+      options: ['center', 'right', 'left'],
+    },
+  },
+  tags: ['autodocs'],
+}
+
+// To use:
+// <PageTitle
+//   text="My Page Title"
+//   color="red"
+//   font-size="13px"
+//   uppercase="true"
+//   info-text="My info text"
+//   info-align="center"
+// />
+
+export const Default = {
+  args: {
+    text: 'My Page Title',
+    color: theme.colors.black,
+    uppercase: true,
+    infoText: '',
+    infoAlign: 'center',
+  },
+}
+
+export const TitleColor = {
+  args: {
+    ...Default.args,
+    color: theme.colors.primary,
+  },
+}
+
+export const TitleFontSize = {
+  args: {
+    ...Default.args,
+    fontSize: '13px',
+  },
+}
+
+export const TitleNotUppercase = {
+  args: {
+    ...Default.args,
+    uppercase: false,
+  },
+}
+
+export const TitleTooltip = {
+  name: 'Title Tooltip Default Alignment',
+  args: {
+    ...Default.args,
+    infoText: 'My tooltip info',
+  },
+}
+
+export const TitleTooltipRightAlignment = {
+  args: {
+    ...TitleTooltip.args,
+    infoText: 'My tooltip info',
+    infoAlign: 'right',
+  },
+}
+
+export const TitleTooltipLeftAlignment = {
+  args: {
+    ...TitleTooltip.args,
+    infoText: 'My tooltip info',
+    infoAlign: 'left',
+  },
+}

package/src/components/pageTitle/index.vue

@@ -1,18 +1,32 @@
 <template>
-  <TitleWrap :has-info-text="!!infoText">
-    <TitleText :color="color" :font-size="fontSize" :uppercase="uppercase">
+  <TitleWrap data-test-id="page_wrapper" :has-info-text="!!infoText">
+    <TitleText
+      data-test-id="page_title_text"
+      :color="color"
+      :font-size="fontSize"
+      :uppercase="uppercase"
+    >
       {{ text }}
     </TitleText>
-    <InfoText v-if="!!infoText" :align-arrow="infoAlign" :text="infoText" />
+    <InfoText
+      v-if="!!infoText"
+      data-test-id="page_title_tooltip"
+      :align-arrow="infoAlign"
+      :text="infoText"
+    />
   </TitleWrap>
 </template>
 
 <script>
   // import PageTitle from "@eturnity/eturnity_reusable_components/src/components/pageTitle"
   // To use:
-  // <page-title
+  // <PageTitle
   //   text="My Page Title"
   //   color="red"
+  //   font-size="13px"
+  //   uppercase="true"
+  //   info-text="My info text"
+  //   info-align="center"
   // />
   import styled from 'vue3-styled-components'
   import InfoText from '../infoText'
@@ -45,23 +59,32 @@
     props: {
       text: {
         required: true,
+        type: String,
       },
       color: {
         required: false,
+        type: String,
+        default: '',
       },
       fontSize: {
         required: false,
+        type: String,
+        default: '',
       },
       uppercase: {
         required: false,
+        type: Boolean,
         default: true,
       },
       infoText: {
         required: false,
-        default: null,
+        type: String,
+        default: '',
       },
       infoAlign: {
         required: false,
+        type: String,
+        default: 'center',
       },
     },
   }

package/src/components/pageTitle/pageTitle.spec.js

@@ -0,0 +1,46 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import RCPageTitle from '@/components/pageTitle'
+import RCInfoText from '@/components/infoText'
+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('mocked-icon-url.svg')),
+}))
+
+const titleText = 'Test Page Title'
+const infoText = 'Test Tooltip Text'
+
+describe('RCPageTitle.vue', () => {
+  it('page title is rendered with correct text', async () => {
+    const wrapper = mount(RCPageTitle, {
+      props: { text: titleText },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const pageTitleText = wrapper.find('[data-test-id="page_title_text"]')
+
+    expect(pageTitleText.exists()).toBe(true)
+    expect(pageTitleText.text()).toContain(titleText)
+  }),
+    it('page title tooltip is rendered with correct text prop content', async () => {
+      const wrapper = mount(RCPageTitle, {
+        props: { text: titleText, infoText: infoText },
+        global: {
+          provide: {
+            theme,
+          },
+        },
+      })
+
+      const toltipComponent = wrapper.findComponent(RCInfoText)
+
+      expect(toltipComponent.exists()).toBe(true)
+      expect(toltipComponent.vm.text).toContain(infoText)
+    })
+})