@laerdal/life-react-components 1.7.0-dev.1.full → 1.7.0-dev.2
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.
|
@@ -98,7 +98,7 @@ var ModalNoteSection = _styledComponents.default.section(_templateObject14 || (_
|
|
|
98
98
|
|
|
99
99
|
exports.ModalNoteSection = ModalNoteSection;
|
|
100
100
|
|
|
101
|
-
var ModalBody = _styledComponents.default.section(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1 1 auto;\n overflow: ", ";\n margin: ", ";\n\n border-top: ", ";\n border-bottom: ", ";\n\n ", "\n
|
|
101
|
+
var ModalBody = _styledComponents.default.section(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1 1 auto;\n overflow: ", ";\n margin: ", ";\n\n border-top: ", ";\n border-bottom: ", ";\n\n ", "\n"])), function (props) {
|
|
102
102
|
var _props$overflow;
|
|
103
103
|
|
|
104
104
|
return (_props$overflow = props === null || props === void 0 ? void 0 : props.overflow) !== null && _props$overflow !== void 0 ? _props$overflow : 'unset';
|
|
@@ -108,13 +108,7 @@ var ModalBody = _styledComponents.default.section(_templateObject15 || (_templat
|
|
|
108
108
|
return props !== null && props !== void 0 && props.hasContentBorders ? "1px solid ".concat(_.COLORS.neutral_100) : 'none';
|
|
109
109
|
}, function (props) {
|
|
110
110
|
return props !== null && props !== void 0 && props.hasContentBorders ? "1px solid ".concat(_.COLORS.neutral_100) : 'none';
|
|
111
|
-
}, (0, _styles.scrollBarStyling)(_types.Size.Small)
|
|
112
|
-
return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "16px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '8px' : '12px';
|
|
113
|
-
}, function (props) {
|
|
114
|
-
return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '24px' : '16px';
|
|
115
|
-
}, function (props) {
|
|
116
|
-
return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '24px' : '16px';
|
|
117
|
-
});
|
|
111
|
+
}, (0, _styles.scrollBarStyling)(_types.Size.Small));
|
|
118
112
|
|
|
119
113
|
exports.ModalBody = ModalBody;
|
|
120
114
|
|
|
@@ -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","hasContentBorders","COLORS","neutral_100","Size","Small","ModalFooter","Large","neutral_600","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 { scrollBarStyling } from '../styles';\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`;\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; hasContentBorders?: boolean }>`\n flex: 1 1 auto;\n overflow: ${(props) => props?.overflow ?? 'unset'};\n margin: ${(props) => (props?.size === 'small' ? `8px 0` : props?.size === 'large' ? '16px 0' : '12px 0')};\n\n border-top: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n border-bottom: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n\n ${scrollBarStyling(Size.Small)}\n\n > :first-child {\n margin-top: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '8px' : '12px')};\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 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","overflow","hasContentBorders","COLORS","neutral_100","Size","Small","ModalFooter","Large","neutral_600","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 { scrollBarStyling } from '../styles';\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`;\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; hasContentBorders?: boolean }>`\n flex: 1 1 auto;\n overflow: ${(props) => props?.overflow ?? 'unset'};\n margin: ${(props) => (props?.size === 'small' ? `8px 0` : props?.size === 'large' ? '16px 0' : '12px 0')};\n\n border-top: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n border-bottom: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\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"}
|
|
@@ -46,7 +46,7 @@ export var ModalNoteSection = styled.section(_templateObject14 || (_templateObje
|
|
|
46
46
|
}, function (props) {
|
|
47
47
|
return getNoteMessageColor(props.state);
|
|
48
48
|
});
|
|
49
|
-
export var ModalBody = styled.section(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n flex: 1 1 auto;\n overflow: ", ";\n margin: ", ";\n\n border-top: ", ";\n border-bottom: ", ";\n\n ", "\n
|
|
49
|
+
export var ModalBody = styled.section(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n flex: 1 1 auto;\n overflow: ", ";\n margin: ", ";\n\n border-top: ", ";\n border-bottom: ", ";\n\n ", "\n"])), function (props) {
|
|
50
50
|
var _props$overflow;
|
|
51
51
|
|
|
52
52
|
return (_props$overflow = props === null || props === void 0 ? void 0 : props.overflow) !== null && _props$overflow !== void 0 ? _props$overflow : 'unset';
|
|
@@ -56,13 +56,7 @@ export var ModalBody = styled.section(_templateObject15 || (_templateObject15 =
|
|
|
56
56
|
return props !== null && props !== void 0 && props.hasContentBorders ? "1px solid ".concat(COLORS.neutral_100) : 'none';
|
|
57
57
|
}, function (props) {
|
|
58
58
|
return props !== null && props !== void 0 && props.hasContentBorders ? "1px solid ".concat(COLORS.neutral_100) : 'none';
|
|
59
|
-
}, scrollBarStyling(Size.Small)
|
|
60
|
-
return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "16px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '8px' : '12px';
|
|
61
|
-
}, function (props) {
|
|
62
|
-
return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '24px' : '16px';
|
|
63
|
-
}, function (props) {
|
|
64
|
-
return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '24px' : '16px';
|
|
65
|
-
});
|
|
59
|
+
}, scrollBarStyling(Size.Small));
|
|
66
60
|
export var ModalFooter = styled.section(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: flex-end;\n\n gap: ", ";\n\n .footer-action {\n order: -1;\n margin-right: auto;\n display: flex;\n align-items: center;\n font-size: ", ";\n gap: ", ";\n }\n\n .footer-action.note {\n color: ", ";\n }\n"])), function (props) {
|
|
67
61
|
return (props === null || props === void 0 ? void 0 : props.size) === 'large' ? "16px" : '8px';
|
|
68
62
|
}, function (props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","scrollBarStyling","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","hasContentBorders","neutral_100","Small","ModalFooter","Large","neutral_600","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 { scrollBarStyling } from '../styles';\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`;\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; hasContentBorders?: boolean }>`\n flex: 1 1 auto;\n overflow: ${(props) => props?.overflow ?? 'unset'};\n margin: ${(props) => (props?.size === 'small' ? `8px 0` : props?.size === 'large' ? '16px 0' : '12px 0')};\n\n border-top: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n border-bottom: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n\n ${scrollBarStyling(Size.Small)}\n\n > :first-child {\n margin-top: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '8px' : '12px')};\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 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","scrollBarStyling","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","hasContentBorders","neutral_100","Small","ModalFooter","Large","neutral_600","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 { scrollBarStyling } from '../styles';\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`;\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; hasContentBorders?: boolean }>`\n flex: 1 1 auto;\n overflow: ${(props) => props?.overflow ?? 'unset'};\n margin: ${(props) => (props?.size === 'small' ? `8px 0` : props?.size === 'large' ? '16px 0' : '12px 0')};\n\n border-top: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n border-bottom: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\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"}
|