@laerdal/life-react-components 1.2.1-dev.1.full → 1.2.1-dev.2

package/dist/umd/List/ListRow.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../Button", "../icons/systemicons/SystemIcons", "../styles", "./ListRowDropdown", "../styles/typography"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../styles/typography", "../Tooltips", "../Dropdown", "../icons", "../types"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../styles"), require("./ListRowDropdown"), require("../styles/typography"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../styles/typography"), require("../Tooltips"), require("../Dropdown"), require("../icons"), require("../types"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.Button, global.SystemIcons, global.styles, global.ListRowDropdown, global.typography);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.typography, global.Tooltips, global.Dropdown, global.icons, global.types);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _Button, _SystemIcons, _styles, _ListRowDropdown, _typography) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _typography, _Tooltips, _Dropdown, _icons, _types) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -23,8 +23,6 @@
 
   var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
-  var _ListRowDropdown2 = _interopRequireDefault(_ListRowDropdown);
-
   function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -81,213 +79,249 @@
     };
   }
 
-  const handleListHeight = size => {
-    switch (size) {
-      case 'small':
-        return '48px;';
+  function _extends() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
 
-      case 'medium':
-        return '56px;';
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
 
-      default:
-        return '64px;';
-    }
-  };
+      return target;
+    };
 
-  const RowWrapper = _styledComponents2.default.div`
-  &:nth-child(even) {
-    background-color: ${props => props.disableDifferentBackgroundforEvenNumbers ? 'inherit' : _styles.COLORS.neutral_20};
+    return _extends.apply(this, arguments);
   }
 
-  .interaction {
-    :hover {
-      background-color: white;
+  const Row = _styledComponents2.default.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid ${_styles.COLORS.neutral_100};
+  box-sizing: border-box;
+  position: relative;
+
+  color: ${_styles.COLORS.neutral_600};
+  background-color: ${_styles.COLORS.white};
+
+
+  cursor: default;
+
+  &.interactive {
+    cursor: pointer;
+  }
+
+  &.interactive.disabled {
+    cursor: not-allowed;
+  }
+
+  &.interactive:hover:not(.in-action):not(.disabled) {
+    background-color: ${_styles.COLORS.primary_20};
+    color: ${_styles.COLORS.primary_700};
+  }
+
+  &.interactive:active:not(.in-action):not(.disabled) {
+    background-color: ${_styles.COLORS.primary_100};
+    color: ${_styles.COLORS.primary_800};
+    box-shadow: none;
+  }
+
+  &.interactive:focus {
+    outline: none;
+    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;
+    z-index: 1;
+  }
+
+  &.disabled {
+    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {
+      color: ${_styles.COLORS.neutral_300};
+    }
+  }
+
+
+  &.small {
+    min-height: 48px;
+    padding: 0 8px;
+
+    .list-item-icon {
+      margin-right: 8px;
     }
 
-    :focus {
-      background-color: white;
+    .list-item-main-text {
+      ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null)}
     }
 
-    :active {      
-        background-color: white;
+    .list-item-actions {
+      margin-right: -8px;
     }
   }
-`;
-  const DisabledState = _styledComponents.css`
-  pointer-events: none;
-  background-color: white;
-`;
-  const EditRow = _styledComponents2.default.div`
-  display: flex;
-  justify-content: space-between;
-  padding: 8px 12px;
-  align-items: center;
 
-  ${props => props.disabled ? DisabledState : ''}
+  &.medium {
+    min-height: 56px;
+    padding: 0 12px;
 
-  height : ${props => handleListHeight(props.size)}
+    .list-item-icon {
+      margin-right: 12px;
+    }
 
-  .user-actions {
-    display: flex;
-    position: relative;
-    align-items: center;
-  }
+    .list-item-main-text {
+      ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null)}
+    }
 
-  .somePaddingForAlignment {
-    padding: 0 3px 0 0;
+    .list-item-actions {
+      margin-right: -12px;
+    }
   }
 
-  &:hover {    
-    background-color: ${_styles.COLORS.primary_20};    
-  }
+  &.large {
+    min-height: 64px;
+    padding: 0 16px;
 
-  &:focus {    
-    background-color: white;
-    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;    
+    .list-item-icon {
+      margin-right: 16px;
+    }
+
+    .list-item-main-text {
+      ${(0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null)}
+    }
+
+    .list-item-actions {
+      margin-right: -16px;
+    }
   }
-  
-  &:active {    
-    background-color: ${_styles.COLORS.primary_100};
+
+  &.overlay {
+    padding: 0 4px;
+
+    .list-item-actions {
+      margin-right: -4px;
+    }
   }
-`;
-  const LeftSection = _styledComponents2.default.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
 
