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

package/dist/InputFields/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledRadioButton","div","props","$margin","generateToken","componentType","defaultVariant","theme","$selected","$invalid","Regular","state","RadioButton","forwardRef","_ref","ref","id","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","Medium","cls","_objectSpread","onClick","onMouseDown","onKeyDown","$disabled","tabIndex","children","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_pt","string","bool","isRequired","func","number"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size, Testable} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledRadioButton = styled.div<{ $margin?: string, $disabled?: boolean, $invalid?: boolean, $selected?: boolean }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${props => COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme)};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .radio-button-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.$selected ? COLORS.generateToken({componentType:'icon', defaultVariant:'selected'}, props.theme) : \r\n        props.$invalid ? COLORS.generateToken({componentType:'icon', defaultVariant:'critical'}, props.theme) : COLORS.generateToken({componentType:'icon',defaultVariant:'subtle'}, props.theme))};\r\n    }\r\n  }\r\n\r\n  .radio-button-label {\r\n    user-select: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    label {\r\n      cursor: inherit;\r\n    }\r\n\r\n    span {\r\n      ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    .radio-button-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):hover {\r\n    .radio-button-icon {\r\n      background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'hover' }, props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.generateToken({ componentType:'icon', state:'hover' }, props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):active {\r\n    .radio-button-icon {\r\n      background: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'active' }, props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.generateToken({ componentType:'icon', state:'active' }, props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n\r\n    .radio-button-icon,\r\n    .radio-button-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .radio-button-icon {\r\n      background-color: transparent;\r\n    }\r\n\r\n    .radio-button-icon svg {\r\n      color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .radio-button-icon {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover' }, props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {\r\n  /** Optional. Id of the component */\r\n  id?: string;\r\n  /** Required. Current state of the component. */\r\n  selected: boolean;\r\n  /** Required. Handler to be called when user selects/unselected the radio button. */\r\n  select: (selected: boolean) => void;\r\n  /** Optional. Label to be shown on the right side of the radio button. */\r\n  label?: string;\r\n  /** Optional. Secondary label to be shown under the main 'label' */\r\n  additionalLabel?: string;\r\n  /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */\r\n  invalid?: boolean;\r\n  /** Optional. If disabled, user can not interact with the component. */\r\n  disabled?: boolean;\r\n  /** Optional. If set, then 'pointer-events: none' will be set on the component. */\r\n  iconPointerEventsTransparent?: boolean;\r\n  /** Optional. Margin style attribute to be set on the top level tag of the component. */\r\n  margin?: string;\r\n  /** Optional. Size of the radio button, defaults to 'medium'. */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Optional. TabIndex attribute to be set on the component. */\r\n  tabIndexVal?: number;\r\n  /** Optional. Extra classname to be set on the container of the component. */\r\n  className?: string;\r\n}\r\n\r\nconst RadioButton = React.forwardRef<HTMLDivElement, RadioButtonProps>(({\r\n                                                               id,\r\n                                                               selected,\r\n                                                               label,\r\n                                                               additionalLabel,\r\n                                                               invalid,\r\n                                                               select,\r\n                                                               disabled,\r\n                                                               margin,\r\n                                                               iconPointerEventsTransparent,\r\n                                                               size,\r\n                                                               tabIndexVal,\r\n                                                               className,\r\n                                                               dataTestId,\r\n                                                               ...rest\r\n                                                             }: RadioButtonProps, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled) {\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\r\n\r\n  return (\r\n    <StyledRadioButton key={id}\r\n                       $margin={margin}\r\n                       ref={ref}\r\n                       onClick={() => !disabled && select(!selected)}\r\n                       onMouseDown={defaultOnMouseDownHandler}\r\n                       onKeyDown={onKeyPress}\r\n                       $disabled={disabled}\r\n                       className={cls}\r\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                       $invalid={invalid}\r\n                       $selected={selected}\r\n                       {...rest}>\r\n      <div className={'radio-button-icon'} id={id} data-testid={dataTestId}>\r\n        {selected && <SystemIcons.RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n        {!selected &&\r\n          <SystemIcons.RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n      </div>\r\n      <div className={'radio-button-label'}>\r\n        {label && <label htmlFor={id}>{label}</label>}\r\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\r\n      </div>\r\n    </StyledRadioButton>\r\n  );\r\n});\r\n\r\nexport default RadioButton;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"RadioButton.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledRadioButton","div","props","$margin","generateToken","componentType","defaultVariant","theme","$selected","$invalid","Regular","state","RadioButton","forwardRef","_ref","ref","id","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","Medium","cls","_objectSpread","onClick","onMouseDown","onKeyDown","$disabled","tabIndex","children","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_pt","string","bool","isRequired","func","oneOfType","node","number"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size, Testable} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledRadioButton = styled.div<{ $margin?: string, $disabled?: boolean, $invalid?: boolean, $selected?: boolean }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${props => COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme)};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .radio-button-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.$selected ? COLORS.generateToken({componentType:'icon', defaultVariant:'selected'}, props.theme) : \r\n        props.$invalid ? COLORS.generateToken({componentType:'icon', defaultVariant:'critical'}, props.theme) : COLORS.generateToken({componentType:'icon',defaultVariant:'subtle'}, props.theme))};\r\n    }\r\n  }\r\n\r\n  .radio-button-label {\r\n    user-select: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    label {\r\n      cursor: inherit;\r\n    }\r\n\r\n    span {\r\n      ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    .radio-button-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):hover {\r\n    .radio-button-icon {\r\n      background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'hover' }, props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.generateToken({ componentType:'icon', state:'hover' }, props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):active {\r\n    .radio-button-icon {\r\n      background: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'active' }, props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.generateToken({ componentType:'icon', state:'active' }, props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n\r\n    .radio-button-icon,\r\n    .radio-button-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .radio-button-icon {\r\n      background-color: transparent;\r\n    }\r\n\r\n    .radio-button-icon svg {\r\n      color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .radio-button-icon {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover' }, props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {\r\n  /** Optional. Id of the component */\r\n  id?: string;\r\n  /** Required. Current state of the component. */\r\n  selected: boolean;\r\n  /** Required. Handler to be called when user selects/unselected the radio button. */\r\n  select: (selected: boolean) => void;\r\n  /** Optional. Label to be shown on the right side of the radio button. */\r\n  label?: string | React.ReactNode;\r\n  /** Optional. Secondary label to be shown under the main 'label' */\r\n  additionalLabel?: string | React.ReactNode;\r\n  /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */\r\n  invalid?: boolean;\r\n  /** Optional. If disabled, user can not interact with the component. */\r\n  disabled?: boolean;\r\n  /** Optional. If set, then 'pointer-events: none' will be set on the component. */\r\n  iconPointerEventsTransparent?: boolean;\r\n  /** Optional. Margin style attribute to be set on the top level tag of the component. */\r\n  margin?: string;\r\n  /** Optional. Size of the radio button, defaults to 'medium'. */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Optional. TabIndex attribute to be set on the component. */\r\n  tabIndexVal?: number;\r\n  /** Optional. Extra classname to be set on the container of the component. */\r\n  className?: string;\r\n}\r\n\r\nconst RadioButton = React.forwardRef<HTMLDivElement, RadioButtonProps>(({\r\n                                                               id,\r\n                                                               selected,\r\n                                                               label,\r\n                                                               additionalLabel,\r\n                                                               invalid,\r\n                                                               select,\r\n                                                               disabled,\r\n                                                               margin,\r\n                                                               iconPointerEventsTransparent,\r\n                                                               size,\r\n                                                               tabIndexVal,\r\n                                                               className,\r\n                                                               dataTestId,\r\n                                                               ...rest\r\n                                                             }: RadioButtonProps, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled) {\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\r\n\r\n  return (\r\n    <StyledRadioButton key={id}\r\n                       $margin={margin}\r\n                       ref={ref}\r\n                       onClick={() => !disabled && select(!selected)}\r\n                       onMouseDown={defaultOnMouseDownHandler}\r\n                       onKeyDown={onKeyPress}\r\n                       $disabled={disabled}\r\n                       className={cls}\r\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                       $invalid={invalid}\r\n                       $selected={selected}\r\n                       {...rest}>\r\n      <div className={'radio-button-icon'} id={id} data-testid={dataTestId}>\r\n        {selected && <SystemIcons.RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n        {!selected &&\r\n          <SystemIcons.RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n      </div>\r\n      <div className={'radio-button-label'}>\r\n        {label && <label htmlFor={id}>{label}</label>}\r\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\r\n      </div>\r\n    </StyledRadioButton>\r\n  );\r\n});\r\n\r\nexport default RadioButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/__tests__/NumberField.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import {render} from '../../test-utils';
+import {Size, States} from '../../types';
+import 'jest-styled-components';
+import {COLORS, NumberField} from '../..';
+
+
+describe('<NumberField />', () => {
+
+    it('renders note field', async () => {
+        const { getByText } = render(
+            <NumberField type='NumberField'  note='test note' size={Size.Medium}/>
+        );
+        expect(getByText('test note')).toBeDefined();
+    });
+
+    it('renders required asterisk', async () => {
+        const { queryByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput' required size={Size.Medium}/>
+        );
+        expect(queryByTestId('labelIcon')).toBeDefined();
+    });
+
+    it('does not renders required asterisk', async () => {
+        const { queryByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput'  size={Size.Medium}/>
+        );
+        expect(queryByTestId('labelIcon')).toBeNull();
+    });
+
+    it('renders positive note and input container', async () => {
+        const { container, getByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput' note='test note' state={States.Valid} size={Size.Medium}/>
+        );
+        expect(container.getElementsByClassName('valid').length).toBe(1);
+    });
+
+    it('renders warning note and input container', async () => {
+        const { container, getByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput' note='test note' state={States.Invalid} size={Size.Medium}/>
+        );
+        expect(container.getElementsByClassName('invalid').length).toBe(1);
+    });
+
+    it('renders correct disabled input container', async () => {
+        const { getByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput' size={Size.Small}/>
+        );
+        expect(getByTestId('numberInput')).toHaveStyleRule('cursor', `not-allowed`, {modifier:'&.disabled'});
+    });
+
+    it('renders correct readonly input container', async () => {
+        const { getByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput' size={Size.Small}/>
+        );
+        expect(getByTestId('numberInput')).toHaveStyleRule('cursor', `not-allowed`, {modifier:'&.readOnly'});
+    });
+
+    it('renders operators in the input container', async () => {
+        const { getByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput' size={Size.Medium}/>
+        );
+        expect(getByTestId('operators').childElementCount).toBe(3);
+        expect(getByTestId('operators').firstChild).toBeDefined();
+        expect(getByTestId('operators').lastChild).toBeDefined();
+    })
+})

