@gravity-ui/page-constructor 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -1,70 +1,52 @@
 # Changelog
 
-## [1.0.1](https://github.com/gravity-ui/page-constructor/compare/v1.0.0...v1.0.1) (2022-10-03)
+## [1.0.3](https://github.com/gravity-ui/page-constructor/compare/v1.0.2...v1.0.3) (2022-10-05)
 
 
 ### Bug Fixes
 
-* add repository links to readme ([a6ed8b9](https://github.com/gravity-ui/page-constructor/commit/a6ed8b9af5f71e8b0eed3bb52f3309a715c5a48b))
+* add yfm js import ([d9a77df](https://github.com/gravity-ui/page-constructor/commit/d9a77df743d68db9353bf6edbada38fbd81ce59f))
+* content centered styles priority ([3d2bad2](https://github.com/gravity-ui/page-constructor/commit/3d2bad24947d86fbd4cf3735beff49c0dfe74382))
+* content layout centered styles ([d0dcc59](https://github.com/gravity-ui/page-constructor/commit/d0dcc5988d3b08e483fe288295c904f16f903a94))
+* displaying video with fillWidthMedia param in HeaderBlock ([560b867](https://github.com/gravity-ui/page-constructor/commit/560b86776074a6249546d7c51324a201de9c04c4))
+* header block dark theme html ([d0cb1ce](https://github.com/gravity-ui/page-constructor/commit/d0cb1cebecafcd8385be32b33182b30b6bdb198c))
+* semantic colors for yfm ([40cd81f](https://github.com/gravity-ui/page-constructor/commit/40cd81ff9f0bf9407a84e181e10e23702aa67eb2))
 
-## 1.0.0 (2022-10-03)
+## [1.0.2](https://github.com/gravity-ui/page-constructor/compare/v1.0.1...v1.0.2) (2022-10-04)
 
 
-### Features
+### Bug Fixes
 
-* add blocks translations A-C ([f8d1e76](https://github.com/gravity-ui/page-constructor/commit/f8d1e76cb373b457141a0d4384c2a9a2fb688c30))
-* add commitlint ([dfbbf83](https://github.com/gravity-ui/page-constructor/commit/dfbbf83ea435978a1926c3038e965fd48797919f))
-* add github workflow ([bd204ec](https://github.com/gravity-ui/page-constructor/commit/bd204eca48c204138ef78c202986683d78a84840))
-* add react 18 types supporting ([cd4d1b0](https://github.com/gravity-ui/page-constructor/commit/cd4d1b0f2d075ddcd44adb998bbbeef7fb75117e))
-* add translations for blocks ([64e0999](https://github.com/gravity-ui/page-constructor/commit/64e0999ed166a66294b44a81082a00f366e7d53f))
-* add translations for components and sub blocks stories ([b8d8125](https://github.com/gravity-ui/page-constructor/commit/b8d8125cf9cab76b225e41159a5613fe75b56416))
-* migrate from yandex-cloud to gravity-ui ([3509b63](https://github.com/gravity-ui/page-constructor/commit/3509b63fe1b9507115ff5a3078322dfa39701450))
-* **PageConstructor:** add serviceId loadable [CLOUDFRONT-9364] ([#64](https://github.com/gravity-ui/page-constructor/issues/64)) ([4cc16cd](https://github.com/gravity-ui/page-constructor/commit/4cc16cd1a1dcfc0c17d38b92619456b22f3cf078))
-* prepare to publishing ([a259f69](https://github.com/gravity-ui/page-constructor/commit/a259f693c581bc34519d73063182c880dfcdb78d))
-* translate chapter names ([e922e27](https://github.com/gravity-ui/page-constructor/commit/e922e27657f12aebcd7bb62acb23a783f8a349ba))
-* translate components cards urls ([05382bd](https://github.com/gravity-ui/page-constructor/commit/05382bd3038c6aa0fad98bc2270f6869d2b62ca8))
-* translate englisht pt.1 ([945423a](https://github.com/gravity-ui/page-constructor/commit/945423a73807fdb0d8f29bba9210f94e6d3185dd))
-* translate questions readme ([4da6a8f](https://github.com/gravity-ui/page-constructor/commit/4da6a8fdab85ca68a35a182cd6b841bba6ab3334))
-* update hs form CLOUDFRONT-11339 ([478e762](https://github.com/gravity-ui/page-constructor/commit/478e762457cee318e3a9f1e9b27623def80f0603))
+* readme ([be265cd](https://github.com/gravity-ui/page-constructor/commit/be265cd6cdc3a9212ba5a7f6ad4b7b4073dcf7fb))
+
+## [1.0.1](https://github.com/gravity-ui/page-constructor/compare/v1.0.0...v1.0.1) (2022-10-03)
 
 
 ### Bug Fixes
 
-* add  postcss-scss ([9d30c31](https://github.com/gravity-ui/page-constructor/commit/9d30c3132dee6809523c2021051328a23ab402be))
-* add card-with image schema ([#85](https://github.com/gravity-ui/page-constructor/issues/85)) ([82af438](https://github.com/gravity-ui/page-constructor/commit/82af4382fd9bb37089f3ffc00b4bc8b3ddb36d7a))
-* add CHANGELOG and CONTRIBUTING to prettier ignore ([d3def9c](https://github.com/gravity-ui/page-constructor/commit/d3def9c6557f51de330dbcaca64dc56dbc84ce04))
-* add dummy test ([9e5e769](https://github.com/gravity-ui/page-constructor/commit/9e5e76901cbd8b3b7b6cac2e757351e58f022bad))
-* add paddings to submited message block NOTICKET ([54665d1](https://github.com/gravity-ui/page-constructor/commit/54665d1818f5c63988ae5e5d485a3b10cf5f88ae))
-* children types ([dee1176](https://github.com/gravity-ui/page-constructor/commit/dee11769e2058f552e77612450a08790e8c28ba5))
-* lint ([3d448fa](https://github.com/gravity-ui/page-constructor/commit/3d448fa879fa20e00e0b9b89ba952ef0b3588184))
-* lint fix comand ([5533ab4](https://github.com/gravity-ui/page-constructor/commit/5533ab433aeb2d209913ddeef9364518f84ef882))
-* lint prettier ([c57092c](https://github.com/gravity-ui/page-constructor/commit/c57092c9e7c63b5d15a1037598253adc0e578129))
-* remove hekpers and sources ([49f9220](https://github.com/gravity-ui/page-constructor/commit/49f9220c094b70e0d86df9552bf6a81e316a3796))
-* remove helper decorator ([c512a17](https://github.com/gravity-ui/page-constructor/commit/c512a17abe63be6802e8d6ba82a153e132f8bec7))
-* remove withThemeValueContext ([339bbb4](https://github.com/gravity-ui/page-constructor/commit/339bbb418bfb60f82c84e9da0bf0eb6981186dae))
-* reword handlers disclamer comments & extend HubspotEventHandlers in HubspotFormProps NOTICKET ([f254205](https://github.com/gravity-ui/page-constructor/commit/f254205a6cf8487a59ed8b3759681e40650760d7))
-* storybook launch ([65254de](https://github.com/gravity-ui/page-constructor/commit/65254ded6c23f5f5951e4e8fa18474c0ec154b18))
-* turn main readme back to english ([e30267c](https://github.com/gravity-ui/page-constructor/commit/e30267ca710898fd5996341e8315f128c95ca609))
+* add repository links to readme ([a6ed8b9](https://github.com/gravity-ui/page-constructor/commit/a6ed8b9af5f71e8b0eed3bb52f3309a715c5a48b))
 
 ## 1.0.0
 
-- Discontinued support for v1 blocks.
+- V1 blocks support was discontinued.
+
+- `@yandex-data-ui/common`, `@yandex-data-ui/cloud-schemas`, and `@yandex-data-ui/cloud-components` was deleted from dependencies.
 
-- Deleted the `@yandex-data-ui/common`, `@yandex-data-ui/cloud-schemas`, and `@yandex-data-ui/cloud-components` dependencies.
+- All the constructor elements was grouped into blocks, sub-blocks and components.
 
-- Grouped all the constructor elements into blocks and sub-blocks.
+- PageConstructor component was refactored.
 
-- Refactored the PageConstructor component.
+- Validators was Refactored.
 
-- Refactored the validators.
+- Project build engine was moved from `@yandex-data-ui/ui-core` to `gulp`.
 
-- Moved a project build from `@yandex-data-ui/ui-core` to `gulp`.
+- Storybook was updated.
 
-- Updated the Storybook.
+- Project was moved to @gravity-ui.
 
-- Moved to @gravity-ui.
+- LICENSE.md and CONTRIBUTING.md was added
 
-- Added LICENSE and CONTRIBUTING.md.
+- Translate all docs and stories to english
 
 ## 0.60.5
 

package/README.md

@@ -1,4 +1,4 @@
-# Page Constructor · [![npm package](https://img.shields.io/npm/v/@gravity-ui/page-constructor)](https://www.npmjs.com/package/@gravity-ui/page-constructor) [![CI](https://img.shields.io/github/workflow/status/gravity-ui/page-constructor/CI/main?label=CI&logo=github)](https://github.com/gravity-ui/page-constructor/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.yandexcloud.dev/page-constructor/)
+# @gravity-ui/page-constructor · [![npm package](https://img.shields.io/npm/v/@gravity-ui/page-constructor)](https://www.npmjs.com/package/@gravity-ui/page-constructor) [![CI](https://img.shields.io/github/workflow/status/gravity-ui/page-constructor/CI/main?label=CI&logo=github)](https://github.com/gravity-ui/page-constructor/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.yandexcloud.dev/page-constructor/)
 
 ## Install
 
@@ -12,7 +12,7 @@ npm install @gravity-ui/page-constructor
 
 When creating pages, component-based approach is used: a page is built using a set of ready-made blocks that can be placed in any order. Each block has a certain type and set of input data parameters.
 
-For the format of input data and list of available blocks, see the [documentation](http://localhost:7009/?path=/story/information--containers).
+For the format of input data and list of available blocks, see the [documentation](https://preview.yandexcloud.dev/page-constructor/?path=/story/information--blocks).
 
 ### Getting started
 
@@ -32,8 +32,8 @@ const Page: WithChildren<PageProps> = ({content}) => (
 
 ```typescript
 interface PageConstructorProps {
-    content: PageContent; //Block description in JSON format.
-    shouldRenderBlock?: ShouldRenderBlock; // A function that is invoked when rendering each block and that lets you set conditions for its display.
+    content: PageContent; //Blocks data in JSON format.
+    shouldRenderBlock?: ShouldRenderBlock; // A function that is invoked when rendering each block and  lets you set conditions for its display.
     custom?: Custom; //Custom blocks (see `Customization`).
     renderMenu?: () => React.ReactNode; //A function that renders the page menu with navigation (we plan to add rendering for the default menu version).
 }
@@ -97,7 +97,7 @@ To pass custom blocks to the constructor:
 
 2. In your code, create an object with the block type (string) as a key and an imported block component as a value.
 
-3. Pass the object you created to the `custom.blocks` or `custom.headers` parameter of the `PageConstructor` component (`custom.headers` specifies the block headers to be rendered separately above general content).
+3. Pass the object you created to the `custom.blocks`, `custom.headers` or `custom.subBlocks` parameter of the `PageConstructor` component (`custom.headers` specifies the block headers to be rendered separately above general content).
 
 4. Now you can use the created block in input data (the `content` parameter) by specifying its type and data.
 
@@ -150,21 +150,22 @@ Sub-blocks are components that can be used in the block `children` property. In
 
 ### How to add a new block to the `page-constructor`
 
-1. In the `src/blocks` or `src/sub-blocks` directory, create a folder with the block/sub-block code.
+1. In the `src/blocks` or `src/sub-blocks` directory, create a folder with the block or sub-block code.
 
 2. Add the block or sub-block name to enum `BlockType` or`SubBlockType` and describe its properties in the `src/models/blocks.ts` or `src/models/sub-blocks.ts` file in a similar way to the existing ones.
 
-3. Add export for the block in the `src/blocks/index.ts` file and for the sub-block in the `src/components/index.ts` file.
+3. Add export for the block in the `src/blocks/index.ts` file and for the sub-block in the `src/sub-blocks/index.ts` file.
 
 4. Add a new component or block to mapping in `src/constructor-items.ts`.
 
 5. Add a validator for the new block:
 
-   - Add a `schema.ts` file to the block/sub-block directory. In this file, describe a parameter validator for the component in [`json-schema`](http://json-schema.org/) format.
+   - Add a `schema.ts` file to the block or sub-block directory. In this file, describe a parameter validator for the component in [`json-schema`](http://json-schema.org/) format.
    - Export it in the `schema/validators/blocks.ts` or `schema/validators/sub-blocks.ts` file.
    - Add it to `enum` or `selectCases` in the `schema/index.ts` file.
 
 6. In the block directory, add the `README.md` file with a description of input parameters.
+7. In the block directory add storybook demo in `__stories__` folder. (All demo content for story should be placed in `data.json` at story dir)
 
 ### Themes
 

package/build/cjs/blocks/ContentLayout/ContentLayout.css

@@ -26,9 +26,6 @@ unpredictable css rules order in build */
   margin-left: auto;
   margin-right: auto;
 }
-.pc-content-layout-block__files_centered .pc-content-layout-block__file {
-  justify-content: center;
-}
 .pc-content-layout-block__files a {
   text-decoration: none;
 }

package/build/cjs/blocks/Header/Header.css

@@ -22,7 +22,7 @@ unpredictable css rules order in build */
 }
 .pc-header-block__content_theme_dark .pc-header-block__title,
 .pc-header-block__content_theme_dark .pc-header-block__description .yfm,
-.pc-header-block__content_theme_dark .pc-header-block__description .yfm > * {
+.pc-header-block__content_theme_dark .pc-header-block__description .yfm * {
   color: var(--yc-color-text-light-primary);
 }
 .pc-header-block__content_vertical-offset {
@@ -141,6 +141,14 @@ unpredictable css rules order in build */
 .pc-header-block__background.pc-header-block__background_full-width-media > div, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media > div {
   max-width: none;
 }
+.pc-header-block__background.pc-header-block__background_full-width-media .pc-header-block__background-media, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media .pc-header-block__background-media {
+  height: 100%;
+}
+.pc-header-block__background.pc-header-block__background_full-width-media video, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media video {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
 .pc-header-block__background_full-width-media {
   --pc-border-radius: 0;
 }

package/build/cjs/blocks/Header/Header.js

@@ -14,7 +14,7 @@ const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
 const b = (0, utils_1.block)('header-block');
 const Background = ({ background }) => {
     const { url, color, disableCompress, fullWidth, fullWidthMedia } = background;
-    return (0, guards_1.headerHasMediaBackground)(background) ? (react_1.default.createElement(components_1.BackgroundMedia, Object.assign({}, background, { className: b('background', { media: true, 'full-width-media': fullWidthMedia }) }))) : (react_1.default.createElement(components_1.BackgroundImage, { src: url, className: b('background', { 'full-width-media': fullWidthMedia }), imageClassName: b('background-img'), style: { backgroundColor: fullWidth ? 'none' : color }, disableCompress: disableCompress }));
+    return (0, guards_1.headerHasMediaBackground)(background) ? (react_1.default.createElement(components_1.BackgroundMedia, Object.assign({}, background, { mediaClassName: b('background-media'), className: b('background', { media: true, 'full-width-media': fullWidthMedia }) }))) : (react_1.default.createElement(components_1.BackgroundImage, { src: url, className: b('background', { 'full-width-media': fullWidthMedia }), imageClassName: b('background-img'), style: { backgroundColor: fullWidth ? 'none' : color }, disableCompress: disableCompress }));
 };
 const FullWidthBackground = ({ background }) => (react_1.default.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
 const HeaderBlock = (props) => {

package/build/cjs/components/BackgroundMedia/BackgroundMedia.d.ts

@@ -1,6 +1,7 @@
 import { MediaProps, Animatable } from '../../models';
 export interface FullProps extends MediaProps, Animatable {
     className?: string;
+    mediaClassName?: string;
 }
-declare const BackgroundMedia: ({ className, color, animated, parallax, video, ...props }: FullProps) => JSX.Element;
+declare const BackgroundMedia: ({ className, color, animated, parallax, video, mediaClassName, ...props }: FullProps) => JSX.Element;
 export default BackgroundMedia;

package/build/cjs/components/BackgroundMedia/BackgroundMedia.js

@@ -8,10 +8,10 @@ const AnimateBlock_1 = (0, tslib_1.__importDefault)(require("../AnimateBlock/Ani
 const mobileContext_1 = require("../../context/mobileContext");
 const b = (0, utils_1.block)('BackgroundMedia');
 const BackgroundMedia = (_a) => {
-    var { className, color, animated, parallax = true, video } = _a, props = (0, tslib_1.__rest)(_a, ["className", "color", "animated", "parallax", "video"]);
+    var { className, color, animated, parallax = true, video, mediaClassName } = _a, props = (0, tslib_1.__rest)(_a, ["className", "color", "animated", "parallax", "video", "mediaClassName"]);
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(null, className), style: { backgroundColor: color }, animate: animated },
-        react_1.default.createElement(Media_1.default, Object.assign({ className: b('media'), imageClassName: b('image'), videoClassName: b('video'), isBackground: true }, Object.assign({ height: 720, color,
+        react_1.default.createElement(Media_1.default, Object.assign({ className: b('media', mediaClassName), imageClassName: b('image'), videoClassName: b('video'), isBackground: true }, Object.assign({ height: 720, color,
             parallax, video: isMobile ? undefined : video }, props)))));
 };
 exports.default = BackgroundMedia;

package/build/cjs/containers/PageConstructor/PageConstructor.css

@@ -28,11 +28,13 @@ unpredictable css rules order in build */
 unpredictable css rules order in build */
 .yfm_constructor {
   font-family: var(--yc-font-family-sans);
+  color: var(--yc-color-text-primary);
 }
 .yfm_constructor code,
 .yfm_constructor kbd,
 .yfm_constructor pre {
   font-family: var(--yc-font-family-monospace);
+  color: var(--yc-color-text-primary);
 }
 .yfm_constructor.yfm_constructor h1,
 .yfm_constructor.yfm_constructor h2,
@@ -97,6 +99,15 @@ unpredictable css rules order in build */
   --pc-text-header-color: var(--yc-color-text-link-hover);
   color: var(--yc-color-text-link-hover);
 }
+.yfm_constructor table {
+  color: var(--yc-color-text-primary);
+  border: 1px solid var(--yc-color-line-generic);
+  background: var(--yc-color-base-background);
+}
+.yfm_constructor thead,
+.yfm_constructor table tr:nth-child(2n) {
+  background-color: var(--yc-color-base-generic);
+}
 
 .yfm_constructor_table table {
   border: 0;

package/build/cjs/containers/PageConstructor/PageConstructor.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ShouldRenderBlock, CustomConfig, PageContent, CustomItems } from '../../models';
 import { blockMap, subBlockMap } from '../../constructor-items';
+import '@doc-tools/transform/dist/js/yfm';
 export declare type ItemMap = typeof blockMap & typeof subBlockMap & CustomItems;
 export interface PageConstructorProps {
     content?: PageContent;

package/build/cjs/containers/PageConstructor/PageConstructor.js

@@ -15,6 +15,7 @@ const ConstructorRow_1 = require("./components/ConstructorRow");
 const ConstructorFootnotes_1 = require("./components/ConstructorFootnotes");
 const ConstructorItem_1 = require("./components/ConstructorItem");
 const ConstructorBlocks_1 = require("./components/ConstructorBlocks");
+require("@doc-tools/transform/dist/js/yfm");
 const b = (0, utils_1.block)('page-constructor');
 const Constructor = (props) => {
     const { context, headerBlockTypes } = (0, react_1.useMemo)(() => {

package/build/cjs/grid/utils.js

@@ -48,7 +48,6 @@ function getColClass(params) {
     const { className = '', sizes, offsets, orders, hidden, visible, alignSelf, justifyContent, reset, } = params;
     return [
         types_1.GridColumnClassPrefix.Col,
-        className,
         alignSelf,
         justifyContent && getJustifyClass(justifyContent),
         sizes && getSizeClass(sizes),
@@ -57,6 +56,7 @@ function getColClass(params) {
         hidden && getVisibilityClasses(hidden, types_1.GridColumnVisibilityClass.None),
         visible && getVisibilityClasses(visible, types_1.GridColumnVisibilityClass.Block),
         reset && getResetClass(),
+        className,
     ]
         .filter(Boolean)
         .join(' ');

package/build/cjs/sub-blocks/Content/Content.css

@@ -6,6 +6,11 @@
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-content__notice .yfm ol,
+.pc-content__notice .yfm ul, .pc-content__text .yfm ol,
+.pc-content__text .yfm ul {
+  padding-left: 1.4em;
+}
 .pc-content__notice.pc-content__notice .yfm,
 .pc-content__notice.pc-content__notice .yfm > * {
   color: var(--yc-color-text-secondary);
@@ -30,10 +35,11 @@ unpredictable css rules order in build */
   display: inline-block;
   margin-right: 32px;
 }
-.pc-content_centered {
+.pc-content_centered.pc-content_centered {
   margin: 0 auto;
   text-align: center;
 }
+
 .pc-content_centered .pc-content__link a {
   justify-content: center;
 }

package/build/esm/blocks/ContentLayout/ContentLayout.css

@@ -26,9 +26,6 @@ unpredictable css rules order in build */
   margin-left: auto;
   margin-right: auto;
 }
-.pc-content-layout-block__files_centered .pc-content-layout-block__file {
-  justify-content: center;
-}
 .pc-content-layout-block__files a {
   text-decoration: none;
 }

package/build/esm/blocks/Header/Header.css

@@ -22,7 +22,7 @@ unpredictable css rules order in build */
 }
 .pc-header-block__content_theme_dark .pc-header-block__title,
 .pc-header-block__content_theme_dark .pc-header-block__description .yfm,
-.pc-header-block__content_theme_dark .pc-header-block__description .yfm > * {
+.pc-header-block__content_theme_dark .pc-header-block__description .yfm * {
   color: var(--yc-color-text-light-primary);
 }
 .pc-header-block__content_vertical-offset {
@@ -141,6 +141,14 @@ unpredictable css rules order in build */
 .pc-header-block__background.pc-header-block__background_full-width-media > div, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media > div {
   max-width: none;
 }
+.pc-header-block__background.pc-header-block__background_full-width-media .pc-header-block__background-media, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media .pc-header-block__background-media {
+  height: 100%;
+}
+.pc-header-block__background.pc-header-block__background_full-width-media video, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media video {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
 .pc-header-block__background_full-width-media {
   --pc-border-radius: 0;
 }

package/build/esm/blocks/Header/Header.js

@@ -11,7 +11,7 @@ import './Header.css';
 const b = block('header-block');
 const Background = ({ background }) => {
     const { url, color, disableCompress, fullWidth, fullWidthMedia } = background;
-    return headerHasMediaBackground(background) ? (React.createElement(BackgroundMedia, Object.assign({}, background, { className: b('background', { media: true, 'full-width-media': fullWidthMedia }) }))) : (React.createElement(BackgroundImage, { src: url, className: b('background', { 'full-width-media': fullWidthMedia }), imageClassName: b('background-img'), style: { backgroundColor: fullWidth ? 'none' : color }, disableCompress: disableCompress }));
+    return headerHasMediaBackground(background) ? (React.createElement(BackgroundMedia, Object.assign({}, background, { mediaClassName: b('background-media'), className: b('background', { media: true, 'full-width-media': fullWidthMedia }) }))) : (React.createElement(BackgroundImage, { src: url, className: b('background', { 'full-width-media': fullWidthMedia }), imageClassName: b('background-img'), style: { backgroundColor: fullWidth ? 'none' : color }, disableCompress: disableCompress }));
 };
 const FullWidthBackground = ({ background }) => (React.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
 export const HeaderBlock = (props) => {

package/build/esm/components/BackgroundMedia/BackgroundMedia.d.ts

@@ -2,6 +2,7 @@ import { MediaProps, Animatable } from '../../models';
 import './BackgroundMedia.css';
 export interface FullProps extends MediaProps, Animatable {
     className?: string;
+    mediaClassName?: string;
 }
-declare const BackgroundMedia: ({ className, color, animated, parallax, video, ...props }: FullProps) => JSX.Element;
+declare const BackgroundMedia: ({ className, color, animated, parallax, video, mediaClassName, ...props }: FullProps) => JSX.Element;
 export default BackgroundMedia;

package/build/esm/components/BackgroundMedia/BackgroundMedia.js

@@ -7,10 +7,10 @@ import { MobileContext } from '../../context/mobileContext';
 import './BackgroundMedia.css';
 const b = block('BackgroundMedia');
 const BackgroundMedia = (_a) => {
-    var { className, color, animated, parallax = true, video } = _a, props = __rest(_a, ["className", "color", "animated", "parallax", "video"]);
+    var { className, color, animated, parallax = true, video, mediaClassName } = _a, props = __rest(_a, ["className", "color", "animated", "parallax", "video", "mediaClassName"]);
     const isMobile = useContext(MobileContext);
     return (React.createElement(AnimateBlock, { className: b(null, className), style: { backgroundColor: color }, animate: animated },
-        React.createElement(Media, Object.assign({ className: b('media'), imageClassName: b('image'), videoClassName: b('video'), isBackground: true }, Object.assign({ height: 720, color,
+        React.createElement(Media, Object.assign({ className: b('media', mediaClassName), imageClassName: b('image'), videoClassName: b('video'), isBackground: true }, Object.assign({ height: 720, color,
             parallax, video: isMobile ? undefined : video }, props)))));
 };
 export default BackgroundMedia;

package/build/esm/containers/PageConstructor/PageConstructor.css

@@ -28,11 +28,13 @@ unpredictable css rules order in build */
 unpredictable css rules order in build */
 .yfm_constructor {
   font-family: var(--yc-font-family-sans);
+  color: var(--yc-color-text-primary);
 }
 .yfm_constructor code,
 .yfm_constructor kbd,
 .yfm_constructor pre {
   font-family: var(--yc-font-family-monospace);
+  color: var(--yc-color-text-primary);
 }
 .yfm_constructor.yfm_constructor h1,
 .yfm_constructor.yfm_constructor h2,
@@ -97,6 +99,15 @@ unpredictable css rules order in build */
   --pc-text-header-color: var(--yc-color-text-link-hover);
   color: var(--yc-color-text-link-hover);
 }
+.yfm_constructor table {
+  color: var(--yc-color-text-primary);
+  border: 1px solid var(--yc-color-line-generic);
+  background: var(--yc-color-base-background);
+}
+.yfm_constructor thead,
+.yfm_constructor table tr:nth-child(2n) {
+  background-color: var(--yc-color-base-generic);
+}
 
 .yfm_constructor_table table {
   border: 0;

package/build/esm/containers/PageConstructor/PageConstructor.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ShouldRenderBlock, CustomConfig, PageContent, CustomItems } from '../../models';
 import { blockMap, subBlockMap } from '../../constructor-items';
+import '@doc-tools/transform/dist/js/yfm';
 import './PageConstructor.css';
 export declare type ItemMap = typeof blockMap & typeof subBlockMap & CustomItems;
 export interface PageConstructorProps {

package/build/esm/containers/PageConstructor/PageConstructor.js

@@ -12,6 +12,7 @@ import { ConstructorRow } from './components/ConstructorRow';
 import { ConstructorFootnotes } from './components/ConstructorFootnotes';
 import { ConstructorHeader } from './components/ConstructorItem';
 import { ConstructorBlocks } from './components/ConstructorBlocks';
+import '@doc-tools/transform/dist/js/yfm';
 import './PageConstructor.css';
 const b = cnBlock('page-constructor');
 export const Constructor = (props) => {

package/build/esm/grid/utils.js

@@ -38,7 +38,6 @@ export function getColClass(params) {
     const { className = '', sizes, offsets, orders, hidden, visible, alignSelf, justifyContent, reset, } = params;
     return [
         GridColumnClassPrefix.Col,
-        className,
         alignSelf,
         justifyContent && getJustifyClass(justifyContent),
         sizes && getSizeClass(sizes),
@@ -47,6 +46,7 @@ export function getColClass(params) {
         hidden && getVisibilityClasses(hidden, GridColumnVisibilityClass.None),
         visible && getVisibilityClasses(visible, GridColumnVisibilityClass.Block),
         reset && getResetClass(),
+        className,
     ]
         .filter(Boolean)
         .join(' ');

package/build/esm/sub-blocks/Content/Content.css

@@ -6,6 +6,11 @@
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-content__notice .yfm ol,
+.pc-content__notice .yfm ul, .pc-content__text .yfm ol,
+.pc-content__text .yfm ul {
+  padding-left: 1.4em;
+}
 .pc-content__notice.pc-content__notice .yfm,
 .pc-content__notice.pc-content__notice .yfm > * {
   color: var(--yc-color-text-secondary);
@@ -30,10 +35,11 @@ unpredictable css rules order in build */
   display: inline-block;
   margin-right: 32px;
 }
-.pc-content_centered {
+.pc-content_centered.pc-content_centered {
   margin: 0 auto;
   text-align: center;
 }
+
 .pc-content_centered .pc-content__link a {
   justify-content: center;
 }

package/package.json

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

package/styles/styles.css

@@ -203,11 +203,13 @@ unpredictable css rules order in build */
 unpredictable css rules order in build */
 .yfm_constructor {
   font-family: var(--yc-font-family-sans);
+  color: var(--yc-color-text-primary);
 }
 .yfm_constructor code,
 .yfm_constructor kbd,
 .yfm_constructor pre {
   font-family: var(--yc-font-family-monospace);
+  color: var(--yc-color-text-primary);
 }
 .yfm_constructor.yfm_constructor h1,
 .yfm_constructor.yfm_constructor h2,
@@ -272,6 +274,15 @@ unpredictable css rules order in build */
   --pc-text-header-color: var(--yc-color-text-link-hover);
   color: var(--yc-color-text-link-hover);
 }
+.yfm_constructor table {
+  color: var(--yc-color-text-primary);
+  border: 1px solid var(--yc-color-line-generic);
+  background: var(--yc-color-base-background);
+}
+.yfm_constructor thead,
+.yfm_constructor table tr:nth-child(2n) {
+  background-color: var(--yc-color-base-generic);
+}
 
 .yfm_constructor_table table {
   border: 0;

package/styles/yfm.scss

@@ -5,11 +5,13 @@
 .yfm_constructor {
     $block: &;
     font-family: var(--yc-font-family-sans);
+    color: var(--yc-color-text-primary);
 
     code,
     kbd,
     pre {
         font-family: var(--yc-font-family-monospace);
+        color: var(--yc-color-text-primary);
     }
 
     @include add-specificity(&) {
@@ -80,6 +82,17 @@
     a {
         @include link();
     }
+
+    table {
+        color: var(--yc-color-text-primary);
+        border: 1px solid var(--yc-color-line-generic);
+        background: var(--yc-color-base-background);
+    }
+
+    thead,
+    table tr:nth-child(2n) {
+        background-color: var(--yc-color-base-generic);
+    }
 }
 
 .yfm_constructor_table {