@eturnity/eturnity_reusable_components 8.22.23-EPDM-13618.0 → 8.22.23-EPDM-14087.1

package/src/components/tables/viewTable/index.vue

@@ -1,195 +1,195 @@
-<template>
-  <PageWrapper>
-    <TitleText>
-      {{ tableTitle }}
-    </TitleText>
-    <TableScroll>
-      <TableWrapper :full-width="fullWidth">
-        <SpinnerWrapper v-if="isLoading">
-          <Spinner />
-        </SpinnerWrapper>
-        <TableContainer v-else>
-          <thead>
-            <tr>
-              <TableHeader v-for="(item, index) in headerItems" :key="index">
-                {{ item.value }}
-              </TableHeader>
-              <div v-if="showIconsContainer && tableItems.length"></div>
-            </tr>
-          </thead>
-          <tbody>
-            <EmptyTd v-if="!tableItems.length && !isLoading" colspan="100">
-              <EmptyContainer>
-                {{ emptyText }}
-              </EmptyContainer>
-            </EmptyTd>
-            <TableRow v-for="(row, index) in tableItems" v-else :key="index">
-              <TableItem v-for="(item, idx) in row" :key="idx">
-                {{ item.value }}
-              </TableItem>
-              <IconsContainer v-if="showIconsContainer">
-                <DeleteIcon
-                  color="gray"
-                  @click="$emit('on-click-delete', index)"
-                />
-              </IconsContainer>
-            </TableRow>
-          </tbody>
-        </TableContainer>
-      </TableWrapper>
-    </TableScroll>
-  </PageWrapper>
-</template>
-
-<script>
-  // This is a read only table. Pass it data, and it displays it
-  // ToDo: add this to storybook
-  // import ViewTable from "@eturnity/eturnity_reusable_components/src/components/tables/viewTable"
-  import styled from 'vue3-styled-components'
-  import DeleteIcon from '../../deleteIcon'
-  import Spinner from '../../spinner'
-
-  const TableScroll = styled.div`
-    position: relative;
-    max-width: 100%;
-  `
-
-  const wrapperAttrs = { fullWidth: Boolean }
-  const TableWrapper = styled('div', wrapperAttrs)`
-    width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
-    max-width: 100%;
-    overflow: auto;
-
-    ::-webkit-scrollbar {
-      width: 10px; //width of the whole scrollbar area
-    }
-
-    track ::-webkit-scrollbar-track {
-      background: #fff;
-    }
-
-    ::-webkit-scrollbar-thumb {
-      border-bottom: 2px solid ${(props) => props.theme.colors.grey3}; // width of the actual scrollbar
-    }
-  `
-
-  const TableContainer = styled.table`
-    width: 100%;
-    border-collapse: collapse;
-    border: none;
-  `
-
-  const TableItem = styled.td`
-    border: 1px solid ${(props) => props.theme.colors.grey3};
-    width: auto;
-    white-space: nowrap;
-    padding: 12px;
-    text-align: right;
-  `
-
-  const TableHeader = styled(TableItem)`
-    background-color: #e6e8ee;
-    font-weight: 700;
-    text-align: left;
-  `
-
-  const TableRow = styled.tr`
-    &:hover {
-      background-color: #f5f7fa;
-      cursor: pointer;
-    }
-  `
-
-  const TitleText = styled.div`
-    font-weight: 700;
-    margin-bottom: 6px;
-  `
-
-  const PageWrapper = styled.div`
-    margin: 16px 0;
-    font-size: 13px;
-  `
-
-  const IconsContainer = styled.div`
-    width: 100%;
-    display: inline-flex;
-    flex-wrap: nowrap;
-    background-color: #fff;
-
-    &:hover {
-      background-color: #fff;
-    }
-  `
-
-  const SpinnerWrapper = styled.div`
-    border: 1px solid ${(props) => props.theme.colors.grey3};
-    height: 150px;
-    display: grid;
-    align-items: center;
-    justify-items: center;
-  `
-
-  const EmptyContainer = styled.div`
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    height: 100px;
-  `
-
-  const EmptyTd = styled.td`
-    border: 1px solid ${(props) => props.theme.colors.grey3};
-  `
-
-  export default {
-    name: 'ViewTable',
-    components: {
-      TableScroll,
-      TableWrapper,
-      TableContainer,
-      TableHeader,
-      TableItem,
-      TableRow,
-      TitleText,
-      PageWrapper,
-      DeleteIcon,
-      IconsContainer,
-      Spinner,
-      SpinnerWrapper,
-      EmptyContainer,
-      EmptyTd,
-    },
-    props: {
-      headerItems: {
-        required: true,
-      },
-      tableItems: {
-        required: true,
-      },
-      fullWidth: {
-        required: false,
-        default: true,
-      },
-      tableTitle: {
-        required: false,
-        default: null,
-      },
-      showDeleteButton: {
-        required: false,
-        default: false,
-      },
-      isLoading: {
-        required: false,
-        default: false,
-      },
-      emptyText: {
-        required: false,
-        default: 'There are no items',
-      },
-    },
-    computed: {
-      showIconsContainer() {
-        return this.showDeleteButton
-      },
-    },
-  }
-</script>
+<template>
+  <PageWrapper>
+    <TitleText>
+      {{ tableTitle }}
+    </TitleText>
+    <TableScroll>
+      <TableWrapper :full-width="fullWidth">
+        <SpinnerWrapper v-if="isLoading">
+          <Spinner />
+        </SpinnerWrapper>
+        <TableContainer v-else>
+          <thead>
+            <tr>
+              <TableHeader v-for="(item, index) in headerItems" :key="index">
+                {{ item.value }}
+              </TableHeader>
+              <div v-if="showIconsContainer && tableItems.length"></div>
+            </tr>
+          </thead>
+          <tbody>
+            <EmptyTd v-if="!tableItems.length && !isLoading" colspan="100">
+              <EmptyContainer>
+                {{ emptyText }}
+              </EmptyContainer>
+            </EmptyTd>
+            <TableRow v-for="(row, index) in tableItems" v-else :key="index">
+              <TableItem v-for="(item, idx) in row" :key="idx">
+                {{ item.value }}
+              </TableItem>
+              <IconsContainer v-if="showIconsContainer">
+                <DeleteIcon
+                  color="gray"
+                  @click="$emit('on-click-delete', index)"
+                />
+              </IconsContainer>
+            </TableRow>
+          </tbody>
+        </TableContainer>
+      </TableWrapper>
+    </TableScroll>
+  </PageWrapper>
+</template>
+
+<script>
+  // This is a read only table. Pass it data, and it displays it
+  // ToDo: add this to storybook
+  // import ViewTable from "@eturnity/eturnity_reusable_components/src/components/tables/viewTable"
+  import styled from 'vue3-styled-components'
+  import DeleteIcon from '../../deleteIcon'
+  import Spinner from '../../spinner'
+
+  const TableScroll = styled.div`
+    position: relative;
+    max-width: 100%;
+  `
+
+  const wrapperAttrs = { fullWidth: Boolean }
+  const TableWrapper = styled('div', wrapperAttrs)`
+    width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
+    max-width: 100%;
+    overflow: auto;
+
+    ::-webkit-scrollbar {
+      width: 10px; //width of the whole scrollbar area
+    }
+
+    track ::-webkit-scrollbar-track {
+      background: #fff;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-bottom: 2px solid ${(props) => props.theme.colors.grey3}; // width of the actual scrollbar
+    }
+  `
+
+  const TableContainer = styled.table`
+    width: 100%;
+    border-collapse: collapse;
+    border: none;
+  `
+
+  const TableItem = styled.td`
+    border: 1px solid ${(props) => props.theme.colors.grey3};
+    width: auto;
+    white-space: nowrap;
+    padding: 12px;
+    text-align: right;
+  `
+
+  const TableHeader = styled(TableItem)`
+    background-color: #e6e8ee;
+    font-weight: 700;
+    text-align: left;
+  `
+
+  const TableRow = styled.tr`
+    &:hover {
+      background-color: #f5f7fa;
+      cursor: pointer;
+    }
+  `
+
+  const TitleText = styled.div`
+    font-weight: 700;
+    margin-bottom: 6px;
+  `
+
+  const PageWrapper = styled.div`
+    margin: 16px 0;
+    font-size: 13px;
+  `
+
+  const IconsContainer = styled.div`
+    width: 100%;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    background-color: #fff;
+
+    &:hover {
+      background-color: #fff;
+    }
+  `
+
+  const SpinnerWrapper = styled.div`
+    border: 1px solid ${(props) => props.theme.colors.grey3};
+    height: 150px;
+    display: grid;
+    align-items: center;
+    justify-items: center;
+  `
+
+  const EmptyContainer = styled.div`
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    height: 100px;
+  `
+
+  const EmptyTd = styled.td`
+    border: 1px solid ${(props) => props.theme.colors.grey3};
+  `
+
+  export default {
+    name: 'ViewTable',
+    components: {
+      TableScroll,
+      TableWrapper,
+      TableContainer,
+      TableHeader,
+      TableItem,
+      TableRow,
+      TitleText,
+      PageWrapper,
+      DeleteIcon,
+      IconsContainer,
+      Spinner,
+      SpinnerWrapper,
+      EmptyContainer,
+      EmptyTd,
+    },
+    props: {
+      headerItems: {
+        required: true,
+      },
+      tableItems: {
+        required: true,
+      },
+      fullWidth: {
+        required: false,
+        default: true,
+      },
+      tableTitle: {
+        required: false,
+        default: null,
+      },
+      showDeleteButton: {
+        required: false,
+        default: false,
+      },
+      isLoading: {
+        required: false,
+        default: false,
+      },
+      emptyText: {
+        required: false,
+        default: 'There are no items',
+      },
+    },
+    computed: {
+      showIconsContainer() {
+        return this.showDeleteButton
+      },
+    },
+  }
+</script>

package/src/components/tabsHeader/TabsHeader.spec.js

@@ -1,101 +1,101 @@
-/* eslint-disable */
-import { mount } from '@vue/test-utils'
-import TabsHeader from './index.vue'
-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('TabsHeader', () => {
-  const mockTabsData = [
-    {
-      text: 'Tab 1',
-      id: 0,
-      hasError: true,
-      icon: 'home',
-      subText: 'Subtext 1',
-    },
-    {
-      text: 'Tab 2',
-      id: 1,
-      hasError: false,
-      icon: 'settings',
-      subText: 'Subtext 2',
-    },
-  ]
-
-  const createWrapper = (props = {}) => {
-    return mount(TabsHeader, {
-      props: {
-        tabsData: mockTabsData,
-        activeTab: 0,
-        fullSize: true,
-        ...props,
-      },
-      global: {
-        mocks: {
-          theme,
-        },
-      },
-    })
-  }
-
-  it('renders all tabs correctly', () => {
-    const wrapper = createWrapper()
-    const tabs = wrapper.findAll('[data-test-id="tab-item"]')
-    expect(tabs).toHaveLength(mockTabsData.length)
-  })
-
-  it('displays correct tab text', () => {
-    const wrapper = createWrapper()
-    const firstTab = wrapper.find('[data-test-id="tab-text"]')
-    expect(firstTab.text()).toBe('Tab 1')
-  })
-
-  it('emits on-tab-change event when clicking a tab', async () => {
-    const wrapper = createWrapper()
-    const tabs = wrapper.findAll('[data-test-id="tab-item"]')
-    await tabs[1].trigger('click')
-    expect(wrapper.emitted('on-tab-change')).toBeTruthy()
-    expect(wrapper.emitted('on-tab-change')[0]).toEqual([1])
-  })
-
-  it('does not emit on-tab-change when clicking active tab', async () => {
-    const wrapper = createWrapper()
-    const activeTab = wrapper.find('[data-test-id="tab-item"]')
-    await activeTab.trigger('click')
-    expect(wrapper.emitted('on-tab-change')).toBeFalsy()
-  })
-
-  it('applies correct styles for active tab', () => {
-    const wrapper = createWrapper()
-    const activeTab = wrapper.find('[data-test-active="true"]')
-    expect(activeTab.exists()).toBe(true)
-  })
-
-  it('renders error icon when tab has error', () => {
-    const wrapper = createWrapper()
-    const warningIcon = wrapper.find('[data-test-id="warning-icon"]')
-    expect(warningIcon.exists()).toBe(true)
-  })
-
-  it('renders subtext when provided', () => {
-    const wrapper = createWrapper()
-    const subtext = wrapper.find('[data-test-id="tab-subtext"]')
-    expect(subtext.text()).toBe('Subtext 1')
-  })
-
-  it('renders icon when provided', () => {
-    const wrapper = createWrapper()
-    const icon = wrapper.find('[data-test-id="tab-icon"]')
-    expect(icon.exists()).toBe(true)
-  })
-
-  it('applies fullSize prop correctly', () => {
-    const wrapper = createWrapper({ fullSize: true })
-    const tabs = wrapper.findAll('[data-test-id="tab-item"]')
-    expect(tabs.length).toBeGreaterThan(0)
-  })
-})
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import TabsHeader from './index.vue'
+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('TabsHeader', () => {
+  const mockTabsData = [
+    {
+      text: 'Tab 1',
+      id: 0,
+      hasError: true,
+      icon: 'home',
+      subText: 'Subtext 1',
+    },
+    {
+      text: 'Tab 2',
+      id: 1,
+      hasError: false,
+      icon: 'settings',
+      subText: 'Subtext 2',
+    },
+  ]
+
+  const createWrapper = (props = {}) => {
+    return mount(TabsHeader, {
+      props: {
+        tabsData: mockTabsData,
+        activeTab: 0,
+        fullSize: true,
+        ...props,
+      },
+      global: {
+        mocks: {
+          theme,
+        },
+      },
+    })
+  }
+
+  it('renders all tabs correctly', () => {
+    const wrapper = createWrapper()
+    const tabs = wrapper.findAll('[data-test-id="tab-item"]')
+    expect(tabs).toHaveLength(mockTabsData.length)
+  })
+
+  it('displays correct tab text', () => {
+    const wrapper = createWrapper()
+    const firstTab = wrapper.find('[data-test-id="tab-text"]')
+    expect(firstTab.text()).toBe('Tab 1')
+  })
+
+  it('emits on-tab-change event when clicking a tab', async () => {
+    const wrapper = createWrapper()
+    const tabs = wrapper.findAll('[data-test-id="tab-item"]')
+    await tabs[1].trigger('click')
+    expect(wrapper.emitted('on-tab-change')).toBeTruthy()
+    expect(wrapper.emitted('on-tab-change')[0]).toEqual([1])
+  })
+
+  it('does not emit on-tab-change when clicking active tab', async () => {
+    const wrapper = createWrapper()
+    const activeTab = wrapper.find('[data-test-id="tab-item"]')
+    await activeTab.trigger('click')
+    expect(wrapper.emitted('on-tab-change')).toBeFalsy()
+  })
+
+  it('applies correct styles for active tab', () => {
+    const wrapper = createWrapper()
+    const activeTab = wrapper.find('[data-test-active="true"]')
+    expect(activeTab.exists()).toBe(true)
+  })
+
+  it('renders error icon when tab has error', () => {
+    const wrapper = createWrapper()
+    const warningIcon = wrapper.find('[data-test-id="warning-icon"]')
+    expect(warningIcon.exists()).toBe(true)
+  })
+
+  it('renders subtext when provided', () => {
+    const wrapper = createWrapper()
+    const subtext = wrapper.find('[data-test-id="tab-subtext"]')
+    expect(subtext.text()).toBe('Subtext 1')
+  })
+
+  it('renders icon when provided', () => {
+    const wrapper = createWrapper()
+    const icon = wrapper.find('[data-test-id="tab-icon"]')
+    expect(icon.exists()).toBe(true)
+  })
+
+  it('applies fullSize prop correctly', () => {
+    const wrapper = createWrapper({ fullSize: true })
+    const tabs = wrapper.findAll('[data-test-id="tab-item"]')
+    expect(tabs.length).toBeGreaterThan(0)
+  })
+})