@eturnity/eturnity_reusable_components 7.37.5 → 7.39.0

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

@@ -1,95 +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',
-  },
-}
+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,91 +1,91 @@
-<template>
-  <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"
-      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:
-  // <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'
-
-  const wrapAttrs = { hasInfoText: Boolean }
-  const TitleWrap = styled('div', wrapAttrs)`
-    display: grid;
-    align-items: center;
-    grid-gap: 12px;
-    grid-template-columns: ${(props) =>
-      props.hasInfoText ? 'auto auto 1fr' : '1fr'};
-    margin-bottom: 20px;
-  `
-
-  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-size: ${(props) => (props.fontSize ? props.fontSize : '20px')};
-    text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
-  `
-
-  export default {
-    name: 'PageTitle',
-    components: {
-      TitleText,
-      TitleWrap,
-      InfoText,
-    },
-    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,
-        type: String,
-        default: '',
-      },
-      infoAlign: {
-        required: false,
-        type: String,
-        default: 'center',
-      },
-    },
-  }
-</script>
+<template>
+  <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"
+      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:
+  // <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'
+
+  const wrapAttrs = { hasInfoText: Boolean }
+  const TitleWrap = styled('div', wrapAttrs)`
+    display: grid;
+    align-items: center;
+    grid-gap: 12px;
+    grid-template-columns: ${(props) =>
+      props.hasInfoText ? 'auto auto 1fr' : '1fr'};
+    margin-bottom: 20px;
+  `
+
+  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-size: ${(props) => (props.fontSize ? props.fontSize : '20px')};
+    text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
+  `
+
+  export default {
+    name: 'PageTitle',
+    components: {
+      TitleText,
+      TitleWrap,
+      InfoText,
+    },
+    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,
+        type: String,
+        default: '',
+      },
+      infoAlign: {
+        required: false,
+        type: String,
+        default: 'center',
+      },
+    },
+  }
+</script>

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

@@ -1,46 +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)
-    })
-})
+/* 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)
+    })
+})