@megafon/ui-core 6.0.0 → 6.1.0

package/dist/lib/components/Calendar/components/Month/Month.css

@@ -79,3 +79,57 @@ svg.mfui-month__arrow_disabled {
   cursor: default;
   opacity: 0.5;
 }
+.mfui-month_modern {
+  width: 344px;
+  padding: 0 0 24px;
+}
+.mfui-month_modern .mfui-month__header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 328px;
+  margin-bottom: 16px;
+  text-transform: capitalize;
+}
+.mfui-month_modern .mfui-month__title {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  width: 224px;
+  margin: 0 auto;
+  text-align: center;
+}
+.mfui-month_modern .mfui-month__weekday-labels {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  width: 328px;
+  padding-bottom: 0;
+  border-bottom: none;
+  -webkit-column-gap: 8px;
+     -moz-column-gap: 8px;
+          column-gap: 8px;
+}
+.mfui-month_modern .mfui-month__weekday {
+  width: 20px;
+  height: 24px;
+  margin: 0 auto;
+  color: var(--spbSky3);
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 24px;
+  text-align: center;
+  text-transform: capitalize;
+}
+.mfui-month_modern .mfui-month__days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  width: 328px;
+  margin-top: 10px;
+  -webkit-column-gap: 0;
+     -moz-column-gap: 0;
+          column-gap: 0;
+  row-gap: 0;
+}

package/dist/lib/components/Calendar/components/Month/Month.d.ts

@@ -20,6 +20,7 @@ export interface IMonthProps {
     weekdayLabels: string[];
     goToPreviousMonth: () => void;
     goToNextMonth: () => void;
+    isModern?: boolean;
 }
 declare const Month: React.FC<IMonthProps>;
 export default Month;

package/dist/lib/components/Calendar/components/Month/Month.js

@@ -50,7 +50,9 @@ var Month = function Month(_ref) {
       weekdayLabels = _ref.weekdayLabels,
       goToPreviousMonth = _ref.goToPreviousMonth,
       goToNextMonth = _ref.goToNextMonth,
-      children = _ref.children;
+      children = _ref.children,
+      _ref$isModern = _ref.isModern,
+      isModern = _ref$isModern === void 0 ? false : _ref$isModern;
 
   var handleArrowLeftClick = function handleArrowLeftClick(e) {
     if ((0, _uiHelpers.checkEventIsClickOrEnterPress)(e)) {
@@ -71,10 +73,12 @@ var Month = function Month(_ref) {
   };
 
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    className: cn()
+    className: cn({
+      modern: isModern
+    })
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('header')
-  }, /*#__PURE__*/_react["default"].createElement(ArrowLeft, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowLeft), {
+  }, !isModern && /*#__PURE__*/_react["default"].createElement(ArrowLeft, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowLeft), {
     role: "button",
     tabIndex: getTabIndex(!isPrevMonthDisabled),
     className: cn('arrow', {
@@ -84,7 +88,7 @@ var Month = function Month(_ref) {
     onClick: handleArrowLeftClick
   })), /*#__PURE__*/_react["default"].createElement("span", {
     className: cn('title')
-  }, "".concat(monthLabel, " ").concat(year)), /*#__PURE__*/_react["default"].createElement(ArrowRight, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowRight), {
+  }, "".concat(monthLabel, " ").concat(year)), !isModern && /*#__PURE__*/_react["default"].createElement(ArrowRight, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowRight), {
     role: "button",
     tabIndex: getTabIndex(!isNextMonthDisabled),
     className: cn('arrow', {
@@ -116,7 +120,8 @@ Month.propTypes = {
   monthLabel: _propTypes["default"].string.isRequired,
   weekdayLabels: _propTypes["default"].arrayOf(_propTypes["default"].string.isRequired).isRequired,
   goToPreviousMonth: _propTypes["default"].func.isRequired,
-  goToNextMonth: _propTypes["default"].func.isRequired
+  goToNextMonth: _propTypes["default"].func.isRequired,
+  isModern: _propTypes["default"].bool
 };
 var _default = Month;
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "files": [
     "dist",
     "styles"
@@ -50,7 +50,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^2.26.0",
+    "@megafon/ui-icons": "^2.27.0",
     "@svgr/core": "^2.4.1",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
@@ -99,5 +99,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "87a58e14d29f67b49c1b97a553c61355ece53ece"
+  "gitHead": "95b986f266f6dbbe074afdadf3164d249b58140a"
 }

package/styles/base.less

@@ -57,7 +57,7 @@
 @contentHorizontalIndentDesktopMU: 80px;
 @contentVerticalIndentDesktop: 96px;
 @contentVerticalIndentMobileB: 72px;
-@contentVerticalIndentMobileSM: 48px;
+@contentVerticalIndentMobileSM: 56px;
 @maxContentWidth: 1440px;
 
 // TRANSITIONS