@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.3

package/dist/umd/Button/Iconbutton.js

@@ -0,0 +1,340 @@
+(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 _react2 = _interopRequireDefault(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const tabbedHereStyle = (variant, tabbedHereBackgroundColor) => {
+    switch (variant) {
+      case 'secondary':
+        return _styledComponents.css`
+        div {
+          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;
+          box-shadow: 0px 0px 8px ${_styles.COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
+        }
+        div svg path,
+        div svg {
+          fill: ${_styles.COLORS.neutral_600};
+        }
+      `;
+
+      case 'primary':
+      default:
+        return _styledComponents.css`
+        div {
+          background-color: ${tabbedHereBackgroundColor || _styles.COLORS.primary_700} !important;
+          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
+        }
+        div svg path,
+        div svg {
+          fill: ${_styles.COLORS.white};
+        }
+      `;
+    }
+  };
+
+  const getBorderRadius = props => props.borderRadius ? `${props.borderRadius}px` : '4px';
+
+  const getBorderRadiusStyle = props => {
+    const radius = getBorderRadius(props);
+
+    switch (props.flatEdge) {
+      case 'left':
+        return `0px ${radius} ${radius} 0px`;
+
+      case 'right':
+        return `${radius} 0px 0px ${radius}`;
+
+      case 'none':
+      default:
+        return `${radius}`;
+    }
+  };
+
+  const StyledIconButton = _styledComponents2.default.button`
+  border-width: 0;
+  cursor: pointer;
+  height: 48px;
+  width: 48px;
+  background: transparent;
+
+  display: ${props => props.hideOnLowWidth ? 'none' : 'block'};
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    display: block;
+  }
+
+  border-radius: ${props => props.borderRadius ? `${props.borderRadius}px` : '4px'};
+  div {
+    height: 36px;
+    width: 36px;
+    border-radius: ${getBorderRadiusStyle};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    svg {
+      height: ${props => props.unsetIconSize ? 'unset' : '24px'};
+      width: ${props => props.unsetIconSize ? 'unset' : '24px'};
+      padding: 0;
+    }
+  }
+  &:only-child {
+    margin: 0;
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+  &:focus:not(:disabled) {
+    outline: none;
+    div {
+      outline: none;
+    }
+  }
+  &:active:not(:disabled) {
+    div {
+      box-shadow: none;
+    }
+  }
+`;
+  const StyledPrimaryIconButton = (0, _styledComponents2.default)(StyledIconButton)`
+  div {
+    background-color: ${props => props.useTransparentBackground ? 'transparent' : _styles.COLORS.primary_500};
+
+    svg {
+      fill: ${props => props.iconColor || _styles.COLORS.white};
+      path {
+        fill: ${props => props.iconColor || _styles.COLORS.white};
+      }
+    }
+  }
+  &:hover:not(:disabled) {
+    div {
+      background-color: ${_styles.COLORS.primary_700};
+    }
+    div svg path,
+    div svg {
+      fill: ${_styles.COLORS.white};
+    }
+  }
+  &:active:not(:disabled) {
+    div {
+      background: ${_styles.COLORS.primary_800};
+    }
+    div svg path,
+    div svg {
+      fill: ${_styles.COLORS.white};
+    }
+  }
+  &:disabled {
+    div {
+      background-color: ${_styles.COLORS.neutral_200};
+    }
+    svg {
+      path {
+        fill: ${_styles.COLORS.white};
+      }
+      fill: ${_styles.COLORS.white};
+    }
+  }
+  ${props => props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : ''};
+`;
+  const StyledSecondaryIconButton = (0, _styledComponents2.default)(StyledIconButton)`
+  div {
+    background-color: ${props => props.useTransparentBackground ? 'transparent' : _styles.COLORS.white};
+
+    svg {
+      fill: ${props => props.iconColor || _styles.COLORS.neutral_600};
+      path {
+        fill: ${props => props.iconColor || _styles.COLORS.neutral_600};
+      }
+    }
+  }
+  &:hover:not(:disabled) {
+    div {
+      background-color: ${_styles.COLORS.primary_20};
+    }
+    div svg path,
+    div svg {
+      fill: ${_styles.COLORS.primary_700};
+    }
+  }
+  &:active:not(:disabled) {
+    div {
+      background: ${_styles.COLORS.primary_100};
+    }
+    div svg path,
+    div svg {
+      fill: ${_styles.COLORS.primary_800};
+    }
+  }
+
+  &:disabled {
+    div {
+      background-color: ${props => props.useTransparentBackground ? 'transparent' : _styles.COLORS.white};
+    }
+    svg {
+      path {
+        fill: ${_styles.COLORS.neutral_300};
+      }
+      fill: ${_styles.COLORS.neutral_300};
+    }
+  }
+
+  ${props => props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : ''};
+`;
+
+  const IconButton = /*#__PURE__*/_react2.default.forwardRef(({
+    id,
+    variant,
+    shape,
+    action,
+    hideOnLowWidth,
+    isInMobileMenu,
+    children,
+    useTransparentBackground,
+    disabled,
+    iconColor,
+    unsetIconSize,
+    tabIndex,
+    flatEdge,
+    borderRadius,
+    onKeyPress,
+    tabbedHereBackgroundColor,
+    type,
+    hidden
+  }, ref) => {
+    const supressFocusRef = _react2.default.useRef(null);
+
+    const [tabbedHere, setTabbedHere] = _react2.default.useState(false);
+
+    const isPressingEnter = e => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        return true;
+      }
+
+      return false;
+    };
+
+    _react2.default.useEffect(() => {
+      !!disabled && setTabbedHere(false);
+    }, [disabled]); // Let's render button
+
+
+    switch (variant) {
+      case 'secondary':
+        return /*#__PURE__*/_react2.default.createElement(StyledSecondaryIconButton, {
+          id: id,
+          type: type ?? 'button',
+          "data-testid": id,
+          ref: ref,
+          onClick: event => action(event),
+          onKeyDown: e => isPressingEnter(e) ? action() : null,
+          disabled: disabled,
+          hideOnLowWidth: hideOnLowWidth || false,
+          inMobileMenu: isInMobileMenu,
+          useTransparentBackground: useTransparentBackground,
+          iconColor: iconColor,
+          unsetIconSize: unsetIconSize,
+          tabIndex: tabIndex || 0,
+          borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
+          onMouseDown: e => {
+            if (!disabled && !tabbedHere) supressFocusRef.current = true;
+          },
+          onFocus: e => {
+            if (!disabled) {
+              if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
+            }
+          },
+          onBlur: () => {
+            setTabbedHere(false);
+          },
+          tabbedHere: tabbedHere,
+          onKeyPress: onKeyPress,
+          hidden: hidden,
+          tabbedHereBackgroundColor: tabbedHereBackgroundColor
+        }, /*#__PURE__*/_react2.default.createElement("div", null, children));
+
+      case 'primary':
+      default:
+        return /*#__PURE__*/_react2.default.createElement(StyledPrimaryIconButton, {
+          id: id,
+          type: type ?? 'button',
+          "data-testid": id,
+          flatEdge: flatEdge,
+          ref: ref,
+          onClick: event => action(event),
+          onKeyDown: e => isPressingEnter(e) ? action() : null,
+          disabled: disabled,
+          hideOnLowWidth: hideOnLowWidth || false,
+          inMobileMenu: isInMobileMenu,
+          useTransparentBackground: useTransparentBackground,
+          iconColor: iconColor,
+          unsetIconSize: unsetIconSize,
+          tabIndex: tabIndex || 0,
+          borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
+          onMouseDown: e => {
+            if (!disabled && !tabbedHere) supressFocusRef.current = true;
+          },
+          onFocus: e => {
+            if (!disabled) {
+              if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
+            }
+          },
+          onBlur: () => {
+            setTabbedHere(false);
+          },
+          tabbedHere: tabbedHere,
+          onKeyPress: onKeyPress,
+          hidden: hidden,
+          tabbedHereBackgroundColor: tabbedHereBackgroundColor
+        }, /*#__PURE__*/_react2.default.createElement("div", null, children));
+    }
+  });
+
+  IconButton.propTypes = {
+    id: _propTypes2.default.string,
+    variant: _propTypes2.default.oneOf(['primary', 'secondary']),
+    shape: _propTypes2.default.oneOf(['square', 'circular']),
+    action: _propTypes2.default.func.isRequired,
+    hideOnLowWidth: _propTypes2.default.bool,
+    isInMobileMenu: _propTypes2.default.bool,
+    disabled: _propTypes2.default.bool,
+    useTransparentBackground: _propTypes2.default.bool,
+    iconColor: _propTypes2.default.string,
+    unsetIconSize: _propTypes2.default.bool,
+    tabIndex: _propTypes2.default.number,
+    borderRadius: _propTypes2.default.number,
+    onKeyPress: _propTypes2.default.func,
+    tabbedHereBackgroundColor: _propTypes2.default.string,
+    children: _propTypes2.default.node,
+    hidden: _propTypes2.default.bool
+  };
+  exports.default = IconButton;
+});
+//# sourceMappingURL=Iconbutton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","css","tabbedHereBackgroundColor","COLORS","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","StyledIconButton","styled","button","BREAKPOINTS","MEDIUM","StyledPrimaryIconButton","primary_800","neutral_200","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","id","variant","shape","action","hideOnLowWidth","isInMobileMenu","disabled","useTransparentBackground","iconColor","unsetIconSize","tabIndex","onKeyPress","children","hidden","IconButton","supressFocusRef","React","isPressingEnter","e","setTabbedHere","type","event"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  tabbedHere?: boolean;\n  tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n          box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.neutral_600};\n        }\n      `;\n    case 'primary':\n    default:\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.white};\n        }\n      `;\n  }\n};\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px'); \n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n      \n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none;\n    }\n  }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nexport interface IconButtonProps {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabbedHereBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n  hidden\n}: IconButtonProps, ref) => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  React.useEffect(() => {\n    !!disabled && setTabbedHere(false)\n  }, [disabled]);\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}

