@laerdal/life-react-components 1.6.0-dev.7 → 1.6.0-dev.7.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.
- package/dist/Banners/Banner.cjs +21 -5
- package/dist/Banners/Banner.cjs.map +1 -1
- package/dist/Banners/Banner.js +20 -5
- package/dist/Banners/Banner.js.map +1 -1
- package/dist/HyperLink/HyperLink.cjs +3 -1
- package/dist/HyperLink/HyperLink.cjs.map +1 -1
- package/dist/HyperLink/HyperLink.d.ts +4 -0
- package/dist/HyperLink/HyperLink.js +1 -1
- package/dist/HyperLink/HyperLink.js.map +1 -1
- package/dist/HyperLink/styling.cjs +1 -1
- package/dist/HyperLink/styling.cjs.map +1 -1
- package/dist/HyperLink/styling.js +1 -1
- package/dist/HyperLink/styling.js.map +1 -1
- package/dist/Modals/ModalDialog.cjs +2 -8
- package/dist/Modals/ModalDialog.cjs.map +1 -1
- package/dist/Modals/ModalDialog.d.ts +0 -2
- package/dist/Modals/ModalDialog.js +2 -8
- package/dist/Modals/ModalDialog.js.map +1 -1
- package/dist/Modals/ModalStyles.cjs +1 -5
- package/dist/Modals/ModalStyles.cjs.map +1 -1
- package/dist/Modals/ModalStyles.d.ts +0 -1
- package/dist/Modals/ModalStyles.js +1 -5
- package/dist/Modals/ModalStyles.js.map +1 -1
- package/package.json +1 -1
package/dist/Banners/Banner.cjs
CHANGED
|
@@ -31,6 +31,8 @@ var _typography = require("../styles/typography");
|
|
|
31
31
|
|
|
32
32
|
var _HyperLink = require("../HyperLink");
|
|
33
33
|
|
|
34
|
+
var _HyperLink2 = require("../HyperLink/HyperLink");
|
|
35
|
+
|
|
34
36
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
35
37
|
|
|
36
38
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
@@ -39,13 +41,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
39
41
|
|
|
40
42
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
41
43
|
|
|
42
|
-
var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n min-height: 48px;\n display: flex;\n color: ", ";\n margin-top: ", ";\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ", " {\n margin: 0 0 0 16px;\n }\n ", " {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n
|
|
44
|
+
var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n min-height: 48px;\n display: flex;\n color: ", ";\n margin-top: ", ";\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ", " {\n margin: 0 0 0 16px;\n }\n ", " {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ", " {\n &:link{\n color: ", ";\n }\n &:visited{\n color: ", ";\n }\n &:focus,\n &:active{\n background-color: ", ";\n color: ", ";\n }\n }\n"])), function (props) {
|
|
43
45
|
return props.$type ? props.$type : _styles.COLORS.correct_100;
|
|
44
46
|
}, _styles.COLORS.black, function (props) {
|
|
45
47
|
return props.bottom ? 'auto' : '0';
|
|
46
|
-
}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, function (props) {
|
|
48
|
+
}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _HyperLink2.StyledLink, function (props) {
|
|
47
49
|
return props.link;
|
|
48
|
-
})
|
|
50
|
+
}, function (props) {
|
|
51
|
+
return props.linkVisited;
|
|
52
|
+
}, function (props) {
|
|
53
|
+
return props.linkFocused;
|
|
54
|
+
}, _styles.COLORS.white);
|
|
49
55
|
|
|
50
56
|
var BannerCenter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ", " {\n margin: 0 32px;\n }\n ", " {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n"])), function (props) {
|
|
51
57
|
return (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color);
|
|
@@ -91,7 +97,9 @@ var Banner = function Banner(_ref) {
|
|
|
91
97
|
closeIconColor: _styles.COLORS.primary_500,
|
|
92
98
|
icon: _SystemIcons.Tip,
|
|
93
99
|
containerType: 'neutral',
|
|
94
|
-
focusBgColor: _styles.COLORS.primary_200
|
|
100
|
+
focusBgColor: _styles.COLORS.primary_200,
|
|
101
|
+
linkVisited: _styles.COLORS.primary_600,
|
|
102
|
+
linkFocused: _styles.COLORS.primary_800
|
|
95
103
|
};
|
|
96
104
|
var formatTypeToLowerCase = type === null || type === void 0 ? void 0 : type.toLowerCase();
|
|
97
105
|
|
|
@@ -103,6 +111,8 @@ var Banner = function Banner(_ref) {
|
|
|
103
111
|
bannerParams.icon = _SystemIcons.Help;
|
|
104
112
|
bannerParams.closeIconColor = _styles.COLORS.warning_500;
|
|
105
113
|
bannerParams.containerType = formatTypeToLowerCase;
|
|
114
|
+
bannerParams.linkVisited = _styles.COLORS.warning_600;
|
|
115
|
+
bannerParams.linkFocused = _styles.COLORS.warning_800;
|
|
106
116
|
} else if (formatTypeToLowerCase == 'critical') {
|
|
107
117
|
bannerParams.typeColor = _styles.COLORS.critical_100;
|
|
108
118
|
bannerParams.accentColor = _styles.COLORS.critical_700;
|
|
@@ -111,6 +121,8 @@ var Banner = function Banner(_ref) {
|
|
|
111
121
|
bannerParams.icon = _SystemIcons.TechnicalWarning;
|
|
112
122
|
bannerParams.closeIconColor = _styles.COLORS.critical_500;
|
|
113
123
|
bannerParams.containerType = formatTypeToLowerCase;
|
|
124
|
+
bannerParams.linkVisited = _styles.COLORS.critical_600;
|
|
125
|
+
bannerParams.linkFocused = _styles.COLORS.critical_800;
|
|
114
126
|
} else if (formatTypeToLowerCase == 'positive') {
|
|
115
127
|
bannerParams.typeColor = _styles.COLORS.correct_100;
|
|
116
128
|
bannerParams.accentColor = _styles.COLORS.correct_700;
|
|
@@ -119,11 +131,15 @@ var Banner = function Banner(_ref) {
|
|
|
119
131
|
bannerParams.icon = _SystemIcons.ThumbsUp;
|
|
120
132
|
bannerParams.closeIconColor = _styles.COLORS.correct_500;
|
|
121
133
|
bannerParams.containerType = formatTypeToLowerCase;
|
|
134
|
+
bannerParams.linkVisited = _styles.COLORS.correct_600;
|
|
135
|
+
bannerParams.linkFocused = _styles.COLORS.correct_800;
|
|
122
136
|
}
|
|
123
137
|
|
|
124
138
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainer, {
|
|
125
139
|
"data-testid": testId,
|
|
126
140
|
$type: bannerParams.typeColor,
|
|
141
|
+
linkFocused: bannerParams.linkFocused,
|
|
142
|
+
linkVisited: bannerParams.linkVisited,
|
|
127
143
|
link: bannerParams.accentColor,
|
|
128
144
|
hover: bannerParams.hoverColor,
|
|
129
145
|
bottom: bottom,
|
|
@@ -138,7 +154,7 @@ var Banner = function Banner(_ref) {
|
|
|
138
154
|
size: size,
|
|
139
155
|
width: width,
|
|
140
156
|
color: bannerParams.accentColor,
|
|
141
|
-
children: [children, "\xA0
|
|
157
|
+
children: [children, "\xA0", link && linkText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.HyperLink, {
|
|
142
158
|
id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
|
|
143
159
|
onClick: function onClick(e) {
|
|
144
160
|
if (linkAction) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","ComponentTextStyle","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","React","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_200","warning_20","Help","warning_500","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","correct_700","correct_200","correct_20","ThumbsUp","correct_500","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles/typography';\nimport { HyperLink } from '../HyperLink';\nimport { stringify } from 'querystring';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n a {\n color: ${(props: BannerProps) => props.link} !important;\n }\n`;\n\nconst BannerCenter = styled.div<{ $color: string }>`\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: string;\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon, linkAction }) => {\n const [width, setWidth] = React.useState<number>(window.innerWidth);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n });\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: Tip,\n containerType: 'neutral',\n focusBgColor: COLORS.primary_200,\n };\n const formatTypeToLowerCase = type?.toLowerCase();\n if (formatTypeToLowerCase == 'warning') {\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.containerType = formatTypeToLowerCase;\n } else if (formatTypeToLowerCase == 'critical') {\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.containerType = formatTypeToLowerCase;\n } else if (formatTypeToLowerCase == 'positive') {\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.containerType = formatTypeToLowerCase;\n }\n\n return (\n <BannerContainer data-testid={testId} $type={bannerParams.typeColor} link={bannerParams.accentColor} hover={bannerParams.hoverColor} bottom={bottom}>\n <BannerCenter $color={bannerParams.accentColor} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children} \n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"file":"Banner.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentTextStyle","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","React","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_600","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_600","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_600","correct_800","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles/typography';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {defaultStyle} from '../HyperLink/styling';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string, linkVisited: string, linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ${StyledLink} {\n &:link{\n color: ${(props) => props.link};\n }\n &:visited{\n color: ${(props) => props.linkVisited};\n }\n &:focus,\n &:active{\n background-color: ${(props) => props.linkFocused};\n color: ${COLORS.white};\n }\n }\n`;\n\nconst BannerCenter = styled.div<{ $color: string }>`\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: string;\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon, linkAction }) => {\n const [width, setWidth] = React.useState<number>(window.innerWidth);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n });\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: Tip,\n containerType: 'neutral',\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800\n };\n const formatTypeToLowerCase = type?.toLowerCase();\n if (formatTypeToLowerCase == 'warning') {\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.containerType = formatTypeToLowerCase;\n bannerParams.linkVisited = COLORS.warning_600;\n bannerParams.linkFocused = COLORS.warning_800;\n } else if (formatTypeToLowerCase == 'critical') {\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.containerType = formatTypeToLowerCase;\n bannerParams.linkVisited = COLORS.critical_600;\n bannerParams.linkFocused = COLORS.critical_800;\n } else if (formatTypeToLowerCase == 'positive') {\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.containerType = formatTypeToLowerCase;\n bannerParams.linkVisited = COLORS.correct_600;\n bannerParams.linkFocused = COLORS.correct_800;\n }\n\n return (\n <BannerContainer data-testid={testId} $type={bannerParams.typeColor} linkFocused={bannerParams.linkFocused} linkVisited={bannerParams.linkVisited} link={bannerParams.accentColor} hover={bannerParams.hoverColor} bottom={bottom}>\n <BannerCenter $color={bannerParams.accentColor} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children} \n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"file":"Banner.cjs"}
|
package/dist/Banners/Banner.js
CHANGED
|
@@ -12,15 +12,20 @@ import { IconButton } from '../Button';
|
|
|
12
12
|
import { getButtonStyle } from './styles';
|
|
13
13
|
import { ComponentMStyling, ComponentResponsive } from '../styles/typography';
|
|
14
14
|
import { HyperLink } from '../HyperLink';
|
|
15
|
+
import { StyledLink } from '../HyperLink/HyperLink';
|
|
15
16
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
17
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
17
|
-
var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: ", ";\n min-height: 48px;\n display: flex;\n color: ", ";\n margin-top: ", ";\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ", " {\n margin: 0 0 0 16px;\n }\n ", " {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n
|
|
18
|
+
var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: ", ";\n min-height: 48px;\n display: flex;\n color: ", ";\n margin-top: ", ";\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ", " {\n margin: 0 0 0 16px;\n }\n ", " {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ", " {\n &:link{\n color: ", ";\n }\n &:visited{\n color: ", ";\n }\n &:focus,\n &:active{\n background-color: ", ";\n color: ", ";\n }\n }\n"])), function (props) {
|
|
18
19
|
return props.$type ? props.$type : COLORS.correct_100;
|
|
19
20
|
}, COLORS.black, function (props) {
|
|
20
21
|
return props.bottom ? 'auto' : '0';
|
|
21
|
-
}, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, function (props) {
|
|
22
|
+
}, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, StyledLink, function (props) {
|
|
22
23
|
return props.link;
|
|
23
|
-
})
|
|
24
|
+
}, function (props) {
|
|
25
|
+
return props.linkVisited;
|
|
26
|
+
}, function (props) {
|
|
27
|
+
return props.linkFocused;
|
|
28
|
+
}, COLORS.white);
|
|
24
29
|
var BannerCenter = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ", " {\n margin: 0 32px;\n }\n ", " {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n"])), function (props) {
|
|
25
30
|
return ComponentMStyling(ComponentTextStyle.Regular, props.$color);
|
|
26
31
|
}, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
|
|
@@ -62,7 +67,9 @@ var Banner = function Banner(_ref) {
|
|
|
62
67
|
closeIconColor: COLORS.primary_500,
|
|
63
68
|
icon: Tip,
|
|
64
69
|
containerType: 'neutral',
|
|
65
|
-
focusBgColor: COLORS.primary_200
|
|
70
|
+
focusBgColor: COLORS.primary_200,
|
|
71
|
+
linkVisited: COLORS.primary_600,
|
|
72
|
+
linkFocused: COLORS.primary_800
|
|
66
73
|
};
|
|
67
74
|
var formatTypeToLowerCase = type === null || type === void 0 ? void 0 : type.toLowerCase();
|
|
68
75
|
|
|
@@ -74,6 +81,8 @@ var Banner = function Banner(_ref) {
|
|
|
74
81
|
bannerParams.icon = Help;
|
|
75
82
|
bannerParams.closeIconColor = COLORS.warning_500;
|
|
76
83
|
bannerParams.containerType = formatTypeToLowerCase;
|
|
84
|
+
bannerParams.linkVisited = COLORS.warning_600;
|
|
85
|
+
bannerParams.linkFocused = COLORS.warning_800;
|
|
77
86
|
} else if (formatTypeToLowerCase == 'critical') {
|
|
78
87
|
bannerParams.typeColor = COLORS.critical_100;
|
|
79
88
|
bannerParams.accentColor = COLORS.critical_700;
|
|
@@ -82,6 +91,8 @@ var Banner = function Banner(_ref) {
|
|
|
82
91
|
bannerParams.icon = TechnicalWarning;
|
|
83
92
|
bannerParams.closeIconColor = COLORS.critical_500;
|
|
84
93
|
bannerParams.containerType = formatTypeToLowerCase;
|
|
94
|
+
bannerParams.linkVisited = COLORS.critical_600;
|
|
95
|
+
bannerParams.linkFocused = COLORS.critical_800;
|
|
85
96
|
} else if (formatTypeToLowerCase == 'positive') {
|
|
86
97
|
bannerParams.typeColor = COLORS.correct_100;
|
|
87
98
|
bannerParams.accentColor = COLORS.correct_700;
|
|
@@ -90,11 +101,15 @@ var Banner = function Banner(_ref) {
|
|
|
90
101
|
bannerParams.icon = ThumbsUp;
|
|
91
102
|
bannerParams.closeIconColor = COLORS.correct_500;
|
|
92
103
|
bannerParams.containerType = formatTypeToLowerCase;
|
|
104
|
+
bannerParams.linkVisited = COLORS.correct_600;
|
|
105
|
+
bannerParams.linkFocused = COLORS.correct_800;
|
|
93
106
|
}
|
|
94
107
|
|
|
95
108
|
return /*#__PURE__*/_jsx(BannerContainer, {
|
|
96
109
|
"data-testid": testId,
|
|
97
110
|
$type: bannerParams.typeColor,
|
|
111
|
+
linkFocused: bannerParams.linkFocused,
|
|
112
|
+
linkVisited: bannerParams.linkVisited,
|
|
98
113
|
link: bannerParams.accentColor,
|
|
99
114
|
hover: bannerParams.hoverColor,
|
|
100
115
|
bottom: bottom,
|
|
@@ -109,7 +124,7 @@ var Banner = function Banner(_ref) {
|
|
|
109
124
|
size: size,
|
|
110
125
|
width: width,
|
|
111
126
|
color: bannerParams.accentColor,
|
|
112
|
-
children: [children, "\xA0
|
|
127
|
+
children: [children, "\xA0", link && linkText && /*#__PURE__*/_jsx(HyperLink, {
|
|
113
128
|
id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
|
|
114
129
|
onClick: function onClick(e) {
|
|
115
130
|
if (linkAction) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","BannerCenter","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","containerType","focusBgColor","primary_200","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_200","warning_20","warning_500","critical_100","critical_700","critical_200","critical_20","critical_500","correct_700","correct_200","correct_20","correct_500","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles/typography';\nimport { HyperLink } from '../HyperLink';\nimport { stringify } from 'querystring';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n a {\n color: ${(props: BannerProps) => props.link} !important;\n }\n`;\n\nconst BannerCenter = styled.div<{ $color: string }>`\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: string;\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon, linkAction }) => {\n const [width, setWidth] = React.useState<number>(window.innerWidth);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n });\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: Tip,\n containerType: 'neutral',\n focusBgColor: COLORS.primary_200,\n };\n const formatTypeToLowerCase = type?.toLowerCase();\n if (formatTypeToLowerCase == 'warning') {\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.containerType = formatTypeToLowerCase;\n } else if (formatTypeToLowerCase == 'critical') {\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.containerType = formatTypeToLowerCase;\n } else if (formatTypeToLowerCase == 'positive') {\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.containerType = formatTypeToLowerCase;\n }\n\n return (\n <BannerContainer data-testid={testId} $type={bannerParams.typeColor} link={bannerParams.accentColor} hover={bannerParams.hoverColor} bottom={bottom}>\n <BannerCenter $color={bannerParams.accentColor} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children} \n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","StyledLink","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","white","BannerCenter","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","containerType","focusBgColor","primary_200","primary_600","primary_800","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_200","warning_20","warning_500","warning_600","warning_800","critical_100","critical_700","critical_200","critical_20","critical_500","critical_600","critical_800","correct_700","correct_200","correct_20","correct_500","correct_600","correct_800","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles/typography';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {defaultStyle} from '../HyperLink/styling';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string, linkVisited: string, linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ${StyledLink} {\n &:link{\n color: ${(props) => props.link};\n }\n &:visited{\n color: ${(props) => props.linkVisited};\n }\n &:focus,\n &:active{\n background-color: ${(props) => props.linkFocused};\n color: ${COLORS.white};\n }\n }\n`;\n\nconst BannerCenter = styled.div<{ $color: string }>`\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: string;\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon, linkAction }) => {\n const [width, setWidth] = React.useState<number>(window.innerWidth);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n });\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: Tip,\n containerType: 'neutral',\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800\n };\n const formatTypeToLowerCase = type?.toLowerCase();\n if (formatTypeToLowerCase == 'warning') {\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.containerType = formatTypeToLowerCase;\n bannerParams.linkVisited = COLORS.warning_600;\n bannerParams.linkFocused = COLORS.warning_800;\n } else if (formatTypeToLowerCase == 'critical') {\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.containerType = formatTypeToLowerCase;\n bannerParams.linkVisited = COLORS.critical_600;\n bannerParams.linkFocused = COLORS.critical_800;\n } else if (formatTypeToLowerCase == 'positive') {\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.containerType = formatTypeToLowerCase;\n bannerParams.linkVisited = COLORS.correct_600;\n bannerParams.linkFocused = COLORS.correct_800;\n }\n\n return (\n <BannerContainer data-testid={testId} $type={bannerParams.typeColor} linkFocused={bannerParams.linkFocused} linkVisited={bannerParams.linkVisited} link={bannerParams.accentColor} hover={bannerParams.hoverColor} bottom={bottom}>\n <BannerCenter $color={bannerParams.accentColor} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children} \n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
|
|
@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports.default = void 0;
|
|
10
|
+
exports.default = exports.StyledLink = void 0;
|
|
11
11
|
|
|
12
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
13
|
|
|
@@ -43,6 +43,8 @@ var StyledLink = _styledComponents.default.a(_templateObject || (_templateObject
|
|
|
43
43
|
return props.margin ? "margin: ".concat(props.margin, ";") : '';
|
|
44
44
|
});
|
|
45
45
|
|
|
46
|
+
exports.StyledLink = StyledLink;
|
|
47
|
+
|
|
46
48
|
var HyperLink = function HyperLink(_ref) {
|
|
47
49
|
var children = _ref.children,
|
|
48
50
|
_ref$target = _ref.target,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","variant","invertedStyle","defaultStyle","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","variant","invertedStyle","defaultStyle","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEO,IAAMA,UAAU,GAAGC,0BAAOC,CAAV,0HAKnB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BC,sBAA/B,GAA+CC,qBAA3D;AAAA,CALmB,EAMnB,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACI,MAAN,qBAA0BJ,KAAK,CAACI,MAAhC,SAA4C,EAAxD;AAAA,CANmB,CAAhB;;;;AAmBP,IAAMC,SAAkD,GAAG,SAArDA,SAAqD,OAAoF;AAAA,MAAjFC,QAAiF,QAAjFA,QAAiF;AAAA,yBAAvEC,MAAuE;AAAA,MAAvEA,MAAuE,4BAA9D,QAA8D;AAAA,0BAApDN,OAAoD;AAAA,MAApDA,OAAoD,6BAA1C,SAA0C;AAAA,MAA5BD,KAA4B;AAC7I,sBACE,qBAAC,UAAD,kCAAgBA,KAAhB;AAAuB,IAAA,OAAO,EAAEC,OAAhC;AAAyC,IAAA,MAAM,EAAEM,MAAjD;AAAyD,IAAA,GAAG,EAAC,qBAA7D;AAAA,cACGD;AADH,KADF;AAKD,CAND;;;AATEE,EAAAA,E;AACAP,EAAAA,O,4BAAS,S,EAAY,U;AACrBQ,EAAAA,I;AACAC,EAAAA,Q;AACAN,EAAAA,M;AACAE,EAAAA,Q;AACAK,EAAAA,S;;eAWaN,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nexport const StyledLink = styled.a<{\n variant: 'default' | 'inverted';\n margin?: string;\n}>`\n cursor: pointer;\n ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n id?: string;\n variant: 'default' | 'inverted';\n href: string;\n disabled?: boolean;\n margin?: string;\n children?: any;\n className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\n return (\n <StyledLink {...props} variant={variant} target={target} rel=\"noopener noreferrer\">\n {children}\n </StyledLink>\n );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.cjs"}
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
export declare const StyledLink: import("styled-components").StyledComponent<"a", any, {
|
|
3
|
+
variant: 'default' | 'inverted';
|
|
4
|
+
margin?: string | undefined;
|
|
5
|
+
}, never>;
|
|
2
6
|
export interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
3
7
|
id?: string;
|
|
4
8
|
variant: 'default' | 'inverted';
|
|
@@ -14,7 +14,7 @@ import * as React from 'react';
|
|
|
14
14
|
import styled from 'styled-components';
|
|
15
15
|
import { defaultStyle, invertedStyle } from './styling';
|
|
16
16
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
17
|
-
var StyledLink = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n cursor: pointer;\n ", "\n ", "\n"])), function (props) {
|
|
17
|
+
export var StyledLink = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n cursor: pointer;\n ", "\n ", "\n"])), function (props) {
|
|
18
18
|
return props.variant === 'inverted' ? invertedStyle : defaultStyle;
|
|
19
19
|
}, function (props) {
|
|
20
20
|
return props.margin ? "margin: ".concat(props.margin, ";") : '';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/HyperLink/HyperLink.tsx"],"names":["React","styled","defaultStyle","invertedStyle","StyledLink","a","props","variant","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,YAAT,EAAuBC,aAAvB,QAA4C,WAA5C;;AAEA,IAAMC,UAAU,GAAGH,MAAM,CAACI,CAAV,
|
|
1
|
+
{"version":3,"sources":["../../src/HyperLink/HyperLink.tsx"],"names":["React","styled","defaultStyle","invertedStyle","StyledLink","a","props","variant","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,YAAT,EAAuBC,aAAvB,QAA4C,WAA5C;;AAEA,OAAO,IAAMC,UAAU,GAAGH,MAAM,CAACI,CAAV,4GAKnB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BJ,aAA/B,GAA+CD,YAA3D;AAAA,CALmB,EAMnB,UAACI,KAAD;AAAA,SAAYA,KAAK,CAACE,MAAN,qBAA0BF,KAAK,CAACE,MAAhC,SAA4C,EAAxD;AAAA,CANmB,CAAhB;;AAmBP,IAAMC,SAAkD,GAAG,SAArDA,SAAqD,OAAoF;AAAA,MAAjFC,QAAiF,QAAjFA,QAAiF;AAAA,yBAAvEC,MAAuE;AAAA,MAAvEA,MAAuE,4BAA9D,QAA8D;AAAA,0BAApDJ,OAAoD;AAAA,MAApDA,OAAoD,6BAA1C,SAA0C;AAAA,MAA5BD,KAA4B;;AAC7I,sBACE,KAAC,UAAD,kCAAgBA,KAAhB;AAAuB,IAAA,OAAO,EAAEC,OAAhC;AAAyC,IAAA,MAAM,EAAEI,MAAjD;AAAyD,IAAA,GAAG,EAAC,qBAA7D;AAAA,cACGD;AADH,KADF;AAKD,CAND;;;AATEE,EAAAA,E;AACAL,EAAAA,O,aAAS,S,EAAY,U;AACrBM,EAAAA,I;AACAC,EAAAA,Q;AACAN,EAAAA,M;AACAE,EAAAA,Q;AACAK,EAAAA,S;;AAWF,eAAeN,SAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nexport const StyledLink = styled.a<{\n variant: 'default' | 'inverted';\n margin?: string;\n}>`\n cursor: pointer;\n ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n id?: string;\n variant: 'default' | 'inverted';\n href: string;\n disabled?: boolean;\n margin?: string;\n children?: any;\n className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\n return (\n <StyledLink {...props} variant={variant} target={target} rel=\"noopener noreferrer\">\n {children}\n </StyledLink>\n );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}
|
|
@@ -15,7 +15,7 @@ var _ = require("..");
|
|
|
15
15
|
|
|
16
16
|
var _templateObject, _templateObject2;
|
|
17
17
|
|
|
18
|
-
var defaultStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n outline: none;\n padding: 2px 0;\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: none;\n\n &:link {\n font-weight: 700;\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover,\n &.hover-state {\n color: ", ";\n text-decoration-line: underline;\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n background: ", ";\n color: ", ";\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n background: ", ";\n color: ", ";\n }\n\n\n &:focus:hover,\n &:active:hover,\n &.active-state:hover,\n &.focus-state:hover{\n text-decoration-line: none;\n color: ", ";\n opacity: 0.9;\n }\n"])), _.COLORS.primary_500, _.COLORS.
|
|
18
|
+
var defaultStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n outline: none;\n padding: 2px 0;\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: none;\n\n &:link {\n font-weight: 700;\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover,\n &.hover-state {\n color: ", ";\n text-decoration-line: underline;\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n background: ", ";\n color: ", ";\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n background: ", ";\n color: ", ";\n }\n\n\n &:focus:hover,\n &:active:hover,\n &.active-state:hover,\n &.focus-state:hover{\n text-decoration-line: none;\n color: ", ";\n opacity: 0.9;\n }\n"])), _.COLORS.primary_500, _.COLORS.primary_400, _.COLORS.primary_700, _.COLORS.primary_800, _.COLORS.white, _.COLORS.primary_800, _.COLORS.white, _.COLORS.white);
|
|
19
19
|
exports.defaultStyle = defaultStyle;
|
|
20
20
|
var invertedStyle = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n outline: none;\n padding: 2px 0;\n\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: underline;\n\n &:link {\n font-weight: 700;\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ", ";\n color: ", ";\n }\n\n &:hover,\n &.hover-state {\n text-decoration-line: none;\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ", ";\n color: ", ";\n }\n\n &:focus:hover,\n &:active:hover {\n text-decoration-line: none;\n color: ", ";\n opacity: 0.9;\n }\n"])), _.COLORS.white, _.COLORS.neutral_100, _.COLORS.white, _.COLORS.neutral_800, _.COLORS.white, _.COLORS.neutral_800, _.COLORS.neutral_800);
|
|
21
21
|
exports.invertedStyle = invertedStyle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/HyperLink/styling.ts"],"names":["defaultStyle","css","COLORS","primary_500","
|
|
1
|
+
{"version":3,"sources":["../../src/HyperLink/styling.ts"],"names":["defaultStyle","css","COLORS","primary_500","primary_400","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEO,IAAMA,YAAY,OAAGC,qBAAH,uzBAUZC,SAAOC,WAVK,EAcZD,SAAOE,WAdK,EAmBZF,SAAOG,WAnBK,EA0BPH,SAAOI,WA1BA,EA2BZJ,SAAOK,KA3BK,EAiCPL,SAAOI,WAjCA,EAkCZJ,SAAOK,KAlCK,EA2CZL,SAAOK,KA3CK,CAAlB;;AAgDA,IAAMC,aAAa,OAAGP,qBAAH,yzBAWbC,SAAOK,KAXM,EAebL,SAAOO,WAfM,EAsBRP,SAAOK,KAtBC,EAuBbL,SAAOQ,WAvBM,EAmCRR,SAAOK,KAnCC,EAoCbL,SAAOQ,WApCM,EA0CbR,SAAOQ,WA1CM,CAAnB","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n outline: none;\n padding: 2px 0;\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: none;\n\n &:link {\n font-weight: 700;\n color: ${COLORS.primary_500};\n }\n\n &:visited {\n color: ${COLORS.primary_400};\n }\n\n &:hover,\n &.hover-state {\n color: ${COLORS.primary_700};\n text-decoration-line: underline;\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n background: ${COLORS.primary_800};\n color: ${COLORS.white};\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n background: ${COLORS.primary_800};\n color: ${COLORS.white};\n }\n\n\n &:focus:hover,\n &:active:hover,\n &.active-state:hover,\n &.focus-state:hover{\n text-decoration-line: none;\n color: ${COLORS.white};\n opacity: 0.9;\n }\n`;\n\nexport const invertedStyle = css`\n outline: none;\n padding: 2px 0;\n\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: underline;\n\n &:link {\n font-weight: 700;\n color: ${COLORS.white};\n }\n\n &:visited {\n color: ${COLORS.neutral_100};\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ${COLORS.white};\n color: ${COLORS.neutral_800};\n }\n\n &:hover,\n &.hover-state {\n text-decoration-line: none;\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ${COLORS.white};\n color: ${COLORS.neutral_800};\n }\n\n &:focus:hover,\n &:active:hover {\n text-decoration-line: none;\n color: ${COLORS.neutral_800};\n opacity: 0.9;\n }\n`;\n"],"file":"styling.cjs"}
|
|
@@ -4,6 +4,6 @@ var _templateObject, _templateObject2;
|
|
|
4
4
|
|
|
5
5
|
import { css } from 'styled-components';
|
|
6
6
|
import { COLORS } from '..';
|
|
7
|
-
export var defaultStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n outline: none;\n padding: 2px 0;\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: none;\n\n &:link {\n font-weight: 700;\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover,\n &.hover-state {\n color: ", ";\n text-decoration-line: underline;\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n background: ", ";\n color: ", ";\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n background: ", ";\n color: ", ";\n }\n\n\n &:focus:hover,\n &:active:hover,\n &.active-state:hover,\n &.focus-state:hover{\n text-decoration-line: none;\n color: ", ";\n opacity: 0.9;\n }\n"])), COLORS.primary_500, COLORS.
|
|
7
|
+
export var defaultStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n outline: none;\n padding: 2px 0;\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: none;\n\n &:link {\n font-weight: 700;\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover,\n &.hover-state {\n color: ", ";\n text-decoration-line: underline;\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n background: ", ";\n color: ", ";\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n background: ", ";\n color: ", ";\n }\n\n\n &:focus:hover,\n &:active:hover,\n &.active-state:hover,\n &.focus-state:hover{\n text-decoration-line: none;\n color: ", ";\n opacity: 0.9;\n }\n"])), COLORS.primary_500, COLORS.primary_400, COLORS.primary_700, COLORS.primary_800, COLORS.white, COLORS.primary_800, COLORS.white, COLORS.white);
|
|
8
8
|
export var invertedStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n outline: none;\n padding: 2px 0;\n\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: underline;\n\n &:link {\n font-weight: 700;\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ", ";\n color: ", ";\n }\n\n &:hover,\n &.hover-state {\n text-decoration-line: none;\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ", ";\n color: ", ";\n }\n\n &:focus:hover,\n &:active:hover {\n text-decoration-line: none;\n color: ", ";\n opacity: 0.9;\n }\n"])), COLORS.white, COLORS.neutral_100, COLORS.white, COLORS.neutral_800, COLORS.white, COLORS.neutral_800, COLORS.neutral_800);
|
|
9
9
|
//# sourceMappingURL=styling.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/HyperLink/styling.ts"],"names":["css","COLORS","defaultStyle","primary_500","
|
|
1
|
+
{"version":3,"sources":["../../src/HyperLink/styling.ts"],"names":["css","COLORS","defaultStyle","primary_500","primary_400","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,MAAT,QAAuB,IAAvB;AAEA,OAAO,IAAMC,YAAY,GAAGF,GAAH,wyBAUZC,MAAM,CAACE,WAVK,EAcZF,MAAM,CAACG,WAdK,EAmBZH,MAAM,CAACI,WAnBK,EA0BPJ,MAAM,CAACK,WA1BA,EA2BZL,MAAM,CAACM,KA3BK,EAiCPN,MAAM,CAACK,WAjCA,EAkCZL,MAAM,CAACM,KAlCK,EA2CZN,MAAM,CAACM,KA3CK,CAAlB;AAgDP,OAAO,IAAMC,aAAa,GAAGR,GAAH,0yBAWbC,MAAM,CAACM,KAXM,EAebN,MAAM,CAACQ,WAfM,EAsBRR,MAAM,CAACM,KAtBC,EAuBbN,MAAM,CAACS,WAvBM,EAmCRT,MAAM,CAACM,KAnCC,EAoCbN,MAAM,CAACS,WApCM,EA0CbT,MAAM,CAACS,WA1CM,CAAnB","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n outline: none;\n padding: 2px 0;\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: none;\n\n &:link {\n font-weight: 700;\n color: ${COLORS.primary_500};\n }\n\n &:visited {\n color: ${COLORS.primary_400};\n }\n\n &:hover,\n &.hover-state {\n color: ${COLORS.primary_700};\n text-decoration-line: underline;\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n background: ${COLORS.primary_800};\n color: ${COLORS.white};\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n background: ${COLORS.primary_800};\n color: ${COLORS.white};\n }\n\n\n &:focus:hover,\n &:active:hover,\n &.active-state:hover,\n &.focus-state:hover{\n text-decoration-line: none;\n color: ${COLORS.white};\n opacity: 0.9;\n }\n`;\n\nexport const invertedStyle = css`\n outline: none;\n padding: 2px 0;\n\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: underline;\n\n &:link {\n font-weight: 700;\n color: ${COLORS.white};\n }\n\n &:visited {\n color: ${COLORS.neutral_100};\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ${COLORS.white};\n color: ${COLORS.neutral_800};\n }\n\n &:hover,\n &.hover-state {\n text-decoration-line: none;\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ${COLORS.white};\n color: ${COLORS.neutral_800};\n }\n\n &:focus:hover,\n &:active:hover {\n text-decoration-line: none;\n color: ${COLORS.neutral_800};\n opacity: 0.9;\n }\n`;\n"],"file":"styling.js"}
|
|
@@ -53,9 +53,7 @@ var ModalDialog = function ModalDialog(_ref) {
|
|
|
53
53
|
state = _ref.state,
|
|
54
54
|
icon = _ref.icon,
|
|
55
55
|
yOffset = _ref.yOffset,
|
|
56
|
-
zIndex = _ref.zIndex
|
|
57
|
-
contentOverflow = _ref.contentOverflow,
|
|
58
|
-
width = _ref.width;
|
|
56
|
+
zIndex = _ref.zIndex;
|
|
59
57
|
|
|
60
58
|
var getMinWidth = function getMinWidth() {
|
|
61
59
|
switch (size) {
|
|
@@ -347,7 +345,6 @@ var ModalDialog = function ModalDialog(_ref) {
|
|
|
347
345
|
modalHeight: "auto",
|
|
348
346
|
padding: getPadding(),
|
|
349
347
|
zIndex: zIndex,
|
|
350
|
-
modalWidth: width,
|
|
351
348
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.Column, {
|
|
352
349
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
|
|
353
350
|
onSubmit: submitAction,
|
|
@@ -380,7 +377,6 @@ var ModalDialog = function ModalDialog(_ref) {
|
|
|
380
377
|
})]
|
|
381
378
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.ModalBody, {
|
|
382
379
|
size: size,
|
|
383
|
-
overflow: contentOverflow,
|
|
384
380
|
children: children
|
|
385
381
|
}), note && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalNote.ModalNote, {
|
|
386
382
|
note: note,
|
|
@@ -423,9 +419,7 @@ ModalDialog.propTypes = {
|
|
|
423
419
|
state: _propTypes.default.string,
|
|
424
420
|
icon: _propTypes.default.node,
|
|
425
421
|
yOffset: _propTypes.default.number,
|
|
426
|
-
zIndex: _propTypes.default.number
|
|
427
|
-
contentOverflow: _propTypes.default.string,
|
|
428
|
-
width: _propTypes.default.string
|
|
422
|
+
zIndex: _propTypes.default.number
|
|
429
423
|
};
|
|
430
424
|
var _default = ModalDialog;
|
|
431
425
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","titleSize","subtitleSize","isModalOpen","closeModalAndClearInput","title","subtitle","subtitlePosition","topImage","topImageWithFallbacksProps","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","zIndex","contentOverflow","width","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","ComponentTextStyle","Bold","ModalSubtitle","COLORS","neutral_500","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","document","body","setAttribute","window","scrollTo","display","flexDirection","maxHeight","loader","alt","fallbacks","src","ModalSubtitlePosition","ABOVE","BELOW","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, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS } from '../styles';\nimport { Size, ModalSubtitlePosition } 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} 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 titleSize?: Size;\n subtitleSize?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string;\n subtitle?: string;\n subtitlePosition?: ModalSubtitlePosition;\n topImage?: any;\n topImageWithFallbacksProps?: ImageWithFallbacksProps;\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 yOffset?: number;\n zIndex?: number;\n contentOverflow?: string;\n width?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n titleSize,\n subtitleSize,\n isModalOpen,\n closeModalAndClearInput,\n title,\n subtitle,\n subtitlePosition,\n topImage,\n topImageWithFallbacksProps,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n yOffset,\n zIndex,\n contentOverflow,\n width,\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, size?: Size) => {\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 };\n\n const ModalSubtitle = (subtitle: string, size?: Size) => {\n switch (size) {\n case Size.Small:\n return <ComponentXS color={COLORS.neutral_500}>{subtitle}</ComponentXS>;\n case Size.Medium:\n return <ComponentS color={COLORS.neutral_500}>{subtitle}</ComponentS>;\n case Size.Large:\n return <ComponentM color={COLORS.neutral_500}>{subtitle}</ComponentM>;\n default:\n return <ComponentS color={COLORS.neutral_500}>{subtitle}</ComponentS>;\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 React.useEffect(() => {\n let yPos = yOffset ? yOffset : 0;\n if (isModalOpen) {\n document.body.setAttribute(\n 'style',\n `position: fixed;\n left: 0; right: 0;\n top: -${yPos}px`,\n );\n }\n return () => {\n document.body.setAttribute('style', '');\n window.scrollTo(0, yPos);\n };\n }, [isModalOpen]);\n\n return (\n <ModalContainer\n showModal={isModalOpen}\n closeModal={closeModalAndClearInput}\n minWidth={getMinWidth()}\n maxWidth={getMaxWidth()}\n modalHeight=\"auto\"\n padding={getPadding()}\n zIndex={zIndex}\n modalWidth={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 {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}></ImageWithFallbacks>\n )}\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n {subtitle && subtitlePosition === ModalSubtitlePosition.ABOVE && ModalSubtitle(subtitle, subtitleSize ?? size)}\n {title && ModalTitle(title, titleSize ?? size)}\n {subtitle && subtitlePosition === ModalSubtitlePosition.BELOW && ModalSubtitle(subtitle, subtitleSize ?? 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}>\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","titleSize","subtitleSize","isModalOpen","closeModalAndClearInput","title","subtitle","subtitlePosition","topImage","topImageWithFallbacksProps","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","zIndex","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","ComponentTextStyle","Bold","ModalSubtitle","COLORS","neutral_500","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","document","body","setAttribute","window","scrollTo","display","flexDirection","maxHeight","loader","alt","fallbacks","src","ModalSubtitlePosition","ABOVE","BELOW","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, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS } from '../styles';\nimport { Size, ModalSubtitlePosition } 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} 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 titleSize?: Size;\n subtitleSize?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string;\n subtitle?: string;\n subtitlePosition?: ModalSubtitlePosition;\n topImage?: any;\n topImageWithFallbacksProps?: ImageWithFallbacksProps;\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 yOffset?: number;\n zIndex?: number;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n titleSize,\n subtitleSize,\n isModalOpen,\n closeModalAndClearInput,\n title,\n subtitle,\n subtitlePosition,\n topImage,\n topImageWithFallbacksProps,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n yOffset,\n zIndex,\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, size?: Size) => {\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 };\n\n const ModalSubtitle = (subtitle: string, size?: Size) => {\n switch (size) {\n case Size.Small:\n return <ComponentXS color={COLORS.neutral_500}>{subtitle}</ComponentXS>;\n case Size.Medium:\n return <ComponentS color={COLORS.neutral_500}>{subtitle}</ComponentS>;\n case Size.Large:\n return <ComponentM color={COLORS.neutral_500}>{subtitle}</ComponentM>;\n default:\n return <ComponentS color={COLORS.neutral_500}>{subtitle}</ComponentS>;\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 React.useEffect(() => {\n let yPos = yOffset ? yOffset : 0;\n if (isModalOpen) {\n document.body.setAttribute(\n 'style',\n `position: fixed;\n left: 0; right: 0;\n top: -${yPos}px`,\n );\n }\n return () => {\n document.body.setAttribute('style', '');\n window.scrollTo(0, yPos);\n };\n }, [isModalOpen]);\n\n return (\n <ModalContainer\n showModal={isModalOpen}\n closeModal={closeModalAndClearInput}\n minWidth={getMinWidth()}\n maxWidth={getMaxWidth()}\n modalHeight=\"auto\"\n padding={getPadding()}\n zIndex={zIndex}>\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 {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}></ImageWithFallbacks>\n )}\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n {subtitle && subtitlePosition === ModalSubtitlePosition.ABOVE && ModalSubtitle(subtitle, subtitleSize ?? size)}\n {title && ModalTitle(title, titleSize ?? size)}\n {subtitle && subtitlePosition === ModalSubtitlePosition.BELOW && ModalSubtitle(subtitle, subtitleSize ?? size)}\n </FlexContainer>\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n </ModalTitleSection>\n\n <ModalBody size={size}>{children}</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"}
|
|
@@ -33,9 +33,7 @@ export var ModalDialog = function ModalDialog(_ref) {
|
|
|
33
33
|
state = _ref.state,
|
|
34
34
|
icon = _ref.icon,
|
|
35
35
|
yOffset = _ref.yOffset,
|
|
36
|
-
zIndex = _ref.zIndex
|
|
37
|
-
contentOverflow = _ref.contentOverflow,
|
|
38
|
-
width = _ref.width;
|
|
36
|
+
zIndex = _ref.zIndex;
|
|
39
37
|
|
|
40
38
|
var getMinWidth = function getMinWidth() {
|
|
41
39
|
switch (size) {
|
|
@@ -326,7 +324,6 @@ export var ModalDialog = function ModalDialog(_ref) {
|
|
|
326
324
|
modalHeight: "auto",
|
|
327
325
|
padding: getPadding(),
|
|
328
326
|
zIndex: zIndex,
|
|
329
|
-
modalWidth: width,
|
|
330
327
|
children: /*#__PURE__*/_jsx(Column, {
|
|
331
328
|
children: /*#__PURE__*/_jsxs("form", {
|
|
332
329
|
onSubmit: submitAction,
|
|
@@ -359,7 +356,6 @@ export var ModalDialog = function ModalDialog(_ref) {
|
|
|
359
356
|
})]
|
|
360
357
|
}), /*#__PURE__*/_jsx(ModalBody, {
|
|
361
358
|
size: size,
|
|
362
|
-
overflow: contentOverflow,
|
|
363
359
|
children: children
|
|
364
360
|
}), note && /*#__PURE__*/_jsx(ModalNote, {
|
|
365
361
|
note: note,
|
|
@@ -400,9 +396,7 @@ ModalDialog.propTypes = {
|
|
|
400
396
|
state: _pt.string,
|
|
401
397
|
icon: _pt.node,
|
|
402
398
|
yOffset: _pt.number,
|
|
403
|
-
zIndex: _pt.number
|
|
404
|
-
contentOverflow: _pt.string,
|
|
405
|
-
width: _pt.string
|
|
399
|
+
zIndex: _pt.number
|
|
406
400
|
};
|
|
407
401
|
export default ModalDialog;
|
|
408
402
|
//# sourceMappingURL=ModalDialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentS","ComponentTextStyle","ComponentXL","ComponentXS","Size","ModalSubtitlePosition","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ModalNote","TooltipWrapper","HyperLink","ImageWithFallbacks","ModalDialog","size","titleSize","subtitleSize","isModalOpen","closeModalAndClearInput","title","subtitle","subtitlePosition","topImage","topImageWithFallbacksProps","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","zIndex","contentOverflow","width","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","Bold","ModalSubtitle","neutral_500","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","document","body","setAttribute","window","scrollTo","display","flexDirection","maxHeight","loader","alt","fallbacks","src","ABOVE","BELOW","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, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS } from '../styles';\nimport { Size, ModalSubtitlePosition } 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} 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 titleSize?: Size;\n subtitleSize?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string;\n subtitle?: string;\n subtitlePosition?: ModalSubtitlePosition;\n topImage?: any;\n topImageWithFallbacksProps?: ImageWithFallbacksProps;\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 yOffset?: number;\n zIndex?: number;\n contentOverflow?: string;\n width?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n titleSize,\n subtitleSize,\n isModalOpen,\n closeModalAndClearInput,\n title,\n subtitle,\n subtitlePosition,\n topImage,\n topImageWithFallbacksProps,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n yOffset,\n zIndex,\n contentOverflow,\n width,\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, size?: Size) => {\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 };\n\n const ModalSubtitle = (subtitle: string, size?: Size) => {\n switch (size) {\n case Size.Small:\n return <ComponentXS color={COLORS.neutral_500}>{subtitle}</ComponentXS>;\n case Size.Medium:\n return <ComponentS color={COLORS.neutral_500}>{subtitle}</ComponentS>;\n case Size.Large:\n return <ComponentM color={COLORS.neutral_500}>{subtitle}</ComponentM>;\n default:\n return <ComponentS color={COLORS.neutral_500}>{subtitle}</ComponentS>;\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 React.useEffect(() => {\n let yPos = yOffset ? yOffset : 0;\n if (isModalOpen) {\n document.body.setAttribute(\n 'style',\n `position: fixed;\n left: 0; right: 0;\n top: -${yPos}px`,\n );\n }\n return () => {\n document.body.setAttribute('style', '');\n window.scrollTo(0, yPos);\n };\n }, [isModalOpen]);\n\n return (\n <ModalContainer\n showModal={isModalOpen}\n closeModal={closeModalAndClearInput}\n minWidth={getMinWidth()}\n maxWidth={getMaxWidth()}\n modalHeight=\"auto\"\n padding={getPadding()}\n zIndex={zIndex}\n modalWidth={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 {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}></ImageWithFallbacks>\n )}\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n {subtitle && subtitlePosition === ModalSubtitlePosition.ABOVE && ModalSubtitle(subtitle, subtitleSize ?? size)}\n {title && ModalTitle(title, titleSize ?? size)}\n {subtitle && subtitlePosition === ModalSubtitlePosition.BELOW && ModalSubtitle(subtitle, subtitleSize ?? 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}>\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","ComponentS","ComponentTextStyle","ComponentXL","ComponentXS","Size","ModalSubtitlePosition","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ModalNote","TooltipWrapper","HyperLink","ImageWithFallbacks","ModalDialog","size","titleSize","subtitleSize","isModalOpen","closeModalAndClearInput","title","subtitle","subtitlePosition","topImage","topImageWithFallbacksProps","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","zIndex","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","Bold","ModalSubtitle","neutral_500","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","document","body","setAttribute","window","scrollTo","display","flexDirection","maxHeight","loader","alt","fallbacks","src","ABOVE","BELOW","map","b","i","id"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,EAAiBC,UAAjB,QAAmC,WAAnC;AACA,SAASC,aAAT,EAAwBC,KAAxB,EAA+BC,IAA/B,QAA2C,kCAA3C;AACA,SAASC,MAAT,EAAiBC,UAAjB,EAA6BC,UAA7B,EAAyCC,UAAzC,EAAqDC,kBAArD,EAAyEC,WAAzE,EAAsFC,WAAtF,QAAyG,WAAzG;AACA,SAASC,IAAT,EAAeC,qBAAf,QAA4C,UAA5C;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AACA,SACEC,iBADF,EAEEC,kBAFF,EAGEC,MAHF,EAIEC,aAJF,EAKEC,SALF,EAMEC,WANF,EAOEC,kBAPF,EAQEC,2BARF,EASEC,iBATF,EAUEC,iBAVF,EAWEC,kBAXF,QAYO,eAZP;AAcA,SAASC,SAAT,QAA0B,aAA1B;AACA,SAASC,cAAT,QAA+B,aAA/B;AAEA,SAASC,SAAT,EAAoBC,kBAApB,QAA8C,IAA9C;;;AA2BA,OAAO,IAAMC,WAAmD,GAAG,SAAtDA,WAAsD,OAuB7D;AAAA,MAtBJC,IAsBI,QAtBJA,IAsBI;AAAA,MArBJC,SAqBI,QArBJA,SAqBI;AAAA,MApBJC,YAoBI,QApBJA,YAoBI;AAAA,MAnBJC,WAmBI,QAnBJA,WAmBI;AAAA,MAlBJC,uBAkBI,QAlBJA,uBAkBI;AAAA,MAjBJC,KAiBI,QAjBJA,KAiBI;AAAA,MAhBJC,QAgBI,QAhBJA,QAgBI;AAAA,MAfJC,gBAeI,QAfJA,gBAeI;AAAA,MAdJC,QAcI,QAdJA,QAcI;AAAA,MAbJC,0BAaI,QAbJA,0BAaI;AAAA,MAZJC,OAYI,QAZJA,OAYI;AAAA,MAXJC,gBAWI,QAXJA,gBAWI;AAAA,MAVJC,UAUI,QAVJA,UAUI;AAAA,MATJC,WASI,QATJA,WASI;AAAA,MARJC,YAQI,QARJA,YAQI;AAAA,MAPJC,OAOI,QAPJA,OAOI;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,IAKI,QALJA,IAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,IAGI,QAHJA,IAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADJC,MACI,QADJA,MACI;;AACJ,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,YAAQtB,IAAR;AACE,WAAKnB,IAAI,CAAC0C,KAAV;AACE,eAAO,OAAP;;AACF,WAAK1C,IAAI,CAAC2C,KAAV;AACE,eAAO,OAAP;;AACF,WAAK3C,IAAI,CAAC4C,MAAV;AACA;AACE,eAAO,OAAP;AAPJ;AASD,GAVD;;AAYA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,YAAQ1B,IAAR;AACE,WAAKnB,IAAI,CAAC0C,KAAV;AACE,eAAO,OAAP;;AACF,WAAK1C,IAAI,CAAC2C,KAAV;AACE,eAAO,OAAP;;AACF,WAAK3C,IAAI,CAAC4C,MAAV;AACA;AACE,eAAO,OAAP;AAPJ;AASD,GAVD;;AAYA,MAAME,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,YAAQ3B,IAAR;AACE,WAAKnB,IAAI,CAAC0C,KAAV;AACE,eAAO,GAAP;;AACF,WAAK1C,IAAI,CAAC4C,MAAV;AACE,eAAO,GAAP;;AACF,WAAK5C,IAAI,CAAC2C,KAAV;AACE,eAAO,GAAP;;AACF;AACE,eAAO,GAAP;AARJ;AAUD,GAXD;;AAaA,MAAMI,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,YAAQ5B,IAAR;AACE,WAAKnB,IAAI,CAAC0C,KAAV;AACE,eAAO,MAAP;;AACF,WAAK1C,IAAI,CAAC4C,MAAV;AACE,eAAO,MAAP;;AACF,WAAK5C,IAAI,CAAC2C,KAAV;AACE,eAAO,MAAP;;AACF;AACE,eAAO,MAAP;AARJ;AAUD,GAXD;;AAaA,MAAMK,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,YAAQ7B,IAAR;AACE,WAAKnB,IAAI,CAAC0C,KAAV;AACE,eAAO,eAAP;;AACF,WAAK1C,IAAI,CAAC4C,MAAV;AACE,eAAO,gBAAP;;AACF,WAAK5C,IAAI,CAAC2C,KAAV;AACE,eAAO,MAAP;;AACF;AACE,eAAO,gBAAP;AARJ;AAUD,GAXD;;AAaA,MAAMM,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,YAAQ9B,IAAR;AACE,WAAKnB,IAAI,CAAC0C,KAAV;AACE,eAAO,oBAAP;;AACF,WAAK1C,IAAI,CAAC4C,MAAV;AACE,eAAO,oBAAP;;AACF,WAAK5C,IAAI,CAAC2C,KAAV;AACE,eAAO,oBAAP;;AACF;AACE,eAAO,oBAAP;AARJ;AAUD,GAXD;;AAaA,MAAMO,UAAU,GAAG,SAAbA,UAAa,CAAC1B,KAAD,EAAgBL,IAAhB,EAAgC;AACjD,YAAQA,IAAR;AACE,WAAKnB,IAAI,CAAC0C,KAAV;AACE,4BAAO,KAAC,UAAD;AAAY,UAAA,SAAS,EAAE7C,kBAAkB,CAACsD,IAA1C;AAAA,oBAAiD3B;AAAjD,UAAP;;AACF,WAAKxB,IAAI,CAAC4C,MAAV;AACE,4BAAO,KAAC,UAAD;AAAY,UAAA,SAAS,EAAE/C,kBAAkB,CAACsD,IAA1C;AAAA,oBAAiD3B;AAAjD,UAAP;;AACF,WAAKxB,IAAI,CAAC2C,KAAV;AACE,4BAAO,KAAC,WAAD;AAAa,UAAA,SAAS,EAAE9C,kBAAkB,CAACsD,IAA3C;AAAA,oBAAkD3B;AAAlD,UAAP;;AACF;AACE,4BAAO,KAAC,UAAD;AAAY,UAAA,SAAS,EAAE3B,kBAAkB,CAACsD,IAA1C;AAAA,oBAAiD3B;AAAjD,UAAP;AARJ;AAUD,GAXD;;AAaA,MAAM4B,aAAa,GAAG,SAAhBA,aAAgB,CAAC3B,QAAD,EAAmBN,IAAnB,EAAmC;AACvD,YAAQA,IAAR;AACE,WAAKnB,IAAI,CAAC0C,KAAV;AACE,4BAAO,KAAC,WAAD;AAAa,UAAA,KAAK,EAAEjD,MAAM,CAAC4D,WAA3B;AAAA,oBAAyC5B;AAAzC,UAAP;;AACF,WAAKzB,IAAI,CAAC4C,MAAV;AACE,4BAAO,KAAC,UAAD;AAAY,UAAA,KAAK,EAAEnD,MAAM,CAAC4D,WAA1B;AAAA,oBAAwC5B;AAAxC,UAAP;;AACF,WAAKzB,IAAI,CAAC2C,KAAV;AACE,4BAAO,KAAC,UAAD;AAAY,UAAA,KAAK,EAAElD,MAAM,CAAC4D,WAA1B;AAAA,oBAAwC5B;AAAxC,UAAP;;AACF;AACE,4BAAO,KAAC,UAAD;AAAY,UAAA,KAAK,EAAEhC,MAAM,CAAC4D,WAA1B;AAAA,oBAAwC5B;AAAxC,UAAP;AARJ;AAUD,GAXD;;AAaA,MAAM6B,WAAW,GAAG,SAAdA,WAAc,CAACpB,OAAD,EAAqB;AACvC,wBACE,KAAC,kBAAD;AAAA,6BACE,KAAC,cAAD;AAAgB,QAAA,KAAK,EAAC,IAAtB;AAA2B,QAAA,IAAI,EAAElC,IAAI,CAACuD,MAAtC;AAA8C,QAAA,KAAK,EAAC,QAApD;AAA6D,QAAA,QAAQ,EAAC,KAAtE;AAA4E,QAAA,SAAS,EAAE,KAAvF;AAA8F,QAAA,KAAK,EAAErB,OAArG;AAAA,+BACE,KAAC,UAAD;AAAY,UAAA,OAAO,EAAC,WAApB;AAAgC,UAAA,KAAK,EAAC,UAAtC;AAAiD,UAAA,MAAM,EAAE,kBAAM,CAAE,CAAjE;AAAA,iCACE,KAAC,IAAD;AAAM,YAAA,IAAI,EAAC,MAAX;AAAkB,YAAA,KAAK,EAAEzC,MAAM,CAAC+D;AAAhC;AADF;AADF;AADF,MADF;AASD,GAVD;;AAYA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAAkB;AACzC,wBACE,KAAC,kBAAD;AAAoB,MAAA,QAAQ,EAAE,CAAC,CAAC/B,QAAF,IAAc,CAAC,CAACC,0BAA9C;AAA0E,MAAA,IAAI,EAAET,IAAhF;AAAA,6BACE,KAAC,UAAD;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,KAAC,KAAD;AAAO,UAAA,IAAI,EAAC,MAAZ;AAAmB,UAAA,KAAK,EAAEjE,MAAM,CAACkE;AAAjC;AADF;AADF,MADF;AAOD,GARD;;AAUA,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B,QAAI7B,UAAJ,EAAgB;AACd,0BACE,KAAC,iBAAD;AAAmB,QAAA,QAAQ,EAAE,CAAC,CAACJ,QAAF,IAAc,CAAC,CAACC,0BAA7C;AAAyE,QAAA,IAAI,EAAET,IAA/E;AAAA,+BACE,KAAC,UAAD;AAAY,UAAA,OAAO,EAAC,WAApB;AAAgC,UAAA,KAAK,EAAC,UAAtC;AAAiD,UAAA,MAAM,EAAE;AAAA,mBAAMY,UAAU,EAAhB;AAAA,WAAzD;AAA6E,UAAA,YAAY,EAAE,EAA3F;AAAA,iCACE,KAAC,aAAD;AAAe,YAAA,IAAI,EAAC,MAApB;AAA2B,YAAA,KAAK,EAAEtC,MAAM,CAACkE;AAAzC;AADF;AADF,QADF;AAOD;AACF,GAVD;;AAYA,MAAME,wBAAwB,GAAG,SAA3BA,wBAA2B,CAACvB,IAAD,EAA2B;AAC1D,wBAAOnD,KAAK,CAAC2E,YAAN,CAAmBxB,IAAnB,EAA+C;AAAEnB,MAAAA,IAAI,EAAEA,IAAI,KAAKnB,IAAI,CAAC0C,KAAd,GAAsB,MAAtB,GAA+BvB,IAAI,KAAKnB,IAAI,CAAC2C,KAAd,GAAsB,MAAtB,GAA+B;AAAtE,KAA/C,CAAP;AACD,GAFD;;AAIA,MAAMoB,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACjC,gBAAD,EAAwC;AAAA;;AAC/D,QAAQkC,IAAR,GAAqDlC,gBAArD,CAAQkC,IAAR;AAAA,QAAcC,UAAd,GAAqDnC,gBAArD,CAAcmC,UAAd;AAAA,QAA0BC,QAA1B,GAAqDpC,gBAArD,CAA0BoC,QAA1B;AAAA,QAAoC5B,IAApC,GAAqDR,gBAArD,CAAoCQ,IAApC;AAAA,QAA0C6B,MAA1C,GAAqDrC,gBAArD,CAA0CqC,MAA1C;;AACA,YAAQF,UAAR;AACE,WAAK,QAAL;AACE,4BACE,KAAC,MAAD;AACE,UAAA,EAAE,EAAE,oBADN;AAEE,UAAA,IAAI,EAAGnC,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAD,CAAwCsC,IAFhD;AAGE,UAAA,QAAQ,EAAEF,QAHZ;AAIE,UAAA,OAAO,EAAGpC,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAD,CAAwCuC,OAJnD;AAKE,UAAA,IAAI,EAAE/B,IALR;AAME,UAAA,IAAI,EAAEnB,IANR;AAOE,UAAA,OAAO,EAAEgD,MAPX;AAQE,UAAA,OAAO,cAAGrC,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAD,CAAwCwC,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,MAAC,SAAD;AACE,UAAA,EAAE,EAAC,uBADL;AAEE,UAAA,SAAS,EAAC,eAFZ;AAGE,UAAA,IAAI,EAAGlC,gBAAD,CAA0C2C,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,qBAYGpC,IAAI,IAAIuB,wBAAwB,CAACvB,IAAD,CAZnC,EAaG0B,IAbH;AAAA,UADF;;AAiBF,WAAK,MAAL;AACE,4BACE;AAAK,UAAA,SAAS,EAAC,oBAAf;AAAA,qBACG1B,IAAI,IAAIuB,wBAAwB,CAACvB,IAAD,CADnC,eAEE;AAAA,sBAAO0B;AAAP,YAFF;AAAA,UADF;AAnCJ;AA0CD,GA5CD;;AA8CA7E,EAAAA,KAAK,CAACyF,SAAN,CAAgB,YAAM;AACpB,QAAIC,IAAI,GAAGtC,OAAO,GAAGA,OAAH,GAAa,CAA/B;;AACA,QAAIjB,WAAJ,EAAiB;AACfwD,MAAAA,QAAQ,CAACC,IAAT,CAAcC,YAAd,CACE,OADF,8IAI6CH,IAJ7C;AAMD;;AACD,WAAO,YAAM;AACXC,MAAAA,QAAQ,CAACC,IAAT,CAAcC,YAAd,CAA2B,OAA3B,EAAoC,EAApC;AACAC,MAAAA,MAAM,CAACC,QAAP,CAAgB,CAAhB,EAAmBL,IAAnB;AACD,KAHD;AAID,GAdD,EAcG,CAACvD,WAAD,CAdH;AAgBA,sBACE,KAAC,cAAD;AACE,IAAA,SAAS,EAAEA,WADb;AAEE,IAAA,UAAU,EAAEC,uBAFd;AAGE,IAAA,QAAQ,EAAEkB,WAAW,EAHvB;AAIE,IAAA,QAAQ,EAAEI,WAAW,EAJvB;AAKE,IAAA,WAAW,EAAC,MALd;AAME,IAAA,OAAO,EAAEG,UAAU,EANrB;AAOE,IAAA,MAAM,EAAER,MAPV;AAAA,2BAQE,KAAC,MAAD;AAAA,6BACE;AAAM,QAAA,QAAQ,EAAEP,YAAhB;AAA8B,QAAA,KAAK,EAAE;AAAEkD,UAAAA,OAAO,EAAE,MAAX;AAAmBC,UAAAA,aAAa,EAAE,QAAlC;AAA4CC,UAAAA,SAAS,EAAEpC,YAAY;AAAnE,SAArC;AAAA,mBACG,CAACtB,QAAQ,IAAIC,0BAAb,kBACC,MAAC,iBAAD;AAAmB,UAAA,IAAI,EAAET,IAAzB;AAA+B,UAAA,MAAM,EAAE2B,cAAc,EAArD;AAAyD,UAAA,YAAY,EAAEC,eAAe,EAAtF;AAAA,qBACGpB,QAAQ,iBAAI;AAAK,YAAA,GAAG,EAAEA,QAAV;AAAoB,YAAA,GAAG,EAAC;AAAxB,YADf,EAEG,CAACA,QAAD,IAAaC,0BAAb,iBACC,KAAC,kBAAD;AACE,YAAA,MAAM,EAAEA,0BAA0B,CAAC0D,MADrC;AAEE,YAAA,GAAG,EAAE1D,0BAA0B,CAAC2D,GAFlC;AAGE,YAAA,SAAS,EAAE3D,0BAA0B,CAAC4D,SAHxC;AAIE,YAAA,GAAG,EAAE5D,0BAA0B,CAAC6D;AAJlC,YAHJ,eASE,MAAC,2BAAD;AAA6B,YAAA,aAAa,EAAE,CAAC,CAAC1D,UAA9C;AAAA,uBACG6B,eAAe,EADlB,EAEGH,gBAAgB,CAACzB,WAAD,CAFnB;AAAA,YATF;AAAA,UAFJ,eAiBE,MAAC,iBAAD;AAAA,kCACE,MAAC,aAAD;AAAA,uBACG,EAAEL,QAAQ,IAAIC,0BAAd,KAA6CgC,eAAe,EAD/D,EAEGnC,QAAQ,IAAIC,gBAAgB,KAAKzB,qBAAqB,CAACyF,KAAvD,IAAgEtC,aAAa,CAAC3B,QAAD,EAAWJ,YAAX,aAAWA,YAAX,cAAWA,YAAX,GAA2BF,IAA3B,CAFhF,EAGGK,KAAK,IAAI0B,UAAU,CAAC1B,KAAD,EAAQJ,SAAR,aAAQA,SAAR,cAAQA,SAAR,GAAqBD,IAArB,CAHtB,EAIGM,QAAQ,IAAIC,gBAAgB,KAAKzB,qBAAqB,CAAC0F,KAAvD,IAAgEvC,aAAa,CAAC3B,QAAD,EAAWJ,YAAX,aAAWA,YAAX,cAAWA,YAAX,GAA2BF,IAA3B,CAJhF;AAAA,YADF,eAOE,MAAC,kBAAD;AAAA,uBACGe,OAAO,IAAIoB,WAAW,CAACpB,OAAD,CADzB,EAEG,EAAEP,QAAQ,IAAIC,0BAAd,KAA6C6B,gBAAgB,CAACzB,WAAD,CAFhE;AAAA,YAPF;AAAA,UAjBF,eA8BE,KAAC,SAAD;AAAW,UAAA,IAAI,EAAEb,IAAjB;AAAA,oBAAwBgB;AAAxB,UA9BF,EAgCGC,IAAI,iBAAI,KAAC,SAAD;AAAW,UAAA,IAAI,EAAEA,IAAjB;AAAuB,UAAA,KAAK,EAAEC,KAA9B;AAAqC,UAAA,IAAI,EAAElB,IAA3C;AAAiD,UAAA,IAAI,EAAEmB;AAAvD,UAhCX,eAkCE,MAAC,WAAD;AAAa,UAAA,IAAI,EAAEnB,IAAnB;AAAA,qBACGW,gBAAgB,IAAIiC,gBAAgB,CAACjC,gBAAD,CADvC,EAEGD,OAFH,aAEGA,OAFH,uBAEGA,OAAO,CAAE+D,GAAT,CAAa,UAACC,CAAD,EAAIC,CAAJ;AAAA,gCACZ,KAAC,MAAD;AAAwB,cAAA,EAAE,EAAED,CAAC,CAACE,EAA9B;AAAkC,cAAA,QAAQ,EAAEF,CAAC,CAAC3B,QAA9C;AAAwD,cAAA,OAAO,EAAE2B,CAAC,CAACxB,OAAnE;AAA4E,cAAA,IAAI,EAAElD,IAAlF;AAAwF,cAAA,OAAO,EAAE0E,CAAC,CAAC1B,MAAnG;AAA2G,cAAA,IAAI,EAAE0B,CAAC,CAACzB,IAAnH;AAAyH,cAAA,OAAO,EAAEyB,CAAC,CAACvB,OAApI;AAAA,wBACGuB,CAAC,CAAC7B;AADL,eAAa6B,CAAC,CAACE,EAAF,IAAQD,CAArB,CADY;AAAA,WAAb,CAFH;AAAA,UAlCF;AAAA;AADF;AARF,IADF;AAwDD,CA1RM;;AApBLxE,EAAAA,W;AACAC,EAAAA,uB;AACAC,EAAAA,K;AACAC,EAAAA,Q;AAEAE,EAAAA,Q;AAEAE,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,O;AACAC,EAAAA,M;;AA+RF,eAAetB,WAAf","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS } from '../styles';\nimport { Size, ModalSubtitlePosition } 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} 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 titleSize?: Size;\n subtitleSize?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string;\n subtitle?: string;\n subtitlePosition?: ModalSubtitlePosition;\n topImage?: any;\n topImageWithFallbacksProps?: ImageWithFallbacksProps;\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 yOffset?: number;\n zIndex?: number;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n titleSize,\n subtitleSize,\n isModalOpen,\n closeModalAndClearInput,\n title,\n subtitle,\n subtitlePosition,\n topImage,\n topImageWithFallbacksProps,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n yOffset,\n zIndex,\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, size?: Size) => {\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 };\n\n const ModalSubtitle = (subtitle: string, size?: Size) => {\n switch (size) {\n case Size.Small:\n return <ComponentXS color={COLORS.neutral_500}>{subtitle}</ComponentXS>;\n case Size.Medium:\n return <ComponentS color={COLORS.neutral_500}>{subtitle}</ComponentS>;\n case Size.Large:\n return <ComponentM color={COLORS.neutral_500}>{subtitle}</ComponentM>;\n default:\n return <ComponentS color={COLORS.neutral_500}>{subtitle}</ComponentS>;\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 React.useEffect(() => {\n let yPos = yOffset ? yOffset : 0;\n if (isModalOpen) {\n document.body.setAttribute(\n 'style',\n `position: fixed;\n left: 0; right: 0;\n top: -${yPos}px`,\n );\n }\n return () => {\n document.body.setAttribute('style', '');\n window.scrollTo(0, yPos);\n };\n }, [isModalOpen]);\n\n return (\n <ModalContainer\n showModal={isModalOpen}\n closeModal={closeModalAndClearInput}\n minWidth={getMinWidth()}\n maxWidth={getMaxWidth()}\n modalHeight=\"auto\"\n padding={getPadding()}\n zIndex={zIndex}>\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 {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}></ImageWithFallbacks>\n )}\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n {subtitle && subtitlePosition === ModalSubtitlePosition.ABOVE && ModalSubtitle(subtitle, subtitleSize ?? size)}\n {title && ModalTitle(title, titleSize ?? size)}\n {subtitle && subtitlePosition === ModalSubtitlePosition.BELOW && ModalSubtitle(subtitle, subtitleSize ?? size)}\n </FlexContainer>\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n </ModalTitleSection>\n\n <ModalBody size={size}>{children}</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"}
|
|
@@ -96,11 +96,7 @@ var ModalNoteSection = _styledComponents.default.section(_templateObject14 || (_
|
|
|
96
96
|
|
|
97
97
|
exports.ModalNoteSection = ModalNoteSection;
|
|
98
98
|
|
|
99
|
-
var ModalBody = _styledComponents.default.section(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1 1 auto;\n overflow:
|
|
100
|
-
var _props$overflow;
|
|
101
|
-
|
|
102
|
-
return (_props$overflow = props === null || props === void 0 ? void 0 : props.overflow) !== null && _props$overflow !== void 0 ? _props$overflow : 'unset';
|
|
103
|
-
}, _.COLORS.neutral_100, _.COLORS.neutral_600, _.COLORS.neutral_500, function (props) {
|
|
99
|
+
var ModalBody = _styledComponents.default.section(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1 1 auto;\n overflow: auto;\n\n /* width */\n\n ::-webkit-scrollbar {\n width: 4px;\n\n cursor: pointer;\n }\n\n /* Track */\n\n ::-webkit-scrollbar-track {\n background: ", ";\n\n border-radius: 8px;\n }\n\n /* Handle */\n\n ::-webkit-scrollbar-thumb {\n background: ", ";\n\n border-radius: 8px;\n }\n\n /* Handle on hover */\n\n ::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n\n > :first-child {\n margin-top: 24px;\n }\n\n > :last-child {\n margin-bottom: ", ";\n }\n\n p: first-of-type {\n padding-bottom: ", ";\n }\n"])), _.COLORS.neutral_100, _.COLORS.neutral_600, _.COLORS.neutral_500, function (props) {
|
|
104
100
|
return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '24px' : '16px';
|
|
105
101
|
}, function (props) {
|
|
106
102
|
return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '24px' : '16px';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modals/ModalStyles.ts"],"names":["ModalHeader","styled","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","css","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","overflow","COLORS","neutral_100","neutral_600","neutral_500","ModalFooter","Size","Small","Large","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n flex: 1 0 calc(50% - 5px);\n flex-direction: column;\n flex-basis: auto;\n position: relative;\n text-align: left;\n height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n img {\n width: 100%;\n height: ${(props) => `${props.height}px`};\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n border-radius: 8px 8px 0 0;\n object-fit: cover;\n }\n`;\n\nexport const Column = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: stretch;\n height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n word-break: break-word;\n display: flex;\n width: 100%;\n justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n display: flex;\n flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n justify-content: space-between;\n width: 100%;\n z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n display: flex;\n margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport const ModalHoverModifier = styled.div`\n button:hover {\n cursor: help !important;\n }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n ${(props) =>\n props.hasImage\n ? css`\n margin: -12px -12px 0 0 !important;\n `\n : css`\n left: unset;\n `}\n }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n margin: -12px 0 0 -12px !important;\n }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n margin: 0;\n font-size: ${(props) => props.fontSize || '1.25em'};\n font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n background-color: ${(props) => getBackgroundColor(props.state)};\n font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n display: flex;\n flex-direction: row;\n padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n border-radius: 2px;\n\n span {\n display: block;\n width: calc(100% - 32px);\n margin-left: 8px;\n color: ${(props) => getNoteMessageColor(props.state)};\n }\n`;\n\nexport const ModalBody = styled.section<{ size?: string; overflow?: string }>`\n flex: 1 1 auto;\n overflow: ${(props) => props?.overflow ?? 'unset'};\n\n /* width */\n\n ::-webkit-scrollbar {\n width: 4px;\n\n cursor: pointer;\n }\n\n /* Track */\n\n ::-webkit-scrollbar-track {\n background: ${COLORS.neutral_100};\n\n border-radius: 8px;\n }\n\n /* Handle */\n\n ::-webkit-scrollbar-thumb {\n background: ${COLORS.neutral_600};\n\n border-radius: 8px;\n }\n\n /* Handle on hover */\n\n ::-webkit-scrollbar-thumb:hover {\n background: ${COLORS.neutral_500};\n }\n\n > :first-child {\n margin-top: 24px;\n }\n\n > :last-child {\n margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n }\n\n p: first-of-type {\n padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n display: flex;\n justify-content: flex-end;\n\n gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n .footer-action {\n order: -1;\n margin-right: auto;\n display: flex;\n align-items: center;\n font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n }\n\n .footer-action.note {\n color: ${COLORS.neutral_600};\n }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n switch (state) {\n case 'positive':\n return COLORS.correct_100;\n case 'warning':\n return COLORS.warning_100;\n case 'critical':\n return COLORS.critical_100;\n default:\n return COLORS.primary_100;\n }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n switch (state) {\n case 'positive':\n return COLORS.correct_700;\n case 'warning':\n return COLORS.warning_700;\n case 'critical':\n return COLORS.critical_700;\n default:\n return COLORS.primary_700;\n }\n};\n"],"file":"ModalStyles.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../src/Modals/ModalStyles.ts"],"names":["ModalHeader","styled","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","css","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","COLORS","neutral_100","neutral_600","neutral_500","ModalFooter","Size","Small","Large","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n flex: 1 0 calc(50% - 5px);\n flex-direction: column;\n flex-basis: auto;\n position: relative;\n text-align: left;\n height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n img {\n width: 100%;\n height: ${(props) => `${props.height}px`};\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n border-radius: 8px 8px 0 0;\n object-fit: cover;\n }\n`;\n\nexport const Column = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: stretch;\n height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n word-break: break-word;\n display: flex;\n width: 100%;\n justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n display: flex;\n flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n justify-content: space-between;\n width: 100%;\n z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n display: flex;\n margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport const ModalHoverModifier = styled.div`\n button:hover {\n cursor: help !important;\n }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n ${(props) =>\n props.hasImage\n ? css`\n margin: -12px -12px 0 0 !important;\n `\n : css`\n left: unset;\n `}\n }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n margin: -12px 0 0 -12px !important;\n }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n margin: 0;\n font-size: ${(props) => props.fontSize || '1.25em'};\n font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n background-color: ${(props) => getBackgroundColor(props.state)};\n font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n display: flex;\n flex-direction: row;\n padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n border-radius: 2px;\n\n span {\n display: block;\n width: calc(100% - 32px);\n margin-left: 8px;\n color: ${(props) => getNoteMessageColor(props.state)};\n }\n`;\n\nexport const ModalBody = styled.section<{ size?: string }>`\n flex: 1 1 auto;\n overflow: auto;\n\n /* width */\n\n ::-webkit-scrollbar {\n width: 4px;\n\n cursor: pointer;\n }\n\n /* Track */\n\n ::-webkit-scrollbar-track {\n background: ${COLORS.neutral_100};\n\n border-radius: 8px;\n }\n\n /* Handle */\n\n ::-webkit-scrollbar-thumb {\n background: ${COLORS.neutral_600};\n\n border-radius: 8px;\n }\n\n /* Handle on hover */\n\n ::-webkit-scrollbar-thumb:hover {\n background: ${COLORS.neutral_500};\n }\n\n > :first-child {\n margin-top: 24px;\n }\n\n > :last-child {\n margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n }\n\n p: first-of-type {\n padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n display: flex;\n justify-content: flex-end;\n\n gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n .footer-action {\n order: -1;\n margin-right: auto;\n display: flex;\n align-items: center;\n font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n }\n\n .footer-action.note {\n color: ${COLORS.neutral_600};\n }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n switch (state) {\n case 'positive':\n return COLORS.correct_100;\n case 'warning':\n return COLORS.warning_100;\n case 'critical':\n return COLORS.critical_100;\n default:\n return COLORS.primary_100;\n }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n switch (state) {\n case 'positive':\n return COLORS.correct_700;\n case 'warning':\n return COLORS.warning_700;\n case 'critical':\n return COLORS.critical_700;\n default:\n return COLORS.primary_700;\n }\n};\n"],"file":"ModalStyles.cjs"}
|
|
@@ -37,7 +37,6 @@ export declare const ModalNoteSection: import("styled-components").StyledCompone
|
|
|
37
37
|
}, never>;
|
|
38
38
|
export declare const ModalBody: import("styled-components").StyledComponent<"section", any, {
|
|
39
39
|
size?: string | undefined;
|
|
40
|
-
overflow?: string | undefined;
|
|
41
40
|
}, never>;
|
|
42
41
|
export declare const ModalFooter: import("styled-components").StyledComponent<"section", any, {
|
|
43
42
|
size?: Size | undefined;
|
|
@@ -45,11 +45,7 @@ export var ModalNoteSection = styled.section(_templateObject14 || (_templateObje
|
|
|
45
45
|
}, function (props) {
|
|
46
46
|
return getNoteMessageColor(props.state);
|
|
47
47
|
});
|
|
48
|
-
export var ModalBody = styled.section(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n flex: 1 1 auto;\n overflow:
|
|
49
|
-
var _props$overflow;
|
|
50
|
-
|
|
51
|
-
return (_props$overflow = props === null || props === void 0 ? void 0 : props.overflow) !== null && _props$overflow !== void 0 ? _props$overflow : 'unset';
|
|
52
|
-
}, COLORS.neutral_100, COLORS.neutral_600, COLORS.neutral_500, function (props) {
|
|
48
|
+
export var ModalBody = styled.section(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n flex: 1 1 auto;\n overflow: auto;\n\n /* width */\n\n ::-webkit-scrollbar {\n width: 4px;\n\n cursor: pointer;\n }\n\n /* Track */\n\n ::-webkit-scrollbar-track {\n background: ", ";\n\n border-radius: 8px;\n }\n\n /* Handle */\n\n ::-webkit-scrollbar-thumb {\n background: ", ";\n\n border-radius: 8px;\n }\n\n /* Handle on hover */\n\n ::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n\n > :first-child {\n margin-top: 24px;\n }\n\n > :last-child {\n margin-bottom: ", ";\n }\n\n p: first-of-type {\n padding-bottom: ", ";\n }\n"])), COLORS.neutral_100, COLORS.neutral_600, COLORS.neutral_500, function (props) {
|
|
53
49
|
return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '24px' : '16px';
|
|
54
50
|
}, function (props) {
|
|
55
51
|
return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '24px' : '16px';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","Size","ModalHeader","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","overflow","neutral_100","neutral_600","neutral_500","ModalFooter","Small","Large","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n flex: 1 0 calc(50% - 5px);\n flex-direction: column;\n flex-basis: auto;\n position: relative;\n text-align: left;\n height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n img {\n width: 100%;\n height: ${(props) => `${props.height}px`};\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n border-radius: 8px 8px 0 0;\n object-fit: cover;\n }\n`;\n\nexport const Column = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: stretch;\n height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n word-break: break-word;\n display: flex;\n width: 100%;\n justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n display: flex;\n flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n justify-content: space-between;\n width: 100%;\n z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n display: flex;\n margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport const ModalHoverModifier = styled.div`\n button:hover {\n cursor: help !important;\n }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n ${(props) =>\n props.hasImage\n ? css`\n margin: -12px -12px 0 0 !important;\n `\n : css`\n left: unset;\n `}\n }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n margin: -12px 0 0 -12px !important;\n }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n margin: 0;\n font-size: ${(props) => props.fontSize || '1.25em'};\n font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n background-color: ${(props) => getBackgroundColor(props.state)};\n font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n display: flex;\n flex-direction: row;\n padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n border-radius: 2px;\n\n span {\n display: block;\n width: calc(100% - 32px);\n margin-left: 8px;\n color: ${(props) => getNoteMessageColor(props.state)};\n }\n`;\n\nexport const ModalBody = styled.section<{ size?: string; overflow?: string }>`\n flex: 1 1 auto;\n overflow: ${(props) => props?.overflow ?? 'unset'};\n\n /* width */\n\n ::-webkit-scrollbar {\n width: 4px;\n\n cursor: pointer;\n }\n\n /* Track */\n\n ::-webkit-scrollbar-track {\n background: ${COLORS.neutral_100};\n\n border-radius: 8px;\n }\n\n /* Handle */\n\n ::-webkit-scrollbar-thumb {\n background: ${COLORS.neutral_600};\n\n border-radius: 8px;\n }\n\n /* Handle on hover */\n\n ::-webkit-scrollbar-thumb:hover {\n background: ${COLORS.neutral_500};\n }\n\n > :first-child {\n margin-top: 24px;\n }\n\n > :last-child {\n margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n }\n\n p: first-of-type {\n padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n display: flex;\n justify-content: flex-end;\n\n gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n .footer-action {\n order: -1;\n margin-right: auto;\n display: flex;\n align-items: center;\n font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n }\n\n .footer-action.note {\n color: ${COLORS.neutral_600};\n }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n switch (state) {\n case 'positive':\n return COLORS.correct_100;\n case 'warning':\n return COLORS.warning_100;\n case 'critical':\n return COLORS.critical_100;\n default:\n return COLORS.primary_100;\n }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n switch (state) {\n case 'positive':\n return COLORS.correct_700;\n case 'warning':\n return COLORS.warning_700;\n case 'critical':\n return COLORS.critical_700;\n default:\n return COLORS.primary_700;\n }\n};\n"],"file":"ModalStyles.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","Size","ModalHeader","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","neutral_100","neutral_600","neutral_500","ModalFooter","Small","Large","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n flex: 1 0 calc(50% - 5px);\n flex-direction: column;\n flex-basis: auto;\n position: relative;\n text-align: left;\n height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n img {\n width: 100%;\n height: ${(props) => `${props.height}px`};\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n border-radius: 8px 8px 0 0;\n object-fit: cover;\n }\n`;\n\nexport const Column = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: stretch;\n height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n word-break: break-word;\n display: flex;\n width: 100%;\n justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n display: flex;\n flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n justify-content: space-between;\n width: 100%;\n z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n display: flex;\n margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nexport const ModalHoverModifier = styled.div`\n button:hover {\n cursor: help !important;\n }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n ${(props) =>\n props.hasImage\n ? css`\n margin: -12px -12px 0 0 !important;\n `\n : css`\n left: unset;\n `}\n }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n margin: -12px 0 0 -12px !important;\n }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n margin: 0;\n font-size: ${(props) => props.fontSize || '1.25em'};\n font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n background-color: ${(props) => getBackgroundColor(props.state)};\n font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n display: flex;\n flex-direction: row;\n padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n border-radius: 2px;\n\n span {\n display: block;\n width: calc(100% - 32px);\n margin-left: 8px;\n color: ${(props) => getNoteMessageColor(props.state)};\n }\n`;\n\nexport const ModalBody = styled.section<{ size?: string }>`\n flex: 1 1 auto;\n overflow: auto;\n\n /* width */\n\n ::-webkit-scrollbar {\n width: 4px;\n\n cursor: pointer;\n }\n\n /* Track */\n\n ::-webkit-scrollbar-track {\n background: ${COLORS.neutral_100};\n\n border-radius: 8px;\n }\n\n /* Handle */\n\n ::-webkit-scrollbar-thumb {\n background: ${COLORS.neutral_600};\n\n border-radius: 8px;\n }\n\n /* Handle on hover */\n\n ::-webkit-scrollbar-thumb:hover {\n background: ${COLORS.neutral_500};\n }\n\n > :first-child {\n margin-top: 24px;\n }\n\n > :last-child {\n margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n }\n\n p: first-of-type {\n padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n display: flex;\n justify-content: flex-end;\n\n gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n .footer-action {\n order: -1;\n margin-right: auto;\n display: flex;\n align-items: center;\n font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n }\n\n .footer-action.note {\n color: ${COLORS.neutral_600};\n }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n switch (state) {\n case 'positive':\n return COLORS.correct_100;\n case 'warning':\n return COLORS.warning_100;\n case 'critical':\n return COLORS.critical_100;\n default:\n return COLORS.primary_100;\n }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n switch (state) {\n case 'positive':\n return COLORS.correct_700;\n case 'warning':\n return COLORS.warning_700;\n case 'critical':\n return COLORS.critical_700;\n default:\n return COLORS.primary_700;\n }\n};\n"],"file":"ModalStyles.js"}
|