@occmundial/occ-atomic 3.0.0-beta.7 → 3.0.0-beta.71

package/build/NavAside/__snapshots__/NavAside.test.js.snap

@@ -11,49 +11,39 @@ Object {
       "overflow": "hidden",
     },
   },
-  "@keyframes asideShow": Object {
+  "@keyframes overlayFadeIn": Object {
     "from": Object {
-      "left": [Function],
+      "opacity": 0,
     },
     "to": Object {
-      "left": "0px",
+      "opacity": 1,
     },
   },
-  "@keyframes asideShowRight": Object {
+  "@keyframes showFromLeft": Object {
     "from": Object {
-      "right": [Function],
+      "left": -320,
     },
     "to": Object {
-      "right": "0px",
+      "left": 0,
     },
   },
-  "@keyframes overlayFadeIn": Object {
+  "@keyframes showFromRight": Object {
     "from": Object {
-      "opacity": 0,
+      "right": -320,
     },
     "to": Object {
-      "opacity": 1,
+      "right": 0,
     },
   },
-  "OpenElement": Object {
-    "animation": "0.3s asideShow ease-out",
-    "left": "0px !important",
-  },
-  "OpenElementRight": Object {
-    "animation": "0.3s asideShowRight ease-out",
-    "right": "0px !important",
-  },
-  "ShowElement": Object {
-    "backgroundColor": "#ffffff",
+  "block": Object {
+    "backgroundColor": "#fff",
     "height": "100%",
-    "left": "-320px",
     "maxWidth": "calc(100% - 32px)",
-    "opacity": "1 !important",
     "overflow": "hidden",
     "position": "fixed",
-    "top": "0",
-    "transition": "0.4s all",
-    "width": "320px",
+    "top": 0,
+    "transition": "0.3s left, 0.3s right",
+    "width": 320,
   },
   "card": Object {
     "cursor": "auto",
@@ -64,50 +54,52 @@ Object {
   "closeIcon": Object {
     "alignItems": "center",
     "display": "flex",
-    "height": 32,
+    "height": "32px",
   },
   "content": Object {
     "@media screen and (min-width:768px)": Object {
-      "padding": 32,
+      "padding": "32px",
     },
-    "backgroundColor": "#ffffff",
-    "padding": 16,
+    "backgroundColor": "#fff",
+    "padding": "16px",
   },
-  "customeWidth": Object {
-    "left": [Function],
-    "width": [Function],
+  "hideLeft": Object {
+    "left": -320,
   },
-  "customeWidthRight": Object {
-    "right": [Function],
-    "width": [Function],
+  "hideRight": Object {
+    "right": -320,
   },
   "overlay": Object {
-    "background": "rgba(0, 0, 5, 0.85)",
+    "background": "rgba(0,0,0,0.8)",
     "cursor": "pointer",
     "height": "100%",
     "left": 0,
-    "opacity": 0,
     "position": "fixed",
     "top": 0,
     "transition": "0.3s opacity",
-    "transitionDelay": "0.2s",
     "width": "100%",
     "zIndex": 1000,
   },
+  "overlayHide": Object {
+    "opacity": 0,
+  },
   "overlayShow": Object {
     "animation": "0.3s overlayFadeIn linear",
-    "opacity": 1,
+  },
+  "showLeft": Object {
+    "animation": "0.3s showFromLeft ease-out",
+    "left": 0,
   },
   "showRight": Object {
-    "left": "auto",
-    "right": "-320px",
+    "animation": "0.3s showFromRight ease-out",
+    "right": 0,
   },
   "top": Object {
     "@media screen and (min-width:768px)": Object {
-      "padding": 32,
+      "padding": "32px",
     },
-    "backgroundColor": "#f5f5f8",
-    "padding": 16,
+    "backgroundColor": "#F8FAFD",
+    "padding": "16px",
   },
   "topContent": Object {
     "minWidth": 0,

package/build/NavAside/index.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _reactJss = _interopRequireDefault(require("react-jss"));
@@ -100,5 +102,9 @@ var NavAsidePortal = /*#__PURE__*/function (_React$Component) {
   return NavAsidePortal;
 }(_react["default"].Component);
 
+NavAsidePortal.propTypes = {
+  show: _propTypes["default"].bool,
+  container: _propTypes["default"].object
+};
 var _default = NavAsidePortal;
 exports["default"] = _default;

package/build/NavAside/styles.js

@@ -5,17 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
-
 var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 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; }
 
-var _default = {
+var ASIDE_SIZE = 320;
+var styles = {
   '@global': {
     body: {
       overflow: 'hidden'
@@ -29,108 +30,89 @@ var _default = {
       opacity: 1
     }
   },
-  '@keyframes asideShow': {
+  '@keyframes showFromLeft': {
     from: {
-      left: function left(props) {
-        return props.width ? "-".concat(props.width, "px") : '-320px';
-      }
+      left: -ASIDE_SIZE
     },
     to: {
-      left: '0px'
+      left: 0
     }
   },
-  '@keyframes asideShowRight': {
+  '@keyframes showFromRight': {
     from: {
-      right: function right(props) {
-        return props.width ? "-".concat(props.width, "px") : '-320px';
-      }
+      right: -ASIDE_SIZE
     },
     to: {
-      right: '0px'
+      right: 0
     }
   },
   overlay: {
     position: 'fixed',
     width: '100%',
     height: '100%',
-    background: 'rgba(0, 0, 5, 0.85)',
+    background: _colors["default"].bg.overlay,
     top: 0,
     left: 0,
     zIndex: 1000,
     cursor: 'pointer',
-    opacity: 0,
-    transition: '0.3s opacity',
-    transitionDelay: '0.2s'
+    transition: '0.3s opacity'
   },
   overlayShow: {
-    animation: '0.3s overlayFadeIn linear',
-    opacity: 1
+    animation: '0.3s overlayFadeIn linear'
   },
-  card: {
-    cursor: 'auto',
-    height: '100%',
-    padding: 0,
-    overflow: 'auto'
+  overlayHide: {
+    opacity: 0
   },
-  ShowElement: {
+  block: {
     height: '100%',
-    width: '320px',
-    maxWidth: 'calc(100% - 32px)',
+    width: ASIDE_SIZE,
+    maxWidth: "calc(100% - ".concat(_spacing["default"]['size-6'], ")"),
     position: 'fixed',
-    top: '0',
-    backgroundColor: _colors["default"].bgWhite,
+    top: 0,
+    backgroundColor: _colors["default"].bg.surface["default"],
     overflow: 'hidden',
-    left: '-320px',
-    transition: '0.4s all',
-    opacity: '1 !important'
+    transition: '0.3s left, 0.3s right'
   },
-  customeWidth: {
-    width: function width(props) {
-      return "".concat(props.width, "px !important");
-    },
-    left: function left(props) {
-      return "-".concat(props.width, "px");
-    }
-  },
-  customeWidthRight: {
-    width: function width(props) {
-      return "".concat(props.width, "px !important");
-    },
-    right: function right(props) {
-      return "-".concat(props.width, "px");
-    }
+  showLeft: {
+    animation: '0.3s showFromLeft ease-out',
+    left: 0
   },
   showRight: {
-    left: 'auto',
-    right: '-320px'
+    animation: '0.3s showFromRight ease-out',
+    right: 0
   },
-  OpenElement: {
-    animation: '0.3s asideShow ease-out',
-    left: '0px !important'
+  hideLeft: {
+    left: -ASIDE_SIZE
   },
-  OpenElementRight: {
-    animation: '0.3s asideShowRight ease-out',
-    right: '0px !important'
+  hideRight: {
+    right: -ASIDE_SIZE
+  },
+  card: {
+    cursor: 'auto',
+    height: '100%',
+    padding: 0,
+    overflow: 'auto'
   },
   content: _defineProperty({
-    backgroundColor: _colors["default"].bgWhite,
-    padding: _spacing["default"].small
+    backgroundColor: _colors["default"].bg.surface["default"],
+    padding: _spacing["default"]['size-4']
   }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
-    padding: _spacing["default"].medium
+    padding: _spacing["default"]['size-6']
   }),
   top: _defineProperty({
-    backgroundColor: _colors["default"].bgGrey,
-    padding: _spacing["default"].small
+    backgroundColor: _colors["default"].bg["default"],
+    padding: _spacing["default"]['size-4']
   }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
-    padding: _spacing["default"].medium
+    padding: _spacing["default"]['size-6']
   }),
   topContent: {
     minWidth: 0
   },
   closeIcon: {
-    height: _spacing["default"].medium,
+    height: _spacing["default"]['size-6'],
     display: 'flex',
     alignItems: 'center'
   }
 };
+var _default = styles;
 exports["default"] = _default;

package/build/NavAvatarButton/NavAvatarButton.js

@@ -0,0 +1,134 @@
+"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", "style", "name", "disabled", "darkMode", "noCompact", "theme", "photo", "className", "reference"];
+
+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; }
+
+/** Button with avatar designed to be used with the NavTab component */
+function NavAvatarButton(props) {
+  var classes = props.classes,
+      style = props.style,
+      name = props.name,
+      disabled = props.disabled,
+      _props$darkMode = props.darkMode,
+      darkMode = _props$darkMode === void 0 ? false : _props$darkMode,
+      noCompact = props.noCompact,
+      theme = props.theme,
+      photo = props.photo,
+      className = props.className,
+      reference = props.reference,
+      buttonProps = _objectWithoutProperties(props, _excluded);
+
+  var buttonClasses = classes.avatarButton;
+  buttonClasses += !noCompact ? " ".concat(classes.mini) : '';
+  buttonClasses += className && className.button ? " ".concat(className.button) : '';
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: reference,
+    className: classes.container
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
+    iconRight: "chevron-down",
+    theme: theme ? theme : darkMode ? 'ghostWhite' : 'ghostGrey',
+    disabled: disabled
+  }, buttonProps, {
+    className: buttonClasses,
+    style: style && style.button
+  }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+    className: className && className.avatar ? " ".concat(className.avatar) : '',
+    photo: photo,
+    name: name,
+    disabled: disabled,
+    style: style && style.avatar
+  })));
+}
+
+NavAvatarButton.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+
+  /** Button`s container ids */
+  id: _propTypes["default"].string,
+
+  /** Button`s container classname */
+  className: _propTypes["default"].exact({
+    button: _propTypes["default"].string,
+    avatar: _propTypes["default"].string
+  }),
+
+  /** Button`s container style */
+  style: _propTypes["default"].exact({
+    button: _propTypes["default"].object,
+    avatar: _propTypes["default"].object
+  }),
+
+  /** If true sets button ghostGrey theme otherwise sets ghostWhite theme. This props is ignored is theme is set.  */
+  darkMode: _propTypes["default"].bool,
+
+  /** Restores button default paddings  */
+  noCompact: _propTypes["default"].bool,
+
+  /** 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']),
+
+  /** Adds content to the body of NavAside. */
+  children: _propTypes["default"].node,
+
+  /** It disables the button and shows it with the proper theme. */
+  disabled: _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,
+  reference: _propTypes["default"].func
+};
+var _default = NavAvatarButton;
+exports["default"] = _default;

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

@@ -7,12 +7,12 @@ exports["default"] = void 0;
 
 var _reactJss = _interopRequireDefault(require("react-jss"));
 
-var _NavIcon = _interopRequireDefault(require("./NavIcon"));
+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"])(_NavIcon["default"]);
+var _default = (0, _reactJss["default"])(_styles["default"])(_NavAvatarButton["default"]);
 
 exports["default"] = _default;

package/build/NavAvatarButton/styles.js

@@ -0,0 +1,33 @@
+"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)'
+      }
+    }
+  },
+  container: {
+    display: 'inline-block'
+  }
+};
+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/{Header/Nav → NavButton}/index.js

@@ -7,12 +7,12 @@ exports["default"] = void 0;
 
 var _reactJss = _interopRequireDefault(require("react-jss"));
 
-var _Nav = _interopRequireDefault(require("./Nav"));
+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"])(_Nav["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;