package/dist/InputFields/__tests__/NumberInput.test.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import {Size, States} from '../../types';
+import 'jest-styled-components';
+import { COLORS, NumberField } from '../..';
+
+
+describe('<NumberField />', () => {
+
+    it('renders note field', async () => {
+        const { getByText } = render(
+            <NumberField type='NumberInput'  note='test note' size={Size.Medium}/>
+        );
+        expect(getByText('test note')).toBeDefined();
+    });
+
+    it('renders required asterisk', async () => {
+        const { queryByTestId } = render(
+            <NumberField type='NumberInput'  required size={Size.Medium}/>
+        );
+        expect(queryByTestId('labelIcon')).toBeDefined();
+    });
+
+    it('does not renders required asterisk', async () => {
+        const { queryByTestId } = render(
+            <NumberField type='NumberInput'  size={Size.Medium}/>
+        );
+        expect(queryByTestId('labelIcon')).toBeNull();
+    });
+
+    it('renders positive note and input container', async () => {
+        const { container, getByTestId } = render(
+            <NumberField type='NumberInput' dataTestId='numberInput' note='test note' state={States.Valid} size={Size.Medium}/>
+        );
+        expect(container.getElementsByClassName('valid').length).toBe(1);
+    });
+
+    it('renders warning note and input container', async () => {
+        const { container, getByTestId } = render(
+            <NumberField type='NumberInput' dataTestId='numberInput' note='test note' state={States.Invalid} size={Size.Medium}/>
+        );
+        expect(container.getElementsByClassName('invalid').length).toBe(1);
+    });
+
+    it('renders correct disabled input container', async () => {
+        const { getByTestId } = render(
+            <NumberField type='NumberInput' dataTestId='numberInput'  size={Size.Small}/>
+        );
+        expect(getByTestId('numberInput')).toHaveStyleRule('cursor', `not-allowed`, {modifier:'&.disabled'});
+    });
+
+    it('renders correct readonly input container', async () => {
+        const { getByTestId } = render(
+            <NumberField type='NumberInput' dataTestId='numberInput'  size={Size.Small}/>
+        );
+        expect(getByTestId('numberInput')).toHaveStyleRule('cursor', `not-allowed`, {modifier:'&.readOnly'});
+    });
+
+    it('renders operators in the input container', async () => {
+        const { getByTestId } = render(
+            <NumberField type='NumberInput' size={Size.Medium}/>
+        );
+        expect(getByTestId('leftOperator')).toHaveStyleRule('left', '0');
+        expect(getByTestId('leftOperator')).toHaveStyleRule('top', '4px');
+        expect(getByTestId('rightOperator')).toHaveStyleRule('right', '0');
+        expect(getByTestId('rightOperator')).toHaveStyleRule('top', '4px');
+    })
+})

