@laerdal/life-react-components 6.0.0-dev.10.full → 6.0.0-dev.13.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/VerticalTabs.cjs

@@ -33,6 +33,7 @@ const VerticalTabs = _ref => {
       onLinkClick: e => {
         if (entry.onClick) {
           entry.onClick(e);
+          e.preventDefault && e.preventDefault();
         }
       }
     }, entry.to))

package/dist/Tabs/VerticalTabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabs.cjs","names":["React","_interopRequireWildcard","require","_Tabs","_interopRequireDefault","_TabLink","_types","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","VerticalTabs","_ref","size","entries","jsx","Size","Large","children","map","entry","href","to","requiredLine","optionalLine","endLineIcon","OptionalLineIcon","optionalLineIcon","disabled","showNotificationDot","variant","onLinkClick","onClick","propTypes","_propTypes","arrayOf","shape","string","isRequired","node","bool","func","oneOf","_default","exports"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport Tabs from './Tabs';\r\nimport TabLink from './TabLink';\r\nimport { BaseProps } from '../icons';\r\nimport { Size } from '../types';\r\n\r\nexport interface VerticalTabEntry {\r\n  /**\r\n   * Required. The main text to be displayed on the tab.\r\n   */\r\n  requiredLine: string;\r\n\r\n  /**\r\n   * Optional. The secondary text to be displayed on the tab link under the required line.\r\n   */\r\n  optionalLine?: string;\r\n\r\n  /**\r\n   * Optional. The icon to be displayed next to the secondary text on the tab link under the required line.\r\n   */\r\n  optionalLineIcon?: React.ReactNode;\r\n\r\n  /**\r\n   * Optional. The icon to be displayed at the end of the tab.\r\n   */\r\n  endLineIcon?: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The URL to which the tab links.\r\n   */\r\n  to: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the tab is disabled.\r\n   * If true, the tab will be unclickable and will have a disabled appearance.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. The handler function to be called when the tab is clicked.\r\n   */\r\n  onClick?: (e: React.MouseEvent) => void;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether a notification dot should be shown on the tab.\r\n   */\r\n  showNotificationDot?: boolean;\r\n\r\n  /**\r\n   * Optional. The variant of the notification dot. It can be 'critical' or 'positive'. Defaults to 'Critical'\r\n   */\r\n  variant?: 'critical' | 'positive';\r\n}\r\n\r\nexport interface VerticalTabsProps {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  entries: VerticalTabEntry[];\r\n}\r\n\r\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\r\n  return (\r\n    <Tabs size={size ?? Size.Large}>\r\n      {entries?.map((entry: VerticalTabEntry) => (\r\n        <TabLink\r\n          key={entry.to}\r\n          href={entry.to}\r\n          requiredLine={entry.requiredLine}\r\n          optionalLine={entry.optionalLine}\r\n          endLineIcon={entry.endLineIcon}\r\n          OptionalLineIcon={entry.optionalLineIcon}\r\n          disabled={entry.disabled}\r\n          showNotificationDot={entry.showNotificationDot}\r\n          size={size}\r\n          variant={entry.variant}\r\n          onLinkClick={(e) => {\r\n            if (entry.onClick) {\r\n              entry.onClick(e);\r\n            }\r\n          }}/>\r\n      ))}\r\n    </Tabs>\r\n  );\r\n};\r\n\r\nexport default VerticalTabs;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VerticalTabs.cjs","names":["React","_interopRequireWildcard","require","_Tabs","_interopRequireDefault","_TabLink","_types","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","VerticalTabs","_ref","size","entries","jsx","Size","Large","children","map","entry","href","to","requiredLine","optionalLine","endLineIcon","OptionalLineIcon","optionalLineIcon","disabled","showNotificationDot","variant","onLinkClick","onClick","preventDefault","propTypes","_propTypes","arrayOf","shape","string","isRequired","node","bool","func","oneOf","_default","exports"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport Tabs from './Tabs';\r\nimport TabLink from './TabLink';\r\nimport { BaseProps } from '../icons';\r\nimport { Size } from '../types';\r\n\r\nexport interface VerticalTabEntry {\r\n  /**\r\n   * Required. The main text to be displayed on the tab.\r\n   */\r\n  requiredLine: string;\r\n\r\n  /**\r\n   * Optional. The secondary text to be displayed on the tab link under the required line.\r\n   */\r\n  optionalLine?: string;\r\n\r\n  /**\r\n   * Optional. The icon to be displayed next to the secondary text on the tab link under the required line.\r\n   */\r\n  optionalLineIcon?: React.ReactNode;\r\n\r\n  /**\r\n   * Optional. The icon to be displayed at the end of the tab.\r\n   */\r\n  endLineIcon?: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The URL to which the tab links.\r\n   */\r\n  to: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the tab is disabled.\r\n   * If true, the tab will be unclickable and will have a disabled appearance.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. The handler function to be called when the tab is clicked.\r\n   */\r\n  onClick?: (e: React.MouseEvent) => void;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether a notification dot should be shown on the tab.\r\n   */\r\n  showNotificationDot?: boolean;\r\n\r\n  /**\r\n   * Optional. The variant of the notification dot. It can be 'critical' or 'positive'. Defaults to 'Critical'\r\n   */\r\n  variant?: 'critical' | 'positive';\r\n}\r\n\r\nexport interface VerticalTabsProps {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  entries: VerticalTabEntry[];\r\n}\r\n\r\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\r\n  return (\r\n    <Tabs size={size ?? Size.Large}>\r\n      {entries?.map((entry: VerticalTabEntry) => (\r\n        <TabLink\r\n          key={entry.to}\r\n          href={entry.to}\r\n          requiredLine={entry.requiredLine}\r\n          optionalLine={entry.optionalLine}\r\n          endLineIcon={entry.endLineIcon}\r\n          OptionalLineIcon={entry.optionalLineIcon}\r\n          disabled={entry.disabled}\r\n          showNotificationDot={entry.showNotificationDot}\r\n          size={size}\r\n          variant={entry.variant}\r\n          onLinkClick={(e) => {\r\n            if (entry.onClick) {\r\n              entry.onClick(e);\r\n              e.preventDefault && e.preventDefault();\r\n            }\r\n          }}/>\r\n      ))}\r\n    </Tabs>\r\n  );\r\n};\r\n\r\nexport default VerticalTabs;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tabs/VerticalTabs.js

