carbon-react 119.5.0 → 119.6.0
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/esm/__internal__/validation-message/validation-message.style.js +1 -1
- package/esm/components/menu/menu-full-screen/menu-full-screen.component.js +2 -1
- package/esm/components/switch/switch.component.js +57 -7
- package/esm/components/switch/switch.style.d.ts +4 -0
- package/esm/components/switch/switch.style.js +25 -2
- package/lib/__internal__/validation-message/validation-message.style.js +1 -1
- package/lib/components/menu/menu-full-screen/menu-full-screen.component.js +2 -1
- package/lib/components/switch/switch.component.js +56 -6
- package/lib/components/switch/switch.style.d.ts +4 -0
- package/lib/components/switch/switch.style.js +28 -3
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ const StyledValidationMessage = styled.p`
|
|
|
6
6
|
} = _ref;
|
|
7
7
|
return css`
|
|
8
8
|
color: ${isWarning ? "var(--colorsSemanticCaution600)" : "var(--colorsSemanticNegative500)"};
|
|
9
|
-
font-weight: ${isWarning ? "
|
|
9
|
+
font-weight: ${isWarning ? "normal" : "bold"};
|
|
10
10
|
margin-top: 0px;
|
|
11
11
|
margin-bottom: 8px;
|
|
12
12
|
`;
|
|
@@ -46,6 +46,7 @@ export const MenuFullscreen = _ref => {
|
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
|
+
const filteredChildren = React.Children.toArray(children).filter(c => /*#__PURE__*/React.isValidElement(c));
|
|
49
50
|
return /*#__PURE__*/React.createElement("li", {
|
|
50
51
|
"aria-label": "menu-fullscreen"
|
|
51
52
|
}, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(FocusTrap, {
|
|
@@ -89,6 +90,6 @@ export const MenuFullscreen = _ref => {
|
|
|
89
90
|
openSubmenuId: null,
|
|
90
91
|
setOpenSubmenuId: /* istanbul ignore next */() => {}
|
|
91
92
|
}
|
|
92
|
-
},
|
|
93
|
+
}, filteredChildren.map((child, index) => /*#__PURE__*/React.createElement(React.Fragment, null, child, index < filteredChildren.length - 1 ? /*#__PURE__*/React.createElement(MenuDivider, null) : null)))))))));
|
|
93
94
|
};
|
|
94
95
|
export default MenuFullscreen;
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
import React, { useState, useCallback } from "react";
|
|
1
|
+
import React, { useState, useCallback, useContext } from "react";
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
|
-
import StyledSwitch from "./switch.style";
|
|
3
|
+
import StyledSwitch, { ErrorBorder, StyledHintText } from "./switch.style";
|
|
4
4
|
import CheckableInput from "../../__internal__/checkable-input";
|
|
5
5
|
import SwitchSlider from "./__internal__/switch-slider.component";
|
|
6
6
|
import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
|
|
7
7
|
import { TooltipProvider } from "../../__internal__/tooltip-provider";
|
|
8
8
|
import Logger from "../../__internal__/utils/logger";
|
|
9
9
|
import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
|
|
10
|
+
import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
|
|
11
|
+
import ValidationMessage from "../../__internal__/validation-message/validation-message.component";
|
|
12
|
+
import Box from "../box";
|
|
13
|
+
import Label from "../../__internal__/label";
|
|
10
14
|
let deprecateInputRefWarnTriggered = false;
|
|
11
15
|
let deprecateUncontrolledWarnTriggered = false;
|
|
12
16
|
const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
@@ -43,6 +47,9 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
43
47
|
...rest
|
|
44
48
|
} = _ref;
|
|
45
49
|
const isControlled = checked !== undefined;
|
|
50
|
+
const {
|
|
51
|
+
validationRedesignOptIn
|
|
52
|
+
} = useContext(NewValidationContext);
|
|
46
53
|
const [checkedInternal, setCheckedInternal] = useState(defaultChecked || false);
|
|
47
54
|
if (!deprecateInputRefWarnTriggered && inputRef) {
|
|
48
55
|
deprecateInputRefWarnTriggered = true;
|
|
@@ -84,7 +91,7 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
84
91
|
error,
|
|
85
92
|
warning,
|
|
86
93
|
info,
|
|
87
|
-
useValidationIcon: !shouldValidationBeOnLabel && !disabled
|
|
94
|
+
useValidationIcon: !validationRedesignOptIn && !shouldValidationBeOnLabel && !disabled
|
|
88
95
|
};
|
|
89
96
|
const inputProps = {
|
|
90
97
|
autoFocus,
|
|
@@ -93,6 +100,8 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
93
100
|
info,
|
|
94
101
|
disabled: disabled || loading,
|
|
95
102
|
checked: isControlled ? checked : checkedInternal,
|
|
103
|
+
label,
|
|
104
|
+
labelHelp,
|
|
96
105
|
fieldHelpInline,
|
|
97
106
|
labelInline: shouldLabelBeInline,
|
|
98
107
|
labelSpacing,
|
|
@@ -101,8 +110,6 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
101
110
|
onChange: isControlled ? onChange : onChangeInternal,
|
|
102
111
|
id,
|
|
103
112
|
name,
|
|
104
|
-
label,
|
|
105
|
-
labelHelp,
|
|
106
113
|
value,
|
|
107
114
|
type: "checkbox",
|
|
108
115
|
role: "switch",
|
|
@@ -112,10 +119,53 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
112
119
|
ref: ref || inputRef,
|
|
113
120
|
...rest
|
|
114
121
|
};
|
|
115
|
-
|
|
122
|
+
|
|
123
|
+
// Created separate const declarations to help when removing the old validation.
|
|
124
|
+
// Not all props utilised by the old validation work or will be needed with the new validation.
|
|
125
|
+
const switchStylePropsForNewValidation = {
|
|
126
|
+
"data-component": dataComponent,
|
|
127
|
+
"data-role": dataRole,
|
|
128
|
+
"data-element": dataElement,
|
|
129
|
+
checked: isControlled ? checked : checkedInternal,
|
|
130
|
+
size,
|
|
131
|
+
...marginProps
|
|
132
|
+
};
|
|
133
|
+
const switchSliderPropsForNewValidation = {
|
|
134
|
+
checked: isControlled ? checked : checkedInternal,
|
|
135
|
+
disabled: disabled || loading,
|
|
136
|
+
loading,
|
|
137
|
+
size,
|
|
138
|
+
error,
|
|
139
|
+
warning
|
|
140
|
+
};
|
|
141
|
+
const inputPropsForNewValidation = {
|
|
142
|
+
autoFocus,
|
|
143
|
+
error,
|
|
144
|
+
warning,
|
|
145
|
+
disabled: disabled || loading,
|
|
146
|
+
checked: isControlled ? checked : checkedInternal,
|
|
147
|
+
onBlur,
|
|
148
|
+
onFocus,
|
|
149
|
+
onChange: isControlled ? onChange : onChangeInternal,
|
|
150
|
+
id,
|
|
151
|
+
name,
|
|
152
|
+
value,
|
|
153
|
+
type: "checkbox",
|
|
154
|
+
role: "switch",
|
|
155
|
+
ref: ref || inputRef,
|
|
156
|
+
...rest
|
|
157
|
+
};
|
|
158
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(StyledSwitch, switchStylePropsForNewValidation, /*#__PURE__*/React.createElement(Label, null, label, labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), /*#__PURE__*/React.createElement(Box, {
|
|
159
|
+
position: "relative"
|
|
160
|
+
}, /*#__PURE__*/React.createElement(ValidationMessage, {
|
|
161
|
+
error: error,
|
|
162
|
+
warning: warning
|
|
163
|
+
}), (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
|
|
164
|
+
warning: !!(!error && warning)
|
|
165
|
+
}), /*#__PURE__*/React.createElement(CheckableInput, inputPropsForNewValidation, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderPropsForNewValidation))))) : /*#__PURE__*/React.createElement(TooltipProvider, {
|
|
116
166
|
helpAriaLabel: helpAriaLabel,
|
|
117
167
|
tooltipPosition: tooltipPosition
|
|
118
|
-
}, /*#__PURE__*/React.createElement(StyledSwitch, switchStyleProps, /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderProps))));
|
|
168
|
+
}, /*#__PURE__*/React.createElement(StyledSwitch, switchStyleProps, /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderProps)))));
|
|
119
169
|
});
|
|
120
170
|
Switch.propTypes = {
|
|
121
171
|
"about": PropTypes.string,
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import { SwitchProps } from "./switch.component";
|
|
2
2
|
declare type StyledSwitchProps = Pick<SwitchProps, "fieldHelpInline" | "labelInline" | "reverse" | "size">;
|
|
3
|
+
export declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
|
|
4
|
+
warning: boolean;
|
|
5
|
+
}, never>;
|
|
6
|
+
export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
7
|
declare const StyledSwitch: import("styled-components").StyledComponent<"div", any, StyledSwitchProps, never>;
|
|
4
8
|
export default StyledSwitch;
|
|
@@ -8,14 +8,37 @@ import { StyledCheckableInput } from "../../__internal__/checkable-input/checkab
|
|
|
8
8
|
import StyledSwitchSlider from "./__internal__/switch-slider.style";
|
|
9
9
|
import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
|
|
10
10
|
import { FieldLineStyle } from "../../__internal__/form-field/form-field.style";
|
|
11
|
-
const
|
|
11
|
+
export const ErrorBorder = styled.span`
|
|
12
12
|
${_ref => {
|
|
13
|
+
let {
|
|
14
|
+
warning
|
|
15
|
+
} = _ref;
|
|
16
|
+
return css`
|
|
17
|
+
position: absolute;
|
|
18
|
+
z-index: 6;
|
|
19
|
+
width: 2px;
|
|
20
|
+
background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
|
|
21
|
+
left: -12px;
|
|
22
|
+
bottom: -4px;
|
|
23
|
+
top: 2px;
|
|
24
|
+
`;
|
|
25
|
+
}}
|
|
26
|
+
`;
|
|
27
|
+
export const StyledHintText = styled.div`
|
|
28
|
+
margin-top: 8px;
|
|
29
|
+
margin-bottom: 8px;
|
|
30
|
+
color: var(--colorsUtilityYin055);
|
|
31
|
+
font-size: 14px;
|
|
32
|
+
font-weight: 400;
|
|
33
|
+
`;
|
|
34
|
+
const StyledSwitch = styled.div`
|
|
35
|
+
${_ref2 => {
|
|
13
36
|
let {
|
|
14
37
|
fieldHelpInline,
|
|
15
38
|
labelInline,
|
|
16
39
|
reverse,
|
|
17
40
|
size
|
|
18
|
-
} =
|
|
41
|
+
} = _ref2;
|
|
19
42
|
return css`
|
|
20
43
|
${margin}
|
|
21
44
|
${FieldLineStyle} {
|
|
@@ -14,7 +14,7 @@ const StyledValidationMessage = _styledComponents.default.p`
|
|
|
14
14
|
} = _ref;
|
|
15
15
|
return (0, _styledComponents.css)`
|
|
16
16
|
color: ${isWarning ? "var(--colorsSemanticCaution600)" : "var(--colorsSemanticNegative500)"};
|
|
17
|
-
font-weight: ${isWarning ? "
|
|
17
|
+
font-weight: ${isWarning ? "normal" : "bold"};
|
|
18
18
|
margin-top: 0px;
|
|
19
19
|
margin-bottom: 8px;
|
|
20
20
|
`;
|
|
@@ -55,6 +55,7 @@ const MenuFullscreen = _ref => {
|
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
};
|
|
58
|
+
const filteredChildren = _react.default.Children.toArray(children).filter(c => /*#__PURE__*/_react.default.isValidElement(c));
|
|
58
59
|
return /*#__PURE__*/_react.default.createElement("li", {
|
|
59
60
|
"aria-label": "menu-fullscreen"
|
|
60
61
|
}, /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
|
|
@@ -98,7 +99,7 @@ const MenuFullscreen = _ref => {
|
|
|
98
99
|
openSubmenuId: null,
|
|
99
100
|
setOpenSubmenuId: /* istanbul ignore next */() => {}
|
|
100
101
|
}
|
|
101
|
-
},
|
|
102
|
+
}, filteredChildren.map((child, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, child, index < filteredChildren.length - 1 ? /*#__PURE__*/_react.default.createElement(_menuDivider.default, null) : null)))))))));
|
|
102
103
|
};
|
|
103
104
|
exports.MenuFullscreen = MenuFullscreen;
|
|
104
105
|
var _default = MenuFullscreen;
|
|
@@ -6,13 +6,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = exports.Switch = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var _switch =
|
|
9
|
+
var _switch = _interopRequireWildcard(require("./switch.style"));
|
|
10
10
|
var _checkableInput = _interopRequireDefault(require("../../__internal__/checkable-input"));
|
|
11
11
|
var _switchSlider = _interopRequireDefault(require("./__internal__/switch-slider.component"));
|
|
12
12
|
var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
|
|
13
13
|
var _tooltipProvider = require("../../__internal__/tooltip-provider");
|
|
14
14
|
var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
|
|
15
15
|
var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
|
|
16
|
+
var _carbonProvider = require("../carbon-provider/carbon-provider.component");
|
|
17
|
+
var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message/validation-message.component"));
|
|
18
|
+
var _box = _interopRequireDefault(require("../box"));
|
|
19
|
+
var _label = _interopRequireDefault(require("../../__internal__/label"));
|
|
16
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
21
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
18
22
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -52,6 +56,9 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
52
56
|
...rest
|
|
53
57
|
} = _ref;
|
|
54
58
|
const isControlled = checked !== undefined;
|
|
59
|
+
const {
|
|
60
|
+
validationRedesignOptIn
|
|
61
|
+
} = (0, _react.useContext)(_carbonProvider.NewValidationContext);
|
|
55
62
|
const [checkedInternal, setCheckedInternal] = (0, _react.useState)(defaultChecked || false);
|
|
56
63
|
if (!deprecateInputRefWarnTriggered && inputRef) {
|
|
57
64
|
deprecateInputRefWarnTriggered = true;
|
|
@@ -93,7 +100,7 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
93
100
|
error,
|
|
94
101
|
warning,
|
|
95
102
|
info,
|
|
96
|
-
useValidationIcon: !shouldValidationBeOnLabel && !disabled
|
|
103
|
+
useValidationIcon: !validationRedesignOptIn && !shouldValidationBeOnLabel && !disabled
|
|
97
104
|
};
|
|
98
105
|
const inputProps = {
|
|
99
106
|
autoFocus,
|
|
@@ -102,6 +109,8 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
102
109
|
info,
|
|
103
110
|
disabled: disabled || loading,
|
|
104
111
|
checked: isControlled ? checked : checkedInternal,
|
|
112
|
+
label,
|
|
113
|
+
labelHelp,
|
|
105
114
|
fieldHelpInline,
|
|
106
115
|
labelInline: shouldLabelBeInline,
|
|
107
116
|
labelSpacing,
|
|
@@ -110,8 +119,6 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
110
119
|
onChange: isControlled ? onChange : onChangeInternal,
|
|
111
120
|
id,
|
|
112
121
|
name,
|
|
113
|
-
label,
|
|
114
|
-
labelHelp,
|
|
115
122
|
value,
|
|
116
123
|
type: "checkbox",
|
|
117
124
|
role: "switch",
|
|
@@ -121,10 +128,53 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
121
128
|
ref: ref || inputRef,
|
|
122
129
|
...rest
|
|
123
130
|
};
|
|
124
|
-
|
|
131
|
+
|
|
132
|
+
// Created separate const declarations to help when removing the old validation.
|
|
133
|
+
// Not all props utilised by the old validation work or will be needed with the new validation.
|
|
134
|
+
const switchStylePropsForNewValidation = {
|
|
135
|
+
"data-component": dataComponent,
|
|
136
|
+
"data-role": dataRole,
|
|
137
|
+
"data-element": dataElement,
|
|
138
|
+
checked: isControlled ? checked : checkedInternal,
|
|
139
|
+
size,
|
|
140
|
+
...marginProps
|
|
141
|
+
};
|
|
142
|
+
const switchSliderPropsForNewValidation = {
|
|
143
|
+
checked: isControlled ? checked : checkedInternal,
|
|
144
|
+
disabled: disabled || loading,
|
|
145
|
+
loading,
|
|
146
|
+
size,
|
|
147
|
+
error,
|
|
148
|
+
warning
|
|
149
|
+
};
|
|
150
|
+
const inputPropsForNewValidation = {
|
|
151
|
+
autoFocus,
|
|
152
|
+
error,
|
|
153
|
+
warning,
|
|
154
|
+
disabled: disabled || loading,
|
|
155
|
+
checked: isControlled ? checked : checkedInternal,
|
|
156
|
+
onBlur,
|
|
157
|
+
onFocus,
|
|
158
|
+
onChange: isControlled ? onChange : onChangeInternal,
|
|
159
|
+
id,
|
|
160
|
+
name,
|
|
161
|
+
value,
|
|
162
|
+
type: "checkbox",
|
|
163
|
+
role: "switch",
|
|
164
|
+
ref: ref || inputRef,
|
|
165
|
+
...rest
|
|
166
|
+
};
|
|
167
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_switch.default, switchStylePropsForNewValidation, /*#__PURE__*/_react.default.createElement(_label.default, null, label, labelHelp && /*#__PURE__*/_react.default.createElement(_switch.StyledHintText, null, labelHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
|
|
168
|
+
position: "relative"
|
|
169
|
+
}, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
|
|
170
|
+
error: error,
|
|
171
|
+
warning: warning
|
|
172
|
+
}), (error || warning) && /*#__PURE__*/_react.default.createElement(_switch.ErrorBorder, {
|
|
173
|
+
warning: !!(!error && warning)
|
|
174
|
+
}), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputPropsForNewValidation, /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderPropsForNewValidation))))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
|
|
125
175
|
helpAriaLabel: helpAriaLabel,
|
|
126
176
|
tooltipPosition: tooltipPosition
|
|
127
|
-
}, /*#__PURE__*/_react.default.createElement(_switch.default, switchStyleProps, /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderProps))));
|
|
177
|
+
}, /*#__PURE__*/_react.default.createElement(_switch.default, switchStyleProps, /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderProps)))));
|
|
128
178
|
});
|
|
129
179
|
exports.Switch = Switch;
|
|
130
180
|
Switch.propTypes = {
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import { SwitchProps } from "./switch.component";
|
|
2
2
|
declare type StyledSwitchProps = Pick<SwitchProps, "fieldHelpInline" | "labelInline" | "reverse" | "size">;
|
|
3
|
+
export declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
|
|
4
|
+
warning: boolean;
|
|
5
|
+
}, never>;
|
|
6
|
+
export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
7
|
declare const StyledSwitch: import("styled-components").StyledComponent<"div", any, StyledSwitchProps, never>;
|
|
4
8
|
export default StyledSwitch;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = void 0;
|
|
6
|
+
exports.default = exports.StyledHintText = exports.ErrorBorder = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
8
|
var _styledSystem = require("styled-system");
|
|
9
9
|
var _base = _interopRequireDefault(require("../../style/themes/base"));
|
|
@@ -17,14 +17,39 @@ var _formField = require("../../__internal__/form-field/form-field.style");
|
|
|
17
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
18
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
19
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
20
|
-
const
|
|
20
|
+
const ErrorBorder = _styledComponents.default.span`
|
|
21
21
|
${_ref => {
|
|
22
|
+
let {
|
|
23
|
+
warning
|
|
24
|
+
} = _ref;
|
|
25
|
+
return (0, _styledComponents.css)`
|
|
26
|
+
position: absolute;
|
|
27
|
+
z-index: 6;
|
|
28
|
+
width: 2px;
|
|
29
|
+
background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
|
|
30
|
+
left: -12px;
|
|
31
|
+
bottom: -4px;
|
|
32
|
+
top: 2px;
|
|
33
|
+
`;
|
|
34
|
+
}}
|
|
35
|
+
`;
|
|
36
|
+
exports.ErrorBorder = ErrorBorder;
|
|
37
|
+
const StyledHintText = _styledComponents.default.div`
|
|
38
|
+
margin-top: 8px;
|
|
39
|
+
margin-bottom: 8px;
|
|
40
|
+
color: var(--colorsUtilityYin055);
|
|
41
|
+
font-size: 14px;
|
|
42
|
+
font-weight: 400;
|
|
43
|
+
`;
|
|
44
|
+
exports.StyledHintText = StyledHintText;
|
|
45
|
+
const StyledSwitch = _styledComponents.default.div`
|
|
46
|
+
${_ref2 => {
|
|
22
47
|
let {
|
|
23
48
|
fieldHelpInline,
|
|
24
49
|
labelInline,
|
|
25
50
|
reverse,
|
|
26
51
|
size
|
|
27
|
-
} =
|
|
52
|
+
} = _ref2;
|
|
28
53
|
return (0, _styledComponents.css)`
|
|
29
54
|
${_styledSystem.margin}
|
|
30
55
|
${_formField.FieldLineStyle} {
|