@occmundial/occ-atomic 3.0.0-beta.66 → 3.0.0-beta.68

package/build/NavAvatarButton/NavAvatarButton.js

@@ -13,7 +13,7 @@ var _Avatar = _interopRequireDefault(require("../Avatar"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
-var _excluded = ["classes", "style", "name", "disabled", "darkMode", "noCompact", "theme", "photo", "className"];
+var _excluded = ["classes", "style", "name", "disabled", "darkMode", "noCompact", "theme", "photo", "className", "reference"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -24,23 +24,27 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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(_ref) {
-  var classes = _ref.classes,
-      style = _ref.style,
-      name = _ref.name,
-      disabled = _ref.disabled,
-      _ref$darkMode = _ref.darkMode,
-      darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
-      noCompact = _ref.noCompact,
-      theme = _ref.theme,
-      photo = _ref.photo,
-      className = _ref.className,
-      buttonProps = _objectWithoutProperties(_ref, _excluded);
+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(_Button["default"], _extends({
+  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
@@ -53,7 +57,7 @@ function NavAvatarButton(_ref) {
     name: name,
     disabled: disabled,
     style: style && style.avatar
-  }));
+  })));
 }
 
 NavAvatarButton.propTypes = {
@@ -123,7 +127,8 @@ NavAvatarButton.propTypes = {
   photo: _propTypes["default"].string,
 
   /** Pass a name to show two initials. */
-  name: _propTypes["default"].string
+  name: _propTypes["default"].string,
+  reference: _propTypes["default"].func
 };
 var _default = NavAvatarButton;
 exports["default"] = _default;

package/build/NavAvatarButton/styles.js

@@ -25,6 +25,9 @@ var _default = {
         transform: 'translateY(2px)'
       }
     }
+  },
+  container: {
+    display: 'inline-block'
   }
 };
 exports["default"] = _default;

package/build/Pager/Page/__snapshots__/Page.test.js.snap

@@ -16,13 +16,13 @@ Object {
   },
   "page": Object {
     "&:active": Object {
-      "background": "hsl(234 75.4% 12.7% / 0.1)",
+      "background": "rgba(8, 13, 57, 0.1)",
     },
     "&:focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
+      "boxShadow": "0 0 0 8px rgba(8, 13, 57, 0.1)",
     },
     "&:hover": Object {
-      "background": "hsl(234 75.4% 12.7% / 0.05)",
+      "background": "rgba(8, 13, 57, 0.05)",
     },
     "alignItems": "center",
     "background": "transparent",

package/build/SlideDown/SlideDown.js

@@ -111,7 +111,8 @@ function SlideDown(_ref) {
       divider = _ref.divider,
       noPadding = _ref.noPadding,
       disabled = _ref.disabled,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      id = _ref.id;
 
   var _useState = (0, _react.useState)(!!expanded),
       _useState2 = _slicedToArray(_useState, 2),
@@ -144,7 +145,8 @@ function SlideDown(_ref) {
   }, !disabled && {
     onClick: toggleContent
   }, {
-    "data-testid": testId
+    "data-testid": testId,
+    id: id
   }), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     display: "flex",
     justifyContent: !noJustified ? 'between' : null,
@@ -234,7 +236,10 @@ SlideDown.propTypes = {
   disabled: _propTypes["default"].bool,
 
   /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
-  testId: _propTypes["default"].string
+  testId: _propTypes["default"].string,
+
+  /** Id of the component */
+  id: _propTypes["default"].string
 };
 var _default = SlideDown;
 exports["default"] = _default;

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

@@ -17,7 +17,7 @@ Object {
       "boxShadow": "inset 0 0 0 2px rgba(255,255,255,0.2)",
     },
     "&:focus-visible $switch": Object {
-      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+      "boxShadow": "0 0 0 8px rgba(8, 60, 174, 0.3)",
     },
     "&:focus-visible $switch$checked": Object {
       "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",

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

@@ -84,9 +84,9 @@ Object {
   },
   "linkInfo": Object {
     "&:active": Object {
-      "background": "linear-gradient(hsl(221 91.2% 35.7% / 0.2), hsl(221 91.2% 35.7% / 0.2))",
+      "background": "linear-gradient(rgba(8, 60, 174, 0.2), rgba(8, 60, 174, 0.2))",
     },
-    "background": "linear-gradient(hsl(221 91.2% 35.7% / 0.1), hsl(221 91.2% 35.7% / 0.1))",
+    "background": "linear-gradient(rgba(8, 60, 174, 0.1), rgba(8, 60, 174, 0.1))",
     "backgroundRepeat": "no-repeat",
     "color": "#083CAE",
   },

package/build/index.js

@@ -112,6 +112,8 @@ var _context = require("./Tabs/context");
 
 var _Menu = _interopRequireDefault(require("./Menu"));
 
+var _Drawer = _interopRequireDefault(require("./Drawer"));
+
 var _Footer = _interopRequireDefault(require("./Footer"));
 
 var _SightLogo = _interopRequireDefault(require("./SightLogo"));
@@ -192,6 +194,7 @@ module.exports = (_module$exports = {
   toaster: _functions.toaster,
   Footer: _Footer["default"],
   Menu: _Menu["default"],
+  Drawer: _Drawer["default"],
   SightLogo: _SightLogo["default"],
   colors: _colors["default"],
   fonts: _fonts["default"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "3.0.0-beta.66",
+  "version": "3.0.0-beta.68",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",