-  ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit')}
+  .list-item-icon {
+    width: 24px;
+    height: 24px;
 
-  svg {
-    margin-right: 12px;
+    svg {
+      width: 24px;
+      height: 24px;
+    }
   }
-`;
-  const MainInfo = _styledComponents2.default.div`
-  margin: auto 1em auto 0;
-  display: flex;
-  flex-direction: column;
-`;
-  const RightSection = _styledComponents2.default.div`
-  text-align: center;
-  display: flex;
-  flex-direction: row-reverse;
-`;
-  const Note = _styledComponents2.default.div`
-  margin: auto;
-`;
-  const ButtonWrapper = _styledComponents2.default.div`
-  outline: none;
-`;
-  const UserDropdownButton = (0, _styledComponents2.default)(_Button.IconButton)`
-  display: flex;
-  text-decoration: none;
-  outline: none;
-  div {
-    outline: none;
+
+  .list-item-content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
   }
 
-  &:hover > div {
-    background-color : ${_styles.COLORS.primary_20};
-    border-radius: 18px;
+  .list-item-main-text {
   }
 
-  &:focus > div {
-    box-shadow:0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;
-    border-radius: 18px;
-    background: ${_styles.COLORS.white};
+  .list-item-secondary-text {
+    ${(0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null)}
   }
 
-  &:active > div {
-    background-color : ${_styles.COLORS.primary_100};
-    border-radius: 18px;
+  .list-item-note {
+    color: ${_styles.COLORS.neutral_600};
+    word-break: initial;
+    ${(0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null)}
   }
-`;
 
-  const renderTextData = (mainInfo, variant) => {
-    if (variant == 'two-line') {
-      return /*#__PURE__*/React.createElement(MainInfo, {
-        "data-hj-suppress": true
-      }, mainInfo, /*#__PURE__*/React.createElement("small", null, "some secondary text"));
-    } else {
-      return /*#__PURE__*/React.createElement(MainInfo, {
-        "data-hj-suppress": true
-      }, mainInfo);
+  .list-item-note.with-tooltip {
+    cursor: pointer;
+
+    > div {
+      text-decoration-line: underline;
+      text-decoration-style: dashed;
+      text-underline-offset: 1px;
+      text-decoration-thickness: 1px;
     }
-  };
+  }
+
+  .list-item-actions {
+    color: ${_styles.COLORS.neutral_600};
+    display: flex;
+    align-items: center;
 
-  const renderDropdown = (variant, size) => {
-    switch (variant) {
-      case 'overlay':
-        return /*#__PURE__*/React.createElement("div", {
-          tabIndex: -1
-        }, /*#__PURE__*/React.createElement(_SystemIcons.ArrowDropDown, {
-          size: size,
-          color: _styles.COLORS.neutral_500
-        }));
-
-      default:
-        return /*#__PURE__*/React.createElement("div", {
-          tabIndex: -1
-        }, /*#__PURE__*/React.createElement(_SystemIcons.MoreVertical, {
-          size: size,
-          color: _styles.COLORS.neutral_500
-        }));
+    button div {
+      background-color: transparent;
     }
-  };
+  }
+`;
 
   const ListRow = ({
     key,
-    Icon,
-    mainInfo,
-    dropdownOptions,
-    disableDifferentBackgroundforEvenNumbers,
-    size,
-    variant,
+    size = _types.Size.Medium,
+    variant = 'normal',
+    icon,
+    mainText,
+    secondaryText,
+    dropdown,
     note,
-    disabled
+    noteTooltip,
+    disabled = false,
+    action
   }) => {
-    const color = _styles.COLORS.black;
-    const [dropdownActive, setDropdownActive] = React.useState(false);
-    return /*#__PURE__*/React.createElement(RowWrapper, {
-      disableDifferentBackgroundforEvenNumbers: disableDifferentBackgroundforEvenNumbers
-    }, /*#__PURE__*/React.createElement(EditRow, {
+    const [inAction, setInAction] = React.useState(false);
+
+    const handleKeyPress = e => {
+      if (e.key === 'Enter') {
+        action && action();
+      }
+    };
+
+    const rowClassName = (inAction ? 'in-action ' : '').concat(disabled ? 'disabled ' : '').concat(!!action ? 'interactive ' : '').concat('list-item-row ').concat(`${variant} `).concat(`${size}`);
+    return /*#__PURE__*/React.createElement(Row, {
       key: key,
-      size: size,
-      variant: variant,
-      disabled: disabled,
-      disableDifferentBackgroundforEvenNumbers: disableDifferentBackgroundforEvenNumbers,
-      className: dropdownActive ? 'interaction' : ''
-    }, /*#__PURE__*/React.createElement(LeftSection, {
-      color: color,
+      tabIndex: !!action && !disabled ? 0 : undefined,
+      className: rowClassName,
+      onKeyPress: e => !disabled && handleKeyPress(e),
+      onClick: e => {
+        !disabled && action && action();
+      },
       "data-hj-suppress": true
-    }, Icon && /*#__PURE__*/React.createElement(Icon, {
-      size: "22px",
-      color: color,
-      className: "somePaddingForAlignment"
-    }), renderTextData(mainInfo, variant)), /*#__PURE__*/React.createElement(RightSection, null, /*#__PURE__*/React.createElement(ButtonWrapper, {
-      className: "user-actions"
-    }, /*#__PURE__*/React.createElement(UserDropdownButton, {
-      variant: "secondary",
-      shape: "circular",
-      action: () => {
-        setDropdownActive(true);
-      }
-    }, renderDropdown(variant, size)), dropdownActive && /*#__PURE__*/React.createElement(_ListRowDropdown2.default, {
-      size: size,
-      closeDropdown: () => setDropdownActive(false),
-      options: dropdownOptions
-    })), /*#__PURE__*/React.createElement(Note, null, note))));
+    }, !!icon && /*#__PURE__*/React.createElement("div", {
+      className: 'list-item-icon'
+    }, icon), /*#__PURE__*/React.createElement("div", {
+      className: 'list-item-content'
+    }, /*#__PURE__*/React.createElement("div", {
+      className: 'list-item-main-text'
+    }, mainText), !!secondaryText && /*#__PURE__*/React.createElement("div", {
+      className: 'list-item-secondary-text'
+    }, secondaryText)), !!note && /*#__PURE__*/React.createElement(React.Fragment, null, !!noteTooltip && /*#__PURE__*/React.createElement("div", {
+      className: 'list-item-note with-tooltip'
+    }, /*#__PURE__*/React.createElement(_Tooltips.TooltipWrapper, {
+      label: noteTooltip,
+      size: size === _types.Size.Large ? _types.Size.Medium : size === _types.Size.Small ? _types.Size.XSmall : _types.Size.Small,
+      position: 'top',
+      withArrow: true
+    }, note)), !noteTooltip && /*#__PURE__*/React.createElement("div", {
+      className: 'list-item-note'
+    }, note)), !!dropdown && /*#__PURE__*/React.createElement("div", {
+      className: 'list-item-actions',
+      onMouseEnter: () => setInAction(!dropdown?.disabled),
+      onMouseLeave: () => setInAction(false)
+    }, /*#__PURE__*/React.createElement(_Dropdown.DropdownButton, _extends({}, dropdown, {
+      disabled: disabled || dropdown.disabled,
+      icon: variant === 'overlay' ? /*#__PURE__*/React.createElement(_icons.SystemIcons.ArrowDropDown, null) : /*#__PURE__*/React.createElement(_icons.SystemIcons.MoreVertical, null)
+    }))));
   };
 
   ListRow.propTypes = {
     key: _propTypes2.default.string,
-    Icon: _propTypes2.default.any,
-    mainInfo: _propTypes2.default.any.isRequired,
-    dropdownOptions: _propTypes2.default.array.isRequired,
-    disableDifferentBackgroundforEvenNumbers: _propTypes2.default.bool,
-    size: _propTypes2.default.oneOf(['small', 'medium', 'large']).isRequired,
-    variant: _propTypes2.default.oneOf(['one-line', 'two-line', 'overlay']).isRequired,
+    variant: _propTypes2.default.oneOf(['normal', 'overlay']),
+    icon: _propTypes2.default.node,
+    mainText: _propTypes2.default.string.isRequired,
+    secondaryText: _propTypes2.default.string,
     note: _propTypes2.default.string,
-    disabled: _propTypes2.default.bool.isRequired
+    noteTooltip: _propTypes2.default.string,
+    disabled: _propTypes2.default.bool,
+    action: _propTypes2.default.func
   };
   exports.default = ListRow;
 });

package/dist/umd/List/ListRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["handleListHeight","size","RowWrapper","styled","div","props","COLORS","neutral_20","DisabledState","css","EditRow","primary_20","primary_100","LeftSection","ComponentSStyling","ComponentTextStyle","MainInfo","RightSection","Note","ButtonWrapper","UserDropdownButton","white","key","Icon","mainInfo","dropdownOptions","disableDifferentBackgroundforEvenNumbers","variant","note","disabled","renderTextData","renderDropdown","neutral_500","ListRow","color","React","dropdownActive","setDropdownActive"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {Button, IconButton} from '../Button';\nimport {ArrowDropDown, MoreVertical} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {ListRowDropdownOption} from '../types';\n\nimport ListRowDropdown from './ListRowDropdown';\nimport {ComponentSStyling} from '../styles/typography';\n\nconst handleListHeight = (size:string) => {\n  switch(size)\n  {\n    case 'small' : return '48px;';\n    case 'medium' : return '56px;';\n    default : return '64px;';\n  }\n}\n\nconst RowWrapper = styled.div<{disableDifferentBackgroundforEvenNumbers:boolean|undefined}>`\n  &:nth-child(even) {\n    background-color: ${props => (props.disableDifferentBackgroundforEvenNumbers ? 'inherit' : COLORS.neutral_20)};\n  }\n\n  .interaction {\n    :hover {\n      background-color: white;\n    }\n\n    :focus {\n      background-color: white;\n    }\n\n    :active {      \n        background-color: white;\n    }\n  }\n`;\n\nconst DisabledState = css`\n  pointer-events: none;\n  background-color: white;\n`;\n\nconst EditRow = styled.div<ListRowProps>`\n  display: flex;\n  justify-content: space-between;\n  padding: 8px 12px;\n  align-items: center;\n\n  ${props => props.disabled ? DisabledState : ''}\n\n  height : ${props => handleListHeight(props.size) }\n\n  .user-actions {\n    display: flex;\n    position: relative;\n    align-items: center;\n  }\n\n  .somePaddingForAlignment {\n    padding: 0 3px 0 0;\n  }\n\n  &:hover {    \n    background-color: ${COLORS.primary_20};    \n  }\n\n  &:focus {    \n    background-color: white;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;    \n  }\n  \n  &:active {    \n    background-color: ${COLORS.primary_100};\n  }\n`;\n\nconst LeftSection = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  svg {\n    margin-right: 12px;\n  }\n`;\n\nconst MainInfo = styled.div`\n  margin: auto 1em auto 0;\n  display: flex;\n  flex-direction: column;\n`;\n\nconst RightSection = styled.div`\n  text-align: center;\n  display: flex;\n  flex-direction: row-reverse;\n`;\n\nconst Note = styled.div`\n  margin: auto;\n`;\n\nconst ButtonWrapper = styled.div`\n  outline: none;\n`;\n\nconst UserDropdownButton = styled(IconButton)`\n  display: flex;\n  text-decoration: none;\n  outline: none;\n  div {\n    outline: none;\n  }\n\n  &:hover > div {\n    background-color : ${COLORS.primary_20};\n    border-radius: 18px;\n  }\n\n  &:focus > div {\n    box-shadow:0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    border-radius: 18px;\n    background: ${COLORS.white};\n  }\n\n  &:active > div {\n    background-color : ${COLORS.primary_100};\n    border-radius: 18px;\n  }\n`;\n\ntype Props = {\n  key?: string;\n  Icon?: any;\n  mainInfo: any;\n  dropdownOptions: ListRowDropdownOption[];\n  disableDifferentBackgroundforEvenNumbers?: boolean;\n  size: 'small' | 'medium' | 'large';\n  variant: 'one-line' | 'two-line' | 'overlay';\n  note?: string;\n  disabled: boolean;\n};\n\nconst renderTextData = (mainInfo: any, variant?: string) => {\n  if(variant == 'two-line'){\n    return (\n      <MainInfo data-hj-suppress>{mainInfo}\n        <small>some secondary text</small>\n      </MainInfo>\n    )\n  }\n  else{\n    return (\n      <MainInfo data-hj-suppress>{mainInfo}</MainInfo>\n    )\n  }\n}\n\nconst renderDropdown = (variant: string, size: string) =>{\n  switch(variant){\n    case 'overlay' : return (\n      <div tabIndex={-1}>\n        <ArrowDropDown size={size} color={COLORS.neutral_500} />\n      </div>\n    );\n    \n    default : return (\n      <div tabIndex={-1}>\n        <MoreVertical size={size} color={COLORS.neutral_500} />\n      </div>\n    );\n  }\n  \n}\n\nconst ListRow: React.FunctionComponent<Props> = ({ key, Icon, mainInfo, dropdownOptions, disableDifferentBackgroundforEvenNumbers, size, variant, note, disabled }: Props) => {\n  const color = COLORS.black;\n  const [dropdownActive, setDropdownActive] = React.useState<Boolean>(false);\n\n  return (\n    <RowWrapper disableDifferentBackgroundforEvenNumbers={disableDifferentBackgroundforEvenNumbers}>\n      <EditRow key={key} size={size} variant = {variant} disabled = {disabled}\n        disableDifferentBackgroundforEvenNumbers={disableDifferentBackgroundforEvenNumbers}\n        className={(dropdownActive?'interaction':'')}>\n        <LeftSection color={color} data-hj-suppress>\n          {Icon && <Icon size=\"22px\" color={color} className=\"somePaddingForAlignment\" />}\n          { renderTextData(mainInfo, variant) }\n        </LeftSection>\n\n        <RightSection>\n          <ButtonWrapper className=\"user-actions\">\n            <UserDropdownButton\n              variant=\"secondary\"\n              shape='circular'\n              action={() => {\n                setDropdownActive(true);\n              }}>\n              {\n                renderDropdown(variant, size)\n              }\n            </UserDropdownButton>\n            {dropdownActive && <ListRowDropdown size={size} closeDropdown={() => setDropdownActive(false)} options={dropdownOptions} />}\n          </ButtonWrapper>\n\n          <Note>\n              {note}\n          </Note>\n        </RightSection>\n      </EditRow>\n    </RowWrapper>\n  );\n};\n\nexport default ListRow;\n\ntype ListRowProps = {\n  disableDifferentBackgroundforEvenNumbers? : boolean;\n  size: string;\n  variant: string;\n  disabled: boolean;\n}"],"file":"ListRow.js"}
+{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","primary_100","primary_800","neutral_300","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","ComponentXXSStyling","ComponentXSStyling","key","variant","icon","mainText","secondaryText","note","noteTooltip","disabled","action","ListRow","size","Size","React","handleKeyPress","e","rowClassName","inAction","setInAction","dropdown"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,QAAMA,GAAG,GAAGC,2BAAOC,GAAI;AACvB;AACA;AACA;AACA;AACA,6BAA6BC,eAAOC,WAAY;AAChD;AACA;AACA;AACA,WAAWD,eAAOE,WAAY;AAC9B,sBAAsBF,eAAOG,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBH,eAAOI,UAAW;AAC1C,aAAaJ,eAAOK,WAAY;AAChC;AACA;AACA;AACA,wBAAwBL,eAAOM,WAAY;AAC3C,aAAaN,eAAOO,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeP,eAAOQ,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,mCAAkBC,2BAAD,OAAjBD,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQE,mCAAkBD,2BAAD,OAAjBC,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,mCAAkBF,2BAAD,OAAjBE,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,qCAAoBH,2BAAD,OAAnBG,EAAmB,IAAnBA,CAAsD;AAC5D;AACA;AACA;AACA,aAAab,eAAOE,WAAY;AAChC;AACA,MAAMY,oCAAmBJ,2BAAD,OAAlBI,EAAkB,IAAlBA,C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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  position: relative;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: none;\n  }\n\n  &.interactive:focus {\n    outline: none;\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    z-index: 1;\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\n\ntype Props = {\n  key?: string;\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   key,\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyPress = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`);\n\n  return (\n    <Row key={key}\n         tabIndex={!!action && !disabled ? 0 : undefined}\n         className={rowClassName}\n         onKeyPress={(e) => !disabled && handleKeyPress(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}

package/dist/umd/List/__tests__/ListRow.tests.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["react", "@testing-library/react", "../index", "../../icons/systemicons/SystemIcons"], factory);
+    define(["react", "@testing-library/react", "../index", "../../types", "../../icons"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(require("react"), require("@testing-library/react"), require("../index"), require("../../icons/systemicons/SystemIcons"));
+    factory(require("react"), require("@testing-library/react"), require("../index"), require("../../types"), require("../../icons"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(global.react, global.react, global.index, global.SystemIcons);
+    factory(global.react, global.react, global.index, global.types, global.icons);
     global.undefined = mod.exports;
   }
-})(this, function (_react, _react3, _index, _SystemIcons) {
+})(this, function (_react, _react3, _index, _types, _icons) {
   "use strict";
 
   var _react2 = _interopRequireDefault(_react);
@@ -26,56 +26,13 @@
       const {
         getByText
       } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.ListRow, {
-        Icon: _SystemIcons.Institute,
-        mainInfo: /*#__PURE__*/_react2.default.createElement("div", null, "Laerdal Medical AS"),
-        dropdownOptions: [{
-          label: 'Option 1',
-          action: () => {},
-          key: 'Test1'
-        }, {
-          label: 'Option 2',
-          action: () => {},
-          key: 'Test2'
-        }],
-        variant: "one-line",
-        size: "small",
+        icon: /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.Institute, null),
+        mainText: 'Laerdal Medical AS',
+        size: _types.Size.Small,
         disabled: false
-      }, "Menu 1"));
+      }));
       expect(getByText('Laerdal Medical AS')).toBeDefined();
     });