package/dist/umd/Button/__tests__/BackButton.test.js

@@ -0,0 +1,58 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["react", "@testing-library/react", "../index", "../../types", "jest-styled-components"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("react"), require("@testing-library/react"), require("../index"), require("../../types"), require("jest-styled-components"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global.react, global.react, global.index, global.types, global.jestStyledComponents);
+    global.undefined = mod.exports;
+  }
+})(this, function (_react, _react3, _index, _types) {
+  "use strict";
+
+  var _react2 = _interopRequireDefault(_react);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  describe('<BackButton />', () => {
+    it('should render back button', function () {
+      const {
+        queryByText
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.BackButton, {
+        size: _types.Size.Small
+      }, "Back Button"));
+      expect(queryByText('Back Button')).toBeDefined();
+    });
+    it('should call action on click', function () {
+      const clickMock = jest.fn(() => {});
+      const component = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.BackButton, {
+        size: _types.Size.Small,
+        onClick: clickMock
+      }, "Back Button"));
+      (0, _react3.act)(() => {
+        component.getByText('Back Button').click();
+      });
+      expect(clickMock).toBeCalled();
+    });
+    it('should not call action on click when disabled', function () {
+      const clickMock = jest.fn(() => {});
+      const component = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.BackButton, {
+        size: _types.Size.Small,
+        disabled: true,
+        onClick: clickMock
+      }, "Back Button"));
+      (0, _react3.act)(() => {
+        component.getByText('Back Button').click();
+      });
+      expect(clickMock).toBeCalledTimes(0);
+    });
+  });
+});
+//# sourceMappingURL=BackButton.test.js.map

