@laerdal/life-react-components 3.0.1-dev.9 → 3.1.0

package/dist/esm/Button/DualFunctionButton.js

@@ -1,115 +0,0 @@
-import _pt from "prop-types";
-const _excluded = ["children", "variant", "type", "size", "width", "testId", "disabled", "id", "dropdownMenuValues", "setDropdownMenuValues", "dropdownCustomizationProps"],
-      _excluded2 = ["loading", "icon", "onClick"];
-
-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; }
-
-import * as React from 'react';
-import Button from './Button';
-import { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';
-import { Dropdown } from '../Dropdown/CommonStyling';
-import { Size } from '../types';
-import DropdownContent from '../Dropdown/DropdownContent';
-import styled from 'styled-components';
-const ButtonsContainer = styled.div`
-  display: flex;
-  align-items: center;
-
-  button:first-child {
-    margin-right: 2px;
-  }
-
-  div.button-content {
-    gap: 0px;
-    padding: ${props => props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px'};
-  }
-`;
-
-const DualFunctionButton = _ref => {
-  let {
-    children = 'Primary Button',
-    variant = 'primary',
-    type = 'button',
-    size = Size.Medium,
-    width = 'auto',
-    testId,
-    disabled,
-    id,
-    dropdownMenuValues,
-    setDropdownMenuValues,
-    dropdownCustomizationProps
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  // Let's filter out properties that we don't need to render.
-  const {
-    loading,
-    icon,
-    onClick
-  } = props,
-        renderProps = _objectWithoutProperties(props, _excluded2);
-
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [focused, setFocused] = React.useState(null);
-  const dropdownContainerRef = React.useRef(null);
-  const [selectedValues, setSelectedValues] = React.useState([]);
-  return /*#__PURE__*/React.createElement(ButtonsContainer, {
-    ref: dropdownContainerRef,
-    size: size
-  }, /*#__PURE__*/React.createElement(Dropdown, {
-    isButton: true,
-    locked: false,
-    disabled: false,
-    margin: ""
-  }, /*#__PURE__*/React.createElement(Button, _extends({}, renderProps, {
-    onClick: onClick,
-    disabled: disabled,
-    type: type,
-    loading: loading,
-    icon: icon,
-    size: size,
-    width: width,
-    variant: variant,
-    flatEdge: "right"
-  }), children), /*#__PURE__*/React.createElement(DropdownContent, {
-    customizationProps: dropdownCustomizationProps,
-    filter: "",
-    selectedValues: dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues,
-    setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
-    isButton: true,
-    setIsOpen: setIsOpen,
-    focused: focused,
-    setFocused: setFocused,
-    hideOnClickOutside: true,
-    size: size,
-    isOpen: isOpen,
-    id: id ?? 'dropdownId',
-    messageOnNoResults: "",
-    alignLeft: true
-  })), /*#__PURE__*/React.createElement(Button, _extends({
-    variant: variant
-  }, renderProps, {
-    disabled: disabled,
-    type: type,
-    size: size,
-    minWidth: 'unset',
-    onClick: () => setIsOpen(!isOpen),
-    icon: isOpen ? /*#__PURE__*/React.createElement(ArrowDropUp, {
-      size: "16px"
-    }) : /*#__PURE__*/React.createElement(ArrowDropDown, {
-      size: "16px"
-    }),
-    flatEdge: "left"
-  })));
-};
-
-DualFunctionButton.propTypes = {
-  dropdownMenuValues: _pt.arrayOf(_pt.string),
-  setDropdownMenuValues: _pt.func
-};
-export default DualFunctionButton;
-//# sourceMappingURL=DualFunctionButton.js.map

package/dist/esm/Button/DualFunctionButton.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Button/DualFunctionButton.tsx"],"names":["React","Button","ArrowDropDown","ArrowDropUp","Dropdown","Size","DropdownContent","styled","ButtonsContainer","div","props","size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","isOpen","setIsOpen","useState","focused","setFocused","dropdownContainerRef","useRef","selectedValues","setSelectedValues","itemsType"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport { LoadingIndicator } from '../LoadingIndicator';\r\nimport Button, { ButtonProps } from './Button'\r\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\r\nimport { Dropdown } from '../Dropdown/CommonStyling';\r\nimport { Size } from '../types';\r\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\r\nimport styled from 'styled-components';\r\n\r\nconst ButtonsContainer = styled.div<{ size?: Size }>`\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  button:first-child {\r\n    margin-right: 2px;\r\n  }\r\n\r\n  div.button-content {\r\n    gap: 0px;\r\n    padding: ${ props => props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px' };\r\n  }\r\n`;\r\n\r\nexport interface ButtonOption {\r\n  label: string;\r\n}\r\n\r\nexport interface DualButtonProps extends ButtonProps {\r\n  dropdownCustomizationProps: DropdownCustomizationProps;\r\n  dropdownMenuValues?: string[];\r\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\r\n}\r\n\r\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\r\n  children = 'Primary Button',\r\n  variant = 'primary',\r\n  type = 'button',\r\n  size = Size.Medium,\r\n  width = 'auto',\r\n  testId,\r\n  disabled,\r\n  id,\r\n  dropdownMenuValues,\r\n  setDropdownMenuValues,\r\n  dropdownCustomizationProps,\r\n  ...props\r\n}) => {\r\n  // Let's filter out properties that we don't need to render.\r\n  const { loading, icon, onClick, ...renderProps } = props;\r\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\r\n  const [focused, setFocused] = React.useState<number | null>(null);\r\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\r\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\r\n\r\n    return <ButtonsContainer ref={dropdownContainerRef} size={size}>\r\n          <Dropdown isButton={true} locked={false} disabled={false} margin=''>\r\n            <Button\r\n            {...renderProps}\r\n            onClick={onClick}\r\n            disabled={disabled}\r\n            type={type}\r\n            loading={loading}\r\n            icon={icon}\r\n            size={size}\r\n            width={width}\r\n            variant={variant}\r\n            flatEdge=\"right\">\r\n                {children}\r\n            </Button>\r\n              <DropdownContent\r\n                    customizationProps={dropdownCustomizationProps}\r\n                    filter=''\r\n                    selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : (dropdownMenuValues ?? selectedValues)}\r\n                    setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\r\n                    isButton={true}\r\n                    setIsOpen={setIsOpen}\r\n                    focused={focused}\r\n                    setFocused={setFocused}\r\n                    hideOnClickOutside={true}\r\n                    size={size}\r\n                    isOpen={isOpen}\r\n                    id={id ?? 'dropdownId'}\r\n                    messageOnNoResults=''\r\n                    alignLeft={true} />\r\n          </Dropdown>\r\n          <Button variant={variant}\r\n          {...renderProps}\r\n          disabled={disabled}\r\n          type={type}\r\n          size={size}\r\n          minWidth={'unset'}\r\n          onClick={() => setIsOpen(!isOpen)}\r\n          icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\"/>}\r\n          flatEdge=\"left\" />\r\n      </ButtonsContainer>;\r\n  };\r\n\r\n\r\nexport default DualFunctionButton;\r\n"],"file":"DualFunctionButton.js"}

