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

package/dist/js/icons/index.d.ts

@@ -6,6 +6,7 @@ export declare type BaseProps = {
     children?: any;
     size?: string;
     viewBox?: string;
+    tooltip?: string;
 };
 export declare type IconProps = {
     label?: string;
@@ -22,5 +23,6 @@ export declare type IconProps = {
 export declare const getSize: (size: string) => string;
 export declare const BaseIcon: React.FunctionComponent<BaseProps>;
 export declare const SystemIcon: React.FunctionComponent<BaseProps>;
+export declare const ContentIcon: React.FunctionComponent<BaseProps>;
 export { SystemIcons };
 export { ContentIcons };

package/dist/js/icons/index.js

@@ -5,12 +5,16 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SystemIcons = exports.ContentIcons = exports.SystemIcon = exports.BaseIcon = exports.getSize = void 0;
+exports.SystemIcons = exports.ContentIcons = exports.ContentIcon = exports.SystemIcon = exports.BaseIcon = exports.getSize = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var React = _interopRequireWildcard(require("react"));
 
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _TooltipStyles = require("../Tooltips/TooltipStyles");
+
 var ContentIcons = _interopRequireWildcard(require("./contenticons/ContentIcons"));
 
 exports.ContentIcons = ContentIcons;
@@ -19,12 +23,16 @@ var SystemIcons = _interopRequireWildcard(require("./systemicons/SystemIcons"));
 
 exports.SystemIcons = SystemIcons;
 
+var _templateObject, _templateObject2;
+
 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 }; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 /**
  * Retrieves the size of the icon.
  * @param size - Original size which was passed to the icon.
@@ -40,23 +48,42 @@ var getSize = function getSize(size) {
 
 exports.getSize = getSize;
 
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  ", "\n"])), _TooltipStyles.TooltipTrigger);
+
+var IconComponent = _styledComponents.default.svg(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n"])), function (props) {
+  return props.width;
+}, function (props) {
+  return props.height;
+});
+
+var renderIcon = function 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,
+    width: width,
+    height: height,
+    viewBox: viewBox,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, children);
+};
+
 var BaseIcon = function BaseIcon(_ref) {
   var className = _ref.className,
       children = _ref.children,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? '16px' : _ref$size,
       _ref$viewBox = _ref.viewBox,
-      viewBox = _ref$viewBox === void 0 ? '0 0 25 25' : _ref$viewBox;
-  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);
+      viewBox = _ref$viewBox === void 0 ? '0 0 25 25' : _ref$viewBox,
+      _ref$tooltip = _ref.tooltip,
+      tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip;
+  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);
 };
 
 exports.BaseIcon = BaseIcon;
@@ -64,7 +91,8 @@ BaseIcon.propTypes = {
   className: _propTypes.default.string,
   children: _propTypes.default.any,
   size: _propTypes.default.string,
-  viewBox: _propTypes.default.string
+  viewBox: _propTypes.default.string,
+  tooltip: _propTypes.default.string
 };
 
 var SystemIcon = function SystemIcon(_ref2) {
@@ -73,17 +101,10 @@ var SystemIcon = function SystemIcon(_ref2) {
       _ref2$size = _ref2.size,
       size = _ref2$size === void 0 ? '24px' : _ref2$size,
       _ref2$viewBox = _ref2.viewBox,
-      viewBox = _ref2$viewBox === void 0 ? '0 0 24 24' : _ref2$viewBox;
-  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);
+      viewBox = _ref2$viewBox === void 0 ? '0 0 24 24' : _ref2$viewBox,
+      _ref2$tooltip = _ref2.tooltip,
+      tooltip = _ref2$tooltip === void 0 ? '' : _ref2$tooltip;
+  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);
 };
 
 exports.SystemIcon = SystemIcon;
@@ -91,6 +112,28 @@ SystemIcon.propTypes = {
   className: _propTypes.default.string,
   children: _propTypes.default.any,
   size: _propTypes.default.string,
-  viewBox: _propTypes.default.string
+  viewBox: _propTypes.default.string,
+  tooltip: _propTypes.default.string
+};
+
+var ContentIcon = function ContentIcon(_ref3) {
+  var className = _ref3.className,
+      children = _ref3.children,
+      _ref3$size = _ref3.size,
+      size = _ref3$size === void 0 ? '48px' : _ref3$size,
+      _ref3$viewBox = _ref3.viewBox,
+      viewBox = _ref3$viewBox === void 0 ? '0 0 48 48' : _ref3$viewBox,
+      _ref3$tooltip = _ref3.tooltip,
+      tooltip = _ref3$tooltip === void 0 ? '' : _ref3$tooltip;
+  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);
+};
+
+exports.ContentIcon = ContentIcon;
+ContentIcon.propTypes = {
+  className: _propTypes.default.string,
+  children: _propTypes.default.any,
+  size: _propTypes.default.string,
+  viewBox: _propTypes.default.string,
+  tooltip: _propTypes.default.string
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/icons/index.tsx"],"names":["getSize","size","indexOf","BaseIcon","className","children","viewBox","width","height","SystemIcon"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AACA;;;;;;;;;;AAiBA;AACA;AACA;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAU,CAACC,IAAD,EAAkB;AACvC,MAAI,OAAOA,IAAP,KAAgB,QAAhB,IAA4BA,IAAI,CAACC,OAAL,CAAa,IAAb,MAAuB,CAAC,CAAxD,EAA2D;AACzD,qBAAUD,IAAV;AACD,GAFD,MAEO;AACL,WAAOA,IAAP;AACD;AACF,CANM;;;;AAQA,IAAME,QAA4C,GAAG,SAA/CA,QAA+C,OAAmE;AAAA,MAAhEC,SAAgE,QAAhEA,SAAgE;AAAA,MAArDC,QAAqD,QAArDA,QAAqD;AAAA,uBAA3CJ,IAA2C;AAAA,MAA3CA,IAA2C,0BAApC,MAAoC;AAAA,0BAA5BK,OAA4B;AAAA,MAA5BA,OAA4B,6BAAlB,WAAkB;AAE7H,sBACE;AAAK,IAAA,SAAS,EAAEF,SAAhB;AAA2B,IAAA,KAAK,EAAE;AAAEG,MAAAA,KAAK,EAAEP,OAAO,CAACC,IAAD,CAAhB;AAAwBO,MAAAA,MAAM,EAAER,OAAO,CAACC,IAAD;AAAvC,KAAlC;AAAmF,IAAA,OAAO,EAAEK,OAA5F;AAAqG,IAAA,IAAI,EAAC,MAA1G;AAAiH,IAAA,KAAK,EAAC;AAAvH,KACGD,QADH,CADF;AAKD,CAPM;;;;AA3BLD,EAAAA,S;AACAC,EAAAA,Q;AACAJ,EAAAA,I;AACAK,EAAAA,O;;;AAkCK,IAAMG,UAA8C,GAAG,SAAjDA,UAAiD,QAAmE;AAAA,MAAhEL,SAAgE,SAAhEA,SAAgE;AAAA,MAArDC,QAAqD,SAArDA,QAAqD;AAAA,yBAA3CJ,IAA2C;AAAA,MAA3CA,IAA2C,2BAApC,MAAoC;AAAA,4BAA5BK,OAA4B;AAAA,MAA5BA,OAA4B,8BAAlB,WAAkB;AAE/H,sBACE;AAAK,IAAA,SAAS,EAAEF,SAAhB;AAA2B,IAAA,KAAK,EAAE;AAAEG,MAAAA,KAAK,EAAEP,OAAO,CAACC,IAAD,CAAhB;AAAwBO,MAAAA,MAAM,EAAER,OAAO,CAACC,IAAD;AAAvC,KAAlC;AAAmF,IAAA,OAAO,EAAEK,OAA5F;AAAqG,IAAA,IAAI,EAAC,MAA1G;AAAiH,IAAA,KAAK,EAAC;AAAvH,KACGD,QADH,CADF;AAKD,CAPM;;;;AArCLD,EAAAA,S;AACAC,EAAAA,Q;AACAJ,EAAAA,I;AACAK,EAAAA,O","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":["getSize","size","indexOf","Container","styled","div","TooltipTrigger","IconComponent","svg","props","width","height","renderIcon","children","viewBox","tooltip","className","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"}