@@ -24,6 +24,7 @@ const VerticalTabs = _ref => {
       onLinkClick: e => {
         if (entry.onClick) {
           entry.onClick(e);
+          e.preventDefault && e.preventDefault();
         }
       }
     }, entry.to))

package/dist/Tabs/VerticalTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabs.js","names":["React","Tabs","TabLink","Size","jsx","_jsx","VerticalTabs","_ref","size","entries","Large","children","map","entry","href","to","requiredLine","optionalLine","endLineIcon","OptionalLineIcon","optionalLineIcon","disabled","showNotificationDot","variant","onLinkClick","e","onClick","propTypes","_pt","arrayOf","shape","string","isRequired","node","bool","func","oneOf"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport Tabs from './Tabs';\r\nimport TabLink from './TabLink';\r\nimport { BaseProps } from '../icons';\r\nimport { Size } from '../types';\r\n\r\nexport interface VerticalTabEntry {\r\n  /**\r\n   * Required. The main text to be displayed on the tab.\r\n   */\r\n  requiredLine: string;\r\n\r\n  /**\r\n   * Optional. The secondary text to be displayed on the tab link under the required line.\r\n   */\r\n  optionalLine?: string;\r\n\r\n  /**\r\n   * Optional. The icon to be displayed next to the secondary text on the tab link under the required line.\r\n   */\r\n  optionalLineIcon?: React.ReactNode;\r\n\r\n  /**\r\n   * Optional. The icon to be displayed at the end of the tab.\r\n   */\r\n  endLineIcon?: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The URL to which the tab links.\r\n   */\r\n  to: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the tab is disabled.\r\n   * If true, the tab will be unclickable and will have a disabled appearance.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. The handler function to be called when the tab is clicked.\r\n   */\r\n  onClick?: (e: React.MouseEvent) => void;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether a notification dot should be shown on the tab.\r\n   */\r\n  showNotificationDot?: boolean;\r\n\r\n  /**\r\n   * Optional. The variant of the notification dot. It can be 'critical' or 'positive'. Defaults to 'Critical'\r\n   */\r\n  variant?: 'critical' | 'positive';\r\n}\r\n\r\nexport interface VerticalTabsProps {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  entries: VerticalTabEntry[];\r\n}\r\n\r\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\r\n  return (\r\n    <Tabs size={size ?? Size.Large}>\r\n      {entries?.map((entry: VerticalTabEntry) => (\r\n        <TabLink\r\n          key={entry.to}\r\n          href={entry.to}\r\n          requiredLine={entry.requiredLine}\r\n          optionalLine={entry.optionalLine}\r\n          endLineIcon={entry.endLineIcon}\r\n          OptionalLineIcon={entry.optionalLineIcon}\r\n          disabled={entry.disabled}\r\n          showNotificationDot={entry.showNotificationDot}\r\n          size={size}\r\n          variant={entry.variant}\r\n          onLinkClick={(e) => {\r\n            if (entry.onClick) {\r\n              entry.onClick(e);\r\n            }\r\n          }}/>\r\n      ))}\r\n    </Tabs>\r\n  );\r\n};\r\n\r\nexport default VerticalTabs;\r\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,OAAO,MAAM,WAAW;AAE/B,SAASC,IAAI,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAuDhC,MAAMC,YAAY,GAAGC,IAAA,IAA0C;EAAA,IAAzC;IAAEC,IAAI;IAAEC;EAA2B,CAAC,GAAAF,IAAA;EACxD,oBACEF,IAAA,CAACJ,IAAI;IAACO,IAAI,EAAEA,IAAI,IAAIL,IAAI,CAACO,KAAM;IAAAC,QAAA,EAC5BF,OAAO,EAAEG,GAAG,CAAEC,KAAuB,iBACpCR,IAAA,CAACH,OAAO;MAENY,IAAI,EAAED,KAAK,CAACE,EAAG;MACfC,YAAY,EAAEH,KAAK,CAACG,YAAa;MACjCC,YAAY,EAAEJ,KAAK,CAACI,YAAa;MACjCC,WAAW,EAAEL,KAAK,CAACK,WAAY;MAC/BC,gBAAgB,EAAEN,KAAK,CAACO,gBAAiB;MACzCC,QAAQ,EAAER,KAAK,CAACQ,QAAS;MACzBC,mBAAmB,EAAET,KAAK,CAACS,mBAAoB;MAC/Cd,IAAI,EAAEA,IAAK;MACXe,OAAO,EAAEV,KAAK,CAACU,OAAQ;MACvBC,WAAW,EAAGC,CAAC,IAAK;QAClB,IAAIZ,KAAK,CAACa,OAAO,EAAE;UACjBb,KAAK,CAACa,OAAO,CAACD,CAAC,CAAC;QAClB;MACF;IAAE,GAdGZ,KAAK,CAACE,EAcR,CACN;EAAC,CACE,CAAC;AAEX,CAAC;AAACT,YAAA,CAAAqB,SAAA;EA1BAlB,OAAO,EAAAmB,GAAA,CAAAC,OAAA,CAAAD,GAAA,CAAAE,KAAA;IA9CPd,YAAY,EAAAY,GAAA,CAAAG,MAAA,CAAAC,UAAA;IAKZf,YAAY,EAAAW,GAAA,CAAAG,MAAA;IAKZX,gBAAgB,EAAAQ,GAAA,CAAAK,IAAA;IAKhBf,WAAW,EAAAU,GAAA,CAAAK,IAAA;IAKXlB,EAAE,EAAAa,GAAA,CAAAG,MAAA,CAAAC,UAAA;IAMFX,QAAQ,EAAAO,GAAA,CAAAM,IAAA;IAKRR,OAAO,EAAAE,GAAA,CAAAO,IAAA;IAKPb,mBAAmB,EAAAM,GAAA,CAAAM,IAAA;IAKnBX,OAAO,EAAAK,GAAA,CAAAQ,KAAA,EAAG,UAAU,EAAG,UAAU;EAAA,IAAAJ;AAAA;AAiCnC,eAAe1B,YAAY","ignoreList":[]}
+{"version":3,"file":"VerticalTabs.js","names":["React","Tabs","TabLink","Size","jsx","_jsx","VerticalTabs","_ref","size","entries","Large","children","map","entry","href","to","requiredLine","optionalLine","endLineIcon","OptionalLineIcon","optionalLineIcon","disabled","showNotificationDot","variant","onLinkClick","e","onClick","preventDefault","propTypes","_pt","arrayOf","shape","string","isRequired","node","bool","func","oneOf"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport Tabs from './Tabs';\r\nimport TabLink from './TabLink';\r\nimport { BaseProps } from '../icons';\r\nimport { Size } from '../types';\r\n\r\nexport interface VerticalTabEntry {\r\n  /**\r\n   * Required. The main text to be displayed on the tab.\r\n   */\r\n  requiredLine: string;\r\n\r\n  /**\r\n   * Optional. The secondary text to be displayed on the tab link under the required line.\r\n   */\r\n  optionalLine?: string;\r\n\r\n  /**\r\n   * Optional. The icon to be displayed next to the secondary text on the tab link under the required line.\r\n   */\r\n  optionalLineIcon?: React.ReactNode;\r\n\r\n  /**\r\n   * Optional. The icon to be displayed at the end of the tab.\r\n   */\r\n  endLineIcon?: React.ReactNode;\r\n\r\n  /**\r\n   * Required. The URL to which the tab links.\r\n   */\r\n  to: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the tab is disabled.\r\n   * If true, the tab will be unclickable and will have a disabled appearance.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. The handler function to be called when the tab is clicked.\r\n   */\r\n  onClick?: (e: React.MouseEvent) => void;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether a notification dot should be shown on the tab.\r\n   */\r\n  showNotificationDot?: boolean;\r\n\r\n  /**\r\n   * Optional. The variant of the notification dot. It can be 'critical' or 'positive'. Defaults to 'Critical'\r\n   */\r\n  variant?: 'critical' | 'positive';\r\n}\r\n\r\nexport interface VerticalTabsProps {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  entries: VerticalTabEntry[];\r\n}\r\n\r\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\r\n  return (\r\n    <Tabs size={size ?? Size.Large}>\r\n      {entries?.map((entry: VerticalTabEntry) => (\r\n        <TabLink\r\n          key={entry.to}\r\n          href={entry.to}\r\n          requiredLine={entry.requiredLine}\r\n          optionalLine={entry.optionalLine}\r\n          endLineIcon={entry.endLineIcon}\r\n          OptionalLineIcon={entry.optionalLineIcon}\r\n          disabled={entry.disabled}\r\n          showNotificationDot={entry.showNotificationDot}\r\n          size={size}\r\n          variant={entry.variant}\r\n          onLinkClick={(e) => {\r\n            if (entry.onClick) {\r\n              entry.onClick(e);\r\n              e.preventDefault && e.preventDefault();\r\n            }\r\n          }}/>\r\n      ))}\r\n    </Tabs>\r\n  );\r\n};\r\n\r\nexport default VerticalTabs;\r\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,OAAO,MAAM,WAAW;AAE/B,SAASC,IAAI,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAuDhC,MAAMC,YAAY,GAAGC,IAAA,IAA0C;EAAA,IAAzC;IAAEC,IAAI;IAAEC;EAA2B,CAAC,GAAAF,IAAA;EACxD,oBACEF,IAAA,CAACJ,IAAI;IAACO,IAAI,EAAEA,IAAI,IAAIL,IAAI,CAACO,KAAM;IAAAC,QAAA,EAC5BF,OAAO,EAAEG,GAAG,CAAEC,KAAuB,iBACpCR,IAAA,CAACH,OAAO;MAENY,IAAI,EAAED,KAAK,CAACE,EAAG;MACfC,YAAY,EAAEH,KAAK,CAACG,YAAa;MACjCC,YAAY,EAAEJ,KAAK,CAACI,YAAa;MACjCC,WAAW,EAAEL,KAAK,CAACK,WAAY;MAC/BC,gBAAgB,EAAEN,KAAK,CAACO,gBAAiB;MACzCC,QAAQ,EAAER,KAAK,CAACQ,QAAS;MACzBC,mBAAmB,EAAET,KAAK,CAACS,mBAAoB;MAC/Cd,IAAI,EAAEA,IAAK;MACXe,OAAO,EAAEV,KAAK,CAACU,OAAQ;MACvBC,WAAW,EAAGC,CAAC,IAAK;QAClB,IAAIZ,KAAK,CAACa,OAAO,EAAE;UACjBb,KAAK,CAACa,OAAO,CAACD,CAAC,CAAC;UAChBA,CAAC,CAACE,cAAc,IAAIF,CAAC,CAACE,cAAc,CAAC,CAAC;QACxC;MACF;IAAE,GAfGd,KAAK,CAACE,EAeR,CACN;EAAC,CACE,CAAC;AAEX,CAAC;AAACT,YAAA,CAAAsB,SAAA;EA3BAnB,OAAO,EAAAoB,GAAA,CAAAC,OAAA,CAAAD,GAAA,CAAAE,KAAA;IA9CPf,YAAY,EAAAa,GAAA,CAAAG,MAAA,CAAAC,UAAA;IAKZhB,YAAY,EAAAY,GAAA,CAAAG,MAAA;IAKZZ,gBAAgB,EAAAS,GAAA,CAAAK,IAAA;IAKhBhB,WAAW,EAAAW,GAAA,CAAAK,IAAA;IAKXnB,EAAE,EAAAc,GAAA,CAAAG,MAAA,CAAAC,UAAA;IAMFZ,QAAQ,EAAAQ,GAAA,CAAAM,IAAA;IAKRT,OAAO,EAAAG,GAAA,CAAAO,IAAA;IAKPd,mBAAmB,EAAAO,GAAA,CAAAM,IAAA;IAKnBZ,OAAO,EAAAM,GAAA,CAAAQ,KAAA,EAAG,UAAU,EAAG,UAAU;EAAA,IAAAJ;AAAA;AAkCnC,eAAe3B,YAAY","ignoreList":[]}

package/dist/Tabs/__tests__/HorizontalTabs.test.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { fireEvent, render } from '../../test-utils';
+import HorizontalTabs from '../HorizontalTabs';
+import { Size } from '../../types';
+import 'jest-styled-components';
+import '@testing-library/jest-dom';
+
+const tabs = [
+  {
+    value: 'Tab1',
+    selected: false,
+    to: 'tab1',
+  },
+  {
+    value: 'Tab2',
+    selected: true,
+    to: 'tab2',
+  },
+  {
+    value: 'Tab3',
+    selected: false,
+    to: 'tab3',
+    disabled: true,
+  },
+];
+
+
+
+
+describe('<HorizontalTabs />', () => {
+  it('Renders tabs component', async () => {
+    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} tabs={tabs} onTabChange={(to) => {}}></HorizontalTabs>);
+    expect(queryByTestId('horizontal-tabs-container')).toBeTruthy();
+    expect(queryByTestId('horizontal-tabs-container')?.querySelectorAll('[data-testid*="tab_"]')).toHaveLength(3);
+  });
+
+  it('Renders tabs component with side fill', async () => {
+    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} sideFill={true} tabs={tabs} onTabChange={(to) => {}}></HorizontalTabs>);
+    expect(queryByTestId('horizontal-tabs-container')).toBeTruthy();
+    expect(queryByTestId('horizontal-tabs-container')?.querySelector('.fill')).toBeTruthy();
+  });
+
+  it('Renders tabs component with no tabs provided', async () => {
+    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} tabs={[]} onTabChange={(to) => {}}></HorizontalTabs>);
+    expect(queryByTestId('horizontal-tabs-container')).toBeTruthy();
+    expect(queryByTestId('horizontal-tabs-container')?.querySelectorAll('[data-testid*="tab_"]')).toHaveLength(0);
+  });
+
+  it('Check disabled tabs rendered correctly', async () => {
+    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} tabs={tabs} onTabChange={(to) => {}}></HorizontalTabs>);
+    const disabledTab = tabs.find((t) => t.disabled);
+    const notDisabledTab = tabs.find((t) => !t.disabled);
+    expect(queryByTestId('horizontal-tabs-container')).toBeTruthy();
+
+    const disabledTabElem = queryByTestId('horizontal-tabs-container')?.querySelector(`[data-testid="tab_${disabledTab?.value}"]`);
+    const notDisabledTabElem = queryByTestId('horizontal-tabs-container')?.querySelector(`[data-testid="tab_${notDisabledTab?.value}"]`);
+
+    //check disabled/non-disabled rendered
+    expect(disabledTabElem).toBeTruthy();
+    expect(notDisabledTabElem).toBeTruthy();
+
+    //check tab index prop set correct
+    expect(disabledTabElem).toHaveAttribute('tabindex', '-1');
+    expect(notDisabledTabElem).not.toHaveClass('disabled');
+  });
+
+  it('Check tab change callback called on tab click', async () => {
+    const tabChangeFn = jest.fn();
+    const { queryByTestId } = render(<HorizontalTabs size={Size.Small} tabs={tabs} onTabChange={tabChangeFn}></HorizontalTabs>);
+
+    const notDisabledTab = tabs.find((t) => !t.disabled);
+    const notDisabledTabElem = queryByTestId('horizontal-tabs-container')?.querySelector(`[data-testid="tab_${notDisabledTab?.value}"]`);
+
+    //fire click tab click event
+    fireEvent(
+      notDisabledTabElem as HTMLButtonElement,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    //check has been called
+    expect(tabChangeFn).toHaveBeenCalledTimes(1);
+  });
+
+  it('Check tab width calculed correctly when fullWidth prop set', async () => {
+    const { queryByTestId, queryByText } = render(<HorizontalTabs fullWidth={true} size={Size.Small} tabs={tabs} onTabChange={() => {}}></HorizontalTabs>);
+
+    const tabElement = queryByTestId('horizontal-tabs-container')?.querySelector(`[data-testid="tab_Tab1"]`) as HTMLButtonElement;
+
+    expect(tabElement).toBeTruthy();
+    expect(tabElement.style).toHaveProperty('width', `${100 / tabs.length}%`);
+  });
+});