@laerdal/life-react-components 1.2.2-dev.15.full → 1.2.2-dev.16
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 +53 -14
- package/dist/esm/Modals/ModalDialog.js.map +1 -1
- package/dist/esm/Modals/ModalStyles.js +14 -1
- 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 +54 -16
- package/dist/js/Modals/ModalDialog.js.map +1 -1
- package/dist/js/Modals/ModalStyles.js +7 -3
- 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 +56 -18
- package/dist/umd/Modals/ModalDialog.js.map +1 -1
- package/dist/umd/Modals/ModalStyles.js +14 -1
- 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
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ButtonProps } from '../Button/Button';
|
|
2
|
+
import { HyperlinkProps } from '../HyperLink/HyperLink';
|
|
3
|
+
export interface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {
|
|
4
|
+
action?: (() => void) | ((e: any) => void);
|
|
5
|
+
text: string;
|
|
6
|
+
}
|
|
7
|
+
export interface LeftFooterActionBase {
|
|
8
|
+
actionType: 'hyperlink' | 'note' | 'button';
|
|
9
|
+
text: string;
|
|
10
|
+
icon?: React.ReactNode;
|
|
11
|
+
action?: (() => void) | ((e: any) => void);
|
|
12
|
+
}
|
|
13
|
+
export interface LeftFooterHyperlink extends HyperlinkProps, LeftFooterActionBase {
|
|
14
|
+
}
|
|
15
|
+
export interface LeftFooterButton extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'>, LeftFooterActionBase {
|
|
16
|
+
text: string;
|
|
17
|
+
}
|
|
18
|
+
export declare type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"ModalTypes.js"}
|
|
@@ -79,29 +79,80 @@
|
|
|
79
79
|
};
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
+
const _excluded = ["children", "target", "variant"];
|
|
83
|
+
|
|
84
|
+
function _extends() {
|
|
85
|
+
_extends = Object.assign || function (target) {
|
|
86
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
87
|
+
var source = arguments[i];
|
|
88
|
+
|
|
89
|
+
for (var key in source) {
|
|
90
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
91
|
+
target[key] = source[key];
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
return target;
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
return _extends.apply(this, arguments);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
function _objectWithoutProperties(source, excluded) {
|
|
103
|
+
if (source == null) return {};
|
|
104
|
+
|
|
105
|
+
var target = _objectWithoutPropertiesLoose(source, excluded);
|
|
106
|
+
|
|
107
|
+
var key, i;
|
|
108
|
+
|
|
109
|
+
if (Object.getOwnPropertySymbols) {
|
|
110
|
+
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
111
|
+
|
|
112
|
+
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
113
|
+
key = sourceSymbolKeys[i];
|
|
114
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
115
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
116
|
+
target[key] = source[key];
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
return target;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
124
|
+
if (source == null) return {};
|
|
125
|
+
var target = {};
|
|
126
|
+
var sourceKeys = Object.keys(source);
|
|
127
|
+
var key, i;
|
|
128
|
+
|
|
129
|
+
for (i = 0; i < sourceKeys.length; i++) {
|
|
130
|
+
key = sourceKeys[i];
|
|
131
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
132
|
+
target[key] = source[key];
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
return target;
|
|
136
|
+
}
|
|
137
|
+
|
|
82
138
|
const StyledLink = _styledComponents2.default.a`
|
|
83
139
|
${props => props.variant === 'inverted' ? _styling.invertedStyle : _styling.defaultStyle}
|
|
84
140
|
${props => props.margin ? `margin: ${props.margin};` : ''}
|
|
85
141
|
`;
|
|
86
142
|
|
|
87
|
-
const HyperLink =
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
return /*#__PURE__*/React.createElement(StyledLink, {
|
|
97
|
-
id: id,
|
|
98
|
-
className: className,
|
|
143
|
+
const HyperLink = _ref => {
|
|
144
|
+
let {
|
|
145
|
+
children,
|
|
146
|
+
target = '_blank',
|
|
147
|
+
variant = 'default'
|
|
148
|
+
} = _ref,
|
|
149
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
150
|
+
|
|
151
|
+
return /*#__PURE__*/React.createElement(StyledLink, _extends({}, props, {
|
|
99
152
|
variant: variant,
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
margin: margin
|
|
104
|
-
}, children);
|
|
153
|
+
target: target,
|
|
154
|
+
rel: "noopener noreferrer"
|
|
155
|
+
}), children);
|
|
105
156
|
};
|
|
106
157
|
|
|
107
158
|
HyperLink.propTypes = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","defaultStyle","margin","id","variant","href","disabled","children","className","HyperLink","target"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K
|
|
1
|
+
{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","defaultStyle","margin","id","variant","href","disabled","children","className","HyperLink","target"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,QAAMA,UAAU,GAAGC,2BAAOC,CAGvB;AACH,IAAKC,KAAD,IAAYA,KAAK,CAALA,OAAAA,KAAAA,UAAAA,GAAAA,sBAAAA,GAA+CC,qBAAc;AAC7E,IAAKD,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACE,MAAhCF,GAAAA,GAA4C,EAAI;AALhE,CAAA;;AAkBA,QAAMS,SAAkD,GAAG,IAAA,IAAoF;AAAA,QAAnF;AAAA,MAAA,QAAA;AAAYC,MAAAA,MAAM,GAAlB,QAAA;AAA+BN,MAAAA,OAAO,GAAG;AAAzC,QAAmF,IAAA;AAAA,QAA5BJ,KAA4B,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA;;AAC7I,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,QAAA,CAAA,EAAA,EAAA,KAAA,EAAA;AAAuB,MAAA,OAAO,EAA9B,OAAA;AAAyC,MAAA,MAAM,EAA/C,MAAA;AAAyD,MAAA,GAAG,EAAC;AAA7D,KAAA,CAAA,EADF,QACE,CADF;AADF,GAAA;;;AATEG,IAAAA,E;AACAC,IAAAA,O,6BAAS,S,EAAY,U;AACrBC,IAAAA,I;AACAC,IAAAA,Q;AACAJ,IAAAA,M;AACAK,IAAAA,Q;AACAC,IAAAA,S;;oBAWF,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n variant: 'default' | 'inverted';\n margin?: string;\n}>`\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"}
|
|
@@ -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":"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","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"], 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(".."), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../styles"), require("../types"), require("./ModalContainer"), require("./ModalStyles"), require("./ModalNote"));
|
|
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._, global.Button, global.SystemIcons, global.styles, global.types, global.ModalContainer, global.ModalStyles, global.ModalNote);
|
|
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) {
|
|
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,
|
|
@@ -229,9 +230,54 @@
|
|
|
229
230
|
}
|
|
230
231
|
};
|
|
231
232
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
233
|
+
const getLeftActionIconElement = icon => {
|
|
234
|
+
return /*#__PURE__*/React.cloneElement(icon, {
|
|
235
|
+
size: size === _types.Size.Small ? '20px' : size === _types.Size.Large ? '28px' : '24px'
|
|
236
|
+
});
|
|
237
|
+
};
|
|
238
|
+
|
|
239
|
+
const LeftFooterAction = leftFooterAction => {
|
|
240
|
+
const {
|
|
241
|
+
text,
|
|
242
|
+
actionType,
|
|
243
|
+
disabled,
|
|
244
|
+
icon,
|
|
245
|
+
action
|
|
246
|
+
} = leftFooterAction;
|
|
247
|
+
|
|
248
|
+
switch (actionType) {
|
|
249
|
+
case 'button':
|
|
250
|
+
return /*#__PURE__*/React.createElement(_Button.Button, {
|
|
251
|
+
id: 'left-action-button',
|
|
252
|
+
type: leftFooterAction?.type,
|
|
253
|
+
disabled: disabled,
|
|
254
|
+
loading: leftFooterAction?.loading,
|
|
255
|
+
icon: icon,
|
|
256
|
+
size: size,
|
|
257
|
+
onClick: action,
|
|
258
|
+
variant: leftFooterAction?.variant ?? 'secondary',
|
|
259
|
+
style: {
|
|
260
|
+
order: -1,
|
|
261
|
+
marginRight: 'auto'
|
|
262
|
+
}
|
|
263
|
+
}, text);
|
|
264
|
+
|
|
265
|
+
case 'hyperlink':
|
|
266
|
+
return /*#__PURE__*/React.createElement(_.HyperLink, {
|
|
267
|
+
id: "left-action-hyperlink",
|
|
268
|
+
className: "footer-action",
|
|
269
|
+
href: leftFooterAction.href,
|
|
270
|
+
disabled: disabled,
|
|
271
|
+
variant: "default"
|
|
272
|
+
}, icon && getLeftActionIconElement(icon), text);
|
|
273
|
+
|
|
274
|
+
case 'note':
|
|
275
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
276
|
+
className: "footer-action note"
|
|
277
|
+
}, icon && getLeftActionIconElement(icon), /*#__PURE__*/React.createElement("span", null, text));
|
|
278
|
+
}
|
|
279
|
+
};
|
|
280
|
+
|
|
235
281
|
return /*#__PURE__*/React.createElement(_ModalContainer2.default, {
|
|
236
282
|
showModal: isModalOpen,
|
|
237
283
|
closeModal: closeModalAndClearInput,
|
|
@@ -272,12 +318,8 @@
|
|
|
272
318
|
size: size,
|
|
273
319
|
onClick: b.action,
|
|
274
320
|
type: b.type,
|
|
275
|
-
variant: b.variant
|
|
276
|
-
|
|
277
|
-
order: -1,
|
|
278
|
-
marginRight: b === lastLeftButton ? 'auto' : undefined
|
|
279
|
-
} : undefined
|
|
280
|
-
}, b.text))))));
|
|
321
|
+
variant: b.variant
|
|
322
|
+
}, b.text)), leftFooterAction && LeftFooterAction(leftFooterAction)))));
|
|
281
323
|
};
|
|
282
324
|
|
|
283
325
|
ModalDialog.propTypes = {
|
|
@@ -285,11 +327,7 @@
|
|
|
285
327
|
closeModalAndClearInput: _propTypes2.default.any.isRequired,
|
|
286
328
|
title: _propTypes2.default.string,
|
|
287
329
|
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
|
-
})),
|
|
330
|
+
buttons: _propTypes2.default.array,
|
|
293
331
|
tooltip: _propTypes2.default.string,
|
|
294
332
|
backButton: _propTypes2.default.func,
|
|
295
333
|
closeAction: _propTypes2.default.func.isRequired,
|