@occmundial/occ-atomic 3.0.0-beta.60 → 3.0.0-beta.62

package/build/MenuUser/MenuUser.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _MenuItemBase = _interopRequireDefault(require("../MenuItemBase"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _Avatar = _interopRequireDefault(require("../Avatar"));
+
+var _idx = _interopRequireDefault(require("idx"));
+
+var _MenuListProvider = require("../Provider/MenuListProvider");
+
+var _excluded = ["classes", "disableText", "className", "title", "subtitle", "titleTextProps", "subtitleTextProps", "avatarProps", "dense", "children", "style", "component"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }
+
+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; }
+
+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; }
+
+/** MenuItem component with Avatar and subtitle. */
+function MenuUser(_ref, ref) {
+  var classes = _ref.classes,
+      _ref$disableText = _ref.disableText,
+      disableText = _ref$disableText === void 0 ? false : _ref$disableText,
+      className = _ref.className,
+      title = _ref.title,
+      subtitle = _ref.subtitle,
+      titleTextProps = _ref.titleTextProps,
+      subtitleTextProps = _ref.subtitleTextProps,
+      avatarProps = _ref.avatarProps,
+      dense = _ref.dense,
+      children = _ref.children,
+      style = _ref.style,
+      _ref$component = _ref.component,
+      component = _ref$component === void 0 ? 'div' : _ref$component,
+      menuItemprops = _objectWithoutProperties(_ref, _excluded);
+
+  var listContext = (0, _MenuListProvider.useMenuListContext)();
+  var isDense = typeof dense === 'undefined' ? listContext.dense : dense;
+  var primary = title || children;
+  var titleText = !primary ? null : disableText ? primary : /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({
+    className: classes.title + ((0, _idx["default"])(className, function (_) {
+      return _.title;
+    }) ? " ".concat(className.title) : ''),
+    tag: "span",
+    bodyLargeStrong: !isDense,
+    bodyRegularStrong: isDense
+  }, titleTextProps), primary);
+  var subtitleText = !subtitle ? null : disableText ? subtitle : /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({
+    className: classes.subtitle + ((0, _idx["default"])(className, function (_) {
+      return _.subtitle;
+    }) ? " ".concat(className.subtitle) : ''),
+    tag: "span",
+    small: true,
+    corpSecondary: true
+  }, subtitleTextProps), subtitle);
+  return /*#__PURE__*/_react["default"].createElement(_MenuItemBase["default"], _extends({
+    className: className && className.root,
+    dense: isDense,
+    component: component,
+    ref: ref,
+    style: style && style.root
+  }, menuItemprops), avatarProps && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.avatarContainer + ((0, _idx["default"])(className, function (_) {
+      return _.avatarContainer;
+    }) ? " ".concat(className.avatarContainer) : ''),
+    style: style && style.avatarContainer
+  }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
+    size: isDense ? 40 : 56
+  }, avatarProps))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.textContainer + ((0, _idx["default"])(className, function (_) {
+      return _.textContainer;
+    }) ? " ".concat(className.textContainer) : ''),
+    style: style && style.textContainer
+  }, titleText, subtitleText));
+}
+
+var _default = /*#__PURE__*/_react["default"].forwardRef(MenuUser);
+
+exports["default"] = _default;
+MenuUser.propTypes = {
+  classes: _propTypes["default"].object,
+
+  /** Defines the align-items style property.  */
+  alignItems: _propTypes["default"].oneOf(['center', 'start']),
+
+  /** Adds classes to the root, text, iconRight, iconLeft containers.  */
+  className: _propTypes["default"].exact({
+    root: _propTypes["default"].string,
+    title: _propTypes["default"].string,
+    subtitle: _propTypes["default"].string,
+    avatarContainer: _propTypes["default"].string,
+    textContainer: _propTypes["default"].string
+  }),
+
+  /** Adds styles to the root, text, iconRight, iconLeft containers.  */
+  style: _propTypes["default"].exact({
+    root: _propTypes["default"].object,
+    textContainer: _propTypes["default"].object,
+    avatarContainer: _propTypes["default"].objects
+  }),
+
+  /** Use to remove hover, focus and active stylings. */
+  nonActivatable: _propTypes["default"].bool,
+
+  /** If true, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent List component.  */
+  dense: _propTypes["default"].bool,
+
+  /** If true, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent List component. */
+  disablePadding: _propTypes["default"].bool,
+
+  /** If true, the left and right padding is removed. */
+  disableGutters: _propTypes["default"].bool,
+
+  /** The content of the component.   */
+  children: _propTypes["default"].node,
+
+  /** The component used for the root node. Either a string to use a HTML element or a component. */
+  selected: _propTypes["default"].bool,
+
+  /** If true, the children won't be wrapped by a Text component. This can be useful to render an alternative Text variant by wrapping the children text. */
+  component: _propTypes["default"].elementType,
+
+  /** If true, the children won't be wrapped by a Text component. This can be useful to render an alternative Text variant by wrapping the children text. */
+  disableText: _propTypes["default"].bool,
+
+  /** The title content element. */
+  title: _propTypes["default"].node,
+
+  /** These props will be forwarded to the title Text component (as long as disableText is not true). */
+  titleTextProps: _propTypes["default"].object,
+
+  /** The subtitle content element. */
+  subtitle: _propTypes["default"].node,
+
+  /** These props will be forwarded to the subtitle Text component (as long as disableText is not true). */
+  subtitleTextProps: _propTypes["default"].object,
+
+  /** These props will be forwarded to the Avatar component. */
+  avatarProps: _propTypes["default"].object
+};

