@laerdal/life-react-components 1.9.4-dev.7 → 1.9.4-dev.8.full

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/Button/Button.cjs +3 -3
  2. package/dist/Button/Button.cjs.map +1 -1
  3. package/dist/Button/Button.js +3 -3
  4. package/dist/Button/Button.js.map +1 -1
  5. package/dist/Modals/ModalDialog.cjs +1 -0
  6. package/dist/Modals/ModalDialog.cjs.map +1 -1
  7. package/dist/Modals/ModalDialog.js +1 -0
  8. package/dist/Modals/ModalDialog.js.map +1 -1
  9. package/package.json +1 -1
package/dist/Button/Button.cjs CHANGED
@@ -60,7 +60,7 @@ var getBorderRadius = function getBorderRadius(flatEdge, radius) {
60
60
  }
61
61
  };
62
62
 
63
- var Primary = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n position: relative;\n box-sizing: border-box;\n min-height: ", ";\n &.loading-state {\n cursor: wait;\n }\n div.button-content {\n ", ";\n\n background-color: ", ";\n border-radius: ", ";\n border-width: 2px;\n border-style: solid;\n border-color: ", ";\n\n width: ", ";\n position: relative;\n\n min-height: ", ";\n min-width: ", ";\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n // paddings have -2px for border\n padding: ", ";\n\n span.loading {\n opacity: 0;\n }\n .icon {\n margin: ", ";\n width: ", ";\n height: ", ";\n svg {\n width: ", " !important;\n height: ", " !important;\n }\n }\n\n .extramargin {\n margin-right: 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ", ";\n width: ", ";\n path {\n fill: ", ";\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n\n &:focus,\n &.focus-state {\n ", "\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n pointer-events: none;\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n }\n"])), function (props) {
63
+ var Primary = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n position: relative;\n box-sizing: border-box;\n min-height: ", ";\n &.loading-state {\n cursor: wait;\n }\n div.button-content {\n ", ";\n\n background-color: ", ";\n border-radius: ", ";\n border-width: 2px;\n border-style: solid;\n border-color: ", ";\n\n width: ", ";\n position: relative;\n\n min-height: ", ";\n min-width: ", ";\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n padding: ", ";\n\n span.loading {\n opacity: 0;\n }\n\n .icon {\n margin: ", ";\n width: ", ";\n height: ", ";\n svg {\n width: ", " !important;\n height: ", " !important;\n }\n }\n\n .label {\n margin: 0 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ", ";\n width: ", ";\n path {\n fill: ", ";\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n\n &:focus,\n &.focus-state {\n ", "\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n pointer-events: none;\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n }\n"])), function (props) {
64
64
  return props.size === _types.Size.Large ? '56px' : '48px';
65
65
  }, function (props) {
66
66
  return props.size === _types.Size.Large ? (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : props.size === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white);
@@ -77,9 +77,9 @@ var Primary = _styledComponents.default.button(_templateObject || (_templateObje
77
77
  }, function (props) {
78
78
  return props.minWidth;
79
79
  }, function (props) {
80
- return props.size === _types.Size.Large ? '14px 18px' : props.size === _types.Size.Small ? '4px 10px' : '6px 14px';
80
+ return props.size === _types.Size.Large ? '14px 16px' : props.size === _types.Size.Small ? '6px 8px' : '8px 12px';
81
81
  }, function (props) {
82
- return props.size === _types.Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : props.size === _types.Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px';
82
+ return props.size === _types.Size.Medium ? props.iconOnly ? '-2px -8px' : '' : props.size === _types.Size.Small ? props.iconOnly ? '-2px -6px' : '' : '-2px -8px';
83
83
  }, function (props) {
84
84
  return props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px';
85
85
  }, function (props) {
package/dist/Button/Button.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Button/Button.tsx"],"names":["getBorderRadius","flatEdge","radius","Primary","styled","button","props","size","Size","Large","ComponentTextStyle","Bold","colorTheme","COLORS","primary_800","white","Small","accent1","primary","width","minWidth","Medium","iconOnly","accent1_700","primary_100","primary_700","primary_600","accent1_800","primary_200","invertFocus","undefined","invertedFocusStyles","focusStyles","neutral_100","neutral_300","Secondary","primary_300","Tertiary","primary_500","accent1_20","primary_20","accent1_100","Positive","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","React","forwardRef","ref","children","variant","type","testId","disabled","icon","loading","renderProps","renderContent","ButtonStyled","className","defaultOnMouseDownHandler","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {COLORS, focusStyles, invertedFocusStyles} from '../styles';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n switch(flatEdge)\n {\n case 'left':\n return `0px ${radius}px ${radius}px 0px`;\n \n case 'right':\n return `${radius}px 0px 0px ${radius}px`;\n\n case 'none':\n default:\n return `${radius}px`;\n }\n}\n\nconst Primary = styled.button<ButtonProps>`\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n position: relative;\n box-sizing: border-box;\n min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n &.loading-state {\n cursor: wait;\n }\n div.button-content {\n ${(props) =>\n props.size === Size.Large\n ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : props.size === Size.Small\n ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n border-width: 2px;\n border-style: solid;\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n width: ${(props) => props.width};\n position: relative;\n\n min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n min-width: ${props => props.minWidth};\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n // paddings have -2px for border\n padding: ${(props) => (props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px')};\n\n span.loading {\n opacity: 0;\n }\n .icon {\n margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px' ))};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n svg {\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n }\n }\n\n .extramargin {\n margin-right: 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n path {\n fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n }\n\n &:focus,\n &.focus-state {\n ${props => props.invertFocus || (props.invertFocus === undefined && props.colorTheme === 'dark') ? invertedFocusStyles : focusStyles}\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n pointer-events: none;\n background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n background-color: transparent;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: transparent;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ${COLORS.neutral_300};\n border-color: transparent !important;\n }\n`;\n\nconst Positive = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.correct_500};\n background-color: ${COLORS.correct_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.correct_800};\n background-color: ${COLORS.correct_800};\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.critical_500};\n background-color: ${COLORS.critical_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.critical_800};\n background-color: ${COLORS.critical_800};\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n role?: 'button' | string;\n title?: string;\n size?: Size;\n colorTheme?: 'teal' | 'dark';\n invertFocus?: boolean;\n width?: 'auto' | string;\n loading?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n minWidth?: string;\n iconOnly?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>( ({\n children = '',\n variant = 'primary',\n type = 'button',\n size = Size.Medium,\n width = 'auto',\n minWidth = '64px',\n testId,\n disabled,\n flatEdge,\n icon,\n ...props\n}, ref) => {\n // Let's filter out properties that we don't need to render.\n const { loading, ...renderProps } = props;\n\n const renderContent = () => (\n <>\n {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n {loading && <LoadingIndicator/>}\n </>\n );\n\n let ButtonStyled = Primary;\n switch(variant)\n {\n case 'secondary':\n ButtonStyled = Secondary;\n break;\n case 'tertiary':\n ButtonStyled = Tertiary;\n break;\n case 'positive':\n ButtonStyled = Positive;\n break;\n case 'critical':\n ButtonStyled = Critical;\n break;\n }\n\n return (\n <ButtonStyled\n {...renderProps}\n ref={ref}\n disabled={disabled}\n iconOnly={!children}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={defaultOnMouseDownHandler}>\n <div className=\"button-content\">{renderContent()}</div>\n </ButtonStyled>\n );\n});\n\nexport default Button;\n"],"file":"Button.cjs"}
1
+ {"version":3,"sources":["../../src/Button/Button.tsx"],"names":["getBorderRadius","flatEdge","radius","Primary","styled","button","props","size","Size","Large","ComponentTextStyle","Bold","colorTheme","COLORS","primary_800","white","Small","accent1","primary","width","minWidth","Medium","iconOnly","accent1_700","primary_100","primary_700","primary_600","accent1_800","primary_200","invertFocus","undefined","invertedFocusStyles","focusStyles","neutral_100","neutral_300","Secondary","primary_300","Tertiary","primary_500","accent1_20","primary_20","accent1_100","Positive","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","React","forwardRef","ref","children","variant","type","testId","disabled","icon","loading","renderProps","renderContent","ButtonStyled","className","defaultOnMouseDownHandler","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {COLORS, focusStyles, invertedFocusStyles} from '../styles';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n switch(flatEdge)\n {\n case 'left':\n return `0px ${radius}px ${radius}px 0px`;\n \n case 'right':\n return `${radius}px 0px 0px ${radius}px`;\n\n case 'none':\n default:\n return `${radius}px`;\n }\n}\n\nconst Primary = styled.button<ButtonProps>`\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n position: relative;\n box-sizing: border-box;\n min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n &.loading-state {\n cursor: wait;\n }\n div.button-content {\n ${(props) =>\n props.size === Size.Large\n ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : props.size === Size.Small\n ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n border-width: 2px;\n border-style: solid;\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n width: ${(props) => props.width};\n position: relative;\n\n min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n min-width: ${props => props.minWidth};\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n padding: ${(props) => (props.size === Size.Large ? '14px 16px' : props.size === Size.Small ? '6px 8px' : '8px 12px')};\n\n span.loading {\n opacity: 0;\n }\n\n .icon {\n margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '' : '-2px -8px' ))};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n svg {\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n }\n }\n\n .label {\n margin: 0 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n path {\n fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n }\n\n &:focus,\n &.focus-state {\n ${props => props.invertFocus || (props.invertFocus === undefined && props.colorTheme === 'dark') ? invertedFocusStyles : focusStyles}\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n pointer-events: none;\n background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n background-color: transparent;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: transparent;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ${COLORS.neutral_300};\n border-color: transparent !important;\n }\n`;\n\nconst Positive = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.correct_500};\n background-color: ${COLORS.correct_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.correct_800};\n background-color: ${COLORS.correct_800};\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.critical_500};\n background-color: ${COLORS.critical_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.critical_800};\n background-color: ${COLORS.critical_800};\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n role?: 'button' | string;\n title?: string;\n size?: Size;\n colorTheme?: 'teal' | 'dark';\n invertFocus?: boolean;\n width?: 'auto' | string;\n loading?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n minWidth?: string;\n iconOnly?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>( ({\n children = '',\n variant = 'primary',\n type = 'button',\n size = Size.Medium,\n width = 'auto',\n minWidth = '64px',\n testId,\n disabled,\n flatEdge,\n icon,\n ...props\n}, ref) => {\n // Let's filter out properties that we don't need to render.\n const { loading, ...renderProps } = props;\n\n const renderContent = () => (\n <>\n {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n {loading && <LoadingIndicator/>}\n </>\n );\n\n let ButtonStyled = Primary;\n switch(variant)\n {\n case 'secondary':\n ButtonStyled = Secondary;\n break;\n case 'tertiary':\n ButtonStyled = Tertiary;\n break;\n case 'positive':\n ButtonStyled = Positive;\n break;\n case 'critical':\n ButtonStyled = Critical;\n break;\n }\n\n return (\n <ButtonStyled\n {...renderProps}\n ref={ref}\n disabled={disabled}\n iconOnly={!children}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={defaultOnMouseDownHandler}>\n <div className=\"button-content\">{renderContent()}</div>\n </ButtonStyled>\n );\n});\n\nexport default Button;\n"],"file":"Button.cjs"}
package/dist/Button/Button.js CHANGED
@@ -36,7 +36,7 @@ var getBorderRadius = function getBorderRadius(flatEdge, radius) {
36
36
  }
37
37
  };
38
38
 
39
- var Primary = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n position: relative;\n box-sizing: border-box;\n min-height: ", ";\n &.loading-state {\n cursor: wait;\n }\n div.button-content {\n ", ";\n\n background-color: ", ";\n border-radius: ", ";\n border-width: 2px;\n border-style: solid;\n border-color: ", ";\n\n width: ", ";\n position: relative;\n\n min-height: ", ";\n min-width: ", ";\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n // paddings have -2px for border\n padding: ", ";\n\n span.loading {\n opacity: 0;\n }\n .icon {\n margin: ", ";\n width: ", ";\n height: ", ";\n svg {\n width: ", " !important;\n height: ", " !important;\n }\n }\n\n .extramargin {\n margin-right: 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ", ";\n width: ", ";\n path {\n fill: ", ";\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n\n &:focus,\n &.focus-state {\n ", "\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n pointer-events: none;\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n }\n"])), function (props) {
39
+ var Primary = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n position: relative;\n box-sizing: border-box;\n min-height: ", ";\n &.loading-state {\n cursor: wait;\n }\n div.button-content {\n ", ";\n\n background-color: ", ";\n border-radius: ", ";\n border-width: 2px;\n border-style: solid;\n border-color: ", ";\n\n width: ", ";\n position: relative;\n\n min-height: ", ";\n min-width: ", ";\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n padding: ", ";\n\n span.loading {\n opacity: 0;\n }\n\n .icon {\n margin: ", ";\n width: ", ";\n height: ", ";\n svg {\n width: ", " !important;\n height: ", " !important;\n }\n }\n\n .label {\n margin: 0 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ", ";\n width: ", ";\n path {\n fill: ", ";\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n\n &:focus,\n &.focus-state {\n ", "\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n pointer-events: none;\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n }\n"])), function (props) {
40
40
  return props.size === Size.Large ? '56px' : '48px';
41
41
  }, function (props) {
42
42
  return props.size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white) : props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white) : ComponentMStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white);
@@ -53,9 +53,9 @@ var Primary = styled.button(_templateObject || (_templateObject = _taggedTemplat
53
53
  }, function (props) {
54
54
  return props.minWidth;
55
55
  }, function (props) {
56
- return props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px';
56
+ return props.size === Size.Large ? '14px 16px' : props.size === Size.Small ? '6px 8px' : '8px 12px';
57
57
  }, function (props) {
58
- return props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px';
58
+ return props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '' : props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '' : '-2px -8px';
59
59
  }, function (props) {
60
60
  return props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px';
61
61
  }, function (props) {
package/dist/Button/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Button/Button.tsx"],"names":["React","styled","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","invertedFocusStyles","Size","defaultOnMouseDownHandler","getBorderRadius","flatEdge","radius","Primary","button","props","size","Large","Bold","colorTheme","primary_800","white","Small","accent1","primary","width","minWidth","Medium","iconOnly","accent1_700","primary_100","primary_700","primary_600","accent1_800","primary_200","invertFocus","undefined","neutral_100","neutral_300","Secondary","primary_300","Tertiary","primary_500","accent1_20","primary_20","accent1_100","Positive","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","forwardRef","ref","children","variant","type","testId","disabled","icon","loading","renderProps","renderContent","ButtonStyled","className","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {COLORS, focusStyles, invertedFocusStyles} from '../styles';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n switch(flatEdge)\n {\n case 'left':\n return `0px ${radius}px ${radius}px 0px`;\n \n case 'right':\n return `${radius}px 0px 0px ${radius}px`;\n\n case 'none':\n default:\n return `${radius}px`;\n }\n}\n\nconst Primary = styled.button<ButtonProps>`\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n position: relative;\n box-sizing: border-box;\n min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n &.loading-state {\n cursor: wait;\n }\n div.button-content {\n ${(props) =>\n props.size === Size.Large\n ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : props.size === Size.Small\n ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n border-width: 2px;\n border-style: solid;\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n width: ${(props) => props.width};\n position: relative;\n\n min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n min-width: ${props => props.minWidth};\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n // paddings have -2px for border\n padding: ${(props) => (props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px')};\n\n span.loading {\n opacity: 0;\n }\n .icon {\n margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px' ))};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n svg {\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n }\n }\n\n .extramargin {\n margin-right: 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n path {\n fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n }\n\n &:focus,\n &.focus-state {\n ${props => props.invertFocus || (props.invertFocus === undefined && props.colorTheme === 'dark') ? invertedFocusStyles : focusStyles}\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n pointer-events: none;\n background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n background-color: transparent;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: transparent;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ${COLORS.neutral_300};\n border-color: transparent !important;\n }\n`;\n\nconst Positive = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.correct_500};\n background-color: ${COLORS.correct_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.correct_800};\n background-color: ${COLORS.correct_800};\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.critical_500};\n background-color: ${COLORS.critical_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.critical_800};\n background-color: ${COLORS.critical_800};\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n role?: 'button' | string;\n title?: string;\n size?: Size;\n colorTheme?: 'teal' | 'dark';\n invertFocus?: boolean;\n width?: 'auto' | string;\n loading?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n minWidth?: string;\n iconOnly?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>( ({\n children = '',\n variant = 'primary',\n type = 'button',\n size = Size.Medium,\n width = 'auto',\n minWidth = '64px',\n testId,\n disabled,\n flatEdge,\n icon,\n ...props\n}, ref) => {\n // Let's filter out properties that we don't need to render.\n const { loading, ...renderProps } = props;\n\n const renderContent = () => (\n <>\n {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n {loading && <LoadingIndicator/>}\n </>\n );\n\n let ButtonStyled = Primary;\n switch(variant)\n {\n case 'secondary':\n ButtonStyled = Secondary;\n break;\n case 'tertiary':\n ButtonStyled = Tertiary;\n break;\n case 'positive':\n ButtonStyled = Positive;\n break;\n case 'critical':\n ButtonStyled = Critical;\n break;\n }\n\n return (\n <ButtonStyled\n {...renderProps}\n ref={ref}\n disabled={disabled}\n iconOnly={!children}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={defaultOnMouseDownHandler}>\n <div className=\"button-content\">{renderContent()}</div>\n </ButtonStyled>\n );\n});\n\nexport default Button;\n"],"file":"Button.js"}
1
+ {"version":3,"sources":["../../src/Button/Button.tsx"],"names":["React","styled","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","invertedFocusStyles","Size","defaultOnMouseDownHandler","getBorderRadius","flatEdge","radius","Primary","button","props","size","Large","Bold","colorTheme","primary_800","white","Small","accent1","primary","width","minWidth","Medium","iconOnly","accent1_700","primary_100","primary_700","primary_600","accent1_800","primary_200","invertFocus","undefined","neutral_100","neutral_300","Secondary","primary_300","Tertiary","primary_500","accent1_20","primary_20","accent1_100","Positive","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","forwardRef","ref","children","variant","type","testId","disabled","icon","loading","renderProps","renderContent","ButtonStyled","className","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {COLORS, focusStyles, invertedFocusStyles} from '../styles';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n switch(flatEdge)\n {\n case 'left':\n return `0px ${radius}px ${radius}px 0px`;\n \n case 'right':\n return `${radius}px 0px 0px ${radius}px`;\n\n case 'none':\n default:\n return `${radius}px`;\n }\n}\n\nconst Primary = styled.button<ButtonProps>`\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n position: relative;\n box-sizing: border-box;\n min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n &.loading-state {\n cursor: wait;\n }\n div.button-content {\n ${(props) =>\n props.size === Size.Large\n ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : props.size === Size.Small\n ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n border-width: 2px;\n border-style: solid;\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n width: ${(props) => props.width};\n position: relative;\n\n min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n min-width: ${props => props.minWidth};\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n padding: ${(props) => (props.size === Size.Large ? '14px 16px' : props.size === Size.Small ? '6px 8px' : '8px 12px')};\n\n span.loading {\n opacity: 0;\n }\n\n .icon {\n margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '' : '-2px -8px' ))};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n svg {\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n }\n }\n\n .label {\n margin: 0 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n path {\n fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n }\n\n &:focus,\n &.focus-state {\n ${props => props.invertFocus || (props.invertFocus === undefined && props.colorTheme === 'dark') ? invertedFocusStyles : focusStyles}\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n pointer-events: none;\n background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n background-color: transparent;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: transparent;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ${COLORS.neutral_300};\n border-color: transparent !important;\n }\n`;\n\nconst Positive = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.correct_500};\n background-color: ${COLORS.correct_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.correct_800};\n background-color: ${COLORS.correct_800};\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.critical_500};\n background-color: ${COLORS.critical_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.critical_800};\n background-color: ${COLORS.critical_800};\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n role?: 'button' | string;\n title?: string;\n size?: Size;\n colorTheme?: 'teal' | 'dark';\n invertFocus?: boolean;\n width?: 'auto' | string;\n loading?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n minWidth?: string;\n iconOnly?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>( ({\n children = '',\n variant = 'primary',\n type = 'button',\n size = Size.Medium,\n width = 'auto',\n minWidth = '64px',\n testId,\n disabled,\n flatEdge,\n icon,\n ...props\n}, ref) => {\n // Let's filter out properties that we don't need to render.\n const { loading, ...renderProps } = props;\n\n const renderContent = () => (\n <>\n {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n {loading && <LoadingIndicator/>}\n </>\n );\n\n let ButtonStyled = Primary;\n switch(variant)\n {\n case 'secondary':\n ButtonStyled = Secondary;\n break;\n case 'tertiary':\n ButtonStyled = Tertiary;\n break;\n case 'positive':\n ButtonStyled = Positive;\n break;\n case 'critical':\n ButtonStyled = Critical;\n break;\n }\n\n return (\n <ButtonStyled\n {...renderProps}\n ref={ref}\n disabled={disabled}\n iconOnly={!children}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={defaultOnMouseDownHandler}>\n <div className=\"button-content\">{renderContent()}</div>\n </ButtonStyled>\n );\n});\n\nexport default Button;\n"],"file":"Button.js"}
package/dist/Modals/ModalDialog.cjs CHANGED
@@ -359,6 +359,7 @@ var ModalDialog = function ModalDialog(_ref) {
359
359
  size: size,
360
360
  children: [leftFooterAction && LeftFooterAction(leftFooterAction), buttons === null || buttons === void 0 ? void 0 : buttons.map(function (b, i) {
361
361
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
362
+ icon: b.icon,
362
363
  id: b.id,
363
364
  disabled: b.disabled,
364
365
  loading: b.loading,
package/dist/Modals/ModalDialog.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","topImageWithFallbacksProps","topImageGrayscale","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","zIndex","contentOverflow","width","hasContentBorders","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","ComponentTextStyle","Bold","ModalTootip","XSmall","COLORS","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","display","flexDirection","maxHeight","loader","alt","fallbacks","src","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n ImageOverlay,\n ImageContainer,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string | React.ReactNode;\n topImage?: any;\n topImageWithFallbacksProps?: ImageWithFallbacksProps;\n topImageGrayscale?: boolean;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n zIndex?: number;\n contentOverflow?: string;\n width?: string;\n hasContentBorders?: boolean;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n topImageWithFallbacksProps,\n topImageGrayscale,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n zIndex,\n contentOverflow,\n width,\n hasContentBorders,\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const getMaxHeight = () => {\n switch (size) {\n case Size.Small:\n return 'calc(100vh - 56px)';\n case Size.Medium:\n return 'calc(100vh - 76px)';\n case Size.Large:\n return 'calc(100vh - 96px)';\n default:\n return 'calc(100vh - 72px)';\n }\n };\n\n const ModalTitle = (title: string | React.ReactNode, size?: Size) => {\n if (typeof size === 'string') {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n } else {\n return <>{title}</>;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} 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 || !!topImageWithFallbacksProps} 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 const getLeftActionIconElement = (icon: React.ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink\n id=\"left-action-hyperlink\"\n className=\"footer-action\"\n href={(leftFooterAction as LeftFooterHyperlink).href}\n disabled={disabled}\n variant=\"default\"\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n return (\n <ModalContainer\n showModal={isModalOpen}\n closeModal={closeModalAndClearInput}\n minWidth={getMinWidth()}\n maxWidth={getMaxWidth()}\n height=\"auto\"\n padding={getPadding()}\n zIndex={zIndex}\n width={width}>\n <Column>\n <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n {(topImage || topImageWithFallbacksProps) && (\n <StyledModalHeader size={size} $height={getImageHeight()} marginBottom={getMarginBottom()}>\n <ImageContainer $height={getImageHeight()}>\n {topImageGrayscale && <ImageOverlay $height={getImageHeight()} />}\n {topImage && <img src={topImage} alt=\"Modal top\" />}\n {!topImage && topImageWithFallbacksProps && (\n <ImageWithFallbacks\n loader={topImageWithFallbacksProps.loader}\n alt={topImageWithFallbacksProps.alt}\n fallbacks={topImageWithFallbacksProps.fallbacks}\n src={topImageWithFallbacksProps.src}\n />\n )}\n </ImageContainer>\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n </ModalTitleSection>\n\n <ModalBody size={size} overflow={contentOverflow} hasContentBorders={hasContentBorders}>\n {children}\n </ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.cjs"}
1
+ {"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","topImageWithFallbacksProps","topImageGrayscale","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","zIndex","contentOverflow","width","hasContentBorders","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","ComponentTextStyle","Bold","ModalTootip","XSmall","COLORS","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","display","flexDirection","maxHeight","loader","alt","fallbacks","src","map","b","i","id"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAgBA;;AACA;;AAEA;;;;AA0BO,IAAMA,WAAmD,GAAG,SAAtDA,WAAsD,OAsB7D;AAAA,MArBJC,IAqBI,QArBJA,IAqBI;AAAA,MApBJC,WAoBI,QApBJA,WAoBI;AAAA,MAnBJC,uBAmBI,QAnBJA,uBAmBI;AAAA,MAlBJC,KAkBI,QAlBJA,KAkBI;AAAA,MAjBJC,QAiBI,QAjBJA,QAiBI;AAAA,MAhBJC,0BAgBI,QAhBJA,0BAgBI;AAAA,MAfJC,iBAeI,QAfJA,iBAeI;AAAA,MAdJC,OAcI,QAdJA,OAcI;AAAA,MAbJC,gBAaI,QAbJA,gBAaI;AAAA,MAZJC,UAYI,QAZJA,UAYI;AAAA,MAXJC,WAWI,QAXJA,WAWI;AAAA,MAVJC,YAUI,QAVJA,YAUI;AAAA,MATJC,OASI,QATJA,OASI;AAAA,MARJC,QAQI,QARJA,QAQI;AAAA,MAPJC,IAOI,QAPJA,IAOI;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALJC,IAKI,QALJA,IAKI;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,MAHJC,eAGI,QAHJA,eAGI;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADJC,iBACI,QADJA,iBACI;;AACJ,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,YAAQrB,IAAR;AACE,WAAKsB,YAAKC,KAAV;AACE,eAAO,OAAP;;AACF,WAAKD,YAAKE,KAAV;AACE,eAAO,OAAP;;AACF,WAAKF,YAAKG,MAAV;AACA;AACE,eAAO,OAAP;AAPJ;AASD,GAVD;;AAYA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,YAAQ1B,IAAR;AACE,WAAKsB,YAAKC,KAAV;AACE,eAAO,OAAP;;AACF,WAAKD,YAAKE,KAAV;AACE,eAAO,OAAP;;AACF,WAAKF,YAAKG,MAAV;AACA;AACE,eAAO,OAAP;AAPJ;AASD,GAVD;;AAYA,MAAME,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,YAAQ3B,IAAR;AACE,WAAKsB,YAAKC,KAAV;AACE,eAAO,GAAP;;AACF,WAAKD,YAAKG,MAAV;AACE,eAAO,GAAP;;AACF,WAAKH,YAAKE,KAAV;AACE,eAAO,GAAP;;AACF;AACE,eAAO,GAAP;AARJ;AAUD,GAXD;;AAaA,MAAMI,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,YAAQ5B,IAAR;AACE,WAAKsB,YAAKC,KAAV;AACE,eAAO,MAAP;;AACF,WAAKD,YAAKG,MAAV;AACE,eAAO,MAAP;;AACF,WAAKH,YAAKE,KAAV;AACE,eAAO,MAAP;;AACF;AACE,eAAO,MAAP;AARJ;AAUD,GAXD;;AAaA,MAAMK,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,YAAQ7B,IAAR;AACE,WAAKsB,YAAKC,KAAV;AACE,eAAO,eAAP;;AACF,WAAKD,YAAKG,MAAV;AACE,eAAO,gBAAP;;AACF,WAAKH,YAAKE,KAAV;AACE,eAAO,MAAP;;AACF;AACE,eAAO,gBAAP;AARJ;AAUD,GAXD;;AAaA,MAAMM,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,YAAQ9B,IAAR;AACE,WAAKsB,YAAKC,KAAV;AACE,eAAO,oBAAP;;AACF,WAAKD,YAAKG,MAAV;AACE,eAAO,oBAAP;;AACF,WAAKH,YAAKE,KAAV;AACE,eAAO,oBAAP;;AACF;AACE,eAAO,oBAAP;AARJ;AAUD,GAXD;;AAaA,MAAMO,UAAU,GAAG,SAAbA,UAAa,CAAC5B,KAAD,EAAkCH,IAAlC,EAAkD;AACnE,QAAI,OAAOA,IAAP,KAAgB,QAApB,EAA8B;AAC5B,cAAQA,IAAR;AACE,aAAKsB,YAAKC,KAAV;AACE,8BAAO,qBAAC,kBAAD;AAAY,YAAA,SAAS,EAAES,2BAAmBC,IAA1C;AAAA,sBAAiD9B;AAAjD,YAAP;;AACF,aAAKmB,YAAKG,MAAV;AACE,8BAAO,qBAAC,kBAAD;AAAY,YAAA,SAAS,EAAEO,2BAAmBC,IAA1C;AAAA,sBAAiD9B;AAAjD,YAAP;;AACF,aAAKmB,YAAKE,KAAV;AACE,8BAAO,qBAAC,mBAAD;AAAa,YAAA,SAAS,EAAEQ,2BAAmBC,IAA3C;AAAA,sBAAkD9B;AAAlD,YAAP;;AACF;AACE,8BAAO,qBAAC,kBAAD;AAAY,YAAA,SAAS,EAAE6B,2BAAmBC,IAA1C;AAAA,sBAAiD9B;AAAjD,YAAP;AARJ;AAUD,KAXD,MAWO;AACL,0BAAO;AAAA,kBAAGA;AAAH,QAAP;AACD;AACF,GAfD;;AAiBA,MAAM+B,WAAW,GAAG,SAAdA,WAAc,CAACtB,OAAD,EAAqB;AACvC,wBACE,qBAAC,+BAAD;AAAA,6BACE,qBAAC,wBAAD;AAAgB,QAAA,KAAK,EAAC,IAAtB;AAA2B,QAAA,IAAI,EAAEU,YAAKa,MAAtC;AAA8C,QAAA,KAAK,EAAC,QAApD;AAA6D,QAAA,QAAQ,EAAC,KAAtE;AAA4E,QAAA,SAAS,EAAE,KAAvF;AAA8F,QAAA,KAAK,EAAEvB,OAArG;AAAA,+BACE,qBAAC,kBAAD;AAAY,UAAA,OAAO,EAAC,WAApB;AAAgC,UAAA,KAAK,EAAC,UAAtC;AAAiD,UAAA,MAAM,EAAE,kBAAM,CAAE,CAAjE;AAAA,iCACE,qBAAC,iBAAD;AAAM,YAAA,IAAI,EAAC,MAAX;AAAkB,YAAA,KAAK,EAAEwB,eAAOC;AAAhC;AADF;AADF;AADF,MADF;AASD,GAVD;;AAYA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAAkB;AACzC,wBACE,qBAAC,+BAAD;AAAoB,MAAA,QAAQ,EAAE,CAAC,CAACnC,QAAF,IAAc,CAAC,CAACC,0BAA9C;AAA0E,MAAA,IAAI,EAAEL,IAAhF;AAAA,6BACE,qBAAC,kBAAD;AAAY,QAAA,OAAO,EAAC,WAApB;AAAgC,QAAA,KAAK,EAAC,UAAtC;AAAiD,QAAA,MAAM,EAAE;AAAA,iBAAMuC,OAAO,EAAb;AAAA,SAAzD;AAA0E,QAAA,YAAY,EAAE,EAAxF;AAAA,+BACE,qBAAC,kBAAD;AAAO,UAAA,IAAI,EAAC,MAAZ;AAAmB,UAAA,KAAK,EAAEH,eAAOI;AAAjC;AADF;AADF,MADF;AAOD,GARD;;AAUA,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,QAAIhC,UAAJ,EAAgB;AACd,0BACE,qBAAC,8BAAD;AAAmB,QAAA,QAAQ,EAAE,CAAC,CAACL,QAAF,IAAc,CAAC,CAACC,0BAA7C;AAAyE,QAAA,IAAI,EAAEL,IAA/E;AAAA,+BACE,qBAAC,kBAAD;AAAY,UAAA,OAAO,EAAC,WAApB;AAAgC,UAAA,KAAK,EAAC,UAAtC;AAAiD,UAAA,MAAM,EAAE;AAAA,mBAAMS,UAAU,EAAhB;AAAA,WAAzD;AAA6E,UAAA,YAAY,EAAE,EAA3F;AAAA,iCACE,qBAAC,0BAAD;AAAe,YAAA,IAAI,EAAC,MAApB;AAA2B,YAAA,KAAK,EAAE2B,eAAOI;AAAzC;AADF;AADF,QADF;AAOD;AACF,GAVD;;AAYA,MAAME,wBAAwB,GAAG,SAA3BA,wBAA2B,CAAC1B,IAAD,EAA2B;AAC1D,wBAAO2B,eAAMC,YAAN,CAAmB5B,IAAnB,EAA+C;AAAEhB,MAAAA,IAAI,EAAEA,IAAI,KAAKsB,YAAKC,KAAd,GAAsB,MAAtB,GAA+BvB,IAAI,KAAKsB,YAAKE,KAAd,GAAsB,MAAtB,GAA+B;AAAtE,KAA/C,CAAP;AACD,GAFD;;AAIA,MAAMqB,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACrC,gBAAD,EAAwC;AAAA;;AAC/D,QAAQsC,IAAR,GAAqDtC,gBAArD,CAAQsC,IAAR;AAAA,QAAcC,UAAd,GAAqDvC,gBAArD,CAAcuC,UAAd;AAAA,QAA0BC,QAA1B,GAAqDxC,gBAArD,CAA0BwC,QAA1B;AAAA,QAAoChC,IAApC,GAAqDR,gBAArD,CAAoCQ,IAApC;AAAA,QAA0CiC,MAA1C,GAAqDzC,gBAArD,CAA0CyC,MAA1C;;AACA,YAAQF,UAAR;AACE,WAAK,QAAL;AACE,4BACE,qBAAC,cAAD;AACE,UAAA,EAAE,EAAE,oBADN;AAEE,UAAA,IAAI,EAAGvC,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAD,CAAwC0C,IAFhD;AAGE,UAAA,QAAQ,EAAEF,QAHZ;AAIE,UAAA,OAAO,EAAGxC,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAD,CAAwC2C,OAJnD;AAKE,UAAA,IAAI,EAAEnC,IALR;AAME,UAAA,IAAI,EAAEhB,IANR;AAOE,UAAA,OAAO,EAAEiD,MAPX;AAQE,UAAA,OAAO,cAAGzC,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAD,CAAwC4C,OAA1C,+CAAqD,WAR9D;AASE,UAAA,KAAK,EAAE;AAAEC,YAAAA,KAAK,EAAE,CAAC,CAAV;AAAaC,YAAAA,WAAW,EAAE;AAA1B,WATT;AAAA,oBAUGR;AAVH,UADF;;AAcF,WAAK,WAAL;AACE,4BACE,sBAAC,WAAD;AACE,UAAA,EAAE,EAAC,uBADL;AAEE,UAAA,SAAS,EAAC,eAFZ;AAGE,UAAA,IAAI,EAAGtC,gBAAD,CAA0C+C,IAHlD;AAIE,UAAA,QAAQ,EAAEP,QAJZ;AAKE,UAAA,OAAO,EAAC,SALV;AAME,UAAA,OAAO,EAAE,iBAACQ,CAAD,EAAO;AACd,gBAAIP,MAAJ,EAAY;AACVO,cAAAA,CAAC,CAACC,cAAF;AACAR,cAAAA,MAAM,CAACO,CAAD,CAAN;AACD;AACF,WAXH;AAAA,qBAYGxC,IAAI,IAAI0B,wBAAwB,CAAC1B,IAAD,CAZnC,EAaG8B,IAbH;AAAA,UADF;;AAiBF,WAAK,MAAL;AACE,4BACE;AAAK,UAAA,SAAS,EAAC,oBAAf;AAAA,qBACG9B,IAAI,IAAI0B,wBAAwB,CAAC1B,IAAD,CADnC,eAEE;AAAA,sBAAO8B;AAAP,YAFF;AAAA,UADF;AAnCJ;AA0CD,GA5CD;;AA8CA,sBACE,qBAAC,uBAAD;AACE,IAAA,SAAS,EAAE7C,WADb;AAEE,IAAA,UAAU,EAAEC,uBAFd;AAGE,IAAA,QAAQ,EAAEmB,WAAW,EAHvB;AAIE,IAAA,QAAQ,EAAEK,WAAW,EAJvB;AAKE,IAAA,MAAM,EAAC,MALT;AAME,IAAA,OAAO,EAAEG,UAAU,EANrB;AAOE,IAAA,MAAM,EAAEZ,MAPV;AAQE,IAAA,KAAK,EAAEE,KART;AAAA,2BASE,qBAAC,mBAAD;AAAA,6BACE;AAAM,QAAA,QAAQ,EAAER,YAAhB;AAA8B,QAAA,KAAK,EAAE;AAAE+C,UAAAA,OAAO,EAAE,MAAX;AAAmBC,UAAAA,aAAa,EAAE,QAAlC;AAA4CC,UAAAA,SAAS,EAAE9B,YAAY;AAAnE,SAArC;AAAA,mBACG,CAAC1B,QAAQ,IAAIC,0BAAb,kBACC,sBAAC,8BAAD;AAAmB,UAAA,IAAI,EAAEL,IAAzB;AAA+B,UAAA,OAAO,EAAE2B,cAAc,EAAtD;AAA0D,UAAA,YAAY,EAAEC,eAAe,EAAvF;AAAA,kCACE,sBAAC,2BAAD;AAAgB,YAAA,OAAO,EAAED,cAAc,EAAvC;AAAA,uBACGrB,iBAAiB,iBAAI,qBAAC,yBAAD;AAAc,cAAA,OAAO,EAAEqB,cAAc;AAArC,cADxB,EAEGvB,QAAQ,iBAAI;AAAK,cAAA,GAAG,EAAEA,QAAV;AAAoB,cAAA,GAAG,EAAC;AAAxB,cAFf,EAGG,CAACA,QAAD,IAAaC,0BAAb,iBACC,qBAAC,oBAAD;AACE,cAAA,MAAM,EAAEA,0BAA0B,CAACwD,MADrC;AAEE,cAAA,GAAG,EAAExD,0BAA0B,CAACyD,GAFlC;AAGE,cAAA,SAAS,EAAEzD,0BAA0B,CAAC0D,SAHxC;AAIE,cAAA,GAAG,EAAE1D,0BAA0B,CAAC2D;AAJlC,cAJJ;AAAA,YADF,eAaE,sBAAC,wCAAD;AAA6B,YAAA,aAAa,EAAE,CAAC,CAACvD,UAA9C;AAAA,uBACGgC,eAAe,EADlB,EAEGH,gBAAgB,CAAC5B,WAAD,CAFnB;AAAA,YAbF;AAAA,UAFJ,eAqBE,sBAAC,8BAAD;AAAA,kCACE,sBAAC,0BAAD;AAAA,uBACG,EAAEN,QAAQ,IAAIC,0BAAd,KAA6CoC,eAAe,EAD/D,EAEGtC,KAAK,IAAI4B,UAAU,CAAC5B,KAAD,EAAQH,IAAR,CAFtB;AAAA,YADF,eAKE,sBAAC,+BAAD;AAAA,uBACGY,OAAO,IAAIsB,WAAW,CAACtB,OAAD,CADzB,EAEG,EAAER,QAAQ,IAAIC,0BAAd,KAA6CiC,gBAAgB,CAAC5B,WAAD,CAFhE;AAAA,YALF;AAAA,UArBF,eAgCE,qBAAC,sBAAD;AAAW,UAAA,IAAI,EAAEV,IAAjB;AAAuB,UAAA,QAAQ,EAAEkB,eAAjC;AAAkD,UAAA,iBAAiB,EAAEE,iBAArE;AAAA,oBACGP;AADH,UAhCF,EAoCGC,IAAI,iBAAI,qBAAC,oBAAD;AAAW,UAAA,IAAI,EAAEA,IAAjB;AAAuB,UAAA,KAAK,EAAEC,KAA9B;AAAqC,UAAA,IAAI,EAAEf,IAA3C;AAAiD,UAAA,IAAI,EAAEgB;AAAvD,UApCX,eAsCE,sBAAC,wBAAD;AAAa,UAAA,IAAI,EAAEhB,IAAnB;AAAA,qBACGQ,gBAAgB,IAAIqC,gBAAgB,CAACrC,gBAAD,CADvC,EAEGD,OAFH,aAEGA,OAFH,uBAEGA,OAAO,CAAE0D,GAAT,CAAa,UAACC,CAAD,EAAIC,CAAJ;AAAA,gCACZ,qBAAC,cAAD;AAAwB,cAAA,IAAI,EAAED,CAAC,CAAClD,IAAhC;AAAsC,cAAA,EAAE,EAAEkD,CAAC,CAACE,EAA5C;AAAgD,cAAA,QAAQ,EAAEF,CAAC,CAAClB,QAA5D;AAAsE,cAAA,OAAO,EAAEkB,CAAC,CAACf,OAAjF;AAA0F,cAAA,IAAI,EAAEnD,IAAhG;AAAsG,cAAA,OAAO,EAAEkE,CAAC,CAACjB,MAAjH;AAAyH,cAAA,IAAI,EAAEiB,CAAC,CAAChB,IAAjI;AAAuI,cAAA,OAAO,EAAEgB,CAAC,CAACd,OAAlJ;AAAA,wBACGc,CAAC,CAACpB;AADL,eAAaoB,CAAC,CAACE,EAAF,IAAQD,CAArB,CADY;AAAA,WAAb,CAFH;AAAA,UAtCF;AAAA;AADF;AATF,IADF;AA6DD,CArQM;;;;AArBLlE,EAAAA,W;AACAC,EAAAA,uB;AACAC,EAAAA,K;AACAC,EAAAA,Q;AAEAE,EAAAA,iB;AACAC,EAAAA,O;AAEAK,EAAAA,O;AACAH,EAAAA,U;AACAC,EAAAA,W;AACAC,EAAAA,Y;AACAG,EAAAA,I;AACAC,EAAAA,K;AACAC,EAAAA,I;AACAC,EAAAA,M;AACAC,EAAAA,e;AACAC,EAAAA,K;AACAC,EAAAA,iB;;eA0QarB,W","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n ImageOverlay,\n ImageContainer,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string | React.ReactNode;\n topImage?: any;\n topImageWithFallbacksProps?: ImageWithFallbacksProps;\n topImageGrayscale?: boolean;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n zIndex?: number;\n contentOverflow?: string;\n width?: string;\n hasContentBorders?: boolean;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n topImageWithFallbacksProps,\n topImageGrayscale,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n zIndex,\n contentOverflow,\n width,\n hasContentBorders,\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const getMaxHeight = () => {\n switch (size) {\n case Size.Small:\n return 'calc(100vh - 56px)';\n case Size.Medium:\n return 'calc(100vh - 76px)';\n case Size.Large:\n return 'calc(100vh - 96px)';\n default:\n return 'calc(100vh - 72px)';\n }\n };\n\n const ModalTitle = (title: string | React.ReactNode, size?: Size) => {\n if (typeof size === 'string') {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n } else {\n return <>{title}</>;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} 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 || !!topImageWithFallbacksProps} 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 const getLeftActionIconElement = (icon: React.ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink\n id=\"left-action-hyperlink\"\n className=\"footer-action\"\n href={(leftFooterAction as LeftFooterHyperlink).href}\n disabled={disabled}\n variant=\"default\"\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n return (\n <ModalContainer\n showModal={isModalOpen}\n closeModal={closeModalAndClearInput}\n minWidth={getMinWidth()}\n maxWidth={getMaxWidth()}\n height=\"auto\"\n padding={getPadding()}\n zIndex={zIndex}\n width={width}>\n <Column>\n <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n {(topImage || topImageWithFallbacksProps) && (\n <StyledModalHeader size={size} $height={getImageHeight()} marginBottom={getMarginBottom()}>\n <ImageContainer $height={getImageHeight()}>\n {topImageGrayscale && <ImageOverlay $height={getImageHeight()} />}\n {topImage && <img src={topImage} alt=\"Modal top\" />}\n {!topImage && topImageWithFallbacksProps && (\n <ImageWithFallbacks\n loader={topImageWithFallbacksProps.loader}\n alt={topImageWithFallbacksProps.alt}\n fallbacks={topImageWithFallbacksProps.fallbacks}\n src={topImageWithFallbacksProps.src}\n />\n )}\n </ImageContainer>\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n </ModalTitleSection>\n\n <ModalBody size={size} overflow={contentOverflow} hasContentBorders={hasContentBorders}>\n {children}\n </ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} icon={b.icon} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.cjs"}
package/dist/Modals/ModalDialog.js CHANGED
@@ -340,6 +340,7 @@ export var ModalDialog = function ModalDialog(_ref) {
340
340
  size: size,
341
341
  children: [leftFooterAction && LeftFooterAction(leftFooterAction), buttons === null || buttons === void 0 ? void 0 : buttons.map(function (b, i) {
342
342
  return /*#__PURE__*/_jsx(Button, {
343
+ icon: b.icon,
343
344
  id: b.id,
344
345
  disabled: b.disabled,
345
346
  loading: b.loading,
package/dist/Modals/ModalDialog.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ImageOverlay","ImageContainer","ModalNote","TooltipWrapper","HyperLink","ImageWithFallbacks","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","topImageWithFallbacksProps","topImageGrayscale","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","zIndex","contentOverflow","width","hasContentBorders","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","display","flexDirection","maxHeight","loader","alt","fallbacks","src","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n ImageOverlay,\n ImageContainer,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string | React.ReactNode;\n topImage?: any;\n topImageWithFallbacksProps?: ImageWithFallbacksProps;\n topImageGrayscale?: boolean;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n zIndex?: number;\n contentOverflow?: string;\n width?: string;\n hasContentBorders?: boolean;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n topImageWithFallbacksProps,\n topImageGrayscale,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n zIndex,\n contentOverflow,\n width,\n hasContentBorders,\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const getMaxHeight = () => {\n switch (size) {\n case Size.Small:\n return 'calc(100vh - 56px)';\n case Size.Medium:\n return 'calc(100vh - 76px)';\n case Size.Large:\n return 'calc(100vh - 96px)';\n default:\n return 'calc(100vh - 72px)';\n }\n };\n\n const ModalTitle = (title: string | React.ReactNode, size?: Size) => {\n if (typeof size === 'string') {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n } else {\n return <>{title}</>;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} 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 || !!topImageWithFallbacksProps} 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 const getLeftActionIconElement = (icon: React.ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink\n id=\"left-action-hyperlink\"\n className=\"footer-action\"\n href={(leftFooterAction as LeftFooterHyperlink).href}\n disabled={disabled}\n variant=\"default\"\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n return (\n <ModalContainer\n showModal={isModalOpen}\n closeModal={closeModalAndClearInput}\n minWidth={getMinWidth()}\n maxWidth={getMaxWidth()}\n height=\"auto\"\n padding={getPadding()}\n zIndex={zIndex}\n width={width}>\n <Column>\n <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n {(topImage || topImageWithFallbacksProps) && (\n <StyledModalHeader size={size} $height={getImageHeight()} marginBottom={getMarginBottom()}>\n <ImageContainer $height={getImageHeight()}>\n {topImageGrayscale && <ImageOverlay $height={getImageHeight()} />}\n {topImage && <img src={topImage} alt=\"Modal top\" />}\n {!topImage && topImageWithFallbacksProps && (\n <ImageWithFallbacks\n loader={topImageWithFallbacksProps.loader}\n alt={topImageWithFallbacksProps.alt}\n fallbacks={topImageWithFallbacksProps.fallbacks}\n src={topImageWithFallbacksProps.src}\n />\n )}\n </ImageContainer>\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n </ModalTitleSection>\n\n <ModalBody size={size} overflow={contentOverflow} hasContentBorders={hasContentBorders}>\n {children}\n </ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
1
+ {"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ImageOverlay","ImageContainer","ModalNote","TooltipWrapper","HyperLink","ImageWithFallbacks","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","topImageWithFallbacksProps","topImageGrayscale","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","zIndex","contentOverflow","width","hasContentBorders","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","display","flexDirection","maxHeight","loader","alt","fallbacks","src","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n ImageOverlay,\n ImageContainer,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string | React.ReactNode;\n topImage?: any;\n topImageWithFallbacksProps?: ImageWithFallbacksProps;\n topImageGrayscale?: boolean;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n zIndex?: number;\n contentOverflow?: string;\n width?: string;\n hasContentBorders?: boolean;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n topImageWithFallbacksProps,\n topImageGrayscale,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n zIndex,\n contentOverflow,\n width,\n hasContentBorders,\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const getMaxHeight = () => {\n switch (size) {\n case Size.Small:\n return 'calc(100vh - 56px)';\n case Size.Medium:\n return 'calc(100vh - 76px)';\n case Size.Large:\n return 'calc(100vh - 96px)';\n default:\n return 'calc(100vh - 72px)';\n }\n };\n\n const ModalTitle = (title: string | React.ReactNode, size?: Size) => {\n if (typeof size === 'string') {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n } else {\n return <>{title}</>;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} 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 || !!topImageWithFallbacksProps} 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 const getLeftActionIconElement = (icon: React.ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink\n id=\"left-action-hyperlink\"\n className=\"footer-action\"\n href={(leftFooterAction as LeftFooterHyperlink).href}\n disabled={disabled}\n variant=\"default\"\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n return (\n <ModalContainer\n showModal={isModalOpen}\n closeModal={closeModalAndClearInput}\n minWidth={getMinWidth()}\n maxWidth={getMaxWidth()}\n height=\"auto\"\n padding={getPadding()}\n zIndex={zIndex}\n width={width}>\n <Column>\n <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n {(topImage || topImageWithFallbacksProps) && (\n <StyledModalHeader size={size} $height={getImageHeight()} marginBottom={getMarginBottom()}>\n <ImageContainer $height={getImageHeight()}>\n {topImageGrayscale && <ImageOverlay $height={getImageHeight()} />}\n {topImage && <img src={topImage} alt=\"Modal top\" />}\n {!topImage && topImageWithFallbacksProps && (\n <ImageWithFallbacks\n loader={topImageWithFallbacksProps.loader}\n alt={topImageWithFallbacksProps.alt}\n fallbacks={topImageWithFallbacksProps.fallbacks}\n src={topImageWithFallbacksProps.src}\n />\n )}\n </ImageContainer>\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n </ModalTitleSection>\n\n <ModalBody size={size} overflow={contentOverflow} hasContentBorders={hasContentBorders}>\n {children}\n </ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} icon={b.icon} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.9.4-dev.7",
3
+ "version": "1.9.4-dev.8.full",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [