@automattic/vip-design-system 2.10.0 → 2.10.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/babel.config.js +23 -19
- package/build/declaration.d.js +0 -1
- package/build/system/Accordion/Accordion.js +28 -33
- package/build/system/Accordion/Accordion.stories.js +34 -35
- package/build/system/Accordion/Accordion.test.js +35 -34
- package/build/system/Accordion/index.js +5 -8
- package/build/system/Avatar/Avatar.js +13 -17
- package/build/system/Avatar/Avatar.stories.js +10 -12
- package/build/system/Avatar/Avatar.test.js +15 -14
- package/build/system/Avatar/index.js +4 -6
- package/build/system/Badge/Badge.js +9 -14
- package/build/system/Badge/Badge.stories.js +23 -23
- package/build/system/Badge/Badge.test.js +15 -14
- package/build/system/Badge/index.js +4 -6
- package/build/system/Box/Box.js +9 -13
- package/build/system/Box/Box.stories.js +5 -8
- package/build/system/Breadcrumbs/Breadcrumbs.js +34 -38
- package/build/system/Breadcrumbs/Breadcrumbs.stories.js +18 -21
- package/build/system/Breadcrumbs/Breadcrumbs.test.js +28 -30
- package/build/system/Breadcrumbs/styles.js +5 -9
- package/build/system/Button/Button.js +11 -17
- package/build/system/Button/Button.stories.js +34 -33
- package/build/system/Button/Button.test.js +17 -16
- package/build/system/Button/ButtonSubmit.js +12 -16
- package/build/system/Button/ButtonSubmit.stories.js +12 -16
- package/build/system/Button/ButtonSubmit.test.js +15 -14
- package/build/system/Button/index.js +5 -8
- package/build/system/Card/Card.js +12 -14
- package/build/system/Card/Card.stories.js +21 -24
- package/build/system/Card/Card.test.js +19 -18
- package/build/system/Card/index.js +4 -6
- package/build/system/Code/Code.js +19 -23
- package/build/system/Code/Code.stories.js +16 -18
- package/build/system/Code/Code.test.js +20 -19
- package/build/system/Code/index.js +4 -6
- package/build/system/Drawer/Drawer.js +25 -30
- package/build/system/Drawer/Drawer.stories.js +38 -39
- package/build/system/Drawer/Drawer.test.js +19 -18
- package/build/system/Drawer/styles.js +9 -11
- package/build/system/Dropdown/Dropdown.js +23 -26
- package/build/system/Dropdown/Dropdown.test.js +16 -18
- package/build/system/Dropdown/DropdownContent.js +14 -20
- package/build/system/Dropdown/DropdownItem.js +19 -25
- package/build/system/Dropdown/DropdownLabel.js +10 -16
- package/build/system/Dropdown/DropdownSeparator.js +10 -16
- package/build/system/Dropdown/index.js +20 -23
- package/build/system/FilterDropdown/FilterDropdown.js +23 -29
- package/build/system/FilterDropdown/FilterDropdown.stories.js +9 -11
- package/build/system/FilterDropdown/FilterDropdown.test.js +7 -10
- package/build/system/Flex/Flex.js +7 -10
- package/build/system/Flex/Flex.stories.js +6 -10
- package/build/system/Flex/index.js +4 -6
- package/build/system/Footer/Footer.d.ts +33 -0
- package/build/system/Footer/Footer.js +82 -0
- package/build/system/Footer/Footer.stories.d.ts +41 -0
- package/build/system/Footer/Footer.stories.js +53 -0
- package/build/system/Footer/Footer.test.d.ts +1 -0
- package/build/system/Footer/Footer.test.js +36 -0
- package/build/system/Form/Checkbox/Checkbox.js +14 -18
- package/build/system/Form/Checkbox/Checkbox.stories.js +47 -48
- package/build/system/Form/Checkbox/Checkbox.test.js +23 -21
- package/build/system/Form/Checkbox/styles.js +7 -10
- package/build/system/Form/Input.js +19 -18
- package/build/system/Form/Input.stories.js +16 -18
- package/build/system/Form/Input.styles.js +5 -9
- package/build/system/Form/Label.js +14 -16
- package/build/system/Form/Label.stories.js +15 -15
- package/build/system/Form/Radio/Radio.js +13 -18
- package/build/system/Form/Radio/Radio.stories.js +43 -43
- package/build/system/Form/Radio/Radio.test.js +19 -18
- package/build/system/Form/Radio/RadioOption.js +22 -23
- package/build/system/Form/Radio/styles.js +7 -10
- package/build/system/Form/RadioGroupChip.js +26 -29
- package/build/system/Form/RadioGroupChip.stories.js +12 -15
- package/build/system/Form/RadioGroupChip.test.js +12 -11
- package/build/system/Form/RequiredLabel.js +3 -7
- package/build/system/Form/Toggle.js +11 -16
- package/build/system/Form/Toggle.stories.js +25 -27
- package/build/system/Form/Toggle.test.js +12 -11
- package/build/system/Form/Validation.js +10 -12
- package/build/system/Form/index.d.ts +2 -1
- package/build/system/Form/index.js +2 -0
- package/build/system/Grid/Grid.js +7 -10
- package/build/system/Grid/Grid.stories.js +6 -10
- package/build/system/Grid/index.js +4 -6
- package/build/system/Heading/Heading.js +9 -14
- package/build/system/Heading/Heading.stories.js +13 -16
- package/build/system/Hr/Hr.js +3 -7
- package/build/system/Hr/Hr.stories.js +10 -11
- package/build/system/Hr/Hr.test.js +14 -14
- package/build/system/Link/Link.js +11 -14
- package/build/system/Link/Link.stories.js +11 -14
- package/build/system/Link/index.js +4 -6
- package/build/system/LinkExternal/LinkExternal.d.ts +23 -3
- package/build/system/LinkExternal/LinkExternal.js +17 -23
- package/build/system/LinkExternal/LinkExternal.stories.d.ts +1 -8
- package/build/system/LinkExternal/LinkExternal.stories.js +4 -9
- package/build/system/LinkExternal/LinkExternal.test.js +14 -15
- package/build/system/MobileMenu/MobileMenu.js +24 -29
- package/build/system/MobileMenu/MobileMenu.stories.js +66 -67
- package/build/system/MobileMenu/MobileMenu.test.js +21 -22
- package/build/system/Nav/Nav.js +26 -32
- package/build/system/Nav/Nav.stories.js +97 -99
- package/build/system/Nav/Nav.test.js +32 -28
- package/build/system/Nav/NavItem.js +40 -45
- package/build/system/Nav/NavItemGroup.js +34 -39
- package/build/system/Nav/NavItemGroup.test.js +26 -23
- package/build/system/Nav/styles/variants/breadcrumbs.js +4 -7
- package/build/system/Nav/styles/variants/menu.js +8 -12
- package/build/system/Nav/styles/variants/menugroup.js +7 -11
- package/build/system/Nav/styles/variants/primary.js +4 -8
- package/build/system/Nav/styles/variants/tabs.js +3 -7
- package/build/system/Nav/styles/variants/toolbar.js +5 -8
- package/build/system/Nav/styles.js +26 -29
- package/build/system/NewDialog/DialogClose.js +14 -18
- package/build/system/NewDialog/DialogClose.test.js +11 -14
- package/build/system/NewDialog/DialogDescription.js +9 -15
- package/build/system/NewDialog/DialogOverlay.js +11 -13
- package/build/system/NewDialog/DialogTitle.js +7 -15
- package/build/system/NewDialog/NewDialog.js +24 -29
- package/build/system/NewDialog/index.js +7 -11
- package/build/system/NewDialog/styles.js +1 -5
- package/build/system/NewForm/Fieldset.js +13 -17
- package/build/system/NewForm/Form.js +8 -13
- package/build/system/NewForm/FormAutocomplete.js +2 -2
- package/build/system/NewForm/Legend.js +11 -15
- package/build/system/Notice/Notice.js +22 -25
- package/build/system/Notice/Notice.stories.js +41 -43
- package/build/system/Notice/index.js +5 -5
- package/build/system/Page/Page.js +4 -8
- package/build/system/Page/Page.test.js +14 -14
- package/build/system/Progress/Progress.js +21 -24
- package/build/system/Progress/Progress.stories.js +9 -15
- package/build/system/Progress/Progress.test.js +14 -13
- package/build/system/Progress/index.js +4 -6
- package/build/system/ScreenReaderText/ScreenReaderText.js +9 -9
- package/build/system/Spinner/Spinner.js +9 -14
- package/build/system/Spinner/Spinner.stories.js +6 -10
- package/build/system/Spinner/Spinner.test.js +14 -13
- package/build/system/Spinner/index.js +1 -6
- package/build/system/Table/Table.js +20 -22
- package/build/system/Table/Table.stories.js +29 -30
- package/build/system/Table/TableCell.js +9 -11
- package/build/system/Table/TableRow.js +10 -11
- package/build/system/Table/index.js +6 -10
- package/build/system/Text/Text.js +9 -14
- package/build/system/Text/Text.stories.js +24 -25
- package/build/system/Text/index.js +4 -6
- package/build/system/Toolbar/Logo.js +11 -15
- package/build/system/Toolbar/Toolbar.js +12 -17
- package/build/system/Toolbar/Toolbar.stories.js +47 -50
- package/build/system/Toolbar/Toolbar.test.js +26 -24
- package/build/system/Toolbar/ToolbarUtilNav.js +9 -16
- package/build/system/Toolbar/index.js +10 -15
- package/build/system/Tooltip/Tooltip.js +9 -14
- package/build/system/Tooltip/Tooltip.stories.js +29 -31
- package/build/system/Tooltip/index.js +5 -5
- package/build/system/Wizard/Wizard.js +11 -18
- package/build/system/Wizard/Wizard.stories.js +37 -38
- package/build/system/Wizard/WizardStep.js +26 -32
- package/build/system/Wizard/index.js +6 -7
- package/build/system/assets/a8cLogo.d.ts +2 -0
- package/build/system/assets/a8cLogo.js +39 -0
- package/build/system/index.d.ts +2 -1
- package/build/system/index.js +2 -0
- package/build/system/theme/breakpoints.js +1 -5
- package/build/system/utils/stories/CustomLink.js +7 -13
- package/package.json +1 -1
- package/src/system/Footer/Footer.stories.tsx +46 -0
- package/src/system/Footer/Footer.test.tsx +40 -0
- package/src/system/Footer/Footer.tsx +120 -0
- package/src/system/Form/index.js +2 -0
- package/src/system/LinkExternal/LinkExternal.tsx +27 -8
- package/src/system/NewForm/FormAutocomplete.js +2 -2
- package/src/system/assets/a8cLogo.tsx +30 -0
- package/src/system/index.js +2 -0
|
@@ -1,17 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
/** @jsxImportSource theme-ui */
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var
|
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /** @jsxImportSource theme-ui */
|
|
14
|
-
var RadioOption = exports.RadioOption = function RadioOption(_ref) {
|
|
4
|
+
import classNames from 'classnames';
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import { Box } from 'theme-ui';
|
|
7
|
+
import { VIP_RADIO } from './Radio';
|
|
8
|
+
import { inputStyle, itemStyle, labelStyle } from './styles';
|
|
9
|
+
import { Label } from '../Label';
|
|
10
|
+
import { jsx as _jsx } from "theme-ui/jsx-runtime";
|
|
11
|
+
import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
12
|
+
var RadioOption = function RadioOption(_ref) {
|
|
15
13
|
var _ref$option = _ref.option,
|
|
16
14
|
id = _ref$option.id,
|
|
17
15
|
value = _ref$option.value,
|
|
@@ -28,26 +26,27 @@ var RadioOption = exports.RadioOption = function RadioOption(_ref) {
|
|
|
28
26
|
onChangeHandler = _ref.onChangeHandler,
|
|
29
27
|
checked = _ref.checked;
|
|
30
28
|
var commonLabelProps = _extends({
|
|
31
|
-
className:
|
|
29
|
+
className: VIP_RADIO + "item-label",
|
|
32
30
|
htmlFor: id
|
|
33
31
|
}, labelProps);
|
|
34
|
-
return (
|
|
32
|
+
return _jsxs(Box, {
|
|
35
33
|
as: "div",
|
|
36
|
-
sx:
|
|
37
|
-
className: (
|
|
38
|
-
children: [(
|
|
34
|
+
sx: itemStyle,
|
|
35
|
+
className: classNames(VIP_RADIO + "item", VIP_RADIO + "item-" + id, checked ? VIP_RADIO + "item-checked" : '', className),
|
|
36
|
+
children: [_jsx("input", _extends({
|
|
39
37
|
type: "radio",
|
|
40
38
|
id: id,
|
|
41
39
|
"aria-disabled": disabled,
|
|
42
40
|
name: name,
|
|
43
41
|
value: "" + value,
|
|
44
|
-
sx:
|
|
42
|
+
sx: inputStyle(variant),
|
|
45
43
|
onChange: onChangeHandler,
|
|
46
|
-
className:
|
|
44
|
+
className: VIP_RADIO + "item-input",
|
|
47
45
|
checked: checked
|
|
48
|
-
}, inputProps)), renderLabel ? renderLabel(commonLabelProps,
|
|
49
|
-
sx:
|
|
46
|
+
}, inputProps)), renderLabel ? renderLabel(commonLabelProps, labelStyle(variant)) : _jsx(Label, _extends({}, commonLabelProps, {
|
|
47
|
+
sx: labelStyle(variant),
|
|
50
48
|
children: label
|
|
51
49
|
}))]
|
|
52
50
|
});
|
|
53
|
-
};
|
|
51
|
+
};
|
|
52
|
+
export { RadioOption };
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import { baseControlBorderStyle, inputBaseText } from '../Input.styles';
|
|
2
2
|
|
|
3
|
-
exports.__esModule = true;
|
|
4
|
-
exports.labelStyle = exports.itemStyle = exports.inputStyle = void 0;
|
|
5
|
-
var _Input = require("../Input.styles");
|
|
6
3
|
// The output willl be 18px because of the 1px border.
|
|
7
4
|
var RADIO_SIZE = 16;
|
|
8
|
-
var inputStyle =
|
|
5
|
+
export var inputStyle = function inputStyle(variant) {
|
|
9
6
|
return {
|
|
10
7
|
position: 'absolute',
|
|
11
8
|
top: 0,
|
|
@@ -18,7 +15,7 @@ var inputStyle = exports.inputStyle = function inputStyle(variant) {
|
|
|
18
15
|
variant: 'outline',
|
|
19
16
|
content: '""',
|
|
20
17
|
border: '1px solid',
|
|
21
|
-
borderColor:
|
|
18
|
+
borderColor: baseControlBorderStyle.borderColor,
|
|
22
19
|
left: 0
|
|
23
20
|
},
|
|
24
21
|
'&:checked ~ label::after': {
|
|
@@ -31,14 +28,14 @@ var inputStyle = exports.inputStyle = function inputStyle(variant) {
|
|
|
31
28
|
}
|
|
32
29
|
};
|
|
33
30
|
};
|
|
34
|
-
var labelStyle =
|
|
31
|
+
export var labelStyle = function labelStyle(variant) {
|
|
35
32
|
return {
|
|
36
33
|
display: 'flex',
|
|
37
34
|
cursor: 'pointer',
|
|
38
35
|
position: 'relative',
|
|
39
36
|
marginBottom: 0,
|
|
40
37
|
userSelect: 'none',
|
|
41
|
-
color:
|
|
38
|
+
color: inputBaseText,
|
|
42
39
|
fontWeight: 'regular',
|
|
43
40
|
lineHeight: 'normal',
|
|
44
41
|
'&:before, &:after': {
|
|
@@ -50,7 +47,7 @@ var labelStyle = exports.labelStyle = function labelStyle(variant) {
|
|
|
50
47
|
'&::before': {
|
|
51
48
|
content: '""',
|
|
52
49
|
border: '1px solid',
|
|
53
|
-
borderColor:
|
|
50
|
+
borderColor: baseControlBorderStyle.borderColor,
|
|
54
51
|
marginRight: 2
|
|
55
52
|
},
|
|
56
53
|
'&::after': {
|
|
@@ -68,7 +65,7 @@ var labelStyle = exports.labelStyle = function labelStyle(variant) {
|
|
|
68
65
|
}
|
|
69
66
|
};
|
|
70
67
|
};
|
|
71
|
-
var itemStyle =
|
|
68
|
+
export var itemStyle = {
|
|
72
69
|
display: 'flex',
|
|
73
70
|
alignItems: 'center',
|
|
74
71
|
my: 2,
|
|
@@ -1,25 +1,21 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
exports.__esModule = true;
|
|
4
|
-
exports.RadioGroupChip = void 0;
|
|
5
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
6
|
-
var _RequiredLabel = require("./RequiredLabel");
|
|
7
|
-
var _Validation = require("./Validation");
|
|
8
|
-
var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
|
|
9
|
-
var _jsxRuntime = require("theme-ui/jsx-runtime");
|
|
10
1
|
var _excluded = ["name", "onChange", "groupLabel", "defaultValue", "options", "disabled", "errorMessage", "hasError", "required", "size"];
|
|
2
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
11
4
|
/** @jsxImportSource theme-ui */
|
|
5
|
+
|
|
12
6
|
/**
|
|
13
7
|
* External dependencies
|
|
14
8
|
*/
|
|
9
|
+
import React, { useCallback } from 'react';
|
|
10
|
+
import { RequiredLabel } from './RequiredLabel';
|
|
11
|
+
import { Validation } from './Validation';
|
|
12
|
+
import ScreenReaderText from '../ScreenReaderText';
|
|
13
|
+
|
|
15
14
|
/**
|
|
16
15
|
* Internal dependencies
|
|
17
16
|
*/
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
21
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
22
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
17
|
+
import { jsx as _jsx } from "theme-ui/jsx-runtime";
|
|
18
|
+
import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
23
19
|
var ChipOption = function ChipOption(_ref) {
|
|
24
20
|
var defaultValue = _ref.defaultValue,
|
|
25
21
|
_ref$option = _ref.option,
|
|
@@ -33,9 +29,9 @@ var ChipOption = function ChipOption(_ref) {
|
|
|
33
29
|
size = _ref$size === void 0 ? 'medium' : _ref$size;
|
|
34
30
|
var checked = "" + defaultValue === "" + value;
|
|
35
31
|
var forLabel = id || value;
|
|
36
|
-
var ref =
|
|
32
|
+
var ref = React.useRef(null);
|
|
37
33
|
var describedById = "input-radio-box-" + forLabel + "-description";
|
|
38
|
-
return (
|
|
34
|
+
return _jsxs("div", {
|
|
39
35
|
id: "o" + forLabel,
|
|
40
36
|
onClick: function onClick() {
|
|
41
37
|
if (ref.current) {
|
|
@@ -54,7 +50,7 @@ var ChipOption = function ChipOption(_ref) {
|
|
|
54
50
|
},
|
|
55
51
|
borderRadius: 1
|
|
56
52
|
},
|
|
57
|
-
children: [(
|
|
53
|
+
children: [_jsx("input", {
|
|
58
54
|
ref: ref,
|
|
59
55
|
type: "radio",
|
|
60
56
|
id: forLabel,
|
|
@@ -74,7 +70,7 @@ var ChipOption = function ChipOption(_ref) {
|
|
|
74
70
|
return theme.outline;
|
|
75
71
|
}
|
|
76
72
|
}
|
|
77
|
-
}), (
|
|
73
|
+
}), _jsx("label", {
|
|
78
74
|
id: describedById,
|
|
79
75
|
htmlFor: forLabel,
|
|
80
76
|
sx: {
|
|
@@ -93,7 +89,7 @@ var ChipOption = function ChipOption(_ref) {
|
|
|
93
89
|
})]
|
|
94
90
|
});
|
|
95
91
|
};
|
|
96
|
-
var RadioGroupChip =
|
|
92
|
+
var RadioGroupChip = /*#__PURE__*/React.forwardRef(function (_ref2, forwardRef) {
|
|
97
93
|
var _ref2$name = _ref2.name,
|
|
98
94
|
name = _ref2$name === void 0 ? '' : _ref2$name,
|
|
99
95
|
onChange = _ref2.onChange,
|
|
@@ -107,14 +103,14 @@ var RadioGroupChip = exports.RadioGroupChip = /*#__PURE__*/_react["default"].for
|
|
|
107
103
|
_ref2$size = _ref2.size,
|
|
108
104
|
size = _ref2$size === void 0 ? 'medium' : _ref2$size,
|
|
109
105
|
props = _objectWithoutPropertiesLoose(_ref2, _excluded);
|
|
110
|
-
var onChangeHandler =
|
|
106
|
+
var onChangeHandler = useCallback(function (e) {
|
|
111
107
|
var optionTriggered = options.find(function (option) {
|
|
112
108
|
return "" + option.value === "" + e.target.value;
|
|
113
109
|
});
|
|
114
110
|
onChange(e, optionTriggered);
|
|
115
111
|
}, [onChange]);
|
|
116
112
|
var renderedOptions = options.map(function (option) {
|
|
117
|
-
return (
|
|
113
|
+
return _jsx(ChipOption, {
|
|
118
114
|
defaultValue: defaultValue,
|
|
119
115
|
disabled: disabled,
|
|
120
116
|
name: name,
|
|
@@ -123,8 +119,8 @@ var RadioGroupChip = exports.RadioGroupChip = /*#__PURE__*/_react["default"].for
|
|
|
123
119
|
size: size
|
|
124
120
|
}, (option == null ? void 0 : option.id) || (option == null ? void 0 : option.value));
|
|
125
121
|
});
|
|
126
|
-
return (
|
|
127
|
-
children: [(
|
|
122
|
+
return _jsxs("div", {
|
|
123
|
+
children: [_jsxs("fieldset", _extends({
|
|
128
124
|
sx: _extends({
|
|
129
125
|
border: 0,
|
|
130
126
|
background: 'layer.3',
|
|
@@ -145,25 +141,26 @@ var RadioGroupChip = exports.RadioGroupChip = /*#__PURE__*/_react["default"].for
|
|
|
145
141
|
"aria-required": required,
|
|
146
142
|
role: "radiogroup"
|
|
147
143
|
}, props, {
|
|
148
|
-
children: [groupLabel ? (
|
|
144
|
+
children: [groupLabel ? _jsxs("legend", {
|
|
149
145
|
sx: {
|
|
150
146
|
mb: 2
|
|
151
147
|
},
|
|
152
|
-
children: [groupLabel, required ? (
|
|
153
|
-
}) : (
|
|
148
|
+
children: [groupLabel, required ? _jsx(RequiredLabel, {}) : null]
|
|
149
|
+
}) : _jsx(ScreenReaderText, {
|
|
154
150
|
children: "Choose an option"
|
|
155
|
-
}), (
|
|
151
|
+
}), _jsx("div", {
|
|
156
152
|
sx: {
|
|
157
153
|
display: 'flex',
|
|
158
154
|
gap: 1
|
|
159
155
|
},
|
|
160
156
|
children: renderedOptions
|
|
161
157
|
})]
|
|
162
|
-
})), hasError && errorMessage && (
|
|
158
|
+
})), hasError && errorMessage && _jsx(Validation, {
|
|
163
159
|
isValid: false,
|
|
164
160
|
describedId: groupLabel,
|
|
165
161
|
children: errorMessage
|
|
166
162
|
})]
|
|
167
163
|
});
|
|
168
164
|
});
|
|
169
|
-
RadioGroupChip.displayName = 'RadioGroupChip';
|
|
165
|
+
RadioGroupChip.displayName = 'RadioGroupChip';
|
|
166
|
+
export { RadioGroupChip };
|
|
@@ -1,19 +1,16 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
exports.__esModule = true;
|
|
4
|
-
exports["default"] = exports.SmallSize = exports.MediumSize = void 0;
|
|
5
|
-
var _react = require("react");
|
|
6
|
-
var _RadioGroupChip = require("./RadioGroupChip");
|
|
7
|
-
var _jsxRuntime = require("theme-ui/jsx-runtime");
|
|
8
1
|
/**
|
|
9
2
|
* External dependencies
|
|
10
3
|
*/
|
|
4
|
+
import { useState } from 'react';
|
|
5
|
+
|
|
11
6
|
/**
|
|
12
7
|
* Internal dependencies
|
|
13
8
|
*/
|
|
14
|
-
|
|
9
|
+
import { RadioGroupChip } from './RadioGroupChip';
|
|
10
|
+
import { jsx as _jsx } from "theme-ui/jsx-runtime";
|
|
11
|
+
export default {
|
|
15
12
|
title: 'RadioGroupChip',
|
|
16
|
-
component:
|
|
13
|
+
component: RadioGroupChip,
|
|
17
14
|
parameters: {
|
|
18
15
|
docs: {
|
|
19
16
|
description: {
|
|
@@ -22,11 +19,11 @@ var _default = exports["default"] = {
|
|
|
22
19
|
}
|
|
23
20
|
}
|
|
24
21
|
};
|
|
25
|
-
var MediumSize =
|
|
26
|
-
var _useState =
|
|
22
|
+
export var MediumSize = function MediumSize() {
|
|
23
|
+
var _useState = useState('table'),
|
|
27
24
|
value = _useState[0],
|
|
28
25
|
setValue = _useState[1];
|
|
29
|
-
return (
|
|
26
|
+
return _jsx(RadioGroupChip, {
|
|
30
27
|
defaultValue: value,
|
|
31
28
|
onChange: function onChange(e) {
|
|
32
29
|
return setValue(e.target.value);
|
|
@@ -40,11 +37,11 @@ var MediumSize = exports.MediumSize = function MediumSize() {
|
|
|
40
37
|
}]
|
|
41
38
|
});
|
|
42
39
|
};
|
|
43
|
-
var SmallSize =
|
|
44
|
-
var _useState2 =
|
|
40
|
+
export var SmallSize = function SmallSize() {
|
|
41
|
+
var _useState2 = useState('table'),
|
|
45
42
|
value = _useState2[0],
|
|
46
43
|
setValue = _useState2[1];
|
|
47
|
-
return (
|
|
44
|
+
return _jsx(RadioGroupChip, {
|
|
48
45
|
defaultValue: value,
|
|
49
46
|
onChange: function onChange(e) {
|
|
50
47
|
return setValue(e.target.value);
|
|
@@ -1,17 +1,18 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _react = require("@testing-library/react");
|
|
4
|
-
var _jestAxe = require("jest-axe");
|
|
5
|
-
var _RadioGroupChip = require("./RadioGroupChip");
|
|
6
|
-
var _jsxRuntime = require("theme-ui/jsx-runtime");
|
|
7
1
|
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(typeof e + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
|
|
8
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
9
3
|
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
10
|
-
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
4
|
+
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
5
|
+
/**
|
|
11
6
|
* External dependencies
|
|
12
|
-
*/
|
|
7
|
+
*/
|
|
8
|
+
import { render, screen } from '@testing-library/react';
|
|
9
|
+
import { axe } from 'jest-axe';
|
|
10
|
+
|
|
11
|
+
/**
|
|
13
12
|
* Internal dependencies
|
|
14
13
|
*/
|
|
14
|
+
import { RadioGroupChip } from './RadioGroupChip';
|
|
15
|
+
import { jsx as _jsx } from "theme-ui/jsx-runtime";
|
|
15
16
|
var defaultProps = {
|
|
16
17
|
options: [{
|
|
17
18
|
label: 'One',
|
|
@@ -31,9 +32,9 @@ describe('<RadioGroupChip />', function () {
|
|
|
31
32
|
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
32
33
|
while (1) switch (_context.prev = _context.next) {
|
|
33
34
|
case 0:
|
|
34
|
-
_render =
|
|
35
|
+
_render = render(_jsx(RadioGroupChip, _extends({}, defaultProps))), container = _render.container;
|
|
35
36
|
_context.next = 3;
|
|
36
|
-
return
|
|
37
|
+
return screen.findAllByRole('radio');
|
|
37
38
|
case 3:
|
|
38
39
|
dom = _context.sent;
|
|
39
40
|
expect(dom).toHaveLength(3);
|
|
@@ -44,7 +45,7 @@ describe('<RadioGroupChip />', function () {
|
|
|
44
45
|
// Check for accessibility issues
|
|
45
46
|
_context.t0 = expect;
|
|
46
47
|
_context.next = 11;
|
|
47
|
-
return
|
|
48
|
+
return axe(container);
|
|
48
49
|
case 11:
|
|
49
50
|
_context.t1 = _context.sent;
|
|
50
51
|
(0, _context.t0)(_context.t1).toHaveNoViolations();
|
|
@@ -1,16 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.__esModule = true;
|
|
4
|
-
exports.RequiredLabel = void 0;
|
|
5
|
-
var _jsxRuntime = require("theme-ui/jsx-runtime");
|
|
1
|
+
import { jsx as _jsx } from "theme-ui/jsx-runtime";
|
|
6
2
|
/** @jsxImportSource theme-ui */
|
|
7
3
|
|
|
8
4
|
/**
|
|
9
5
|
* External dependencies
|
|
10
6
|
*/
|
|
11
7
|
|
|
12
|
-
var RequiredLabel =
|
|
13
|
-
return (
|
|
8
|
+
export var RequiredLabel = function RequiredLabel() {
|
|
9
|
+
return _jsx("span", {
|
|
14
10
|
sx: {
|
|
15
11
|
color: 'texts.helper',
|
|
16
12
|
display: 'inline-block',
|
|
@@ -1,21 +1,16 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
exports.__esModule = true;
|
|
4
|
-
exports.Toggle = void 0;
|
|
5
|
-
var Switch = _interopRequireWildcard(require("@radix-ui/react-switch"));
|
|
6
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
7
|
-
var _jsxRuntime = require("theme-ui/jsx-runtime");
|
|
8
1
|
var _excluded = ["name", "onChange", "className", "variant"];
|
|
2
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
9
4
|
/* eslint-disable max-len */
|
|
10
5
|
/** @jsxImportSource theme-ui */
|
|
6
|
+
|
|
7
|
+
import * as Switch from '@radix-ui/react-switch';
|
|
8
|
+
import classNames from 'classnames';
|
|
9
|
+
|
|
11
10
|
// Documentation for Radix Switch component
|
|
12
11
|
// https://www.radix-ui.com/docs/primitives/components/switch
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
16
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
18
|
-
var Toggle = exports.Toggle = function Toggle(_ref) {
|
|
12
|
+
import { jsx as _jsx } from "theme-ui/jsx-runtime";
|
|
13
|
+
export var Toggle = function Toggle(_ref) {
|
|
19
14
|
var _ref$name = _ref.name,
|
|
20
15
|
name = _ref$name === void 0 ? 'toggle' : _ref$name,
|
|
21
16
|
onChange = _ref.onChange,
|
|
@@ -23,8 +18,8 @@ var Toggle = exports.Toggle = function Toggle(_ref) {
|
|
|
23
18
|
_ref$variant = _ref.variant,
|
|
24
19
|
variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
|
|
25
20
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
26
|
-
return (
|
|
27
|
-
className: (
|
|
21
|
+
return _jsx(Switch.Root, _extends({
|
|
22
|
+
className: classNames('vip-toggle-component', className),
|
|
28
23
|
sx: {
|
|
29
24
|
all: 'unset',
|
|
30
25
|
cursor: 'pointer',
|
|
@@ -52,7 +47,7 @@ var Toggle = exports.Toggle = function Toggle(_ref) {
|
|
|
52
47
|
name: name,
|
|
53
48
|
onCheckedChange: onChange
|
|
54
49
|
}, rest, {
|
|
55
|
-
children: (
|
|
50
|
+
children: _jsx(Switch.Thumb, {
|
|
56
51
|
sx: {
|
|
57
52
|
display: 'block',
|
|
58
53
|
width: 16,
|
|
@@ -1,13 +1,11 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
exports.__esModule = true;
|
|
4
|
-
exports["default"] = exports.WithLabel = exports.Default = exports.CustomStyling = void 0;
|
|
5
|
-
var _ = require("..");
|
|
6
|
-
var _jsxRuntime = require("theme-ui/jsx-runtime");
|
|
7
1
|
/** @jsxImportSource theme-ui */
|
|
8
|
-
|
|
2
|
+
|
|
3
|
+
import { Toggle, Label } from '..';
|
|
4
|
+
import { jsx as _jsx } from "theme-ui/jsx-runtime";
|
|
5
|
+
import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
6
|
+
export default {
|
|
9
7
|
title: 'Toggle',
|
|
10
|
-
component:
|
|
8
|
+
component: Toggle,
|
|
11
9
|
argTypes: {
|
|
12
10
|
checked: {
|
|
13
11
|
control: {
|
|
@@ -23,18 +21,18 @@ var _default = exports["default"] = {
|
|
|
23
21
|
}
|
|
24
22
|
}
|
|
25
23
|
};
|
|
26
|
-
var Default =
|
|
24
|
+
export var Default = {
|
|
27
25
|
render: function render(args) {
|
|
28
|
-
return (
|
|
29
|
-
children: [(
|
|
26
|
+
return _jsxs("form", {
|
|
27
|
+
children: [_jsx(Toggle, {
|
|
30
28
|
checked: args.checked,
|
|
31
29
|
defaultChecked: true,
|
|
32
30
|
"aria-label": "Feature flag"
|
|
33
|
-
}), (
|
|
31
|
+
}), _jsx("br", {}), _jsx("br", {}), _jsx(Toggle, {
|
|
34
32
|
checked: args.checked,
|
|
35
33
|
defaultChecked: false,
|
|
36
34
|
"aria-label": "Feature flag 2"
|
|
37
|
-
}), (
|
|
35
|
+
}), _jsx("br", {}), _jsx("br", {}), _jsx(Toggle, {
|
|
38
36
|
"aria-label": "Feature Disabled",
|
|
39
37
|
disabled: true,
|
|
40
38
|
defaultChecked: false
|
|
@@ -42,13 +40,13 @@ var Default = exports.Default = {
|
|
|
42
40
|
});
|
|
43
41
|
}
|
|
44
42
|
};
|
|
45
|
-
var WithLabel =
|
|
43
|
+
export var WithLabel = {
|
|
46
44
|
render: function render(args) {
|
|
47
|
-
return (
|
|
48
|
-
children: [(
|
|
45
|
+
return _jsxs("form", {
|
|
46
|
+
children: [_jsx(Label, {
|
|
49
47
|
htmlFor: "custom-label-input",
|
|
50
48
|
children: "Custom Label here"
|
|
51
|
-
}), (
|
|
49
|
+
}), _jsx(Toggle, {
|
|
52
50
|
id: "custom-label-input",
|
|
53
51
|
defaultChecked: true,
|
|
54
52
|
checked: args.checked,
|
|
@@ -57,36 +55,36 @@ var WithLabel = exports.WithLabel = {
|
|
|
57
55
|
});
|
|
58
56
|
}
|
|
59
57
|
};
|
|
60
|
-
var CustomStyling =
|
|
58
|
+
export var CustomStyling = {
|
|
61
59
|
render: function render(args) {
|
|
62
|
-
return (
|
|
63
|
-
children: [(
|
|
60
|
+
return _jsxs("form", {
|
|
61
|
+
children: [_jsxs(Label, {
|
|
64
62
|
htmlFor: "custom-label-input",
|
|
65
|
-
children: ["Custom Styling.", ' ', (
|
|
63
|
+
children: ["Custom Styling.", ' ', _jsx("strong", {
|
|
66
64
|
children: "We currently only recommend using Primary, Disabled, and Success variants."
|
|
67
65
|
})]
|
|
68
|
-
}), (
|
|
69
|
-
children: [(
|
|
66
|
+
}), _jsxs("div", {
|
|
67
|
+
children: [_jsx(Toggle, {
|
|
70
68
|
id: "custom-label-input",
|
|
71
69
|
defaultChecked: true,
|
|
72
70
|
checked: args.checked,
|
|
73
71
|
"aria-label": "Feature flag",
|
|
74
72
|
variant: "success"
|
|
75
|
-
}), ' ', (
|
|
73
|
+
}), ' ', _jsx("h2", {
|
|
76
74
|
children: "Not recommended"
|
|
77
|
-
}), (
|
|
75
|
+
}), _jsx(Toggle, {
|
|
78
76
|
id: "custom-label-input-error",
|
|
79
77
|
defaultChecked: true,
|
|
80
78
|
checked: args.checked,
|
|
81
79
|
"aria-label": "Error flag",
|
|
82
80
|
variant: "error"
|
|
83
|
-
}), ' ', (
|
|
81
|
+
}), ' ', _jsx(Toggle, {
|
|
84
82
|
id: "custom-label-input-warning",
|
|
85
83
|
defaultChecked: true,
|
|
86
84
|
checked: args.checked,
|
|
87
85
|
"aria-label": "Warning flag",
|
|
88
86
|
variant: "warning"
|
|
89
|
-
}), ' ', (
|
|
87
|
+
}), ' ', _jsx(Toggle, {
|
|
90
88
|
id: "custom-label-input-info",
|
|
91
89
|
defaultChecked: true,
|
|
92
90
|
checked: args.checked,
|
|
@@ -1,33 +1,34 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _react = require("@testing-library/react");
|
|
4
|
-
var _jestAxe = require("jest-axe");
|
|
5
|
-
var _Toggle = require("./Toggle");
|
|
6
|
-
var _jsxRuntime = require("theme-ui/jsx-runtime");
|
|
7
1
|
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(typeof e + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
|
|
8
2
|
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
9
|
-
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
3
|
+
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
4
|
+
/**
|
|
10
5
|
* External dependencies
|
|
11
|
-
*/
|
|
6
|
+
*/
|
|
7
|
+
import { render, screen } from '@testing-library/react';
|
|
8
|
+
import { axe } from 'jest-axe';
|
|
9
|
+
|
|
10
|
+
/**
|
|
12
11
|
* Internal dependencies
|
|
13
12
|
*/
|
|
13
|
+
import { Toggle } from './Toggle';
|
|
14
|
+
import { jsx as _jsx } from "theme-ui/jsx-runtime";
|
|
14
15
|
describe('<Toggle />', function () {
|
|
15
16
|
it('renders the Toggle component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
16
17
|
var _render, container;
|
|
17
18
|
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
18
19
|
while (1) switch (_context.prev = _context.next) {
|
|
19
20
|
case 0:
|
|
20
|
-
_render =
|
|
21
|
+
_render = render(_jsx(Toggle, {
|
|
21
22
|
"aria-label": "Dinner room Light",
|
|
22
23
|
defaultChecked: true,
|
|
23
24
|
name: "my-toggle"
|
|
24
25
|
})), container = _render.container;
|
|
25
|
-
expect(
|
|
26
|
+
expect(screen.getByRole('switch')).toBeInTheDocument();
|
|
26
27
|
|
|
27
28
|
// Check for accessibility issues
|
|
28
29
|
_context.t0 = expect;
|
|
29
30
|
_context.next = 5;
|
|
30
|
-
return
|
|
31
|
+
return axe(container);
|
|
31
32
|
case 5:
|
|
32
33
|
_context.t1 = _context.sent;
|
|
33
34
|
(0, _context.t0)(_context.t1).toHaveNoViolations();
|