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

package/dist/umd/Button/Anchor.js

@@ -1,201 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../styles"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports, _propTypes, _react, _styledComponents, _styles) {
-  "use strict";
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-
-  var _propTypes2 = _interopRequireDefault(_propTypes);
-
-  var React = _interopRequireWildcard(_react);
-
-  var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-  function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function (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
-    };
-  }
-
-  const _excluded = ["children", "size", "href", "target"];
-
-  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 _objectWithoutProperties(source, excluded) {
-    if (source == null) return {};
-
-    var target = _objectWithoutPropertiesLoose(source, excluded);
-
-    var key, i;
-
-    if (Object.getOwnPropertySymbols) {
-      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-      for (i = 0; i < sourceSymbolKeys.length; i++) {
-        key = sourceSymbolKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-        target[key] = source[key];
-      }
-    }
-
-    return target;
-  }
-
-  function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-
-    for (i = 0; i < sourceKeys.length; i++) {
-      key = sourceKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      target[key] = source[key];
-    }
-
-    return target;
-  }
-
-  const Anchor = _ref => {
-    let {
-      children,
-      size = 'small',
-      href = '#',
-      target = '_blank'
-    } = _ref,
-        props = _objectWithoutProperties(_ref, _excluded);
-
-    return /*#__PURE__*/React.createElement(AnchorTag, _extends({
-      size: size,
-      href: href,
-      target: target
-    }, props), children);
-  };
-
-  Anchor.propTypes = {
-    size: _propTypes2.default.oneOf(['small', 'medium', 'large', 'xsmall', 'xlarge']).isRequired,
-    href: _propTypes2.default.string
-  };
-  const AnchorTag = _styledComponents2.default.a`
-  color: ${_styles.COLORS.primary_500};
-  background-color: transparent;
-  padding: 0;
-  border: none;
-  max-width:max-content; 
-  text-decoration: none;
-  font-size: ${props => props.size === 'large' ? '20px' : props.size === 'small' ? '16px' : props.size === 'xsmall' ? '14px' : props.size === 'xlarge' ? '24px' : '18px'};
-  line-height: ${props => props.size === 'large' ? '32px' : props.size === 'small' ? '24px' : props.size === 'xsmall' ? '20px' : props.size === 'xlarge' ? '36px' : '28px'};
-  font-weight: bold;
-  font-family: inherit;
-  cursor: pointer;
-  outline:none;
-  &:visited,
-  &.vistied-state {
-    color: ${_styles.COLORS.accent1_500};
-    background: transparent;
-    text-decoration: none;
-  }
-  &:hover, 
-  &.hover-state {
-    color: ${_styles.COLORS.primary_600};
-    text-decoration: underline;
-  }
-  &:focus,
-  &.focus-state {
-    background-color: ${_styles.COLORS.white};
-    text-decoration: underline;
-    box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus} !important;
-    outline:none;
-    color: ${_styles.COLORS.primary_500};
-  }
-  &:active,
-  &.active-state {
-    color: ${_styles.COLORS.primary_700};
-    background: transparent;
-    text-decoration: underline;
-    background-color:unset !important;
-    box-shadow: unset !important;
-  } 
-`;
-  exports.default = Anchor;
-});
-//# sourceMappingURL=Anchor.js.map

