@occmundial/occ-atomic 3.0.0-beta.63 → 3.0.0-beta.65
Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.md
CHANGED
@@ -1,3 +1,20 @@
|
|
1
|
+
# [3.0.0-beta.65](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.64...v3.0.0-beta.65) (2024-10-04)
|
2
|
+
|
3
|
+
|
4
|
+
### Bug Fixes
|
5
|
+
|
6
|
+
* Menu items dense prop ([c8cbfac](https://github.com/occmundial/occ-atomic/commit/c8cbfac53fc263ce87e6f36ea9b6b853eb8e832e))
|
7
|
+
* NavAvatar button props and adjusment to documentation ([e963e9e](https://github.com/occmundial/occ-atomic/commit/e963e9e0088126499b419f2e27451b8276d28b7c))
|
8
|
+
* Renoved menu default padding ([abb3bcb](https://github.com/occmundial/occ-atomic/commit/abb3bcbc0e2dca02a92e629d736c00b2f5bf5888))
|
9
|
+
* Spacing classes incorrect generation ([0f3bc9e](https://github.com/occmundial/occ-atomic/commit/0f3bc9eb8d380d48a66b17b5771f56aed31ff0e6))
|
10
|
+
|
11
|
+
# [3.0.0-beta.64](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.63...v3.0.0-beta.64) (2024-10-03)
|
12
|
+
|
13
|
+
|
14
|
+
### Features
|
15
|
+
|
16
|
+
* Added NavAvatarButton documetation and made some small adjustments ([24abd49](https://github.com/occmundial/occ-atomic/commit/24abd49f6c64a963f44a16f9b9a0f69bdd7d381d))
|
17
|
+
|
1
18
|
# [3.0.0-beta.63](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.62...v3.0.0-beta.63) (2024-09-30)
|
2
19
|
|
3
20
|
|
package/build/Menu/styles.js
CHANGED
@@ -7,8 +7,6 @@ exports["default"] = void 0;
|
|
7
7
|
|
8
8
|
var _colors = _interopRequireDefault(require("../tokens/colors.json"));
|
9
9
|
|
10
|
-
var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
|
11
|
-
|
12
10
|
var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
|
13
11
|
|
14
12
|
var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
|
@@ -21,7 +19,6 @@ var _default = {
|
|
21
19
|
backgroundColor: _colors["default"].bg.surface["default"],
|
22
20
|
borderRadius: _borderRadius["default"]['br-sm'],
|
23
21
|
border: "1px solid ".concat(_colors["default"].border["default"]["default"]),
|
24
|
-
padding: _spacing["default"]['size-2'],
|
25
22
|
boxShadow: _shadows["default"]['elevation-elevation-5']
|
26
23
|
}
|
27
24
|
};
|
@@ -9,8 +9,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
11
11
|
|
12
|
-
var _MenuListProvider = require("../Provider/MenuListProvider");
|
13
|
-
|
14
12
|
var _excluded = ["classes", "alignItems", "className", "nonActivatable", "dense", "disablePadding", "disableGutters", "children", "selected", "component"];
|
15
13
|
|
16
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
@@ -43,11 +41,9 @@ function MenuItemBase(_ref, ref) {
|
|
43
41
|
component = _ref$component === void 0 ? 'div' : _ref$component,
|
44
42
|
props = _objectWithoutProperties(_ref, _excluded);
|
45
43
|
|
46
|
-
var listContext = (0, _MenuListProvider.useMenuListContext)();
|
47
|
-
var isDense = typeof dense === 'undefined' ? listContext.dense : dense;
|
48
44
|
var classNames = classes.root;
|
49
45
|
classNames += className ? " ".concat(className) : '';
|
50
|
-
classNames += !disablePadding ?
|
46
|
+
classNames += !disablePadding ? dense ? " ".concat(classes.paddingVerticalDense) : " ".concat(classes.paddingVertical) : '';
|
51
47
|
classNames += !disablePadding && !disableGutters ? " ".concat(classes.paddingHorizontal) : '';
|
52
48
|
classNames += alignItems === 'center' ? " ".concat(classes.alignItemsCenter) : " ".concat(classes.alignItemsStart);
|
53
49
|
classNames += component === 'a' ? " ".concat(classes.containerAnchor) : '';
|
package/build/MenuList/styles.js
CHANGED
@@ -30,10 +30,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
30
30
|
function generateSpacingClasses() {
|
31
31
|
var spacingClasses = {};
|
32
32
|
|
33
|
-
for (var _i = 0, _Object$
|
34
|
-
var _Object$
|
35
|
-
key = _Object$
|
36
|
-
value = _Object$
|
33
|
+
for (var _i = 0, _Object$entries = Object.entries(_spacing["default"]); _i < _Object$entries.length; _i++) {
|
34
|
+
var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
|
35
|
+
key = _Object$entries$_i[0],
|
36
|
+
value = _Object$entries$_i[1];
|
37
37
|
|
38
38
|
spacingClasses[key] = {
|
39
39
|
padding: value
|
@@ -68,7 +68,6 @@ function MenuUser(_ref, ref) {
|
|
68
68
|
}, subtitleTextProps), subtitle);
|
69
69
|
return /*#__PURE__*/_react["default"].createElement(_MenuItemBase["default"], _extends({
|
70
70
|
className: className && className.root,
|
71
|
-
dense: isDense,
|
72
71
|
component: component,
|
73
72
|
ref: ref,
|
74
73
|
style: style && style.root
|
@@ -13,62 +13,72 @@ var _Avatar = _interopRequireDefault(require("../Avatar"));
|
|
13
13
|
|
14
14
|
var _Button = _interopRequireDefault(require("../Button"));
|
15
15
|
|
16
|
-
var _excluded = ["classes", "name", "disabled", "
|
16
|
+
var _excluded = ["classes", "style", "name", "disabled", "darkMode", "noCompact", "theme", "photo", "className"];
|
17
17
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
19
19
|
|
20
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
21
|
-
|
22
20
|
function _extends() { _extends = Object.assign || 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); }
|
23
21
|
|
24
22
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
25
23
|
|
26
24
|
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; }
|
27
25
|
|
28
|
-
|
26
|
+
/** Button with avatar designed to be used with the NavTab component */
|
27
|
+
function NavAvatarButton(_ref) {
|
29
28
|
var classes = _ref.classes,
|
29
|
+
style = _ref.style,
|
30
30
|
name = _ref.name,
|
31
31
|
disabled = _ref.disabled,
|
32
|
-
_ref$
|
33
|
-
|
34
|
-
|
32
|
+
_ref$darkMode = _ref.darkMode,
|
33
|
+
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
34
|
+
noCompact = _ref.noCompact,
|
35
|
+
theme = _ref.theme,
|
35
36
|
photo = _ref.photo,
|
36
37
|
className = _ref.className,
|
37
38
|
buttonProps = _objectWithoutProperties(_ref, _excluded);
|
38
39
|
|
39
40
|
var buttonClasses = classes.avatarButton;
|
40
|
-
buttonClasses +=
|
41
|
-
buttonClasses += className ? " ".concat(className) : '';
|
41
|
+
buttonClasses += !noCompact ? " ".concat(classes.mini) : '';
|
42
|
+
buttonClasses += className && className.button ? " ".concat(className.button) : '';
|
42
43
|
return /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
|
43
44
|
iconRight: "chevron-down",
|
44
|
-
theme: theme,
|
45
|
+
theme: theme ? theme : darkMode ? 'ghostWhite' : 'ghostGrey',
|
45
46
|
disabled: disabled
|
46
47
|
}, buttonProps, {
|
47
|
-
className: buttonClasses
|
48
|
+
className: buttonClasses,
|
49
|
+
style: style && style.button
|
48
50
|
}), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
|
51
|
+
className: className && className.avatar ? " ".concat(className.avatar) : '',
|
49
52
|
photo: photo,
|
50
53
|
name: name,
|
51
|
-
disabled: disabled
|
54
|
+
disabled: disabled,
|
55
|
+
style: style && style.avatar
|
52
56
|
}));
|
53
57
|
}
|
54
58
|
|
55
|
-
|
59
|
+
NavAvatarButton.propTypes = {
|
56
60
|
classes: _propTypes["default"].object.isRequired,
|
57
61
|
|
58
62
|
/** Button`s container ids */
|
59
63
|
id: _propTypes["default"].string,
|
60
64
|
|
61
65
|
/** Button`s container classname */
|
62
|
-
className: _propTypes["default"].
|
66
|
+
className: _propTypes["default"].exact({
|
67
|
+
button: _propTypes["default"].string,
|
68
|
+
avatar: _propTypes["default"].string
|
69
|
+
}),
|
63
70
|
|
64
71
|
/** Button`s container style */
|
65
|
-
style: _propTypes["default"].
|
72
|
+
style: _propTypes["default"].exact({
|
73
|
+
button: _propTypes["default"].object,
|
74
|
+
avatar: _propTypes["default"].object
|
75
|
+
}),
|
66
76
|
|
67
|
-
/**
|
68
|
-
|
77
|
+
/** If true sets button ghostGrey theme otherwise sets ghostWhite theme. This props is ignored is theme is set. */
|
78
|
+
darkMode: _propTypes["default"].bool,
|
69
79
|
|
70
|
-
/**
|
71
|
-
|
80
|
+
/** Restores button default paddings */
|
81
|
+
noCompact: _propTypes["default"].bool,
|
72
82
|
|
73
83
|
/** There are four themes available: main, secondary, white, blue, flat. */
|
74
84
|
theme: _propTypes["default"].oneOf(['primary', 'secondary', 'tertiary', 'tertiaryWhite', 'ghostPink', 'ghostGrey', 'ghostWhite']),
|
@@ -76,21 +86,12 @@ NavButton.propTypes = _defineProperty({
|
|
76
86
|
/** The button has three different sizes: sm, md, lg. */
|
77
87
|
size: _propTypes["default"].oneOf(['sm', 'md', 'lg']),
|
78
88
|
|
79
|
-
/**
|
80
|
-
|
89
|
+
/** Adds content to the body of NavAside. */
|
90
|
+
children: _propTypes["default"].node,
|
81
91
|
|
82
92
|
/** It disables the button and shows it with the proper theme. */
|
83
93
|
disabled: _propTypes["default"].bool,
|
84
94
|
|
85
|
-
/** Use the name of any of the icons available in the library. */
|
86
|
-
icon: _propTypes["default"].string,
|
87
|
-
|
88
|
-
/** Use the name of any of the icons available in the library. The icon will be rendered on the right side of the button. */
|
89
|
-
iconRight: _propTypes["default"].string,
|
90
|
-
|
91
|
-
/** Property to make the button round when it only has an icon. */
|
92
|
-
round: _propTypes["default"].bool,
|
93
|
-
|
94
95
|
/** The loading property disables the button and shows a loading icon spinning. */
|
95
96
|
loading: _propTypes["default"].bool,
|
96
97
|
|
@@ -123,6 +124,6 @@ NavButton.propTypes = _defineProperty({
|
|
123
124
|
|
124
125
|
/** Pass a name to show two initials. */
|
125
126
|
name: _propTypes["default"].string
|
126
|
-
}
|
127
|
-
var _default =
|
127
|
+
};
|
128
|
+
var _default = NavAvatarButton;
|
128
129
|
exports["default"] = _default;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@occmundial/occ-atomic",
|
3
|
-
"version": "3.0.0-beta.
|
3
|
+
"version": "3.0.0-beta.65",
|
4
4
|
"description": "Collection of shareable styled React components for OCC applications.",
|
5
5
|
"homepage": "http://occmundial.github.io/occ-atomic",
|
6
6
|
"main": "build/index.js",
|