@gravity-ui/page-constructor 6.3.2-alpha.3 → 6.3.2-alpha.6

package/README.md

@@ -14,24 +14,112 @@ For the format of input data and list of available blocks, see the [documentatio
 npm install @gravity-ui/page-constructor
 ```
 
-## Required dependencies
+## Quick start
 
-Please note that to start using the package, your project must also have the following installed: `@diplodoc/transform`, `@gravity-ui/uikit`, `react`. Check out the `peerDependencies` section of `package.json` for accurate information.
+First, we need a React project and some kind of server. For example, you can create a React project using Vite and an Express server, or you can create Next.js application - it will have a client and server side at once.
 
-### Getting started
+Install the required dependencies:
 
-The page constructor is imported as a React component. To make sure it runs properly, wrap it in `PageConstructorProvider`:
+```shell
+npm install @gravity-ui/page-constructor @diplodoc/transform @gravity-ui/uikit
+```
 
-```jsx
+Insert the `Page Constructor` to the page. To work correctly, it must be wrapped in a `PageConstructorProvider`:
+
+```tsx
 import {PageConstructor, PageConstructorProvider} from '@gravity-ui/page-constructor';
+import '@gravity-ui/page-constructor/styles/styles.scss';
+
+const App = () => {
+  const content = {
+    blocks: [
+      {
+        type: 'header-block',
+        title: 'Hello world',
+        background: {color: '#f0f0f0'},
+        description:
+          '**Congratulations!** Have you built a [page-constructor](https://github.com/gravity-ui/page-constructor) into your website',
+      },
+    ],
+  };
+
+  return (
+    <PageConstructorProvider>
+      <PageConstructor content={content} />
+    </PageConstructorProvider>
+  );
+};
 
-const Page: React.PropsWithChildren<PageProps> = ({content}) => (
-  <PageConstructorProvider>
-    <PageConstructor content={content} />
-  </PageConstructorProvider>
-);
+export default App;
+```
+
+This was the simplest example of a connection. In order for YFM markup to work, you need to process content on the server and receive it on the client.
+
+If your server is a separate application, then you need to install page-constructor:
+
+```shell
+npm install @gravity-ui/page-constructor
+```
+
+To process YFM in all base blocks, call the `contentTransformer` and pass the content and options there:
+
+```ts
+const express = require('express');
+const app = express();
+const {contentTransformer} = require('@gravity-ui/page-constructor/server');
+
+const content = {
+  blocks: [
+    {
+      type: 'header-block',
+      title: 'Hello world',
+      background: {color: '#f0f0f0'},
+      description:
+        '**Congratulations!** Have you built a [page-constructor](https://github.com/gravity-ui/page-constructor) into your website',
+    },
+  ],
+};
+
+app.get('/content', (req, res) => {
+  res.send({content: contentTransformer({content, options: {lang: 'en'}})});
+});
+
+app.listen(3000);
+```
+
+On the client, add an endpoint call to receive content:
+
+```tsx
+import {PageConstructor, PageConstructorProvider} from '@gravity-ui/page-constructor';
+import '@gravity-ui/page-constructor/styles/styles.scss';
+import {useEffect, useState} from 'react';
+
+const App = () => {
+  const [content, setContent] = useState();
+
+  useEffect(() => {
+    (async () => {
+      const response = await fetch('http://localhost:3000/content').then((r) => r.json());
+      setContent(response.content);
+    })();
+  }, []);
+
+  return (
+    <PageConstructorProvider>
+      <PageConstructor content={content} />
+    </PageConstructorProvider>
+  );
+};
+
+export default App;
 ```
 
+### Ready-made template
+
+To start a new project, you can use the [ready-made template on Next.js ](https://github.com/gravity-ui/page-constructor-website-template) which we have prepared.
+
+## Documentation
+
 ### Parameters
 
 ```typescript

package/build/cjs/blocks/FoldableList/FoldableList.css

@@ -0,0 +1,13 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-FoldableList__title {
+  top: calc(var(--header-height) + 32px);
+  position: sticky;
+  margin-bottom: 32px;
+  margin-right: 64px;
+}
+@media (max-width: 769px) {
+  .pc-FoldableList__title {
+    margin-right: 0;
+  }
+}

package/build/cjs/blocks/FoldableList/FoldableList.d.ts

@@ -0,0 +1,3 @@
+import { FoldableListProps } from "../../models/index.js";
+declare const FoldableListBlock: (props: FoldableListProps) => import("react/jsx-runtime").JSX.Element;
+export default FoldableListBlock;

package/build/cjs/blocks/FoldableList/FoldableList.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const grid_1 = require("../../grid/index.js");
+const sub_blocks_1 = require("../../sub-blocks/index.js");
+const utils_1 = require("../../utils/index.js");
+const FoldableListBlockItem_1 = require("./FoldableListBlockItem/FoldableListBlockItem.js");
+const b = (0, utils_1.block)('FoldableList');
+const FoldableListBlock = (props) => {
+    const { title, text, additionalInfo, links, buttons, items, list } = props;
+    const [opened, setOpened] = React.useState([0]);
+    const toggleItem = (index) => {
+        let newState;
+        if (opened.includes(index)) {
+            newState = opened.filter((itemIndex) => itemIndex !== index);
+        }
+        else {
+            newState = [...opened, index];
+        }
+        setOpened(newState);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: b(), itemScope: true, children: (0, jsx_runtime_1.jsxs)(grid_1.Row, { children: [(0, jsx_runtime_1.jsx)(grid_1.Col, { sizes: { all: 12, md: 4 }, children: (0, jsx_runtime_1.jsx)("div", { className: b('title'), children: (0, jsx_runtime_1.jsx)(sub_blocks_1.Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, list: list, buttons: buttons, colSizes: { all: 12, md: 12 } }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Col, { sizes: { all: 12, md: 8 }, role: 'list', children: items.map(({ title: itemTitle, text: itemText, link, listStyle = 'dash' }, index) => {
+                        const isOpened = opened.includes(index);
+                        const onClick = () => toggleItem(index);
+                        return ((0, jsx_runtime_1.jsx)(FoldableListBlockItem_1.FoldableListBlockItem, { title: itemTitle, text: itemText, link: link, listStyle: listStyle, isOpened: isOpened, onClick: onClick }, itemTitle));
+                    }) })] }) }));
+};
+exports.default = FoldableListBlock;
+//# sourceMappingURL=FoldableList.js.map

package/build/cjs/blocks/FoldableList/FoldableList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FoldableList.js","sourceRoot":"../../../../src","sources":["blocks/FoldableList/FoldableList.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,8CAAoC;AAEpC,0DAAyC;AACzC,gDAAkC;AAElC,4FAAoF;AAIpF,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,iBAAiB,GAAG,CAAC,KAAwB,EAAE,EAAE;IACnD,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,GAAG,KAAK,CAAC;IACzE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAE1D,MAAM,UAAU,GAAG,CAAC,KAAa,EAAE,EAAE;QACjC,IAAI,QAAQ,CAAC;QAEb,IAAI,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;YACzB,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,SAAiB,EAAE,EAAE,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC;QACzE,CAAC;aAAM,CAAC;YACJ,QAAQ,GAAG,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,CAAC;QAClC,CAAC;QAED,SAAS,CAAC,QAAQ,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,EAAE,EAAE,SAAS,kBAC1B,wBAAC,UAAG,eACA,uBAAC,UAAG,IAAC,KAAK,EAAE,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAC,YACxB,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACtB,uBAAC,oBAAO,IACJ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAC,GAC7B,GACA,GACJ,EACN,uBAAC,UAAG,IAAC,KAAK,EAAE,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAC,EAAE,IAAI,EAAE,MAAM,YACrC,KAAK,CAAC,GAAG,CACN,CAAC,EAAC,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,GAAG,MAAM,EAAC,EAAE,KAAK,EAAE,EAAE;wBACpE,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;wBACxC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;wBAExC,OAAO,CACH,uBAAC,6CAAqB,IAElB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,IANX,SAAS,CAOhB,CACL,CAAC;oBACN,CAAC,CACJ,GACC,IACJ,GACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,iBAAiB,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Col, Row} from '../../grid';\nimport {FoldableListProps} from '../../models';\nimport {Content} from '../../sub-blocks';\nimport {block} from '../../utils';\n\nimport {FoldableListBlockItem} from './FoldableListBlockItem/FoldableListBlockItem';\n\nimport './FoldableList.scss';\n\nconst b = block('FoldableList');\n\nconst FoldableListBlock = (props: FoldableListProps) => {\n    const {title, text, additionalInfo, links, buttons, items, list} = props;\n    const [opened, setOpened] = React.useState<number[]>([0]);\n\n    const toggleItem = (index: number) => {\n        let newState;\n\n        if (opened.includes(index)) {\n            newState = opened.filter((itemIndex: number) => itemIndex !== index);\n        } else {\n            newState = [...opened, index];\n        }\n\n        setOpened(newState);\n    };\n\n    return (\n        <div className={b()} itemScope>\n            <Row>\n                <Col sizes={{all: 12, md: 4}}>\n                    <div className={b('title')}>\n                        <Content\n                            title={title}\n                            text={text}\n                            additionalInfo={additionalInfo}\n                            links={links}\n                            list={list}\n                            buttons={buttons}\n                            colSizes={{all: 12, md: 12}}\n                        />\n                    </div>\n                </Col>\n                <Col sizes={{all: 12, md: 8}} role={'list'}>\n                    {items.map(\n                        ({title: itemTitle, text: itemText, link, listStyle = 'dash'}, index) => {\n                            const isOpened = opened.includes(index);\n                            const onClick = () => toggleItem(index);\n\n                            return (\n                                <FoldableListBlockItem\n                                    key={itemTitle}\n                                    title={itemTitle}\n                                    text={itemText}\n                                    link={link}\n                                    listStyle={listStyle}\n                                    isOpened={isOpened}\n                                    onClick={onClick}\n                                />\n                            );\n                        },\n                    )}\n                </Col>\n            </Row>\n        </div>\n    );\n};\n\nexport default FoldableListBlock;\n"]}

package/build/cjs/blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.css

@@ -0,0 +1,78 @@
+.pc-FoldableListBlockItem__title {
+  margin: 0;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-FoldableListBlockItem {
+  padding-bottom: 32px;
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.pc-FoldableListBlockItem + .pc-FoldableListBlockItem {
+  padding-top: 32px;
+}
+.pc-FoldableListBlockItem__title {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  font-size: var(--g-text-header-1-font-size);
+  line-height: var(--g-text-header-1-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--g-text-accent-font-weight);
+  position: relative;
+  display: block;
+  width: 100%;
+  padding-right: 24px;
+  text-align: start;
+  cursor: pointer;
+  border-radius: var(--g-focus-border-radius);
+}
+.pc-FoldableListBlockItem__title:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-FoldableListBlockItem__title:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-FoldableListBlockItem__title a {
+  outline: none;
+  color: var(--g-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+.utilityfocus .pc-FoldableListBlockItem__title a:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-FoldableListBlockItem__title a:hover, .pc-FoldableListBlockItem__title a:active {
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
+}
+.pc-FoldableListBlockItem__arrow {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  color: var(--g-color-text-primary);
+}
+.pc-FoldableListBlockItem__link {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+}
+.pc-FoldableListBlockItem__link.pc-FoldableListBlockItem__link a {
+  outline-offset: -2px;
+  border-radius: calc(var(--g-focus-border-radius) + 2px);
+  display: inline-block;
+}
+
+.pc-FoldableListBlockItem__text {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  margin-top: 12px;
+}

package/build/cjs/blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.d.ts

@@ -0,0 +1,2 @@
+import { FoldableListBlockItemProps } from "../../../models/index.js";
+export declare const FoldableListBlockItem: ({ title: itemTitle, text: itemText, link, listStyle, isOpened, onClick, }: FoldableListBlockItemProps) => import("react/jsx-runtime").JSX.Element;

package/build/cjs/blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FoldableListBlockItem = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const components_1 = require("../../../components/index.js");
+const Link_1 = tslib_1.__importDefault(require("../../../components/Link/Link.js"));
+const utils_1 = require("../../../utils/index.js");
+const b = (0, utils_1.block)('FoldableListBlockItem');
+const FoldableListBlockItem = ({ title: itemTitle, text: itemText, link, listStyle = 'dash', isOpened, onClick, }) => {
+    const { onKeyDown } = (0, uikit_1.useActionHandlers)(onClick);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b(), itemScope: true, role: 'listitem', children: [(0, jsx_runtime_1.jsxs)("button", { className: b('title'), onClick: onClick, "aria-expanded": isOpened, onKeyDown: onKeyDown, children: [(0, jsx_runtime_1.jsx)(components_1.HTML, { children: itemTitle }), (0, jsx_runtime_1.jsx)(components_1.ToggleArrow, { open: isOpened, size: 16, type: 'vertical', iconType: "navigation", className: b('arrow') })] }), (0, jsx_runtime_1.jsx)(components_1.Foldable, { isOpened: isOpened, children: (0, jsx_runtime_1.jsxs)("div", { className: b('text'), "aria-hidden": !isOpened, children: [(0, jsx_runtime_1.jsx)(components_1.YFMWrapper, { content: itemText, modifiers: {
+                                constructor: true,
+                                constructorListStyle: true,
+                                constructorListStyleDash: listStyle === 'dash',
+                            } }), link && (0, jsx_runtime_1.jsx)(Link_1.default, { ...link, tabIndex: isOpened ? 0 : -1, className: b('link') })] }) })] }));
+};
+exports.FoldableListBlockItem = FoldableListBlockItem;
+//# sourceMappingURL=FoldableListBlockItem.js.map

package/build/cjs/blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FoldableListBlockItem.js","sourceRoot":"../../../../../src","sources":["blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.tsx"],"names":[],"mappings":";;;;;AAAA,6CAAoD;AAEpD,6DAA4E;AAC5E,oFAAiD;AAEjD,mDAAqC;AAIrC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,uBAAuB,CAAC,CAAC;AAElC,MAAM,qBAAqB,GAAG,CAAC,EAClC,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,QAAQ,EACd,IAAI,EACJ,SAAS,GAAG,MAAM,EAClB,QAAQ,EACR,OAAO,GACkB,EAAE,EAAE;IAC7B,MAAM,EAAC,SAAS,EAAC,GAAG,IAAA,yBAAiB,EAAC,OAAO,CAAC,CAAC;IAE/C,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,EAAE,EAAE,SAAS,QAAC,IAAI,EAAE,UAAU,aAC3C,oCACI,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,OAAO,EAAE,OAAO,mBACD,QAAQ,EACvB,SAAS,EAAE,SAAS,aAEpB,uBAAC,iBAAI,cAAE,SAAS,GAAQ,EACxB,uBAAC,wBAAW,IACR,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,EAAE,EACR,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,GACvB,IACG,EACT,uBAAC,qBAAQ,IAAC,QAAQ,EAAE,QAAQ,YACxB,iCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,iBAAe,CAAC,QAAQ,aAC7C,uBAAC,uBAAU,IACP,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAE;gCACP,WAAW,EAAE,IAAI;gCACjB,oBAAoB,EAAE,IAAI;gCAC1B,wBAAwB,EAAE,SAAS,KAAK,MAAM;6BACjD,GACH,EACD,IAAI,IAAI,uBAAC,cAAI,OAAK,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,GAAI,IAC5E,GACC,IACT,CACT,CAAC;AACN,CAAC,CAAC;AA1CW,QAAA,qBAAqB,yBA0ChC","sourcesContent":["import {useActionHandlers} from '@gravity-ui/uikit';\n\nimport {Foldable, HTML, ToggleArrow, YFMWrapper} from '../../../components';\nimport Link from '../../../components/Link/Link';\nimport {FoldableListBlockItemProps} from '../../../models';\nimport {block} from '../../../utils';\n\nimport './FoldableListBlockItem.scss';\n\nconst b = block('FoldableListBlockItem');\n\nexport const FoldableListBlockItem = ({\n    title: itemTitle,\n    text: itemText,\n    link,\n    listStyle = 'dash',\n    isOpened,\n    onClick,\n}: FoldableListBlockItemProps) => {\n    const {onKeyDown} = useActionHandlers(onClick);\n\n    return (\n        <div className={b()} itemScope role={'listitem'}>\n            <button\n                className={b('title')}\n                onClick={onClick}\n                aria-expanded={isOpened}\n                onKeyDown={onKeyDown}\n            >\n                <HTML>{itemTitle}</HTML>\n                <ToggleArrow\n                    open={isOpened}\n                    size={16}\n                    type={'vertical'}\n                    iconType=\"navigation\"\n                    className={b('arrow')}\n                />\n            </button>\n            <Foldable isOpened={isOpened}>\n                <div className={b('text')} aria-hidden={!isOpened}>\n                    <YFMWrapper\n                        content={itemText}\n                        modifiers={{\n                            constructor: true,\n                            constructorListStyle: true,\n                            constructorListStyleDash: listStyle === 'dash',\n                        }}\n                    />\n                    {link && <Link {...link} tabIndex={isOpened ? 0 : -1} className={b('link')} />}\n                </div>\n            </Foldable>\n        </div>\n    );\n};\n"]}

package/build/cjs/blocks/FoldableList/schema.d.ts

@@ -0,0 +1,140 @@
+export declare const FoldableListBlock: {
+    'foldable-list-block': {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            items: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            title: {
+                oneOf: ({
+                    type: string;
+                    contentType: string;
+                    optionName: string;
+                } | {
+                    optionName: string;
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        text: {
+                            type: string;
+                            contentType: string;
+                        };
+                        textSize: {
+                            type: string;
+                            enum: string[];
+                        };
+                        url: {
+                            type: string;
+                        };
+                        urlTitle: {
+                            type: string;
+                        };
+                        resetMargin: {
+                            type: string;
+                        };
+                    };
+                    contentType?: undefined;
+                })[];
+            };
+            text: {
+                type: string;
+                contentType: string;
+                inputType: string;
+            };
+            additionalInfo: {
+                type: string;
+                contentType: string;
+            };
+            links: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            buttons: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
+            anchor: {
+                type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    text: {
+                        type: string;
+                        contentType: string;
+                    };
+                    url: {
+                        type: string;
+                    };
+                    urlTitle: {
+                        type: string;
+                    };
+                };
+            };
+            visible: {
+                type: string;
+                enum: string[];
+            };
+            resetPaddings: {
+                type: string;
+            };
+            context: {
+                type: string;
+            };
+            indent: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    top: {
+                        enum: string[];
+                    };
+                    bottom: {
+                        enum: string[];
+                    };
+                };
+            };
+            type: {};
+            when: {
+                type: string;
+            };
+        };
+    };
+};

package/build/cjs/blocks/FoldableList/schema.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FoldableListBlock = void 0;
+const tslib_1 = require("tslib");
+const omit_1 = tslib_1.__importDefault(require("lodash/omit.js"));
+const common_1 = require("../../schema/validators/common.js");
+const utils_1 = require("../../schema/validators/utils.js");
+const schema_1 = require("../../sub-blocks/Content/schema.js");
+const FoldableListBlockContentProps = (0, omit_1.default)(schema_1.ContentBase, ['size', 'theme']);
+exports.FoldableListBlock = {
+    'foldable-list-block': {
+        additionalProperties: false,
+        required: ['title', 'items'],
+        properties: {
+            ...common_1.BlockBaseProps,
+            ...FoldableListBlockContentProps,
+            items: (0, utils_1.filteredArray)({
+                type: 'object',
+                required: ['title', 'text'],
+                properties: {
+                    title: {
+                        type: 'string',
+                        contentType: 'text',
+                    },
+                    text: {
+                        type: 'string',
+                        contentType: 'yfm',
+                    },
+                    link: common_1.LinkProps,
+                    listStyle: {
+                        type: 'string',
+                        enum: ['dash', 'disk'],
+                    },
+                },
+            }),
+        },
+    },
+};
+//# sourceMappingURL=schema.js.map

package/build/cjs/blocks/FoldableList/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["blocks/FoldableList/schema.ts"],"names":[],"mappings":";;;;AAAA,kEAA+B;AAE/B,8DAAyE;AACzE,4DAA4D;AAC5D,+DAA4D;AAE5D,MAAM,6BAA6B,GAAG,IAAA,cAAI,EAAC,oBAAW,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;AAE9D,QAAA,iBAAiB,GAAG;IAC7B,qBAAqB,EAAE;QACnB,oBAAoB,EAAE,KAAK;QAC3B,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;QAC5B,UAAU,EAAE;YACR,GAAG,uBAAc;YACjB,GAAG,6BAA6B;YAChC,KAAK,EAAE,IAAA,qBAAa,EAAC;gBACjB,IAAI,EAAE,QAAQ;gBACd,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;gBAC3B,UAAU,EAAE;oBACR,KAAK,EAAE;wBACH,IAAI,EAAE,QAAQ;wBACd,WAAW,EAAE,MAAM;qBACtB;oBACD,IAAI,EAAE;wBACF,IAAI,EAAE,QAAQ;wBACd,WAAW,EAAE,KAAK;qBACrB;oBACD,IAAI,EAAE,kBAAS;oBACf,SAAS,EAAE;wBACP,IAAI,EAAE,QAAQ;wBACd,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;qBACzB;iBACJ;aACJ,CAAC;SACL;KACJ;CACJ,CAAC","sourcesContent":["import omit from 'lodash/omit';\n\nimport {BlockBaseProps, LinkProps} from '../../schema/validators/common';\nimport {filteredArray} from '../../schema/validators/utils';\nimport {ContentBase} from '../../sub-blocks/Content/schema';\n\nconst FoldableListBlockContentProps = omit(ContentBase, ['size', 'theme']);\n\nexport const FoldableListBlock = {\n    'foldable-list-block': {\n        additionalProperties: false,\n        required: ['title', 'items'],\n        properties: {\n            ...BlockBaseProps,\n            ...FoldableListBlockContentProps,\n            items: filteredArray({\n                type: 'object',\n                required: ['title', 'text'],\n                properties: {\n                    title: {\n                        type: 'string',\n                        contentType: 'text',\n                    },\n                    text: {\n                        type: 'string',\n                        contentType: 'yfm',\n                    },\n                    link: LinkProps,\n                    listStyle: {\n                        type: 'string',\n                        enum: ['dash', 'disk'],\n                    },\n                },\n            }),\n        },\n    },\n};\n"]}

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

@@ -30,6 +30,9 @@ unpredictable css rules order in build */
 .pc-header-block__content_theme_dark .pc-header-block__description .yfm {
   color: var(--g-color-text-light-primary);
 }
+.pc-header-block__content_theme_dark .pc-header-block__additional-info .yfm p {
+  color: var(--g-color-text-light-secondary) !important; /* stylelint-disable-line declaration-no-important */
+}
 .pc-header-block__content_vertical-offset {
   margin: 16px 0;
 }
@@ -90,6 +93,14 @@ unpredictable css rules order in build */
   line-height: var(--g-text-body-3-line-height);
   color: var(--g-color-text-primary);
 }
+.pc-header-block__additional-info {
+  margin-top: 16px;
+}
+.pc-header-block__additional-info .yfm p {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  color: var(--g-color-text-secondary) !important; /* stylelint-disable-line declaration-no-important */
+}
 .pc-header-block__buttons {
   margin-top: 16px;
 }
@@ -97,7 +108,7 @@ unpredictable css rules order in build */
   margin-top: 16px;
 }
 .pc-header-block__button.pc-header-block__button:not(:last-child) {
-  margin-right: 16px;
+  margin-right: 12px;
 }
 
 .pc-header-block__media {

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

@@ -25,7 +25,7 @@ const Background = ({ background, isMobile }) => {
 };
 const FullWidthBackground = ({ background }) => ((0, jsx_runtime_1.jsx)("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background?.color } }));
 const HeaderBlock = (props) => {
-    const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, renderTitle, children, mediaView = 'full', centered, } = props;
+    const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, renderTitle, children, mediaView = 'full', centered, additionalInfo, } = props;
     const isMobile = React.useContext(mobileContext_1.MobileContext);
     const theme = (0, theme_1.useTheme)();
     const hasRightSideImage = Boolean((image || video) && !centered);
@@ -56,6 +56,9 @@ const HeaderBlock = (props) => {
                                         }), children: (0, jsx_runtime_1.jsxs)(grid_1.Col, { sizes: titleSizes, className: b('content-inner', { centered }), children: [overtitle && ((0, jsx_runtime_1.jsx)("div", { className: b('overtitle'), children: typeof overtitle === 'string' ? ((0, jsx_runtime_1.jsx)(components_1.HTML, { children: overtitle })) : (overtitle) })), (0, jsx_runtime_1.jsxs)("h1", { className: b('title'), id: titleId, children: [status, renderTitle ? renderTitle(title) : (0, jsx_runtime_1.jsx)(components_1.HTML, { children: title })] }), description && ((0, jsx_runtime_1.jsx)("div", { className: b('description', { theme: textTheme }), children: (0, jsx_runtime_1.jsx)(YFMWrapper_1.default, { content: description, modifiers: {
                                                             constructor: true,
                                                             constructorTheme: textTheme,
+                                                        } }) })), additionalInfo && ((0, jsx_runtime_1.jsx)("div", { className: b('additional-info', { theme: textTheme }), children: (0, jsx_runtime_1.jsx)(YFMWrapper_1.default, { content: additionalInfo, modifiers: {
+                                                            constructor: true,
+                                                            constructorTheme: textTheme,
                                                         } }) })), buttons && ((0, jsx_runtime_1.jsx)("div", { className: b('buttons'), "data-qa": "header-buttons", children: buttons.map((button, index) => ((0, jsx_runtime_1.jsx)(components_1.RouterLink, { href: button.url, children: (0, jsx_runtime_1.jsx)(components_1.Button, { className: b('button'), size: "xl", extraProps: {
                                                                 'aria-describedby': titleId,
                                                                 ...button.extraProps,

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"../../../../src","sources":["blocks/Header/Header.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable complexity */\nimport {useUniqId} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {Button, HTML, Media, RouterLink} from '../../components';\nimport HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs/HeaderBreadcrumbs';\nimport {getMediaImage} from '../../components/Media/Image/utils';\nimport YFMWrapper from '../../components/YFMWrapper/YFMWrapper';\nimport {MobileContext} from '../../context/mobileContext';\nimport {useTheme} from '../../context/theme';\nimport {Col, Grid, Row} from '../../grid';\nimport {ClassNameProps, HeaderBlockBackground, HeaderBlockProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\nimport {mergeVideoMicrodata} from '../../utils/microdata';\n\nimport {getImageSize, getTitleSizes, titleWithImageSizes} from './utils';\nimport './Header.scss';\n\nconst b = block('header-block');\n\ntype HeaderBlockFullProps = HeaderBlockProps & ClassNameProps;\n\ninterface BackgroundProps {\n    background: HeaderBlockBackground;\n    isMobile: boolean;\n}\n\nconst Background = ({background, isMobile}: BackgroundProps) => {\n    const {url, image, fullWidthMedia, video, color} = background;\n    const imageObject = url ? getMediaImage(url) : image;\n    const renderMedia = !isMobile || (typeof image === 'object' && 'mobile' in image);\n\n    return (\n        <div\n            className={b('background', {media: true, 'full-width-media': fullWidthMedia})}\n            style={{backgroundColor: color}}\n        >\n            {renderMedia && (\n                <Media\n                    {...background}\n                    className={b('background-media')}\n                    imageClassName={b('image')}\n                    videoClassName={b('video')}\n                    isBackground={true}\n                    parallax={false}\n                    video={isMobile ? undefined : video}\n                    image={imageObject}\n                />\n            )}\n        </div>\n    );\n};\n\ninterface FullWidthBackgroundProps {\n    background: HeaderBlockBackground;\n}\n\nconst FullWidthBackground = ({background}: FullWidthBackgroundProps) => (\n    <div\n        className={b('background', {['full-width']: true})}\n        style={{backgroundColor: background?.color}}\n    />\n);\n\nexport const HeaderBlock = (props: React.PropsWithChildren<HeaderBlockFullProps>) => {\n    const {\n        title,\n        overtitle,\n        description,\n        buttons,\n        image,\n        video,\n        width = 'm',\n        imageSize,\n        offset = 'default',\n        background,\n        theme: textTheme = 'light',\n        verticalOffset = 'm',\n        className,\n        breadcrumbs,\n        status,\n        renderTitle,\n        children,\n        mediaView = 'full',\n        centered,\n    } = props;\n    const isMobile = React.useContext(MobileContext);\n    const theme = useTheme();\n    const hasRightSideImage = Boolean((image || video) && !centered);\n    const curImageSize = imageSize || getImageSize(width);\n    const titleSizes = hasRightSideImage ? titleWithImageSizes(curImageSize) : getTitleSizes(width);\n    let curVerticalOffset = verticalOffset;\n\n    if (hasRightSideImage && !verticalOffset) {\n        curVerticalOffset = 'm';\n    }\n\n    const backgroundThemed = background && getThemedValue(background, theme);\n    const imageThemed = image && getThemedValue(image, theme);\n    const videoThemed = video && getThemedValue(video, theme);\n    const mediaWithMicrodata = mergeVideoMicrodata(\n        {video: videoThemed, image: imageThemed},\n        {\n            name: title,\n            description,\n        },\n    );\n    const fullWidth = backgroundThemed?.fullWidth || backgroundThemed?.fullWidthMedia;\n    const titleId = useUniqId();\n\n    return (\n        <header\n            className={b(\n                {\n                    ['has-media']: hasRightSideImage,\n                    ['full-width']: fullWidth,\n                    ['media-view']: mediaView,\n                    ['controls-view']: textTheme,\n                },\n                className,\n            )}\n        >\n            {backgroundThemed && fullWidth && <FullWidthBackground background={backgroundThemed} />}\n            {backgroundThemed && <Background background={backgroundThemed} isMobile={isMobile} />}\n            <Grid containerClass={b('container-fluid')}>\n                {breadcrumbs && (\n                    <Row className={b('breadcrumbs')}>\n                        <Col>\n                            <HeaderBreadcrumbs {...breadcrumbs} theme={textTheme} />\n                        </Col>\n                    </Row>\n                )}\n                <Row>\n                    <Col reset className={b('content-wrapper')}>\n                        <Row>\n                            <Col\n                                className={b('content', {\n                                    offset,\n                                    theme: textTheme,\n                                    'vertical-offset': curVerticalOffset,\n                                })}\n                            >\n                                <Col sizes={titleSizes} className={b('content-inner', {centered})}>\n                                    {overtitle && (\n                                        <div className={b('overtitle')}>\n                                            {typeof overtitle === 'string' ? (\n                                                <HTML>{overtitle}</HTML>\n                                            ) : (\n                                                overtitle\n                                            )}\n                                        </div>\n                                    )}\n                                    <h1 className={b('title')} id={titleId}>\n                                        {status}\n                                        {renderTitle ? renderTitle(title) : <HTML>{title}</HTML>}\n                                    </h1>\n                                    {description && (\n                                        <div className={b('description', {theme: textTheme})}>\n                                            <YFMWrapper\n                                                content={description}\n                                                modifiers={{\n                                                    constructor: true,\n                                                    constructorTheme: textTheme,\n                                                }}\n                                            />\n                                        </div>\n                                    )}\n                                    {buttons && (\n                                        <div className={b('buttons')} data-qa=\"header-buttons\">\n                                            {buttons.map((button, index) => (\n                                                <RouterLink href={button.url} key={index}>\n                                                    <Button\n                                                        key={index}\n                                                        className={b('button')}\n                                                        size=\"xl\"\n                                                        extraProps={{\n                                                            'aria-describedby': titleId,\n                                                            ...button.extraProps,\n                                                        }}\n                                                        {...button}\n                                                    />\n                                                </RouterLink>\n                                            ))}\n                                        </div>\n                                    )}\n                                    {children}\n                                </Col>\n                            </Col>\n                        </Row>\n                        {hasRightSideImage && (\n                            <Media\n                                className={b('media', {[curImageSize]: true})}\n                                videoClassName={b('video')}\n                                imageClassName={b('image')}\n                                {...mediaWithMicrodata}\n                            />\n                        )}\n                    </Col>\n                </Row>\n            </Grid>\n        </header>\n    );\n};\n\nexport default HeaderBlock;\n"]}
+{"version":3,"file":"Header.js","sourceRoot":"../../../../src","sources":["blocks/Header/Header.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable complexity */\nimport {useUniqId} from '@gravity-ui/uikit';\nimport * as React from 'react';\n\nimport {Button, HTML, Media, RouterLink} from '../../components';\nimport HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs/HeaderBreadcrumbs';\nimport {getMediaImage} from '../../components/Media/Image/utils';\nimport YFMWrapper from '../../components/YFMWrapper/YFMWrapper';\nimport {MobileContext} from '../../context/mobileContext';\nimport {useTheme} from '../../context/theme';\nimport {Col, Grid, Row} from '../../grid';\nimport {ClassNameProps, HeaderBlockBackground, HeaderBlockProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\nimport {mergeVideoMicrodata} from '../../utils/microdata';\n\nimport {getImageSize, getTitleSizes, titleWithImageSizes} from './utils';\nimport './Header.scss';\n\nconst b = block('header-block');\n\ntype HeaderBlockFullProps = HeaderBlockProps & ClassNameProps;\n\ninterface BackgroundProps {\n    background: HeaderBlockBackground;\n    isMobile: boolean;\n}\n\nconst Background = ({background, isMobile}: BackgroundProps) => {\n    const {url, image, fullWidthMedia, video, color} = background;\n    const imageObject = url ? getMediaImage(url) : image;\n    const renderMedia = !isMobile || (typeof image === 'object' && 'mobile' in image);\n\n    return (\n        <div\n            className={b('background', {media: true, 'full-width-media': fullWidthMedia})}\n            style={{backgroundColor: color}}\n        >\n            {renderMedia && (\n                <Media\n                    {...background}\n                    className={b('background-media')}\n                    imageClassName={b('image')}\n                    videoClassName={b('video')}\n                    isBackground={true}\n                    parallax={false}\n                    video={isMobile ? undefined : video}\n                    image={imageObject}\n                />\n            )}\n        </div>\n    );\n};\n\ninterface FullWidthBackgroundProps {\n    background: HeaderBlockBackground;\n}\n\nconst FullWidthBackground = ({background}: FullWidthBackgroundProps) => (\n    <div\n        className={b('background', {['full-width']: true})}\n        style={{backgroundColor: background?.color}}\n    />\n);\n\nexport const HeaderBlock = (props: React.PropsWithChildren<HeaderBlockFullProps>) => {\n    const {\n        title,\n        overtitle,\n        description,\n        buttons,\n        image,\n        video,\n        width = 'm',\n        imageSize,\n        offset = 'default',\n        background,\n        theme: textTheme = 'light',\n        verticalOffset = 'm',\n        className,\n        breadcrumbs,\n        status,\n        renderTitle,\n        children,\n        mediaView = 'full',\n        centered,\n        additionalInfo,\n    } = props;\n    const isMobile = React.useContext(MobileContext);\n    const theme = useTheme();\n    const hasRightSideImage = Boolean((image || video) && !centered);\n    const curImageSize = imageSize || getImageSize(width);\n    const titleSizes = hasRightSideImage ? titleWithImageSizes(curImageSize) : getTitleSizes(width);\n    let curVerticalOffset = verticalOffset;\n\n    if (hasRightSideImage && !verticalOffset) {\n        curVerticalOffset = 'm';\n    }\n\n    const backgroundThemed = background && getThemedValue(background, theme);\n    const imageThemed = image && getThemedValue(image, theme);\n    const videoThemed = video && getThemedValue(video, theme);\n    const mediaWithMicrodata = mergeVideoMicrodata(\n        {video: videoThemed, image: imageThemed},\n        {\n            name: title,\n            description,\n        },\n    );\n    const fullWidth = backgroundThemed?.fullWidth || backgroundThemed?.fullWidthMedia;\n    const titleId = useUniqId();\n\n    return (\n        <header\n            className={b(\n                {\n                    ['has-media']: hasRightSideImage,\n                    ['full-width']: fullWidth,\n                    ['media-view']: mediaView,\n                    ['controls-view']: textTheme,\n                },\n                className,\n            )}\n        >\n            {backgroundThemed && fullWidth && <FullWidthBackground background={backgroundThemed} />}\n            {backgroundThemed && <Background background={backgroundThemed} isMobile={isMobile} />}\n            <Grid containerClass={b('container-fluid')}>\n                {breadcrumbs && (\n                    <Row className={b('breadcrumbs')}>\n                        <Col>\n                            <HeaderBreadcrumbs {...breadcrumbs} theme={textTheme} />\n                        </Col>\n                    </Row>\n                )}\n                <Row>\n                    <Col reset className={b('content-wrapper')}>\n                        <Row>\n                            <Col\n                                className={b('content', {\n                                    offset,\n                                    theme: textTheme,\n                                    'vertical-offset': curVerticalOffset,\n                                })}\n                            >\n                                <Col sizes={titleSizes} className={b('content-inner', {centered})}>\n                                    {overtitle && (\n                                        <div className={b('overtitle')}>\n                                            {typeof overtitle === 'string' ? (\n                                                <HTML>{overtitle}</HTML>\n                                            ) : (\n                                                overtitle\n                                            )}\n                                        </div>\n                                    )}\n                                    <h1 className={b('title')} id={titleId}>\n                                        {status}\n                                        {renderTitle ? renderTitle(title) : <HTML>{title}</HTML>}\n                                    </h1>\n                                    {description && (\n                                        <div className={b('description', {theme: textTheme})}>\n                                            <YFMWrapper\n                                                content={description}\n                                                modifiers={{\n                                                    constructor: true,\n                                                    constructorTheme: textTheme,\n                                                }}\n                                            />\n                                        </div>\n                                    )}\n                                    {additionalInfo && (\n                                        <div className={b('additional-info', {theme: textTheme})}>\n                                            <YFMWrapper\n                                                content={additionalInfo}\n                                                modifiers={{\n                                                    constructor: true,\n                                                    constructorTheme: textTheme,\n                                                }}\n                                            />\n                                        </div>\n                                    )}\n                                    {buttons && (\n                                        <div className={b('buttons')} data-qa=\"header-buttons\">\n                                            {buttons.map((button, index) => (\n                                                <RouterLink href={button.url} key={index}>\n                                                    <Button\n                                                        key={index}\n                                                        className={b('button')}\n                                                        size=\"xl\"\n                                                        extraProps={{\n                                                            'aria-describedby': titleId,\n                                                            ...button.extraProps,\n                                                        }}\n                                                        {...button}\n                                                    />\n                                                </RouterLink>\n                                            ))}\n                                        </div>\n                                    )}\n                                    {children}\n                                </Col>\n                            </Col>\n                        </Row>\n                        {hasRightSideImage && (\n                            <Media\n                                className={b('media', {[curImageSize]: true})}\n                                videoClassName={b('video')}\n                                imageClassName={b('image')}\n                                {...mediaWithMicrodata}\n                            />\n                        )}\n                    </Col>\n                </Row>\n            </Grid>\n        </header>\n    );\n};\n\nexport default HeaderBlock;\n"]}

package/build/cjs/blocks/Header/schema.d.ts

@@ -331,6 +331,11 @@ export declare const HeaderProperties: {
         contentType: string;
         inputType: string;
     };
+    additionalInfo: {
+        type: string;
+        contentType: string;
+        inputType: string;
+    };
     width: {
         type: string;
         enum: string[];
@@ -898,6 +903,11 @@ export declare const HeaderBlock: {
                 contentType: string;
                 inputType: string;
             };
+            additionalInfo: {
+                type: string;
+                contentType: string;
+                inputType: string;
+            };
             width: {
                 type: string;
                 enum: string[];

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

@@ -28,6 +28,11 @@ exports.HeaderProperties = {
         contentType: 'yfm',
         inputType: 'textarea',
     },
+    additionalInfo: {
+        type: 'string',
+        contentType: 'yfm',
+        inputType: 'textarea',
+    },
     width: {
         type: 'string',
         enum: ['s', 'm', 'l'],