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

package/dist/Popover/__tests__/Popover.test.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import 'jest-styled-components';
+import { Popover } from '../..';
+import { SystemIcons } from '../../icons';
+import { Position } from '../../types';
+
+  
+describe('<Popover />',()=>{
+    it('renders title', async () => {
+        const{getByText, queryByTestId} = render(
+            <Popover position={Position.Bottom} topSectionProps={{text:'sample title'}} mainContent={<></>} showOnClick={false}>
+                <></>
+            </Popover>
+        );
+
+        expect(getByText('sample title')).toBeDefined();
+        expect(queryByTestId('closeBtn')).toBeNull();
+    })
+
+    it('renders note and title', async () => {
+        const{getByText, queryByTestId} = render(
+            <Popover position={Position.Left} topSectionProps={{text:'sample title', note:'sample note'}} mainContent={<></>} showOnClick={false}>
+                <></>
+            </Popover>
+        );
+
+        expect(getByText('sample title')).toBeDefined();
+        expect(getByText('sample note')).toBeDefined();
+        expect(queryByTestId('closeBtn')).toBeNull();
+    })
+
+    it('renders close button', async () => {
+        const{getByTestId} = render(
+            <Popover position={Position.Bottom} topSectionProps={{text:'sample title'}} mainContent={<></>} showOnClick={true}>
+                <></>
+            </Popover>
+        );
+
+        expect(getByTestId('closeBtn')).toBeDefined();
+    })
+
+    it('renders text button', async () => {
+        const{getByTestId} = render(
+            <Popover position={Position.Right} bottomSectionProps={{textButton:{label:'sample button', icon:<SystemIcons.OpenNewWindow />, action:()=>{}}}} mainContent={<></>} showOnClick={true}>
+                <></>
+            </Popover>
+        );
+
+        expect(getByTestId('textBtn')).toBeDefined();
+        expect(getByTestId('iconBtn').children).toHaveLength(0);
+    })
+
+    it('renders icon button', async () => {
+        const{getByTestId, queryByTestId} = render(
+            <Popover position={Position.Right} bottomSectionProps={{iconButtons:[{label:'sample button', icon:<SystemIcons.OpenNewWindow />, action:()=>{}}]}} mainContent={<></>} showOnClick={true}>
+                <></>
+            </Popover>
+        );
+
+        expect(queryByTestId('textBtn')).toBeNull();
+        expect(getByTestId('iconBtn').children).toHaveLength(1);
+    })
+})

package/dist/ProfileButton/__tests__/ProfileButton.test.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import {ProfileButton} from '../index';
+import {render} from '../../test-utils';
+
+
+
+describe('ProfileButton', () => {
+
+  it('should render', () => {
+    const wrapper = render(<ProfileButton onClick={jest.fn()} initials={'initials'}/>);
+
+    expect(wrapper.queryByText('initials')).toBeInTheDocument();
+  });
+
+  it('should render image if portraitSrc is provided', () => {
+    const wrapper = render(<ProfileButton portraitSrc={'#'} onClick={jest.fn()}/>);
+
+
+    expect(wrapper.container.querySelector(`img`)).toBeInTheDocument();
+    expect(wrapper.queryByText('initials')).not.toBeInTheDocument();
+  });
+
+  it('should render initials if portraitSrc is not provided and initials are', () => {
+    const wrapper = render(<ProfileButton initials={'initials'} onClick={jest.fn()}/>);
+
+
+    expect(wrapper.container.querySelector(`img`)).not.toBeInTheDocument();
+    expect(wrapper.queryByText('initials')).toBeInTheDocument();
+  });
+
+});

package/dist/QuizButton/__tests__/QuizButton.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import 'jest-styled-components';
+import { QuizButton } from '..';
+import { Size } from '../../types';
+import COLORS from '../../styles/colors';
+import '@testing-library/jest-dom';
+
+
+describe('<QuizButton />',()=>{
+    it('renders correct quiz button', async () => {
+        const{getByText, getByTestId} = render(
+            <QuizButton size={Size.Small} resultType={'correct'} text={'this is sample text'} type={'radio'} id={'1'}/>
+        );
+        expect(getByTestId('txtContainer')).toHaveTextContent('this is sample text');
+        expect(getByTestId('txtContainer')).toHaveClass('quiz-button-text');
+        expect(getByTestId('btnContainer')).toHaveClass('quiz-button-icon');
+    });
+
+    it('renders incorrect quiz button', async () => {
+        const{getByText, getByTestId} = render(
+            <QuizButton size={Size.Small} resultType={'incorrect'} text={'this is sample text'} type={'checkbox'} id={'1'}/>
+        );
+        expect(getByTestId('txtContainer')).toHaveTextContent('this is sample text');
+        expect(getByTestId('txtContainer')).toHaveClass('quiz-button-text');
+        expect(getByTestId('btnContainer')).toHaveClass('quiz-button-icon');
+    });
+
+    it('renders partial quiz button', async () => {
+        const{getByText, getByTestId} = render(
+            <QuizButton size={Size.Small} resultType={'partial'} text={'this is sample text'} type={'radio'} id={'1'}/>
+        );
+        expect(getByTestId('txtContainer')).toHaveTextContent('this is sample text');
+        expect(getByTestId('txtContainer')).toHaveClass('quiz-button-text');
+        expect(getByTestId('btnContainer')).toHaveClass('quiz-button-icon');
+    });
+
+    it('renders quiz button', async () => {
+        const{getByText, getByTestId} = render(
+            <QuizButton size={Size.Small} text={'this is sample text'} type={'checkbox'} id={'1'}/>
+        );
+        expect(getByText('this is sample text')).toHaveTextContent('this is sample text');
+        expect(getByTestId('txtContainer')).toHaveStyleRule('background',COLORS.accent1_20);
+        expect(getByTestId('btnContainer')).toHaveStyleRule('background',COLORS.accent1_100);
+    });
+
+    it('renders selected quiz button', async () => {
+        const{getByText} = render(
+            <QuizButton size={Size.Small} text={'this is sample text'} selected={true} type={'radio'} id={'1'}/>
+        );
+        expect(getByText('this is sample text')).toHaveTextContent('this is sample text');
+    });
+});