package/build/MenuUser/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
+var _MenuUser = _interopRequireDefault(require("./MenuUser"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = (0, _reactJss["default"])(_styles["default"])(_MenuUser["default"]);
+
+exports["default"] = _default;

package/build/MenuUser/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  avatarContainer: {
+    flexShrink: 0,
+    paddingRight: 12
+  },
+  title: {
+    display: 'block'
+  },
+  subtitle: {
+    display: 'block'
+  },
+  textContainer: {
+    flex: '1 1 auto'
+  }
+};
+exports["default"] = _default;

package/build/NavAvatarButton/NavAvatarButton.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Avatar = _interopRequireDefault(require("../Avatar"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _excluded = ["classes", "name", "disabled", "theme", "dense", "photo", "className"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+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); }
+
+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; }
+
+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; }
+
+function NavButton(_ref) {
+  var classes = _ref.classes,
+      name = _ref.name,
+      disabled = _ref.disabled,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'ghostWhite' : _ref$theme,
+      dense = _ref.dense,
+      photo = _ref.photo,
+      className = _ref.className,
+      buttonProps = _objectWithoutProperties(_ref, _excluded);
+
+  var buttonClasses = classes.avatarButton;
+  buttonClasses += dense ? " ".concat(classes.mini) : '';
+  buttonClasses += className ? " ".concat(className) : '';
+  return /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
+    iconRight: "chevron-down",
+    theme: theme,
+    disabled: disabled
+  }, buttonProps, {
+    className: buttonClasses
+  }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+    photo: photo,
+    name: name,
+    disabled: disabled
+  }));
+}
+
+NavButton.propTypes = _defineProperty({
+  classes: _propTypes["default"].object.isRequired,
+
+  /** Button`s container ids */
+  id: _propTypes["default"].string,
+
+  /** Button`s container classname */
+  className: _propTypes["default"].string,
+
+  /** Button`s container style */
+  style: _propTypes["default"].object,
+
+  /** Mini variant  */
+  dense: _propTypes["default"].bool,
+
+  /** The content of the component. */
+  children: _propTypes["default"].node,
+
+  /** There are four themes available: main, secondary, white, blue, flat. */
+  theme: _propTypes["default"].oneOf(['primary', 'secondary', 'tertiary', 'tertiaryWhite', 'ghostPink', 'ghostGrey', 'ghostWhite']),
+
+  /** The button has three different sizes: sm, md, lg. */
+  size: _propTypes["default"].oneOf(['sm', 'md', 'lg']),
+
+  /** The block property lets the button expand to ocupy the whole width of its parent. */
+  block: _propTypes["default"].bool,
+
+  /** It disables the button and shows it with the proper theme. */
+  disabled: _propTypes["default"].bool,
+
+  /** Use the name of any of the icons available in the library. */
+  icon: _propTypes["default"].string,
+
+  /** Use the name of any of the icons available in the library. The icon will be rendered on the right side of the button. */
+  iconRight: _propTypes["default"].string,
+
+  /** Property to make the button round when it only has an icon. */
+  round: _propTypes["default"].bool,
+
+  /** The loading property disables the button and shows a loading icon spinning. */
+  loading: _propTypes["default"].bool,
+
+  /** The function to call when the button is clicked. */
+  onClick: _propTypes["default"].func,
+
+  /** The function to call when the mouse is down on the button. */
+  onMouseDown: _propTypes["default"].func,
+
+  /** The function to call when the mouse is up on the button. */
+  onMouseUp: _propTypes["default"].func,
+
+  /** The function to call when the mouse moves out of the button. */
+  onMouseOut: _propTypes["default"].func,
+
+  /** Optionally, you can set the href property and use it like a link. */
+  href: _propTypes["default"].string,
+
+  /** If you use the href property, you can also define the target. */
+  target: _propTypes["default"].string,
+
+  /** If you use the href property, you can also define the rel attribute. */
+  rel: _propTypes["default"].string,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string,
+
+  /** A url to show a photo as the avatar. */
+  photo: _propTypes["default"].string,
+
+  /** Pass a name to show two initials. */
+  name: _propTypes["default"].string
+}, "size", _propTypes["default"].number);
+var _default = NavButton;
+exports["default"] = _default;

