@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
 
@@ -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 ? isDense ? " ".concat(classes.paddingVerticalDense) : " ".concat(classes.paddingVertical) : '';
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) : '';
@@ -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$values = Object.values(_spacing["default"]); _i < _Object$values.length; _i++) {
34
- var _Object$values$_i = _slicedToArray(_Object$values[_i], 2),
35
- key = _Object$values$_i[0],
36
- value = _Object$values$_i[1];
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", "theme", "dense", "photo", "className"];
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
- function NavButton(_ref) {
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$theme = _ref.theme,
33
- theme = _ref$theme === void 0 ? 'ghostWhite' : _ref$theme,
34
- dense = _ref.dense,
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 += dense ? " ".concat(classes.mini) : '';
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
- NavButton.propTypes = _defineProperty({
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"].string,
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"].object,
72
+ style: _propTypes["default"].exact({
73
+ button: _propTypes["default"].object,
74
+ avatar: _propTypes["default"].object
75
+ }),
66
76
 
67
- /** Mini variant */
68
- dense: _propTypes["default"].bool,
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
- /** The content of the component. */
71
- children: _propTypes["default"].node,
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
- /** The block property lets the button expand to ocupy the whole width of its parent. */
80
- block: _propTypes["default"].bool,
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
- }, "size", _propTypes["default"].number);
127
- var _default = NavButton;
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.63",
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",