@occmundial/occ-atomic 3.0.0-beta.5 → 3.0.0-beta.50

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

@@ -1,14 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Tooltip matches the snapshot 1`] = `"<div class=\\"activator false\\"></div>"`;
+exports[`Tooltip matches the snapshot 1`] = `"<div class=\\"activator \\"></div>"`;
 
 exports[`Tooltip styles matches the snapshot 1`] = `
 Object {
   "activator": Object {
     "display": "inline-block",
   },
+  "content": Object {
+    "alignItems": "center",
+    "display": "flex",
+    "gap": "4px",
+    "justifyContent": "center",
+  },
   "dark": Object {
-    "background": "#222222",
+    "background": "#000",
+    "boxShadow": "inset 0 0 0 1px rgba(255,255,255,0.2)",
     "color": "#ffffff",
   },
   "info": Object {
@@ -16,18 +23,27 @@ Object {
     "color": "#5736ab",
   },
   "light": Object {
-    "background": "#ffffff",
+    "&:after": Object {
+      "boxShadow": "inset -2px -2px 0 -1px #EDEDF1",
+    },
+    "background": "#fff",
+    "boxShadow": "inset 0 0 0 1px #EDEDF1",
     "color": "#5736ab",
   },
   "purple": Object {
     "background": "#5736ab",
     "color": "#ffffff",
   },
+  "text": Object {
+    "font": "300 12px/1.5 'OccText', sans-serif",
+    "margin": 0,
+  },
   "tooltip": Object {
     "borderRadius": "4px",
-    "fontSize": "14px",
-    "lineHeight": 1.5,
-    "padding": "16px",
+    "padding": Array [
+      "8px",
+      "12px",
+    ],
   },
 }
 `;

package/build/Tooltip/styles.js

@@ -7,38 +7,60 @@ exports["default"] = void 0;
 
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
+var _colors2 = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _fonts = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
+
+var _styles = require("../Text/styles");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var infoLight = _colors["default"].infoLight,
     infoText = _colors["default"].infoText,
     info = _colors["default"].info,
-    white = _colors["default"].white,
-    grey900 = _colors["default"].grey900;
+    white = _colors["default"].white;
 var _default = {
   activator: {
     display: 'inline-block'
   },
   tooltip: {
-    padding: '16px',
-    borderRadius: '4px',
-    fontSize: '14px',
-    lineHeight: 1.5
+    padding: [_spacing["default"]['size-2'], _spacing["default"]['size-3']],
+    borderRadius: _borderRadius["default"]['br-xs']
+  },
+  content: {
+    display: 'flex',
+    gap: _spacing["default"]['size-1'],
+    alignItems: 'center',
+    justifyContent: 'center'
   },
   info: {
     background: infoLight,
     color: infoText
   },
   dark: {
-    background: grey900,
-    color: white
+    background: _colors2["default"].bg.neutral,
+    color: white,
+    boxShadow: "inset 0 0 0 1px ".concat(_colors2["default"].border.inverse.subtle)
   },
   light: {
-    background: white,
-    color: info
+    background: _colors2["default"].bg.surface["default"],
+    color: info,
+    '&:after': {
+      boxShadow: "inset -2px -2px 0 -1px ".concat(_colors2["default"].border["default"].subtle)
+    },
+    boxShadow: "inset 0 0 0 1px ".concat(_colors2["default"].border["default"].subtle)
   },
   purple: {
     background: info,
     color: white
+  },
+  text: {
+    font: (0, _styles.parseFontValue)(_fonts["default"]['body-x-small']),
+    margin: 0
   }
 };
 exports["default"] = _default;

package/build/index.js

@@ -84,6 +84,10 @@ var _functions = require("./Toaster/functions");
 
 var _Fab = _interopRequireDefault(require("./Fab"));
 
+var _Tab = _interopRequireDefault(require("./Tabs/Tab"));
+
+var _TabContent = _interopRequireDefault(require("./Tabs/TabContent"));
+
 var _NavTab = _interopRequireDefault(require("./NavTab"));
 
 var _NavItem = _interopRequireDefault(require("./NavItem"));
@@ -92,6 +96,10 @@ var _NavIcon = _interopRequireDefault(require("./NavIcon"));
 
 var _NavAside = _interopRequireDefault(require("./NavAside"));
 
+var _Tabs = _interopRequireDefault(require("./Tabs"));
+
+var _context = require("./Tabs/context");
+
 var _Footer = _interopRequireDefault(require("./Footer"));
 
 var _Header = _interopRequireDefault(require("./Header"));
@@ -195,5 +203,10 @@ module.exports = {
   WindowSize: _WindowSize["default"],
   tokens: tokens,
   AtomicProvider: _Provider["default"],
-  Fab: _Fab["default"]
+  Fab: _Fab["default"],
+  Tabs: _Tabs["default"],
+  TabsProviderControlled: _context.TabsProviderControlled,
+  TabsProviderUncontrolled: _context.TabsProviderUncontrolled,
+  Tab: _Tab["default"],
+  TabContent: _TabContent["default"]
 };

package/build/subatomic/grid.js

@@ -12,10 +12,10 @@ var _default = {
   lg: 1200,
   xl: 1500,
   full: '100%',
-  xsGrid: 564,
-  smGrid: 744,
-  mdGrid: 984,
-  lgGrid: 1164,
-  xlGrid: 1464
+  xsGrid: '100%',
+  smGrid: '100%',
+  mdGrid: '100%',
+  lgGrid: 1140,
+  xlGrid: 1440
 };
 exports["default"] = _default;

package/build/tokens/colors.json

@@ -85,6 +85,7 @@
   },
   "alpha": {
     "white": {
+      "0": "rgba(255,255,255,0)",
       "5": "rgba(255,255,255,0.05)",
       "10": "rgba(255,255,255,0.1)",
       "20": "rgba(255,255,255,0.2)",
@@ -137,6 +138,7 @@
       "100": "hsl(234 75.4% 12.7%)"
     },
     "black": {
+      "0": "rgba(0,0,0,0.0)",
       "5": "rgba(0,0,0,0.05)",
       "10": "rgba(0,0,0,0.1)",
       "20": "rgba(0,0,0,0.2)",
@@ -343,7 +345,7 @@
     },
     "info": {
       "bg": "#e3efff",
-      "border": "#e3efff"
+      "border": "#b9d7ff"
     },
     "neutral": {
       "bg": "#000",
@@ -402,7 +404,7 @@
     },
     "info": {
       "bg": "#e3efff",
-      "border": "#e3efff"
+      "border": "#b9d7ff"
     },
     "featured": {
       "border": "rgba(255,255,255,0.2)",
@@ -437,6 +439,12 @@
         "hover": "hsl(221 91.2% 35.7% / 0.1)",
         "active": "hsl(221 91.2% 35.7% / 0.2)"
       }
+    },
+    "white": {
+      "bg": {
+        "hover": "rgba(255,255,255,0.2)",
+        "active": "rgba(255,255,255,0.3)"
+      }
     }
   },
   "nav": {
@@ -463,6 +471,30 @@
       }
     }
   },
+  "avatar": {
+    "bg": {
+      "default": "#E9EEF8",
+      "hover": "#CAD5EE",
+      "active": "#ABBDE4",
+      "disabled": "#EDEDF1",
+      "overlay": {
+        "hover": "hsl(234 75.4% 12.7% / 0.3)",
+        "active": "hsl(234 75.4% 12.7% / 0.4)"
+      }
+    }
+  },
+  "skeleton": {
+    "bg": {
+      "default": {
+        "gradient": "linear-gradient(90deg, rgba(0,0,0,0.0) , rgba(0,0,0,0.05) , rgba(0,0,0,0.0) )",
+        "default": "rgba(0,0,0,0.05)"
+      },
+      "inverse": {
+        "default": "rgba(255,255,255,0.1)",
+        "gradient": "linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.1) , rgba(255,255,255,0) )"
+      }
+    }
+  },
   "bg": {
     "action": {
       "primary": {
@@ -567,7 +599,7 @@
       "subtle": "#d7f6e3"
     },
     "info": {
-      "subtle": "#e3efff"
+      "subtle": "#b9d7ff"
     }
   },
   "text": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "3.0.0-beta.5",
+  "version": "3.0.0-beta.50",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",
@@ -120,5 +120,8 @@
     "roots": [
       "<rootDir>/lib/"
     ]
+  },
+  "volta": {
+    "node": "16.18.0"
   }
 }

package/build/Banner/styles.js

@@ -1,41 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
-
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
-
-var _grid = _interopRequireDefault(require("../subatomic/grid"));
-
-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 = {
-  container: {
-    padding: _spacing["default"].small,
-    backgroundColor: _colors["default"].ink
-  },
-  textBanner: {
-    display: 'inline-block'
-  },
-  textFlex: _defineProperty({
-    textAlign: 'start'
-  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
-    textAlign: 'center'
-  }),
-  iconFlex: _defineProperty({
-    paddingLeft: _spacing["default"].small,
-    paddingTop: _spacing["default"].small
-  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
-    padding: 0
-  }),
-  icon: {
-    cursor: 'pointer'
-  }
-};
-exports["default"] = _default;

package/build/Pager/Break/Break.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var Break = function Break(_ref) {
-  var classes = _ref.classes,
-      label = _ref.label;
-  return /*#__PURE__*/_react["default"].createElement("li", {
-    className: classes.li
-  }, label);
-};
-
-Break.propTypes = {
-  classes: _propTypes["default"].object,
-  label: _propTypes["default"].string
-};
-var _default = Break;
-exports["default"] = _default;

package/build/Pager/Break/Break.test.js

@@ -1,53 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _enzyme = require("enzyme");
-
-var _Break = _interopRequireDefault(require("./Break"));
-
-var _styles = _interopRequireDefault(require("./styles"));
-
-var _index = _interopRequireDefault(require("./index"));
-
-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 reduceClasses = function reduceClasses(prev, curr) {
-  return Object.assign({}, prev, _defineProperty({}, curr, curr));
-};
-
-var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
-describe("Break", function () {
-  it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Break["default"], {
-      classes: classes
-    }));
-    expect(wrapper).toMatchSnapshot();
-  });
-  it('renders the li', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Break["default"], {
-      classes: classes
-    }));
-    expect(wrapper.find('.li').length).toBe(1);
-  });
-  it('renders the label content', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Break["default"], {
-      label: "...",
-      classes: classes
-    }));
-    expect(wrapper.find('.li').text()).toEqual('...');
-  });
-});
-describe("BreakJSS", function () {
-  it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
-    expect(wrapper).toMatchSnapshot();
-  });
-});
-describe("Break styles", function () {
-  it('matches the snapshot', function () {
-    expect(_styles["default"]).toMatchSnapshot();
-  });
-});

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

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Break matches the snapshot 1`] = `ShallowWrapper {}`;
-
-exports[`Break styles matches the snapshot 1`] = `
-Object {
-  "li": Object {
-    "display": "inline-block",
-  },
-}
-`;
-
-exports[`BreakJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Pager/Break/index.js

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