@laerdal/life-react-components 1.3.1 → 1.3.2-dev.12

package/dist/esm/InputFields/Checkbox.js

@@ -61,7 +61,7 @@ const StyledCheckBox = styled.div`
     }
   }
 
-  &:not(.disabled):focus {
+  &:not(.disabled):not(.readonly):focus {
     outline: none;
 
     .checkbox-icon {
@@ -74,7 +74,7 @@ const StyledCheckBox = styled.div`
     }
   }
 
-  &:not(.disabled):hover {
+  &:not(.disabled):not(.readonly):hover {
     .checkbox-icon {
       background-color: ${COLORS.primary_20};
 
@@ -84,7 +84,7 @@ const StyledCheckBox = styled.div`
     }
   }
 
-  &:not(.disabled):active {
+  &:not(.disabled):not(.readonly):active {
     .checkbox-icon {
       background: ${COLORS.primary_100};
       box-shadow: none;
@@ -95,6 +95,14 @@ const StyledCheckBox = styled.div`
     }
   }
 
+  &.readonly{
+    cursor: inherit;
+    .checkbox-icon,
+    .checkbox-label {
+      pointer-events: none;
+    }
+  }
+  
   &.disabled {
     box-shadow: none;
     cursor: not-allowed;
@@ -126,20 +134,21 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
   margin,
   size,
   semiSelected,
-  children
+  children,
+  readonly
 }, ref) => {
   const onKeyPress = e => {
-    if (e.keyCode === 13 && !disabled) {
-      select(!selected);
+    if (e.keyCode === 13 && !disabled && !readonly) {
+      select && select(!selected);
     }
   };
 
   const handleClick = () => {
-    if (disabled) {
+    if (disabled || readonly) {
       return;
     }
 
-    select(!selected);
+    select && select(!selected);
   };
 
   size = size ?? Size.Medium;
@@ -147,9 +156,9 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     key: id,
     ref: ref,
     disabled: disabled,
-    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
+    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : ''),
     selected: selected,
-    tabIndex: disabled ? -1 : 0,
+    tabIndex: disabled || readonly ? -1 : 0,
     showWarning: showWarning,
     margin: margin,
     onClick: handleClick,
@@ -176,15 +185,16 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
   }, children));
 });
 Checkbox.propTypes = {
-  id: _pt.string.isRequired,
+  id: _pt.string,
   selected: _pt.bool.isRequired,
-  select: _pt.func.isRequired,
+  select: _pt.func,
   label: _pt.string,
   showWarning: _pt.bool,
   disabled: _pt.bool,
   margin: _pt.string,
   iconPointerEventsTransparent: _pt.bool,
-  semiSelected: _pt.bool
+  semiSelected: _pt.bool,
+  readonly: _pt.bool
 };
 export default Checkbox;
 //# sourceMappingURL=Checkbox.js.map

package/dist/esm/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","StyledCheckBox","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","forwardRef","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","ref","onKeyPress","e","keyCode","handleClick","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            showWarning,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled) {\n      return;\n    }\n    select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                    selected={selected}\n                    tabIndex={disabled ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","StyledCheckBox","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","forwardRef","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readonly","ref","onKeyPress","e","keyCode","handleClick","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    outline: none;\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly{\n    cursor: inherit;\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n  \n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readonly?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            showWarning,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readonly\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readonly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readonly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : '')}\n                    selected={selected}\n                    tabIndex={disabled || readonly ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}

package/dist/esm/Modals/__tests__/Modal.test.js