package/build/NavAvatarButton/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
+var _NavAvatarButton = _interopRequireDefault(require("./NavAvatarButton"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = (0, _reactJss["default"])(_styles["default"])(_NavAvatarButton["default"]);
+
+exports["default"] = _default;

package/build/NavAvatarButton/styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  dense: {
+    padding: _spacing["default"]['size-1'],
+    '& > span > svg': {
+      marginLeft: _spacing["default"]['size-1']
+    }
+  },
+  avatarButton: {
+    '& > span > svg': {
+      transition: '0.3s all!important'
+    },
+    '&:hover, &:focus, &:active': {
+      '& > span > svg': {
+        transform: 'translateY(2px)'
+      }
+    }
+  }
+};
+exports["default"] = _default;

package/build/NavButton/NavButton.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _Flexbox = _interopRequireDefault(require("../Flexbox"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _colors = _interopRequireDefault(require("../subatomic/colors"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function NavButton(_ref) {
+  var classes = _ref.classes,
+      selected = _ref.selected,
+      label = _ref.label,
+      onClick = _ref.onClick,
+      direction = _ref.direction,
+      className = _ref.className,
+      testId = _ref.testId,
+      id = _ref.id,
+      iconName = _ref.iconName,
+      white = _ref.white;
+  var iconColor = white ? _colors["default"].bgWhite : _colors["default"].grey600;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.cont).concat(selected ? " ".concat(classes.selected) : '').concat(className ? " ".concat(className) : ''),
+    onClick: onClick,
+    "data-testid": testId,
+    id: id
+  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+    display: "flex",
+    direction: direction,
+    justifyContent: "center",
+    alignItems: "center",
+    className: classes.flex
+  }, iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: iconName,
+    colors: [iconColor]
+  }), label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+    bodyRegularStrong: true,
+    current: true
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: classes.text
+  }, label))));
+}
+
+NavButton.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  selected: _propTypes["default"].bool,
+  iconName: _propTypes["default"].string,
+  label: _propTypes["default"].string,
+  onClick: _propTypes["default"].func,
+  width: _propTypes["default"].number,
+  showBar: _propTypes["default"].bool,
+  direction: _propTypes["default"].oneOf(['col', 'row']),
+  className: _propTypes["default"].string,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string,
+  id: _propTypes["default"].string,
+  white: _propTypes["default"].bool
+};
+var _default = NavButton;
+exports["default"] = _default;

package/build/{NavIcon → NavButton}/index.js

@@ -7,12 +7,12 @@ exports["default"] = void 0;
 
 var _reactJss = _interopRequireDefault(require("react-jss"));
 
-var _NavIcon = _interopRequireDefault(require("./NavIcon"));
+var _NavButton = _interopRequireDefault(require("./NavButton"));
 
 var _styles = _interopRequireDefault(require("./styles"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = (0, _reactJss["default"])(_styles["default"])(_NavIcon["default"]);
+var _default = (0, _reactJss["default"])(_styles["default"])(_NavButton["default"]);
 
 exports["default"] = _default;

package/build/NavButton/styles.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  cont: {
+    width: function width(props) {
+      return props.width ? props.width : null;
+    },
+    display: 'inline-block',
+    height: _spacing["default"]['size-9'],
+    cursor: 'pointer',
+    position: 'relative',
+    '& $svg': {
+      fill: function fill(props) {
+        return props.white ? _colors["default"].text.white.secondary : _colors["default"].text.corp.secondary;
+      }
+    },
+    '&:hover $svg, &:focus $svg, &:active $svg': {
+      fill: function fill(props) {
+        return props.white ? _colors["default"].text.white.primary : _colors["default"].text.corp.primary;
+      }
+    },
+    '&:hover $text, &:focus $text, &:active $text': {
+      color: function color(props) {
+        return props.white ? _colors["default"].text.white.primary : _colors["default"].text.corp.primary;
+      }
+    },
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      width: '100%',
+      height: 3,
+      bottom: 0,
+      left: 0,
+      background: 'transparent',
+      transition: '0.3s all'
+    }
+  },
+  flex: {
+    height: _spacing["default"]['size-9']
+  },
+  selected: {
+    '& $svg, &:hover $svg': {
+      fill: function fill(props) {
+        return props.white ? _colors["default"].text.white.primary : _colors["default"].text.corp.primary;
+      }
+    },
+    '& $text, &:hover $text': {
+      color: function color(props) {
+        return props.white ? _colors["default"].text.white.primary : _colors["default"].text.corp.primary;
+      }
+    },
+    '&:after': {
+      background: function background(props) {
+        return props.showBar ? _colors["default"].border.accent : null;
+      }
+    }
+  },
+  text: {
+    color: function color(props) {
+      return props.white ? _colors["default"].text.white.secondary : _colors["default"].text.corp.secondary;
+    },
+    marginLeft: function marginLeft(props) {
+      return props.direction !== 'col' ? _spacing["default"]['size-2'] : null;
+    },
+    transition: '0.3s all'
+  }
+};
+exports["default"] = _default;

package/build/NavItem/styles.js

@@ -7,7 +7,7 @@ exports["default"] = void 0;
 
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -32,11 +32,11 @@ var _default = {
   notification: {
     display: 'inline-block',
     borderRadius: '50%',
-    width: _spacing["default"].tiny,
-    height: _spacing["default"].tiny,
+    width: _spacing["default"]['size-2'],
+    height: _spacing["default"]['size-2'],
     backgroundColor: _colors["default"].error,
     marginBottom: 1,
-    marginLeft: _spacing["default"].xTiny
+    marginLeft: _spacing["default"]['size-1']
   }
 };
 exports["default"] = _default;