package/dist/umd/Button/Anchor.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Button/Anchor.tsx"],"names":["size","href","Anchor","target","props","AnchorTag","styled","a","COLORS","primary_500","accent1_500","primary_600","white","focus_25","focus","primary_700"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,QAAME,MAA4C,GAAG,IAAA,IAAuE;AAAA,QAAtE;AAAA,MAAA,QAAA;AAAYF,MAAAA,IAAI,GAAhB,OAAA;AAA4BC,MAAAA,IAAI,GAAhC,GAAA;AAAsCE,MAAAA,MAAM,GAAC;AAA7C,QAAsE,IAAA;AAAA,QAAXC,KAAW,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA;;AAC1H,WAAA,aACI,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,QAAA,CAAA;AAAW,MAAA,IAAI,EAAf,IAAA;AAAuB,MAAA,IAAI,EAA3B,IAAA;AAAmC,MAAA,MAAM,EAAED;AAA3C,KAAA,EAAA,KAAA,CAAA,EADJ,QACI,CADJ;AADF,GAAA;;;AAJIH,IAAAA,I,6BAAO,O,EAAU,Q,EAAW,O,EAAU,Q,EAAW,Q;AACjDC,IAAAA,I;;AAWJ,QAAMI,SAAS,GAAGC,2BAAOC,CAAe;AACxC,WAAWC,eAAOC,WAAY;AAC9B;AACA;AACA;AACA;AACA;AACA,eAAeL,KAAK,IAAKA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAkCA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAkCA,KAAK,CAALA,IAAAA,KAAAA,QAAAA,GAAAA,MAAAA,GAAmCA,KAAK,CAALA,IAAAA,KAAAA,QAAAA,GAAAA,MAAAA,GAAmC,MAAQ;AAC3K,iBAAiBA,KAAK,IAAKA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAkCA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAkCA,KAAK,CAALA,IAAAA,KAAAA,QAAAA,GAAAA,MAAAA,GAAmCA,KAAK,CAALA,IAAAA,KAAAA,QAAAA,GAAAA,MAAAA,GAAmC,MAAQ;AAC7K;AACA;AACA;AACA;AACA;AACA;AACA,aAAcI,eAAOE,WAAa;AAClC;AACA;AACA;AACA;AACA;AACA,aAAaF,eAAOG,WAAY;AAChC;AACA;AACA;AACA;AACA,wBAAwBH,eAAOI,KAAM;AACrC;AACA,+BAA+BJ,eAAOK,QAAS,iBAAgBL,eAAOM,KAAM;AAC5E;AACA,aAAaN,eAAOC,WAAY;AAChC;AACA;AACA;AACA,aAAcD,eAAOO,WAAa;AAClC;AACA;AACA;AACA;AACA;AAvCA,CAAA;oBA0CA,M","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS} from '../styles';\n\ninterface AnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>{\n    size : 'small' | 'medium' | 'large' | 'xsmall' | 'xlarge';\n    href?: string;\n}\n\nconst Anchor: React.FunctionComponent<AnchorProps> = ({ children, size = 'small', href='#', target='_blank' , ...props}) => {\n  return (\n      <AnchorTag size={size} href={href} target={target} {...props}>\n          {children}\n      </AnchorTag>\n  )\n}\n\nconst AnchorTag = styled.a<AnchorProps>`\n  color: ${COLORS.primary_500};\n  background-color: transparent;\n  padding: 0;\n  border: none;\n  max-width:max-content; \n  text-decoration: none;\n  font-size: ${props => (props.size === 'large' ? '20px' : props.size === 'small' ? '16px' : props.size === 'xsmall' ? '14px' : props.size === 'xlarge' ? '24px' : '18px')};\n  line-height: ${props => (props.size === 'large' ? '32px' : props.size === 'small' ? '24px' : props.size === 'xsmall' ? '20px' : props.size === 'xlarge' ? '36px' : '28px')};\n  font-weight: bold;\n  font-family: inherit;\n  cursor: pointer;\n  outline:none;\n  &:visited,\n  &.vistied-state {\n    color: ${ COLORS.accent1_500 };\n    background: transparent;\n    text-decoration: none;\n  }\n  &:hover, \n  &.hover-state {\n    color: ${COLORS.primary_600};\n    text-decoration: underline;\n  }\n  &:focus,\n  &.focus-state {\n    background-color: ${COLORS.white};\n    text-decoration: underline;\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n    outline:none;\n    color: ${COLORS.primary_500};\n  }\n  &:active,\n  &.active-state {\n    color: ${ COLORS.primary_700 };\n    background: transparent;\n    text-decoration: underline;\n    background-color:unset !important;\n    box-shadow: unset !important;\n  } \n`;\n\nexport default Anchor;"],"file":"Anchor.js"}

package/dist/umd/List/ListRowDropdown.js

@@ -1,182 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../styles", "../styles/typography"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../styles/typography"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.typography);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _typography) {
-  "use strict";
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-
-  var _propTypes2 = _interopRequireDefault(_propTypes);
-
-  var React = _interopRequireWildcard(_react);
-
-  var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-  function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function (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
-    };
-  }
-
-  const Wrapper = _styledComponents2.default.div`
-  .isInside {
-    top: 42px;
-  }
-  .isOutside {
-    bottom: 42px;
-  }
-`;
-  const DropdownMenuContainer = _styledComponents2.default.div`
-  position: absolute;
-  flex-direction: column;
-  background: ${_styles.COLORS.white};
-  font-size: 1em;
-  z-index: 1;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
-  right: 0;
-  width: max-content;
-  min-width: 260px;
-`;
-  const Content = _styledComponents2.default.button`
-  min-width: 100%;
-  padding: 12px 16px;
-
-  text-align: left;
-  height: 48px;
-
-  ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
-
-  background-color: ${_styles.COLORS.white};
-  border-width: 0;
-
-  &:hover,
-  &:focus {
-    cursor: pointer;
-  }
-
-  &:hover {
-    background: ${_styles.COLORS.primary_20};
-    border-radius: 4px;
-  }
-  &:active {
-    background: ${_styles.COLORS.primary_100};
-    border-radius: 4px;
-  }
-`;
-
-  const ListRowDropdown = ({
-    options,
-    closeDropdown
-  }) => {
-    const [classname, setClassname] = React.useState('isInside');
-    const reference = React.useRef(null);
-
-    const clickIsOutside = e => reference && reference?.current && !reference?.current.contains(e.target);
-
-    const handleClick = e => {
-      if (e.keyCode) {
-        if (e.keyCode === 27) {
-          closeDropdown();
-        }
-      } else if (clickIsOutside(e)) {
-        closeDropdown();
-      }
-    };
-
-    const isInViewport = (offset = 0) => {
-      if (!reference.current) return;
-      const top = reference.current.getBoundingClientRect().bottom;
-      const inside = top + offset >= 0 && top - offset <= window.innerHeight;
-
-      if (!inside) {
-        setClassname('isOutside');
-      }
-    };
-
-    React.useEffect(() => {
-      document.addEventListener('mousedown', handleClick, false);
-      document.addEventListener('keydown', handleClick, false);
-      isInViewport();
-      return () => {
-        document.removeEventListener('mousedown', handleClick, false);
-        document.removeEventListener('keydown', handleClick, false);
-      }; // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(DropdownMenuContainer, {
-      ref: reference,
-      className: classname
-    }, options.map(option => /*#__PURE__*/React.createElement(Content, {
-      key: option.key,
-      onClick: option.action
-    }, option.label))));
-  };
-
-  ListRowDropdown.propTypes = {
-    options: _propTypes2.default.array.isRequired,
-    closeDropdown: _propTypes2.default.any.isRequired
-  };
-  exports.default = ListRowDropdown;
-});
-//# sourceMappingURL=ListRowDropdown.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/List/ListRowDropdown.tsx"],"names":["Wrapper","styled","div","DropdownMenuContainer","COLORS","white","Content","button","ComponentMStyling","ComponentTextStyle","primary_20","primary_100","options","closeDropdown","ListRowDropdown","React","reference","clickIsOutside","e","handleClick","isInViewport","offset","top","inside","window","setClassname","document","classname","option","action"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {ListRowDropdownOption} from '../types';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst Wrapper = styled.div`\n  .isInside {\n    top: 42px;\n  }\n  .isOutside {\n    bottom: 42px;\n  }\n`;\n\nconst DropdownMenuContainer = styled.div`\n  position: absolute;\n  flex-direction: column;\n  background: ${COLORS.white};\n  font-size: 1em;\n  z-index: 1;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  right: 0;\n  width: max-content;\n  min-width: 260px;\n`;\n\nconst Content = styled.button`\n  min-width: 100%;\n  padding: 12px 16px;\n\n  text-align: left;\n  height: 48px;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  background-color: ${COLORS.white};\n  border-width: 0;\n\n  &:hover,\n  &:focus {\n    cursor: pointer;\n  }\n\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 DropdownMenuProps = {\n  options: ListRowDropdownOption[];\n  closeDropdown: any;\n};\n\nconst ListRowDropdown: React.FunctionComponent<DropdownMenuProps> = ({ options, closeDropdown }: DropdownMenuProps) => {\n  const [classname, setClassname] = React.useState('isInside');\n  const reference = React.useRef<HTMLDivElement>(null);\n\n  const clickIsOutside = (e: any) => reference && reference?.current && !reference?.current.contains(e.target);\n\n  const handleClick = (e: any) => {\n    if (e.keyCode) {\n      if (e.keyCode === 27) {\n        closeDropdown();\n      }\n    } else if (clickIsOutside(e)) {\n      closeDropdown();\n    }\n  };\n\n  const isInViewport = (offset = 0) => {\n    if (!reference.current) return;\n    const top = reference.current.getBoundingClientRect().bottom;\n    const inside = top + offset >= 0 && top - offset <= window.innerHeight;\n    if (!inside) {\n      setClassname('isOutside');\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('mousedown', handleClick, false);\n    document.addEventListener('keydown', handleClick, false);\n    isInViewport();\n    return () => {\n      document.removeEventListener('mousedown', handleClick, false);\n      document.removeEventListener('keydown', handleClick, false);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <Wrapper>\n      <DropdownMenuContainer ref={reference} className={classname}>\n        {options.map(option => (\n          <Content key={option.key} onClick={option.action}>\n            {option.label}\n          </Content>\n        ))}\n      </DropdownMenuContainer>\n    </Wrapper>\n  );\n};\n\nexport default ListRowDropdown;\n"],"file":"ListRowDropdown.js"}