@@ -0,0 +1,154 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import 'jest-styled-components';
+import { ModalDialog } from '..';
+import { Size, SystemIcons } from '../..';
+describe('<ModalDialog />', () => {
+  let mountingDiv;
+  beforeEach(() => {
+    //being rendered as a React.Portal we need to have the 'root' div defined
+    mountingDiv = document.createElement('div');
+    mountingDiv.id = 'root';
+    document.body.appendChild(mountingDiv);
+  });
+  afterEach(() => {
+    document.body.removeChild(mountingDiv);
+  });
+  it('Check modal not rendered when isModalOpen is false', async () => {
+    const {
+      container,
+      getByText
+    } = render( /*#__PURE__*/React.createElement(ModalDialog, {
+      key: "smallModalWithoutImage",
+      closeModalAndClearInput: () => {},
+      title: 'Header',
+      size: Size.Small,
+      isModalOpen: false,
+      closeAction: () => {},
+      submitAction: () => {}
+    })); //check modal portal not exists when modal not opened
+
+    expect(container.querySelector('.ReactModalPortal')).toBeNull();
+  });
+  it('Check modal visible, title and footer buttons displayed correctly', async () => {
+    const {
+      container,
+      getByText
+    } = render( /*#__PURE__*/React.createElement(ModalDialog, {
+      key: "smallModalWithoutImage",
+      closeModalAndClearInput: () => {},
+      title: 'Header',
+      size: Size.Small,
+      isModalOpen: true,
+      closeAction: () => {},
+      submitAction: () => {},
+      buttons: [{
+        action: () => {},
+        text: 'Close',
+        variant: 'tertiary'
+      }, {
+        action: () => {},
+        text: 'Save'
+      }]
+    })); //check modal portal defined
+
+    expect(container.querySelector('.ReactModalPortal')).toBeDefined(); //Check header and footer buttons
+
+    expect(getByText('Header')).toBeDefined();
+    expect(getByText('Close')).toBeDefined();
+    expect(getByText('Save')).toBeDefined();
+  });
+  it('Check tooltip, and link displayed without right footer buttons', async () => {
+    const {
+      baseElement,
+      getByText
+    } = render( /*#__PURE__*/React.createElement(ModalDialog, {
+      key: "smallModalWithoutImage",
+      closeModalAndClearInput: () => {},
+      title: 'Header',
+      size: Size.Small,
+      isModalOpen: true,
+      closeAction: () => {},
+      submitAction: () => {},
+      tooltip: 'some test tooltip',
+      leftFooterAction: {
+        id: 'test-link',
+        actionType: 'hyperlink',
+        text: 'Link',
+        href: 'http://test.com',
+        icon: /*#__PURE__*/React.createElement(React.Fragment, null),
+        variant: 'default'
+      }
+    })); //check tooltip displayed
+
+    expect(getByText('some test tooltip').textContent).toBeDefined(); //check footer link displayed
+
+    expect(getByText('Link').children).toBeDefined();
+  });
+  it('Check note and footer note displayed', async () => {
+    const {
+      baseElement,
+      getByText
+    } = render( /*#__PURE__*/React.createElement(ModalDialog, {
+      key: "smallModalWithoutImage",
+      closeModalAndClearInput: () => {},
+      title: 'Header',
+      size: Size.Small,
+      isModalOpen: true,
+      closeAction: () => {},
+      submitAction: () => {},
+      leftFooterAction: {
+        id: 'test-note',
+        actionType: 'note',
+        text: 'Test note',
+        icon: /*#__PURE__*/React.createElement(SystemIcons.Information, null)
+      },
+      note: 'Message text',
+      state: 'critical'
+    })); //check footer note text displayed
+
+    expect(getByText('Test note').textContent).toBeDefined(); //check note section added
+
+    expect(baseElement.querySelectorAll('section')?.length).toEqual(4); //check note message displayed
+
+    expect(getByText('Message text').children).toBeDefined();
+  });
+  it('Check back button and close icon displayed', async () => {
+    const {
+      baseElement,
+      getByText,
+      container
+    } = render( /*#__PURE__*/React.createElement(ModalDialog, {
+      key: "smallModalWithoutImage",
+      closeModalAndClearInput: () => {},
+      title: 'Header',
+      size: Size.Small,
+      backButton: () => {},
+      isModalOpen: true,
+      closeAction: () => {},
+      submitAction: () => {}
+    })); //only 2 svg elements should be found in the header of the modal
+
+    expect(baseElement.querySelectorAll('svg')?.length).toEqual(2);
+  });
+  it('Check modal body displayed', async () => {
+    const {
+      baseElement,
+      getByText,
+      container
+    } = render( /*#__PURE__*/React.createElement(ModalDialog, {
+      key: "smallModalWithoutImage",
+      closeModalAndClearInput: () => {},
+      title: 'Header',
+      size: Size.Small,
+      isModalOpen: true,
+      closeAction: () => {},
+      submitAction: () => {}
+    }, /*#__PURE__*/React.createElement("span", null, "Inner modal text"))); //Check all dialog sections are displayed
+
+    expect(baseElement.querySelectorAll('section')?.length).toEqual(3); //Check that the second section (modal body) has the correct text
+
+    expect(baseElement.querySelectorAll('section')?.[1].textContent).toEqual('Inner modal text');
+  });
+});
+//# sourceMappingURL=Modal.test.js.map

