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

package/dist/umd/icons/index.js

@@ -1,27 +1,29 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "./contenticons/ContentIcons", "./systemicons/SystemIcons"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../Tooltips/TooltipStyles", "./contenticons/ContentIcons", "./systemicons/SystemIcons"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("./contenticons/ContentIcons"), require("./systemicons/SystemIcons"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../Tooltips/TooltipStyles"), require("./contenticons/ContentIcons"), require("./systemicons/SystemIcons"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.ContentIcons, global.SystemIcons);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.TooltipStyles, global.ContentIcons, global.SystemIcons);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _ContentIcons, _SystemIcons) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _TooltipStyles, _ContentIcons, _SystemIcons) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
     value: true
   });
-  exports.ContentIcons = exports.SystemIcons = exports.SystemIcon = exports.BaseIcon = exports.getSize = undefined;
+  exports.ContentIcons = exports.SystemIcons = exports.ContentIcon = exports.SystemIcon = exports.BaseIcon = exports.getSize = undefined;
 
   var _propTypes2 = _interopRequireDefault(_propTypes);
 
   var React = _interopRequireWildcard(_react);
 
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
   var ContentIcons = _interopRequireWildcard(_ContentIcons);
 
   var SystemIcons = _interopRequireWildcard(_SystemIcons);
@@ -95,54 +97,85 @@
     }
   };
 
-  const BaseIcon = exports.BaseIcon = ({
-    className,
-    children,
-    size = '16px',
-    viewBox = '0 0 25 25'
-  }) => {
-    return /*#__PURE__*/React.createElement("svg", {
+  const Container = _styledComponents2.default.div`
+  position: relative;
+  ${_TooltipStyles.TooltipTrigger}
+`;
+  const IconComponent = _styledComponents2.default.svg`
+  width: ${props => props.width};
+  height: ${props => props.height};
+`;
+
+  const renderIcon = (children, width, height, viewBox, tooltip, className) => {
+    return tooltip ? /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(IconComponent, {
+      className: className,
+      width: width,
+      height: height,
+      viewBox: viewBox,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, children), /*#__PURE__*/React.createElement(_TooltipStyles.Tooltip, null, tooltip)) : /*#__PURE__*/React.createElement(IconComponent, {
       className: className,
-      style: {
-        width: getSize(size),
-        height: getSize(size)
-      },
+      width: width,
+      height: height,
       viewBox: viewBox,
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, children);
   };
 
+  const BaseIcon = exports.BaseIcon = ({
+    className,
+    children,
+    size = '16px',
+    viewBox = '0 0 25 25',
+    tooltip = ''
+  }) => {
+    return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);
+  };
+
   BaseIcon.propTypes = {
     className: _propTypes2.default.string,
     children: _propTypes2.default.any,
     size: _propTypes2.default.string,
-    viewBox: _propTypes2.default.string
+    viewBox: _propTypes2.default.string,
+    tooltip: _propTypes2.default.string
   };
 
   const SystemIcon = exports.SystemIcon = ({
     className,
     children,
     size = '24px',
-    viewBox = '0 0 24 24'
+    viewBox = '0 0 24 24',
+    tooltip = ''
   }) => {
-    return /*#__PURE__*/React.createElement("svg", {
-      className: className,
-      style: {
-        width: getSize(size),
-        height: getSize(size)
-      },
-      viewBox: viewBox,
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, children);
+    return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);
   };
 
   SystemIcon.propTypes = {
     className: _propTypes2.default.string,
     children: _propTypes2.default.any,
     size: _propTypes2.default.string,
-    viewBox: _propTypes2.default.string
+    viewBox: _propTypes2.default.string,
+    tooltip: _propTypes2.default.string
+  };
+
+  const ContentIcon = exports.ContentIcon = ({
+    className,
+    children,
+    size = '48px',
+    viewBox = '0 0 48 48',
+    tooltip = ''
+  }) => {
+    return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);
+  };
+
+  ContentIcon.propTypes = {
+    className: _propTypes2.default.string,
+    children: _propTypes2.default.any,
+    size: _propTypes2.default.string,
+    viewBox: _propTypes2.default.string,
+    tooltip: _propTypes2.default.string
   };
   exports.SystemIcons = SystemIcons;
   exports.ContentIcons = ContentIcons;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/icons/index.tsx"],"names":["className","children","size","viewBox","getSize","BaseIcon","width","height","SystemIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MAAA,K;;MACA,Y;;MACA,W;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA;AACA;AACA;AACA;AACA;AACO,QAAMI,OAAO,WAAPA,OAAO,GAAIF,IAAD,IAAkB;AACvC,QAAI,OAAA,IAAA,KAAA,QAAA,IAA4BA,IAAI,CAAJA,OAAAA,CAAAA,IAAAA,MAAuB,CAAvD,CAAA,EAA2D;AACzD,aAAQ,GAAEA,IAAV,IAAA;AADF,KAAA,MAEO;AACL,aAAA,IAAA;AACD;AALI,GAAA;;AAQA,QAAMG,QAA4C,WAA5CA,QAA4C,GAAG,CAAC;AAAA,IAAA,SAAA;AAAA,IAAA,QAAA;AAAuBH,IAAAA,IAAI,GAA3B,MAAA;AAAsCC,IAAAA,OAAO,GAAG;AAAhD,GAAD,KAAmE;AAE7H,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAd,SAAA;AAA2B,MAAA,KAAK,EAAE;AAAEG,QAAAA,KAAK,EAAEF,OAAO,CAAhB,IAAgB,CAAhB;AAAwBG,QAAAA,MAAM,EAAEH,OAAO,CAAA,IAAA;AAAvC,OAAlC;AAAmF,MAAA,OAAO,EAA1F,OAAA;AAAqG,MAAA,IAAI,EAAzG,MAAA;AAAiH,MAAA,KAAK,EAAC;AAAvH,KAAA,EADF,QACE,CADF;AAFK,GAAA;;;AA3BLJ,IAAAA,S;AACAC,IAAAA,Q;AACAC,IAAAA,I;AACAC,IAAAA,O;;;AAkCK,QAAMK,UAA8C,WAA9CA,UAA8C,GAAG,CAAC;AAAA,IAAA,SAAA;AAAA,IAAA,QAAA;AAAuBN,IAAAA,IAAI,GAA3B,MAAA;AAAsCC,IAAAA,OAAO,GAAG;AAAhD,GAAD,KAAmE;AAE/H,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAd,SAAA;AAA2B,MAAA,KAAK,EAAE;AAAEG,QAAAA,KAAK,EAAEF,OAAO,CAAhB,IAAgB,CAAhB;AAAwBG,QAAAA,MAAM,EAAEH,OAAO,CAAA,IAAA;AAAvC,OAAlC;AAAmF,MAAA,OAAO,EAA1F,OAAA;AAAqG,MAAA,IAAI,EAAzG,MAAA;AAAiH,MAAA,KAAK,EAAC;AAAvH,KAAA,EADF,QACE,CADF;AAFK,GAAA;;;AArCLJ,IAAAA,S;AACAC,IAAAA,Q;AACAC,IAAAA,I;AACAC,IAAAA,O;;UA2CF,W,GAAA,W;UACA,Y,GAAA,Y","sourcesContent":["import * as React from 'react';\nimport * as ContentIcons from './contenticons/ContentIcons'\nimport * as SystemIcons from './systemicons/SystemIcons'\n\nexport type BaseProps = {\n  className?: string;\n  children?: any;\n  size?: string;\n  viewBox?: string;\n};\n\nexport type IconProps = {\n  label?: string;\n  className?: string;\n  color?: string;\n  size?: string;\n  viewBox?: string;\n};\n\n/**\n * Retrieves the size of the icon.\n * @param size - Original size which was passed to the icon.\n * @returns Numeric value indicating the size of the icon.\n */\nexport const getSize = (size: string) => {\n  if (typeof size === 'string' && size.indexOf('px') === -1) {\n    return `${size}px`;\n  } else {\n    return size;\n  }\n};\n\nexport const BaseIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '16px', viewBox = '0 0 25 25' }) => {\n\n  return (\n    <svg className={className} style={{ width: getSize(size), height: getSize(size) }} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      {children}\n    </svg>\n  );\n};\n\n\nexport const SystemIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '24px', viewBox = '0 0 24 24' }) => {\n\n  return (\n    <svg className={className} style={{ width: getSize(size), height: getSize(size) }} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      {children}\n    </svg>\n  );\n};\n\nexport {SystemIcons}\nexport {ContentIcons}\n\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/icons/index.tsx"],"names":["className","children","size","viewBox","tooltip","getSize","Container","styled","div","TooltipTrigger","IconComponent","svg","props","width","height","renderIcon","BaseIcon","SystemIcon","ContentIcon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport * as ContentIcons from './contenticons/ContentIcons';\nimport * as SystemIcons from './systemicons/SystemIcons';\n\nexport type BaseProps = {\n  className?: string;\n  children?: any;\n  size?: string;\n  viewBox?: string;\n  tooltip?: string;\n};\n\nexport type IconProps = {\n  label?: string;\n  className?: string;\n  color?: string;\n  size?: string;\n  viewBox?: string;\n};\n\n/**\n * Retrieves the size of the icon.\n * @param size - Original size which was passed to the icon.\n * @returns Numeric value indicating the size of the icon.\n */\nexport const getSize = (size: string) => {\n  if (typeof size === 'string' && size.indexOf('px') === -1) {\n    return `${size}px`;\n  } else {\n    return size;\n  }\n};\n\nconst Container = styled.div`\n  position: relative;\n  ${TooltipTrigger}\n`;\nconst IconComponent = styled.svg<{ width: string; height: string }>`\n  width: ${props => props.width};\n  height: ${props => props.height};\n`;\n\nconst renderIcon = (children: React.ReactNode, width: string, height: string, viewBox: string, tooltip?: string, className?: string) => {\n  return tooltip ? (\n    <Container>\n      <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        {children}\n      </IconComponent>\n      <Tooltip>{tooltip}</Tooltip>\n    </Container>\n  ) : (\n    <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      {children}\n    </IconComponent>\n  );\n};\n\nexport const BaseIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '16px', viewBox = '0 0 25 25', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const SystemIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '24px', viewBox = '0 0 24 24', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const ContentIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '48px', viewBox = '0 0 48 48', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport { SystemIcons };\nexport { ContentIcons };\n"],"file":"index.js"}