package/dist/umd/Button/__tests__/BackButton.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Button/__tests__/BackButton.test.tsx"],"names":["describe","it","queryByText","render","Size","Small","expect","clickMock","jest","component","act"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAMAA,EAAAA,QAAQ,CAAA,gBAAA,EAAmB,MAAM;AAC/BC,IAAAA,EAAE,CAAA,2BAAA,EAA8B,YAAY;AAC1C,YAAM;AAACC,QAAAA;AAAD,UAAgBC,qBAAM,aAAC,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAY,QAAA,IAAI,EAAEC,YAAKC;AAAvB,OAAA,EAA7B,aAA6B,CAAPF,CAAtB;AACAG,MAAAA,MAAM,CAACJ,WAAW,CAAlBI,aAAkB,CAAZ,CAANA,CAAAA,WAAAA;AAFFL,KAAE,CAAFA;AAIAA,IAAAA,EAAE,CAAA,6BAAA,EAAgC,YAAY;AAC5C,YAAMM,SAAS,GAAGC,IAAI,CAAJA,EAAAA,CAAQ,MAAM,CAAhC,CAAkBA,CAAlB;AACA,YAAMC,SAAS,GAAGN,qBAAM,aAAC,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAY,QAAA,IAAI,EAAEC,YAAlB,KAAA;AAA8B,QAAA,OAAO,EAAEG;AAAvC,OAAA,EAAzB,aAAyB,CAAPJ,CAAlB;AACAO,uBAAI,MAAM;AACRD,QAAAA,SAAS,CAATA,SAAAA,CAAAA,aAAAA,EAAAA,KAAAA;AADFC,OAAAA;AAGAJ,MAAAA,MAAM,CAANA,SAAM,CAANA,CAAAA,UAAAA;AANFL,KAAE,CAAFA;AAQAA,IAAAA,EAAE,CAAA,+CAAA,EAAkD,YAAY;AAC9D,YAAMM,SAAS,GAAGC,IAAI,CAAJA,EAAAA,CAAQ,MAAM,CAAhC,CAAkBA,CAAlB;AACA,YAAMC,SAAS,GAAGN,qBAAM,aAAC,gBAAA,aAAA,CAAA,iBAAA,EAAA;AAAY,QAAA,IAAI,EAAEC,YAAlB,KAAA;AAA8B,QAAA,QAAQ,EAAtC,IAAA;AAA8C,QAAA,OAAO,EAAEG;AAAvD,OAAA,EAAzB,aAAyB,CAAPJ,CAAlB;AACAO,uBAAI,MAAM;AACRD,QAAAA,SAAS,CAATA,SAAAA,CAAAA,aAAAA,EAAAA,KAAAA;AADFC,OAAAA;AAGAJ,MAAAA,MAAM,CAANA,SAAM,CAANA,CAAAA,eAAAA,CAAAA,CAAAA;AANFL,KAAE,CAAFA;AAbFD,GAAQ,CAARA","sourcesContent":["import React from 'react';\nimport {act, render} from '@testing-library/react';\nimport {BackButton} from '../index';\nimport {Size} from '../../types'\nimport 'jest-styled-components';\n\ndescribe('<BackButton />', () => {\n  it('should render back button', function () {\n    const {queryByText} = render(<BackButton size={Size.Small}>Back Button</BackButton>);\n    expect(queryByText('Back Button')).toBeDefined();\n  });\n  it('should call action on click', function () {\n    const clickMock = jest.fn(() => {});\n    const component = render(<BackButton size={Size.Small} onClick={clickMock}>Back Button</BackButton>);\n    act(() => {\n      component.getByText('Back Button').click();\n    });\n    expect(clickMock).toBeCalled();\n  });\n  it('should not call action on click when disabled', function () {\n    const clickMock = jest.fn(() => {});\n    const component = render(<BackButton size={Size.Small} disabled={true} onClick={clickMock}>Back Button</BackButton>);\n    act(() => {\n      component.getByText('Back Button').click();\n    });\n    expect(clickMock).toBeCalledTimes(0);\n  });\n\n});\n"],"file":"BackButton.test.js"}

