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

package/dist/esm/icons/index.js

@@ -1,5 +1,7 @@
 import _pt from "prop-types";
 import * as React from 'react';
+import styled from 'styled-components';
+import { Tooltip, TooltipTrigger } from '../Tooltips/TooltipStyles';
 import * as ContentIcons from './contenticons/ContentIcons';
 import * as SystemIcons from './systemicons/SystemIcons';
 
@@ -15,51 +17,80 @@ export const getSize = size => {
     return size;
   }
 };
-export const BaseIcon = ({
-  className,
-  children,
-  size = '16px',
-  viewBox = '0 0 25 25'
-}) => {
-  return /*#__PURE__*/React.createElement("svg", {
+const Container = styled.div`
+  position: relative;
+  ${TooltipTrigger}
+`;
+const IconComponent = styled.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,
-    style: {
-      width: getSize(size),
-      height: getSize(size)
-    },
+    width: width,
+    height: height,
+    viewBox: viewBox,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, children), /*#__PURE__*/React.createElement(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);
 };
+
+export const BaseIcon = ({
+  className,
+  children,
+  size = '16px',
+  viewBox = '0 0 25 25',
+  tooltip = ''
+}) => {
+  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);
+};
 BaseIcon.propTypes = {
   className: _pt.string,
   children: _pt.any,
   size: _pt.string,
-  viewBox: _pt.string
+  viewBox: _pt.string,
+  tooltip: _pt.string
 };
 export const 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: _pt.string,
   children: _pt.any,
   size: _pt.string,
-  viewBox: _pt.string
+  viewBox: _pt.string,
+  tooltip: _pt.string
+};
+export const ContentIcon = ({
+  className,
+  children,
+  size = '48px',
+  viewBox = '0 0 48 48',
+  tooltip = ''
+}) => {
+  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);
+};
+ContentIcon.propTypes = {
+  className: _pt.string,
+  children: _pt.any,
+  size: _pt.string,
+  viewBox: _pt.string,
+  tooltip: _pt.string
 };
 export { SystemIcons };
 export { ContentIcons };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/icons/index.tsx"],"names":["React","ContentIcons","SystemIcons","getSize","size","indexOf","BaseIcon","className","children","viewBox","width","height","SystemIcon"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAO,KAAKC,YAAZ,MAA8B,6BAA9B;AACA,OAAO,KAAKC,WAAZ,MAA6B,2BAA7B;;AAiBA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,OAAO,GAAIC,IAAD,IAAkB;AACvC,MAAI,OAAOA,IAAP,KAAgB,QAAhB,IAA4BA,IAAI,CAACC,OAAL,CAAa,IAAb,MAAuB,CAAC,CAAxD,EAA2D;AACzD,WAAQ,GAAED,IAAK,IAAf;AACD,GAFD,MAEO;AACL,WAAOA,IAAP;AACD;AACF,CANM;AAQP,OAAO,MAAME,QAA4C,GAAG,CAAC;AAAEC,EAAAA,SAAF;AAAaC,EAAAA,QAAb;AAAuBJ,EAAAA,IAAI,GAAG,MAA9B;AAAsCK,EAAAA,OAAO,GAAG;AAAhD,CAAD,KAAmE;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;;AAkCF,OAAO,MAAMG,UAA8C,GAAG,CAAC;AAAEL,EAAAA,SAAF;AAAaC,EAAAA,QAAb;AAAuBJ,EAAAA,IAAI,GAAG,MAA9B;AAAsCK,EAAAA,OAAO,GAAG;AAAhD,CAAD,KAAmE;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;;AA2CF,SAAQP,WAAR;AACA,SAAQD,YAAR","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":["React","styled","Tooltip","TooltipTrigger","ContentIcons","SystemIcons","getSize","size","indexOf","Container","div","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"}