-    it('When menu is clicked, it opens', async () => {
-      const {
-        getByRole,
-        getByText
-      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.ListRow, {
-        Icon: _SystemIcons.Institute,
-        mainInfo: /*#__PURE__*/_react2.default.createElement("div", null, "Laerdal Medical AS"),
-        dropdownOptions: [{
-          label: 'Option 1',
-          action: () => {},
-          key: 'Test1'
-        }, {
-          label: 'Option 2',
-          action: () => {},
-          key: 'Test2'
-        }],
-        variant: "two-line",
-        size: "large",
-        disabled: true
-      }, "Menu 1")); //expect(getByText('Option 1')).not.toBeDefined();
-
-      getByRole('button').click();
-      expect(getByText('Option 1')).toBeDefined();
-    });
-    /*it('Renders with required input if specified', async () => {
-      const { getByPlaceholderText } = render(<DropdownFilter id="Dropdown" list={list} placeholder="Placeholder" required />);
-      expect(getByPlaceholderText('Placeholder').required).toBe(true);
-    });
-     it('Renders with inital value if specified', async () => {
-      const initialValue = 'Contact';
-      const { getByPlaceholderText } = render(<DropdownFilter id="Dropdown" list={list} placeholder="Placeholder" initalValue={initialValue} />);
-      expect(getByPlaceholderText('Placeholder').value).toBe(initialValue);
-    });*/
   });
 });
 //# sourceMappingURL=ListRow.tests.js.map

