@laerdal/life-react-components 1.0.1-dev.21.full → 1.0.1-dev.22.full

package/dist/esm/Button/Iconbutton.js

@@ -178,7 +178,8 @@ const IconButton = ({
   tabIndex,
   borderRadius,
   onKeyPress,
-  tabbedHereBackgroundColor
+  tabbedHereBackgroundColor,
+  type
 }) => {
   const supressFocusRef = React.useRef(null);
   const [tabbedHere, setTabbedHere] = React.useState(false);
@@ -198,6 +199,7 @@ const IconButton = ({
     case 'secondary':
       return /*#__PURE__*/React.createElement(StyledSecondaryIconButton, {
         id: id,
+        type: type ?? 'button',
         "data-testid": id,
         onClick: event => action(event),
         onKeyDown: e => isPressingEnter(e) ? action() : null,
@@ -227,6 +229,7 @@ const IconButton = ({
     default:
       return /*#__PURE__*/React.createElement(StyledPrimaryIconButton, {
         id: id,
+        type: type ?? 'button',
         "data-testid": id,
         onClick: event => action(event),
         onKeyDown: e => isPressingEnter(e) ? action() : null,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["React","styled","css","BREAKPOINTS","COLORS","tabbedHereStyle","variant","tabbedHereBackgroundColor","primary_500","neutral_600","primary_700","white","StyledIconButton","button","props","hideOnLowWidth","MEDIUM","borderRadius","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","supressFocusRef","useRef","setTabbedHere","useState","isPressingEnter","e","key","preventDefault","stopPropagation","event","current"],"mappings":"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","sourcesContent":["import * as 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  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 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: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\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\ntype Props = {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\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};\n\nconst IconButton: React.FunctionComponent<Props> = ({\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  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n}): React.ReactElement<Props> => {\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  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          data-testid={id}\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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          data-testid={id}\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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n};\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
+{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["React","styled","css","BREAKPOINTS","COLORS","tabbedHereStyle","variant","tabbedHereBackgroundColor","primary_500","neutral_600","primary_700","white","StyledIconButton","button","props","hideOnLowWidth","MEDIUM","borderRadius","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","supressFocusRef","useRef","setTabbedHere","useState","isPressingEnter","e","key","preventDefault","stopPropagation","event","current"],"mappings":"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","sourcesContent":["import * as 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  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 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: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\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\ntype Props = {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\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};\n\nconst IconButton: React.FunctionComponent<Props> = ({\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  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n}): React.ReactElement<Props> => {\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  // 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          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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\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          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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n};\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}

package/dist/esm/Modals/ModalDialog.js

@@ -131,7 +131,7 @@ export const ModalDialog = ({
     }, /*#__PURE__*/React.createElement(IconButton, {
       variant: "secondary",
       shape: "circular",
-      action: onClick,
+      action: () => onClick(),
       borderRadius: 48
     }, /*#__PURE__*/React.createElement(Close, {
       size: "24px",
@@ -172,9 +172,7 @@ export const ModalDialog = ({
   }, /*#__PURE__*/React.createElement("img", {
     src: topImage,
     alt: "Modal top"
-  }), ModalBackButton(), /*#__PURE__*/React.createElement(ModalCloseButton, {
-    onClick: closeAction
-  })), /*#__PURE__*/React.createElement(ModalTitleSection, null, !topImage && ModalBackButton(), title && ModalTitle(title, size), tooltip && /*#__PURE__*/React.createElement("div", {
+  }), ModalBackButton(), ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(ModalTitleSection, null, !topImage && ModalBackButton(), title && ModalTitle(title, size), tooltip && /*#__PURE__*/React.createElement("div", {
     id: "tooltip"
   }, /*#__PURE__*/React.createElement("div", {
     onMouseOver: () => setTooltipOpen(true),
@@ -182,9 +180,7 @@ export const ModalDialog = ({
   }, /*#__PURE__*/React.createElement(Help, {
     size: "24px",
     color: COLORS.neutral_600
-  })), tooltipOpen && /*#__PURE__*/React.createElement("span", null, tooltip)), !topImage && /*#__PURE__*/React.createElement(ModalCloseButton, {
-    onClick: closeAction
-  })), /*#__PURE__*/React.createElement(ModalBody, {
+  })), tooltipOpen && /*#__PURE__*/React.createElement("span", null, tooltip)), !topImage && ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(ModalBody, {
     size: size
   }, body), /*#__PURE__*/React.createElement(ModalFooter, {
     size: size

package/dist/esm/Modals/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","ModalBody","ModalFooter","ModalFooterButtons","ModalTitleSection","StyledModalHeader","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","body","buttons","backButton","closeAction","submitAction","tooltip","tooltipOpen","setTooltipOpen","useState","getMinWidth","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalCloseButton","onClick","black","ModalBackButton","neutral_600","map","b","action","variant","text"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ButtonProps } from '../Button/Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport ModalContainer from './ModalContainer';\nimport { BackButtonWrapper, CloseButtonWrapper, Column, ModalBody, ModalFooter, ModalFooterButtons, ModalTitle, ModalTitleSection, StyledModalHeader } from './ModalStyles';\n\ninterface ButtonAction extends Pick<ButtonProps, 'variant'> {\n  action: () => void;\n  text: string;\n}\n\ninterface NewModalProps {\n  size?: 'small' | 'medium' | 'large';\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  body?: any;\n  buttons?: ButtonAction[];\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: () => void;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  body,\n  buttons,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case 'small':\n        return '320px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '480px';\n      default:\n        return '400px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case 'small':\n        return '512px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '588px';\n      default:\n        return '664px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case 'small':\n        return 160;\n      case 'medium':\n        return 200;\n      case 'large':\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case 'small':\n        return '16px';\n      case 'medium':\n        return '24px';\n      case 'large':\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case 'small':\n        return '16px 16px 8px';\n      case 'medium':\n        return '24px 24px 16px';\n      case 'large':\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: 'small' | 'medium' | 'large') => {\n    switch (size) {\n      case 'small':\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case 'medium':\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case 'large':\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={onClick} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              <ModalCloseButton onClick={closeAction} />\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && ModalTitle(title, size)}\n            {tooltip && (\n              <div id=\"tooltip\">\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && <ModalCloseButton onClick={closeAction} />}\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{body}</ModalBody>\n\n          <ModalFooter size={size}>\n            <ModalFooterButtons size={size}>\n              {buttons?.map((b) => (\n                <Button size={size === 'large' ? 'big' : size === 'medium' ? 'normal' : size} onClick={b.action} variant={b.variant}>\n                  {b.text}\n                </Button>\n              ))}\n            </ModalFooterButtons>\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
+{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","ModalBody","ModalFooter","ModalFooterButtons","ModalTitleSection","StyledModalHeader","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","body","buttons","backButton","closeAction","submitAction","tooltip","tooltipOpen","setTooltipOpen","useState","getMinWidth","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalCloseButton","onClick","black","ModalBackButton","neutral_600","map","b","action","variant","text"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ButtonProps } from '../Button/Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport ModalContainer from './ModalContainer';\nimport { BackButtonWrapper, CloseButtonWrapper, Column, ModalBody, ModalFooter, ModalFooterButtons, ModalTitle, ModalTitleSection, StyledModalHeader } from './ModalStyles';\n\ninterface ButtonAction extends Pick<ButtonProps, 'variant'> {\n  action: () => void;\n  text: string;\n}\n\ninterface NewModalProps {\n  size?: 'small' | 'medium' | 'large';\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  body?: any;\n  buttons?: ButtonAction[];\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  body,\n  buttons,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case 'small':\n        return '320px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '480px';\n      default:\n        return '400px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case 'small':\n        return '512px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '588px';\n      default:\n        return '664px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case 'small':\n        return 160;\n      case 'medium':\n        return 200;\n      case 'large':\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case 'small':\n        return '16px';\n      case 'medium':\n        return '24px';\n      case 'large':\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case 'small':\n        return '16px 16px 8px';\n      case 'medium':\n        return '24px 24px 16px';\n      case 'large':\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: 'small' | 'medium' | 'large') => {\n    switch (size) {\n      case 'small':\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case 'medium':\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case 'large':\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              {ModalCloseButton(closeAction)}\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && ModalTitle(title, size)}\n            {tooltip && (\n              <div id=\"tooltip\">\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && ModalCloseButton(closeAction)}\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{body}</ModalBody>\n\n          <ModalFooter size={size}>\n            <ModalFooterButtons size={size}>\n              {buttons?.map((b) => (\n                <Button size={size === 'large' ? 'big' : size === 'medium' ? 'normal' : size} onClick={b.action} variant={b.variant}>\n                  {b.text}\n                </Button>\n              ))}\n            </ModalFooterButtons>\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}

package/dist/js/Button/Iconbutton.d.ts

@@ -14,6 +14,7 @@ declare type Props = {
     borderRadius?: number;
     onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;
     tabbedHereBackgroundColor?: string;
+    type?: 'submit' | 'reset' | 'button' | undefined;
 };
 declare const IconButton: React.FunctionComponent<Props>;
 export default IconButton;

package/dist/js/Button/Iconbutton.js

@@ -96,7 +96,8 @@ var IconButton = function IconButton(_ref) {
       tabIndex = _ref.tabIndex,
       borderRadius = _ref.borderRadius,
       onKeyPress = _ref.onKeyPress,
-      tabbedHereBackgroundColor = _ref.tabbedHereBackgroundColor;
+      tabbedHereBackgroundColor = _ref.tabbedHereBackgroundColor,
+      type = _ref.type;
   var supressFocusRef = React.useRef(null);
 
   var _React$useState = React.useState(false),
@@ -119,6 +120,7 @@ var IconButton = function IconButton(_ref) {
     case 'secondary':
       return /*#__PURE__*/React.createElement(StyledSecondaryIconButton, {
         id: id,
+        type: type !== null && type !== void 0 ? type : 'button',
         "data-testid": id,
         onClick: function onClick(event) {
           return action(event);
@@ -154,6 +156,7 @@ var IconButton = function IconButton(_ref) {
     default:
       return /*#__PURE__*/React.createElement(StyledPrimaryIconButton, {
         id: id,
+        type: type !== null && type !== void 0 ? type : 'button',
         "data-testid": id,
         onClick: function onClick(event) {
           return action(event);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","variant","tabbedHereBackgroundColor","css","COLORS","primary_500","neutral_600","primary_700","white","StyledIconButton","styled","button","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","borderRadius","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","supressFocusRef","React","useRef","useState","setTabbedHere","isPressingEnter","e","key","preventDefault","stopPropagation","event","current"],"mappings":"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","sourcesContent":["import * as 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  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 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: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\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\ntype Props = {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\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};\n\nconst IconButton: React.FunctionComponent<Props> = ({\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  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n}): React.ReactElement<Props> => {\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  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          data-testid={id}\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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          data-testid={id}\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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n};\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
+{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","variant","tabbedHereBackgroundColor","css","COLORS","primary_500","neutral_600","primary_700","white","StyledIconButton","styled","button","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","borderRadius","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","iconColor","primary_800","neutral_200","tabbedHere","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","IconButton","id","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","supressFocusRef","React","useRef","useState","setTabbedHere","isPressingEnter","e","key","preventDefault","stopPropagation","event","current"],"mappings":"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","sourcesContent":["import * as 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  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 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: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\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\ntype Props = {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\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};\n\nconst IconButton: React.FunctionComponent<Props> = ({\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  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n}): React.ReactElement<Props> => {\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  // 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          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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\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          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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n};\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}

package/dist/js/Modals/ModalDialog.d.ts

@@ -15,7 +15,7 @@ interface NewModalProps {
     tooltip?: string;
     backButton?: () => void;
     closeAction: () => void;
-    submitAction: () => void;
+    submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;
 }
 export declare const ModalDialog: React.FunctionComponent<NewModalProps>;
 export default ModalDialog;

package/dist/js/Modals/ModalDialog.js

@@ -168,7 +168,9 @@ var ModalDialog = function ModalDialog(_ref) {
     }, /*#__PURE__*/React.createElement(_Button.IconButton, {
       variant: "secondary",
       shape: "circular",
-      action: onClick,
+      action: function action() {
+        return onClick();
+      },
       borderRadius: 48
     }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
       size: "24px",
@@ -211,9 +213,7 @@ var ModalDialog = function ModalDialog(_ref) {
   }, /*#__PURE__*/React.createElement("img", {
     src: topImage,
     alt: "Modal top"
-  }), ModalBackButton(), /*#__PURE__*/React.createElement(ModalCloseButton, {
-    onClick: closeAction
-  })), /*#__PURE__*/React.createElement(_ModalStyles.ModalTitleSection, null, !topImage && ModalBackButton(), title && ModalTitle(title, size), tooltip && /*#__PURE__*/React.createElement("div", {
+  }), ModalBackButton(), ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(_ModalStyles.ModalTitleSection, null, !topImage && ModalBackButton(), title && ModalTitle(title, size), tooltip && /*#__PURE__*/React.createElement("div", {
     id: "tooltip"
   }, /*#__PURE__*/React.createElement("div", {
     onMouseOver: function onMouseOver() {
@@ -225,9 +225,7 @@ var ModalDialog = function ModalDialog(_ref) {
   }, /*#__PURE__*/React.createElement(_SystemIcons.Help, {
     size: "24px",
     color: _styles.COLORS.neutral_600
-  })), tooltipOpen && /*#__PURE__*/React.createElement("span", null, tooltip)), !topImage && /*#__PURE__*/React.createElement(ModalCloseButton, {
-    onClick: closeAction
-  })), /*#__PURE__*/React.createElement(_ModalStyles.ModalBody, {
+  })), tooltipOpen && /*#__PURE__*/React.createElement("span", null, tooltip)), !topImage && ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(_ModalStyles.ModalBody, {
     size: size
   }, body), /*#__PURE__*/React.createElement(_ModalStyles.ModalFooter, {
     size: size

package/dist/js/Modals/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","body","buttons","backButton","closeAction","submitAction","tooltip","React","useState","tooltipOpen","setTooltipOpen","getMinWidth","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalCloseButton","onClick","COLORS","black","ModalBackButton","neutral_600","map","b","action","variant","text"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAqBO,IAAMA,WAAmD,GAAG,SAAtDA,WAAsD,OAY7D;AAAA,MAXJC,IAWI,QAXJA,IAWI;AAAA,MAVJC,WAUI,QAVJA,WAUI;AAAA,MATJC,uBASI,QATJA,uBASI;AAAA,MARJC,KAQI,QARJA,KAQI;AAAA,MAPJC,QAOI,QAPJA,QAOI;AAAA,MANJC,IAMI,QANJA,IAMI;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,MAHJC,WAGI,QAHJA,WAGI;AAAA,MAFJC,YAEI,QAFJA,YAEI;AAAA,MADJC,OACI,QADJA,OACI;;AACJ,wBAAsCC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,YAAQf,IAAR;AACE,WAAK,OAAL;AACE,eAAO,OAAP;;AACF,WAAK,QAAL;AACE,eAAO,OAAP;;AACF,WAAK,OAAL;AACE,eAAO,OAAP;;AACF;AACE,eAAO,OAAP;AARJ;AAUD,GAXD;;AAaA,MAAMgB,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,YAAQhB,IAAR;AACE,WAAK,OAAL;AACE,eAAO,OAAP;;AACF,WAAK,QAAL;AACE,eAAO,OAAP;;AACF,WAAK,OAAL;AACE,eAAO,OAAP;;AACF;AACE,eAAO,OAAP;AARJ;AAUD,GAXD;;AAaA,MAAMiB,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,YAAQjB,IAAR;AACE,WAAK,OAAL;AACE,eAAO,GAAP;;AACF,WAAK,QAAL;AACE,eAAO,GAAP;;AACF,WAAK,OAAL;AACE,eAAO,GAAP;;AACF;AACE,eAAO,GAAP;AARJ;AAUD,GAXD;;AAaA,MAAMkB,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,YAAQlB,IAAR;AACE,WAAK,OAAL;AACE,eAAO,MAAP;;AACF,WAAK,QAAL;AACE,eAAO,MAAP;;AACF,WAAK,OAAL;AACE,eAAO,MAAP;;AACF;AACE,eAAO,MAAP;AARJ;AAUD,GAXD;;AAaA,MAAMmB,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,YAAQnB,IAAR;AACE,WAAK,OAAL;AACE,eAAO,eAAP;;AACF,WAAK,QAAL;AACE,eAAO,gBAAP;;AACF,WAAK,OAAL;AACE,eAAO,MAAP;;AACF;AACE,eAAO,gBAAP;AARJ;AAUD,GAXD;;AAaA,MAAMoB,UAAU,GAAG,SAAbA,UAAa,CAACjB,KAAD,EAAgBH,IAAhB,EAAwD;AACzE,YAAQA,IAAR;AACE,WAAK,OAAL;AACE,4BAAO,oBAAC,kBAAD;AAAY,UAAA,SAAS,EAAEqB,2BAAmBC;AAA1C,WAAiDnB,KAAjD,CAAP;;AACF,WAAK,QAAL;AACE,4BAAO,oBAAC,kBAAD;AAAY,UAAA,SAAS,EAAEkB,2BAAmBC;AAA1C,WAAiDnB,KAAjD,CAAP;;AACF,WAAK,OAAL;AACE,4BAAO,oBAAC,mBAAD;AAAa,UAAA,SAAS,EAAEkB,2BAAmBC;AAA3C,WAAkDnB,KAAlD,CAAP;;AACF;AACE,4BAAO,oBAAC,kBAAD;AAAY,UAAA,SAAS,EAAEkB,2BAAmBC;AAA1C,WAAiDnB,KAAjD,CAAP;AARJ;AAUD,GAXD;;AAaA,MAAMoB,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAAkB;AACzC,wBACE,oBAAC,+BAAD;AAAoB,MAAA,QAAQ,EAAE,CAAC,CAACpB,QAAhC;AAA0C,MAAA,IAAI,EAAEJ;AAAhD,oBACE,oBAAC,kBAAD;AAAY,MAAA,OAAO,EAAC,WAApB;AAAgC,MAAA,KAAK,EAAC,UAAtC;AAAiD,MAAA,MAAM,EAAEwB,OAAzD;AAAkE,MAAA,YAAY,EAAE;AAAhF,oBACE,oBAAC,kBAAD;AAAO,MAAA,IAAI,EAAC,MAAZ;AAAmB,MAAA,KAAK,EAAEC,eAAOC;AAAjC,MADF,CADF,CADF;AAOD,GARD;;AAUA,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,QAAIpB,UAAJ,EAAgB;AACd,0BACE,oBAAC,8BAAD;AAAmB,QAAA,QAAQ,EAAE,CAAC,CAACH,QAA/B;AAAyC,QAAA,IAAI,EAAEJ;AAA/C,sBACE,oBAAC,kBAAD;AAAY,QAAA,OAAO,EAAC,WAApB;AAAgC,QAAA,KAAK,EAAC,UAAtC;AAAiD,QAAA,MAAM,EAAE;AAAA,iBAAMO,UAAU,EAAhB;AAAA,SAAzD;AAA6E,QAAA,YAAY,EAAE;AAA3F,sBACE,oBAAC,0BAAD;AAAe,QAAA,IAAI,EAAC,MAApB;AAA2B,QAAA,KAAK,EAAEkB,eAAOC;AAAzC,QADF,CADF,CADF;AAOD;AACF,GAVD;;AAYA,sBACE,oBAAC,uBAAD;AAAgB,IAAA,SAAS,EAAEzB,WAA3B;AAAwC,IAAA,UAAU,EAAEC,uBAApD;AAA6E,IAAA,QAAQ,EAAEa,WAAW,EAAlG;AAAsG,IAAA,QAAQ,EAAEC,WAAW,EAA3H;AAA+H,IAAA,WAAW,EAAC,MAA3I;AAAkJ,IAAA,OAAO,EAAEG,UAAU;AAArK,kBACE,oBAAC,mBAAD,qBACE;AAAM,IAAA,QAAQ,EAAEV;AAAhB,KACGL,QAAQ,iBACP,oBAAC,8BAAD;AAAmB,IAAA,IAAI,EAAEJ,IAAzB;AAA+B,IAAA,MAAM,EAAEiB,cAAc,EAArD;AAAyD,IAAA,YAAY,EAAEC,eAAe;AAAtF,kBACE;AAAK,IAAA,GAAG,EAAEd,QAAV;AAAoB,IAAA,GAAG,EAAC;AAAxB,IADF,EAEGuB,eAAe,EAFlB,eAGE,oBAAC,gBAAD;AAAkB,IAAA,OAAO,EAAEnB;AAA3B,IAHF,CAFJ,eAQE,oBAAC,8BAAD,QACG,CAACJ,QAAD,IAAauB,eAAe,EAD/B,EAEGxB,KAAK,IAAIiB,UAAU,CAACjB,KAAD,EAAQH,IAAR,CAFtB,EAGGU,OAAO,iBACN;AAAK,IAAA,EAAE,EAAC;AAAR,kBACE;AAAK,IAAA,WAAW,EAAE;AAAA,aAAMI,cAAc,CAAC,IAAD,CAApB;AAAA,KAAlB;AAA8C,IAAA,UAAU,EAAE;AAAA,aAAMA,cAAc,CAAC,KAAD,CAApB;AAAA;AAA1D,kBACE,oBAAC,iBAAD;AAAM,IAAA,IAAI,EAAC,MAAX;AAAkB,IAAA,KAAK,EAAEW,eAAOG;AAAhC,IADF,CADF,EAIGf,WAAW,iBAAI,kCAAOH,OAAP,CAJlB,CAJJ,EAWG,CAACN,QAAD,iBAAa,oBAAC,gBAAD;AAAkB,IAAA,OAAO,EAAEI;AAA3B,IAXhB,CARF,eAsBE,oBAAC,sBAAD;AAAW,IAAA,IAAI,EAAER;AAAjB,KAAwBK,IAAxB,CAtBF,eAwBE,oBAAC,wBAAD;AAAa,IAAA,IAAI,EAAEL;AAAnB,kBACE,oBAAC,+BAAD;AAAoB,IAAA,IAAI,EAAEA;AAA1B,KACGM,OADH,aACGA,OADH,uBACGA,OAAO,CAAEuB,GAAT,CAAa,UAACC,CAAD;AAAA,wBACZ,oBAAC,cAAD;AAAQ,MAAA,IAAI,EAAE9B,IAAI,KAAK,OAAT,GAAmB,KAAnB,GAA2BA,IAAI,KAAK,QAAT,GAAoB,QAApB,GAA+BA,IAAxE;AAA8E,MAAA,OAAO,EAAE8B,CAAC,CAACC,MAAzF;AAAiG,MAAA,OAAO,EAAED,CAAC,CAACE;AAA5G,OACGF,CAAC,CAACG,IADL,CADY;AAAA,GAAb,CADH,CADF,CAxBF,CADF,CADF,CADF;AAwCD,CA3JM;;;;AAbLjC,EAAAA,I,4BAAO,O,EAAU,Q,EAAW,O;AAC5BC,EAAAA,W;AACAC,EAAAA,uB;AACAC,EAAAA,K;AACAC,EAAAA,Q;AACAC,EAAAA,I;AACAC,EAAAA,O;AAXAyB,IAAAA,M;AACAE,IAAAA,I;;AAWAvB,EAAAA,O;AACAH,EAAAA,U;AACAC,EAAAA,W;AACAC,EAAAA,Y;;eAgKaV,W","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ButtonProps } from '../Button/Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport ModalContainer from './ModalContainer';\nimport { BackButtonWrapper, CloseButtonWrapper, Column, ModalBody, ModalFooter, ModalFooterButtons, ModalTitle, ModalTitleSection, StyledModalHeader } from './ModalStyles';\n\ninterface ButtonAction extends Pick<ButtonProps, 'variant'> {\n  action: () => void;\n  text: string;\n}\n\ninterface NewModalProps {\n  size?: 'small' | 'medium' | 'large';\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  body?: any;\n  buttons?: ButtonAction[];\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: () => void;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  body,\n  buttons,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case 'small':\n        return '320px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '480px';\n      default:\n        return '400px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case 'small':\n        return '512px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '588px';\n      default:\n        return '664px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case 'small':\n        return 160;\n      case 'medium':\n        return 200;\n      case 'large':\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case 'small':\n        return '16px';\n      case 'medium':\n        return '24px';\n      case 'large':\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case 'small':\n        return '16px 16px 8px';\n      case 'medium':\n        return '24px 24px 16px';\n      case 'large':\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: 'small' | 'medium' | 'large') => {\n    switch (size) {\n      case 'small':\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case 'medium':\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case 'large':\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={onClick} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              <ModalCloseButton onClick={closeAction} />\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && ModalTitle(title, size)}\n            {tooltip && (\n              <div id=\"tooltip\">\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && <ModalCloseButton onClick={closeAction} />}\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{body}</ModalBody>\n\n          <ModalFooter size={size}>\n            <ModalFooterButtons size={size}>\n              {buttons?.map((b) => (\n                <Button size={size === 'large' ? 'big' : size === 'medium' ? 'normal' : size} onClick={b.action} variant={b.variant}>\n                  {b.text}\n                </Button>\n              ))}\n            </ModalFooterButtons>\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
+{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","body","buttons","backButton","closeAction","submitAction","tooltip","React","useState","tooltipOpen","setTooltipOpen","getMinWidth","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalCloseButton","onClick","COLORS","black","ModalBackButton","neutral_600","map","b","action","variant","text"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ButtonProps } from '../Button/Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport ModalContainer from './ModalContainer';\nimport { BackButtonWrapper, CloseButtonWrapper, Column, ModalBody, ModalFooter, ModalFooterButtons, ModalTitle, ModalTitleSection, StyledModalHeader } from './ModalStyles';\n\ninterface ButtonAction extends Pick<ButtonProps, 'variant'> {\n  action: () => void;\n  text: string;\n}\n\ninterface NewModalProps {\n  size?: 'small' | 'medium' | 'large';\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  body?: any;\n  buttons?: ButtonAction[];\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  body,\n  buttons,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case 'small':\n        return '320px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '480px';\n      default:\n        return '400px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case 'small':\n        return '512px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '588px';\n      default:\n        return '664px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case 'small':\n        return 160;\n      case 'medium':\n        return 200;\n      case 'large':\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case 'small':\n        return '16px';\n      case 'medium':\n        return '24px';\n      case 'large':\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case 'small':\n        return '16px 16px 8px';\n      case 'medium':\n        return '24px 24px 16px';\n      case 'large':\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: 'small' | 'medium' | 'large') => {\n    switch (size) {\n      case 'small':\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case 'medium':\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case 'large':\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              {ModalCloseButton(closeAction)}\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && ModalTitle(title, size)}\n            {tooltip && (\n              <div id=\"tooltip\">\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && ModalCloseButton(closeAction)}\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{body}</ModalBody>\n\n          <ModalFooter size={size}>\n            <ModalFooterButtons size={size}>\n              {buttons?.map((b) => (\n                <Button size={size === 'large' ? 'big' : size === 'medium' ? 'normal' : size} onClick={b.action} variant={b.variant}>\n                  {b.text}\n                </Button>\n              ))}\n            </ModalFooterButtons>\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}

package/dist/umd/Button/Iconbutton.js

@@ -254,7 +254,8 @@
     tabIndex,
     borderRadius,
     onKeyPress,
-    tabbedHereBackgroundColor
+    tabbedHereBackgroundColor,
+    type
   }) => {
     const supressFocusRef = React.useRef(null);
     const [tabbedHere, setTabbedHere] = React.useState(false);
@@ -274,6 +275,7 @@
       case 'secondary':
         return /*#__PURE__*/React.createElement(StyledSecondaryIconButton, {
           id: id,
+          type: type ?? 'button',
           "data-testid": id,
           onClick: event => action(event),
           onKeyDown: e => isPressingEnter(e) ? action() : null,
@@ -303,6 +305,7 @@
       default:
         return /*#__PURE__*/React.createElement(StyledPrimaryIconButton, {
           id: id,
+          type: type ?? 'button',
           "data-testid": id,
           onClick: event => action(event),
           onKeyDown: e => isPressingEnter(e) ? action() : null,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","css","tabbedHereBackgroundColor","COLORS","primary_500","neutral_600","primary_700","white","StyledIconButton","styled","button","props","BREAKPOINTS","MEDIUM","borderRadius","StyledPrimaryIconButton","primary_800","neutral_200","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","id","variant","shape","action","hideOnLowWidth","isInMobileMenu","disabled","useTransparentBackground","iconColor","unsetIconSize","tabIndex","onKeyPress","IconButton","supressFocusRef","React","isPressingEnter","e","event","setTabbedHere"],"mappings":"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","sourcesContent":["import * as 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  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 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: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\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\ntype Props = {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\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};\n\nconst IconButton: React.FunctionComponent<Props> = ({\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  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n}): React.ReactElement<Props> => {\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  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          data-testid={id}\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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          data-testid={id}\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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n};\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
+{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","css","tabbedHereBackgroundColor","COLORS","primary_500","neutral_600","primary_700","white","StyledIconButton","styled","button","props","BREAKPOINTS","MEDIUM","borderRadius","StyledPrimaryIconButton","primary_800","neutral_200","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","id","variant","shape","action","hideOnLowWidth","isInMobileMenu","disabled","useTransparentBackground","iconColor","unsetIconSize","tabIndex","onKeyPress","IconButton","type","supressFocusRef","React","isPressingEnter","e","event","setTabbedHere"],"mappings":"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","sourcesContent":["import * as 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  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 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: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\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\ntype Props = {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\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};\n\nconst IconButton: React.FunctionComponent<Props> = ({\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  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n}): React.ReactElement<Props> => {\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  // 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          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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\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          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={() => setTabbedHere(false)}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n};\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}

package/dist/umd/Modals/ModalDialog.js

@@ -206,7 +206,7 @@
       }, /*#__PURE__*/React.createElement(_Button.IconButton, {
         variant: "secondary",
         shape: "circular",
-        action: onClick,
+        action: () => onClick(),
         borderRadius: 48
       }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
         size: "24px",
@@ -247,9 +247,7 @@
     }, /*#__PURE__*/React.createElement("img", {
       src: topImage,
       alt: "Modal top"
-    }), ModalBackButton(), /*#__PURE__*/React.createElement(ModalCloseButton, {
-      onClick: closeAction
-    })), /*#__PURE__*/React.createElement(_ModalStyles.ModalTitleSection, null, !topImage && ModalBackButton(), title && ModalTitle(title, size), tooltip && /*#__PURE__*/React.createElement("div", {
+    }), ModalBackButton(), ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(_ModalStyles.ModalTitleSection, null, !topImage && ModalBackButton(), title && ModalTitle(title, size), tooltip && /*#__PURE__*/React.createElement("div", {
       id: "tooltip"
     }, /*#__PURE__*/React.createElement("div", {
       onMouseOver: () => setTooltipOpen(true),
@@ -257,9 +255,7 @@
     }, /*#__PURE__*/React.createElement(_SystemIcons.Help, {
       size: "24px",
       color: _styles.COLORS.neutral_600
-    })), tooltipOpen && /*#__PURE__*/React.createElement("span", null, tooltip)), !topImage && /*#__PURE__*/React.createElement(ModalCloseButton, {
-      onClick: closeAction
-    })), /*#__PURE__*/React.createElement(_ModalStyles.ModalBody, {
+    })), tooltipOpen && /*#__PURE__*/React.createElement("span", null, tooltip)), !topImage && ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(_ModalStyles.ModalBody, {
       size: size
     }, body), /*#__PURE__*/React.createElement(_ModalStyles.ModalFooter, {
       size: size

package/dist/umd/Modals/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["action","text","size","isModalOpen","closeModalAndClearInput","title","topImage","body","buttons","tooltip","backButton","closeAction","submitAction","ModalDialog","React","getMinWidth","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalCloseButton","onClick","COLORS","black","ModalBackButton","setTooltipOpen","neutral_600","tooltipOpen","b","variant"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ButtonProps } from '../Button/Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport ModalContainer from './ModalContainer';\nimport { BackButtonWrapper, CloseButtonWrapper, Column, ModalBody, ModalFooter, ModalFooterButtons, ModalTitle, ModalTitleSection, StyledModalHeader } from './ModalStyles';\n\ninterface ButtonAction extends Pick<ButtonProps, 'variant'> {\n  action: () => void;\n  text: string;\n}\n\ninterface NewModalProps {\n  size?: 'small' | 'medium' | 'large';\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  body?: any;\n  buttons?: ButtonAction[];\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: () => void;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  body,\n  buttons,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case 'small':\n        return '320px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '480px';\n      default:\n        return '400px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case 'small':\n        return '512px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '588px';\n      default:\n        return '664px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case 'small':\n        return 160;\n      case 'medium':\n        return 200;\n      case 'large':\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case 'small':\n        return '16px';\n      case 'medium':\n        return '24px';\n      case 'large':\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case 'small':\n        return '16px 16px 8px';\n      case 'medium':\n        return '24px 24px 16px';\n      case 'large':\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: 'small' | 'medium' | 'large') => {\n    switch (size) {\n      case 'small':\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case 'medium':\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case 'large':\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={onClick} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              <ModalCloseButton onClick={closeAction} />\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && ModalTitle(title, size)}\n            {tooltip && (\n              <div id=\"tooltip\">\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && <ModalCloseButton onClick={closeAction} />}\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{body}</ModalBody>\n\n          <ModalFooter size={size}>\n            <ModalFooterButtons size={size}>\n              {buttons?.map((b) => (\n                <Button size={size === 'large' ? 'big' : size === 'medium' ? 'normal' : size} onClick={b.action} variant={b.variant}>\n                  {b.text}\n                </Button>\n              ))}\n            </ModalFooterButtons>\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
+{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["action","text","size","isModalOpen","closeModalAndClearInput","title","topImage","body","buttons","tooltip","backButton","closeAction","submitAction","ModalDialog","React","getMinWidth","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalCloseButton","onClick","COLORS","black","ModalBackButton","setTooltipOpen","neutral_600","tooltipOpen","b","variant"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ButtonProps } from '../Button/Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport ModalContainer from './ModalContainer';\nimport { BackButtonWrapper, CloseButtonWrapper, Column, ModalBody, ModalFooter, ModalFooterButtons, ModalTitle, ModalTitleSection, StyledModalHeader } from './ModalStyles';\n\ninterface ButtonAction extends Pick<ButtonProps, 'variant'> {\n  action: () => void;\n  text: string;\n}\n\ninterface NewModalProps {\n  size?: 'small' | 'medium' | 'large';\n  isModalOpen: boolean;\n  closeModalAndClearInput: any;\n  title?: string;\n  topImage?: any;\n  body?: any;\n  buttons?: ButtonAction[];\n  tooltip?: string;\n  backButton?: () => void;\n  closeAction: () => void;\n  submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n  size,\n  isModalOpen,\n  closeModalAndClearInput,\n  title,\n  topImage,\n  body,\n  buttons,\n  backButton,\n  closeAction,\n  submitAction,\n  tooltip,\n}) => {\n  const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\n\n  const getMinWidth = () => {\n    switch (size) {\n      case 'small':\n        return '320px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '480px';\n      default:\n        return '400px';\n    }\n  };\n\n  const getMaxWidth = () => {\n    switch (size) {\n      case 'small':\n        return '512px';\n      case 'medium':\n        return '400px';\n      case 'large':\n        return '588px';\n      default:\n        return '664px';\n    }\n  };\n\n  const getImageHeight = () => {\n    switch (size) {\n      case 'small':\n        return 160;\n      case 'medium':\n        return 200;\n      case 'large':\n        return 240;\n      default:\n        return 200;\n    }\n  };\n\n  const getMarginBottom = () => {\n    switch (size) {\n      case 'small':\n        return '16px';\n      case 'medium':\n        return '24px';\n      case 'large':\n        return '32px';\n      default:\n        return '24px';\n    }\n  };\n\n  const getPadding = () => {\n    switch (size) {\n      case 'small':\n        return '16px 16px 8px';\n      case 'medium':\n        return '24px 24px 16px';\n      case 'large':\n        return '32px';\n      default:\n        return '24px 24px 16px';\n    }\n  };\n\n  const ModalTitle = (title: string, size?: 'small' | 'medium' | 'large') => {\n    switch (size) {\n      case 'small':\n        return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n      case 'medium':\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n      case 'large':\n        return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n      default:\n        return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n    }\n  };\n\n  const ModalCloseButton = (onClick: any) => {\n    return (\n      <CloseButtonWrapper hasImage={!!topImage} size={size}>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n          <Close size=\"24px\" color={COLORS.black} />\n        </IconButton>\n      </CloseButtonWrapper>\n    );\n  };\n\n  const ModalBackButton = () => {\n    if (backButton) {\n      return (\n        <BackButtonWrapper hasImage={!!topImage} size={size}>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n            <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n          </IconButton>\n        </BackButtonWrapper>\n      );\n    }\n  };\n\n  return (\n    <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n      <Column>\n        <form onSubmit={submitAction}>\n          {topImage && (\n            <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n              <img src={topImage} alt=\"Modal top\" />\n              {ModalBackButton()}\n              {ModalCloseButton(closeAction)}\n            </StyledModalHeader>\n          )}\n          <ModalTitleSection>\n            {!topImage && ModalBackButton()}\n            {title && ModalTitle(title, size)}\n            {tooltip && (\n              <div id=\"tooltip\">\n                <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n                  <Help size=\"24px\" color={COLORS.neutral_600} />\n                </div>\n                {tooltipOpen && <span>{tooltip}</span>}\n              </div>\n            )}\n            {!topImage && ModalCloseButton(closeAction)}\n          </ModalTitleSection>\n\n          <ModalBody size={size}>{body}</ModalBody>\n\n          <ModalFooter size={size}>\n            <ModalFooterButtons size={size}>\n              {buttons?.map((b) => (\n                <Button size={size === 'large' ? 'big' : size === 'medium' ? 'normal' : size} onClick={b.action} variant={b.variant}>\n                  {b.text}\n                </Button>\n              ))}\n            </ModalFooterButtons>\n          </ModalFooter>\n        </form>\n      </Column>\n    </ModalContainer>\n  );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.0.1-dev.21.full",
+  "version": "1.0.1-dev.22.full",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [