@laerdal/life-react-components 1.1.2-dev.8 → 1.2.1-dev.2

package/dist/js/List/ListRow.js

@@ -13,17 +13,19 @@ var React = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Button = require("../Button");
+var _styles = require("../styles");
 
-var _SystemIcons = require("../icons/systemicons/SystemIcons");
+var _typography = require("../styles/typography");
 
-var _styles = require("../styles");
+var _Tooltips = require("../Tooltips");
 
-var _ListRowDropdown = _interopRequireDefault(require("./ListRowDropdown"));
+var _Dropdown = require("../Dropdown");
 
-var _typography = require("../styles/typography");
+var _icons = require("../icons");
+
+var _types = require("../types");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -31,6 +33,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -45,70 +49,88 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var EditRow = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding: 8px 12px;\n  align-items: center;\n\n  &:nth-child(even) {\n    background-color: ", ";\n  }\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  &.active {\n    background-color: ", ";\n  }\n"])), function (props) {
-  return props.disableDifferentBackgroundforEvenNumbers ? 'inherit' : _styles.COLORS.neutral_20;
-}, _styles.COLORS.neutral_100);
-
-var LeftSection = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  ", "\n\n  svg {\n    margin-right: 12px;\n  }\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'));
-
-var MainInfo = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: auto 1em auto 0;\n  display: flex;\n  flex-direction: column;\n"])));
-
-var ButtonWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  outline: none;\n"])));
-
-var UserDropdownButton = (0, _styledComponents.default)(_Button.Button)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  text-decoration: none;\n  outline: none;\n  div {\n    outline: none;\n  }\n  &:focus > div {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    border-radius: 4px;\n    outline: none;\n    background: ", ";\n  }\n"])), _styles.COLORS.white);
-var StyledMoreVertical = (0, _styledComponents.default)(_SystemIcons.MoreVertical)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding: 8px 8px;\n  outline: none;\n  &:hover {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &:active {\n    background: ", ";\n    border-radius: 4px;\n  }\n"])), _styles.COLORS.primary_20, _styles.COLORS.primary_100);
+var Row = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  position: relative;\n\n  color: ", ";\n  background-color: ", ";\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: ", ";\n    color: ", ";\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\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: ", ";\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      ", "\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      ", "\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      ", "\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    ", "\n  }\n\n  .list-item-note {\n    color: ", ";\n    word-break: initial;\n    ", "\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: ", ";\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_600, _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600, (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600);
 
 var ListRow = function ListRow(_ref) {
   var key = _ref.key,
-      Icon = _ref.Icon,
-      mainInfo = _ref.mainInfo,
-      dropdownOptions = _ref.dropdownOptions,
-      disableDifferentBackgroundforEvenNumbers = _ref.disableDifferentBackgroundforEvenNumbers;
-  var color = _styles.COLORS.black;
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
+      icon = _ref.icon,
+      mainText = _ref.mainText,
+      secondaryText = _ref.secondaryText,
+      dropdown = _ref.dropdown,
+      note = _ref.note,
+      noteTooltip = _ref.noteTooltip,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      action = _ref.action;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      dropdownActive = _React$useState2[0],
-      setDropdownActive = _React$useState2[1];
+      inAction = _React$useState2[0],
+      setInAction = _React$useState2[1];
+
+  var handleKeyPress = function handleKeyPress(e) {
+    if (e.key === 'Enter') {
+      action && action();
+    }
+  };
 
-  return /*#__PURE__*/React.createElement(EditRow, {
+  var rowClassName = (inAction ? 'in-action ' : '').concat(disabled ? 'disabled ' : '').concat(!!action ? 'interactive ' : '').concat('list-item-row ').concat("".concat(variant, " ")).concat("".concat(size));
+  return /*#__PURE__*/React.createElement(Row, {
     key: key,
-    disableDifferentBackgroundforEvenNumbers: disableDifferentBackgroundforEvenNumbers
-  }, /*#__PURE__*/React.createElement(LeftSection, {
-    color: color,
-    "data-hj-suppress": true
-  }, Icon && /*#__PURE__*/React.createElement(Icon, {
-    size: "22px",
-    color: color,
-    className: "somePaddingForAlignment"
-  }), /*#__PURE__*/React.createElement(MainInfo, {
+    tabIndex: !!action && !disabled ? 0 : undefined,
+    className: rowClassName,
+    onKeyPress: function onKeyPress(e) {
+      return !disabled && handleKeyPress(e);
+    },
+    onClick: function onClick(e) {
+      !disabled && action && action();
+    },
     "data-hj-suppress": true
-  }, mainInfo)), /*#__PURE__*/React.createElement(ButtonWrapper, {
-    className: "user-actions"
-  }, /*#__PURE__*/React.createElement(UserDropdownButton, {
-    variant: "tertiary",
-    onClick: function onClick() {
-      setDropdownActive(true);
-    }
+  }, !!icon && /*#__PURE__*/React.createElement("div", {
+    className: 'list-item-icon'
+  }, icon), /*#__PURE__*/React.createElement("div", {
+    className: 'list-item-content'
   }, /*#__PURE__*/React.createElement("div", {
-    tabIndex: -1
-  }, /*#__PURE__*/React.createElement(StyledMoreVertical, {
-    size: "22px",
-    color: _styles.COLORS.neutral_500
-  }))), dropdownActive && /*#__PURE__*/React.createElement(_ListRowDropdown.default, {
-    closeDropdown: function closeDropdown() {
-      return setDropdownActive(false);
+    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: function onMouseEnter() {
+      return setInAction(!(dropdown !== null && dropdown !== void 0 && dropdown.disabled));
     },
-    options: dropdownOptions
-  })));
+    onMouseLeave: function onMouseLeave() {
+      return 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: _propTypes.default.string,
-  Icon: _propTypes.default.any,
-  mainInfo: _propTypes.default.any.isRequired,
-  dropdownOptions: _propTypes.default.array.isRequired,
-  disableDifferentBackgroundforEvenNumbers: _propTypes.default.bool
+  variant: _propTypes.default.oneOf(['normal', 'overlay']),
+  icon: _propTypes.default.node,
+  mainText: _propTypes.default.string.isRequired,
+  secondaryText: _propTypes.default.string,
+  note: _propTypes.default.string,
+  noteTooltip: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  action: _propTypes.default.func
 };
 var _default = ListRow;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["EditRow","styled","div","props","disableDifferentBackgroundforEvenNumbers","COLORS","neutral_20","neutral_100","LeftSection","ComponentTextStyle","Regular","MainInfo","ButtonWrapper","UserDropdownButton","Button","white","StyledMoreVertical","MoreVertical","primary_20","primary_100","ListRow","key","Icon","mainInfo","dropdownOptions","color","black","React","useState","dropdownActive","setDropdownActive","neutral_500"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAGA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,ubAOW,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,wCAAN,GAAiD,SAAjD,GAA6DC,eAAOC,UAAzE;AAAA,CAPhB,EAqBWD,eAAOE,WArBlB,CAAb;;AAyBA,IAAMC,WAAW,GAAGP,0BAAOC,GAAV,+LAKb,mCAAkBO,2BAAmBC,OAArC,EAA8C,SAA9C,CALa,CAAjB;;AAYA,IAAMC,QAAQ,GAAGV,0BAAOC,GAAV,kJAAd;;AAMA,IAAMU,aAAa,GAAGX,0BAAOC,GAAV,2FAAnB;;AAIA,IAAMW,kBAAkB,GAAG,+BAAOC,cAAP,CAAH,mVAWNT,eAAOU,KAXD,CAAxB;AAeA,IAAMC,kBAAkB,GAAG,+BAAOC,yBAAP,CAAH,sPAINZ,eAAOa,UAJD,EAQNb,eAAOc,WARD,CAAxB;;AAqBA,IAAMC,OAAuC,GAAG,SAA1CA,OAA0C,OAA+F;AAAA,MAA5FC,GAA4F,QAA5FA,GAA4F;AAAA,MAAvFC,IAAuF,QAAvFA,IAAuF;AAAA,MAAjFC,QAAiF,QAAjFA,QAAiF;AAAA,MAAvEC,eAAuE,QAAvEA,eAAuE;AAAA,MAAtDpB,wCAAsD,QAAtDA,wCAAsD;AAC7I,MAAMqB,KAAK,GAAGpB,eAAOqB,KAArB;;AACA,wBAA4CC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAA5C;AAAA;AAAA,MAAOC,cAAP;AAAA,MAAuBC,iBAAvB;;AAEA,sBACE,oBAAC,OAAD;AAAS,IAAA,GAAG,EAAET,GAAd;AAAmB,IAAA,wCAAwC,EAAEjB;AAA7D,kBACE,oBAAC,WAAD;AAAa,IAAA,KAAK,EAAEqB,KAApB;AAA2B;AAA3B,KACGH,IAAI,iBAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAC,MAAX;AAAkB,IAAA,KAAK,EAAEG,KAAzB;AAAgC,IAAA,SAAS,EAAC;AAA1C,IADX,eAEE,oBAAC,QAAD;AAAU;AAAV,KAA4BF,QAA5B,CAFF,CADF,eAME,oBAAC,aAAD;AAAe,IAAA,SAAS,EAAC;AAAzB,kBACE,oBAAC,kBAAD;AACE,IAAA,OAAO,EAAC,UADV;AAEE,IAAA,OAAO,EAAE,mBAAM;AACbO,MAAAA,iBAAiB,CAAC,IAAD,CAAjB;AACD;AAJH,kBAKE;AAAK,IAAA,QAAQ,EAAE,CAAC;AAAhB,kBACE,oBAAC,kBAAD;AAAoB,IAAA,IAAI,EAAC,MAAzB;AAAgC,IAAA,KAAK,EAAEzB,eAAO0B;AAA9C,IADF,CALF,CADF,EAUGF,cAAc,iBAAI,oBAAC,wBAAD;AAAiB,IAAA,aAAa,EAAE;AAAA,aAAMC,iBAAiB,CAAC,KAAD,CAAvB;AAAA,KAAhC;AAAgE,IAAA,OAAO,EAAEN;AAAzE,IAVrB,CANF,CADF;AAqBD,CAzBD;;;AAPEH,EAAAA,G;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,e;AACApB,EAAAA,wC;;eA8BagB,O","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../Button';\nimport {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 EditRow = styled.div<{ disableDifferentBackgroundforEvenNumbers?: boolean }>`\n  display: flex;\n  justify-content: space-between;\n  padding: 8px 12px;\n  align-items: center;\n\n  &:nth-child(even) {\n    background-color: ${props => (props.disableDifferentBackgroundforEvenNumbers ? 'inherit' : COLORS.neutral_20)};\n  }\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  &.active {\n    background-color: ${COLORS.neutral_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 ButtonWrapper = styled.div`\n  outline: none;\n`;\n\nconst UserDropdownButton = styled(Button)`\n  display: flex;\n  text-decoration: none;\n  outline: none;\n  div {\n    outline: none;\n  }\n  &:focus > div {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    border-radius: 4px;\n    outline: none;\n    background: ${COLORS.white};\n  }\n`;\n\nconst StyledMoreVertical = styled(MoreVertical)`\n  padding: 8px 8px;\n  outline: none;\n  &:hover {\n    background: ${COLORS.primary_20};\n    border-radius: 4px;\n  }\n  &:active {\n    background: ${COLORS.primary_100};\n    border-radius: 4px;\n  }\n`;\n\ntype Props = {\n  key?: string;\n  Icon?: any;\n  mainInfo: any;\n  dropdownOptions: ListRowDropdownOption[];\n  disableDifferentBackgroundforEvenNumbers?: boolean;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({ key, Icon, mainInfo, dropdownOptions, disableDifferentBackgroundforEvenNumbers }: Props) => {\n  const color = COLORS.black;\n  const [dropdownActive, setDropdownActive] = React.useState<Boolean>(false);\n\n  return (\n    <EditRow key={key} disableDifferentBackgroundforEvenNumbers={disableDifferentBackgroundforEvenNumbers}>\n      <LeftSection color={color} data-hj-suppress>\n        {Icon && <Icon size=\"22px\" color={color} className=\"somePaddingForAlignment\" />}\n        <MainInfo data-hj-suppress>{mainInfo}</MainInfo>\n      </LeftSection>\n\n      <ButtonWrapper className=\"user-actions\">\n        <UserDropdownButton\n          variant=\"tertiary\"\n          onClick={() => {\n            setDropdownActive(true);\n          }}>\n          <div tabIndex={-1}>\n            <StyledMoreVertical size=\"22px\" color={COLORS.neutral_500} />\n          </div>\n        </UserDropdownButton>\n        {dropdownActive && <ListRowDropdown closeDropdown={() => setDropdownActive(false)} options={dropdownOptions} />}\n      </ButtonWrapper>\n    </EditRow>\n  );\n};\n\nexport default ListRow;\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","ComponentTextStyle","Regular","ListRow","key","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","React","useState","inAction","setInAction","handleKeyPress","e","rowClassName","concat","undefined","Large","Small","XSmall"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAQA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,GAAG,GAAGC,0BAAOC,GAAV,4+EAKoBC,eAAOC,WAL3B,EASED,eAAOE,WATT,EAUaF,eAAOG,KAVpB,EAwBeH,eAAOI,UAxBtB,EAyBIJ,eAAOK,WAzBX,EA6BeL,eAAOM,WA7BtB,EA8BIN,eAAOO,WA9BX,EA0CMP,eAAOQ,WA1Cb,EAwDD,mCAAkBC,2BAAmBC,OAArC,EAA8C,IAA9C,CAxDC,EAyED,mCAAkBD,2BAAmBC,OAArC,EAA8C,IAA9C,CAzEC,EA0FD,mCAAkBD,2BAAmBC,OAArC,EAA8C,IAA9C,CA1FC,EA8HH,qCAAoBD,2BAAmBC,OAAvC,EAAgD,IAAhD,CA9HG,EAkIIV,eAAOE,WAlIX,EAoIH,oCAAmBO,2BAAmBC,OAAtC,EAA+C,IAA/C,CApIG,EAmJIV,eAAOE,WAnJX,CAAT;;AA4KA,IAAMS,OAAuC,GAAG,SAA1CA,OAA0C,OAYc;AAAA,MAXXC,GAWW,QAXXA,GAWW;AAAA,uBAVXC,IAUW;AAAA,MAVXA,IAUW,0BAVJC,YAAKC,MAUD;AAAA,0BATXC,OASW;AAAA,MATXA,OASW,6BATD,QASC;AAAA,MARXC,IAQW,QARXA,IAQW;AAAA,MAPXC,QAOW,QAPXA,QAOW;AAAA,MANXC,aAMW,QANXA,aAMW;AAAA,MALXC,QAKW,QALXA,QAKW;AAAA,MAJXC,IAIW,QAJXA,IAIW;AAAA,MAHXC,WAGW,QAHXA,WAGW;AAAA,2BAFXC,QAEW;AAAA,MAFXA,QAEW,8BAFA,KAEA;AAAA,MADXC,MACW,QADXA,MACW;;AAE5D,wBAAgCC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;;AAEA,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,CAAD,EAAY;AACjC,QAAIA,CAAC,CAAClB,GAAF,KAAU,OAAd,EAAuB;AACrBY,MAAAA,MAAM,IAAIA,MAAM,EAAhB;AACD;AACF,GAJD;;AAMA,MAAMO,YAAY,GAAG,CAACJ,QAAQ,GAAG,YAAH,GAAkB,EAA3B,EAClBK,MADkB,CACXT,QAAQ,GAAG,WAAH,GAAiB,EADd,EAElBS,MAFkB,CAEX,CAAC,CAACR,MAAF,GAAW,cAAX,GAA4B,EAFjB,EAGlBQ,MAHkB,CAGX,gBAHW,EAIlBA,MAJkB,WAIRhB,OAJQ,QAKlBgB,MALkB,WAKRnB,IALQ,EAArB;AAOA,sBACE,oBAAC,GAAD;AAAK,IAAA,GAAG,EAAED,GAAV;AACK,IAAA,QAAQ,EAAE,CAAC,CAACY,MAAF,IAAY,CAACD,QAAb,GAAwB,CAAxB,GAA4BU,SAD3C;AAEK,IAAA,SAAS,EAAEF,YAFhB;AAGK,IAAA,UAAU,EAAE,oBAACD,CAAD;AAAA,aAAO,CAACP,QAAD,IAAaM,cAAc,CAACC,CAAD,CAAlC;AAAA,KAHjB;AAIK,IAAA,OAAO,EAAE,iBAAAA,CAAC,EAAI;AACZ,OAACP,QAAD,IAAaC,MAAb,IAAuBA,MAAM,EAA7B;AACD,KANN;AAOK;AAPL,KASI,CAAC,CAACP,IAAF,iBACA;AAAK,IAAA,SAAS,EAAE;AAAhB,KAAmCA,IAAnC,CAVJ,eAYE;AAAK,IAAA,SAAS,EAAE;AAAhB,kBACE;AAAK,IAAA,SAAS,EAAE;AAAhB,KAAwCC,QAAxC,CADF,EAEG,CAAC,CAACC,aAAF,iBAAmB;AAAK,IAAA,SAAS,EAAE;AAAhB,KAA6CA,aAA7C,CAFtB,CAZF,EAiBI,CAAC,CAACE,IAAF,iBACA,0CAEI,CAAC,CAACC,WAAF,iBACA;AAAK,IAAA,SAAS,EAAE;AAAhB,kBACE,oBAAC,wBAAD;AAAgB,IAAA,KAAK,EAAEA,WAAvB;AACgB,IAAA,IAAI,EAAET,IAAI,KAAKC,YAAKoB,KAAd,GAAsBpB,YAAKC,MAA3B,GAAoCF,IAAI,KAAKC,YAAKqB,KAAd,GAAsBrB,YAAKsB,MAA3B,GAAoCtB,YAAKqB,KADnG;AAEgB,IAAA,QAAQ,EAAE,KAF1B;AAGgB,IAAA,SAAS,EAAE;AAH3B,KAIGd,IAJH,CADF,CAHJ,EAaI,CAACC,WAAD,iBACA;AAAK,IAAA,SAAS,EAAE;AAAhB,KACGD,IADH,CAdJ,CAlBJ,EAuCI,CAAC,CAACD,QAAF,iBACA;AAAK,IAAA,SAAS,EAAE,mBAAhB;AACK,IAAA,YAAY,EAAE;AAAA,aAAMQ,WAAW,CAAC,EAACR,QAAD,aAACA,QAAD,eAACA,QAAQ,CAAEG,QAAX,CAAD,CAAjB;AAAA,KADnB;AAEK,IAAA,YAAY,EAAE;AAAA,aAAMK,WAAW,CAAC,KAAD,CAAjB;AAAA;AAFnB,kBAGE,oBAAC,wBAAD,eAAoBR,QAApB;AACgB,IAAA,QAAQ,EAAEG,QAAQ,IAAIH,QAAQ,CAACG,QAD/C;AAEgB,IAAA,IAAI,EAAEP,OAAO,KAAK,SAAZ,gBACF,oBAAC,kBAAD,CAAa,aAAb,OADE,gBAEF,oBAAC,kBAAD,CAAa,YAAb;AAJpB,KAHF,CAxCJ,CADF;AAsDD,CAnFD;;;AAbEJ,EAAAA,G;AAEAI,EAAAA,O,4BAAU,Q,EAAW,S;AACrBC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,a;AAEAE,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,M;;eAwFab,O","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/js/List/__tests__/ListRow.tests.js

@@ -6,7 +6,9 @@ var _react2 = require("@testing-library/react");
 
 var _index = require("../index");
 
-var _SystemIcons = require("../../icons/systemicons/SystemIcons");
+var _types = require("../../types");
+
+var _icons = require("../../icons");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -23,18 +25,11 @@ describe('<ListRow />', function () {
         switch (_context.prev = _context.next) {
           case 0:
             _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.ListRow, {
-              Icon: _SystemIcons.Institute,
-              mainInfo: /*#__PURE__*/_react.default.createElement("div", null, "Laerdal Medical AS"),
-              dropdownOptions: [{
-                label: 'Option 1',
-                action: function action() {},
-                key: 'Test1'
-              }, {
-                label: 'Option 2',
-                action: function action() {},
-                key: 'Test2'
-              }]
-            }, "Menu 1")), getByText = _render.getByText;
+              icon: /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.Institute, null),
+              mainText: 'Laerdal Medical AS',
+              size: _types.Size.Small,
+              disabled: false
+            })), getByText = _render.getByText;
             expect(getByText('Laerdal Medical AS')).toBeDefined();
 
           case 2:
@@ -44,45 +39,5 @@ describe('<ListRow />', function () {
       }
     }, _callee);
   })));
