@gravity-ui/page-constructor 1.17.0 → 1.18.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.18.1](https://github.com/gravity-ui/page-constructor/compare/v1.18.0...v1.18.1) (2023-02-28)
+
+
+### Bug Fixes
+
+* add mixin for navigation item and refactor ([#179](https://github.com/gravity-ui/page-constructor/issues/179)) ([3709fcd](https://github.com/gravity-ui/page-constructor/commit/3709fcdcaa2149ed287fb9ef0250dfca1181c842))
+
+## [1.18.0](https://github.com/gravity-ui/page-constructor/compare/v1.17.0...v1.18.0) (2023-02-28)
+
+
+### Features
+
+* monochrome mixin moved from 'Button.css' to 'mixins.css' ([#173](https://github.com/gravity-ui/page-constructor/issues/173)) ([6bb35cf](https://github.com/gravity-ui/page-constructor/commit/6bb35cfea50f7c62682404da02f594dd4f90a011))
+
 ## [1.17.0](https://github.com/gravity-ui/page-constructor/compare/v1.16.4...v1.17.0) (2023-02-28)
 
 

package/build/cjs/components/Button/Button.css

@@ -1,3 +1,5 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
 .pc-button-block__content {
   display: flex;
   align-items: center;

package/build/cjs/navigation/components/NavigationItem/NavigationItem.js

@@ -2,14 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const utils_1 = require("../../../utils");
 const models_1 = require("../../../models");
 const SocialIcon_1 = tslib_1.__importDefault(require("../SocialIcon/SocialIcon"));
 const NavigationButton_1 = require("./components/NavigationButton/NavigationButton");
 const NavigationDropdown_1 = require("./components/NavigationDropdown/NavigationDropdown");
 const NavigationLink_1 = require("./components/NavigationLink/NavigationLink");
 const GithubStars_1 = require("./components/GithubStars/GithubStars");
-const b = (0, utils_1.block)('navigation-item');
 //todo: add types support form component in map
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const NavigationItemsMap = {
@@ -23,7 +21,7 @@ const NavigationItem = (_a) => {
     var { data, className } = _a, props = tslib_1.__rest(_a, ["data", "className"]);
     const { type = models_1.NavigationItemType.Link } = data;
     const Component = NavigationItemsMap[type];
-    const componentProps = (0, react_1.useMemo)(() => (Object.assign(Object.assign({ className: b(null, className) }, data), props)), [className, data, props]);
+    const componentProps = (0, react_1.useMemo)(() => (Object.assign(Object.assign({ className }, data), props)), [className, data, props]);
     return react_1.default.createElement(Component, Object.assign({}, componentProps));
 };
 exports.default = NavigationItem;

package/build/cjs/navigation/components/NavigationItem/components/GithubStars/GithubStars.css

@@ -1,4 +1,8 @@
 .pc-github-stars {
+  position: relative;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
   display: flex;
   align-items: center;
   height: 100%;

package/build/cjs/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.css

@@ -1,4 +1,10 @@
 .pc-navigation-dropdown {
+  position: relative;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.pc-navigation-dropdown__arrow {
   margin-left: 7px;
   color: var(--yc-color-text-secondary);
 }

package/build/cjs/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.js

@@ -10,10 +10,10 @@ const utils_2 = require("../../../../../components/Media/Image/utils");
 const b = (0, utils_1.block)('navigation-dropdown');
 const TOGGLE_ARROW_SIZE = 12;
 const NavigationDropdown = (_a) => {
-    var { text, icon, isOpened } = _a, props = tslib_1.__rest(_a, ["text", "icon", "isOpened"]);
+    var { text, icon, isOpened, className } = _a, props = tslib_1.__rest(_a, ["text", "icon", "isOpened", "className"]);
     const iconData = icon && (0, utils_2.getMediaImage)(icon);
-    return (react_1.default.createElement("span", Object.assign({}, props),
+    return (react_1.default.createElement("span", Object.assign({}, props, { className: b(null, className) }),
         react_1.default.createElement(ContentWrapper_1.ContentWrapper, { text: text, icon: iconData }),
-        react_1.default.createElement(components_1.ToggleArrow, { className: b(), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isOpened })));
+        react_1.default.createElement(components_1.ToggleArrow, { className: b('arrow'), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isOpened })));
 };
 exports.NavigationDropdown = NavigationDropdown;

package/build/cjs/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.css

@@ -5,6 +5,10 @@ unpredictable css rules order in build */
   color: inherit;
   text-decoration: none;
   outline: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
 }
 .utilityfocus .pc-navigation-link:focus {
   outline: 2px solid #ffdb4d;

package/build/esm/components/Button/Button.css

@@ -1,3 +1,5 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
 .pc-button-block__content {
   display: flex;
   align-items: center;

package/build/esm/navigation/components/NavigationItem/NavigationItem.d.ts

@@ -1,6 +1,5 @@
 import React, { MouseEventHandler } from 'react';
 import { NavigationItemData } from '../../../models';
-import './NavigationItem.css';
 export interface NavigationItemProps {
     data: NavigationItemData;
     className?: string;

package/build/esm/navigation/components/NavigationItem/NavigationItem.js

@@ -1,14 +1,11 @@
 import { __rest } from "tslib";
 import React, { useMemo } from 'react';
-import { block } from '../../../utils';
 import { NavigationItemType } from '../../../models';
 import SocialIcon from '../SocialIcon/SocialIcon';
 import { NavigationButton } from './components/NavigationButton/NavigationButton';
 import { NavigationDropdown } from './components/NavigationDropdown/NavigationDropdown';
 import { NavigationLink } from './components/NavigationLink/NavigationLink';
 import { GithubStars } from './components/GithubStars/GithubStars';
-import './NavigationItem.css';
-const b = block('navigation-item');
 //todo: add types support form component in map
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const NavigationItemsMap = {
@@ -22,7 +19,7 @@ const NavigationItem = (_a) => {
     var { data, className } = _a, props = __rest(_a, ["data", "className"]);
     const { type = NavigationItemType.Link } = data;
     const Component = NavigationItemsMap[type];
-    const componentProps = useMemo(() => (Object.assign(Object.assign({ className: b(null, className) }, data), props)), [className, data, props]);
+    const componentProps = useMemo(() => (Object.assign(Object.assign({ className }, data), props)), [className, data, props]);
     return React.createElement(Component, Object.assign({}, componentProps));
 };
 export default NavigationItem;

package/build/esm/navigation/components/NavigationItem/components/GithubStars/GithubStars.css

@@ -1,4 +1,8 @@
 .pc-github-stars {
+  position: relative;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
   display: flex;
   align-items: center;
   height: 100%;

package/build/esm/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.css

@@ -1,4 +1,10 @@
 .pc-navigation-dropdown {
+  position: relative;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.pc-navigation-dropdown__arrow {
   margin-left: 7px;
   color: var(--yc-color-text-secondary);
 }

package/build/esm/navigation/components/NavigationItem/components/NavigationDropdown/NavigationDropdown.js

@@ -8,9 +8,9 @@ import './NavigationDropdown.css';
 const b = block('navigation-dropdown');
 const TOGGLE_ARROW_SIZE = 12;
 export const NavigationDropdown = (_a) => {
-    var { text, icon, isOpened } = _a, props = __rest(_a, ["text", "icon", "isOpened"]);
+    var { text, icon, isOpened, className } = _a, props = __rest(_a, ["text", "icon", "isOpened", "className"]);
     const iconData = icon && getMediaImage(icon);
-    return (React.createElement("span", Object.assign({}, props),
+    return (React.createElement("span", Object.assign({}, props, { className: b(null, className) }),
         React.createElement(ContentWrapper, { text: text, icon: iconData }),
-        React.createElement(ToggleArrow, { className: b(), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isOpened })));
+        React.createElement(ToggleArrow, { className: b('arrow'), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isOpened })));
 };

package/build/esm/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.css

@@ -5,6 +5,10 @@ unpredictable css rules order in build */
   color: inherit;
   text-decoration: none;
   outline: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
 }
 .utilityfocus .pc-navigation-link:focus {
   outline: 2px solid #ffdb4d;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.17.0",
+  "version": "1.18.1",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/styles/mixins.scss

@@ -480,3 +480,13 @@ unpredictable css rules order in build */
         color: var(--yc-color-text-link);
     }
 }
+
+@mixin monochromeButton() {
+    --yc-button-background-color: var(--pc-monochrome-button-background-color);
+    --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
+    color: var(--pc-monochrome-button-color);
+
+    &:hover {
+        color: var(--pc-monochrome-button-color);
+    }
+}

package/build/cjs/navigation/components/NavigationItem/NavigationItem.css

@@ -1,6 +0,0 @@
-.pc-navigation-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-}

package/build/esm/navigation/components/NavigationItem/NavigationItem.css

@@ -1,6 +0,0 @@
-.pc-navigation-item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-}