@laerdal/life-react-components 1.2.2-dev.15.full → 1.2.2-dev.17.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/esm/HyperLink/HyperLink.js +20 -17
- package/dist/esm/HyperLink/HyperLink.js.map +1 -1
- package/dist/esm/InputFields/Checkbox.js +27 -16
- package/dist/esm/InputFields/Checkbox.js.map +1 -1
- package/dist/esm/InputFields/RadioButton.js +21 -14
- package/dist/esm/InputFields/RadioButton.js.map +1 -1
- package/dist/esm/Modals/ModalDialog.js +75 -26
- package/dist/esm/Modals/ModalDialog.js.map +1 -1
- package/dist/esm/Modals/ModalStyles.js +34 -22
- package/dist/esm/Modals/ModalStyles.js.map +1 -1
- package/dist/esm/Modals/ModalTypes.js +2 -0
- package/dist/esm/Modals/ModalTypes.js.map +1 -0
- package/dist/js/HyperLink/HyperLink.d.ts +2 -2
- package/dist/js/HyperLink/HyperLink.js +19 -15
- package/dist/js/HyperLink/HyperLink.js.map +1 -1
- package/dist/js/InputFields/Checkbox.js +9 -5
- package/dist/js/InputFields/Checkbox.js.map +1 -1
- package/dist/js/InputFields/RadioButton.js +3 -3
- package/dist/js/InputFields/RadioButton.js.map +1 -1
- package/dist/js/Modals/ModalDialog.d.ts +2 -6
- package/dist/js/Modals/ModalDialog.js +76 -46
- package/dist/js/Modals/ModalDialog.js.map +1 -1
- package/dist/js/Modals/ModalStyles.d.ts +5 -0
- package/dist/js/Modals/ModalStyles.js +30 -14
- package/dist/js/Modals/ModalStyles.js.map +1 -1
- package/dist/js/Modals/ModalTypes.d.ts +18 -0
- package/dist/js/Modals/ModalTypes.js +6 -0
- package/dist/js/Modals/ModalTypes.js.map +1 -0
- package/dist/umd/HyperLink/HyperLink.js +68 -17
- package/dist/umd/HyperLink/HyperLink.js.map +1 -1
- package/dist/umd/InputFields/Checkbox.js +27 -16
- package/dist/umd/InputFields/Checkbox.js.map +1 -1
- package/dist/umd/InputFields/RadioButton.js +21 -14
- package/dist/umd/InputFields/RadioButton.js.map +1 -1
- package/dist/umd/Modals/ModalDialog.js +76 -29
- package/dist/umd/Modals/ModalDialog.js.map +1 -1
- package/dist/umd/Modals/ModalStyles.js +35 -23
- package/dist/umd/Modals/ModalStyles.js.map +1 -1
- package/dist/umd/Modals/ModalTypes.js +20 -0
- package/dist/umd/Modals/ModalTypes.js.map +1 -0
- package/package.json +1 -1
|
@@ -81,11 +81,9 @@
|
|
|
81
81
|
|
|
82
82
|
const StyledCheckBox = _styledComponents2.default.div`
|
|
83
83
|
display: flex;
|
|
84
|
-
flex-direction: row;
|
|
85
84
|
width: 100%;
|
|
86
85
|
min-height: 48px;
|
|
87
86
|
min-width: 48px;
|
|
88
|
-
align-items: center;
|
|
89
87
|
|
|
90
88
|
${props => props.margin ? `margin: ${props.margin};` : ''}
|
|
91
89
|
cursor: pointer;
|
|
@@ -96,14 +94,14 @@
|
|
|
96
94
|
pointer-events: none;
|
|
97
95
|
}
|
|
98
96
|
|
|
99
|
-
.icon {
|
|
97
|
+
.checkbox-icon {
|
|
100
98
|
margin: 6px;
|
|
101
99
|
display: flex;
|
|
102
100
|
align-items: center;
|
|
103
101
|
justify-content: center;
|
|
104
102
|
box-sizing: border-box;
|
|
105
|
-
width: 36px;
|
|
106
103
|
height: 36px;
|
|
104
|
+
min-width: 36px;
|
|
107
105
|
border-radius: 50%;
|
|
108
106
|
|
|
109
107
|
svg {
|
|
@@ -111,27 +109,36 @@
|
|
|
111
109
|
}
|
|
112
110
|
}
|
|
113
111
|
|
|
114
|
-
.label {
|
|
112
|
+
.checkbox-label {
|
|
115
113
|
user-select: none;
|
|
116
114
|
cursor: inherit;
|
|
117
115
|
}
|
|
118
116
|
|
|
119
117
|
&.small {
|
|
120
118
|
${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
|
|
119
|
+
.checkbox-label {
|
|
120
|
+
padding-top: 14px;
|
|
121
|
+
}
|
|
121
122
|
}
|
|
122
123
|
|
|
123
124
|
&.medium {
|
|
124
125
|
${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
|
|
126
|
+
.checkbox-label {
|
|
127
|
+
padding-top: 12px;
|
|
128
|
+
}
|
|
125
129
|
}
|
|
126
130
|
|
|
127
131
|
&.large {
|
|
128
132
|
${(0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
|
|
133
|
+
.checkbox-label {
|
|
134
|
+
padding-top: 12px;
|
|
135
|
+
}
|
|
129
136
|
}
|
|
130
137
|
|
|
131
138
|
&:not(.disabled):focus {
|
|
132
139
|
outline: none;
|
|
133
140
|
|
|
134
|
-
.icon {
|
|
141
|
+
.checkbox-icon {
|
|
135
142
|
background-color: ${_styles.COLORS.white};
|
|
136
143
|
box-shadow: 0 0 8px ${_styles.COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
|
|
137
144
|
|
|
@@ -142,7 +149,7 @@
|
|
|
142
149
|
}
|
|
143
150
|
|
|
144
151
|
&:not(.disabled):hover {
|
|
145
|
-
.icon {
|
|
152
|
+
.checkbox-icon {
|
|
146
153
|
background-color: ${_styles.COLORS.primary_20};
|
|
147
154
|
|
|
148
155
|
svg {
|
|
@@ -152,7 +159,7 @@
|
|
|
152
159
|
}
|
|
153
160
|
|
|
154
161
|
&:not(.disabled):active {
|
|
155
|
-
.icon {
|
|
162
|
+
.checkbox-icon {
|
|
156
163
|
background: ${_styles.COLORS.primary_100};
|
|
157
164
|
box-shadow: none;
|
|
158
165
|
|
|
@@ -168,16 +175,16 @@
|
|
|
168
175
|
|
|
169
176
|
color: ${_styles.COLORS.neutral_300};
|
|
170
177
|
|
|
171
|
-
.icon,
|
|
172
|
-
.label {
|
|
178
|
+
.checkbox-icon,
|
|
179
|
+
.checkbox-label {
|
|
173
180
|
pointer-events: none;
|
|
174
181
|
}
|
|
175
182
|
|
|
176
|
-
.icon{
|
|
183
|
+
.checkbox-icon{
|
|
177
184
|
background-color: ${_styles.COLORS.white};
|
|
178
185
|
}
|
|
179
186
|
|
|
180
|
-
.icon svg {
|
|
187
|
+
.checkbox-icon svg {
|
|
181
188
|
color: ${_styles.COLORS.neutral_300};
|
|
182
189
|
}
|
|
183
190
|
}
|
|
@@ -192,7 +199,8 @@
|
|
|
192
199
|
disabled,
|
|
193
200
|
margin,
|
|
194
201
|
size,
|
|
195
|
-
semiSelected
|
|
202
|
+
semiSelected,
|
|
203
|
+
children
|
|
196
204
|
}, ref) => {
|
|
197
205
|
const onKeyPress = e => {
|
|
198
206
|
if (e.keyCode === 13 && !disabled) {
|
|
@@ -223,7 +231,7 @@
|
|
|
223
231
|
onMouseDown: e => e.preventDefault()
|
|
224
232
|
}, /*#__PURE__*/React.createElement("div", {
|
|
225
233
|
id: id,
|
|
226
|
-
className: 'icon'
|
|
234
|
+
className: 'checkbox-icon'
|
|
227
235
|
}, selected ? /*#__PURE__*/React.createElement(_SystemIcons.CheckboxOn, {
|
|
228
236
|
className: iconPointerEventsTransparent ? "pointerTransparent" : "",
|
|
229
237
|
size: "24px"
|
|
@@ -234,9 +242,12 @@
|
|
|
234
242
|
className: iconPointerEventsTransparent ? "pointerTransparent" : "",
|
|
235
243
|
size: "24px"
|
|
236
244
|
})), label && /*#__PURE__*/React.createElement("label", {
|
|
237
|
-
className: 'label',
|
|
245
|
+
className: 'checkbox-label',
|
|
246
|
+
htmlFor: id
|
|
247
|
+
}, label), !label && /*#__PURE__*/React.createElement("label", {
|
|
248
|
+
className: 'checkbox-label',
|
|
238
249
|
htmlFor: id
|
|
239
|
-
},
|
|
250
|
+
}, children));
|
|
240
251
|
});
|
|
241
252
|
Checkbox.propTypes = {
|
|
242
253
|
id: _propTypes2.default.string.isRequired,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","neutral_600","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","white","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","id","selected","select","label","showWarning","disabled","iconPointerEventsTransparent","semiSelected","Checkbox","onKeyPress","e","handleClick","size","Size"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,QAAMA,cAAc,GAAGC,2BAAOC,GAAwF;AACtH;AACA;AACA;AACA;AACA;AACA
|
|
1
|
+
{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","neutral_600","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","white","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","id","selected","select","label","showWarning","disabled","iconPointerEventsTransparent","semiSelected","Checkbox","children","onKeyPress","e","handleClick","size","Size"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,QAAMA,cAAc,GAAGC,2BAAOC,GAAwF;AACtH;AACA;AACA;AACA;AACA;AACA,IAAIC,KAAK,IAAKA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACC,MAAhCD,GAAAA,GAA4C,EAAI;AAC9D;AACA;AACA,WAAWE,eAAOC,KAAM;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeH,KAAK,IAAKA,KAAK,CAALA,QAAAA,GAAiBE,eAAjBF,WAAAA,GAAsCA,KAAK,CAALA,WAAAA,GAAoBE,eAApBF,WAAAA,GAAyCE,eAAOE,WAAa;AAC5H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,mCAAkBC,2BAAD,OAAjBD,EAA8CH,eAA7B,KAAjBG,CAA4D;AAClE;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,mCAAkBD,2BAAD,OAAjBC,EAA8CL,eAA7B,KAAjBK,CAA4D;AAClE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,mCAAkBF,2BAAD,OAAjBE,EAA8CN,eAA7B,KAAjBM,CAA4D;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BN,eAAOO,KAAM;AACvC,4BAA4BP,eAAOQ,WAAY;AAC/C;AACA;AACA,iBAAiBR,eAAOE,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BF,eAAOS,UAAW;AAC5C;AACA;AACA,iBAAiBT,eAAOU,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBV,eAAOW,WAAY;AACvC;AACA;AACA;AACA,iBAAiBX,eAAOY,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaZ,eAAOa,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0Bb,eAAOO,KAAM;AACvC;AACA;AACA;AACA,eAAeP,eAAOa,WAAY;AAClC;AACA;AA5GA,CAAA;AA4HA,QAAMS,QAAQ,GAAA,aAAG,KAAK,CAAL,UAAA,CAAwC,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IAAA,MAAA;AAAA,IAAA,KAAA;AAAA,IAAA,WAAA;AAAA,IAAA,4BAAA;AAAA,IAAA,QAAA;AAAA,IAAA,MAAA;AAAA,IAAA,IAAA;AAAA,IAAA,YAAA;AAWEC,IAAAA;AAXF,GAAD,EAAA,GAAA,KAYY;AACnE,UAAMC,UAAU,GAAIC,CAAD,IAAY;AAC7B,UAAIA,CAAC,CAADA,OAAAA,KAAAA,EAAAA,IAAoB,CAAxB,QAAA,EAAmC;AACjCT,QAAAA,MAAM,CAAC,CAAPA,QAAM,CAANA;AACD;AAHH,KAAA;;AAMA,UAAMU,WAAW,GAAG,MAAM;AACxB,UAAA,QAAA,EAAc;AACZ;AACD;;AACDV,MAAAA,MAAM,CAAC,CAAPA,QAAM,CAANA;AAJF,KAAA;;AAOAW,IAAAA,IAAI,GAAGA,IAAI,IAAIC,YAAfD,MAAAA;AAEA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAgB,MAAA,GAAG,EAAnB,EAAA;AACgB,MAAA,GAAG,EADnB,GAAA;AAEgB,MAAA,QAAQ,EAFxB,QAAA;AAGgB,MAAA,SAAS,EAAEA,IAAI,CAAJA,QAAAA,GAAAA,WAAAA,GAAAA,MAAAA,CAAqCR,QAAQ,GAAA,WAAA,GAHxE,EAG2BQ,CAH3B;AAIgB,MAAA,QAAQ,EAJxB,QAAA;AAKgB,MAAA,QAAQ,EAAER,QAAQ,GAAG,CAAH,CAAA,GALlC,CAAA;AAMgB,MAAA,WAAW,EAN3B,WAAA;AAOgB,MAAA,MAAM,EAPtB,MAAA;AAQgB,MAAA,OAAO,EARvB,WAAA;AASgB,MAAA,SAAS,EATzB,UAAA;AAUgB,MAAA,WAAW,EAAEM,CAAC,IAAIA,CAAC,CAADA,cAAAA;AAVlC,KAAA,EAAA,aAWE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,EAAE,EAAP,EAAA;AAAa,MAAA,SAAS,EAAE;AAAxB,KAAA,EAEIV,QAAQ,GAAA,aACJ,KAAA,CAAA,aAAA,CAAA,uBAAA,EAAA;AAAY,MAAA,SAAS,EAAEK,4BAA4B,GAAA,oBAAA,GAAnD,EAAA;AAAiF,MAAA,IAAI,EAAC;AAAtF,KAAA,CADI,GAEJC,YAAY,GAAA,aACV,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAc,MAAA,SAAS,EAAED,4BAA4B,GAAA,oBAAA,GAArD,EAAA;AAAmF,MAAA,IAAI,EAAC;AAAxF,KAAA,CADU,GAAA,aAEV,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AAAa,MAAA,SAAS,EAAEA,4BAA4B,GAAA,oBAAA,GAApD,EAAA;AAAkF,MAAA,IAAI,EAAC;AAAvF,KAAA,CANV,CAXF,EAqBIH,KAAK,IAAA,aAEH,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAO,MAAA,SAAS,EAAhB,gBAAA;AACO,MAAA,OAAO,EAAEH;AADhB,KAAA,EAvBN,KAuBM,CAvBN,EA8BI,CAAA,KAAA,IAAA,aACA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAO,MAAA,SAAS,EAAhB,gBAAA;AACO,MAAA,OAAO,EAAEA;AADhB,KAAA,EAhCN,QAgCM,CA/BJ,CADF;AA5BF,GAAiB,CAAjB;;AAZEA,IAAAA,E;AACAC,IAAAA,Q;AACAC,IAAAA,M;AACAC,IAAAA,K;AACAC,IAAAA,W;AACAC,IAAAA,Q;AACApB,IAAAA,M;AAEAqB,IAAAA,4B;AACAC,IAAAA,Y;;oBAwEF,Q","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n display: flex;\n width: 100%;\n min-height: 48px;\n min-width: 48px;\n\n ${props => (props.margin ? `margin: ${props.margin};` : '')}\n cursor: pointer;\n\n color: ${COLORS.black};\n\n .pointerTransparent {\n pointer-events: none;\n }\n\n .checkbox-icon {\n margin: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 36px;\n min-width: 36px;\n border-radius: 50%;\n\n svg {\n color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n }\n }\n\n .checkbox-label {\n user-select: none;\n cursor: inherit;\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 14px;\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 12px;\n }\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 12px;\n }\n }\n\n &:not(.disabled):focus {\n outline: none;\n\n .checkbox-icon {\n background-color: ${COLORS.white};\n box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n svg {\n color: ${COLORS.neutral_600};\n }\n }\n }\n\n &:not(.disabled):hover {\n .checkbox-icon {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_700};\n }\n }\n }\n\n &:not(.disabled):active {\n .checkbox-icon {\n background: ${COLORS.primary_100};\n box-shadow: none;\n\n svg {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.disabled {\n box-shadow: none;\n cursor: not-allowed;\n\n color: ${COLORS.neutral_300};\n\n .checkbox-icon,\n .checkbox-label {\n pointer-events: none;\n }\n\n .checkbox-icon{\n background-color: ${COLORS.white};\n }\n\n .checkbox-icon svg {\n color: ${COLORS.neutral_300};\n }\n }\n`;\n\ninterface Props {\n id: string;\n selected: boolean;\n select: (selected: boolean) => void;\n label?: string;\n showWarning?: boolean;\n disabled?: boolean;\n margin?: string;\n size?: Size;\n iconPointerEventsTransparent?: boolean;\n semiSelected?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n id,\n selected,\n select,\n label,\n showWarning,\n iconPointerEventsTransparent,\n disabled,\n margin,\n size,\n semiSelected,\n children\n }, ref) => {\n const onKeyPress = (e: any) => {\n if (e.keyCode === 13 && !disabled) {\n select(!selected);\n }\n };\n\n const handleClick = () => {\n if (disabled) {\n return;\n }\n select(!selected);\n };\n\n size = size ?? Size.Medium;\n\n return (\n <StyledCheckBox key={id}\n ref={ref}\n disabled={disabled}\n className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n selected={selected}\n tabIndex={disabled ? -1 : 0}\n showWarning={showWarning}\n margin={margin}\n onClick={handleClick}\n onKeyDown={onKeyPress}\n onMouseDown={e => e.preventDefault()}>\n <div id={id} className={'checkbox-icon'}>\n {\n selected\n ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n : semiSelected\n ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n }\n </div>\n {\n label &&\n (\n <label className={'checkbox-label'}\n htmlFor={id}>\n {label}\n </label>\n )\n }\n {\n !label &&\n <label className={'checkbox-label'}\n htmlFor={id}>\n {children}\n </label>\n }\n </StyledCheckBox>\n );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}
|
|
@@ -81,11 +81,9 @@
|
|
|
81
81
|
|
|
82
82
|
const StyledRadioButton = _styledComponents2.default.div`
|
|
83
83
|
display: flex;
|
|
84
|
-
flex-direction: row;
|
|
85
84
|
width: 100%;
|
|
86
85
|
min-height: 48px;
|
|
87
86
|
min-width: 48px;
|
|
88
|
-
align-items: center;
|
|
89
87
|
|
|
90
88
|
${props => props.margin ? `margin: ${props.margin};` : ''}
|
|
91
89
|
cursor: pointer;
|
|
@@ -96,14 +94,14 @@
|
|
|
96
94
|
pointer-events: none;
|
|
97
95
|
}
|
|
98
96
|
|
|
99
|
-
.icon {
|
|
97
|
+
.radio-button-icon {
|
|
100
98
|
margin: 6px;
|
|
101
99
|
display: flex;
|
|
102
100
|
align-items: center;
|
|
103
101
|
justify-content: center;
|
|
104
102
|
box-sizing: border-box;
|
|
105
|
-
width: 36px;
|
|
106
103
|
height: 36px;
|
|
104
|
+
min-width: 36px;
|
|
107
105
|
border-radius: 50%;
|
|
108
106
|
|
|
109
107
|
svg {
|
|
@@ -111,7 +109,7 @@
|
|
|
111
109
|
}
|
|
112
110
|
}
|
|
113
111
|
|
|
114
|
-
.label {
|
|
112
|
+
.radio-button-label {
|
|
115
113
|
user-select: none;
|
|
116
114
|
display: flex;
|
|
117
115
|
flex-direction: column;
|
|
@@ -127,20 +125,29 @@
|
|
|
127
125
|
|
|
128
126
|
&.small {
|
|
129
127
|
${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
|
|
128
|
+
.radio-button-label {
|
|
129
|
+
padding-top: 14px;
|
|
130
|
+
}
|
|
130
131
|
}
|
|
131
132
|
|
|
132
133
|
&.medium {
|
|
133
134
|
${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
|
|
135
|
+
.radio-button-label {
|
|
136
|
+
padding-top: 12px;
|
|
137
|
+
}
|
|
134
138
|
}
|
|
135
139
|
|
|
136
140
|
&.large {
|
|
137
141
|
${(0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black)}
|
|
142
|
+
.radio-button-label {
|
|
143
|
+
padding-top: 12px;
|
|
144
|
+
}
|
|
138
145
|
}
|
|
139
146
|
|
|
140
147
|
&:not(.disabled):focus {
|
|
141
148
|
outline: none;
|
|
142
149
|
|
|
143
|
-
.icon {
|
|
150
|
+
.radio-button-icon {
|
|
144
151
|
background-color: ${_styles.COLORS.white};
|
|
145
152
|
box-shadow: 0 0 8px ${_styles.COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
|
|
146
153
|
|
|
@@ -151,7 +158,7 @@
|
|
|
151
158
|
}
|
|
152
159
|
|
|
153
160
|
&:not(.disabled):hover {
|
|
154
|
-
.icon {
|
|
161
|
+
.radio-button-icon {
|
|
155
162
|
background-color: ${_styles.COLORS.primary_20};
|
|
156
163
|
|
|
157
164
|
svg {
|
|
@@ -161,7 +168,7 @@
|
|
|
161
168
|
}
|
|
162
169
|
|
|
163
170
|
&:not(.disabled):active {
|
|
164
|
-
.icon {
|
|
171
|
+
.radio-button-icon {
|
|
165
172
|
background: ${_styles.COLORS.primary_100};
|
|
166
173
|
box-shadow: none;
|
|
167
174
|
|
|
@@ -177,16 +184,16 @@
|
|
|
177
184
|
|
|
178
185
|
color: ${_styles.COLORS.neutral_300};
|
|
179
186
|
|
|
180
|
-
.icon,
|
|
181
|
-
.label {
|
|
187
|
+
.radio-button-icon,
|
|
188
|
+
.radio-button-label {
|
|
182
189
|
pointer-events: none;
|
|
183
190
|
}
|
|
184
191
|
|
|
185
|
-
.icon{
|
|
192
|
+
.radio-button-icon{
|
|
186
193
|
background-color: ${_styles.COLORS.white};
|
|
187
194
|
}
|
|
188
195
|
|
|
189
|
-
.icon svg {
|
|
196
|
+
.radio-button-icon svg {
|
|
190
197
|
color: ${_styles.COLORS.neutral_300};
|
|
191
198
|
}
|
|
192
199
|
}
|
|
@@ -223,7 +230,7 @@
|
|
|
223
230
|
showWarning: showWarning,
|
|
224
231
|
selected: selected
|
|
225
232
|
}, /*#__PURE__*/React.createElement("div", {
|
|
226
|
-
className: 'icon',
|
|
233
|
+
className: 'radio-button-icon',
|
|
227
234
|
id: id
|
|
228
235
|
}, selected && /*#__PURE__*/React.createElement(_SystemIcons.RadioButtonOn, {
|
|
229
236
|
className: iconPointerEventsTransparent ? "pointerTransparent" : "",
|
|
@@ -232,7 +239,7 @@
|
|
|
232
239
|
className: iconPointerEventsTransparent ? "pointerTransparent" : "",
|
|
233
240
|
size: "24px"
|
|
234
241
|
})), /*#__PURE__*/React.createElement("div", {
|
|
235
|
-
className: 'label'
|
|
242
|
+
className: 'radio-button-label'
|
|
236
243
|
}, label && /*#__PURE__*/React.createElement("label", {
|
|
237
244
|
htmlFor: id
|
|
238
245
|
}, label), additionalLabel !== undefined && /*#__PURE__*/React.createElement("span", null, additionalLabel)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/InputFields/RadioButton.tsx"],"names":["StyledRadioButton","styled","div","props","margin","COLORS","black","neutral_600","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentLStyling","white","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","id","selected","select","label","additionalLabel","showWarning","disabled","iconPointerEventsTransparent","RadioButton","size","onKeyPress","e","Size"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,QAAMA,iBAAiB,GAAGC,2BAAOC,GAAwF;AACzH;AACA;AACA;AACA;AACA;AACA
|
|
1
|
+
{"version":3,"sources":["../../../src/InputFields/RadioButton.tsx"],"names":["StyledRadioButton","styled","div","props","margin","COLORS","black","neutral_600","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentLStyling","white","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","id","selected","select","label","additionalLabel","showWarning","disabled","iconPointerEventsTransparent","RadioButton","size","onKeyPress","e","Size"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\n display: flex;\n width: 100%;\n min-height: 48px;\n min-width: 48px;\n\n ${props => (props.margin ? `margin: ${props.margin};` : '')}\n cursor: pointer;\n \n color: ${COLORS.black};\n\n .pointerTransparent {\n pointer-events: none;\n }\n\n .radio-button-icon {\n margin: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 36px;\n min-width: 36px;\n border-radius: 50%;\n\n svg {\n color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n }\n }\n\n .radio-button-label {\n user-select: none;\n display: flex;\n flex-direction: column;\n\n label{\n cursor: inherit;\n }\n\n span {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n .radio-button-label {\n padding-top: 14px;\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n .radio-button-label {\n padding-top: 12px;\n }\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n .radio-button-label {\n padding-top: 12px;\n }\n }\n\n &:not(.disabled):focus {\n outline: none;\n\n .radio-button-icon {\n background-color: ${COLORS.white};\n box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n svg {\n color: ${COLORS.neutral_600};\n }\n }\n }\n\n &:not(.disabled):hover {\n .radio-button-icon {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_700};\n }\n }\n }\n\n &:not(.disabled):active {\n .radio-button-icon {\n background: ${COLORS.primary_100};\n box-shadow: none;\n\n svg {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.disabled {\n box-shadow: none;\n cursor: not-allowed;\n\n color: ${COLORS.neutral_300};\n\n .radio-button-icon,\n .radio-button-label {\n pointer-events: none;\n }\n\n .radio-button-icon{\n background-color: ${COLORS.white};\n }\n \n .radio-button-icon svg {\n color: ${COLORS.neutral_300};\n }\n }\n`;\n\ninterface Props {\n id: string;\n selected: boolean;\n select: (selected: boolean) => void;\n label?: string;\n additionalLabel?: string;\n showWarning?: boolean;\n disabled?: boolean;\n iconPointerEventsTransparent?: boolean;\n margin?: string;\n size?: Size;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n id,\n selected,\n label,\n additionalLabel,\n showWarning,\n select,\n disabled,\n margin,\n iconPointerEventsTransparent,\n size\n}: Props, ref) => {\n const onKeyPress = (e: any) => {\n if (e.keyCode === 13 && !disabled) {\n select(!selected);\n }\n };\n\n size = size ?? Size.Medium;\n\n return (\n <StyledRadioButton key={id} margin={margin}\n ref={ref}\n onClick={() => !disabled && select(!selected)}\n onMouseDown={e => e.preventDefault()}\n onKeyDown={onKeyPress}\n disabled={disabled}\n className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n tabIndex={disabled ? -1 : 0}\n showWarning={showWarning}\n selected={selected}>\n <div className={'radio-button-icon'} id={id}>\n { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n </div>\n <div className={'radio-button-label'}>\n {label && <label htmlFor={id}>{label}</label>}\n {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n </div>\n </StyledRadioButton>\n );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports", "prop-types", "react", "../Button", "../icons/systemicons/SystemIcons", "../styles", "../types", "./ModalContainer", "./ModalStyles", "./ModalNote"], factory);
|
|
3
|
+
define(["exports", "prop-types", "react", "../Button", "../icons/systemicons/SystemIcons", "../styles", "../types", "./ModalContainer", "./ModalStyles", "./ModalNote", "../Tooltips", ".."], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports, require("prop-types"), require("react"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../styles"), require("../types"), require("./ModalContainer"), require("./ModalStyles"), require("./ModalNote"));
|
|
5
|
+
factory(exports, require("prop-types"), require("react"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../styles"), require("../types"), require("./ModalContainer"), require("./ModalStyles"), require("./ModalNote"), require("../Tooltips"), require(".."));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(mod.exports, global.propTypes, global.react, global.Button, global.SystemIcons, global.styles, global.types, global.ModalContainer, global.ModalStyles, global.ModalNote);
|
|
10
|
+
factory(mod.exports, global.propTypes, global.react, global.Button, global.SystemIcons, global.styles, global.types, global.ModalContainer, global.ModalStyles, global.ModalNote, global.Tooltips, global._);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (exports, _propTypes, _react, _Button, _SystemIcons, _styles, _types, _ModalContainer, _ModalStyles, _ModalNote) {
|
|
13
|
+
})(this, function (exports, _propTypes, _react, _Button, _SystemIcons, _styles, _types, _ModalContainer, _ModalStyles, _ModalNote, _Tooltips, _) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -87,6 +87,7 @@
|
|
|
87
87
|
title,
|
|
88
88
|
topImage,
|
|
89
89
|
buttons,
|
|
90
|
+
leftFooterAction,
|
|
90
91
|
backButton,
|
|
91
92
|
closeAction,
|
|
92
93
|
submitAction,
|
|
@@ -95,8 +96,6 @@
|
|
|
95
96
|
note,
|
|
96
97
|
state
|
|
97
98
|
}) => {
|
|
98
|
-
const [tooltipOpen, setTooltipOpen] = React.useState(false);
|
|
99
|
-
|
|
100
99
|
const getMinWidth = () => {
|
|
101
100
|
switch (size) {
|
|
102
101
|
case _types.Size.Small:
|
|
@@ -197,6 +196,23 @@
|
|
|
197
196
|
}
|
|
198
197
|
};
|
|
199
198
|
|
|
199
|
+
const ModalTootip = tooltip => {
|
|
200
|
+
return /*#__PURE__*/React.createElement(_Tooltips.TooltipWrapper, {
|
|
201
|
+
size: _types.Size.XSmall,
|
|
202
|
+
align: "center",
|
|
203
|
+
position: "top",
|
|
204
|
+
withArrow: false,
|
|
205
|
+
label: tooltip
|
|
206
|
+
}, /*#__PURE__*/React.createElement(_Button.IconButton, {
|
|
207
|
+
variant: "secondary",
|
|
208
|
+
shape: "circular",
|
|
209
|
+
action: () => {}
|
|
210
|
+
}, /*#__PURE__*/React.createElement(_SystemIcons.Help, {
|
|
211
|
+
size: "24px",
|
|
212
|
+
color: _styles.COLORS.neutral_600
|
|
213
|
+
})));
|
|
214
|
+
};
|
|
215
|
+
|
|
200
216
|
const ModalCloseButton = onClick => {
|
|
201
217
|
return /*#__PURE__*/React.createElement(_ModalStyles.CloseButtonWrapper, {
|
|
202
218
|
hasImage: !!topImage,
|
|
@@ -229,9 +245,54 @@
|
|
|
229
245
|
}
|
|
230
246
|
};
|
|
231
247
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
248
|
+
const getLeftActionIconElement = icon => {
|
|
249
|
+
return /*#__PURE__*/React.cloneElement(icon, {
|
|
250
|
+
size: size === _types.Size.Small ? '20px' : size === _types.Size.Large ? '28px' : '24px'
|
|
251
|
+
});
|
|
252
|
+
};
|
|
253
|
+
|
|
254
|
+
const LeftFooterAction = leftFooterAction => {
|
|
255
|
+
const {
|
|
256
|
+
text,
|
|
257
|
+
actionType,
|
|
258
|
+
disabled,
|
|
259
|
+
icon,
|
|
260
|
+
action
|
|
261
|
+
} = leftFooterAction;
|
|
262
|
+
|
|
263
|
+
switch (actionType) {
|
|
264
|
+
case 'button':
|
|
265
|
+
return /*#__PURE__*/React.createElement(_Button.Button, {
|
|
266
|
+
id: 'left-action-button',
|
|
267
|
+
type: leftFooterAction?.type,
|
|
268
|
+
disabled: disabled,
|
|
269
|
+
loading: leftFooterAction?.loading,
|
|
270
|
+
icon: icon,
|
|
271
|
+
size: size,
|
|
272
|
+
onClick: action,
|
|
273
|
+
variant: leftFooterAction?.variant ?? 'secondary',
|
|
274
|
+
style: {
|
|
275
|
+
order: -1,
|
|
276
|
+
marginRight: 'auto'
|
|
277
|
+
}
|
|
278
|
+
}, text);
|
|
279
|
+
|
|
280
|
+
case 'hyperlink':
|
|
281
|
+
return /*#__PURE__*/React.createElement(_.HyperLink, {
|
|
282
|
+
id: "left-action-hyperlink",
|
|
283
|
+
className: "footer-action",
|
|
284
|
+
href: leftFooterAction.href,
|
|
285
|
+
disabled: disabled,
|
|
286
|
+
variant: "default"
|
|
287
|
+
}, icon && getLeftActionIconElement(icon), text);
|
|
288
|
+
|
|
289
|
+
case 'note':
|
|
290
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
291
|
+
className: "footer-action note"
|
|
292
|
+
}, icon && getLeftActionIconElement(icon), /*#__PURE__*/React.createElement("span", null, text));
|
|
293
|
+
}
|
|
294
|
+
};
|
|
295
|
+
|
|
235
296
|
return /*#__PURE__*/React.createElement(_ModalContainer2.default, {
|
|
236
297
|
showModal: isModalOpen,
|
|
237
298
|
closeModal: closeModalAndClearInput,
|
|
@@ -248,15 +309,9 @@
|
|
|
248
309
|
}, /*#__PURE__*/React.createElement("img", {
|
|
249
310
|
src: topImage,
|
|
250
311
|
alt: "Modal top"
|
|
251
|
-
}),
|
|
252
|
-
|
|
253
|
-
}, /*#__PURE__*/React.createElement(
|
|
254
|
-
onMouseOver: () => setTooltipOpen(true),
|
|
255
|
-
onMouseOut: () => setTooltipOpen(false)
|
|
256
|
-
}, /*#__PURE__*/React.createElement(_SystemIcons.Help, {
|
|
257
|
-
size: "24px",
|
|
258
|
-
color: _styles.COLORS.neutral_600
|
|
259
|
-
})), tooltipOpen && /*#__PURE__*/React.createElement("span", null, tooltip)), !topImage && ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(_ModalStyles.ModalBody, {
|
|
312
|
+
}), /*#__PURE__*/React.createElement(_ModalStyles.ModalHeaderActionsWithImage, {
|
|
313
|
+
hasBackButton: !!backButton
|
|
314
|
+
}, ModalBackButton(), ModalCloseButton(closeAction))), /*#__PURE__*/React.createElement(_ModalStyles.ModalTitleSection, null, /*#__PURE__*/React.createElement(_ModalStyles.FlexContainer, null, !topImage && ModalBackButton(), title && ModalTitle(title, size)), /*#__PURE__*/React.createElement(_ModalStyles.ModalHeaderActions, null, tooltip && ModalTootip(tooltip), !topImage && ModalCloseButton(closeAction))), /*#__PURE__*/React.createElement(_ModalStyles.ModalBody, {
|
|
260
315
|
size: size
|
|
261
316
|
}, children), note && /*#__PURE__*/React.createElement(_ModalNote.ModalNote, {
|
|
262
317
|
note: note,
|
|
@@ -272,12 +327,8 @@
|
|
|
272
327
|
size: size,
|
|
273
328
|
onClick: b.action,
|
|
274
329
|
type: b.type,
|
|
275
|
-
variant: b.variant
|
|
276
|
-
|
|
277
|
-
order: -1,
|
|
278
|
-
marginRight: b === lastLeftButton ? 'auto' : undefined
|
|
279
|
-
} : undefined
|
|
280
|
-
}, b.text))))));
|
|
330
|
+
variant: b.variant
|
|
331
|
+
}, b.text)), leftFooterAction && LeftFooterAction(leftFooterAction)))));
|
|
281
332
|
};
|
|
282
333
|
|
|
283
334
|
ModalDialog.propTypes = {
|
|
@@ -285,11 +336,7 @@
|
|
|
285
336
|
closeModalAndClearInput: _propTypes2.default.any.isRequired,
|
|
286
337
|
title: _propTypes2.default.string,
|
|
287
338
|
topImage: _propTypes2.default.any,
|
|
288
|
-
buttons: _propTypes2.default.
|
|
289
|
-
action: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.func]),
|
|
290
|
-
text: _propTypes2.default.string.isRequired,
|
|
291
|
-
position: _propTypes2.default.oneOf(['left', 'right'])
|
|
292
|
-
})),
|
|
339
|
+
buttons: _propTypes2.default.array,
|
|
293
340
|
tooltip: _propTypes2.default.string,
|
|
294
341
|
backButton: _propTypes2.default.func,
|
|
295
342
|
closeAction: _propTypes2.default.func.isRequired,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["action","text","position","isModalOpen","closeModalAndClearInput","title","topImage","buttons","tooltip","backButton","closeAction","submitAction","note","state","ModalDialog","React","getMinWidth","Size","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalCloseButton","onClick","size","COLORS","black","ModalBackButton","lastLeftButton","a","setTooltipOpen","neutral_600","tooltipOpen","b","order","marginRight","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { SystemIcon, SystemIcons } from '..';\nimport {Button, IconButton} from '../Button';\nimport {ButtonProps} from '../Button/Button';\nimport {ArrowLineLeft, Close, Help} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL} from '../styles';\nimport {Size} from '../types'\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n ModalBody,\n ModalFooter,\n ModalTitleSection,\n StyledModalHeader\n} from './ModalStyles';\n\nimport {ModalNote} from './ModalNote';\n\ninterface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {\n action?: (() => void) | ((e: any) => void);\n text: string;\n position?: 'left' | 'right';\n}\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string;\n topImage?: any;\n buttons?: ButtonAction[];\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string;\n state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n buttons,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state\n}) => {\n const [tooltipOpen, setTooltipOpen] = React.useState<boolean>(false);\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 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 ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n buttons?.reverse();\n const lastLeftButton = buttons?.find(a => a.position === 'left');\n buttons?.reverse();\n\n return (\n <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n <Column>\n <form onSubmit={submitAction}>\n {topImage && (\n <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n <img src={topImage} alt=\"Modal top\" />\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n {!topImage && ModalBackButton()}\n {title && ModalTitle(title, size)}\n {tooltip && (\n <div id=\"tooltip\">\n <div onMouseOver={() => setTooltipOpen(true)} onMouseOut={() => setTooltipOpen(false)}>\n <Help size=\"24px\" color={COLORS.neutral_600} />\n </div>\n {tooltipOpen && <span>{tooltip}</span>}\n </div>\n )}\n {!topImage && ModalCloseButton(closeAction)}\n </ModalTitleSection>\n\n <ModalBody size={size}>{children}</ModalBody>\n\n { note && <ModalNote note={note} state={state} size={size}/> }\n\n <ModalFooter size={size}>\n {buttons?.map((b, i) => (\n <Button key={b.id || i}\n id={b.id}\n disabled={b.disabled}\n loading={b.loading}\n size={size}\n onClick={b.action}\n type={b.type}\n variant={b.variant}\n style={\n b.position === 'left'\n ? {\n order: -1,\n marginRight: b === lastLeftButton ? 'auto' : undefined\n }\n : undefined\n }>\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":["isModalOpen","closeModalAndClearInput","title","topImage","buttons","tooltip","backButton","closeAction","submitAction","note","state","ModalDialog","getMinWidth","Size","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalTootip","COLORS","neutral_600","ModalCloseButton","onClick","size","black","ModalBackButton","getLeftActionIconElement","icon","LeftFooterAction","leftFooterAction","action","order","marginRight","b","variant"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { ReactNode } from 'react';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string;\n topImage?: any;\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;\n state?: string;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\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 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 ModalTootip = (tooltip: string) => {\n return (\n <TooltipWrapper 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 );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n const getLeftActionIconElement = (icon: 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 id=\"left-action-hyperlink\" className=\"footer-action\" href={(leftFooterAction as LeftFooterHyperlink).href} disabled={disabled} variant=\"default\">\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n return (\n <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n <Column>\n <form onSubmit={submitAction}>\n {topImage && (\n <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n <img src={topImage} alt=\"Modal top\" />\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!topImage && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!topImage && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n </ModalTitleSection>\n\n <ModalBody size={size}>{children}</ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} />}\n\n <ModalFooter size={size}>\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 {leftFooterAction && LeftFooterAction(leftFooterAction)}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
|