package/dist/esm/Button/Iconbutton.js

@@ -1,310 +0,0 @@
-import _pt from "prop-types";
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { BREAKPOINTS, COLORS } from '../styles';
-
-const tabbedHereStyle = (variant, tabbedHereBackgroundColor) => {
-  switch (variant) {
-    case 'secondary':
-      return css`
-        div {
-          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;
-          box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
-        }
-        div svg path,
-        div svg {
-          fill: ${COLORS.neutral_600};
-        }
-      `;
-
-    case 'primary':
-    default:
-      return css`
-        div {
-          background-color: ${tabbedHereBackgroundColor || 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: ${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 = styled.button`
-  border-width: 0;
-  cursor: pointer;
-  height: 48px;
-  width: 48px;
-  background: transparent;
-
-  display: ${props => props.hideOnLowWidth ? 'none' : 'block'};
-  ${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 = styled(StyledIconButton)`
-  div {
-    background-color: ${props => props.useTransparentBackground ? 'transparent' : COLORS.primary_500};
-
-    svg {
-      fill: ${props => props.iconColor || COLORS.white};
-      path {
-        fill: ${props => props.iconColor || COLORS.white};
-      }
-    }
-  }
-  &:hover:not(:disabled) {
-    div {
-      background-color: ${COLORS.primary_700};
-    }
-    div svg path,
-    div svg {
-      fill: ${COLORS.white};
-    }
-  }
-  &:active:not(:disabled) {
-    div {
-      background: ${COLORS.primary_800};
-    }
-    div svg path,
-    div svg {
-      fill: ${COLORS.white};
-    }
-  }
-  &:disabled {
-    div {
-      background-color: ${COLORS.neutral_200};
-    }
-    svg {
-      path {
-        fill: ${COLORS.white};
-      }
-      fill: ${COLORS.white};
-    }
-  }
-  ${props => props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : ''};
-`;
-const StyledSecondaryIconButton = styled(StyledIconButton)`
-  div {
-    background-color: ${props => props.useTransparentBackground ? 'transparent' : COLORS.white};
-
-    svg {
-      fill: ${props => props.iconColor || COLORS.neutral_600};
-      path {
-        fill: ${props => props.iconColor || COLORS.neutral_600};
-      }
-    }
-  }
-  &:hover:not(:disabled) {
-    div {
-      background-color: ${COLORS.primary_20};
-    }
-    div svg path,
-    div svg {
-      fill: ${COLORS.primary_700};
-    }
-  }
-  &:active:not(:disabled) {
-    div {
-      background: ${COLORS.primary_100};
-    }
-    div svg path,
-    div svg {
-      fill: ${COLORS.primary_800};
-    }
-  }
-
-  &:disabled {
-    div {
-      background-color: ${props => props.useTransparentBackground ? 'transparent' : COLORS.white};
-    }
-    svg {
-      path {
-        fill: ${COLORS.neutral_300};
-      }
-      fill: ${COLORS.neutral_300};
-    }
-  }
-
-  ${props => props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : ''};
-`;
-;
-const IconButton = /*#__PURE__*/React.forwardRef(({
-  id,
-  variant,
-  shape,
-  action,
-  hideOnLowWidth,
-  isInMobileMenu,
-  children,
-  useTransparentBackground,
-  disabled,
-  iconColor,
-  unsetIconSize,
-  tabIndex,
-  flatEdge,
-  borderRadius,
-  onKeyPress,
-  tabbedHereBackgroundColor,
-  type,
-  hidden
-}, ref) => {
-  const supressFocusRef = React.useRef(null);
-  const [tabbedHere, setTabbedHere] = React.useState(false);
-
-  const isPressingEnter = e => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      e.stopPropagation();
-      return true;
-    }
-
-    return false;
-  };
-
-  React.useEffect(() => {
-    !!disabled && setTabbedHere(false);
-  }, [disabled]); // Let's render button
-
-  switch (variant) {
-    case 'secondary':
-      return /*#__PURE__*/React.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__*/React.createElement("div", null, children));
-
-    case 'primary':
-    default:
-      return /*#__PURE__*/React.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__*/React.createElement("div", null, children));
-  }
-});
-IconButton.propTypes = {
-  id: _pt.string,
-  variant: _pt.oneOf(['primary', 'secondary']),
-  shape: _pt.oneOf(['square', 'circular']),
-  action: _pt.func.isRequired,
-  hideOnLowWidth: _pt.bool,
-  isInMobileMenu: _pt.bool,
-  disabled: _pt.bool,
-  useTransparentBackground: _pt.bool,
-  iconColor: _pt.string,
-  unsetIconSize: _pt.bool,
-  tabIndex: _pt.number,
-  borderRadius: _pt.number,
-  onKeyPress: _pt.func,
-  tabbedHereBackgroundColor: _pt.string,
-  children: _pt.node,
-  hidden: _pt.bool
-};
-export default IconButton;
-//# sourceMappingURL=Iconbutton.js.map

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

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

