@megafon/ui-core 3.0.0-beta.3 → 3.0.0-beta.7

package/dist/lib/components/Tooltip/Tooltip.js

@@ -79,6 +79,7 @@ var Tooltip = function Tooltip(_ref) {
       arrowClassName = _ref$classes.arrow,
       contentClassName = _ref$classes.content,
       contentShadowClassName = _ref$classes.contentShadow,
+      dataAttrs = _ref.dataAttrs,
       onOpen = _ref.onOpen,
       onClose = _ref.onClose;
   var currentTrigger = triggerElement.current;
@@ -241,7 +242,7 @@ var Tooltip = function Tooltip(_ref) {
 
     return undefined;
   }, [triggerEventName, isOpen, currentTrigger, handleOutsideEvent, handleClick]);
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       paddings: paddings,
       open: isOpen
@@ -256,6 +257,9 @@ var Tooltip = function Tooltip(_ref) {
     className: cn('arrow-shadow'),
     style: styles.arrow
   }), /*#__PURE__*/_react["default"].createElement(_Tile["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content
+    },
     className: cn('content', [contentClassName])
   }, children), /*#__PURE__*/_react["default"].createElement(_Tile["default"], {
     shadowLevel: "high",
@@ -298,6 +302,10 @@ Tooltip.propTypes = {
     content: _propTypes["default"].string,
     contentShadow: _propTypes["default"].string
   }),
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    content: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
   onOpen: _propTypes["default"].func,
   onClose: _propTypes["default"].func
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.0-beta.7",
   "files": [
     "dist",
     "styles"
@@ -20,6 +20,7 @@
   "license": "MIT",
   "scripts": {
     "build": "gulp build",
+    "cleanDist": "rm -rf dist styles",
     "coverage": "yarn coverage:unit",
     "coverage:unit": "jest --ci --collectCoverage --coverageDirectory=coverage",
     "typecheck": "tsc --noEmit -p .",
@@ -53,7 +54,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^1.0.0-beta.2",
+    "@megafon/ui-icons": "^1.0.0-beta.4",
     "@svgr/core": "^2.4.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@types/enzyme": "^3.10.5",
@@ -85,7 +86,7 @@
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@datepicker-react/hooks": "^2.7.0",
-    "@megafon/ui-helpers": "^2.0.0-beta.2",
+    "@megafon/ui-helpers": "^2.0.0-beta.4",
     "@popperjs/core": "^2.5.3",
     "core-js": "^3.6.4",
     "date-fns": "^2.16.1",
@@ -96,5 +97,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "c7d00f10bbf88ff8049558ee9b7fbe6cb9691547"
+  "gitHead": "29a52b2d41115e8a40731d91a89d88c3e3fd4e9e"
 }

package/styles/base.less

@@ -1,63 +1,4 @@
-:root {
-    // Basic Colors
-    --green: #00B956;
-    --purple: #731982;
-    --base: #FFFFFF;
-    --content: #333333;
-    --spbSky0: #F6F6F6;
-    --spbSky1: #EDEDED;
-    --spbSky2: #D8D8D8;
-    --spbSky3: #999999;
-
-    // Secondary Colors
-    --warmRedC: #EB5A40;
-    --137C: #FFA717;
-    --311C: #5BD9E5;
-    --reflexBlue: #444189;
-
-    // System Colors
-    --fury: #F62434;
-    --systemBlue: #34AAF2;
-    --background: #FFFFFF;
-    --buttonHoverGreen: #10E272;
-    --buttonhoverPurple: #534455;
-    --buttonDown: #404D46;
-
-    // Gradients
-    --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
-    --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
-    --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
-
-    // Static
-    --STCWhite: #FFFFFF;
-    --STCBlack: #333333;
-
-    // Static Opacity
-    --STCWhite5: #FFFFFF0D;
-    --STCWhite10: #FFFFFF1A;
-    --STCWhite20: #FFFFFF33;
-    --STCWhite50: #FFFFFF80;
-    --STCBlack5: #3333330D;
-    --STCBlack10: #3333331A;
-    --STCBlack20: #33333333;
-    --STCBlack50: #33333380;
-
-    // Soft (new)
-    --green80: #0CDC78;
-    --green20: #DDFFEC;
-    --purple80: #AA67C1;
-    --purple20: #FFEEFF;
-    --warmRedC80: #FF765D;
-    --warmRedC20: #FFCFC7;
-    --137C80: #FFB945;
-    --137C20: #FFEDD1;
-    --311C80: #62E3FF;
-    --311C20: #E1FAFF;
-    --reflexBlue80: #554FC9;
-    --reflexBlue20: #EBEAFF;
-    --fury80: #F8505D;
-    --fury20: #FFC5C9;
-}
+@import (reference) 'colors.css';
 
 // BREAKPOINTS
 @mobileSmallEnd:      479px;

package/styles/colors.css

@@ -0,0 +1,60 @@
+:root {
+    /* Basic Colors */
+    --brandGreen: #00B956;
+    --beandPurple: #731982;
+    --base: #FFFFFF;
+    --content: #333333;
+    --spbSky0: #F6F6F6;
+    --spbSky1: #EDEDED;
+    --spbSky2: #D8D8D8;
+    --spbSky3: #999999;
+
+    /* Secondary Colors */
+    --warmRedC: #EB5A40;
+    --137C: #FFA717;
+    --311C: #5BD9E5;
+    --reflexBlue: #444189;
+
+    /* System Colors */
+    --fury: #F62434;
+    --systemBlue: #34AAF2;
+    --background: #FFFFFF;
+    --buttonHoverGreen: #10E272;
+    --buttonhoverPurple: #534455;
+    --buttonDown: #404D46;
+
+    /* Gradients */
+    --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
+    --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
+    --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
+
+    /* Static */
+    --stcWhite: #FFFFFF;
+    --stcBlack: #333333;
+
+    /* Static Opacity */
+    --stcWhite5: #FFFFFF0D;
+    --stcWhite10: #FFFFFF1A;
+    --stcWhite20: #FFFFFF33;
+    --stcWhite50: #FFFFFF80;
+    --stcBlack5: #3333330D;
+    --stcBlack10: #3333331A;
+    --stcBlack20: #33333333;
+    --stcBlack50: #33333380;
+
+    /* Soft (new) */
+    --brandGreen80: #0CDC78;
+    --brandGreen20: #DDFFEC;
+    --brandPurple80: #AA67C1;
+    --brandPurple20: #FFEEFF;
+    --warmRedC80: #FF765D;
+    --warmRedC20: #FFCFC7;
+    --137C80: #FFB945;
+    --137C20: #FFEDD1;
+    --311C80: #62E3FF;
+    --311C20: #E1FAFF;
+    --reflexBlue80: #554FC9;
+    --reflexBlue20: #EBEAFF;
+    --fury80: #F8505D;
+    --fury20: #FFC5C9;
+}

package/styles/colorsDark.css

@@ -0,0 +1,62 @@
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* Basic Colors */
+        --brandGreen: #00B956;
+        --brandPurple: #731982;
+        --base: #333333;
+        --content: #FFFFFF;
+        --spbSky0: #3D3D3D;
+        --spbSky1: #454545;
+        --spbSky2: #595959;
+        --spbSky3: #999999;
+
+        /* Secondary Colors */
+        --warmRedC: #EB5A40;
+        --137C: #FFA717;
+        --311C: #5BD9E5;
+        --reflexBlue: #444189;
+
+        /* System Colors */
+        --fury: #F62434;
+        --systemBlue: #34AAF2;
+        --background: #1F1F1F;
+        --buttonHoverGreen: #10E272;
+        --buttonhoverPurple: #534455;
+        --buttonDown: #404D46;
+
+        /* Gradients */
+        --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
+        --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
+        --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
+
+        /* Static */
+        --stcWhite: #FFFFFF;
+        --stcBlack: #333333;
+
+        /* Static Opacity */
+        --stcWhite5: #FFFFFF0D;
+        --stcWhite10: #FFFFFF1A;
+        --stcWhite20: #FFFFFF33;
+        --stcWhite50: #FFFFFF80;
+        --stcBlack5: #3333330D;
+        --stcBlack10: #3333331A;
+        --stcBlack20: #33333333;
+        --stcBlack50: #33333380;
+
+        /* Soft (new) */
+        --brandGreen80: #0CDC78;
+        --brandGreen20: #DDFFEC;
+        --brandPurple80: #AA67C1;
+        --brandPurple20: #FFEEFF;
+        --warmRedC80: #FF765D;
+        --warmRedC20: #FFCFC7;
+        --137C80: #FFB945;
+        --137C20: #FFEDD1;
+        --311C80: #62E3FF;
+        --311C20: #E1FAFF;
+        --reflexBlue80: #554FC9;
+        --reflexBlue20: #EBEAFF;
+        --fury80: #F8505D;
+        --fury20: #FFC5C9;
+    }
+}