package/dist/umd/Button/__tests__/Button.test.js

@@ -0,0 +1,67 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["react", "@testing-library/react", "../index", "../..", "jest-styled-components"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("react"), require("@testing-library/react"), require("../index"), require("../.."), require("jest-styled-components"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global.react, global.react, global.index, global._, global.jestStyledComponents);
+    global.undefined = mod.exports;
+  }
+})(this, function (_react, _react3, _index, _) {
+  "use strict";
+
+  var _react2 = _interopRequireDefault(_react);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  describe('<Button />', () => {
+    it('Renders primary button', async () => {
+      const {
+        queryByText,
+        getByTestId
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.Button, {
+        variant: "primary",
+        testId: "TestButton",
+        size: _.Size.Large
+      }, "TestButton"));
+      expect(queryByText('TestButton')).toBeDefined();
+      /*expect(getByTestId('TestButton')).toHaveStyleRule('background-color', COLORS.primary);
+      expect(getByTestId('TestButton')).toHaveStyleRule('cursor', 'pointer');
+      expect(getByTestId('TestButton')).toHaveStyleRule('color', 'white');*/
+    });
+    it('Renders secondary button', async () => {
+      const {
+        queryByText,
+        getByTestId
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.Button, {
+        variant: "secondary",
+        testId: "TestButton"
+      }, "TestButton"));
+      expect(queryByText('TestButton')).toBeDefined();
+      /*expect(getByTestId('TestButton')).toHaveStyleRule('color', COLORS.primary);
+      expect(getByTestId('TestButton')).toHaveStyleRule('border-color', COLORS.primary);
+      expect(getByTestId('TestButton')).toHaveStyleRule('background-color', 'white');*/
+    });
+    it('Renders tertiary button', async () => {
+      const {
+        queryByText,
+        getByTestId
+      } = (0, _react3.render)( /*#__PURE__*/_react2.default.createElement(_index.Button, {
+        variant: "tertiary",
+        testId: "TestButton"
+      }, "TestButton"));
+      expect(queryByText('TestButton')).toBeDefined();
+      /*expect(getByTestId('TestButton')).toHaveStyleRule('background-color', 'white');
+      expect(getByTestId('TestButton')).toHaveStyleRule('border-color', COLORS.neutral_100);
+      expect(getByTestId('TestButton')).toHaveStyleRule('color', COLORS.primary);*/
+    });
+  });
+});
+//# sourceMappingURL=Button.test.js.map

