@papillonbits/components 1.13.0 → 1.14.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/build/index.js +1 -12
- package/build/primer/Alert/Alert.js +82 -94
- package/build/primer/Alert/Alert.prop.js +19 -25
- package/build/primer/Alert/index.js +2 -19
- package/build/primer/Blankslate/Blankslate.js +22 -26
- package/build/primer/Blankslate/Blankslate.prop.js +11 -17
- package/build/primer/Blankslate/index.js +2 -19
- package/build/primer/Breadcrumb/Breadcrumb.js +59 -61
- package/build/primer/Breadcrumb/Breadcrumb.prop.js +14 -20
- package/build/primer/Breadcrumb/index.js +2 -19
- package/build/primer/Button/Button.js +63 -72
- package/build/primer/Button/Button.prop.js +27 -33
- package/build/primer/Button/index.js +2 -49
- package/build/primer/Dropdown/Dropdown.js +79 -85
- package/build/primer/Dropdown/Dropdown.prop.js +15 -21
- package/build/primer/Dropdown/index.js +2 -19
- package/build/primer/ErrorBoundary/ErrorBoundary.js +35 -55
- package/build/primer/ErrorBoundary/ErrorBoundary.prop.js +4 -10
- package/build/primer/ErrorBoundary/index.js +1 -12
- package/build/primer/Form/Checkbox/Checkbox.js +29 -39
- package/build/primer/Form/Checkbox/Checkbox.prop.js +15 -21
- package/build/primer/Form/Checkbox/index.js +2 -19
- package/build/primer/Form/Input/Input.js +29 -43
- package/build/primer/Form/Input/Input.prop.js +19 -25
- package/build/primer/Form/Input/index.js +2 -25
- package/build/primer/Form/Radio/Radio.js +26 -38
- package/build/primer/Form/Radio/Radio.prop.js +14 -20
- package/build/primer/Form/Radio/index.js +2 -19
- package/build/primer/Form/index.js +11 -17
- package/build/primer/Grid/DisplayTable/DisplayTable.js +44 -54
- package/build/primer/Grid/DisplayTable/DisplayTable.prop.js +7 -13
- package/build/primer/Grid/DisplayTable/index.js +1 -12
- package/build/primer/Grid/FlexGrid/FlexGrid.js +186 -207
- package/build/primer/Grid/FlexGrid/FlexGrid.prop.js +24 -30
- package/build/primer/Grid/FlexGrid/index.js +2 -25
- package/build/primer/Grid/index.js +7 -13
- package/build/primer/Icon/Icon.js +35 -52
- package/build/primer/Icon/Icon.part.js +1287 -1294
- package/build/primer/Icon/Icon.prop.js +20 -26
- package/build/primer/Icon/index.js +2 -25
- package/build/primer/Label/Label.js +22 -28
- package/build/primer/Label/Label.prop.js +11 -17
- package/build/primer/Label/index.js +1 -12
- package/build/primer/Loader/Loader.js +38 -45
- package/build/primer/Loader/Loader.prop.js +7 -13
- package/build/primer/Loader/index.js +2 -19
- package/build/primer/Navigation/Menu/Menu.js +52 -59
- package/build/primer/Navigation/Menu/Menu.prop.js +16 -22
- package/build/primer/Navigation/Menu/index.js +1 -12
- package/build/primer/Navigation/TabNav/TabNav.js +89 -94
- package/build/primer/Navigation/TabNav/TabNav.prop.js +19 -25
- package/build/primer/Navigation/TabNav/index.js +2 -19
- package/build/primer/Navigation/UnderlineNav/UnderlineNav.js +82 -86
- package/build/primer/Navigation/UnderlineNav/UnderlineNav.prop.js +21 -27
- package/build/primer/Navigation/UnderlineNav/index.js +2 -25
- package/build/primer/Navigation/index.js +10 -16
- package/build/primer/Pagination/PreviousNext/PreviousNext.js +53 -54
- package/build/primer/Pagination/PreviousNext/PreviousNext.prop.js +22 -28
- package/build/primer/Pagination/PreviousNext/index.js +2 -19
- package/build/primer/Pagination/index.js +4 -10
- package/build/primer/Popover/Popover.js +59 -50
- package/build/primer/Popover/Popover.prop.js +16 -22
- package/build/primer/Popover/index.js +2 -25
- package/build/primer/Progress/Progress.js +20 -26
- package/build/primer/Progress/Progress.prop.js +7 -13
- package/build/primer/Progress/index.js +2 -19
- package/build/primer/Select/Select.js +43 -51
- package/build/primer/Select/Select.prop.js +12 -18
- package/build/primer/Select/index.js +2 -19
- package/build/primer/SelectMenu/SelectMenu.js +65 -74
- package/build/primer/SelectMenu/SelectMenu.prop.js +14 -20
- package/build/primer/SelectMenu/index.js +1 -12
- package/build/primer/Subhead/Subhead.js +16 -23
- package/build/primer/Subhead/Subhead.prop.js +6 -12
- package/build/primer/Subhead/index.js +1 -12
- package/build/primer/Toast/Toast.js +39 -46
- package/build/primer/Toast/Toast.prop.js +10 -16
- package/build/primer/Toast/index.js +2 -19
- package/build/primer/index.js +58 -64
- package/package.json +4 -4
|
@@ -1,59 +1,39 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
10
|
-
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
11
|
-
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
12
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
13
|
-
var _react = require("react");
|
|
14
|
-
var _ErrorBoundary = require("./ErrorBoundary.prop");
|
|
15
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
|
-
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
|
|
17
|
-
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable no-unused-vars, no-console */
|
|
18
|
-
var ErrorBoundary = exports.ErrorBoundary = /*#__PURE__*/function (_Component) {
|
|
19
|
-
function ErrorBoundary(props) {
|
|
20
|
-
var _this;
|
|
21
|
-
(0, _classCallCheck2["default"])(this, ErrorBoundary);
|
|
22
|
-
_this = _callSuper(this, ErrorBoundary, [props]);
|
|
23
|
-
_this.state = {
|
|
1
|
+
/* eslint-disable no-unused-vars, no-console */
|
|
2
|
+
import { Component } from 'react';
|
|
3
|
+
import { propTypes } from './ErrorBoundary.prop';
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
export class ErrorBoundary extends Component {
|
|
6
|
+
constructor(props) {
|
|
7
|
+
super(props);
|
|
8
|
+
this.state = {
|
|
24
9
|
hasError: false
|
|
25
10
|
};
|
|
26
|
-
return _this;
|
|
27
11
|
}
|
|
28
|
-
(
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
value: function getDerivedStateFromError(error) {
|
|
52
|
-
// Update state so the next render will show the fallback UI.
|
|
53
|
-
return {
|
|
54
|
-
hasError: true
|
|
55
|
-
};
|
|
12
|
+
static getDerivedStateFromError(error) {
|
|
13
|
+
// Update state so the next render will show the fallback UI.
|
|
14
|
+
return {
|
|
15
|
+
hasError: true
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
componentDidCatch(error, errorInfo) {
|
|
19
|
+
// You can also log the error to an error reporting service
|
|
20
|
+
console.log('~error~', error);
|
|
21
|
+
console.log('~errorInfo~', errorInfo);
|
|
22
|
+
}
|
|
23
|
+
render() {
|
|
24
|
+
const {
|
|
25
|
+
hasError
|
|
26
|
+
} = this.state;
|
|
27
|
+
const {
|
|
28
|
+
children
|
|
29
|
+
} = this.props;
|
|
30
|
+
if (hasError) {
|
|
31
|
+
// You can render any custom fallback UI
|
|
32
|
+
return /*#__PURE__*/_jsx("h1", {
|
|
33
|
+
children: "Something went wrong."
|
|
34
|
+
});
|
|
56
35
|
}
|
|
57
|
-
|
|
58
|
-
}
|
|
59
|
-
|
|
36
|
+
return children;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
ErrorBoundary.propTypes = propTypes;
|
|
@@ -1,11 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.propTypes = exports.defaultProps = void 0;
|
|
7
|
-
var _propTypes = require("prop-types");
|
|
8
|
-
var propTypes = exports.propTypes = {
|
|
9
|
-
children: _propTypes.node.isRequired
|
|
1
|
+
import { node } from 'prop-types';
|
|
2
|
+
export const propTypes = {
|
|
3
|
+
children: node.isRequired
|
|
10
4
|
};
|
|
11
|
-
|
|
5
|
+
export const defaultProps = {};
|
|
@@ -1,12 +1 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "ErrorBoundary", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function get() {
|
|
9
|
-
return _ErrorBoundary.ErrorBoundary;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
var _ErrorBoundary = require("./ErrorBoundary");
|
|
1
|
+
export { ErrorBoundary } from './ErrorBoundary';
|
|
@@ -1,49 +1,39 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
ariaAttr = _ref.ariaAttr,
|
|
23
|
-
_ref$inputType = _ref.inputType,
|
|
24
|
-
inputType = _ref$inputType === void 0 ? _Checkbox.defaultProps.inputType : _ref$inputType,
|
|
25
|
-
_ref$isChecked = _ref.isChecked,
|
|
26
|
-
isChecked = _ref$isChecked === void 0 ? _Checkbox.defaultProps.isChecked : _ref$isChecked,
|
|
27
|
-
_ref$text = _ref.text,
|
|
28
|
-
text = _ref$text === void 0 ? _Checkbox.defaultProps.text : _ref$text,
|
|
29
|
-
_onChange = _ref.onChange,
|
|
30
|
-
_ref$state = _ref.state,
|
|
31
|
-
state = _ref$state === void 0 ? _Checkbox.defaultProps.state : _ref$state;
|
|
32
|
-
var describedBy = ariaAttr.describedBy;
|
|
33
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
1
|
+
import cx from 'classnames';
|
|
2
|
+
import marginStyles from '@papillonbits/css/build/primer/utilities/margin.scss';
|
|
3
|
+
import { propTypes, defaultProps, checkboxState } from './Checkbox.prop';
|
|
4
|
+
import styles from './Checkbox.scss';
|
|
5
|
+
import formStyles from '../index.scss';
|
|
6
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
|
+
export function Checkbox({
|
|
8
|
+
dataTest = defaultProps.dataTest,
|
|
9
|
+
className = defaultProps.className,
|
|
10
|
+
htmlFor = defaultProps.htmlFor,
|
|
11
|
+
ariaAttr,
|
|
12
|
+
inputType = defaultProps.inputType,
|
|
13
|
+
isChecked = defaultProps.isChecked,
|
|
14
|
+
text = defaultProps.text,
|
|
15
|
+
onChange,
|
|
16
|
+
state = defaultProps.state
|
|
17
|
+
}) {
|
|
18
|
+
const {
|
|
19
|
+
describedBy
|
|
20
|
+
} = ariaAttr;
|
|
21
|
+
return /*#__PURE__*/_jsx("div", {
|
|
34
22
|
"data-test": dataTest,
|
|
35
|
-
className: (
|
|
36
|
-
|
|
23
|
+
className: cx(className, marginStyles['m-0'], formStyles['form-checkbox'], {
|
|
24
|
+
[styles['checkbox-inactive']]: state === checkboxState.inactive
|
|
25
|
+
}),
|
|
26
|
+
children: /*#__PURE__*/_jsxs("label", {
|
|
37
27
|
htmlFor: htmlFor,
|
|
38
|
-
children: [/*#__PURE__*/(
|
|
28
|
+
children: [/*#__PURE__*/_jsx("input", {
|
|
39
29
|
type: inputType,
|
|
40
30
|
"aria-describedby": describedBy,
|
|
41
|
-
onChange:
|
|
42
|
-
|
|
31
|
+
onChange: event => {
|
|
32
|
+
onChange(event);
|
|
43
33
|
},
|
|
44
34
|
checked: isChecked
|
|
45
35
|
}), text]
|
|
46
36
|
})
|
|
47
37
|
});
|
|
48
38
|
}
|
|
49
|
-
Checkbox.propTypes =
|
|
39
|
+
Checkbox.propTypes = propTypes;
|
|
@@ -1,31 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.propTypes = exports.inputType = exports.defaultProps = exports.checkboxState = void 0;
|
|
7
|
-
var _propTypes = require("prop-types");
|
|
8
|
-
var checkboxState = exports.checkboxState = {
|
|
1
|
+
import { string, shape, oneOf, bool, func } from 'prop-types';
|
|
2
|
+
export const checkboxState = {
|
|
9
3
|
active: 'active',
|
|
10
4
|
inactive: 'inactive'
|
|
11
5
|
};
|
|
12
|
-
|
|
6
|
+
export const inputType = {
|
|
13
7
|
checkbox: 'checkbox'
|
|
14
8
|
};
|
|
15
|
-
|
|
16
|
-
dataTest:
|
|
17
|
-
className:
|
|
18
|
-
htmlFor:
|
|
19
|
-
ariaAttr:
|
|
20
|
-
describedBy:
|
|
9
|
+
export const propTypes = {
|
|
10
|
+
dataTest: string,
|
|
11
|
+
className: string,
|
|
12
|
+
htmlFor: string,
|
|
13
|
+
ariaAttr: shape({
|
|
14
|
+
describedBy: string
|
|
21
15
|
}).isRequired,
|
|
22
|
-
inputType:
|
|
23
|
-
isChecked:
|
|
24
|
-
text:
|
|
25
|
-
onChange:
|
|
26
|
-
state:
|
|
16
|
+
inputType: oneOf(Object.keys(inputType)),
|
|
17
|
+
isChecked: bool,
|
|
18
|
+
text: string,
|
|
19
|
+
onChange: func.isRequired,
|
|
20
|
+
state: oneOf(Object.keys(checkboxState))
|
|
27
21
|
};
|
|
28
|
-
|
|
22
|
+
export const defaultProps = {
|
|
29
23
|
dataTest: null,
|
|
30
24
|
className: null,
|
|
31
25
|
htmlFor: 'checkbox',
|
|
@@ -1,19 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "Checkbox", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function get() {
|
|
9
|
-
return _Checkbox.Checkbox;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
Object.defineProperty(exports, "checkboxState", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function get() {
|
|
15
|
-
return _Checkbox2.checkboxState;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
var _Checkbox = require("./Checkbox");
|
|
19
|
-
var _Checkbox2 = require("./Checkbox.prop");
|
|
1
|
+
export { Checkbox } from './Checkbox';
|
|
2
|
+
export { checkboxState } from './Checkbox.prop';
|
|
@@ -1,49 +1,35 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
placeholder = _ref$placeholder === void 0 ? _Input.defaultProps.placeholder : _ref$placeholder,
|
|
23
|
-
_ref$ariaAttr = _ref.ariaAttr,
|
|
24
|
-
ariaAttr = _ref$ariaAttr === void 0 ? _Input.defaultProps.ariaAttr : _ref$ariaAttr,
|
|
25
|
-
_ref$inputType = _ref.inputType,
|
|
26
|
-
inputType = _ref$inputType === void 0 ? _Input.defaultProps.inputType : _ref$inputType,
|
|
27
|
-
value = _ref.value,
|
|
28
|
-
_onChange = _ref.onChange,
|
|
29
|
-
_onKeyUp = _ref.onKeyUp,
|
|
30
|
-
_ref$onFocus = _ref.onFocus,
|
|
31
|
-
onFocus = _ref$onFocus === void 0 ? _Input.defaultProps.onFocus : _ref$onFocus,
|
|
32
|
-
_ref$onBlur = _ref.onBlur,
|
|
33
|
-
onBlur = _ref$onBlur === void 0 ? _Input.defaultProps.onBlur : _ref$onBlur,
|
|
34
|
-
autoFocus = _ref.autoFocus,
|
|
35
|
-
_ref$state = _ref.state,
|
|
36
|
-
state = _ref$state === void 0 ? _Input.defaultProps.state : _ref$state;
|
|
37
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
1
|
+
import cx from 'classnames';
|
|
2
|
+
import { propTypes, defaultProps, inputState } from './Input.prop';
|
|
3
|
+
import styles from './Input.scss';
|
|
4
|
+
import formStyles from '../index.scss';
|
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
export function Input({
|
|
7
|
+
dataTest = defaultProps.dataTest,
|
|
8
|
+
id = defaultProps.id,
|
|
9
|
+
className = defaultProps.className,
|
|
10
|
+
placeholder = defaultProps.placeholder,
|
|
11
|
+
ariaAttr = defaultProps.ariaAttr,
|
|
12
|
+
inputType = defaultProps.inputType,
|
|
13
|
+
value,
|
|
14
|
+
onChange,
|
|
15
|
+
onKeyUp,
|
|
16
|
+
onFocus = defaultProps.onFocus,
|
|
17
|
+
onBlur = defaultProps.onBlur,
|
|
18
|
+
autoFocus,
|
|
19
|
+
state = defaultProps.state
|
|
20
|
+
}) {
|
|
21
|
+
return /*#__PURE__*/_jsx("input", {
|
|
38
22
|
"data-test": dataTest,
|
|
39
23
|
id: id,
|
|
40
|
-
className: (
|
|
24
|
+
className: cx(className, formStyles['form-control'], {
|
|
25
|
+
[styles['input-inactive']]: state === inputState.inactive
|
|
26
|
+
}),
|
|
41
27
|
value: value,
|
|
42
|
-
onChange:
|
|
43
|
-
|
|
28
|
+
onChange: event => {
|
|
29
|
+
onChange(event);
|
|
44
30
|
},
|
|
45
|
-
onKeyUp:
|
|
46
|
-
|
|
31
|
+
onKeyUp: event => {
|
|
32
|
+
onKeyUp(event);
|
|
47
33
|
},
|
|
48
34
|
onFocus: onFocus,
|
|
49
35
|
onBlur: onBlur,
|
|
@@ -53,4 +39,4 @@ function Input(_ref) {
|
|
|
53
39
|
autoFocus: autoFocus // eslint-disable-line
|
|
54
40
|
});
|
|
55
41
|
}
|
|
56
|
-
Input.propTypes =
|
|
42
|
+
Input.propTypes = propTypes;
|
|
@@ -1,34 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.propTypes = exports.inputType = exports.inputState = exports.defaultProps = void 0;
|
|
7
|
-
var _propTypes = require("prop-types");
|
|
8
|
-
var inputState = exports.inputState = {
|
|
1
|
+
import { string, shape, oneOf, func } from 'prop-types';
|
|
2
|
+
export const inputState = {
|
|
9
3
|
active: 'active',
|
|
10
4
|
inactive: 'inactive'
|
|
11
5
|
};
|
|
12
|
-
|
|
6
|
+
export const inputType = {
|
|
13
7
|
text: 'text',
|
|
14
8
|
password: 'password'
|
|
15
9
|
};
|
|
16
|
-
|
|
17
|
-
dataTest:
|
|
18
|
-
id:
|
|
19
|
-
className:
|
|
20
|
-
placeholder:
|
|
21
|
-
ariaAttr:
|
|
22
|
-
label:
|
|
10
|
+
export const propTypes = {
|
|
11
|
+
dataTest: string,
|
|
12
|
+
id: string,
|
|
13
|
+
className: string,
|
|
14
|
+
placeholder: string,
|
|
15
|
+
ariaAttr: shape({
|
|
16
|
+
label: string
|
|
23
17
|
}),
|
|
24
|
-
inputType:
|
|
25
|
-
onChange:
|
|
26
|
-
onKeyUp:
|
|
27
|
-
onFocus:
|
|
28
|
-
onBlur:
|
|
29
|
-
state:
|
|
18
|
+
inputType: oneOf(Object.keys(inputType)),
|
|
19
|
+
onChange: func.isRequired,
|
|
20
|
+
onKeyUp: func.isRequired,
|
|
21
|
+
onFocus: func,
|
|
22
|
+
onBlur: func,
|
|
23
|
+
state: oneOf(Object.keys(inputState))
|
|
30
24
|
};
|
|
31
|
-
|
|
25
|
+
export const defaultProps = {
|
|
32
26
|
dataTest: null,
|
|
33
27
|
id: null,
|
|
34
28
|
className: null,
|
|
@@ -37,7 +31,7 @@ var defaultProps = exports.defaultProps = {
|
|
|
37
31
|
input: ''
|
|
38
32
|
},
|
|
39
33
|
inputType: inputType.text,
|
|
40
|
-
onFocus:
|
|
41
|
-
onBlur:
|
|
34
|
+
onFocus: () => {},
|
|
35
|
+
onBlur: () => {},
|
|
42
36
|
state: inputState.active
|
|
43
37
|
};
|
|
@@ -1,25 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "Input", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function get() {
|
|
9
|
-
return _Input.Input;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
Object.defineProperty(exports, "inputState", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function get() {
|
|
15
|
-
return _Input2.inputState;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
Object.defineProperty(exports, "inputType", {
|
|
19
|
-
enumerable: true,
|
|
20
|
-
get: function get() {
|
|
21
|
-
return _Input2.inputType;
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
var _Input = require("./Input");
|
|
25
|
-
var _Input2 = require("./Input.prop");
|
|
1
|
+
export { Input } from './Input';
|
|
2
|
+
export { inputType, inputState } from './Input.prop';
|
|
@@ -1,48 +1,36 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
className = _ref$className === void 0 ? _Radio.defaultProps.className : _ref$className,
|
|
20
|
-
_ref$htmlFor = _ref.htmlFor,
|
|
21
|
-
htmlFor = _ref$htmlFor === void 0 ? _Radio.defaultProps.htmlFor : _ref$htmlFor,
|
|
22
|
-
_ref$inputType = _ref.inputType,
|
|
23
|
-
inputType = _ref$inputType === void 0 ? _Radio.defaultProps.inputType : _ref$inputType,
|
|
24
|
-
name = _ref.name,
|
|
25
|
-
_ref$isChecked = _ref.isChecked,
|
|
26
|
-
isChecked = _ref$isChecked === void 0 ? _Radio.defaultProps.isChecked : _ref$isChecked,
|
|
27
|
-
_ref$text = _ref.text,
|
|
28
|
-
text = _ref$text === void 0 ? _Radio.defaultProps.text : _ref$text,
|
|
29
|
-
_onChange = _ref.onChange,
|
|
30
|
-
_ref$state = _ref.state,
|
|
31
|
-
state = _ref$state === void 0 ? _Radio.defaultProps.state : _ref$state;
|
|
32
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
1
|
+
import cx from 'classnames';
|
|
2
|
+
import marginStyles from '@papillonbits/css/build/primer/utilities/margin.scss';
|
|
3
|
+
import { propTypes, defaultProps, radioState } from './Radio.prop';
|
|
4
|
+
import styles from './Radio.scss';
|
|
5
|
+
import formStyles from '../index.scss';
|
|
6
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
|
+
export function Radio({
|
|
8
|
+
dataTest = defaultProps.dataTest,
|
|
9
|
+
className = defaultProps.className,
|
|
10
|
+
htmlFor = defaultProps.htmlFor,
|
|
11
|
+
inputType = defaultProps.inputType,
|
|
12
|
+
name,
|
|
13
|
+
isChecked = defaultProps.isChecked,
|
|
14
|
+
text = defaultProps.text,
|
|
15
|
+
onChange,
|
|
16
|
+
state = defaultProps.state
|
|
17
|
+
}) {
|
|
18
|
+
return /*#__PURE__*/_jsx("div", {
|
|
33
19
|
"data-test": dataTest,
|
|
34
|
-
className: (
|
|
35
|
-
|
|
20
|
+
className: cx(className, marginStyles['m-0'], formStyles['form-checkbox'], {
|
|
21
|
+
[styles['radio-inactive']]: state === radioState.inactive
|
|
22
|
+
}),
|
|
23
|
+
children: /*#__PURE__*/_jsxs("label", {
|
|
36
24
|
htmlFor: htmlFor,
|
|
37
|
-
children: [/*#__PURE__*/(
|
|
25
|
+
children: [/*#__PURE__*/_jsx("input", {
|
|
38
26
|
type: inputType,
|
|
39
27
|
name: name,
|
|
40
|
-
onChange:
|
|
41
|
-
|
|
28
|
+
onChange: event => {
|
|
29
|
+
onChange(event);
|
|
42
30
|
},
|
|
43
31
|
checked: isChecked
|
|
44
32
|
}), text]
|
|
45
33
|
})
|
|
46
34
|
});
|
|
47
35
|
}
|
|
48
|
-
Radio.propTypes =
|
|
36
|
+
Radio.propTypes = propTypes;
|
|
@@ -1,29 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.radioState = exports.propTypes = exports.inputType = exports.defaultProps = void 0;
|
|
7
|
-
var _propTypes = require("prop-types");
|
|
8
|
-
var radioState = exports.radioState = {
|
|
1
|
+
import { string, oneOf, bool, func } from 'prop-types';
|
|
2
|
+
export const radioState = {
|
|
9
3
|
active: 'active',
|
|
10
4
|
inactive: 'inactive'
|
|
11
5
|
};
|
|
12
|
-
|
|
6
|
+
export const inputType = {
|
|
13
7
|
radio: 'radio'
|
|
14
8
|
};
|
|
15
|
-
|
|
16
|
-
dataTest:
|
|
17
|
-
className:
|
|
18
|
-
htmlFor:
|
|
19
|
-
inputType:
|
|
20
|
-
name:
|
|
21
|
-
isChecked:
|
|
22
|
-
text:
|
|
23
|
-
onChange:
|
|
24
|
-
state:
|
|
9
|
+
export const propTypes = {
|
|
10
|
+
dataTest: string,
|
|
11
|
+
className: string,
|
|
12
|
+
htmlFor: string,
|
|
13
|
+
inputType: oneOf(Object.keys(inputType)),
|
|
14
|
+
name: string.isRequired,
|
|
15
|
+
isChecked: bool,
|
|
16
|
+
text: string,
|
|
17
|
+
onChange: func.isRequired,
|
|
18
|
+
state: oneOf(Object.keys(radioState))
|
|
25
19
|
};
|
|
26
|
-
|
|
20
|
+
export const defaultProps = {
|
|
27
21
|
dataTest: null,
|
|
28
22
|
className: null,
|
|
29
23
|
htmlFor: 'checkbox',
|
|
@@ -1,19 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "Radio", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function get() {
|
|
9
|
-
return _Radio.Radio;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
Object.defineProperty(exports, "radioState", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function get() {
|
|
15
|
-
return _Radio2.radioState;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
var _Radio = require("./Radio");
|
|
19
|
-
var _Radio2 = require("./Radio.prop");
|
|
1
|
+
export { Radio } from './Radio';
|
|
2
|
+
export { radioState } from './Radio.prop';
|
|
@@ -1,24 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
});
|
|
6
|
-
exports.Form = void 0;
|
|
7
|
-
var _Checkbox = require("./Checkbox");
|
|
8
|
-
var _Input = require("./Input");
|
|
9
|
-
var _Radio = require("./Radio");
|
|
10
|
-
var Form = exports.Form = {
|
|
1
|
+
import { Checkbox, checkboxState } from './Checkbox';
|
|
2
|
+
import { Input, inputType, inputState } from './Input';
|
|
3
|
+
import { Radio, radioState } from './Radio';
|
|
4
|
+
export const Form = {
|
|
11
5
|
Checkbox: {
|
|
12
|
-
Checkbox
|
|
13
|
-
checkboxState
|
|
6
|
+
Checkbox,
|
|
7
|
+
checkboxState
|
|
14
8
|
},
|
|
15
9
|
Input: {
|
|
16
|
-
Input
|
|
17
|
-
inputType
|
|
18
|
-
inputState
|
|
10
|
+
Input,
|
|
11
|
+
inputType,
|
|
12
|
+
inputState
|
|
19
13
|
},
|
|
20
14
|
Radio: {
|
|
21
|
-
Radio
|
|
22
|
-
radioState
|
|
15
|
+
Radio,
|
|
16
|
+
radioState
|
|
23
17
|
}
|
|
24
18
|
};
|