@eturnity/eturnity_reusable_components 7.37.5 → 7.39.0

package/src/components/navigationTabs/index.vue

@@ -1,114 +1,114 @@
-<template>
-  <RoofTabWrap>
-    <Tab
-      v-for="(tab, index) in tabsData"
-      :key="tab.id"
-      :active="isIndexKey ? index === activeTab : tab[tabKey] === activeTab"
-      :is-disabled="!!tab['isDisabled']"
-      :text-color="tab['textColor']"
-      @click="$emit('tab-click', isIndexKey ? index : tab[tabKey])"
-    >
-      <Option :is-disabled="!!tab['isDisabled']" :text-color="tab['textColor']">
-        <Uppercase>{{ tab[tabLabel] }}</Uppercase>
-        <InfoText
-          v-if="tab['labelInfoText']"
-          :align-arrow="tab['labelInfoAlign']"
-          :text="tab['labelInfoText']"
-        />
-      </Option>
-    </Tab>
-    <BottomLine />
-  </RoofTabWrap>
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-  import InfoText from '../infoText'
-  const TabAttr = {
-    active: Boolean,
-    isDisabled: Boolean,
-    textColor: String,
-  }
-
-  const BottomLine = styled('div')`
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 1px;
-    width: 100%;
-    background-color: ${(props) => props.theme.colors.grey3};
-  `
-  const RoofTabWrap = styled('div')`
-    display: flex;
-    align-items: center;
-    position: relative;
-    font-size: 13px;
-    font-weight: 700;
-  `
-  const Uppercase = styled('span')`
-    text-transform: uppercase;
-  `
-  const Option = styled('div', TabAttr)`
-    font-size: 13px;
-    font-weight: 700;
-    display: flex;
-    justify-content: center;
-    flex-direction: row;
-    gap: 10px;
-    color: ${(props) =>
-      props.textColor
-        ? props.theme.colors[props.textColor]
-          ? props.theme.colors[props.textColor]
-          : props.textColor
-        : props.isDisabled
-        ? props.theme.colors.grey2
-        : props.theme.colors.black};
-  `
-  const Tab = styled('div', TabAttr)`
-    padding: 16px 10px;
-    margin-right: 5px;
-    position: relative;
-    top: ${(props) => (props.isDisabled ? '-1px' : '0')};
-    z-index: 10;
-    border-bottom: 2px solid
-      ${(props) => (props.active ? props.theme.colors.primary : 'transparent')};
-    background-color: ${(props) =>
-      props.isDisabled ? props.theme.colors.grey5 : 'transparent'};
-    transition: 0.2s ease;
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-    min-width: 140px;
-    display: flex !important;
-    align-items: center;
-    justify-content: space-between;
-    min-height: 55px;
-    &:hover {
-      border-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.colors.grey2
-          : props.theme.colors.primary};
-    }
-  `
-
-  export default {
-    name: 'Tabs',
-
-    components: {
-      Tab,
-      BottomLine,
-      RoofTabWrap,
-      Option,
-      InfoText,
-      Uppercase,
-    },
-
-    props: {
-      tabsData: { required: true },
-      activeTab: { required: true },
-      isIndexKey: { type: Boolean, default: false },
-      tabKey: { type: String, default: '' },
-      tabLabel: { type: String, default: '' },
-    },
-  }
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <RoofTabWrap>
+    <Tab
+      v-for="(tab, index) in tabsData"
+      :key="tab.id"
+      :active="isIndexKey ? index === activeTab : tab[tabKey] === activeTab"
+      :is-disabled="!!tab['isDisabled']"
+      :text-color="tab['textColor']"
+      @click="$emit('tab-click', isIndexKey ? index : tab[tabKey])"
+    >
+      <Option :is-disabled="!!tab['isDisabled']" :text-color="tab['textColor']">
+        <Uppercase>{{ tab[tabLabel] }}</Uppercase>
+        <InfoText
+          v-if="tab['labelInfoText']"
+          :align-arrow="tab['labelInfoAlign']"
+          :text="tab['labelInfoText']"
+        />
+      </Option>
+    </Tab>
+    <BottomLine />
+  </RoofTabWrap>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import InfoText from '../infoText'
+  const TabAttr = {
+    active: Boolean,
+    isDisabled: Boolean,
+    textColor: String,
+  }
+
+  const BottomLine = styled('div')`
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+    width: 100%;
+    background-color: ${(props) => props.theme.colors.grey3};
+  `
+  const RoofTabWrap = styled('div')`
+    display: flex;
+    align-items: center;
+    position: relative;
+    font-size: 13px;
+    font-weight: 700;
+  `
+  const Uppercase = styled('span')`
+    text-transform: uppercase;
+  `
+  const Option = styled('div', TabAttr)`
+    font-size: 13px;
+    font-weight: 700;
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    gap: 10px;
+    color: ${(props) =>
+      props.textColor
+        ? props.theme.colors[props.textColor]
+          ? props.theme.colors[props.textColor]
+          : props.textColor
+        : props.isDisabled
+        ? props.theme.colors.grey2
+        : props.theme.colors.black};
+  `
+  const Tab = styled('div', TabAttr)`
+    padding: 16px 10px;
+    margin-right: 5px;
+    position: relative;
+    top: ${(props) => (props.isDisabled ? '-1px' : '0')};
+    z-index: 10;
+    border-bottom: 2px solid
+      ${(props) => (props.active ? props.theme.colors.primary : 'transparent')};
+    background-color: ${(props) =>
+      props.isDisabled ? props.theme.colors.grey5 : 'transparent'};
+    transition: 0.2s ease;
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+    min-width: 140px;
+    display: flex !important;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 55px;
+    &:hover {
+      border-color: ${(props) =>
+        props.isDisabled
+          ? props.theme.colors.grey2
+          : props.theme.colors.primary};
+    }
+  `
+
+  export default {
+    name: 'Tabs',
+
+    components: {
+      Tab,
+      BottomLine,
+      RoofTabWrap,
+      Option,
+      InfoText,
+      Uppercase,
+    },
+
+    props: {
+      tabsData: { required: true },
+      activeTab: { required: true },
+      isIndexKey: { type: Boolean, default: false },
+      tabKey: { type: String, default: '' },
+      tabLabel: { type: String, default: '' },
+    },
+  }
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -1,59 +1,59 @@
-import PageSubtitle from './index.vue'
-import theme from '@/assets/theme'
-
-export default {
-  title: 'PageSubtitle',
-  component: PageSubtitle,
-  tags: ['autodocs'],
-  argTypes: {
-    color: {
-      control: {
-        type: 'color',
-        presetColors: [theme.colors.primary],
-      },
-    },
-    infoText: {
-      description: 'Text for tooltip',
-    },
-  },
-  tags: ['autodocs'],
-}
-
-// To use:
-// <PageSubtitle
-//   text="My Page Subtitle"
-//   color="red"
-//   info-text="My info text"
-//   margin-bottom="0px"
-// />
-
-export const Default = {
-  args: {
-    text: 'My Page Subtitle',
-    color: theme.colors.gray1,
-    infoText: '',
-    marginBottom: '30px',
-  },
-}
-
-export const SubtitleColor = {
-  args: {
-    ...Default.args,
-    color: theme.colors.primary,
-  },
-}
-
-export const SubtitleTooltip = {
-  args: {
-    ...Default.args,
-    infoText: 'My tooltip info',
-  },
-}
-
-export const SubtitleMarginBottom = {
-  name: 'Subtitle margin-bottom',
-  args: {
-    ...Default.args,
-    marginBottom: '0px',
-  },
-}
+import PageSubtitle from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'PageSubtitle',
+  component: PageSubtitle,
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: {
+        type: 'color',
+        presetColors: [theme.colors.primary],
+      },
+    },
+    infoText: {
+      description: 'Text for tooltip',
+    },
+  },
+  tags: ['autodocs'],
+}
+
+// To use:
+// <PageSubtitle
+//   text="My Page Subtitle"
+//   color="red"
+//   info-text="My info text"
+//   margin-bottom="0px"
+// />
+
+export const Default = {
+  args: {
+    text: 'My Page Subtitle',
+    color: theme.colors.gray1,
+    infoText: '',
+    marginBottom: '30px',
+  },
+}
+
+export const SubtitleColor = {
+  args: {
+    ...Default.args,
+    color: theme.colors.primary,
+  },
+}
+
+export const SubtitleTooltip = {
+  args: {
+    ...Default.args,
+    infoText: 'My tooltip info',
+  },
+}
+
+export const SubtitleMarginBottom = {
+  name: 'Subtitle margin-bottom',
+  args: {
+    ...Default.args,
+    marginBottom: '0px',
+  },
+}

package/src/components/pageSubtitle/index.vue

@@ -1,78 +1,78 @@
-<template>
-  <SubtitleText
-    data-test-id="page_wrapper"
-    :color="color"
-    :has-info-text="!!infoText"
-    :margin-bottom="marginBottom"
-  >
-    <span data-test-id="page_subtitle_text">
-      {{ text }}
-    </span>
-    <InfoText
-      v-if="!!infoText"
-      data-test-id="page_subtitle_tooltip"
-      :text="infoText"
-    />
-  </SubtitleText>
-</template>
-
-<script>
-  // import PageSubtitle from "@eturnity/eturnity_reusable_components/src/components/pageSubtitle"
-  // To use:
-  // <PageSubtitle
-  //   text="My Page Subtitle"
-  //   color="red"
-  //   info-text="My info text"
-  //   margin-bottom="0px"
-  // />
-  import styled from 'vue3-styled-components'
-  import InfoText from '../infoText'
-
-  const textAttrs = {
-    color: String,
-    hasInfoText: Boolean,
-    marginBottom: String,
-  }
-  const SubtitleText = styled('div', textAttrs)`
-    display: grid;
-    align-items: center;
-    grid-gap: 12px;
-    grid-template-columns: ${(props) =>
-      props.hasInfoText ? 'auto auto 1fr' : '1fr'};
-    color: ${(props) => (props.color ? props.color : props.theme.colors.gray1)};
-    font-size: 13px;
-    margin-bottom: ${(props) =>
-      props.marginBottom ? props.marginBottom : '30px'};
-    line-height: 1.5;
-    position: relative;
-  `
-
-  export default {
-    name: 'PageSubtitle',
-    components: {
-      SubtitleText,
-      InfoText,
-    },
-    props: {
-      text: {
-        required: true,
-        type: String,
-      },
-      color: {
-        required: false,
-        type: String,
-        default: '',
-      },
-      infoText: {
-        required: false,
-        type: String,
-        default: '',
-      },
-      marginBottom: {
-        required: false,
-        type: String,
-        default: '30px',
-      },
-    },
-  }
-</script>
+<template>
+  <SubtitleText
+    data-test-id="page_wrapper"
+    :color="color"
+    :has-info-text="!!infoText"
+    :margin-bottom="marginBottom"
+  >
+    <span data-test-id="page_subtitle_text">
+      {{ text }}
+    </span>
+    <InfoText
+      v-if="!!infoText"
+      data-test-id="page_subtitle_tooltip"
+      :text="infoText"
+    />
+  </SubtitleText>
+</template>
+
+<script>
+  // import PageSubtitle from "@eturnity/eturnity_reusable_components/src/components/pageSubtitle"
+  // To use:
+  // <PageSubtitle
+  //   text="My Page Subtitle"
+  //   color="red"
+  //   info-text="My info text"
+  //   margin-bottom="0px"
+  // />
+  import styled from 'vue3-styled-components'
+  import InfoText from '../infoText'
+
+  const textAttrs = {
+    color: String,
+    hasInfoText: Boolean,
+    marginBottom: String,
+  }
+  const SubtitleText = styled('div', textAttrs)`
+    display: grid;
+    align-items: center;
+    grid-gap: 12px;
+    grid-template-columns: ${(props) =>
+      props.hasInfoText ? 'auto auto 1fr' : '1fr'};
+    color: ${(props) => (props.color ? props.color : props.theme.colors.gray1)};
+    font-size: 13px;
+    margin-bottom: ${(props) =>
+      props.marginBottom ? props.marginBottom : '30px'};
+    line-height: 1.5;
+    position: relative;
+  `
+
+  export default {
+    name: 'PageSubtitle',
+    components: {
+      SubtitleText,
+      InfoText,
+    },
+    props: {
+      text: {
+        required: true,
+        type: String,
+      },
+      color: {
+        required: false,
+        type: String,
+        default: '',
+      },
+      infoText: {
+        required: false,
+        type: String,
+        default: '',
+      },
+      marginBottom: {
+        required: false,
+        type: String,
+        default: '30px',
+      },
+    },
+  }
+</script>

