@gravity-ui/blog-constructor 3.2.0 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [3.3.0](https://github.com/gravity-ui/blog-constructor/compare/v3.2.1...v3.3.0) (2023-05-16)
+
+
+### Features
+
+* add md breackpoint to cta-block ([#45](https://github.com/gravity-ui/blog-constructor/issues/45)) ([e859b0b](https://github.com/gravity-ui/blog-constructor/commit/e859b0b02e80b20eb0b4496e2c4834fb2de74922))
+
+## [3.2.1](https://github.com/gravity-ui/blog-constructor/compare/v3.2.0...v3.2.1) (2023-05-16)
+
+
+### Bug Fixes
+
+* add settings context to add a tag for pagination ([#47](https://github.com/gravity-ui/blog-constructor/issues/47)) ([0856675](https://github.com/gravity-ui/blog-constructor/commit/0856675316425c9a690664a99d30d2af63e116ca))
+
 ## [3.2.0](https://github.com/gravity-ui/blog-constructor/compare/v3.1.1...v3.2.0) (2023-05-15)
 
 

package/build/cjs/blocks/CTA/CTA.css

@@ -8,49 +8,27 @@
   flex-direction: column;
   flex-grow: 1;
   padding: 32px;
-}
-.bc-cta__button {
-  display: flex;
-  padding-bottom: 16px;
+  width: calc(33.3333333333% - (32px / 2));
 }
 .bc-cta__content {
   display: flex;
-  flex-direction: column;
+  flex-flow: row wrap;
+  gap: 16px;
 }
-@media (min-width: 577px) {
+@media (max-width: 769px) {
   .bc-cta__content {
-    display: flex;
-    flex-direction: row;
-  }
-  .bc-cta__button {
-    padding-bottom: 0px;
-  }
-  .bc-cta__button_layout {
-    width: 100%;
-    max-width: 100%;
-    margin-right: 0px;
+    flex-wrap: wrap;
   }
-  .bc-cta__button_layout_2 {
-    width: calc(50% - (16px / 2));
-    max-width: 50%;
-    margin-right: 16px;
+  .bc-cta__card {
+    width: calc((100% / 2) - 16px);
+    flex-grow: 1;
   }
-  .bc-cta__button_layout_2:nth-child(2n) {
-    margin-right: 0px;
-  }
-  .bc-cta__button_layout_3 {
-    width: calc(33.3333333333% - (32px / 3));
-    margin-right: 16px;
-  }
-  .bc-cta__button_layout_3:nth-child(3n) {
-    margin-right: 0px;
-  }
-  .bc-cta__button_layout_4 {
-    width: calc(25% - (48px / 4));
-    max-width: 50%;
-    margin-right: 16px;
+}
+@media (max-width: 577px) {
+  .bc-cta__content {
+    flex-direction: column;
   }
-  .bc-cta__button_layout_4:nth-child(4n) {
-    margin-right: 0px;
+  .bc-cta__card {
+    width: 100%;
   }
 }

package/build/cjs/blocks/CTA/CTA.js

@@ -12,15 +12,7 @@ const paddings_1 = require("../../models/paddings");
 const cn_1 = require("../../utils/cn");
 const common_1 = require("../../utils/common");
 const b = (0, cn_1.block)('cta');
-const MAX_COLUMN_COUNT = 4, MIN_COLUMN_COUNT = 2, DEFAULT_COLUMN_COUNT = 3;
 const CTA = ({ items, paddingTop, paddingBottom }) => {
-    let count = items ? items.length : DEFAULT_COLUMN_COUNT;
-    if (count < MIN_COLUMN_COUNT) {
-        count = MIN_COLUMN_COUNT;
-    }
-    else if (count > MAX_COLUMN_COUNT) {
-        count = MAX_COLUMN_COUNT;
-    }
     /**
      * @deprecated Metrika will be deleted after launch of analyticsEvents
      */
@@ -31,18 +23,15 @@ const CTA = ({ items, paddingTop, paddingBottom }) => {
     return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
             [paddings_1.PaddingsDirections.top]: paddingTop,
             [paddings_1.PaddingsDirections.bottom]: paddingBottom,
-        }, className: b('content'), dataQa: "blog-cta-content" }, items.slice(0, count).map((content, index) => {
+        }, className: b('content'), dataQa: "blog-cta-content" }, items.map((content, index) => {
         var _a;
         const contentData = (0, common_1.updateContentSizes)(content);
         (_a = contentData.links) === null || _a === void 0 ? void 0 : _a.forEach((link) => {
             // eslint-disable-next-line no-not-accumulator-reassign/no-not-accumulator-reassign
             link.metrikaGoals = (0, common_1.getBlogElementMetrika)(metrikaGoal, link.metrikaGoals);
         });
-        return (react_1.default.createElement("div", { key: index, className: b('button', {
-                ['layout']: count,
-            }), "data-qa": "blog-cta-card" },
-            react_1.default.createElement("div", { className: b('card') },
-                react_1.default.createElement(page_constructor_1.Content, Object.assign({}, contentData)))));
+        return (react_1.default.createElement("div", { key: index, className: b('card'), "data-qa": "blog-cta-card" },
+            react_1.default.createElement(page_constructor_1.Content, Object.assign({}, contentData))));
     })));
 };
 exports.CTA = CTA;

package/build/cjs/components/Paginator/Paginator.css

@@ -9,7 +9,6 @@ unpredictable css rules order in build */
 }
 .bc-paginator__link {
   text-decoration: none;
-  pointer-events: none;
   color: var(--yc-color-text-primary);
 }
 .bc-paginator__item {

package/build/cjs/components/Paginator/components/PaginatorItem.js

@@ -27,16 +27,18 @@ exports.PaginatorItem = void 0;
 const react_1 = __importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const LocaleContext_1 = require("../../../contexts/LocaleContext");
+const SettingsContext_1 = require("../../../contexts/SettingsContext");
 const cn_1 = require("../../../utils/cn");
 const common_1 = require("../../../utils/common");
 const b = (0, cn_1.block)('paginator');
 const PaginatorItem = ({ dataKey, mods, content, onClick, loading = false, index, }) => {
     const { locale } = (0, react_1.useContext)(LocaleContext_1.LocaleContext);
+    const { addNavigationLinkForPages } = (0, react_1.useContext)(SettingsContext_1.SettingsContext);
     const urlPath = (0, common_1.getBlogPath)((locale === null || locale === void 0 ? void 0 : locale.pathPrefix) || '');
     const itemKey = Number(dataKey) > 0 ? Number(dataKey) : dataKey;
     const navTag = index > 1 ? `?page=${index}` : '';
     const navigationLink = `${urlPath || ''}${navTag}`;
-    return (react_1.default.createElement(uikit_1.Button, { view: "flat", size: "xl", className: b('item', mods), onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(itemKey), loading: loading && Boolean(mods.active) },
-        react_1.default.createElement("a", { href: navigationLink, className: b('link'), onClick: (event) => event.preventDefault() }, content)));
+    const renderButton = (react_1.default.createElement(uikit_1.Button, { view: "flat", size: "xl", className: b('item', mods), onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(itemKey), loading: loading && Boolean(mods.active) }, content));
+    return (react_1.default.createElement(react_1.Fragment, null, addNavigationLinkForPages ? (react_1.default.createElement("a", { href: navigationLink, className: b('link'), onClick: (event) => event.preventDefault() }, renderButton)) : (react_1.default.createElement(react_1.Fragment, null, renderButton))));
 };
 exports.PaginatorItem = PaginatorItem;

package/build/cjs/constructor/BlogConstructorProvider.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { AnalyticsContextProps } from '@gravity-ui/page-constructor';
 import { DeviceContextProps } from '../contexts/DeviceContext';
 import { RouterContextProps } from '../contexts/RouterContext';
+import { SettingsContextProps } from '../contexts/SettingsContext';
 import { ThemeValueType } from '../contexts/theme/ThemeValueContext';
 import { Locale } from '../models/locale';
 export interface BlogConstructorProviderProps {
@@ -11,6 +12,7 @@ export interface BlogConstructorProviderProps {
     theme?: ThemeValueType;
     device?: DeviceContextProps;
     analytics?: AnalyticsContextProps;
+    settings?: SettingsContextProps;
     children?: React.ReactNode;
 }
 export declare const BlogConstructorProvider: React.FC<BlogConstructorProviderProps>;

package/build/cjs/constructor/BlogConstructorProvider.js

@@ -31,14 +31,16 @@ const DeviceContext_1 = require("../contexts/DeviceContext");
 const LocaleContext_1 = require("../contexts/LocaleContext");
 const MobileContext_1 = require("../contexts/MobileContext");
 const RouterContext_1 = require("../contexts/RouterContext");
+const SettingsContext_1 = require("../contexts/SettingsContext");
 const ThemeValueContext_1 = require("../contexts/theme/ThemeValueContext");
-const BlogConstructorProvider = ({ isMobile, locale = {}, router = {}, theme = constants_1.DEFAULT_THEME, device = {}, analytics = {}, children, }) => {
+const BlogConstructorProvider = ({ isMobile, locale = {}, router = {}, theme = constants_1.DEFAULT_THEME, device = {}, analytics = {}, settings = {}, children, }) => {
     const context = [
         react_1.default.createElement(ThemeValueContext_1.ThemeValueContext.Provider, { value: { themeValue: theme }, key: "theme-context" }),
         react_1.default.createElement(LocaleContext_1.LocaleContext.Provider, { value: { locale }, key: "locale-context" }),
         react_1.default.createElement(RouterContext_1.RouterContext.Provider, { value: router, key: "router-context" }),
         react_1.default.createElement(MobileContext_1.MobileContext.Provider, { value: Boolean(isMobile), key: "is-mobile-context" }),
         react_1.default.createElement(DeviceContext_1.DeviceContext.Provider, { value: device, key: "device-context" }),
+        react_1.default.createElement(SettingsContext_1.SettingsContext.Provider, { value: settings, key: "settings-context" }),
         react_1.default.createElement(page_constructor_1.AnalyticsContext.Provider, { value: analytics, key: "analytics-context" }),
     ].reduceRight((prev, provider) => react_1.default.cloneElement(provider, {}, prev), children);
     return react_1.default.createElement(react_1.Fragment, null, context);

package/build/cjs/contexts/SettingsContext.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface SettingsContextProps {
+    addNavigationLinkForPages?: boolean;
+}
+export declare const SettingsContext: React.Context<SettingsContextProps>;

package/build/cjs/contexts/SettingsContext.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsContext = void 0;
+const react_1 = __importDefault(require("react"));
+exports.SettingsContext = react_1.default.createContext({});

package/build/esm/blocks/CTA/CTA.css

@@ -8,49 +8,27 @@
   flex-direction: column;
   flex-grow: 1;
   padding: 32px;
-}
-.bc-cta__button {
-  display: flex;
-  padding-bottom: 16px;
+  width: calc(33.3333333333% - (32px / 2));
 }
 .bc-cta__content {
   display: flex;
-  flex-direction: column;
+  flex-flow: row wrap;
+  gap: 16px;
 }
-@media (min-width: 577px) {
+@media (max-width: 769px) {
   .bc-cta__content {
-    display: flex;
-    flex-direction: row;
-  }
-  .bc-cta__button {
-    padding-bottom: 0px;
-  }
-  .bc-cta__button_layout {
-    width: 100%;
-    max-width: 100%;
-    margin-right: 0px;
+    flex-wrap: wrap;
   }
-  .bc-cta__button_layout_2 {
-    width: calc(50% - (16px / 2));
-    max-width: 50%;
-    margin-right: 16px;
+  .bc-cta__card {
+    width: calc((100% / 2) - 16px);
+    flex-grow: 1;
   }
-  .bc-cta__button_layout_2:nth-child(2n) {
-    margin-right: 0px;
-  }
-  .bc-cta__button_layout_3 {
-    width: calc(33.3333333333% - (32px / 3));
-    margin-right: 16px;
-  }
-  .bc-cta__button_layout_3:nth-child(3n) {
-    margin-right: 0px;
-  }
-  .bc-cta__button_layout_4 {
-    width: calc(25% - (48px / 4));
-    max-width: 50%;
-    margin-right: 16px;
+}
+@media (max-width: 577px) {
+  .bc-cta__content {
+    flex-direction: column;
   }
-  .bc-cta__button_layout_4:nth-child(4n) {
-    margin-right: 0px;
+  .bc-cta__card {
+    width: 100%;
   }
 }

package/build/esm/blocks/CTA/CTA.js

@@ -7,15 +7,7 @@ import { block } from '../../utils/cn';
 import { getBlogElementMetrika, updateContentSizes } from '../../utils/common';
 import './CTA.css';
 const b = block('cta');
-const MAX_COLUMN_COUNT = 4, MIN_COLUMN_COUNT = 2, DEFAULT_COLUMN_COUNT = 3;
 export const CTA = ({ items, paddingTop, paddingBottom }) => {
-    let count = items ? items.length : DEFAULT_COLUMN_COUNT;
-    if (count < MIN_COLUMN_COUNT) {
-        count = MIN_COLUMN_COUNT;
-    }
-    else if (count > MAX_COLUMN_COUNT) {
-        count = MAX_COLUMN_COUNT;
-    }
     /**
      * @deprecated Metrika will be deleted after launch of analyticsEvents
      */
@@ -26,17 +18,14 @@ export const CTA = ({ items, paddingTop, paddingBottom }) => {
     return (React.createElement(Wrapper, { paddings: {
             [PaddingsDirections.top]: paddingTop,
             [PaddingsDirections.bottom]: paddingBottom,
-        }, className: b('content'), dataQa: "blog-cta-content" }, items.slice(0, count).map((content, index) => {
+        }, className: b('content'), dataQa: "blog-cta-content" }, items.map((content, index) => {
         var _a;
         const contentData = updateContentSizes(content);
         (_a = contentData.links) === null || _a === void 0 ? void 0 : _a.forEach((link) => {
             // eslint-disable-next-line no-not-accumulator-reassign/no-not-accumulator-reassign
             link.metrikaGoals = getBlogElementMetrika(metrikaGoal, link.metrikaGoals);
         });
-        return (React.createElement("div", { key: index, className: b('button', {
-                ['layout']: count,
-            }), "data-qa": "blog-cta-card" },
-            React.createElement("div", { className: b('card') },
-                React.createElement(Content, Object.assign({}, contentData)))));
+        return (React.createElement("div", { key: index, className: b('card'), "data-qa": "blog-cta-card" },
+            React.createElement(Content, Object.assign({}, contentData))));
     })));
 };

package/build/esm/components/Paginator/Paginator.css

@@ -9,7 +9,6 @@ unpredictable css rules order in build */
 }
 .bc-paginator__link {
   text-decoration: none;
-  pointer-events: none;
   color: var(--yc-color-text-primary);
 }
 .bc-paginator__item {

package/build/esm/components/Paginator/components/PaginatorItem.js

@@ -1,16 +1,18 @@
-import React, { useContext } from 'react';
+import React, { Fragment, useContext } from 'react';
 import { Button } from '@gravity-ui/uikit';
 import { LocaleContext } from '../../../contexts/LocaleContext';
+import { SettingsContext } from '../../../contexts/SettingsContext';
 import { block } from '../../../utils/cn';
 import { getBlogPath } from '../../../utils/common';
 import '../Paginator.css';
 const b = block('paginator');
 export const PaginatorItem = ({ dataKey, mods, content, onClick, loading = false, index, }) => {
     const { locale } = useContext(LocaleContext);
+    const { addNavigationLinkForPages } = useContext(SettingsContext);
     const urlPath = getBlogPath((locale === null || locale === void 0 ? void 0 : locale.pathPrefix) || '');
     const itemKey = Number(dataKey) > 0 ? Number(dataKey) : dataKey;
     const navTag = index > 1 ? `?page=${index}` : '';
     const navigationLink = `${urlPath || ''}${navTag}`;
-    return (React.createElement(Button, { view: "flat", size: "xl", className: b('item', mods), onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(itemKey), loading: loading && Boolean(mods.active) },
-        React.createElement("a", { href: navigationLink, className: b('link'), onClick: (event) => event.preventDefault() }, content)));
+    const renderButton = (React.createElement(Button, { view: "flat", size: "xl", className: b('item', mods), onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(itemKey), loading: loading && Boolean(mods.active) }, content));
+    return (React.createElement(Fragment, null, addNavigationLinkForPages ? (React.createElement("a", { href: navigationLink, className: b('link'), onClick: (event) => event.preventDefault() }, renderButton)) : (React.createElement(Fragment, null, renderButton))));
 };

package/build/esm/constructor/BlogConstructorProvider.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { AnalyticsContextProps } from '@gravity-ui/page-constructor';
 import { DeviceContextProps } from '../contexts/DeviceContext';
 import { RouterContextProps } from '../contexts/RouterContext';
+import { SettingsContextProps } from '../contexts/SettingsContext';
 import { ThemeValueType } from '../contexts/theme/ThemeValueContext';
 import { Locale } from '../models/locale';
 export interface BlogConstructorProviderProps {
@@ -11,6 +12,7 @@ export interface BlogConstructorProviderProps {
     theme?: ThemeValueType;
     device?: DeviceContextProps;
     analytics?: AnalyticsContextProps;
+    settings?: SettingsContextProps;
     children?: React.ReactNode;
 }
 export declare const BlogConstructorProvider: React.FC<BlogConstructorProviderProps>;

package/build/esm/constructor/BlogConstructorProvider.js

@@ -5,14 +5,16 @@ import { DeviceContext } from '../contexts/DeviceContext';
 import { LocaleContext } from '../contexts/LocaleContext';
 import { MobileContext } from '../contexts/MobileContext';
 import { RouterContext } from '../contexts/RouterContext';
+import { SettingsContext } from '../contexts/SettingsContext';
 import { ThemeValueContext } from '../contexts/theme/ThemeValueContext';
-export const BlogConstructorProvider = ({ isMobile, locale = {}, router = {}, theme = DEFAULT_THEME, device = {}, analytics = {}, children, }) => {
+export const BlogConstructorProvider = ({ isMobile, locale = {}, router = {}, theme = DEFAULT_THEME, device = {}, analytics = {}, settings = {}, children, }) => {
     const context = [
         React.createElement(ThemeValueContext.Provider, { value: { themeValue: theme }, key: "theme-context" }),
         React.createElement(LocaleContext.Provider, { value: { locale }, key: "locale-context" }),
         React.createElement(RouterContext.Provider, { value: router, key: "router-context" }),
         React.createElement(MobileContext.Provider, { value: Boolean(isMobile), key: "is-mobile-context" }),
         React.createElement(DeviceContext.Provider, { value: device, key: "device-context" }),
+        React.createElement(SettingsContext.Provider, { value: settings, key: "settings-context" }),
         React.createElement(AnalyticsContext.Provider, { value: analytics, key: "analytics-context" }),
     ].reduceRight((prev, provider) => React.cloneElement(provider, {}, prev), children);
     return React.createElement(Fragment, null, context);

package/build/esm/contexts/SettingsContext.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface SettingsContextProps {
+    addNavigationLinkForPages?: boolean;
+}
+export declare const SettingsContext: React.Context<SettingsContextProps>;

package/build/esm/contexts/SettingsContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const SettingsContext = React.createContext({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/blog-constructor",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Gravity UI Blog Constructor",
   "license": "MIT",
   "repository": {