@occmundial/occ-atomic 3.0.0-beta.34 → 3.0.0-beta.35

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.0.0-beta.35](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.34...v3.0.0-beta.35) (2024-07-24)
+
+
+### Bug Fixes
+
+* Change end start tooltip behaviour ([220bcb8](https://github.com/occmundial/occ-atomic/commit/220bcb8c071735ab33eb20817afb5cfcc83106b8))
+* Change svg to floating arrow ([09b1d67](https://github.com/occmundial/occ-atomic/commit/09b1d67810e5b354b3656efc92b623e3e55abc9c))
+* Set min width for end or start and update examples ([65a9f31](https://github.com/occmundial/occ-atomic/commit/65a9f315dc38c011a4563b7726e5bbd4fd2c2725))
+
+
+### Features
+
+* Update tooltip with new design tokens ([1843c88](https://github.com/occmundial/occ-atomic/commit/1843c887fc232adc0b4877b8348777448394395f))
+
 # [3.0.0-beta.34](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.33...v3.0.0-beta.34) (2024-07-22)
 
 

package/build/Tooltip/Tooltip.js

@@ -15,9 +15,15 @@ var _react2 = require("@floating-ui/react");
 
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
+var _colors2 = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
 var _hooks = require("./hooks");
 
-var _colorsArrow;
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _colorsArrow, _borderColors;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -46,8 +52,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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 infoLight = _colors["default"].infoLight,
-    white = _colors["default"].white,
-    grey900 = _colors["default"].grey900,
     info = _colors["default"].info;
 var themes = {
   DARK: 'dark',
@@ -55,7 +59,20 @@ var themes = {
   INFO: 'info',
   PURPLE: 'purple'
 };
-var colorsArrow = (_colorsArrow = {}, _defineProperty(_colorsArrow, themes.DARK, grey900), _defineProperty(_colorsArrow, themes.LIGHT, white), _defineProperty(_colorsArrow, themes.INFO, infoLight), _defineProperty(_colorsArrow, themes.PURPLE, info), _colorsArrow);
+var colorsArrow = (_colorsArrow = {}, _defineProperty(_colorsArrow, themes.DARK, _colors2["default"].bg.neutral), _defineProperty(_colorsArrow, themes.INFO, infoLight), _defineProperty(_colorsArrow, themes.LIGHT, _colors2["default"].bg.surface["default"]), _defineProperty(_colorsArrow, themes.PURPLE, info), _colorsArrow);
+var borderColors = (_borderColors = {}, _defineProperty(_borderColors, themes.DARK, {
+  bg: 'black',
+  border: 'rgba(0, 0, 0, 0.8)'
+}), _defineProperty(_borderColors, themes.LIGHT, {
+  bg: _colors2["default"].border["default"].subtle,
+  border: _colors2["default"].border["default"].subtle
+}), _defineProperty(_borderColors, themes.INFO, {
+  bg: infoLight,
+  border: infoLight
+}), _defineProperty(_borderColors, themes.PURPLE, {
+  bg: info,
+  border: info
+}), _borderColors);
 /** Tooltip component to display messages within a container. */
 
 function Tooltip(_ref) {
@@ -63,7 +80,8 @@ function Tooltip(_ref) {
       openProp = _ref.open,
       children = _ref.children,
       text = _ref.text,
-      theme = _ref.theme,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'purple' : _ref$theme,
       _ref$openOnHover = _ref.openOnHover,
       openOnHover = _ref$openOnHover === void 0 ? false : _ref$openOnHover,
       _ref$closeDelay = _ref.closeDelay,
@@ -79,10 +97,11 @@ function Tooltip(_ref) {
       _ref$fit = _ref.fit,
       fit = _ref$fit === void 0 ? false : _ref$fit,
       _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 220 : _ref$width,
+      width = _ref$width === void 0 ? 'auto' : _ref$width,
       _ref$strategy = _ref.strategy,
       strategy = _ref$strategy === void 0 ? 'absolute' : _ref$strategy,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      icon = _ref.icon;
   var arrowRef = (0, _react.useRef)(null);
 
   var _useOpenTooltipState = (0, _hooks.useOpenTooltipState)(openProp, onChange, closeDelay),
@@ -91,23 +110,44 @@ function Tooltip(_ref) {
       setOpen = _useOpenTooltipState2[1];
 
   var getMiddlewares = (0, _react.useMemo)(function () {
-    var middlewares = [(0, _react2.offset)(16)];
+    var middlewares = [(0, _react2.offset)(function (_ref2) {
+      var rects = _ref2.rects;
+
+      if (placement === 'top-start' || placement === 'bottom-start') {
+        return {
+          crossAxis: rects.reference.width / 2 - 18,
+          mainAxis: 16
+        };
+      } else if (placement === 'top-end' || placement === 'bottom-end') {
+        return {
+          crossAxis: -(rects.reference.width / 2) + 18,
+          mainAxis: 16
+        };
+      }
+
+      return {
+        mainAxis: 16
+      };
+    })];
     showArrow && middlewares.push((0, _react2.arrow)({
       element: arrowRef,
-      padding: 16
+      padding: "".concat(_spacing["default"]['size-2'], " ").concat(_spacing["default"]['size-3'])
     }));
     var sizeMiddleware = (0, _react2.size)({
-      apply: function apply(_ref2) {
-        var elements = _ref2.elements,
-            rects = _ref2.rects,
-            availableWidth = _ref2.availableWidth;
+      apply: function apply(_ref3) {
+        var elements = _ref3.elements,
+            rects = _ref3.rects,
+            availableWidth = _ref3.availableWidth;
         var styles = {};
 
         if (fit) {
           styles.width = "".concat(rects.reference.width, "px");
         } else {
           styles.maxWidth = "".concat(availableWidth, "px");
-          if (width) styles.width = typeof width === 'string' ? width : "".concat(width, "px");else styles.width = '';
+
+          if (width) {
+            styles.width = typeof width === 'string' ? width : "".concat(width, "px");
+          } else styles.width = '';
         }
 
         Object.assign(elements.floating.style, styles);
@@ -141,24 +181,40 @@ function Tooltip(_ref) {
       getReferenceProps = _useInteractions.getReferenceProps,
       getFloatingProps = _useInteractions.getFloatingProps;
 
+  var arrowProps = {
+    strokeWidth: 1,
+    stroke: borderColors[theme].border
+  };
   return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({
     ref: refs.setReference
   }, getReferenceProps(), {
-    className: "".concat(classes.activator, " ").concat(className.hasOwnProperty('activator') && className.activator)
+    className: "".concat(classes.activator, " ").concat(className.hasOwnProperty('activator') ? className.activator : '')
   }), children), /*#__PURE__*/_react["default"].createElement(_react2.FloatingPortal, null, open && /*#__PURE__*/_react["default"].createElement("div", _extends({
-    className: "".concat(classes.tooltip, " ").concat(className.hasOwnProperty('tooltip') && className.tooltip, " ").concat(classes[theme] || classes.purple),
+    className: "".concat(classes.tooltip, " ").concat(className.hasOwnProperty('tooltip') ? className.tooltip : '', " ").concat(classes[theme] || classes.purple),
     ref: refs.setFloating,
     style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
       zIndex: zIndex,
       position: strategy
     })
-  }, getFloatingProps()), text, showArrow && /*#__PURE__*/_react["default"].createElement(_react2.FloatingArrow, {
+  }, getFloatingProps()), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.content
+  }, icon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: icon,
+    width: 12,
+    height: 12
+  }), /*#__PURE__*/_react["default"].createElement("p", {
+    className: classes.text
+  }, text)), showArrow && /*#__PURE__*/_react["default"].createElement(_react2.FloatingArrow, _extends({
+    style: {
+      transform: 'translateY(1px)'
+    },
     ref: arrowRef,
     context: context,
-    fill: colorsArrow[theme] || colorsArrow[themes.PURPLE],
-    width: 14,
-    height: 10
-  }))));
+    fill: colorsArrow[theme] || colorsArrow[themes.PURPLE]
+  }, arrowProps, {
+    width: 20,
+    d: "M0 20C0 20 2.06906 19.9829 5.91817 15.4092C7.49986 13.5236 8.97939 12.3809 10.0002 12.3809C11.0202 12.3809 12.481 13.6451 14.0814 15.5472C17.952 20.1437 20 20 20 20H0Z"
+  })))));
 }
 
 Tooltip.propTypes = {
@@ -204,7 +260,8 @@ Tooltip.propTypes = {
   strategy: _propTypes["default"].oneOf(['absolute', 'fixed']),
 
   /** Callback fired when the Tooltip show state changes. */
-  onChange: _propTypes["default"].func
+  onChange: _propTypes["default"].func,
+  icon: _propTypes["default"].string
 };
 var _default = Tooltip;
 exports["default"] = _default;

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/package.json

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