package/dist/umd/Button/__tests__/Button.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Button/__tests__/Button.test.tsx"],"names":["describe","it","getByTestId","render","Size","Large","expect","queryByText"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOAA,EAAAA,QAAQ,CAAA,YAAA,EAAe,MAAM;AAC3BC,IAAAA,EAAE,CAAA,wBAAA,EAA2B,YAAY;AACvC,YAAM;AAAA,QAAA,WAAA;AAAeC,QAAAA;AAAf,UAA+BC,qBAAM,aACzC,gBAAA,aAAA,CAAA,aAAA,EAAA;AAAQ,QAAA,OAAO,EAAf,SAAA;AAA0B,QAAA,MAAM,EAAhC,YAAA;AAA8C,QAAA,IAAI,EAAEC,OAAKC;AAAzD,OAAA,EADF,YACE,CADmCF,CAArC;AAKAG,MAAAA,MAAM,CAACC,WAAW,CAAlBD,YAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACA;AACJ;AACA;AATEL,KAAE,CAAFA;AAWAA,IAAAA,EAAE,CAAA,0BAAA,EAA6B,YAAY;AACzC,YAAM;AAAA,QAAA,WAAA;AAAeC,QAAAA;AAAf,UAA+BC,qBAAM,aACzC,gBAAA,aAAA,CAAA,aAAA,EAAA;AAAQ,QAAA,OAAO,EAAf,WAAA;AAA4B,QAAA,MAAM,EAAC;AAAnC,OAAA,EADF,YACE,CADmCA,CAArC;AAKAG,MAAAA,MAAM,CAACC,WAAW,CAAlBD,YAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACA;AACJ;AACA;AATEL,KAAE,CAAFA;AAWAA,IAAAA,EAAE,CAAA,yBAAA,EAA4B,YAAY;AACxC,YAAM;AAAA,QAAA,WAAA;AAAeC,QAAAA;AAAf,UAA+BC,qBAAM,aACzC,gBAAA,aAAA,CAAA,aAAA,EAAA;AAAQ,QAAA,OAAO,EAAf,UAAA;AAA2B,QAAA,MAAM,EAAC;AAAlC,OAAA,EADF,YACE,CADmCA,CAArC;AAKAG,MAAAA,MAAM,CAACC,WAAW,CAAlBD,YAAkB,CAAZ,CAANA,CAAAA,WAAAA;AACA;AACJ;AACA;AATEL,KAAE,CAAFA;AAvBFD,GAAQ,CAARA","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport { Button } from '../index';\nimport 'jest-styled-components';\nimport { COLORS } from '../../styles';\nimport { Size } from '../..';\n\ndescribe('<Button />', () => {\n  it('Renders primary button', async () => {\n    const { queryByText, getByTestId } = render(\n      <Button variant=\"primary\" testId=\"TestButton\" size={Size.Large}>\n        TestButton\n      </Button>,\n    );\n    expect(queryByText('TestButton')).toBeDefined();\n    /*expect(getByTestId('TestButton')).toHaveStyleRule('background-color', COLORS.primary);\n    expect(getByTestId('TestButton')).toHaveStyleRule('cursor', 'pointer');\n    expect(getByTestId('TestButton')).toHaveStyleRule('color', 'white');*/\n  });\n  it('Renders secondary button', async () => {\n    const { queryByText, getByTestId } = render(\n      <Button variant=\"secondary\" testId=\"TestButton\">\n        TestButton\n      </Button>,\n    );\n    expect(queryByText('TestButton')).toBeDefined();\n    /*expect(getByTestId('TestButton')).toHaveStyleRule('color', COLORS.primary);\n    expect(getByTestId('TestButton')).toHaveStyleRule('border-color', COLORS.primary);\n    expect(getByTestId('TestButton')).toHaveStyleRule('background-color', 'white');*/\n  });\n  it('Renders tertiary button', async () => {\n    const { queryByText, getByTestId } = render(\n      <Button variant=\"tertiary\" testId=\"TestButton\">\n        TestButton\n      </Button>,\n    );\n    expect(queryByText('TestButton')).toBeDefined();\n    /*expect(getByTestId('TestButton')).toHaveStyleRule('background-color', 'white');\n    expect(getByTestId('TestButton')).toHaveStyleRule('border-color', COLORS.neutral_100);\n    expect(getByTestId('TestButton')).toHaveStyleRule('color', COLORS.primary);*/\n  });\n});\n"],"file":"Button.test.js"}

package/dist/umd/Button/index.js

@@ -0,0 +1,44 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "./Iconbutton", "./Button", "./BackButton"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("./Iconbutton"), require("./Button"), require("./BackButton"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.Iconbutton, global.Button, global.BackButton);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _Iconbutton, _Button, _BackButton) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  Object.defineProperty(exports, "IconButton", {
+    enumerable: true,
+    get: function () {
+      return _interopRequireDefault(_Iconbutton).default;
+    }
+  });
+  Object.defineProperty(exports, "Button", {
+    enumerable: true,
+    get: function () {
+      return _interopRequireDefault(_Button).default;
+    }
+  });
+  Object.defineProperty(exports, "BackButton", {
+    enumerable: true,
+    get: function () {
+      return _interopRequireDefault(_BackButton).default;
+    }
+  });
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Button/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;iDAAA,O;;;;;;6CACA,O;;;;;;iDACA,O","sourcesContent":["export { default as IconButton } from './Iconbutton';\nexport { default as Button } from './Button';\nexport { default as BackButton } from './BackButton';\n"],"file":"index.js"}