package/dist/esm/Button/UIIconButton.js

@@ -1,134 +0,0 @@
-import _pt from "prop-types";
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS } from '../styles';
-const IconButton = styled.button`
-  background-color: ${props => props.useTransparentBackground ? 'transparent' : COLORS.white};
-  border-width: 0;
-  cursor: pointer;
-
-  height: 48px;
-  width: 48px;
-  padding: 8px;
-
-  display: ${props => props.hideOnLowWidth ? 'none' : 'block'};
-
-  div {
-    height: 32px;
-    width: 32px;
-    border-radius: 4px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    svg {
-      height: ${props => props.unsetIconSize ? 'unset' : '24px'};
-      width: ${props => props.unsetIconSize ? 'unset' : '24px'};
-      padding: 4px;
-      fill: ${props => props.iconColor || COLORS.neutral_600};
-
-      path {
-        fill: ${props => props.iconColor || COLORS.neutral_600};
-      }
-    }
-  }
-
-  &:only-child {
-    margin: 0;
-  }
-
-  &:disabled {
-    color: ${COLORS.neutral_300};
-    background-color: transparent;
-    cursor: not-allowed;
-
-    svg {
-      path {
-        fill: ${COLORS.neutral_300};
-      }
-
-      fill: ${COLORS.neutral_300};
-    }
-  }
-
-  &:hover:not(:disabled) {
-    div {
-      background-color: ${COLORS.primary_20};
-    }
-    div svg path,
-    div svg {
-      fill: ${COLORS.primary_700};
-    }
-  }
-
-  &:focus:not(:disabled) {
-    outline: none;
-
-    div {
-      box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
-      outline: none;
-    }
-    div svg path,
-    div svg {
-      fill: ${COLORS.neutral_600};
-    }
-  }
-
-  &:active:not(:disabled) {
-    div {
-      background: ${COLORS.primary_100};
-      box-shadow: none;
-    }
-    div svg path,
-    div svg {
-      fill: ${COLORS.primary_800};
-    }
-  }
-`;
-
-const UIIconButton = ({
-  action,
-  hideOnLowWidth,
-  isInMobileMenu,
-  children,
-  useTransparentBackground,
-  disabled,
-  iconColor,
-  unsetIconSize,
-  tabIndex
-}) => {
-  const isPressingEnter = e => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      e.stopPropagation();
-      return true;
-    }
-
-    return false;
-  };
-
-  return /*#__PURE__*/React.createElement(IconButton, {
-    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
-  }, /*#__PURE__*/React.createElement("div", null, children));
-};
-
-UIIconButton.propTypes = {
-  action: _pt.func.isRequired,
-  hideOnLowWidth: _pt.bool,
-  isInMobileMenu: _pt.bool,
-  disabled: _pt.bool,
-  useTransparentBackground: _pt.bool,
-  iconColor: _pt.string,
-  unsetIconSize: _pt.bool,
-  tabIndex: _pt.number
-};
-export default UIIconButton;
-//# sourceMappingURL=UIIconButton.js.map