package/styles/base.css

@@ -1,54 +0,0 @@
-:root {
-  --green: #00B956;
-  --purple: #731982;
-  --base: #FFFFFF;
-  --content: #333333;
-  --spbSky0: #F6F6F6;
-  --spbSky1: #EDEDED;
-  --spbSky2: #D8D8D8;
-  --spbSky3: #999999;
-  --warmRedC: #EB5A40;
-  --137C: #FFA717;
-  --311C: #5BD9E5;
-  --reflexBlue: #444189;
-  --fury: #F62434;
-  --systemBlue: #34AAF2;
-  --background: #FFFFFF;
-  --buttonHoverGreen: #10E272;
-  --buttonhoverPurple: #534455;
-  --buttonDown: #404D46;
-  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
-  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
-  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
-  --STCWhite: #FFFFFF;
-  --STCBlack: #333333;
-  --STCWhite5: #FFFFFF0D;
-  --STCWhite10: #FFFFFF1A;
-  --STCWhite20: #FFFFFF33;
-  --STCWhite50: #FFFFFF80;
-  --STCBlack5: #3333330D;
-  --STCBlack10: #3333331A;
-  --STCBlack20: #33333333;
-  --STCBlack50: #33333380;
-  --green80: #0CDC78;
-  --green20: #DDFFEC;
-  --purple80: #AA67C1;
-  --purple20: #FFEEFF;
-  --warmRedC80: #FF765D;
-  --warmRedC20: #FFCFC7;
-  --137C80: #FFB945;
-  --137C20: #FFEDD1;
-  --311C80: #62E3FF;
-  --311C20: #E1FAFF;
-  --reflexBlue80: #554FC9;
-  --reflexBlue20: #EBEAFF;
-  --fury80: #F8505D;
-  --fury20: #FFC5C9;
-}
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}