package/src/components/pageSubtitle/pageSubtitle.spec.js

@@ -1,46 +1,46 @@
-/* eslint-disable */
-import { mount } from '@vue/test-utils'
-import RCPageSubtitle from '@/components/pageSubtitle'
-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 subtitleText = 'Test Page Subtitle'
-const infoText = 'Test Tooltip Text'
-
-describe('RCPageSubtitle.vue', () => {
-  it('page subtitle is rendered with correct text', async () => {
-    const wrapper = mount(RCPageSubtitle, {
-      props: { text: subtitleText },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    const pageSubtitleText = wrapper.find('[data-test-id="page_subtitle_text"]')
-
-    expect(pageSubtitleText.exists()).toBe(true)
-    expect(pageSubtitleText.text()).toContain(subtitleText)
-  }),
-    it('page subtitle tooltip is rendered with correct text prop content', async () => {
-      const wrapper = mount(RCPageSubtitle, {
-        props: { text: subtitleText, infoText: infoText },
-        global: {
-          provide: {
-            theme,
-          },
-        },
-      })
-
-      const tooltipComponent = wrapper.findComponent(RCInfoText)
-
-      expect(tooltipComponent.exists()).toBe(true)
-      expect(tooltipComponent.vm.text).toContain(infoText)
-    })
-})
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import RCPageSubtitle from '@/components/pageSubtitle'
+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 subtitleText = 'Test Page Subtitle'
+const infoText = 'Test Tooltip Text'
+
+describe('RCPageSubtitle.vue', () => {
+  it('page subtitle is rendered with correct text', async () => {
+    const wrapper = mount(RCPageSubtitle, {
+      props: { text: subtitleText },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const pageSubtitleText = wrapper.find('[data-test-id="page_subtitle_text"]')
+
+    expect(pageSubtitleText.exists()).toBe(true)
+    expect(pageSubtitleText.text()).toContain(subtitleText)
+  }),
+    it('page subtitle tooltip is rendered with correct text prop content', async () => {
+      const wrapper = mount(RCPageSubtitle, {
+        props: { text: subtitleText, infoText: infoText },
+        global: {
+          provide: {
+            theme,
+          },
+        },
+      })
+
+      const tooltipComponent = wrapper.findComponent(RCInfoText)
+
+      expect(tooltipComponent.exists()).toBe(true)
+      expect(tooltipComponent.vm.text).toContain(infoText)
+    })
+})