package/dist/SegmentControl/__tests__/SegmentControl.test.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import {SegmentControlItemWrapper, SegmentControlWrapper} from '../SegmentControl';
+import {render} from '../../test-utils';
+import {SegmentControl} from '../index';
+import {SystemIcons} from '../../icons';
+import {fireEvent} from '@testing-library/react';
+import { act } from "react";
+
+
+
+
+describe('SegmentControl', () => {
+
+  const items = [
+    {key: 'item1', content: 'Item 1', disabled: false,},
+    {key: 'item2', content: 'Item 2', disabled: false,},
+    {key: 'item3', content: 'Item 3', disabled: false,},
+    {key: 'item4', content: 'Item 4', disabled: false,},
+    {key: 'item5', content: 'Item 5', disabled: false,},
+    {key: 'item6', content: 'Item 6', disabled: true,}
+  ];
+
+  const icons = [
+    {key: 'icon1', content: <SystemIcons.Legend3Star size={'20'}/>, disabled: false,},
+    {key: 'icon2', content: <SystemIcons.Legend4Square size={'20'}/>, disabled: false,},
+    {key: 'icon3', content: <SystemIcons.Legend5Diamond size={'20'}/>, disabled: false,},
+    {key: 'icon4', content: <SystemIcons.Legend6Nabla size={'20'}/>, disabled: false,},
+    {key: 'icon5', content: <SystemIcons.Legend7Pentagon size={'20'}/>, disabled: false,},
+    {key: 'icon6', content: <SystemIcons.Legend8Rectangle size={'20'}/>, disabled: true,}
+  ]
+
+  it('should render a segment control with items', () => {
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[0].key}
+                      onChange={jest.fn()}/>
+    );
+
+    expect(wrapper.container.querySelectorAll(`${SegmentControlWrapper}`)).toHaveLength(1);
+    expect(wrapper.container.querySelectorAll(`${SegmentControlItemWrapper}`)).toHaveLength(6);
+  });
+
+  it('should render items with correct labels', () => {
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[0].key}
+                      onChange={jest.fn()}/>
+    );
+
+    for (let item of items) {
+      expect(wrapper.getByText(item.content)).toBeTruthy();
+    }
+  });
+
+  it('should render items with icons', () => {
+    const wrapper = render(
+      <SegmentControl items={icons}
+                      selected={icons[0].key}
+                      onChange={jest.fn()}/>
+    );
+
+    expect(wrapper.container.querySelectorAll(`${SegmentControlWrapper}`)).toHaveLength(1);
+    expect(wrapper.container.querySelectorAll(`${SegmentControlItemWrapper}`)).toHaveLength(6);
+  });
+
+  it('should render correct item as selected', () => {
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[2].key}
+                      onChange={jest.fn()}/>
+    );
+
+    expect(wrapper.container.querySelectorAll(`${SegmentControlItemWrapper}.selected`)).toHaveLength(1);
+    expect(wrapper.container.querySelectorAll(`${SegmentControlItemWrapper}`)[2].classList).toContain('selected');
+  });
+
+  it('should render correct item as disabled', () => {
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[2].key}
+                      onChange={jest.fn()}/>
+    );
+
+    expect(wrapper.container.querySelectorAll(`${SegmentControlItemWrapper}.disabled`)).toHaveLength(1);
+    expect(wrapper.container.querySelectorAll(`${SegmentControlItemWrapper}`)[5].classList).toContain('disabled');
+  });
+
+  it('should call on change function on item click', () => {
+    const onChange = jest.fn();
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[2].key}
+                      onChange={onChange}/>
+    );
+    act(() => {
+      wrapper.getByText(items[0].content).dispatchEvent(new MouseEvent('click', {bubbles: true}));
+    })
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(items[0].key);
+  });
+
+  it('should call on change function on item key press', () => {
+    const onChange = jest.fn();
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[2].key}
+                      onChange={onChange}/>
+    );
+    act(() => {
+      fireEvent.keyPress(wrapper.getByText(items[0].content), {key: 'Enter', keyCode: 13, which: 13});
+    })
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(items[0].key);
+  });
+
+  it('should not call on change function on disabled item click', () => {
+    const onChange = jest.fn();
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[2].key}
+                      onChange={onChange}/>
+    );
+    act(() => {
+      wrapper.getByText(items[5].content).dispatchEvent(new MouseEvent('click', {bubbles: true}));
+    })
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+
+  it('should not call on change function on disabled item key press', () => {
+    const onChange = jest.fn();
+    const wrapper = render(
+      <SegmentControl items={items}
+                      selected={items[2].key}
+                      onChange={onChange}/>
+    );
+    act(() => {
+      fireEvent.keyPress(wrapper.getByText(items[5].content), {key: 'Enter', keyCode: 13, which: 13});
+    })
+
+    expect(onChange).toHaveBeenCalledTimes(0);
+  });
+
+
+});

package/dist/SideMenu/SideMenuFooter.cjs

@@ -68,7 +68,7 @@ const SideMenuFooter = props => {
         size: props.size
       }, item), index))
     }), !!props.footer?.buttons?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonsContainer, {
-      children: props.footer.buttons.map((button, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, _objectSpread(_objectSpread({
+      children: props.footer.buttons.map((button, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.TextButton, _objectSpread(_objectSpread({
         size: props.size
       }, button), {}, {
         children: button.label

package/dist/SideMenu/SideMenuFooter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SideMenuFooter.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_assets","_Button","_MenuItem","_jsxRuntime","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","props","COLORS","getColor","theme","ItemsContainer","ButtonsContainer","LogoContainer","NoteContainer","ComponentXXSStyling","ComponentTextStyle","Regular","SideMenuFooter","jsxs","children","footer","items","jsx","map","item","index","MenuItem","size","buttons","button","Button","label","LaerdalLogo","height","width","note","exports"],"sources":["../../src/SideMenu/SideMenuFooter.tsx"],"sourcesContent":["import React from 'react';\r\nimport {SideMenuProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXSStyling\r\n} from '../styles';\r\nimport {LaerdalLogo} from '../assets';\r\nimport {Button} from '../Button';\r\nimport {MenuItem} from '../MenuItem';\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  width: 100%;\r\n\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n`;\r\n\r\nconst ItemsContainer = styled.div`\r\n  padding: 8px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  width: 100%;\r\n`;\r\n\r\nconst ButtonsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  box-sizing: border-box;\r\n  padding: 8px 16px;\r\n  gap: 10px;\r\n  width: 100%;\r\n\r\n  button {\r\n    flex: 1;\r\n  }\r\n\r\n  .small & {\r\n    gap: 0;\r\n    flex-direction: column-reverse;\r\n  }\r\n`;\r\n\r\nconst LogoContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  box-sizing: border-box;\r\n  min-height: 80px;\r\n  padding: 8px 16px;\r\n  background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n  width: 100%;\r\n`;\r\n\r\nconst NoteContainer = styled.div`\r\n  ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_500', props.theme))}\r\n`;\r\n\r\nexport const SideMenuFooter = (props: SideMenuProps) => {\r\n\r\n  return (\r\n    <Wrapper>\r\n      {\r\n        !!props.footer?.items?.length &&\r\n        <ItemsContainer>\r\n          {props.footer.items.map((item, index) =>\r\n            <MenuItem key={index} size={props.size} {...item}/>\r\n          )}\r\n        </ItemsContainer>\r\n      }\r\n      {\r\n        !!props.footer?.buttons?.length &&\r\n        <ButtonsContainer>\r\n          {\r\n            props.footer.buttons.map((button, index) =>\r\n              <Button key={index} size={props.size} {...button} >\r\n                {button.label}\r\n              </Button>\r\n            )\r\n          }\r\n        </ButtonsContainer>\r\n      }\r\n      {\r\n        !props.footer?.buttons?.length &&\r\n        <LogoContainer>\r\n          <LaerdalLogo height={'36px'} width={'66px'}/>\r\n          <NoteContainer>{props.footer?.note}</NoteContainer>\r\n        </LogoContainer>\r\n      }\r\n\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SideMenuFooter.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_assets","_Button","_MenuItem","_jsxRuntime","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","props","COLORS","getColor","theme","ItemsContainer","ButtonsContainer","LogoContainer","NoteContainer","ComponentXXSStyling","ComponentTextStyle","Regular","SideMenuFooter","jsxs","children","footer","items","jsx","map","item","index","MenuItem","size","buttons","button","TextButton","label","LaerdalLogo","height","width","note","exports"],"sources":["../../src/SideMenu/SideMenuFooter.tsx"],"sourcesContent":["import React from 'react';\r\nimport {SideMenuProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXSStyling\r\n} from '../styles';\r\nimport {LaerdalLogo} from '../assets';\r\nimport {TextButton} from '../Button';\r\nimport {MenuItem} from '../MenuItem';\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  width: 100%;\r\n\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n`;\r\n\r\nconst ItemsContainer = styled.div`\r\n  padding: 8px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  width: 100%;\r\n`;\r\n\r\nconst ButtonsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  box-sizing: border-box;\r\n  padding: 8px 16px;\r\n  gap: 10px;\r\n  width: 100%;\r\n\r\n  button {\r\n    flex: 1;\r\n  }\r\n\r\n  .small & {\r\n    gap: 0;\r\n    flex-direction: column-reverse;\r\n  }\r\n`;\r\n\r\nconst LogoContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  box-sizing: border-box;\r\n  min-height: 80px;\r\n  padding: 8px 16px;\r\n  background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n  width: 100%;\r\n`;\r\n\r\nconst NoteContainer = styled.div`\r\n  ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_500', props.theme))}\r\n`;\r\n\r\nexport const SideMenuFooter = (props: SideMenuProps) => {\r\n\r\n  return (\r\n    <Wrapper>\r\n      {\r\n        !!props.footer?.items?.length &&\r\n        <ItemsContainer>\r\n          {props.footer.items.map((item, index) =>\r\n            <MenuItem key={index} size={props.size} {...item}/>\r\n          )}\r\n        </ItemsContainer>\r\n      }\r\n      {\r\n        !!props.footer?.buttons?.length &&\r\n        <ButtonsContainer>\r\n          {\r\n            props.footer.buttons.map((button, index) =>\r\n              <TextButton key={index} size={props.size} {...button} >\r\n                {button.label}\r\n              </TextButton>\r\n            )\r\n          }\r\n        </ButtonsContainer>\r\n      }\r\n      {\r\n        !props.footer?.buttons?.length &&\r\n        <LogoContainer>\r\n          <LaerdalLogo height={'36px'} width={'66px'}/>\r\n          <NoteContainer>{props.footer?.note}</NoteContainer>\r\n        </LogoContainer>\r\n      }\r\n\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":"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","ignoreList":[]}

package/dist/SideMenu/SideMenuFooter.js

@@ -5,7 +5,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { COLORS, ComponentTextStyle, ComponentXXSStyling } from '../styles';
 import { LaerdalLogo } from '../assets';
-import { Button } from '../Button';
+import { TextButton } from '../Button';
 import { MenuItem } from '../MenuItem';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Wrapper = styled.div`
@@ -61,7 +61,7 @@ export const SideMenuFooter = props => {
         size: props.size
       }, item), index))
     }), !!props.footer?.buttons?.length && /*#__PURE__*/_jsx(ButtonsContainer, {
-      children: props.footer.buttons.map((button, index) => /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+      children: props.footer.buttons.map((button, index) => /*#__PURE__*/_jsx(TextButton, _objectSpread(_objectSpread({
         size: props.size
       }, button), {}, {
         children: button.label

package/dist/SideMenu/SideMenuFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideMenuFooter.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXXSStyling","LaerdalLogo","Button","MenuItem","jsx","_jsx","jsxs","_jsxs","Wrapper","div","props","getColor","theme","ItemsContainer","ButtonsContainer","LogoContainer","NoteContainer","Regular","SideMenuFooter","children","footer","items","length","map","item","index","_objectSpread","size","buttons","button","label","height","width","note"],"sources":["../../src/SideMenu/SideMenuFooter.tsx"],"sourcesContent":["import React from 'react';\r\nimport {SideMenuProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXSStyling\r\n} from '../styles';\r\nimport {LaerdalLogo} from '../assets';\r\nimport {Button} from '../Button';\r\nimport {MenuItem} from '../MenuItem';\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  width: 100%;\r\n\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n`;\r\n\r\nconst ItemsContainer = styled.div`\r\n  padding: 8px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  width: 100%;\r\n`;\r\n\r\nconst ButtonsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  box-sizing: border-box;\r\n  padding: 8px 16px;\r\n  gap: 10px;\r\n  width: 100%;\r\n\r\n  button {\r\n    flex: 1;\r\n  }\r\n\r\n  .small & {\r\n    gap: 0;\r\n    flex-direction: column-reverse;\r\n  }\r\n`;\r\n\r\nconst LogoContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  box-sizing: border-box;\r\n  min-height: 80px;\r\n  padding: 8px 16px;\r\n  background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n  width: 100%;\r\n`;\r\n\r\nconst NoteContainer = styled.div`\r\n  ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_500', props.theme))}\r\n`;\r\n\r\nexport const SideMenuFooter = (props: SideMenuProps) => {\r\n\r\n  return (\r\n    <Wrapper>\r\n      {\r\n        !!props.footer?.items?.length &&\r\n        <ItemsContainer>\r\n          {props.footer.items.map((item, index) =>\r\n            <MenuItem key={index} size={props.size} {...item}/>\r\n          )}\r\n        </ItemsContainer>\r\n      }\r\n      {\r\n        !!props.footer?.buttons?.length &&\r\n        <ButtonsContainer>\r\n          {\r\n            props.footer.buttons.map((button, index) =>\r\n              <Button key={index} size={props.size} {...button} >\r\n                {button.label}\r\n              </Button>\r\n            )\r\n          }\r\n        </ButtonsContainer>\r\n      }\r\n      {\r\n        !props.footer?.buttons?.length &&\r\n        <LogoContainer>\r\n          <LaerdalLogo height={'36px'} width={'66px'}/>\r\n          <NoteContainer>{props.footer?.note}</NoteContainer>\r\n        </LogoContainer>\r\n      }\r\n\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SACEC,MAAM,EACNC,kBAAkB,EAClBC,mBAAmB,QACd,WAAW;AAClB,SAAQC,WAAW,QAAO,WAAW;AACrC,SAAQC,MAAM,QAAO,WAAW;AAChC,SAAQC,QAAQ,QAAO,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAErC,MAAMC,OAAO,GAAGX,MAAM,CAACY,GAAG;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BC,KAAK,IAAIZ,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC9E,CAAC;AAED,MAAMC,cAAc,GAAGhB,MAAM,CAACY,GAAG;AACjC;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMK,gBAAgB,GAAGjB,MAAM,CAACY,GAAG;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMM,aAAa,GAAGlB,MAAM,CAACY,GAAG;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBC,KAAK,IAAIZ,MAAM,CAACa,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AACzE;AACA,CAAC;AAED,MAAMI,aAAa,GAAGnB,MAAM,CAACY,GAAG;AAChC,IAAIC,KAAK,IAAIV,mBAAmB,CAACD,kBAAkB,CAACkB,OAAO,EAAEnB,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,CAAC;AACzG,CAAC;AAED,OAAO,MAAMM,cAAc,GAAIR,KAAoB,IAAK;EAEtD,oBACEH,KAAA,CAACC,OAAO;IAAAW,QAAA,GAEJ,CAAC,CAACT,KAAK,CAACU,MAAM,EAAEC,KAAK,EAAEC,MAAM,iBAC7BjB,IAAA,CAACQ,cAAc;MAAAM,QAAA,EACZT,KAAK,CAACU,MAAM,CAACC,KAAK,CAACE,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBAClCpB,IAAA,CAACF,QAAQ,EAAAuB,aAAA;QAAaC,IAAI,EAAEjB,KAAK,CAACiB;MAAK,GAAKH,IAAI,GAAjCC,KAAmC,CACpD;IAAC,CACa,CAAC,EAGjB,CAAC,CAACf,KAAK,CAACU,MAAM,EAAEQ,OAAO,EAAEN,MAAM,iBAC/BjB,IAAA,CAACS,gBAAgB;MAAAK,QAAA,EAEbT,KAAK,CAACU,MAAM,CAACQ,OAAO,CAACL,GAAG,CAAC,CAACM,MAAM,EAAEJ,KAAK,kBACrCpB,IAAA,CAACH,MAAM,EAAAwB,aAAA,CAAAA,aAAA;QAAaC,IAAI,EAAEjB,KAAK,CAACiB;MAAK,GAAKE,MAAM;QAAAV,QAAA,EAC7CU,MAAM,CAACC;MAAK,IADFL,KAEL,CACV;IAAC,CAEa,CAAC,EAGnB,CAACf,KAAK,CAACU,MAAM,EAAEQ,OAAO,EAAEN,MAAM,iBAC9Bf,KAAA,CAACQ,aAAa;MAAAI,QAAA,gBACZd,IAAA,CAACJ,WAAW;QAAC8B,MAAM,EAAE,MAAO;QAACC,KAAK,EAAE;MAAO,CAAC,CAAC,eAC7C3B,IAAA,CAACW,aAAa;QAAAG,QAAA,EAAET,KAAK,CAACU,MAAM,EAAEa;MAAI,CAAgB,CAAC;IAAA,CACtC,CAAC;EAAA,CAGX,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"file":"SideMenuFooter.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXXSStyling","LaerdalLogo","TextButton","MenuItem","jsx","_jsx","jsxs","_jsxs","Wrapper","div","props","getColor","theme","ItemsContainer","ButtonsContainer","LogoContainer","NoteContainer","Regular","SideMenuFooter","children","footer","items","length","map","item","index","_objectSpread","size","buttons","button","label","height","width","note"],"sources":["../../src/SideMenu/SideMenuFooter.tsx"],"sourcesContent":["import React from 'react';\r\nimport {SideMenuProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXSStyling\r\n} from '../styles';\r\nimport {LaerdalLogo} from '../assets';\r\nimport {TextButton} from '../Button';\r\nimport {MenuItem} from '../MenuItem';\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  box-sizing: border-box;\r\n  width: 100%;\r\n\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n`;\r\n\r\nconst ItemsContainer = styled.div`\r\n  padding: 8px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  width: 100%;\r\n`;\r\n\r\nconst ButtonsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  box-sizing: border-box;\r\n  padding: 8px 16px;\r\n  gap: 10px;\r\n  width: 100%;\r\n\r\n  button {\r\n    flex: 1;\r\n  }\r\n\r\n  .small & {\r\n    gap: 0;\r\n    flex-direction: column-reverse;\r\n  }\r\n`;\r\n\r\nconst LogoContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  box-sizing: border-box;\r\n  min-height: 80px;\r\n  padding: 8px 16px;\r\n  background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n  width: 100%;\r\n`;\r\n\r\nconst NoteContainer = styled.div`\r\n  ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_500', props.theme))}\r\n`;\r\n\r\nexport const SideMenuFooter = (props: SideMenuProps) => {\r\n\r\n  return (\r\n    <Wrapper>\r\n      {\r\n        !!props.footer?.items?.length &&\r\n        <ItemsContainer>\r\n          {props.footer.items.map((item, index) =>\r\n            <MenuItem key={index} size={props.size} {...item}/>\r\n          )}\r\n        </ItemsContainer>\r\n      }\r\n      {\r\n        !!props.footer?.buttons?.length &&\r\n        <ButtonsContainer>\r\n          {\r\n            props.footer.buttons.map((button, index) =>\r\n              <TextButton key={index} size={props.size} {...button} >\r\n                {button.label}\r\n              </TextButton>\r\n            )\r\n          }\r\n        </ButtonsContainer>\r\n      }\r\n      {\r\n        !props.footer?.buttons?.length &&\r\n        <LogoContainer>\r\n          <LaerdalLogo height={'36px'} width={'66px'}/>\r\n          <NoteContainer>{props.footer?.note}</NoteContainer>\r\n        </LogoContainer>\r\n      }\r\n\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SACEC,MAAM,EACNC,kBAAkB,EAClBC,mBAAmB,QACd,WAAW;AAClB,SAAQC,WAAW,QAAO,WAAW;AACrC,SAAQC,UAAU,QAAO,WAAW;AACpC,SAAQC,QAAQ,QAAO,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAErC,MAAMC,OAAO,GAAGX,MAAM,CAACY,GAAG;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BC,KAAK,IAAIZ,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC9E,CAAC;AAED,MAAMC,cAAc,GAAGhB,MAAM,CAACY,GAAG;AACjC;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMK,gBAAgB,GAAGjB,MAAM,CAACY,GAAG;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMM,aAAa,GAAGlB,MAAM,CAACY,GAAG;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBC,KAAK,IAAIZ,MAAM,CAACa,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AACzE;AACA,CAAC;AAED,MAAMI,aAAa,GAAGnB,MAAM,CAACY,GAAG;AAChC,IAAIC,KAAK,IAAIV,mBAAmB,CAACD,kBAAkB,CAACkB,OAAO,EAAEnB,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,CAAC;AACzG,CAAC;AAED,OAAO,MAAMM,cAAc,GAAIR,KAAoB,IAAK;EAEtD,oBACEH,KAAA,CAACC,OAAO;IAAAW,QAAA,GAEJ,CAAC,CAACT,KAAK,CAACU,MAAM,EAAEC,KAAK,EAAEC,MAAM,iBAC7BjB,IAAA,CAACQ,cAAc;MAAAM,QAAA,EACZT,KAAK,CAACU,MAAM,CAACC,KAAK,CAACE,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBAClCpB,IAAA,CAACF,QAAQ,EAAAuB,aAAA;QAAaC,IAAI,EAAEjB,KAAK,CAACiB;MAAK,GAAKH,IAAI,GAAjCC,KAAmC,CACpD;IAAC,CACa,CAAC,EAGjB,CAAC,CAACf,KAAK,CAACU,MAAM,EAAEQ,OAAO,EAAEN,MAAM,iBAC/BjB,IAAA,CAACS,gBAAgB;MAAAK,QAAA,EAEbT,KAAK,CAACU,MAAM,CAACQ,OAAO,CAACL,GAAG,CAAC,CAACM,MAAM,EAAEJ,KAAK,kBACrCpB,IAAA,CAACH,UAAU,EAAAwB,aAAA,CAAAA,aAAA;QAAaC,IAAI,EAAEjB,KAAK,CAACiB;MAAK,GAAKE,MAAM;QAAAV,QAAA,EACjDU,MAAM,CAACC;MAAK,IADEL,KAEL,CACd;IAAC,CAEa,CAAC,EAGnB,CAACf,KAAK,CAACU,MAAM,EAAEQ,OAAO,EAAEN,MAAM,iBAC9Bf,KAAA,CAACQ,aAAa;MAAAI,QAAA,gBACZd,IAAA,CAACJ,WAAW;QAAC8B,MAAM,EAAE,MAAO;QAACC,KAAK,EAAE;MAAO,CAAC,CAAC,eAC7C3B,IAAA,CAACW,aAAa;QAAAG,QAAA,EAAET,KAAK,CAACU,MAAM,EAAEa;MAAI,CAAgB,CAAC;IAAA,CACtC,CAAC;EAAA,CAGX,CAAC;AAEd,CAAC","ignoreList":[]}

package/dist/SideMenu/__tests__/SideMenu.test.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import {SideMenu} from '../index';
+import {act, render} from '../../test-utils';
+
+
+
+describe('SideMenu', () => {
+
+  it('should render content', () => {
+    const wrapper = render(<SideMenu onClose={jest.fn()}>content</SideMenu>);
+
+    expect(wrapper.getByText('content')).toBeDefined();
+  });
+
+  it('should call onClose when close button is clicked', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose}>content</SideMenu>);
+
+    act(() => {
+      wrapper.getByRole('button').click();
+    });
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+
+  it('should call onClose when close button is clicked', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose}>content</SideMenu>);
+
+    act(() => {
+      wrapper.getByRole('button').click();
+    });
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('should render label', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose} header={{label: 'label'}}>content</SideMenu>);
+
+    expect(wrapper.getByText('label')).toBeDefined();
+  });
+
+  it('should render header icon buttons ', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose} header={{
+      label: 'label', actions: [{
+        action: () => {
+        }, icon: <></>
+      }, {
+        action: () => {
+        }, icon: <></>
+      }]
+    }}>content</SideMenu>);
+
+    expect(wrapper.getAllByRole('button')).toHaveLength(3);
+  });
+
+  it('should render footer note', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose} footer={{note: 'note'}}>content</SideMenu>);
+
+    expect(wrapper.getByText('note')).toBeDefined();
+  });
+
+  it('should render footer buttons', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose} footer={{
+      buttons: [{
+        variant: 'primary', label: 'label', onClick: () => {
+        }
+      }]
+    }}>content</SideMenu>);
+
+    expect(wrapper.getAllByRole('button')).toHaveLength(2);
+  });
+
+  it('should render footer menu items', () => {
+    const onClose = jest.fn();
+    const wrapper = render(<SideMenu onClose={onClose} footer={{
+      items: [{
+        id: '1',
+        active: false,
+        onClickHandler: () => {},
+        item: {displayLabel: 'label 1', value: '1'}
+      }, {
+        id: '2',
+        active: false,
+        onClickHandler: () => {},
+        item: {displayLabel: 'label 2', value: '2'}
+      }]
+    }}>content</SideMenu>);
+
+    expect(wrapper.getByText('label 1')).toBeDefined();
+    expect(wrapper.getByText('label 2')).toBeDefined();
+  });
+
+});

package/dist/SideMenu/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","names":[],"sources":["../../src/SideMenu/types.ts"],"sourcesContent":["import {ButtonProps} from '../Button/Button';\r\nimport {IconButtonProps} from '../Button/Iconbutton';\r\nimport {MenuItemProps} from '../MenuItem/MenuItem';\r\nimport {Size} from '../types';\r\n\r\n\r\nexport type SideMenuAction = Omit<IconButtonProps, 'variant' |\r\n  'shape' |\r\n  'isInMobileMenu' |\r\n  'borderRadius' |\r\n  'flatEdge' |\r\n  'focusBackgroundColor' |\r\n  'useTransparentBackground' |\r\n  'unsetIconSize' |\r\n  'shouldNotInteract' |\r\n  'invertFocus' |\r\n  'hideOnLowWidth' | 'children'> & { icon: React.ReactNode };\r\n\r\nexport type  SideMenuButton =\r\n  Omit<ButtonProps, 'size' | 'iconOnly' | 'minWidth' | 'testId' | 'width' | 'invertFocus' | 'colorTheme' | 'flatEdge' | 'children'>\r\n  & { label: string };\r\n\r\nexport type SideMenuItem = Omit<MenuItemProps, 'size'>\r\n\r\nexport interface SideMenuHeader {\r\n  actions?: SideMenuAction[];\r\n  label?: string;\r\n}\r\n\r\nexport interface SideMenuFooter {\r\n  items?: SideMenuItem[];\r\n  buttons?: SideMenuButton[];\r\n  note?: string;\r\n}\r\n\r\nexport interface SideMenuProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  header?: SideMenuHeader;\r\n  footer?: SideMenuFooter;\r\n  onClose: () => void;\r\n  children?: any;\r\n}\r\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.cjs","names":[],"sources":["../../src/SideMenu/types.ts"],"sourcesContent":["import {TextButtonProps} from '../Button/TextButton';\r\nimport {IconButtonProps} from '../Button/Iconbutton';\r\nimport {MenuItemProps} from '../MenuItem/MenuItem';\r\nimport {Size} from '../types';\r\n\r\n\r\nexport type SideMenuAction = Omit<IconButtonProps, 'variant' |\r\n  'shape' |\r\n  'isInMobileMenu' |\r\n  'borderRadius' |\r\n  'flatEdge' |\r\n  'focusBackgroundColor' |\r\n  'useTransparentBackground' |\r\n  'unsetIconSize' |\r\n  'shouldNotInteract' |\r\n  'invertFocus' |\r\n  'hideOnLowWidth' | 'children'> & { icon: React.ReactNode };\r\n\r\nexport type  SideMenuButton =\r\n  Omit<TextButtonProps, 'size' | 'iconOnly' | 'minWidth' | 'testId' | 'width' | 'invertFocus' | 'colorTheme' | 'flatEdge' | 'children'>\r\n  & { label: string };\r\n\r\nexport type SideMenuItem = Omit<MenuItemProps, 'size'>\r\n\r\nexport interface SideMenuHeader {\r\n  actions?: SideMenuAction[];\r\n  label?: string;\r\n}\r\n\r\nexport interface SideMenuFooter {\r\n  items?: SideMenuItem[];\r\n  buttons?: SideMenuButton[];\r\n  note?: string;\r\n}\r\n\r\nexport interface SideMenuProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  header?: SideMenuHeader;\r\n  footer?: SideMenuFooter;\r\n  onClose: () => void;\r\n  children?: any;\r\n}\r\n"],"mappings":"","ignoreList":[]}

package/dist/SideMenu/types.d.ts

@@ -1,11 +1,11 @@
-import { ButtonProps } from '../Button/Button';
+import { TextButtonProps } from '../Button/TextButton';
 import { IconButtonProps } from '../Button/Iconbutton';
 import { MenuItemProps } from '../MenuItem/MenuItem';
 import { Size } from '../types';
 export type SideMenuAction = Omit<IconButtonProps, 'variant' | 'shape' | 'isInMobileMenu' | 'borderRadius' | 'flatEdge' | 'focusBackgroundColor' | 'useTransparentBackground' | 'unsetIconSize' | 'shouldNotInteract' | 'invertFocus' | 'hideOnLowWidth' | 'children'> & {
     icon: React.ReactNode;
 };
-export type SideMenuButton = Omit<ButtonProps, 'size' | 'iconOnly' | 'minWidth' | 'testId' | 'width' | 'invertFocus' | 'colorTheme' | 'flatEdge' | 'children'> & {
+export type SideMenuButton = Omit<TextButtonProps, 'size' | 'iconOnly' | 'minWidth' | 'testId' | 'width' | 'invertFocus' | 'colorTheme' | 'flatEdge' | 'children'> & {
     label: string;
 };
 export type SideMenuItem = Omit<MenuItemProps, 'size'>;

package/dist/SideMenu/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../src/SideMenu/types.ts"],"sourcesContent":["import {ButtonProps} from '../Button/Button';\r\nimport {IconButtonProps} from '../Button/Iconbutton';\r\nimport {MenuItemProps} from '../MenuItem/MenuItem';\r\nimport {Size} from '../types';\r\n\r\n\r\nexport type SideMenuAction = Omit<IconButtonProps, 'variant' |\r\n  'shape' |\r\n  'isInMobileMenu' |\r\n  'borderRadius' |\r\n  'flatEdge' |\r\n  'focusBackgroundColor' |\r\n  'useTransparentBackground' |\r\n  'unsetIconSize' |\r\n  'shouldNotInteract' |\r\n  'invertFocus' |\r\n  'hideOnLowWidth' | 'children'> & { icon: React.ReactNode };\r\n\r\nexport type  SideMenuButton =\r\n  Omit<ButtonProps, 'size' | 'iconOnly' | 'minWidth' | 'testId' | 'width' | 'invertFocus' | 'colorTheme' | 'flatEdge' | 'children'>\r\n  & { label: string };\r\n\r\nexport type SideMenuItem = Omit<MenuItemProps, 'size'>\r\n\r\nexport interface SideMenuHeader {\r\n  actions?: SideMenuAction[];\r\n  label?: string;\r\n}\r\n\r\nexport interface SideMenuFooter {\r\n  items?: SideMenuItem[];\r\n  buttons?: SideMenuButton[];\r\n  note?: string;\r\n}\r\n\r\nexport interface SideMenuProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  header?: SideMenuHeader;\r\n  footer?: SideMenuFooter;\r\n  onClose: () => void;\r\n  children?: any;\r\n}\r\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../src/SideMenu/types.ts"],"sourcesContent":["import {TextButtonProps} from '../Button/TextButton';\r\nimport {IconButtonProps} from '../Button/Iconbutton';\r\nimport {MenuItemProps} from '../MenuItem/MenuItem';\r\nimport {Size} from '../types';\r\n\r\n\r\nexport type SideMenuAction = Omit<IconButtonProps, 'variant' |\r\n  'shape' |\r\n  'isInMobileMenu' |\r\n  'borderRadius' |\r\n  'flatEdge' |\r\n  'focusBackgroundColor' |\r\n  'useTransparentBackground' |\r\n  'unsetIconSize' |\r\n  'shouldNotInteract' |\r\n  'invertFocus' |\r\n  'hideOnLowWidth' | 'children'> & { icon: React.ReactNode };\r\n\r\nexport type  SideMenuButton =\r\n  Omit<TextButtonProps, 'size' | 'iconOnly' | 'minWidth' | 'testId' | 'width' | 'invertFocus' | 'colorTheme' | 'flatEdge' | 'children'>\r\n  & { label: string };\r\n\r\nexport type SideMenuItem = Omit<MenuItemProps, 'size'>\r\n\r\nexport interface SideMenuHeader {\r\n  actions?: SideMenuAction[];\r\n  label?: string;\r\n}\r\n\r\nexport interface SideMenuFooter {\r\n  items?: SideMenuItem[];\r\n  buttons?: SideMenuButton[];\r\n  note?: string;\r\n}\r\n\r\nexport interface SideMenuProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  header?: SideMenuHeader;\r\n  footer?: SideMenuFooter;\r\n  onClose: () => void;\r\n  children?: any;\r\n}\r\n"],"mappings":"","ignoreList":[]}

package/dist/Switcher/__tests__/SwitcherMenuItem.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { SwitcherMenuItem } from '../index';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+
+describe('<SwitcherMenuItem />', () => {
+  it('Renders SwitcherMenuItem', async () => {
+    const { queryByText, getByTestId } = render(<SwitcherMenuItem label="TestLabel" url="/test" testId="TestSwitcherMenuItem" />);
+    expect(queryByText('TestLabel')).toBeDefined();
+
+    const testMenuItem = getByTestId('TestSwitcherMenuItem');
+  });
+});

package/dist/Table/TableBody.cjs

@@ -84,7 +84,7 @@ const TableBody = props => {
             size: _types.Size.Small,
             tabIndex: props.showLoadingIndicator ? -1 : 0
           }, column.additionalProps);
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, _objectSpread(_objectSpread({
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.TextButton, _objectSpread(_objectSpread({
             style: column.colorFn && {
               color: column.colorFn(row, column.key)
             }