package/dist/umd/List/__tests__/ListRow.tests.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/List/__tests__/ListRow.tests.tsx"],"names":["describe","it","getByText","render","label","action","key","expect","getByRole"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAKAA,EAAAA,QAAQ,CAAA,aAAA,EAAgB,MAAM;AAC5BC,IAAAA,EAAE,CAAA,SAAA,EAAY,YAAY;AACxB,YAAM;AAAEC,QAAAA;AAAF,UAAgBC,qBAAM,aAC1B,gBAAA,aAAA,CAAA,cAAA,EAAA;AACE,QAAA,IAAI,EADN,sBAAA;AAEE,QAAA,QAAQ,EAAA,aAAE,gBAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAFZ,oBAEY,CAFZ;AAGE,QAAA,eAAe,EAAE,CACf;AAAEC,UAAAA,KAAK,EAAP,UAAA;AAAqBC,UAAAA,MAAM,EAAE,MAAM,CAAnC,CAAA;AAAuCC,UAAAA,GAAG,EAAE;AAA5C,SADe,EAEf;AAAEF,UAAAA,KAAK,EAAP,UAAA;AAAqBC,UAAAA,MAAM,EAAE,MAAM,CAAnC,CAAA;AAAuCC,UAAAA,GAAG,EAAE;AAA5C,SAFe,CAHnB;AAOE,QAAA,OAAO,EAPT,UAAA;AAQE,QAAA,IAAI,EARN,OAAA;AASE,QAAA,QAAQ,EAAE;AATZ,OAAA,EADF,QACE,CADoBH,CAAtB;AAeAI,MAAAA,MAAM,CAACL,SAAS,CAAhBK,oBAAgB,CAAV,CAANA,CAAAA,WAAAA;AAhBFN,KAAE,CAAFA;AAmBAA,IAAAA,EAAE,CAAA,gCAAA,EAAmC,YAAY;AAC/C,YAAM;AAAA,QAAA,SAAA;AAAaC,QAAAA;AAAb,UAA2BC,qBAAM,aACrC,gBAAA,aAAA,CAAA,cAAA,EAAA;AACE,QAAA,IAAI,EADN,sBAAA;AAEE,QAAA,QAAQ,EAAA,aAAE,gBAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAFZ,oBAEY,CAFZ;AAGE,QAAA,eAAe,EAAE,CACf;AAAEC,UAAAA,KAAK,EAAP,UAAA;AAAqBC,UAAAA,MAAM,EAAE,MAAM,CAAnC,CAAA;AAAuCC,UAAAA,GAAG,EAAE;AAA5C,SADe,EAEf;AAAEF,UAAAA,KAAK,EAAP,UAAA;AAAqBC,UAAAA,MAAM,EAAE,MAAM,CAAnC,CAAA;AAAuCC,UAAAA,GAAG,EAAE;AAA5C,SAFe,CAHnB;AAOE,QAAA,OAAO,EAPT,UAAA;AAQE,QAAA,IAAI,EARN,OAAA;AASE,QAAA,QAAQ,EAAE;AATZ,OAAA,EAF6C,QAE7C,CAD+BH,CAAjC,CAD+C,CAgB/C;;AACAK,MAAAA,SAAS,CAATA,QAAS,CAATA,CAAAA,KAAAA;AACAD,MAAAA,MAAM,CAACL,SAAS,CAAhBK,UAAgB,CAAV,CAANA,CAAAA,WAAAA;AAlBFN,KAAE,CAAFA;AAqBA;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAjDAD,GAAQ,CAARA","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport { ListRow } from '../index';\nimport { Institute } from '../../icons/systemicons/SystemIcons';\n\ndescribe('<ListRow />', () => {\n  it('Renders', async () => {\n    const { getByText } = render(\n      <ListRow\n        Icon={Institute}\n        mainInfo={<div>Laerdal Medical AS</div>}\n        dropdownOptions={[\n          { label: 'Option 1', action: () => {}, key: 'Test1' },\n          { label: 'Option 2', action: () => {}, key: 'Test2' },\n        ]}\n        variant='one-line'\n        size='small'\n        disabled={false}\n        >\n        Menu 1\n      </ListRow>,\n    );\n    expect(getByText('Laerdal Medical AS')).toBeDefined();\n  });\n\n  it('When menu is clicked, it opens', async () => {\n    const { getByRole, getByText } = render(\n      <ListRow\n        Icon={Institute}\n        mainInfo={<div>Laerdal Medical AS</div>}\n        dropdownOptions={[\n          { label: 'Option 1', action: () => {}, key: 'Test1' },\n          { label: 'Option 2', action: () => {}, key: 'Test2' },\n        ]}\n        variant='two-line'\n        size='large'\n        disabled={true}>\n        Menu 1\n      </ListRow>,\n    );\n\n    //expect(getByText('Option 1')).not.toBeDefined();\n    getByRole('button').click();\n    expect(getByText('Option 1')).toBeDefined();\n  });\n\n  /*it('Renders with required input if specified', async () => {\n    const { getByPlaceholderText } = render(<DropdownFilter id=\"Dropdown\" list={list} placeholder=\"Placeholder\" required />);\n    expect(getByPlaceholderText('Placeholder').required).toBe(true);\n  });\n\n  it('Renders with inital value if specified', async () => {\n    const initialValue = 'Contact';\n    const { getByPlaceholderText } = render(<DropdownFilter id=\"Dropdown\" list={list} placeholder=\"Placeholder\" initalValue={initialValue} />);\n    expect(getByPlaceholderText('Placeholder').value).toBe(initialValue);\n  });*/\n});\n"],"file":"ListRow.tests.js"}
+{"version":3,"sources":["../../../../src/List/__tests__/ListRow.tests.tsx"],"names":["describe","it","getByText","render","Size","expect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAMAA,EAAAA,QAAQ,CAAA,aAAA,EAAgB,MAAM;AAC5BC,IAAAA,EAAE,CAAA,SAAA,EAAY,YAAY;AACxB,YAAM;AAACC,QAAAA;AAAD,UAAcC,qBAAM,aACxB,gBAAA,aAAA,CAAA,cAAA,EAAA;AACE,QAAA,IAAI,EAAA,aAAE,gBAAA,aAAA,CAAA,mBAAA,SAAA,EADR,IACQ,CADR;AAEE,QAAA,QAAQ,EAFV,oBAAA;AAGE,QAAA,IAAI,EAAEC,YAHR,KAAA;AAIE,QAAA,QAAQ,EAAE;AAJZ,OAAA,CADkBD,CAApB;AAOAE,MAAAA,MAAM,CAACH,SAAS,CAAhBG,oBAAgB,CAAV,CAANA,CAAAA,WAAAA;AARFJ,KAAE,CAAFA;AADFD,GAAQ,CAARA","sourcesContent":["import React from 'react';\nimport {render} from '@testing-library/react';\nimport {ListRow} from '../index';\nimport {Size} from '../../types';\nimport {SystemIcons} from '../../icons';\n\ndescribe('<ListRow />', () => {\n  it('Renders', async () => {\n    const {getByText} = render(\n      <ListRow\n        icon={<SystemIcons.Institute/>}\n        mainText={'Laerdal Medical AS'}\n        size={Size.Small}\n        disabled={false}/>,\n    );\n    expect(getByText('Laerdal Medical AS')).toBeDefined();\n  });\n});\n"],"file":"ListRow.tests.js"}

package/dist/umd/List/index.js

@@ -1,27 +1,25 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "./ListRow", "./ListRowDropdown"], factory);
+    define(["exports", "./ListRow"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("./ListRow"), require("./ListRowDropdown"));
+    factory(exports, require("./ListRow"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.ListRow, global.ListRowDropdown);
+    factory(mod.exports, global.ListRow);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _ListRow, _ListRowDropdown) {
+})(this, function (exports, _ListRow) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
     value: true
   });
-  exports.ListRowDropdown = exports.ListRow = undefined;
+  exports.ListRow = undefined;
 
   var _ListRow2 = _interopRequireDefault(_ListRow);
 
-  var _ListRowDropdown2 = _interopRequireDefault(_ListRowDropdown);
-
   function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
       default: obj
@@ -29,6 +27,5 @@
   }
 
   exports.ListRow = _ListRow2.default;
-  exports.ListRowDropdown = _ListRowDropdown2.default;
 });
 //# sourceMappingURL=index.js.map

package/dist/umd/List/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAGA,O,GAAA,iB;UAAA,e,GAAA,yB","sourcesContent":["import ListRow from './ListRow';\nimport ListRowDropdown from './ListRowDropdown';\n\nexport { ListRow, ListRowDropdown };\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/List/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;UAEA,O,GAAA,iB","sourcesContent":["import ListRow from './ListRow';\n\nexport {ListRow};\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.2.1-dev.1.full",
+  "version": "1.2.1-dev.2",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [