@gravity-ui/page-constructor 1.0.2 → 1.0.4

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [1.0.4](https://github.com/gravity-ui/page-constructor/compare/v1.0.3...v1.0.4) (2022-10-07)
+
+
+### Bug Fixes
+
+* repalce block stories content pt.1 ([fc1a3a5](https://github.com/gravity-ui/page-constructor/commit/fc1a3a537b4c962e472aee73663f2950ce7dc346))
+* replace blocks content ([ab63138](https://github.com/gravity-ui/page-constructor/commit/ab63138aaebfb71366062285436edc21f86f5346))
+* replace sub blocks and components story data ([fa7593d](https://github.com/gravity-ui/page-constructor/commit/fa7593d9082761d1726739204f36cf6024725755))
+
+## [1.0.3](https://github.com/gravity-ui/page-constructor/compare/v1.0.2...v1.0.3) (2022-10-05)
+
+
+### Bug Fixes
+
+* 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.2](https://github.com/gravity-ui/page-constructor/compare/v1.0.1...v1.0.2) (2022-10-04)
 
 

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.2",
+  "version": "1.0.4",
   "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 {