-  it('When menu is clicked, it opens', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-    var _render2, getByRole, getByText;
-
-    return regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.ListRow, {
-              Icon: _SystemIcons.Institute,
-              mainInfo: /*#__PURE__*/_react.default.createElement("div", null, "Laerdal Medical AS"),
-              dropdownOptions: [{
-                label: 'Option 1',
-                action: function action() {},
-                key: 'Test1'
-              }, {
-                label: 'Option 2',
-                action: function action() {},
-                key: 'Test2'
-              }]
-            }, "Menu 1")), getByRole = _render2.getByRole, getByText = _render2.getByText; //expect(getByText('Option 1')).not.toBeDefined();
-
-            getByRole('button').click();
-            expect(getByText('Option 1')).toBeDefined();
-
-          case 3:
-          case "end":
-            return _context2.stop();
-        }
-      }
-    }, _callee2);
-  })));
-  /*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/js/List/__tests__/ListRow.tests.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/List/__tests__/ListRow.tests.tsx"],"names":["describe","it","Institute","label","action","key","getByText","expect","toBeDefined","getByRole","click"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAEAA,QAAQ,CAAC,aAAD,EAAgB,YAAM;AAC5BC,EAAAA,EAAE,CAAC,SAAD,uEAAY;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,sBACU,kCACpB,6BAAC,cAAD;AACE,cAAA,IAAI,EAAEC,sBADR;AAEE,cAAA,QAAQ,eAAE,+DAFZ;AAGE,cAAA,eAAe,EAAE,CACf;AAAEC,gBAAAA,KAAK,EAAE,UAAT;AAAqBC,gBAAAA,MAAM,EAAE,kBAAM,CAAE,CAArC;AAAuCC,gBAAAA,GAAG,EAAE;AAA5C,eADe,EAEf;AAAEF,gBAAAA,KAAK,EAAE,UAAT;AAAqBC,gBAAAA,MAAM,EAAE,kBAAM,CAAE,CAArC;AAAuCC,gBAAAA,GAAG,EAAE;AAA5C,eAFe;AAHnB,wBADoB,CADV,EACJC,SADI,WACJA,SADI;AAYZC,YAAAA,MAAM,CAACD,SAAS,CAAC,oBAAD,CAAV,CAAN,CAAwCE,WAAxC;;AAZY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAZ,GAAF;AAeAP,EAAAA,EAAE,CAAC,gCAAD,uEAAmC;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,uBACF,kCAC/B,6BAAC,cAAD;AACE,cAAA,IAAI,EAAEC,sBADR;AAEE,cAAA,QAAQ,eAAE,+DAFZ;AAGE,cAAA,eAAe,EAAE,CACf;AAAEC,gBAAAA,KAAK,EAAE,UAAT;AAAqBC,gBAAAA,MAAM,EAAE,kBAAM,CAAE,CAArC;AAAuCC,gBAAAA,GAAG,EAAE;AAA5C,eADe,EAEf;AAAEF,gBAAAA,KAAK,EAAE,UAAT;AAAqBC,gBAAAA,MAAM,EAAE,kBAAM,CAAE,CAArC;AAAuCC,gBAAAA,GAAG,EAAE;AAA5C,eAFe;AAHnB,wBAD+B,CADE,EAC3BI,SAD2B,YAC3BA,SAD2B,EAChBH,SADgB,YAChBA,SADgB,EAanC;;AACAG,YAAAA,SAAS,CAAC,QAAD,CAAT,CAAoBC,KAApB;AACAH,YAAAA,MAAM,CAACD,SAAS,CAAC,UAAD,CAAV,CAAN,CAA8BE,WAA9B;;AAfmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAnC,GAAF;AAkBA;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEC,CA5CO,CAAR","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        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        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","Size","Small","getByText","expect","toBeDefined"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEAA,QAAQ,CAAC,aAAD,EAAgB,YAAM;AAC5BC,EAAAA,EAAE,CAAC,SAAD,uEAAY;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,sBACQ,kCAClB,6BAAC,cAAD;AACE,cAAA,IAAI,eAAE,6BAAC,kBAAD,CAAa,SAAb,OADR;AAEE,cAAA,QAAQ,EAAE,oBAFZ;AAGE,cAAA,IAAI,EAAEC,YAAKC,KAHb;AAIE,cAAA,QAAQ,EAAE;AAJZ,cADkB,CADR,EACLC,SADK,WACLA,SADK;AAQZC,YAAAA,MAAM,CAACD,SAAS,CAAC,oBAAD,CAAV,CAAN,CAAwCE,WAAxC;;AARY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAZ,GAAF;AAUD,CAXO,CAAR","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/js/List/index.d.ts

@@ -1,3 +1,2 @@
 import ListRow from './ListRow';
-import ListRowDropdown from './ListRowDropdown';
-export { ListRow, ListRowDropdown };
+export { ListRow };

package/dist/js/List/index.js

@@ -9,16 +9,8 @@ Object.defineProperty(exports, "ListRow", {
     return _ListRow.default;
   }
 });
-Object.defineProperty(exports, "ListRowDropdown", {
-  enumerable: true,
-  get: function get() {
-    return _ListRowDropdown.default;
-  }
-});
 
 var _ListRow = _interopRequireDefault(require("./ListRow"));
 
-var _ListRowDropdown = _interopRequireDefault(require("./ListRowDropdown"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA","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":";;;;;;;;;;;;AAAA","sourcesContent":["import ListRow from './ListRow';\n\nexport {ListRow};\n"],"file":"index.js"}

package/dist/js/Modals/ModalContainer.js

@@ -64,7 +64,7 @@ var ModalContainerStyles = {
   }
 }; //override modal classes to define the animations
 
-var modalTransitions = "\n.ReactModal__Overlay {\n  opacity: 0;\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n";
+var modalTransitions = "\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: 100;\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n";
 
 var ModalContainer = /*#__PURE__*/function (_React$Component) {
   _inherits(ModalContainer, _React$Component);

package/dist/js/Modals/ModalContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","ModalContainer","modalHeight","modalWidth","modalOverflow","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","sizes","GetSize","GetOverflow","stylesConfiguration","Object","assign","styles","getElementById","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}
+{"version":3,"sources":["../../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","ModalContainer","modalHeight","modalWidth","modalOverflow","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","sizes","GetSize","GetOverflow","stylesConfiguration","Object","assign","styles","getElementById","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: 100;\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}

package/dist/js/Modals/ModalDialog.d.ts

@@ -17,6 +17,8 @@ interface NewModalProps {
     backButton?: () => void;
     closeAction: () => void;
     submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;
+    note?: string;
+    state?: string;
 }
 export declare const ModalDialog: React.FunctionComponent<NewModalProps>;
 export default ModalDialog;

package/dist/js/Modals/ModalDialog.js

@@ -23,6 +23,8 @@ var _ModalContainer = _interopRequireDefault(require("./ModalContainer"));
 
 var _ModalStyles = require("./ModalStyles");
 
+var _ModalNote = require("./ModalNote");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -52,7 +54,9 @@ var ModalDialog = function ModalDialog(_ref) {
       closeAction = _ref.closeAction,
       submitAction = _ref.submitAction,
       tooltip = _ref.tooltip,
-      children = _ref.children;
+      children = _ref.children,
+      note = _ref.note,
+      state = _ref.state;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -230,7 +234,11 @@ var ModalDialog = function ModalDialog(_ref) {
     color: _styles.COLORS.neutral_600
   })), tooltipOpen && /*#__PURE__*/React.createElement("span", null, tooltip)), !topImage && ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(_ModalStyles.ModalBody, {
     size: size
-  }, children), /*#__PURE__*/React.createElement(_ModalStyles.ModalFooter, {
+  }, children), note && /*#__PURE__*/React.createElement(_ModalNote.ModalNote, {
+    note: note,
+    state: state,
+    size: size
+  }), /*#__PURE__*/React.createElement(_ModalStyles.ModalFooter, {
     size: size
   }, buttons === null || buttons === void 0 ? void 0 : buttons.map(function (b, i) {
     return /*#__PURE__*/React.createElement(_Button.Button, {
@@ -264,7 +272,9 @@ ModalDialog.propTypes = {
   tooltip: _propTypes.default.string,
   backButton: _propTypes.default.func,
   closeAction: _propTypes.default.func.isRequired,
-  submitAction: _propTypes.default.func.isRequired
+  submitAction: _propTypes.default.func.isRequired,
+  note: _propTypes.default.string,
+  state: _propTypes.default.string
 };
 var _default = ModalDialog;
 exports.default = _default;

package/dist/js/Modals/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","backButton","closeAction","submitAction","tooltip","children","React","useState","tooltipOpen","setTooltipOpen","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalCloseButton","onClick","COLORS","black","ModalBackButton","reverse","lastLeftButton","find","a","position","neutral_600","map","b","i","id","disabled","loading","action","type","variant","order","marginRight","undefined","text"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Button, IconButton} from '../Button';\nimport {ButtonProps} from '../Button/Button';\nimport {ArrowLineLeft, Close, Help} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL} from '../styles';\nimport {Size} from '../types'\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  ModalBody,\n  ModalFooter,\n  ModalTitleSection,\n  StyledModalHeader\n} from './ModalStyles';\n\ninterface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {\n  action?: (() => void) | ((e: any) => void);\n  text: string;\n  position?: 'left' | 'right';\n}\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  buttons?.reverse();\n  const lastLeftButton = buttons?.find(a => a.position === 'left');\n  buttons?.reverse();\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              {ModalCloseButton(closeAction)}\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && ModalTitle(title, size)}\n            {tooltip && (\n              <div id=\"tooltip\">\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && ModalCloseButton(closeAction)}\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          <ModalFooter size={size}>\n              {buttons?.map((b, i) => (\n                  <Button key={b.id || i}\n                          id={b.id}\n                          disabled={b.disabled}\n                          loading={b.loading}\n                          size={size}\n                          onClick={b.action}\n                          type={b.type}\n                          variant={b.variant}\n                          style={\n                            b.position === 'left'\n                              ? {\n                                order: -1,\n                                marginRight: b === lastLeftButton ? 'auto' : undefined\n                              }\n                              : undefined\n                          }>\n                    {b.text}\n                  </Button>\n              ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
+{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","backButton","closeAction","submitAction","tooltip","children","note","state","React","useState","tooltipOpen","setTooltipOpen","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalCloseButton","onClick","COLORS","black","ModalBackButton","reverse","lastLeftButton","find","a","position","neutral_600","map","b","i","id","disabled","loading","action","type","variant","order","marginRight","undefined","text"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { SystemIcon, SystemIcons } from '..';\nimport {Button, IconButton} from '../Button';\nimport {ButtonProps} from '../Button/Button';\nimport {ArrowLineLeft, Close, Help} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL} from '../styles';\nimport {Size} from '../types'\nimport ModalContainer from './ModalContainer';\nimport {\n  BackButtonWrapper,\n  CloseButtonWrapper,\n  Column,\n  ModalBody,\n  ModalFooter,\n  ModalTitleSection,\n  StyledModalHeader\n} from './ModalStyles';\n\nimport {ModalNote} from './ModalNote';\n\ninterface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {\n  action?: (() => void) | ((e: any) => void);\n  text: string;\n  position?: 'left' | 'right';\n}\n\ninterface NewModalProps {\n  size?: Size;\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  buttons?: ButtonAction[];\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n  note?: string;\n  state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  buttons,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n  children,\n  note,\n  state\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '320px';\n      case Size.Large:\n        return '640px';\n      case Size.Medium:\n      default:\n        return '480px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case Size.Small:\n        return '480px';\n      case Size.Large:\n        return '720px';\n      case Size.Medium:\n      default:\n        return '640px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case Size.Small:\n        return 160;\n      case Size.Medium:\n        return 200;\n      case Size.Large:\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px';\n      case Size.Medium:\n        return '24px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case Size.Small:\n        return '16px 16px 8px';\n      case Size.Medium:\n        return '24px 24px 20px';\n      case Size.Large:\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: Size) => {\n    switch (size) {\n      case Size.Small:\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case Size.Medium:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case Size.Large:\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  buttons?.reverse();\n  const lastLeftButton = buttons?.find(a => a.position === 'left');\n  buttons?.reverse();\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              {ModalCloseButton(closeAction)}\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && ModalTitle(title, size)}\n            {tooltip && (\n              <div id=\"tooltip\">\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && ModalCloseButton(closeAction)}\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{children}</ModalBody>\n\n          { note && <ModalNote note={note} state={state} size={size}/> }\n\n          <ModalFooter size={size}>\n              {buttons?.map((b, i) => (\n                  <Button key={b.id || i}\n                          id={b.id}\n                          disabled={b.disabled}\n                          loading={b.loading}\n                          size={size}\n                          onClick={b.action}\n                          type={b.type}\n                          variant={b.variant}\n                          style={\n                            b.position === 'left'\n                              ? {\n                                order: -1,\n                                marginRight: b === lastLeftButton ? 'auto' : undefined\n                              }\n                              : undefined\n                          }>\n                    {b.text}\n                  </Button>\n              ))}\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}

package/dist/js/Modals/ModalNote.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface NoteProps {
+    note: string;
+    icon?: React.ReactNode;
+    state?: string;
+    size?: string;
+}
+export declare const ModalNote: React.FunctionComponent<NoteProps>;
+export default ModalNote;

package/dist/js/Modals/ModalNote.js

@@ -0,0 +1,79 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ModalNote = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _ = require("..");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _ModalStyles = require("./ModalStyles");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ModalNote = function ModalNote(_ref) {
+  var note = _ref.note,
+      icon = _ref.icon,
+      size = _ref.size,
+      _ref$state = _ref.state,
+      state = _ref$state === void 0 ? 'neutral' : _ref$state;
+  var stateVal = state.toLowerCase();
+
+  switch (stateVal) {
+    case 'positive':
+      return /*#__PURE__*/React.createElement(_ModalStyles.ModalNoteSection, {
+        state: stateVal,
+        size: size
+      }, icon ? icon : /*#__PURE__*/React.createElement(_SystemIcons.CheckComplete, {
+        color: _.COLORS.correct_500
+      }), /*#__PURE__*/React.createElement("span", null, note));
+
+    case 'warning':
+      return /*#__PURE__*/React.createElement(_ModalStyles.ModalNoteSection, {
+        state: stateVal,
+        size: size
+      }, icon ? icon : /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
+        color: _.COLORS.warning_500
+      }), /*#__PURE__*/React.createElement("span", null, note));
+
+    case 'critical':
+      return /*#__PURE__*/React.createElement(_ModalStyles.ModalNoteSection, {
+        state: stateVal,
+        size: size
+      }, icon ? icon : /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
+        color: _.COLORS.warning_500
+      }), /*#__PURE__*/React.createElement("span", null, note));
+
+    default:
+      return /*#__PURE__*/React.createElement(_ModalStyles.ModalNoteSection, {
+        state: stateVal,
+        size: size
+      }, icon ? icon : /*#__PURE__*/React.createElement(_SystemIcons.Information, {
+        color: _.COLORS.primary_500,
+        className: size
+      }), /*#__PURE__*/React.createElement("span", null, note));
+  }
+};
+
+exports.ModalNote = ModalNote;
+ModalNote.propTypes = {
+  note: _propTypes.default.string.isRequired,
+  icon: _propTypes.default.node,
+  state: _propTypes.default.string,
+  size: _propTypes.default.string
+};
+var _default = ModalNote;
+exports.default = _default;
+//# sourceMappingURL=ModalNote.js.map