@papillonbits/components 0.46.0 → 0.48.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 +0 -1
- package/build/primer/Alert/Alert.js +7 -29
- package/build/primer/Alert/Alert.prop.js +0 -2
- package/build/primer/Alert/index.js +0 -2
- package/build/primer/Blankslate/Blankslate.js +4 -13
- package/build/primer/Blankslate/Blankslate.prop.js +0 -2
- package/build/primer/Blankslate/index.js +0 -2
- package/build/primer/Breadcrumb/Breadcrumb.js +10 -23
- package/build/primer/Breadcrumb/Breadcrumb.prop.js +0 -2
- package/build/primer/Breadcrumb/index.js +0 -2
- package/build/primer/Button/Button.js +12 -29
- package/build/primer/Button/Button.prop.js +0 -3
- package/build/primer/Button/index.js +0 -2
- package/build/primer/Dropdown/Dropdown.js +13 -37
- package/build/primer/Dropdown/Dropdown.prop.js +0 -2
- package/build/primer/Dropdown/index.js +0 -2
- package/build/primer/ErrorBoundary/ErrorBoundary.js +0 -19
- package/build/primer/ErrorBoundary/ErrorBoundary.prop.js +0 -2
- package/build/primer/ErrorBoundary/index.js +0 -1
- package/build/primer/Form/Checkbox/Checkbox.js +8 -18
- package/build/primer/Form/Checkbox/Checkbox.prop.js +0 -2
- package/build/primer/Form/Checkbox/index.js +0 -2
- package/build/primer/Form/Input/Input.js +12 -21
- package/build/primer/Form/Input/Input.prop.js +0 -2
- package/build/primer/Form/Input/index.js +0 -2
- package/build/primer/Form/Radio/Radio.js +8 -18
- package/build/primer/Form/Radio/Radio.prop.js +0 -2
- package/build/primer/Form/Radio/index.js +0 -2
- package/build/primer/Form/index.js +0 -4
- package/build/primer/Grid/DisplayTable/DisplayTable.js +3 -18
- package/build/primer/Grid/DisplayTable/DisplayTable.prop.js +0 -2
- package/build/primer/Grid/DisplayTable/index.js +0 -1
- package/build/primer/Grid/FlexGrid/FlexGrid.js +11 -51
- package/build/primer/Grid/FlexGrid/FlexGrid.prop.js +0 -2
- package/build/primer/Grid/FlexGrid/index.js +0 -2
- package/build/primer/Grid/index.js +0 -3
- package/build/primer/Icon/Icon.js +8 -23
- package/build/primer/Icon/Icon.part.js +0 -523
- package/build/primer/Icon/Icon.prop.js +0 -2
- package/build/primer/Icon/index.js +0 -2
- package/build/primer/Label/Label.js +4 -15
- package/build/primer/Label/Label.prop.js +0 -2
- package/build/primer/Label/index.js +0 -1
- package/build/primer/Loader/Loader.js +2 -19
- package/build/primer/Loader/Loader.prop.js +0 -2
- package/build/primer/Loader/index.js +0 -2
- package/build/primer/Navigation/Menu/Menu.js +13 -31
- package/build/primer/Navigation/Menu/Menu.prop.js +0 -2
- package/build/primer/Navigation/Menu/index.js +0 -1
- package/build/primer/Navigation/TabNav/TabNav.js +19 -41
- package/build/primer/Navigation/TabNav/TabNav.prop.js +0 -2
- package/build/primer/Navigation/TabNav/index.js +0 -2
- package/build/primer/Navigation/UnderlineNav/UnderlineNav.js +16 -45
- package/build/primer/Navigation/UnderlineNav/UnderlineNav.prop.js +0 -2
- package/build/primer/Navigation/UnderlineNav/index.js +0 -2
- package/build/primer/Navigation/index.js +0 -4
- package/build/primer/Pagination/PreviousNext/PreviousNext.js +9 -25
- package/build/primer/Pagination/PreviousNext/PreviousNext.prop.js +0 -2
- package/build/primer/Pagination/PreviousNext/index.js +0 -2
- package/build/primer/Pagination/index.js +0 -2
- package/build/primer/Popover/Popover.js +8 -24
- package/build/primer/Popover/Popover.prop.js +0 -2
- package/build/primer/Popover/index.js +0 -2
- package/build/primer/Progress/Progress.js +2 -12
- package/build/primer/Progress/Progress.prop.js +0 -2
- package/build/primer/Progress/index.js +0 -2
- package/build/primer/Select/Select.js +7 -21
- package/build/primer/Select/Select.prop.js +0 -2
- package/build/primer/Select/index.js +0 -2
- package/build/primer/SelectMenu/SelectMenu.js +10 -29
- package/build/primer/SelectMenu/SelectMenu.prop.js +0 -3
- package/build/primer/SelectMenu/index.js +0 -1
- package/build/primer/Subhead/Subhead.js +2 -10
- package/build/primer/Subhead/Subhead.prop.js +0 -2
- package/build/primer/Subhead/index.js +0 -1
- package/build/primer/Toast/Toast.js +4 -15
- package/build/primer/Toast/Toast.prop.js +0 -2
- package/build/primer/Toast/index.js +0 -2
- package/build/primer/index.js +0 -21
- package/package.json +4 -4
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.propTypes = exports.iconSizeKeysDefault = exports.iconSizeKeys = exports.iconSize = exports.iconNameKeysDefault = exports.iconNameKeys = exports.iconName = exports.iconAlignKeysDefault = exports.iconAlignKeys = exports.iconAlign = exports.defaultProps = void 0;
|
|
7
|
-
|
|
8
7
|
var _propTypes = require("prop-types");
|
|
9
|
-
|
|
10
8
|
var iconName = {
|
|
11
9
|
Accessibility16: 'Accessibility16',
|
|
12
10
|
AccessibilityInset16: 'AccessibilityInset16',
|
|
@@ -1,40 +1,29 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.Label = Label;
|
|
9
|
-
|
|
10
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
|
|
12
9
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
|
-
|
|
14
10
|
var _colors = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/colors.scss"));
|
|
15
|
-
|
|
16
11
|
var _Label = require("./Label.prop");
|
|
17
|
-
|
|
18
12
|
var _labels = _interopRequireDefault(require("./labels.scss"));
|
|
19
|
-
|
|
20
13
|
var _issueLabels = _interopRequireDefault(require("./issue-labels.scss"));
|
|
21
|
-
|
|
22
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
23
|
-
|
|
24
15
|
function Label(_ref) {
|
|
25
16
|
var _cx;
|
|
26
|
-
|
|
27
17
|
var className = _ref.className,
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
18
|
+
text = _ref.text,
|
|
19
|
+
variant = _ref.variant,
|
|
20
|
+
backgroundColor = _ref.backgroundColor,
|
|
21
|
+
textColor = _ref.textColor;
|
|
32
22
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
33
23
|
title: "Label: ".concat(text),
|
|
34
24
|
className: (0, _classnames["default"])(className, (_cx = {}, (0, _defineProperty2["default"])(_cx, _labels["default"].Label, variant === _Label.labelVariant.regular), (0, _defineProperty2["default"])(_cx, _issueLabels["default"].IssueLabel, variant === _Label.labelVariant.issue), (0, _defineProperty2["default"])(_cx, _colors["default"]['bg-blue'], backgroundColor === _Label.labelBackgroundColor.blue), (0, _defineProperty2["default"])(_cx, _colors["default"]['text-white'], textColor === _Label.labelTextColor.white), _cx)),
|
|
35
25
|
children: text
|
|
36
26
|
});
|
|
37
27
|
}
|
|
38
|
-
|
|
39
28
|
Label.propTypes = _Label.propTypes;
|
|
40
29
|
Label.defaultProps = _Label.defaultProps;
|
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.propTypes = exports.labelVariant = exports.labelTextColor = exports.labelBackgroundColor = exports.defaultProps = void 0;
|
|
7
|
-
|
|
8
7
|
var _propTypes = require("prop-types");
|
|
9
|
-
|
|
10
8
|
var labelVariant = {
|
|
11
9
|
regular: 'regular',
|
|
12
10
|
state: 'state',
|
|
@@ -1,35 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.Loader = Loader;
|
|
9
|
-
|
|
10
8
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
-
|
|
12
9
|
var _colors = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/colors.scss"));
|
|
13
|
-
|
|
14
10
|
var _margin = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/margin.scss"));
|
|
15
|
-
|
|
16
11
|
var _Loader = require("./Loader.prop");
|
|
17
|
-
|
|
18
12
|
var _Loader2 = _interopRequireDefault(require("./Loader.scss"));
|
|
19
|
-
|
|
20
13
|
var _branchName = _interopRequireDefault(require("../BranchName/branch-name.scss"));
|
|
21
|
-
|
|
22
14
|
var _Button = _interopRequireDefault(require("../Button/Button.scss"));
|
|
23
|
-
|
|
24
15
|
var _labels = _interopRequireDefault(require("../Label/labels.scss"));
|
|
25
|
-
|
|
26
16
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
27
|
-
|
|
28
17
|
function Loader(_ref) {
|
|
29
18
|
var className = _ref.className,
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
19
|
+
variant = _ref.variant,
|
|
20
|
+
text = _ref.text;
|
|
33
21
|
switch (variant) {
|
|
34
22
|
case _Loader.loaderVariant.heading:
|
|
35
23
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
|
|
@@ -40,7 +28,6 @@ function Loader(_ref) {
|
|
|
40
28
|
className: _Loader2["default"].AnimatedEllipsis
|
|
41
29
|
})]
|
|
42
30
|
});
|
|
43
|
-
|
|
44
31
|
case _Loader.loaderVariant.text:
|
|
45
32
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
|
|
46
33
|
className: (0, _classnames["default"])(_branchName["default"]['branch-name'], _margin["default"]['mt-2']),
|
|
@@ -50,7 +37,6 @@ function Loader(_ref) {
|
|
|
50
37
|
className: _Loader2["default"].AnimatedEllipsis
|
|
51
38
|
})]
|
|
52
39
|
});
|
|
53
|
-
|
|
54
40
|
case _Loader.loaderVariant.label:
|
|
55
41
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
|
|
56
42
|
className: (0, _classnames["default"])(_labels["default"].Label, _colors["default"]['bg-blue'], _margin["default"]['mt-3']),
|
|
@@ -60,7 +46,6 @@ function Loader(_ref) {
|
|
|
60
46
|
className: _Loader2["default"].AnimatedEllipsis
|
|
61
47
|
})]
|
|
62
48
|
});
|
|
63
|
-
|
|
64
49
|
case _Loader.loaderVariant.button:
|
|
65
50
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
|
|
66
51
|
type: "button",
|
|
@@ -72,11 +57,9 @@ function Loader(_ref) {
|
|
|
72
57
|
className: _Loader2["default"].AnimatedEllipsis
|
|
73
58
|
})]
|
|
74
59
|
});
|
|
75
|
-
|
|
76
60
|
default:
|
|
77
61
|
return null;
|
|
78
62
|
}
|
|
79
63
|
}
|
|
80
|
-
|
|
81
64
|
Loader.propTypes = _Loader.propTypes;
|
|
82
65
|
Loader.defaultProps = _Loader.defaultProps;
|
|
@@ -1,51 +1,35 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.Menu = Menu;
|
|
9
|
-
|
|
10
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
|
|
12
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
-
|
|
14
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
|
-
|
|
16
11
|
var _uuid = require("uuid");
|
|
17
|
-
|
|
18
12
|
var _array = require("@papillonbits/library/array");
|
|
19
|
-
|
|
20
13
|
var _hooks = require("@papillonbits/library/hooks");
|
|
21
|
-
|
|
22
14
|
var _Menu = require("./Menu.prop");
|
|
23
|
-
|
|
24
15
|
var _Menu2 = _interopRequireDefault(require("./Menu.scss"));
|
|
25
|
-
|
|
26
16
|
var _Icon = require("../../Icon");
|
|
27
|
-
|
|
28
17
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
29
|
-
|
|
30
18
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
31
|
-
|
|
32
19
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
33
|
-
|
|
34
20
|
function Menu(_ref) {
|
|
35
21
|
var className = _ref.className,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
22
|
+
heading = _ref.heading,
|
|
23
|
+
ariaAttr = _ref.ariaAttr,
|
|
24
|
+
items = _ref.items,
|
|
25
|
+
_onClick = _ref.onClick;
|
|
41
26
|
var _useState = (0, _hooks.useState)((0, _array.getIndexItems)(items)),
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
27
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
28
|
+
indexItems = _useState2[0],
|
|
29
|
+
setIndexItems = _useState2[1];
|
|
46
30
|
var label = ariaAttr.label,
|
|
47
|
-
|
|
48
|
-
|
|
31
|
+
labelledBy = ariaAttr.labelledBy,
|
|
32
|
+
current = ariaAttr.current;
|
|
49
33
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("nav", {
|
|
50
34
|
className: (0, _classnames["default"])(className, _Menu2["default"].menu),
|
|
51
35
|
"aria-label": label,
|
|
@@ -55,10 +39,10 @@ function Menu(_ref) {
|
|
|
55
39
|
children: heading
|
|
56
40
|
}), indexItems.map(function (indexItem) {
|
|
57
41
|
var href = indexItem.href,
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
42
|
+
icon = indexItem.icon,
|
|
43
|
+
text = indexItem.text,
|
|
44
|
+
html = indexItem.html,
|
|
45
|
+
isSelected = indexItem.isSelected;
|
|
62
46
|
var itemOtherProps = isSelected ? _objectSpread({}, {
|
|
63
47
|
'aria-current': current
|
|
64
48
|
}) : null;
|
|
@@ -67,7 +51,6 @@ function Menu(_ref) {
|
|
|
67
51
|
e.preventDefault();
|
|
68
52
|
var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
|
|
69
53
|
setIndexItems(newIndexItems);
|
|
70
|
-
|
|
71
54
|
_onClick(newIndexItems);
|
|
72
55
|
},
|
|
73
56
|
className: _Menu2["default"]['menu-item'],
|
|
@@ -82,6 +65,5 @@ function Menu(_ref) {
|
|
|
82
65
|
})]
|
|
83
66
|
});
|
|
84
67
|
}
|
|
85
|
-
|
|
86
68
|
Menu.propTypes = _Menu.propTypes;
|
|
87
69
|
Menu.defaultProps = _Menu.defaultProps;
|
|
@@ -1,49 +1,34 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.TabNav = TabNav;
|
|
9
|
-
|
|
10
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
|
|
12
9
|
var _react = require("react");
|
|
13
|
-
|
|
14
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
|
-
|
|
16
11
|
var _uuid = require("uuid");
|
|
17
|
-
|
|
18
12
|
var _array = require("@papillonbits/library/array");
|
|
19
|
-
|
|
20
13
|
var _TabNav = require("./TabNav.prop");
|
|
21
|
-
|
|
22
14
|
var _TabNav2 = _interopRequireDefault(require("./TabNav.scss"));
|
|
23
|
-
|
|
24
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
25
|
-
|
|
26
16
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
27
|
-
|
|
28
17
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
29
|
-
|
|
30
18
|
function TabNav(_ref) {
|
|
31
19
|
var className = _ref.className,
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
20
|
+
ariaAttr = _ref.ariaAttr,
|
|
21
|
+
items = _ref.items,
|
|
22
|
+
actions = _ref.actions,
|
|
23
|
+
_onClick = _ref.onClick,
|
|
24
|
+
children = _ref.children,
|
|
25
|
+
state = _ref.state;
|
|
39
26
|
if (!items) {
|
|
40
27
|
return null;
|
|
41
28
|
}
|
|
42
|
-
|
|
43
29
|
var label = ariaAttr.label,
|
|
44
|
-
|
|
30
|
+
current = ariaAttr.current;
|
|
45
31
|
var indexItems = (0, _array.getIndexItems)(items);
|
|
46
|
-
|
|
47
32
|
function renderActions() {
|
|
48
33
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
|
|
49
34
|
children: actions
|
|
@@ -57,31 +42,28 @@ function TabNav(_ref) {
|
|
|
57
42
|
"aria-label": label,
|
|
58
43
|
children: indexItems.map(function (indexItem) {
|
|
59
44
|
var href = indexItem.href,
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
45
|
+
text = indexItem.text,
|
|
46
|
+
link = indexItem.link,
|
|
47
|
+
isSelected = indexItem.isSelected,
|
|
48
|
+
enabled = indexItem.enabled,
|
|
49
|
+
visible = indexItem.visible;
|
|
65
50
|
var itemOtherProps = isSelected ? _objectSpread({}, {
|
|
66
51
|
'aria-current': current
|
|
67
52
|
}) : null;
|
|
68
|
-
|
|
69
53
|
if (href && text) {
|
|
70
54
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", _objectSpread(_objectSpread({
|
|
71
55
|
onClick: function onClick() {
|
|
72
56
|
if (!enabled) {
|
|
73
57
|
return;
|
|
74
58
|
}
|
|
75
|
-
|
|
76
59
|
var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
|
|
77
|
-
|
|
78
60
|
_onClick({
|
|
79
61
|
ariaAttr: ariaAttr,
|
|
80
62
|
items: newIndexItems.map(function (newIndexItem) {
|
|
81
63
|
return function (_ref2) {
|
|
82
64
|
var href = _ref2.href,
|
|
83
|
-
|
|
84
|
-
|
|
65
|
+
text = _ref2.text,
|
|
66
|
+
isSelected = _ref2.isSelected;
|
|
85
67
|
return {
|
|
86
68
|
href: href,
|
|
87
69
|
text: text,
|
|
@@ -94,33 +76,30 @@ function TabNav(_ref) {
|
|
|
94
76
|
)
|
|
95
77
|
});
|
|
96
78
|
},
|
|
79
|
+
|
|
97
80
|
className: _TabNav2["default"]['tabnav-tab'],
|
|
98
81
|
href: href
|
|
99
82
|
}, itemOtherProps), {}, {
|
|
100
83
|
children: text
|
|
101
84
|
}), (0, _uuid.v1)());
|
|
102
85
|
}
|
|
103
|
-
|
|
104
86
|
if (link) {
|
|
105
87
|
var _cx2;
|
|
106
|
-
|
|
107
88
|
var Link = link.component;
|
|
108
89
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Link, _objectSpread(_objectSpread(_objectSpread({
|
|
109
90
|
onClick: function onClick() {
|
|
110
91
|
if (!enabled) {
|
|
111
92
|
return;
|
|
112
93
|
}
|
|
113
|
-
|
|
114
94
|
var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
|
|
115
|
-
|
|
116
95
|
_onClick({
|
|
117
96
|
ariaAttr: ariaAttr,
|
|
118
97
|
items: newIndexItems.map(function (newIndexItem) {
|
|
119
98
|
return function (_ref3) {
|
|
120
99
|
var link = _ref3.link,
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
100
|
+
isSelected = _ref3.isSelected,
|
|
101
|
+
enabled = _ref3.enabled,
|
|
102
|
+
visible = _ref3.visible;
|
|
124
103
|
return {
|
|
125
104
|
link: link,
|
|
126
105
|
isSelected: isSelected,
|
|
@@ -132,17 +111,16 @@ function TabNav(_ref) {
|
|
|
132
111
|
)
|
|
133
112
|
});
|
|
134
113
|
},
|
|
114
|
+
|
|
135
115
|
className: (0, _classnames["default"])(className, _TabNav2["default"]['tabnav-tab'], (_cx2 = {}, (0, _defineProperty2["default"])(_cx2, _TabNav2["default"]['tabnav-tab-inactive'], enabled === false), (0, _defineProperty2["default"])(_cx2, _TabNav2["default"]['tabnav-tab-hidden'], visible === false), _cx2))
|
|
136
116
|
}, itemOtherProps), link.props), {}, {
|
|
137
117
|
children: link.children
|
|
138
118
|
}), (0, _uuid.v1)());
|
|
139
119
|
}
|
|
140
|
-
|
|
141
120
|
return null;
|
|
142
121
|
})
|
|
143
122
|
}), children]
|
|
144
123
|
});
|
|
145
124
|
}
|
|
146
|
-
|
|
147
125
|
TabNav.propTypes = _TabNav.propTypes;
|
|
148
126
|
TabNav.defaultProps = _TabNav.defaultProps;
|
|
@@ -1,68 +1,47 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.UnderlineNav = UnderlineNav;
|
|
9
|
-
|
|
10
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
|
|
12
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
-
|
|
14
10
|
var _react = require("react");
|
|
15
|
-
|
|
16
11
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
17
|
-
|
|
18
12
|
var _uuid = require("uuid");
|
|
19
|
-
|
|
20
13
|
var _array = require("@papillonbits/library/array");
|
|
21
|
-
|
|
22
14
|
var _hooks = require("@papillonbits/library/hooks");
|
|
23
|
-
|
|
24
15
|
var _UnderlineNav = require("./UnderlineNav.prop");
|
|
25
|
-
|
|
26
16
|
var _UnderlineNav2 = _interopRequireDefault(require("./UnderlineNav.scss"));
|
|
27
|
-
|
|
28
17
|
var _container = _interopRequireDefault(require("../../Layout/container.scss"));
|
|
29
|
-
|
|
30
18
|
var _Icon = require("../../Icon");
|
|
31
|
-
|
|
32
19
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
33
|
-
|
|
34
20
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
35
|
-
|
|
36
21
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
37
|
-
|
|
38
22
|
function UnderlineNav(_ref) {
|
|
39
23
|
var _cx;
|
|
40
|
-
|
|
41
24
|
var className = _ref.className,
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
25
|
+
ariaAttr = _ref.ariaAttr,
|
|
26
|
+
items = _ref.items,
|
|
27
|
+
itemType = _ref.itemType,
|
|
28
|
+
actions = _ref.actions,
|
|
29
|
+
align = _ref.align,
|
|
30
|
+
fullContainer = _ref.fullContainer,
|
|
31
|
+
_onClick = _ref.onClick;
|
|
50
32
|
var _useState = (0, _hooks.useState)((0, _array.getIndexItems)(items)),
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
33
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
34
|
+
indexItems = _useState2[0],
|
|
35
|
+
setIndexItems = _useState2[1];
|
|
55
36
|
var label = ariaAttr.label,
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
37
|
+
selected = ariaAttr.selected,
|
|
38
|
+
current = ariaAttr.current;
|
|
59
39
|
function renderActions() {
|
|
60
40
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
61
41
|
className: _UnderlineNav2["default"]['UnderlineNav-actions'],
|
|
62
42
|
children: actions
|
|
63
43
|
});
|
|
64
44
|
}
|
|
65
|
-
|
|
66
45
|
function renderBody() {
|
|
67
46
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
|
|
68
47
|
children: [align === _UnderlineNav.underlineNavAlignmentType.right && actions && renderActions(), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
@@ -70,17 +49,16 @@ function UnderlineNav(_ref) {
|
|
|
70
49
|
role: "tablist",
|
|
71
50
|
children: indexItems.map(function (indexItem) {
|
|
72
51
|
var href = indexItem.href,
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
52
|
+
icon = indexItem.icon,
|
|
53
|
+
text = indexItem.text,
|
|
54
|
+
html = indexItem.html,
|
|
55
|
+
isSelected = indexItem.isSelected;
|
|
77
56
|
var anchorOtherProps = isSelected ? _objectSpread({}, {
|
|
78
57
|
'aria-selected': selected
|
|
79
58
|
}) : null;
|
|
80
59
|
var buttonOtherProps = isSelected ? _objectSpread({}, {
|
|
81
60
|
'aria-current': current
|
|
82
61
|
}) : null;
|
|
83
|
-
|
|
84
62
|
switch (itemType) {
|
|
85
63
|
case 'button':
|
|
86
64
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", _objectSpread(_objectSpread({
|
|
@@ -88,7 +66,6 @@ function UnderlineNav(_ref) {
|
|
|
88
66
|
e.preventDefault();
|
|
89
67
|
var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
|
|
90
68
|
setIndexItems(newIndexItems);
|
|
91
|
-
|
|
92
69
|
_onClick(newIndexItems);
|
|
93
70
|
},
|
|
94
71
|
className: _UnderlineNav2["default"]['UnderlineNav-item'],
|
|
@@ -102,14 +79,12 @@ function UnderlineNav(_ref) {
|
|
|
102
79
|
size: _Icon.iconSize.small
|
|
103
80
|
}), html || null, text]
|
|
104
81
|
}), (0, _uuid.v1)());
|
|
105
|
-
|
|
106
82
|
case 'a':
|
|
107
83
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({
|
|
108
84
|
onClick: function onClick(e) {
|
|
109
85
|
e.preventDefault();
|
|
110
86
|
var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
|
|
111
87
|
setIndexItems(newIndexItems);
|
|
112
|
-
|
|
113
88
|
_onClick(newIndexItems);
|
|
114
89
|
},
|
|
115
90
|
className: _UnderlineNav2["default"]['UnderlineNav-item'],
|
|
@@ -121,7 +96,6 @@ function UnderlineNav(_ref) {
|
|
|
121
96
|
size: _Icon.iconSize.small
|
|
122
97
|
}), html || null, text]
|
|
123
98
|
}), (0, _uuid.v1)());
|
|
124
|
-
|
|
125
99
|
default:
|
|
126
100
|
return null;
|
|
127
101
|
}
|
|
@@ -129,20 +103,17 @@ function UnderlineNav(_ref) {
|
|
|
129
103
|
}), align === _UnderlineNav.underlineNavAlignmentType.left && actions && renderActions()]
|
|
130
104
|
});
|
|
131
105
|
}
|
|
132
|
-
|
|
133
106
|
function renderBodyFullContainer() {
|
|
134
107
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
135
108
|
className: (0, _classnames["default"])(_container["default"]['container-lg'], _UnderlineNav2["default"]['UnderlineNav-container']),
|
|
136
109
|
children: renderBody()
|
|
137
110
|
});
|
|
138
111
|
}
|
|
139
|
-
|
|
140
112
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("nav", {
|
|
141
113
|
className: (0, _classnames["default"])(className, _UnderlineNav2["default"].UnderlineNav, (_cx = {}, (0, _defineProperty2["default"])(_cx, _UnderlineNav2["default"]['UnderlineNav--right'], align === _UnderlineNav.underlineNavAlignmentType.right), (0, _defineProperty2["default"])(_cx, _UnderlineNav2["default"]['UnderlineNav--full'], fullContainer === true), _cx)),
|
|
142
114
|
"aria-label": label,
|
|
143
115
|
children: [fullContainer === false && renderBody(), fullContainer === true && renderBodyFullContainer()]
|
|
144
116
|
});
|
|
145
117
|
}
|
|
146
|
-
|
|
147
118
|
UnderlineNav.propTypes = _UnderlineNav.propTypes;
|
|
148
119
|
UnderlineNav.defaultProps = _UnderlineNav.defaultProps;
|
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.underlineNavItemType = exports.underlineNavAlignmentType = exports.propTypes = exports.defaultProps = void 0;
|
|
7
|
-
|
|
8
7
|
var _propTypes = require("prop-types");
|
|
9
|
-
|
|
10
8
|
var underlineNavItemType = {
|
|
11
9
|
a: 'a',
|
|
12
10
|
button: 'button'
|
|
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.Navigation = void 0;
|
|
7
|
-
|
|
8
7
|
var _Menu = require("./Menu");
|
|
9
|
-
|
|
10
8
|
var _TabNav = require("./TabNav");
|
|
11
|
-
|
|
12
9
|
var _UnderlineNav = require("./UnderlineNav");
|
|
13
|
-
|
|
14
10
|
var Navigation = {
|
|
15
11
|
Menu: _Menu.Menu,
|
|
16
12
|
TabNav: _TabNav.TabNav,
|