@laerdal/life-react-components 6.0.0-dev.2.full → 6.0.0-dev.20.full

package/dist/Table/__tests__/Table.test.tsx

@@ -0,0 +1,499 @@
+import React from 'react';
+/**
+ * Import React libraries.
+ */
+import { render } from '../../test-utils';
+
+/**
+ * Import custom components.
+ */
+import { Table } from '../index';
+
+/**
+ * Import third-party libraries.
+ */
+import 'jest-styled-components';
+
+/**
+ * Import custom types.
+ */
+import { TableColumn } from '../TableTypes';
+import {StyledTableBodyRow, StyledTableFooterCollapseButton} from '../TableStyles';
+import { act } from "react";
+
+
+
+describe('<Table />', () => {
+  it('Renders the Table', () => {
+    const columns: TableColumn[] = [
+      {
+        key: 'column1',
+        name: 'Column 1',
+      },
+      {
+        key: 'column2',
+        name: 'Column 2',
+      },
+    ];
+    const rows: any[] = [
+      {
+        column1: 'Test content',
+        column2: 'Test content 2',
+      },
+    ];
+    const { getByTestId } = render(<Table rows={rows} columns={columns} title="Test title" />);
+    expect(getByTestId('TestTable')).toBeDefined();
+  });
+
+  describe('Table Header Row Tests', () => {
+    it('Should render table header row in case title is passed', () => {
+      const columns: TableColumn[] = [
+        {
+          key: 'column1',
+          name: 'Column 1',
+        },
+        {
+          key: 'column2',
+          name: 'Column 2',
+        },
+      ];
+      const rows: any[] = [
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+      ];
+      const { queryByTestId } = render(<Table rows={rows} columns={columns} title="Test title" />);
+      expect(queryByTestId('TestTableHeaderRow')).not.toBeNull();
+    });
+
+    it('Should not render table header row in case title is passed', () => {
+      const columns: TableColumn[] = [
+        {
+          key: 'column1',
+          name: 'Column 1',
+        },
+        {
+          key: 'column2',
+          name: 'Column 2',
+        },
+      ];
+      const rows: any[] = [
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+      ];
+      const { queryByTestId } = render(<Table rows={rows} columns={columns} />);
+      expect(queryByTestId('TestTableHeaderRow')).toBeNull();
+    });
+
+    describe('Table Header Row functional tests', () => {
+      it('Should have title', () => {
+        const columns: TableColumn[] = [
+          {
+            key: 'column1',
+            name: 'Column 1',
+          },
+          {
+            key: 'column2',
+            name: 'Column 2',
+          },
+        ];
+        const rows: any[] = [
+          {
+            column1: 'Test content',
+            column2: 'Test content 2',
+          },
+        ];
+        const { queryByTestId } = render(<Table rows={rows} columns={columns} title="Test Title" />);
+        const tableHeaderRow = queryByTestId('TestTableHeaderRow');
+        expect(tableHeaderRow?.children[0].children[0].textContent).toContain('Test Title');
+      });
+
+      it('Should have options menu', () => {
+        const columns: TableColumn[] = [
+          {
+            key: 'column1',
+            name: 'Column 1',
+          },
+          {
+            key: 'column2',
+            name: 'Column 2',
+          },
+        ];
+        const rows: any[] = [
+          {
+            column1: 'Test content',
+            column2: 'Test content 2',
+          },
+        ];
+        const { queryByTestId } = render(<Table rows={rows} columns={columns} title="Test Title" />);
+        expect(queryByTestId('TestTableHeaderRow')?.getElementsByTagName('svg')).not.toBeNull();
+      });
+    });
+  });
+
+  describe('Table Column Header Row Tests', () => {
+    it('Should render column header row', () => {
+      const columns: TableColumn[] = [
+        {
+          key: 'column1',
+          name: 'Column 1',
+        },
+        {
+          key: 'column2',
+          name: 'Column 2',
+        },
+      ];
+      const rows: any[] = [
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+      ];
+      const { getByTestId } = render(<Table rows={rows} columns={columns} />);
+      expect(getByTestId('TestTableColumnHeaderRow')).not.toBeNull();
+    });
+
+    it('Should render two columns in the column header row', () => {
+      const columns: TableColumn[] = [
+        {
+          key: 'column1',
+          name: 'Column 1',
+        },
+        {
+          key: 'column2',
+          name: 'Column 2',
+        },
+      ];
+      const rows: any[] = [
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+      ];
+      const { getByTestId } = render(<Table rows={rows} columns={columns} />);
+      expect(getByTestId('TestTableColumnHeaderRow').children.length).toEqual(2);
+    });
+
+    it('Should render correct column names in the column header row', () => {
+      const columns: TableColumn[] = [
+        {
+          key: 'column1',
+          name: 'Column 1',
+        },
+        {
+          key: 'column2',
+          name: 'Column 2',
+        },
+      ];
+      const rows: any[] = [
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+      ];
+      const { getByTestId } = render(<Table rows={rows} columns={columns} />);
+      expect(getByTestId('TestTableColumnHeaderRow').children[0].textContent).toEqual('Column 1');
+      expect(getByTestId('TestTableColumnHeaderRow').children[1].textContent).toEqual('Column 2');
+    });
+
+    it('Should render columns without no-border class in the column header row, in case title is passed', () => {
+      const columns: TableColumn[] = [
+        {
+          key: 'column1',
+          name: 'Column 1',
+        },
+        {
+          key: 'column2',
+          name: 'Column 2',
+        },
+      ];
+      const rows: any[] = [
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+      ];
+      const { getByTestId } = render(<Table rows={rows} columns={columns} title="test title" />);
+      expect(getByTestId('TestTableColumnHeaderRow').children[0].classList.contains('no-border')).toBe(false);
+      expect(getByTestId('TestTableColumnHeaderRow').children[1].classList.contains('no-border')).toBe(false);
+    });
+
+  });
+
+  describe('Table Body Row tests', () => {
+    it('Should not render "No Data" row in case there are rows', () => {
+      const columns: TableColumn[] = [
+        {
+          key: 'column1',
+          name: 'Column 1',
+        },
+        {
+          key: 'column2',
+          name: 'Column 2',
+        },
+      ];
+      const rows: any[] = [
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+      ];
+      const { queryByTestId } = render(<Table rows={rows} columns={columns} />);
+      expect(queryByTestId('TestTableNoDataRow')).toBeNull();
+    });
+
+    it('Should render "No Data" row in case there are no rows', () => {
+      const columns: TableColumn[] = [
+        {
+          key: 'column1',
+          name: 'Column 1',
+        },
+        {
+          key: 'column2',
+          name: 'Column 2',
+        },
+      ];
+      const rows: any[] = [];
+      const { queryByTestId } = render(<Table rows={rows} columns={columns} />);
+      expect(queryByTestId('TestTableNoDataRow')).not.toBeNull();
+      expect(queryByTestId('TestTableNoDataRow')?.textContent).toEqual('There are no rows to display');
+    });
+
+    it('Should render a data row with correct content for each row that is passed', () => {
+      const columns: TableColumn[] = [
+        {
+          key: 'column1',
+          name: 'Column 1',
+        },
+        {
+          key: 'column2',
+          name: 'Column 2',
+        },
+      ];
+      const rows: any[] = [
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+      ];
+      const { getByTestId } = render(<Table rows={rows} columns={columns} />);
+      expect(getByTestId('TestTableDataRow')).toBeDefined();
+      expect(getByTestId('TestTableDataRow').children.length).toEqual(2);
+      expect(getByTestId('TestTableDataRow').children[0].textContent).toEqual('Test content');
+      expect(getByTestId('TestTableDataRow').children[1].textContent).toEqual('Test content 2');
+    });
+  });
+
+  it('Should render footer row', () => {
+    const columns: TableColumn[] = [
+      {
+        key: 'column1',
+        name: 'Column 1',
+      },
+      {
+        key: 'column2',
+        name: 'Column 2',
+      },
+    ];
+    const rows: any[] = [
+      {
+        column1: 'Test content',
+        column2: 'Test content 2',
+      },
+    ];
+    const { getByTestId } = render(<Table rows={rows} columns={columns} />);
+    expect(getByTestId('TestTableFooterRow')).toBeDefined();
+  });
+
+  describe('Table Accordion tests', () => {
+    it('Should render collapse button when configured as accordion', () => {
+      const columns: TableColumn[] = [
+        {
+          key: 'column1',
+          name: 'Column 1',
+        },
+        {
+          key: 'column2',
+          name: 'Column 2',
+        },
+      ];
+      const rows: any[] = [
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+      ];
+      const wrapper = render(<Table rows={rows} columns={columns} accordion={true} collapsedRows={3}/>);
+
+      expect(wrapper.container.querySelectorAll(`${StyledTableFooterCollapseButton}`)).toHaveLength(1);
+    });
+
+    it('Should not render all items when collapsed', () => {
+      const columns: TableColumn[] = [
+        {
+          key: 'column1',
+          name: 'Column 1',
+        },
+        {
+          key: 'column2',
+          name: 'Column 2',
+        },
+      ];
+      const rows: any[] = [
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+      ];
+      const wrapper = render(<Table rows={rows} columns={columns} accordion={true} collapsedRows={3}/>);
+
+      expect(wrapper.container.querySelectorAll(`${StyledTableBodyRow}`)).toHaveLength(3);
+    });
+
+    it('Should render all items when not collapsed', () => {
+      const columns: TableColumn[] = [
+        {
+          key: 'column1',
+          name: 'Column 1',
+        },
+        {
+          key: 'column2',
+          name: 'Column 2',
+        },
+      ];
+      const rows: any[] = [
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+      ];
+      const wrapper = render(<Table rows={rows} columns={columns} accordion={true} collapsedRows={3}
+                                    collapsed={false}/>);
+
+      expect(wrapper.container.querySelectorAll(`${StyledTableBodyRow}`)).toHaveLength(4);
+    });
+
+    it('Should expand when show more button is clicked', () => {
+      const columns: TableColumn[] = [
+        {
+          key: 'column1',
+          name: 'Column 1',
+        },
+        {
+          key: 'column2',
+          name: 'Column 2',
+        },
+      ];
+      const rows: any[] = [
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+      ];
+      const wrapper = render(<Table rows={rows} columns={columns} accordion={true} collapsedRows={3}
+                                    collapsed={true}/>);
+
+      expect(wrapper.container.querySelectorAll(`${StyledTableBodyRow}`)).toHaveLength(3);
+
+      act(() => {
+        let button = wrapper.container.querySelectorAll(`${StyledTableFooterCollapseButton}`)[0] as HTMLButtonElement;
+        button.click();
+      })
+
+      expect(wrapper.container.querySelectorAll(`${StyledTableBodyRow}`)).toHaveLength(4);
+    });
+
+    it('Should collapse when show less button is clicked', () => {
+      const columns: TableColumn[] = [
+        {
+          key: 'column1',
+          name: 'Column 1',
+        },
+        {
+          key: 'column2',
+          name: 'Column 2',
+        },
+      ];
+      const rows: any[] = [
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+        {
+          column1: 'Test content',
+          column2: 'Test content 2',
+        },
+      ];
+      const wrapper = render(<Table rows={rows} columns={columns} accordion={true} collapsedRows={3}
+                                    collapsed={false}/>);
+
+      expect(wrapper.container.querySelectorAll(`${StyledTableBodyRow}`)).toHaveLength(4);
+
+      act(() => {
+        let button = wrapper.container.querySelectorAll(`${StyledTableFooterCollapseButton}`)[0] as HTMLButtonElement;
+        button.click();
+      })
+
+      expect(wrapper.container.querySelectorAll(`${StyledTableBodyRow}`)).toHaveLength(3);
+    });
+  });
+});

package/dist/Tabs/HorizontalTabs.cjs

@@ -43,16 +43,25 @@ const HorizontalTabContainer = _styledComponents.default.div`
 `;
 const TabSideFill = _styledComponents.default.div`
   position: absolute;
-  border-bottom: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+  border-bottom: 1px solid ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   bottom: 0;
   width: 100%;
 
   &.fill {
-    background: ${props => _styles.COLORS.getColor('white', props.theme)};
+    background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   }
 `;
 const TabButton = _styledComponents.default.button`
-  color: ${props => _styles.COLORS.getColor('neutral_600', props.theme)};
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
   border: none;
   background-color: transparent;
   position: relative;
@@ -72,12 +81,21 @@ const TabButton = _styledComponents.default.button`
   }
   
   &.selected {
-    background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
-    color: ${props => _styles.COLORS.getColor('neutral_800', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme)};
   }
 
   &.selected.floating {
-    background-color: ${props => _styles.COLORS.getColor('neutral_20', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'selected'
+}, props.theme)};
   }
 
   &.default {
@@ -86,8 +104,14 @@ const TabButton = _styledComponents.default.button`
   }
   
   &.default.selected {
-    border-left: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
-    border-right: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+    border-left: 1px solid ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
+    border-right: 1px solid ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 
   &.selected:after {
@@ -97,7 +121,10 @@ const TabButton = _styledComponents.default.button`
     left: -1px;
     right: -1px;
     height: 2px;
-    background-color: ${props => _styles.COLORS.getColor('primary_500', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'selected'
+}, props.theme)};
   }
 
   &.selected.floating:after {
@@ -107,31 +134,54 @@ const TabButton = _styledComponents.default.button`
     right: 1px;
     height: 2px;
     border-radius: 2px;
-    background-color: ${props => _styles.COLORS.getColor('primary_500', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'selected'
+}, props.theme)};
   }
 
-
   &:hover, &:hover.selected {
-    background: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
-    color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+    background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
   }
 
   &:hover:after {
-    background-color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
   }
 
   &:active, &:active.selected {
-    background: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
-    color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
     outline: none;
   }
 
   &:active:after {
-    background-color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'active'
+}, props.theme)};
   }
 
   &:disabled {
-    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     background: transparent;
     cursor: not-allowed;
   }