package/dist/esm/Modals/__tests__/Modal.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Modals/__tests__/Modal.test.tsx"],"names":["React","render","ModalDialog","Size","SystemIcons","describe","mountingDiv","beforeEach","document","createElement","id","body","appendChild","afterEach","removeChild","it","container","getByText","Small","expect","querySelector","toBeNull","action","text","variant","toBeDefined","baseElement","actionType","href","icon","textContent","children","querySelectorAll","length","toEqual"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { ModalDialog } from '..';\nimport { COLORS, Size, SystemIcons } from '../..';\n\ndescribe('<ModalDialog />', () => {\n  let mountingDiv: HTMLElement;\n\n  beforeEach(() => {\n    //being rendered as a React.Portal we need to have the 'root' div defined\n    mountingDiv = document.createElement('div');\n    mountingDiv.id = 'root';\n    document.body.appendChild(mountingDiv);\n  });\n\n  afterEach(() => {\n    document.body.removeChild(mountingDiv);\n  });\n\n  it('Check modal not rendered when isModalOpen is false', async () => {\n    const { container, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={false}\n        closeAction={() => {}}\n        submitAction={() => {}}\n      />,\n    );\n    //check modal portal not exists when modal not opened\n    expect(container.querySelector('.ReactModalPortal')).toBeNull();\n  });\n\n  it('Check modal visible, title and footer buttons displayed correctly', async () => {\n    const { container, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n        buttons={[\n          {\n            action: () => {},\n            text: 'Close',\n            variant: 'tertiary',\n          },\n          {\n            action: () => {},\n            text: 'Save',\n          },\n        ]}\n      />,\n    );\n    //check modal portal defined\n    expect(container.querySelector('.ReactModalPortal')).toBeDefined();\n    //Check header and footer buttons\n    expect(getByText('Header')).toBeDefined();\n    expect(getByText('Close')).toBeDefined();\n    expect(getByText('Save')).toBeDefined();\n  });\n\n  it('Check tooltip, and link displayed without right footer buttons', async () => {\n    const { baseElement, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n        tooltip={'some test tooltip'}\n        leftFooterAction={{ id: 'test-link', actionType: 'hyperlink', text: 'Link', href: 'http://test.com', icon: <></>, variant: 'default' }}\n      />,\n    );\n    //check tooltip displayed\n    expect(getByText('some test tooltip').textContent).toBeDefined();\n    //check footer link displayed\n    expect(getByText('Link').children).toBeDefined();\n  });\n\n  it('Check note and footer note displayed', async () => {\n    const { baseElement, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n        leftFooterAction={{ id: 'test-note', actionType: 'note', text: 'Test note', icon: <SystemIcons.Information /> }}\n        note={'Message text'}\n        state={'critical'}\n      />,\n    );\n    //check footer note text displayed\n    expect(getByText('Test note').textContent).toBeDefined();\n    //check note section added\n    expect(baseElement.querySelectorAll('section')?.length).toEqual(4);\n    //check note message displayed\n    expect(getByText('Message text').children).toBeDefined();\n  });\n\n  it('Check back button and close icon displayed', async () => {\n    const { baseElement, getByText, container } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        backButton={() => {}}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n      />,\n    );\n    //only 2 svg elements should be found in the header of the modal\n    expect(baseElement.querySelectorAll('svg')?.length).toEqual(2);\n  });\n\n  it('Check modal body displayed', async () => {\n    const { baseElement, getByText, container } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}>\n        <span>Inner modal text</span>\n      </ModalDialog>,\n    );\n    //Check all dialog sections are displayed\n    expect(baseElement.querySelectorAll('section')?.length).toEqual(3);\n    //Check that the second section (modal body) has the correct text\n    expect(baseElement.querySelectorAll('section')?.[1].textContent).toEqual('Inner modal text');\n  });\n});\n"],"file":"Modal.test.js"}