package/dist/InputFields/__tests__/QuickSearch.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { findByTestId, render } from '../../test-utils';
+import {Size} from '../../types';
+import 'jest-styled-components';
+import { QuickSearch } from '..';
+import { ThemeProvider } from 'styled-components';
+
+describe('<QuickSearch />', () => {
+
+
+  it('Renders quick search', async () => {
+    let search = '';
+    let searchEntered = false;
+    const { queryByText, getByTestId, queryAllByTestId, container } = render(
+      <ThemeProvider theme={{}}>
+      <div style={{ width: '400px' }}>
+        <QuickSearch
+          id="QuickSearch"
+          size={Size.Small}
+          enterSearch={() => {
+            searchEntered = true;
+          }}
+          removeSearch={() => {
+            search = '';
+          }}
+          setSearchTerm={(term) => {
+            search = term;
+          }}
+        />
+      </div></ThemeProvider>,
+    );
+    expect(getByTestId('QuickSearch_main').classList.contains('small')).toBeTruthy();
+    expect(getByTestId('QuickSearch_Searchbutton')).toBeDefined();
+
+    // Test click on icon and check that input field shows
+    expect(queryAllByTestId('QuickSearch').length).toBe(0);
+    (await findByTestId(container, 'QuickSearch_Searchbutton') as HTMLButtonElement)?.click();
+    expect(await findByTestId(container, 'QuickSearch_main')).toBeDefined();
+    expect(getByTestId('QuickSearch_main').classList.contains('expanded')).toBeTruthy();
+    expect(getByTestId('QuickSearch_Clearicon').parentElement).toHaveProperty('hidden');
+  });
+});

package/dist/InputFields/components/SearchBarInput.cjs

@@ -99,6 +99,11 @@ const Search = exports.Search = _styledComponents.default.input.attrs(() => ({
     }
   }
 
+  background: ${props => _index.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
+
   &:disabled {
     background: transparent;
     border: none;

package/dist/InputFields/components/SearchBarInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBarInput.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_index","_styles","_common","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Search","exports","styled","input","attrs","type","props","ComponentSStyling","ComponentTextStyle","Italic","COLORS","generateToken","componentType","defaultVariant","theme","Regular","BREAKPOINTS","MEDIUM","ComponentMStyling","SearchBarInput","forwardRef","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","useFocusVisibleRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","key","preventDefault","stopPropagation","jsx","className","tabIndex","onChange","target","value","onKeyPress","propTypes","_propTypes","string","isRequired","func","bool","array","_default"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\r\nimport { Size } from '../../types';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { useFocusVisibleRef } from '../../common';\r\n\r\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\r\n  appearance: none;\r\n  width: calc(100% - 96px);\r\n\r\n  /* To prevent browser putting its own cross inside the search bar */\r\n\r\n  &::-ms-clear {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-ms-reveal {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-webkit-search-decoration,\r\n  &::-webkit-search-cancel-button,\r\n  &::-webkit-search-results-button,\r\n  &::-webkit-search-results-decoration {\r\n    display: none;\r\n  }\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  height: 32px;\r\n  border-width: 0;\r\n  margin-left: 48px;\r\n  outline: none;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n  ::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    margin-left: 44px;\r\n\r\n    ::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    margin-left: 48px;\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    \r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    background: transparent;\r\n    border: none;\r\n  }\r\n`;\r\n\r\ntype SearchBarInputProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  setSearchTerm: (term: string) => void;\r\n  enterSearch: (e: any) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  onBlur?: (e: any) => void;\r\n  focusParentRefs?: React.RefObject<any>[];\r\n  onClick?: ()=>void;\r\n};\r\n\r\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\r\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\r\n\r\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  return (\r\n    <Search\r\n      placeholder={disabled ? '' : placeholder}\r\n      ref={elementRef}\r\n      id={id}\r\n      data-testid={id}\r\n      className={size ? size : ''}\r\n      tabIndex={0}\r\n      disabled={disabled}\r\n      onChange={(e: any) => setSearchTerm(e.target.value)}\r\n      value={searchTerm}\r\n      onBlur={(e) => onBlur && onBlur(e)}\r\n      onKeyDown={onKeyDown}\r\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\r\n      onClick={onClick}\r\n    />\r\n  );\r\n});\r\n\r\nexport default SearchBarInput;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchBarInput.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_index","_styles","_common","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Search","exports","styled","input","attrs","type","props","ComponentSStyling","ComponentTextStyle","Italic","COLORS","generateToken","componentType","defaultVariant","theme","Regular","BREAKPOINTS","MEDIUM","ComponentMStyling","SearchBarInput","forwardRef","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","useFocusVisibleRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","key","preventDefault","stopPropagation","jsx","className","tabIndex","onChange","target","value","onKeyPress","propTypes","_propTypes","string","isRequired","func","bool","array","_default"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\r\nimport { Size } from '../../types';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { useFocusVisibleRef } from '../../common';\r\n\r\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\r\n  appearance: none;\r\n  width: calc(100% - 96px);\r\n\r\n  /* To prevent browser putting its own cross inside the search bar */\r\n\r\n  &::-ms-clear {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-ms-reveal {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-webkit-search-decoration,\r\n  &::-webkit-search-cancel-button,\r\n  &::-webkit-search-results-button,\r\n  &::-webkit-search-results-decoration {\r\n    display: none;\r\n  }\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  height: 32px;\r\n  border-width: 0;\r\n  margin-left: 48px;\r\n  outline: none;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n  ::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    margin-left: 44px;\r\n\r\n    ::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    margin-left: 48px;\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    \r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  background: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n\r\n  &:disabled {\r\n    background: transparent;\r\n    border: none;\r\n  }\r\n`;\r\n\r\ntype SearchBarInputProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  setSearchTerm: (term: string) => void;\r\n  enterSearch: (e: any) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  onBlur?: (e: any) => void;\r\n  focusParentRefs?: React.RefObject<any>[];\r\n  onClick?: ()=>void;\r\n};\r\n\r\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\r\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\r\n\r\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  return (\r\n    <Search\r\n      placeholder={disabled ? '' : placeholder}\r\n      ref={elementRef}\r\n      id={id}\r\n      data-testid={id}\r\n      className={size ? size : ''}\r\n      tabIndex={0}\r\n      disabled={disabled}\r\n      onChange={(e: any) => setSearchTerm(e.target.value)}\r\n      value={searchTerm}\r\n      onBlur={(e) => onBlur && onBlur(e)}\r\n      onKeyDown={onKeyDown}\r\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\r\n      onClick={onClick}\r\n    />\r\n  );\r\n});\r\n\r\nexport default SearchBarInput;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/components/SearchBarInput.js

@@ -90,6 +90,11 @@ export const Search = styled.input.attrs(() => ({
     }
   }
 
+  background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
+
   &:disabled {
     background: transparent;
     border: none;

package/dist/InputFields/components/SearchBarInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBarInput.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","useFocusVisibleRef","jsx","_jsx","Search","input","attrs","type","props","Italic","generateToken","componentType","defaultVariant","theme","Regular","MEDIUM","SearchBarInput","forwardRef","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","e","key","preventDefault","stopPropagation","className","tabIndex","onChange","target","value","onKeyPress","propTypes","_pt","string","isRequired","func","bool","array"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\r\nimport { Size } from '../../types';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { useFocusVisibleRef } from '../../common';\r\n\r\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\r\n  appearance: none;\r\n  width: calc(100% - 96px);\r\n\r\n  /* To prevent browser putting its own cross inside the search bar */\r\n\r\n  &::-ms-clear {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-ms-reveal {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-webkit-search-decoration,\r\n  &::-webkit-search-cancel-button,\r\n  &::-webkit-search-results-button,\r\n  &::-webkit-search-results-decoration {\r\n    display: none;\r\n  }\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  height: 32px;\r\n  border-width: 0;\r\n  margin-left: 48px;\r\n  outline: none;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n  ::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    margin-left: 44px;\r\n\r\n    ::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    margin-left: 48px;\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    \r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    background: transparent;\r\n    border: none;\r\n  }\r\n`;\r\n\r\ntype SearchBarInputProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  setSearchTerm: (term: string) => void;\r\n  enterSearch: (e: any) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  onBlur?: (e: any) => void;\r\n  focusParentRefs?: React.RefObject<any>[];\r\n  onClick?: ()=>void;\r\n};\r\n\r\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\r\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\r\n\r\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  return (\r\n    <Search\r\n      placeholder={disabled ? '' : placeholder}\r\n      ref={elementRef}\r\n      id={id}\r\n      data-testid={id}\r\n      className={size ? size : ''}\r\n      tabIndex={0}\r\n      disabled={disabled}\r\n      onChange={(e: any) => setSearchTerm(e.target.value)}\r\n      value={searchTerm}\r\n      onBlur={(e) => onBlur && onBlur(e)}\r\n      onKeyDown={onKeyDown}\r\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\r\n      onClick={onClick}\r\n    />\r\n  );\r\n});\r\n\r\nexport default SearchBarInput;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchBarInput.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","useFocusVisibleRef","jsx","_jsx","Search","input","attrs","type","props","Italic","generateToken","componentType","defaultVariant","theme","Regular","MEDIUM","SearchBarInput","forwardRef","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","e","key","preventDefault","stopPropagation","className","tabIndex","onChange","target","value","onKeyPress","propTypes","_pt","string","isRequired","func","bool","array"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\r\nimport { Size } from '../../types';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { useFocusVisibleRef } from '../../common';\r\n\r\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\r\n  appearance: none;\r\n  width: calc(100% - 96px);\r\n\r\n  /* To prevent browser putting its own cross inside the search bar */\r\n\r\n  &::-ms-clear {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-ms-reveal {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-webkit-search-decoration,\r\n  &::-webkit-search-cancel-button,\r\n  &::-webkit-search-results-button,\r\n  &::-webkit-search-results-decoration {\r\n    display: none;\r\n  }\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  height: 32px;\r\n  border-width: 0;\r\n  margin-left: 48px;\r\n  outline: none;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n  ::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    margin-left: 44px;\r\n\r\n    ::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    margin-left: 48px;\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    \r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  background: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n\r\n  &:disabled {\r\n    background: transparent;\r\n    border: none;\r\n  }\r\n`;\r\n\r\ntype SearchBarInputProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  setSearchTerm: (term: string) => void;\r\n  enterSearch: (e: any) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  onBlur?: (e: any) => void;\r\n  focusParentRefs?: React.RefObject<any>[];\r\n  onClick?: ()=>void;\r\n};\r\n\r\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\r\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\r\n\r\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  return (\r\n    <Search\r\n      placeholder={disabled ? '' : placeholder}\r\n      ref={elementRef}\r\n      id={id}\r\n      data-testid={id}\r\n      className={size ? size : ''}\r\n      tabIndex={0}\r\n      disabled={disabled}\r\n      onChange={(e: any) => setSearchTerm(e.target.value)}\r\n      value={searchTerm}\r\n      onBlur={(e) => onBlur && onBlur(e)}\r\n      onKeyDown={onKeyDown}\r\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\r\n      onClick={onClick}\r\n    />\r\n  );\r\n});\r\n\r\nexport default SearchBarInput;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/LinearProgress/__tests__/LinearProgress.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {render} from '../../test-utils';
+import LinearProgress, {Bar, Dot, Line, LinearProgressType, LineFill} from '../LinearProgress';
+
+
+
+describe('LinearProgress', () => {
+  it('should render dots', () => {
+    const wrapper = render(<LinearProgress type={LinearProgressType.Dots} max={11} value={6}/>);
+    expect(wrapper.container.querySelectorAll(`${Dot}`)).toHaveLength(11)
+    expect(wrapper.container.querySelectorAll(`${Dot}.active`)).toHaveLength(6)
+  });
+
+  it('should render bars', () => {
+    const wrapper = render(<LinearProgress type={LinearProgressType.Bars} max={11} value={6}/>);
+    expect(wrapper.container.querySelectorAll(`${Bar}`)).toHaveLength(11)
+    expect(wrapper.container.querySelectorAll(`${Bar}.active`)).toHaveLength(6)
+  });
+
+  it('should render line', () => {
+    const wrapper = render(<LinearProgress type={LinearProgressType.Line} max={11} value={6}/>);
+    expect(wrapper.container.querySelectorAll(`${Line}`)).toHaveLength(1)
+    expect(wrapper.container.querySelectorAll(`${LineFill}`).item(0).getAttribute('style')).toEqual(`width: ${6 / 11 * 100}%;`)
+  });
+});

package/dist/List/__tests__/ListRow.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {render} from '../../test-utils';
+import {ListRow} from '../index';
+import {Size} from '../../types';
+import {SystemIcons} from '../../icons';
+
+describe('<ListRow />', () => {
+  it('Renders', async () => {
+    const {getByText} = render(
+      <ListRow
+        icon={<SystemIcons.Institute/>}
+        mainText={'Laerdal Medical AS'}
+        size={Size.Small}
+        disabled={false}/>,
+    );
+    expect(getByText('Laerdal Medical AS')).toBeDefined();
+  });
+});

package/dist/LoadingPage/__tests__/GlobalLoadingPage.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import { GlobalLoadingPage } from '../index';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+
+
+
+
+describe('<GlobalLoadingPage />', () => {
+  it('Renders GlobalLoadingPage', async () => {
+    const optionalMessage = 'This is the optional message';
+    const { queryByText, getByTestId } = render(<GlobalLoadingPage optionalMessage={optionalMessage} />);
+    expect(queryByText(optionalMessage)).toBeDefined();
+    expect(getByTestId('TestLoadingMain')).toBeDefined();
+    expect(getByTestId('TestLoadingMain')).toHaveStyleRule('background-color', COLORS.primary_20);
+    expect(getByTestId('TestLoadingMain')).toHaveStyleRule('height', '100%');
+    expect(getByTestId('TestLoadingLogoAndMessage')).toBeDefined();
+    expect(getByTestId('TestLoadingLogoAndMessage')).toHaveStyleRule('position', 'absolute');
+    expect(getByTestId('TestLoadingLogoAndMessage')).toHaveStyleRule('align-items', 'center');
+    expect(getByTestId('TestLoadingLogoAndMessage')).toHaveStyleRule('bottom', '36px');
+  });
+});

package/dist/MiniProductCard/MiniProductCard.cjs

@@ -12,6 +12,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styles = require("../styles");
 var _icons = require("../icons");
 var _HyperLink = require("../HyperLink/HyperLink");
+var _Navigation = require("../Navigation");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -80,11 +81,23 @@ const RightIconWrapper = _styledComponents.default.div`
 const MiniProductCard = _ref => {
   let {
     url,
+    external,
     product,
     target = '_self'
   } = _ref;
   const theme = (0, _styledComponents.useTheme)();
+  const {
+    navigate
+  } = (0, _Navigation.useNavigation)();
+  const onClick = e => {
+    if (external) {
+      return;
+    }
+    e?.preventDefault();
+    navigate && navigate(url ?? '', false);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ProductLink, {
+    onClick: onClick,
     $variant: "styleless",
     href: url ?? '',
     target: target,
@@ -109,7 +122,8 @@ const MiniProductCard = _ref => {
 };
 MiniProductCard.propTypes = {
   url: _propTypes.default.string,
-  target: _propTypes.default.string
+  target: _propTypes.default.string,
+  external: _propTypes.default.bool
 };
 var _default = exports.default = MiniProductCard;
 //# sourceMappingURL=MiniProductCard.cjs.map

package/dist/MiniProductCard/MiniProductCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MiniProductCard.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_styles","_icons","_HyperLink","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","ProductLink","styled","props","jsx","StyledLink","COLORS","getColor","theme","BREAKPOINTS","MEDIUM","ProductThing","div","ProductImage","img","ProductName","h2","ComponentMStyling","ComponentTextStyle","Regular","ProductType","span","ComponentSStyling","ProductInnerWrapper","RightIconWrapper","MiniProductCard","_ref","url","product","target","useTheme","$variant","href","children","jsxs","image","src","name","type","SystemIcons","ChevronRight","color","className","size","propTypes","_propTypes","string","_default","exports"],"sources":["../../src/MiniProductCard/MiniProductCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {Product} from '../types';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\r\nimport { StyledLink } from '../HyperLink/HyperLink';\r\n\r\nexport type MiniProductCardProps = {\r\n  product: Product;\r\n  url?: string;\r\n  target?: string;\r\n};\r\nconst ProductLink = styled(props => <StyledLink {...props} />)`\r\n  display: flex;\r\n  flex: 1;\r\n  margin: 10px 8px;\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n  text-decoration: none;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 305px;\r\n  }\r\n`;\r\n\r\nconst ProductThing = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  border-radius: 8px;\r\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\r\n\r\n  &:hover {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n  &:active {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nconst ProductImage = styled.img`\r\n  width: 95px;\r\n  height: 75px;\r\n  object-fit: fill;\r\n  border-radius: 8px;\r\n`;\r\n\r\nconst ProductName = styled.h2`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n  margin-top: 3px;\r\n`;\r\n\r\nconst ProductType = styled.span`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n`;\r\n\r\nconst ProductInnerWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 12px 18px;\r\n  flex: 1;\r\n`;\r\n\r\nconst RightIconWrapper = styled.div`\r\n  display: flex;\r\n  justify-self: flex-start;\r\n  align-items: center;\r\n  padding-right: 12px;\r\n`;\r\n\r\nconst MiniProductCard: React.FunctionComponent<MiniProductCardProps> = ({ url, product, target = '_self' }: MiniProductCardProps) => {\r\n  const theme = useTheme();\r\n  return (\r\n    <ProductLink $variant='styleless' href={url ?? ''} target={target}>\r\n      <ProductThing>\r\n        {product.image && <ProductImage src={product.image} />}\r\n        <ProductInnerWrapper>\r\n          <ProductName>{product.name}</ProductName>\r\n          <ProductType>{product.type}</ProductType>\r\n        </ProductInnerWrapper>\r\n        <RightIconWrapper>\r\n          <SystemIcons.ChevronRight color={COLORS.getColor('primary', theme)} className={'product-chevron-right'} size={'24px'} />\r\n        </RightIconWrapper>\r\n      </ProductThing>\r\n    </ProductLink>\r\n  );\r\n};\r\n\r\nexport default MiniProductCard;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MiniProductCard.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_styles","_icons","_HyperLink","_Navigation","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","ProductLink","styled","props","jsx","StyledLink","COLORS","getColor","theme","BREAKPOINTS","MEDIUM","ProductThing","div","ProductImage","img","ProductName","h2","ComponentMStyling","ComponentTextStyle","Regular","ProductType","span","ComponentSStyling","ProductInnerWrapper","RightIconWrapper","MiniProductCard","_ref","url","external","product","target","useTheme","navigate","useNavigation","onClick","preventDefault","$variant","href","children","jsxs","image","src","name","type","SystemIcons","ChevronRight","color","className","size","propTypes","_propTypes","string","bool","_default","exports"],"sources":["../../src/MiniProductCard/MiniProductCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {Product} from '../types';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\r\nimport { StyledLink } from '../HyperLink/HyperLink';\r\nimport { useNavigation } from '../Navigation';\r\n\r\nexport type MiniProductCardProps = {\r\n  product: Product;\r\n  url?: string;\r\n  target?: string;\r\n  external?: boolean;\r\n};\r\nconst ProductLink = styled(props => <StyledLink {...props} />)`\r\n  display: flex;\r\n  flex: 1;\r\n  margin: 10px 8px;\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n  text-decoration: none;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 305px;\r\n  }\r\n`;\r\n\r\nconst ProductThing = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  border-radius: 8px;\r\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\r\n\r\n  &:hover {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n  &:active {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nconst ProductImage = styled.img`\r\n  width: 95px;\r\n  height: 75px;\r\n  object-fit: fill;\r\n  border-radius: 8px;\r\n`;\r\n\r\nconst ProductName = styled.h2`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n  margin-top: 3px;\r\n`;\r\n\r\nconst ProductType = styled.span`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n`;\r\n\r\nconst ProductInnerWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 12px 18px;\r\n  flex: 1;\r\n`;\r\n\r\nconst RightIconWrapper = styled.div`\r\n  display: flex;\r\n  justify-self: flex-start;\r\n  align-items: center;\r\n  padding-right: 12px;\r\n`;\r\n\r\nconst MiniProductCard: React.FunctionComponent<MiniProductCardProps> = ({ url, external, product, target = '_self' }: MiniProductCardProps) => {\r\n  const theme = useTheme();\r\n  const { navigate } = useNavigation();\r\n  const onClick = (e: any) => {\r\n    if (external) {\r\n      return;\r\n    }\r\n    e?.preventDefault();\r\n    navigate && navigate(url ?? '', false);\r\n  };\r\n  return (\r\n    <ProductLink onClick={onClick} $variant='styleless' href={url ?? ''} target={target}>\r\n      <ProductThing>\r\n        {product.image && <ProductImage src={product.image} />}\r\n        <ProductInnerWrapper>\r\n          <ProductName>{product.name}</ProductName>\r\n          <ProductType>{product.type}</ProductType>\r\n        </ProductInnerWrapper>\r\n        <RightIconWrapper>\r\n          <SystemIcons.ChevronRight color={COLORS.getColor('primary', theme)} className={'product-chevron-right'} size={'24px'} />\r\n        </RightIconWrapper>\r\n      </ProductThing>\r\n    </ProductLink>\r\n  );\r\n};\r\n\r\nexport default MiniProductCard;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/MiniProductCard/MiniProductCard.d.ts

@@ -4,6 +4,7 @@ export type MiniProductCardProps = {
     product: Product;
     url?: string;
     target?: string;
+    external?: boolean;
 };
 declare const MiniProductCard: React.FunctionComponent<MiniProductCardProps>;
 export default MiniProductCard;

package/dist/MiniProductCard/MiniProductCard.js

@@ -8,6 +8,7 @@ import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
 import { SystemIcons } from '../icons';
 import { ComponentMStyling, ComponentSStyling } from '../styles';
 import { StyledLink } from '../HyperLink/HyperLink';
+import { useNavigation } from '../Navigation';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ProductLink = styled(props => /*#__PURE__*/_jsx(StyledLink, _objectSpread({}, props)))`
   display: flex;
@@ -72,11 +73,23 @@ const RightIconWrapper = styled.div`
 const MiniProductCard = _ref => {
   let {
     url,
+    external,
     product,
     target = '_self'
   } = _ref;
   const theme = useTheme();
+  const {
+    navigate
+  } = useNavigation();
+  const onClick = e => {
+    if (external) {
+      return;
+    }
+    e?.preventDefault();
+    navigate && navigate(url ?? '', false);
+  };
   return /*#__PURE__*/_jsx(ProductLink, {
+    onClick: onClick,
     $variant: "styleless",
     href: url ?? '',
     target: target,
@@ -101,7 +114,8 @@ const MiniProductCard = _ref => {
 };
 MiniProductCard.propTypes = {
   url: _pt.string,
-  target: _pt.string
+  target: _pt.string,
+  external: _pt.bool
 };
 export default MiniProductCard;
 //# sourceMappingURL=MiniProductCard.js.map