package/dist/esm/Button/UIIconButton.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Button/UIIconButton.tsx"],"names":["React","styled","COLORS","IconButton","button","props","useTransparentBackground","white","hideOnLowWidth","unsetIconSize","iconColor","neutral_600","neutral_300","primary_20","primary_700","primary_500","primary_100","primary_800","UIIconButton","action","isInMobileMenu","children","disabled","tabIndex","isPressingEnter","e","key","preventDefault","stopPropagation","event"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { COLORS } from '../styles';\r\n\r\ninterface HeaderItemProps {\r\n  hideOnLowWidth: boolean;\r\n  inMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n}\r\n\r\nconst IconButton = styled.button<HeaderItemProps>`\r\n  background-color: ${props => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\r\n  border-width: 0;\r\n  cursor: pointer;\r\n\r\n  height: 48px;\r\n  width: 48px;\r\n  padding: 8px;\r\n\r\n  display: ${props => (props.hideOnLowWidth ? 'none' : 'block')};\r\n\r\n  div {\r\n    height: 32px;\r\n    width: 32px;\r\n    border-radius: 4px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n\r\n    svg {\r\n      height: ${props => (props.unsetIconSize ? 'unset' : '24px')};\r\n      width: ${props => (props.unsetIconSize ? 'unset' : '24px')};\r\n      padding: 4px;\r\n      fill: ${props => props.iconColor || COLORS.neutral_600};\r\n\r\n      path {\r\n        fill: ${props => props.iconColor || COLORS.neutral_600};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:only-child {\r\n    margin: 0;\r\n  }\r\n\r\n  &:disabled {\r\n    color: ${COLORS.neutral_300};\r\n    background-color: transparent;\r\n    cursor: not-allowed;\r\n\r\n    svg {\r\n      path {\r\n        fill: ${COLORS.neutral_300};\r\n      }\r\n\r\n      fill: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n\r\n  &:hover:not(:disabled) {\r\n    div {\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n    div svg path,\r\n    div svg {\r\n      fill: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &:focus:not(:disabled) {\r\n    outline: none;\r\n\r\n    div {\r\n      box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\r\n      outline: none;\r\n    }\r\n    div svg path,\r\n    div svg {\r\n      fill: ${COLORS.neutral_600};\r\n    }\r\n  }\r\n\r\n  &:active:not(:disabled) {\r\n    div {\r\n      background: ${COLORS.primary_100};\r\n      box-shadow: none;\r\n    }\r\n    div svg path,\r\n    div svg {\r\n      fill: ${COLORS.primary_800};\r\n    }\r\n  }\r\n`;\r\n\r\ntype Props = {\r\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  hideOnLowWidth?: boolean;\r\n  isInMobileMenu?: boolean;\r\n  disabled?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  tabIndex?: number;\r\n};\r\n\r\nconst UIIconButton: React.FunctionComponent<Props> = ({\r\n  action,\r\n  hideOnLowWidth,\r\n  isInMobileMenu,\r\n  children,\r\n  useTransparentBackground,\r\n  disabled,\r\n  iconColor,\r\n  unsetIconSize,\r\n  tabIndex,\r\n}): React.ReactElement<Props> => {\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  return (\r\n    <IconButton\r\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\r\n      onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\r\n      disabled={disabled}\r\n      hideOnLowWidth={hideOnLowWidth || false}\r\n      inMobileMenu={isInMobileMenu}\r\n      useTransparentBackground={useTransparentBackground}\r\n      iconColor={iconColor}\r\n      unsetIconSize={unsetIconSize}\r\n      tabIndex={tabIndex || 0}>\r\n      <div>{children}</div>\r\n    </IconButton>\r\n  );\r\n};\r\n\r\nexport default UIIconButton;\r\n"],"file":"UIIconButton.js"}

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

@@ -1,39 +0,0 @@
-import React from 'react';
-import { act, render } from '@testing-library/react';
-import { BackButton } from '../index';
-import { Size } from '../../types';
-import 'jest-styled-components';
-describe('<BackButton />', () => {
-  it('should render back button', function () {
-    const {
-      queryByText
-    } = render( /*#__PURE__*/React.createElement(BackButton, {
-      size: Size.Small
-    }, "Back Button"));
-    expect(queryByText('Back Button')).toBeDefined();
-  });
-  it('should call action on click', function () {
-    const clickMock = jest.fn(() => {});
-    const component = render( /*#__PURE__*/React.createElement(BackButton, {
-      size: Size.Small,
-      onClick: clickMock
-    }, "Back Button"));
-    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 = render( /*#__PURE__*/React.createElement(BackButton, {
-      size: Size.Small,
-      disabled: true,
-      onClick: clickMock
-    }, "Back Button"));
-    act(() => {
-      component.getByText('Back Button').click();
-    });
-    expect(clickMock).toBeCalledTimes(0);
-  });
-});
-//# sourceMappingURL=BackButton.test.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/Button/__tests__/BackButton.test.tsx"],"names":["React","act","render","BackButton","Size","describe","it","queryByText","Small","expect","toBeDefined","clickMock","jest","fn","component","getByText","click","toBeCalled","toBeCalledTimes"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,GAAR,EAAaC,MAAb,QAA0B,wBAA1B;AACA,SAAQC,UAAR,QAAyB,UAAzB;AACA,SAAQC,IAAR,QAAmB,aAAnB;AACA,OAAO,wBAAP;AAEAC,QAAQ,CAAC,gBAAD,EAAmB,MAAM;AAC/BC,EAAAA,EAAE,CAAC,2BAAD,EAA8B,YAAY;AAC1C,UAAM;AAACC,MAAAA;AAAD,QAAgBL,MAAM,eAAC,oBAAC,UAAD;AAAY,MAAA,IAAI,EAAEE,IAAI,CAACI;AAAvB,qBAAD,CAA5B;AACAC,IAAAA,MAAM,CAACF,WAAW,CAAC,aAAD,CAAZ,CAAN,CAAmCG,WAAnC;AACD,GAHC,CAAF;AAIAJ,EAAAA,EAAE,CAAC,6BAAD,EAAgC,YAAY;AAC5C,UAAMK,SAAS,GAAGC,IAAI,CAACC,EAAL,CAAQ,MAAM,CAAE,CAAhB,CAAlB;AACA,UAAMC,SAAS,GAAGZ,MAAM,eAAC,oBAAC,UAAD;AAAY,MAAA,IAAI,EAAEE,IAAI,CAACI,KAAvB;AAA8B,MAAA,OAAO,EAAEG;AAAvC,qBAAD,CAAxB;AACAV,IAAAA,GAAG,CAAC,MAAM;AACRa,MAAAA,SAAS,CAACC,SAAV,CAAoB,aAApB,EAAmCC,KAAnC;AACD,KAFE,CAAH;AAGAP,IAAAA,MAAM,CAACE,SAAD,CAAN,CAAkBM,UAAlB;AACD,GAPC,CAAF;AAQAX,EAAAA,EAAE,CAAC,+CAAD,EAAkD,YAAY;AAC9D,UAAMK,SAAS,GAAGC,IAAI,CAACC,EAAL,CAAQ,MAAM,CAAE,CAAhB,CAAlB;AACA,UAAMC,SAAS,GAAGZ,MAAM,eAAC,oBAAC,UAAD;AAAY,MAAA,IAAI,EAAEE,IAAI,CAACI,KAAvB;AAA8B,MAAA,QAAQ,EAAE,IAAxC;AAA8C,MAAA,OAAO,EAAEG;AAAvD,qBAAD,CAAxB;AACAV,IAAAA,GAAG,CAAC,MAAM;AACRa,MAAAA,SAAS,CAACC,SAAV,CAAoB,aAApB,EAAmCC,KAAnC;AACD,KAFE,CAAH;AAGAP,IAAAA,MAAM,CAACE,SAAD,CAAN,CAAkBO,eAAlB,CAAkC,CAAlC;AACD,GAPC,CAAF;AASD,CAtBO,CAAR","sourcesContent":["import React from 'react';\r\nimport {act, render} from '@testing-library/react';\r\nimport {BackButton} from '../index';\r\nimport {Size} from '../../types'\r\nimport 'jest-styled-components';\r\n\r\ndescribe('<BackButton />', () => {\r\n  it('should render back button', function () {\r\n    const {queryByText} = render(<BackButton size={Size.Small}>Back Button</BackButton>);\r\n    expect(queryByText('Back Button')).toBeDefined();\r\n  });\r\n  it('should call action on click', function () {\r\n    const clickMock = jest.fn(() => {});\r\n    const component = render(<BackButton size={Size.Small} onClick={clickMock}>Back Button</BackButton>);\r\n    act(() => {\r\n      component.getByText('Back Button').click();\r\n    });\r\n    expect(clickMock).toBeCalled();\r\n  });\r\n  it('should not call action on click when disabled', function () {\r\n    const clickMock = jest.fn(() => {});\r\n    const component = render(<BackButton size={Size.Small} disabled={true} onClick={clickMock}>Back Button</BackButton>);\r\n    act(() => {\r\n      component.getByText('Back Button').click();\r\n    });\r\n    expect(clickMock).toBeCalledTimes(0);\r\n  });\r\n\r\n});\r\n"],"file":"BackButton.test.js"}