npm - @gravity-ui/page-constructor - Versions diffs - 8.16.0 → 8.17.0 - Mend

@gravity-ui/page-constructor 8.16.0 → 8.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

package/build/cjs/demo/HeroAndMedia.stories.js CHANGED Viewed

@@ -7,52 +7,41 @@ const utils_1 = require("../../.storybook/utils.js");
 const PageConstructor_1 = require("../containers/PageConstructor/index.js");
 const data_json_1 = tslib_1.__importDefault(require("../blocks/Banner/__stories__/data.json"));
 const data_json_2 = tslib_1.__importDefault(require("../blocks/Companies/__stories__/data.json"));
-const data_json_3 = tslib_1.__importDefault(require("../blocks/Header/__stories__/data.json"));
-const data_json_4 = tslib_1.__importDefault(require("../blocks/Info/__stories__/data.json"));
-const data_json_5 = tslib_1.__importDefault(require("../blocks/Media/__stories__/data.json"));
-const data_json_6 = tslib_1.__importDefault(require("../navigation/__stories__/data.json"));
+const data_json_3 = tslib_1.__importDefault(require("../blocks/Info/__stories__/data.json"));
+const data_json_4 = tslib_1.__importDefault(require("../blocks/Media/__stories__/data.json"));
+const data_json_5 = tslib_1.__importDefault(require("../navigation/__stories__/data.json"));
 exports.default = {
-    title: 'Lab/Tokenization/Blocks/HeroAndMedia',
+    title: 'Lab/Tokenization/Blocks/MediaAndPromo',
     component: PageConstructor_1.PageConstructor,
 };
 const Template = ({ navigation, custom = {}, }) => ((0, jsx_runtime_1.jsx)(PageConstructor_1.PageConstructor, { navigation: navigation, custom: custom, content: {
         blocks: [
-            // header-block: default with action buttons
-            (0, utils_1.blockTransform)(data_json_3.default.default),
-            // header-block: with breadcrumbs + light background
-            (0, utils_1.blockTransform)(data_json_3.default.breadcrumbs[0]),
-            // header-block: with breadcrumbs + dark theme
-            (0, utils_1.blockTransform)(data_json_3.default.breadcrumbs[1]),
-            // header-block: with image
-            (0, utils_1.blockTransform)(data_json_3.default.image),
-            // header-block: with background image and color (media variant)
-            (0, utils_1.blockTransform)({ type: 'header-block', ...data_json_3.default.media.image }),
             // banner-block: light theme with themed image
             (0, utils_1.blockTransform)(data_json_1.default.default.content),
             // banner-block: forced dark theme
             (0, utils_1.blockTransform)(data_json_1.default.darkTheme.content),
             // media-block: default with image
-            (0, utils_1.blockTransform)(data_json_5.default.default),
+            (0, utils_1.blockTransform)(data_json_4.default.default),
             // media-block: image slider
-            (0, utils_1.blockTransform)(data_json_5.default.imageSlider),
+            (0, utils_1.blockTransform)(data_json_4.default.imageSlider),
             // media-block: youtube embed
-            (0, utils_1.blockTransform)({ type: 'media-block', ...data_json_5.default.video.youtube }),
+            (0, utils_1.blockTransform)({ type: 'media-block', ...data_json_4.default.video.youtube }),
             // media-block: video with controls
-            (0, utils_1.blockTransform)({ type: 'media-block', ...data_json_5.default.video.staticWithControls }),
+            (0, utils_1.blockTransform)({ type: 'media-block', ...data_json_4.default.video.staticWithControls }),
             // media-block: video with preview
-            (0, utils_1.blockTransform)({ type: 'media-block', ...data_json_5.default.video.videoWithPreview }),
+            (0, utils_1.blockTransform)({ type: 'media-block', ...data_json_4.default.video.videoWithPreview }),
             // companies-block: title only
             (0, utils_1.blockTransform)(data_json_2.default.default.content),
             // companies-block: with description
             (0, utils_1.blockTransform)(data_json_2.default.withDescription.content),
             // info-block: dark theme (default)
-            (0, utils_1.blockTransform)(data_json_4.default.default),
+            (0, utils_1.blockTransform)(data_json_3.default.default),
             // info-block: light theme with background color
-            (0, utils_1.blockTransform)({ type: 'info-block', ...data_json_4.default.light }),
+            (0, utils_1.blockTransform)({ type: 'info-block', ...data_json_3.default.light }),
         ],
     } }));
 exports.Default = Template.bind({});
 exports.Default.args = {
-    navigation: data_json_6.default.navigation,
+    navigation: data_json_5.default.navigation,
 };
 //# sourceMappingURL=HeroAndMedia.stories.js.map

package/build/cjs/demo/HeroAndMedia.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeroAndMedia.stories.js","sourceRoot":"../../../src","sources":["demo/HeroAndMedia.stories.tsx"],"names":[],"mappings":";;;;;AAEA,qDAAsD;AACtD,4EAA8D;AAG9D,+FAAgE;AAChE,kGAAsE;AACtE~~,+FAAgE;AAChE~~,6FAA4D;AAC5D,8FAA8D;AAC9D,4FAA0D;AAE1D,kBAAe;IACX,KAAK,EAAE,~~sCAAsC~~;~~IAC7C~~,SAAS,EAAE,iCAAe;CACrB,CAAC;AAEV,MAAM,QAAQ,GAAiE,CAAC,EAC5E,UAAU,EACV,MAAM,GAAG,EAAE,GACd,EAAE,EAAE,CAAC,CACF,uBAAC,iCAAe,IACZ,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,EACH;QACI,MAAM,EAAE;YACJ,~~4CAA4C;YAC5C,IAAA,sBAAc,EAAC,mBAAU,CAAC,OAAO,CAAC;YAClC,oDAAoD;YACpD,IAAA,sBAAc,EAAC,mBAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;YACzC,~~8CAA8C;YAC9C,IAAA,sBAAc,EAAC,mBAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;YACzC,2BAA2B;YAC3B,IAAA,sBAAc,EAAC,mBAAU,CAAC,KAAK,CAAC;YAChC,gEAAgE;YAChE,IAAA,sBAAc,EAAC,EAAC,IAAI,EAAE,cAAc,EAAE,GAAG,mBAAU,CAAC,KAAK,CAAC,KAAK,EAAC,CAAC;YAEjE,8CAA8C;YAC9C,IAAA,sBAAc,EAAC,mBAAU,CAAC,OAAO,CAAC,OAAO,CAAC;YAC1C,kCAAkC;YAClC,IAAA,sBAAc,EAAC,mBAAU,CAAC,SAAS,CAAC,OAAO,CAAC;YAE5C,kCAAkC;YAClC,IAAA,sBAAc,EAAC,mBAAS,CAAC,OAAO,CAAC;YACjC,4BAA4B;YAC5B,IAAA,sBAAc,EAAC,mBAAS,CAAC,WAAW,CAAC;YACrC,6BAA6B;YAC7B,IAAA,sBAAc,EAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,mBAAS,CAAC,KAAK,CAAC,OAAO,EAAC,CAAC;YACjE,mCAAmC;YACnC,IAAA,sBAAc,EAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,mBAAS,CAAC,KAAK,CAAC,kBAAkB,EAAC,CAAC;YAC5E,kCAAkC;YAClC,IAAA,sBAAc,EAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,mBAAS,CAAC,KAAK,CAAC,gBAAgB,EAAC,CAAC;YAE1E,8BAA8B;YAC9B,IAAA,sBAAc,EAAC,mBAAa,CAAC,OAAO,CAAC,OAAO,CAAC;YAC7C,oCAAoC;YACpC,IAAA,sBAAc,EAAC,mBAAa,CAAC,eAAe,CAAC,OAAO,CAAC;YAErD,mCAAmC;YACnC,IAAA,sBAAc,EAAC,mBAAQ,CAAC,OAAO,CAAC;YAChC,gDAAgD;YAChD,IAAA,sBAAc,EAAC,EAAC,IAAI,EAAE,YAAY,EAAE,GAAG,mBAAQ,CAAC,KAAK,EAAC,CAAC;SAC1D;KACW,GAEtB,CACL,CAAC;AAEW,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,eAAO,CAAC,IAAI,GAAG;IACX,UAAU,EAAE,mBAAO,CAAC,UAA4B;CACnD,CAAC","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {blockTransform} from '../../.storybook/utils';\nimport {PageConstructor} from '../containers/PageConstructor';\nimport {CustomConfig, NavigationData, PageContent} from '../models';\n\nimport bannerData from '../blocks/Banner/__stories__/data.json';\nimport companiesData from '../blocks/Companies/__stories__/data.json';\nimport ~~headerData from '../blocks/Header/__stories__/data.json';\nimport~~ infoData from '../blocks/Info/__stories__/data.json';\nimport mediaData from '../blocks/Media/__stories__/data.json';\nimport navData from '../navigation/__stories__/data.json';\n\nexport default {\n title: 'Lab/Tokenization/Blocks/~~HeroAndMedia~~',\n component: PageConstructor,\n} as Meta;\n\nconst Template: StoryFn<{navigation: NavigationData; custom?: CustomConfig}> = ({\n navigation,\n custom = {},\n}) => (\n <PageConstructor\n navigation={navigation}\n custom={custom}\n content={\n {\n blocks: [\n // header-block: default with action buttons\n blockTransform(headerData.default),\n // header-block: with breadcrumbs + light background\n blockTransform(headerData.breadcrumbs[0]),\n // header-block: with breadcrumbs + dark theme\n blockTransform(headerData.breadcrumbs[1]),\n // header-block: with image\n blockTransform(headerData.image),\n // header-block: with background image and color (media variant)\n blockTransform({type: 'header-block', ...headerData.media.image}),\n\n // banner-block: light theme with themed image\n blockTransform(bannerData.default.content),\n // banner-block: forced dark theme\n blockTransform(bannerData.darkTheme.content),\n\n // media-block: default with image\n blockTransform(mediaData.default),\n // media-block: image slider\n blockTransform(mediaData.imageSlider),\n // media-block: youtube embed\n blockTransform({type: 'media-block', ...mediaData.video.youtube}),\n // media-block: video with controls\n blockTransform({type: 'media-block', ...mediaData.video.staticWithControls}),\n // media-block: video with preview\n blockTransform({type: 'media-block', ...mediaData.video.videoWithPreview}),\n\n // companies-block: title only\n blockTransform(companiesData.default.content),\n // companies-block: with description\n blockTransform(companiesData.withDescription.content),\n\n // info-block: dark theme (default)\n blockTransform(infoData.default),\n // info-block: light theme with background color\n blockTransform({type: 'info-block', ...infoData.light}),\n ],\n } as PageContent\n }\n />\n);\n\nexport const Default = Template.bind({});\nDefault.args = {\n navigation: navData.navigation as NavigationData,\n};\n"]}
1	+ {"version":3,"file":"HeroAndMedia.stories.js","sourceRoot":"../../../src","sources":["demo/HeroAndMedia.stories.tsx"],"names":[],"mappings":";;;;;AAEA,qDAAsD;AACtD,4EAA8D;AAG9D,+FAAgE;AAChE,kGAAsE;AACtE,6FAA4D;AAC5D,8FAA8D;AAC9D,4FAA0D;AAE1D,kBAAe;IACX,KAAK,EAAE,uCAAuC;IAC9C,SAAS,EAAE,iCAAe;CACrB,CAAC;AAEV,MAAM,QAAQ,GAAiE,CAAC,EAC5E,UAAU,EACV,MAAM,GAAG,EAAE,GACd,EAAE,EAAE,CAAC,CACF,uBAAC,iCAAe,IACZ,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,EACH;QACI,MAAM,EAAE;YACJ,8CAA8C;YAC9C,IAAA,sBAAc,EAAC,mBAAU,CAAC,OAAO,CAAC,OAAO,CAAC;YAC1C,kCAAkC;YAClC,IAAA,sBAAc,EAAC,mBAAU,CAAC,SAAS,CAAC,OAAO,CAAC;YAE5C,kCAAkC;YAClC,IAAA,sBAAc,EAAC,mBAAS,CAAC,OAAO,CAAC;YACjC,4BAA4B;YAC5B,IAAA,sBAAc,EAAC,mBAAS,CAAC,WAAW,CAAC;YACrC,6BAA6B;YAC7B,IAAA,sBAAc,EAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,mBAAS,CAAC,KAAK,CAAC,OAAO,EAAC,CAAC;YACjE,mCAAmC;YACnC,IAAA,sBAAc,EAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,mBAAS,CAAC,KAAK,CAAC,kBAAkB,EAAC,CAAC;YAC5E,kCAAkC;YAClC,IAAA,sBAAc,EAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,mBAAS,CAAC,KAAK,CAAC,gBAAgB,EAAC,CAAC;YAE1E,8BAA8B;YAC9B,IAAA,sBAAc,EAAC,mBAAa,CAAC,OAAO,CAAC,OAAO,CAAC;YAC7C,oCAAoC;YACpC,IAAA,sBAAc,EAAC,mBAAa,CAAC,eAAe,CAAC,OAAO,CAAC;YAErD,mCAAmC;YACnC,IAAA,sBAAc,EAAC,mBAAQ,CAAC,OAAO,CAAC;YAChC,gDAAgD;YAChD,IAAA,sBAAc,EAAC,EAAC,IAAI,EAAE,YAAY,EAAE,GAAG,mBAAQ,CAAC,KAAK,EAAC,CAAC;SAC1D;KACW,GAEtB,CACL,CAAC;AAEW,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,eAAO,CAAC,IAAI,GAAG;IACX,UAAU,EAAE,mBAAO,CAAC,UAA4B;CACnD,CAAC","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {blockTransform} from '../../.storybook/utils';\nimport {PageConstructor} from '../containers/PageConstructor';\nimport {CustomConfig, NavigationData, PageContent} from '../models';\n\nimport bannerData from '../blocks/Banner/__stories__/data.json';\nimport companiesData from '../blocks/Companies/__stories__/data.json';\nimport infoData from '../blocks/Info/__stories__/data.json';\nimport mediaData from '../blocks/Media/__stories__/data.json';\nimport navData from '../navigation/__stories__/data.json';\n\nexport default {\n title: 'Lab/Tokenization/Blocks/MediaAndPromo',\n component: PageConstructor,\n} as Meta;\n\nconst Template: StoryFn<{navigation: NavigationData; custom?: CustomConfig}> = ({\n navigation,\n custom = {},\n}) => (\n <PageConstructor\n navigation={navigation}\n custom={custom}\n content={\n {\n blocks: [\n // banner-block: light theme with themed image\n blockTransform(bannerData.default.content),\n // banner-block: forced dark theme\n blockTransform(bannerData.darkTheme.content),\n\n // media-block: default with image\n blockTransform(mediaData.default),\n // media-block: image slider\n blockTransform(mediaData.imageSlider),\n // media-block: youtube embed\n blockTransform({type: 'media-block', ...mediaData.video.youtube}),\n // media-block: video with controls\n blockTransform({type: 'media-block', ...mediaData.video.staticWithControls}),\n // media-block: video with preview\n blockTransform({type: 'media-block', ...mediaData.video.videoWithPreview}),\n\n // companies-block: title only\n blockTransform(companiesData.default.content),\n // companies-block: with description\n blockTransform(companiesData.withDescription.content),\n\n // info-block: dark theme (default)\n blockTransform(infoData.default),\n // info-block: light theme with background color\n blockTransform({type: 'info-block', ...infoData.light}),\n ],\n } as PageContent\n }\n />\n);\n\nexport const Default = Template.bind({});\nDefault.args = {\n navigation: navData.navigation as NavigationData,\n};\n"]}

package/build/cjs/demo/TokenizationHeader.stories.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { Meta } from '@storybook/react';
+import { HeaderBlockModel, NavigationData } from "../models/index.js";
+interface StoryArgs {
+    headerBlock: HeaderBlockModel;
+    navigation: NavigationData;
+}
+declare const _default: Meta;
+export default _default;
+export declare const Default: import("@storybook/core/csf", { with: { "resolution-mode": "import" } }).AnnotatedStoryFn<import("@storybook/react").ReactRenderer, StoryArgs>;
+export declare const BreadcrumbsLight: import("@storybook/core/csf", { with: { "resolution-mode": "import" } }).AnnotatedStoryFn<import("@storybook/react").ReactRenderer, StoryArgs>;
+export declare const BreadcrumbsDark: import("@storybook/core/csf", { with: { "resolution-mode": "import" } }).AnnotatedStoryFn<import("@storybook/react").ReactRenderer, StoryArgs>;
+export declare const Image: import("@storybook/core/csf", { with: { "resolution-mode": "import" } }).AnnotatedStoryFn<import("@storybook/react").ReactRenderer, StoryArgs>;
+export declare const BackgroundMedia: import("@storybook/core/csf", { with: { "resolution-mode": "import" } }).AnnotatedStoryFn<import("@storybook/react").ReactRenderer, StoryArgs>;

package/build/cjs/demo/TokenizationHeader.stories.js ADDED Viewed

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackgroundMedia = exports.Image = exports.BreadcrumbsDark = exports.BreadcrumbsLight = exports.Default = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PageConstructor_1 = require("../containers/PageConstructor/index.js");
+const tokenizationLanding_1 = require("./tokenizationLanding.js");
+const data_json_1 = tslib_1.__importDefault(require("../blocks/Header/__stories__/data.json"));
+const data_json_2 = tslib_1.__importDefault(require("../navigation/__stories__/data.json"));
+exports.default = {
+    title: 'Lab/Tokenization/Blocks/Header',
+    component: PageConstructor_1.PageConstructor,
+};
+const Template = ({ headerBlock, navigation }) => ((0, jsx_runtime_1.jsx)(PageConstructor_1.PageConstructor, { navigation: navigation, content: (0, tokenizationLanding_1.createTokenizationLandingContent)(headerBlock) }));
+const navigation = data_json_2.default.navigation;
+exports.Default = Template.bind({});
+exports.Default.args = {
+    navigation,
+    headerBlock: data_json_1.default.default,
+};
+exports.BreadcrumbsLight = Template.bind({});
+exports.BreadcrumbsLight.args = {
+    navigation,
+    headerBlock: data_json_1.default.breadcrumbs[0],
+};
+exports.BreadcrumbsDark = Template.bind({});
+exports.BreadcrumbsDark.args = {
+    navigation,
+    headerBlock: data_json_1.default.breadcrumbs[1],
+};
+exports.Image = Template.bind({});
+exports.Image.args = {
+    navigation,
+    headerBlock: {
+        ...data_json_1.default.image,
+        title: data_json_1.default.image.title.replace('{{width}}', 'm'),
+    },
+};
+exports.BackgroundMedia = Template.bind({});
+exports.BackgroundMedia.args = {
+    navigation,
+    headerBlock: {
+        type: 'header-block',
+        ...data_json_1.default.media.image,
+    },
+};
+//# sourceMappingURL=TokenizationHeader.stories.js.map

package/build/cjs/demo/TokenizationHeader.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TokenizationHeader.stories.js","sourceRoot":"../../../src","sources":["demo/TokenizationHeader.stories.tsx"],"names":[],"mappings":";;;;;AAEA,4EAA8D;AAG9D,kEAAuE;AAEvE,+FAAgE;AAChE,4FAA0D;AAO1D,kBAAe;IACX,KAAK,EAAE,gCAAgC;IACvC,SAAS,EAAE,iCAAe;CACrB,CAAC;AAEV,MAAM,QAAQ,GAAuB,CAAC,EAAC,WAAW,EAAE,UAAU,EAAC,EAAE,EAAE,CAAC,CAChE,uBAAC,iCAAe,IACZ,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,IAAA,sDAAgC,EAAC,WAAW,CAAC,GACxD,CACL,CAAC;AAEF,MAAM,UAAU,GAAG,mBAAO,CAAC,UAA4B,CAAC;AAE3C,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,eAAO,CAAC,IAAI,GAAG;IACX,UAAU;IACV,WAAW,EAAE,mBAAU,CAAC,OAA2B;CACtD,CAAC;AAEW,QAAA,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAClD,wBAAgB,CAAC,IAAI,GAAG;IACpB,UAAU;IACV,WAAW,EAAE,mBAAU,CAAC,WAAW,CAAC,CAAC,CAAqB;CAC7D,CAAC;AAEW,QAAA,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,uBAAe,CAAC,IAAI,GAAG;IACnB,UAAU;IACV,WAAW,EAAE,mBAAU,CAAC,WAAW,CAAC,CAAC,CAAqB;CAC7D,CAAC;AAEW,QAAA,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,aAAK,CAAC,IAAI,GAAG;IACT,UAAU;IACV,WAAW,EAAE;QACT,GAAG,mBAAU,CAAC,KAAK;QACnB,KAAK,EAAE,mBAAU,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC;KACtC;CACxB,CAAC;AAEW,QAAA,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,uBAAe,CAAC,IAAI,GAAG;IACnB,UAAU;IACV,WAAW,EAAE;QACT,IAAI,EAAE,cAAc;QACpB,GAAG,mBAAU,CAAC,KAAK,CAAC,KAAK;KACR;CACxB,CAAC","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {PageConstructor} from '../containers/PageConstructor';\nimport {HeaderBlockModel, NavigationData} from '../models';\n\nimport {createTokenizationLandingContent} from './tokenizationLanding';\n\nimport headerData from '../blocks/Header/__stories__/data.json';\nimport navData from '../navigation/__stories__/data.json';\n\ninterface StoryArgs {\n headerBlock: HeaderBlockModel;\n navigation: NavigationData;\n}\n\nexport default {\n title: 'Lab/Tokenization/Blocks/Header',\n component: PageConstructor,\n} as Meta;\n\nconst Template: StoryFn<StoryArgs> = ({headerBlock, navigation}) => (\n <PageConstructor\n navigation={navigation}\n content={createTokenizationLandingContent(headerBlock)}\n />\n);\n\nconst navigation = navData.navigation as NavigationData;\n\nexport const Default = Template.bind({});\nDefault.args = {\n navigation,\n headerBlock: headerData.default as HeaderBlockModel,\n};\n\nexport const BreadcrumbsLight = Template.bind({});\nBreadcrumbsLight.args = {\n navigation,\n headerBlock: headerData.breadcrumbs[0] as HeaderBlockModel,\n};\n\nexport const BreadcrumbsDark = Template.bind({});\nBreadcrumbsDark.args = {\n navigation,\n headerBlock: headerData.breadcrumbs[1] as HeaderBlockModel,\n};\n\nexport const Image = Template.bind({});\nImage.args = {\n navigation,\n headerBlock: {\n ...headerData.image,\n title: headerData.image.title.replace('{{width}}', 'm'),\n } as HeaderBlockModel,\n};\n\nexport const BackgroundMedia = Template.bind({});\nBackgroundMedia.args = {\n navigation,\n headerBlock: {\n type: 'header-block',\n ...headerData.media.image,\n } as HeaderBlockModel,\n};\n"]}

package/build/cjs/demo/TokenizationHero.stories.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/react';
+import { HeroBlockModel, NavigationData } from "../models/index.js";
+interface StoryArgs {
+    heroBlock: HeroBlockModel;
+    navigation: NavigationData;
+}
+declare const _default: Meta;
+export default _default;
+export declare const Default: import("@storybook/core/csf", { with: { "resolution-mode": "import" } }).AnnotatedStoryFn<import("@storybook/react").ReactRenderer, StoryArgs>;

package/build/cjs/demo/TokenizationHero.stories.js ADDED Viewed

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PageConstructor_1 = require("../containers/PageConstructor/index.js");
+const tokenizationLanding_1 = require("./tokenizationLanding.js");
+const data_json_1 = tslib_1.__importDefault(require("../blocks/Hero/__stories__/data.json"));
+const data_json_2 = tslib_1.__importDefault(require("../navigation/__stories__/data.json"));
+exports.default = {
+    title: 'Lab/Tokenization/Blocks/Hero',
+    component: PageConstructor_1.PageConstructor,
+};
+const Template = ({ heroBlock, navigation }) => ((0, jsx_runtime_1.jsx)(PageConstructor_1.PageConstructor, { navigation: navigation, content: (0, tokenizationLanding_1.createTokenizationLandingContent)(heroBlock) }));
+exports.Default = Template.bind({});
+exports.Default.args = {
+    navigation: data_json_2.default.navigation,
+    heroBlock: data_json_1.default.default,
+};
+//# sourceMappingURL=TokenizationHero.stories.js.map

package/build/cjs/demo/TokenizationHero.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TokenizationHero.stories.js","sourceRoot":"../../../src","sources":["demo/TokenizationHero.stories.tsx"],"names":[],"mappings":";;;;;AAEA,4EAA8D;AAG9D,kEAAuE;AAEvE,6FAA4D;AAC5D,4FAA0D;AAO1D,kBAAe;IACX,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,iCAAe;CACrB,CAAC;AAEV,MAAM,QAAQ,GAAuB,CAAC,EAAC,SAAS,EAAE,UAAU,EAAC,EAAE,EAAE,CAAC,CAC9D,uBAAC,iCAAe,IACZ,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,IAAA,sDAAgC,EAAC,SAAS,CAAC,GACtD,CACL,CAAC;AAEW,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,eAAO,CAAC,IAAI,GAAG;IACX,UAAU,EAAE,mBAAO,CAAC,UAA4B;IAChD,SAAS,EAAE,mBAAQ,CAAC,OAAyB;CAChD,CAAC","sourcesContent":["import {Meta, StoryFn} from '@storybook/react';\n\nimport {PageConstructor} from '../containers/PageConstructor';\nimport {HeroBlockModel, NavigationData} from '../models';\n\nimport {createTokenizationLandingContent} from './tokenizationLanding';\n\nimport heroData from '../blocks/Hero/__stories__/data.json';\nimport navData from '../navigation/__stories__/data.json';\n\ninterface StoryArgs {\n heroBlock: HeroBlockModel;\n navigation: NavigationData;\n}\n\nexport default {\n title: 'Lab/Tokenization/Blocks/Hero',\n component: PageConstructor,\n} as Meta;\n\nconst Template: StoryFn<StoryArgs> = ({heroBlock, navigation}) => (\n <PageConstructor\n navigation={navigation}\n content={createTokenizationLandingContent(heroBlock)}\n />\n);\n\nexport const Default = Template.bind({});\nDefault.args = {\n navigation: navData.navigation as NavigationData,\n heroBlock: heroData.default as HeroBlockModel,\n};\n"]}

package/build/cjs/demo/tokenizationLanding.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { ConstructorBlock, PageContent } from "../models/index.js";
2	+ export declare const createTokenizationLandingContent: (headerBlock: ConstructorBlock) => PageContent;

package/build/cjs/demo/tokenizationLanding.js ADDED Viewed

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTokenizationLandingContent = void 0;
+const tslib_1 = require("tslib");
+const utils_1 = require("../../.storybook/utils.js");
+const data_json_1 = tslib_1.__importDefault(require("../blocks/Banner/__stories__/data.json"));
+const data_json_2 = tslib_1.__importDefault(require("../blocks/Companies/__stories__/data.json"));
+const data_json_3 = tslib_1.__importDefault(require("../blocks/PromoFeaturesBlock/__stories__/data.json"));
+const createTokenizationLandingContent = (headerBlock) => ({
+    blocks: [
+        (0, utils_1.blockTransform)(headerBlock),
+        (0, utils_1.blockTransform)({
+            ...data_json_3.default.common,
+            ...data_json_3.default.defaultTheme.content,
+        }),
+        (0, utils_1.blockTransform)(data_json_2.default.withDescription.content),
+        (0, utils_1.blockTransform)(data_json_1.default.default.content),
+    ],
+});
+exports.createTokenizationLandingContent = createTokenizationLandingContent;
+//# sourceMappingURL=tokenizationLanding.js.map

package/build/cjs/demo/tokenizationLanding.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"tokenizationLanding.js","sourceRoot":"../../../src","sources":["demo/tokenizationLanding.ts"],"names":[],"mappings":";;;;AAAA,qDAAsD;AAGtD,+FAAgE;AAChE,kGAAsE;AACtE,2GAAmF;AAE5E,MAAM,gCAAgC,GAAG,CAAC,WAA6B,EAAe,EAAE,CAAC,CAAC;IAC7F,MAAM,EAAE;QACJ,IAAA,sBAAc,EAAC,WAAW,CAAC;QAC3B,IAAA,sBAAc,EAAC;YACX,GAAG,mBAAiB,CAAC,MAAM;YAC3B,GAAG,mBAAiB,CAAC,YAAY,CAAC,OAAO;SAC5C,CAAC;QACF,IAAA,sBAAc,EAAC,mBAAa,CAAC,eAAe,CAAC,OAAO,CAAC;QACrD,IAAA,sBAAc,EAAC,mBAAU,CAAC,OAAO,CAAC,OAAO,CAAC;KAC7C;CACJ,CAAC,CAAC;AAVU,QAAA,gCAAgC,oCAU1C","sourcesContent":["import {blockTransform} from '../../.storybook/utils';\nimport {ConstructorBlock, PageContent} from '../models';\n\nimport bannerData from '../blocks/Banner/__stories__/data.json';\nimport companiesData from '../blocks/Companies/__stories__/data.json';\nimport promoFeaturesData from '../blocks/PromoFeaturesBlock/__stories__/data.json';\n\nexport const createTokenizationLandingContent = (headerBlock: ConstructorBlock): PageContent => ({\n blocks: [\n blockTransform(headerBlock),\n blockTransform({\n ...promoFeaturesData.common,\n ...promoFeaturesData.defaultTheme.content,\n }),\n blockTransform(companiesData.withDescription.content),\n blockTransform(bannerData.default.content),\n ],\n});\n"]}

package/build/cjs/models/constructor-items/sub-blocks.d.ts CHANGED Viewed

@@ -154,6 +154,9 @@ export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, Analyt
     border?: boolean;
     fullscreen?: boolean;
     icon?: ThemeSupporting<PositionedIcon>;
+    url?: string;
+    urlTitle?: string;
+    target?: string;
 }
 export interface ImageCardProps extends CardBaseProps, AnalyticsEventsBase, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'controlPosition'> {
     image: ThemeSupporting<ImageProps>;

package/build/cjs/models/constructor-items/sub-blocks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sub-blocks.js","sourceRoot":"../../../../src","sources":["models/constructor-items/sub-blocks.ts"],"names":[],"mappings":";;;AA8BA,IAAY,YAoBX;AApBD,WAAY,YAAY;IACpB,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf;;OAEG;IACH,gDAAgC,CAAA;IAChC,wCAAwB,CAAA;IACxB,0CAA0B,CAAA;IAC1B,0CAA0B,CAAA;IAC1B,kDAAkC,CAAA;IAClC,wCAAwB,CAAA;IACxB,mCAAmB,CAAA;IACnB,4CAA4B,CAAA;IAC5B;;OAEG;IACH,6BAAa,CAAA;IACb,wCAAwB,CAAA;IACxB,wCAAwB,CAAA;AAC5B,CAAC,EApBW,YAAY,4BAAZ,YAAY,QAoBvB;AAED,IAAY,YAGX;AAHD,WAAY,YAAY;IACpB,2BAAW,CAAA;IACX,6BAAa,CAAA;AACjB,CAAC,EAHW,YAAY,4BAAZ,YAAY,QAGvB;AAkBD,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,uCAAiB,CAAA;IACjB,yCAAmB,CAAA;AACvB,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAEY,QAAA,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC","sourcesContent":["import {ClassNameProps, GravityIconProps, QuoteType} from '../../models';\nimport {ThemeSupporting} from '../../utils';\nimport {\n HubspotEventData,\n HubspotEventHandlers,\n HubspotFormDefaultValues,\n} from '../../utils/hubspot';\nimport {AnalyticsEventsBase} from '../common';\n\nimport {ContentBlockProps} from './blocks';\nimport {\n AuthorItem,\n ButtonProps,\n CardBaseProps,\n CardLayoutProps,\n ContentTheme,\n DividerSize,\n ImageCardMargins,\n ImageObjectProps,\n ImageProps,\n LayoutItemContentMargin,\n LinkProps,\n MediaProps,\n MediaView,\n PriceDetailedProps,\n TextTheme,\n Themable,\n ThemedImage,\n} from './common';\n\nexport enum SubBlockType {\n Divider = 'divider',\n Quote = 'quote',\n /*\n @deprecated Will be removed\n /\n PriceDetailed = 'price-detailed',\n MediaCard = 'media-card',\n BannerCard = 'banner-card',\n LayoutItem = 'layout-item',\n BackgroundCard = 'background-card',\n BasicCard = 'basic-card',\n Content = 'content',\n HubspotForm = 'hubspot-form',\n /\n @deprecated Will be removed, use BasicCard instead\n /\n Card = 'card',\n PriceCard = 'price-card',\n ImageCard = 'image-card',\n}\n\nexport enum IconPosition {\n Top = 'top',\n Left = 'left',\n}\n\nexport interface PositionedIcon {\n value: ImageProps;\n position?: IconPosition;\n}\n\nexport interface PositionedGravityIcon {\n value: GravityIconProps;\n position?: IconPosition;\n}\n\nexport interface IconWrapperProps {\n icon?: PositionedIcon;\n gravityIcon?: PositionedGravityIcon;\n size?: 's' \| 'm' \| 'l' \| 'xl';\n}\n\nexport enum ImageCardDirection {\n Direct = 'direct',\n Reverse = 'reverse',\n}\n\nexport const SubBlockTypes = Object.values(SubBlockType);\n\nexport interface DividerProps {\n size?: DividerSize;\n border?: boolean;\n}\n\nexport interface HubspotFormProps extends HubspotEventHandlers, AnalyticsEventsBase {\n className?: string;\n theme?: ContentTheme;\n isMobile?: boolean;\n region?: string;\n portalId: string;\n formId: string;\n formInstanceId?: string;\n formClassName?: string;\n\n /\n To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n /\n onBeforeLoad?: (arg: HubspotEventData) => void;\n\n /\n To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n /\n onBeforeSubmit?: (arg: HubspotEventData) => void;\n\n /\n To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n /\n onSubmit?: (arg: HubspotEventData) => void;\n\n /\n To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n /\n onLoad?: (arg: HubspotEventData) => void;\n hubspotEvents?: string[];\n createDOMElement?: boolean;\n defaultValues?: HubspotFormDefaultValues;\n}\n\n//cards\nexport interface QuoteProps extends Themable, CardBaseProps {\n text?: string;\n // for backward compatibility, yfmText will become property 'text' in major\n yfmText?: string;\n image: ThemedImage;\n logo: ThemeSupporting<ImageProps>;\n color?: string;\n /\n @deprecated use property button instead\n /\n url?: string;\n /\n @deprecated use property button instead\n /\n urlTitle?: string;\n author?: AuthorItem;\n /\n @deprecated use property button instead\n /\n buttonText?: string;\n theme?: TextTheme;\n quoteType?: QuoteType;\n button?: ButtonProps;\n}\n\nexport interface BackgroundCardProps\n extends CardBaseProps,\n AnalyticsEventsBase,\n CardLayoutProps,\n Omit<ContentBlockProps, 'centered' \| 'controlPosition'> {\n url?: string;\n urlTitle?: string;\n background?: ThemeSupporting<ImageObjectProps>;\n paddingBottom?: 's' \| 'm' \| 'l' \| 'xl';\n backgroundColor?: string;\n}\n\nexport interface BasicCardProps\n extends CardBaseProps,\n AnalyticsEventsBase,\n CardLayoutProps,\n Omit<ContentBlockProps, 'colSizes' \| 'centered' \| 'theme' \| 'controlPosition'> {\n url: string;\n urlTitle?: string;\n icon?: ThemeSupporting<ImageProps>;\n gravityIcon?: ThemeSupporting<GravityIconProps>;\n target?: string;\n iconPosition?: IconPosition;\n /\n @deprecated This property will be removed in future versions\n /\n hoverBackgroundColor?: string;\n}\n\nexport interface BannerCardProps {\n title: string;\n subtitle?: string;\n className?: string;\n image?: ThemeSupporting<string>;\n disableCompress?: boolean;\n color?: ThemeSupporting<string>;\n theme?: TextTheme;\n button?: Pick<ButtonProps, 'text' \| 'url' \| 'target' \| 'theme'>;\n mediaView?: MediaView;\n}\n\nexport interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {}\n\nexport interface PriceCardProps extends CardBaseProps, Pick<ContentBlockProps, 'theme'> {\n title: string;\n price: string;\n pricePeriod?: string;\n priceDetails?: string;\n description?: string;\n buttons?: ButtonProps[];\n links?: LinkProps[];\n backgroundColor?: string;\n list?: string[];\n}\n\nexport interface LayoutItemProps extends ClassNameProps, CardLayoutProps, AnalyticsEventsBase {\n content: Omit<ContentBlockProps, 'colSizes' \| 'centered'>;\n contentMargin?: LayoutItemContentMargin;\n media?: ThemeSupporting<MediaProps>;\n metaInfo?: string[];\n border?: boolean;\n fullscreen?: boolean;\n icon?: ThemeSupporting<PositionedIcon>;\n}\n\nexport interface ImageCardProps\n extends CardBaseProps,\n AnalyticsEventsBase,\n CardLayoutProps,\n Omit<ContentBlockProps, 'colSizes' \| 'centered' \| 'controlPosition'> {\n image: ThemeSupporting<ImageProps>;\n enableImageBorderRadius?: boolean;\n margins?: ImageCardMargins;\n direction?: ImageCardDirection;\n backgroundColor?: string;\n url?: string;\n urlTitle?: string;\n target?: string;\n}\n\n// sub-block models\nexport type DividerModel = {\n type: SubBlockType.Divider;\n} & DividerProps;\n\nexport type QuoteModel = {\n type: SubBlockType.Quote;\n} & QuoteProps;\n\nexport type LayoutItemModel = {\n type: SubBlockType.LayoutItem;\n} & LayoutItemProps;\n\nexport type BackgroundCardModel = {\n type: SubBlockType.BackgroundCard;\n} & BackgroundCardProps;\n\n/* @deprecated */\nexport type PriceDetailedModel = {\n type: SubBlockType.PriceDetailed;\n} & PriceDetailedProps;\n\nexport type MediaCardModel = {\n type: SubBlockType.MediaCard;\n} & MediaCardProps;\n\nexport type HubspotFormModel = {\n type: SubBlockType.HubspotForm;\n} & HubspotFormProps;\n\nexport type BannerCardModel = {\n type: SubBlockType.BannerCard;\n} & BannerCardProps;\n\nexport type BasicCardModel = {\n type: SubBlockType.BasicCard;\n} & BasicCardProps;\n\nexport type PriceCardModel = {\n type: SubBlockType.PriceCard;\n} & PriceCardProps;\n\nexport type ImageCardModel = {\n type: SubBlockType.ImageCard;\n} & ImageCardProps;\n\nexport type SubBlockModels =\n \| DividerModel\n \| QuoteModel\n \| PriceDetailedModel\n \| MediaCardModel\n \| BackgroundCardModel\n \| HubspotFormModel\n \| BannerCardModel\n \| BasicCardModel\n \| PriceCardModel\n \| LayoutItemModel\n \| ImageCardModel;\n\nexport type SubBlock = SubBlockModels;\n"]}
1	+ {"version":3,"file":"sub-blocks.js","sourceRoot":"../../../../src","sources":["models/constructor-items/sub-blocks.ts"],"names":[],"mappings":";;;AA8BA,IAAY,YAoBX;AApBD,WAAY,YAAY;IACpB,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf;;OAEG;IACH,gDAAgC,CAAA;IAChC,wCAAwB,CAAA;IACxB,0CAA0B,CAAA;IAC1B,0CAA0B,CAAA;IAC1B,kDAAkC,CAAA;IAClC,wCAAwB,CAAA;IACxB,mCAAmB,CAAA;IACnB,4CAA4B,CAAA;IAC5B;;OAEG;IACH,6BAAa,CAAA;IACb,wCAAwB,CAAA;IACxB,wCAAwB,CAAA;AAC5B,CAAC,EApBW,YAAY,4BAAZ,YAAY,QAoBvB;AAED,IAAY,YAGX;AAHD,WAAY,YAAY;IACpB,2BAAW,CAAA;IACX,6BAAa,CAAA;AACjB,CAAC,EAHW,YAAY,4BAAZ,YAAY,QAGvB;AAkBD,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,uCAAiB,CAAA;IACjB,yCAAmB,CAAA;AACvB,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAEY,QAAA,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC","sourcesContent":["import {ClassNameProps, GravityIconProps, QuoteType} from '../../models';\nimport {ThemeSupporting} from '../../utils';\nimport {\n HubspotEventData,\n HubspotEventHandlers,\n HubspotFormDefaultValues,\n} from '../../utils/hubspot';\nimport {AnalyticsEventsBase} from '../common';\n\nimport {ContentBlockProps} from './blocks';\nimport {\n AuthorItem,\n ButtonProps,\n CardBaseProps,\n CardLayoutProps,\n ContentTheme,\n DividerSize,\n ImageCardMargins,\n ImageObjectProps,\n ImageProps,\n LayoutItemContentMargin,\n LinkProps,\n MediaProps,\n MediaView,\n PriceDetailedProps,\n TextTheme,\n Themable,\n ThemedImage,\n} from './common';\n\nexport enum SubBlockType {\n Divider = 'divider',\n Quote = 'quote',\n /*\n @deprecated Will be removed\n /\n PriceDetailed = 'price-detailed',\n MediaCard = 'media-card',\n BannerCard = 'banner-card',\n LayoutItem = 'layout-item',\n BackgroundCard = 'background-card',\n BasicCard = 'basic-card',\n Content = 'content',\n HubspotForm = 'hubspot-form',\n /\n @deprecated Will be removed, use BasicCard instead\n /\n Card = 'card',\n PriceCard = 'price-card',\n ImageCard = 'image-card',\n}\n\nexport enum IconPosition {\n Top = 'top',\n Left = 'left',\n}\n\nexport interface PositionedIcon {\n value: ImageProps;\n position?: IconPosition;\n}\n\nexport interface PositionedGravityIcon {\n value: GravityIconProps;\n position?: IconPosition;\n}\n\nexport interface IconWrapperProps {\n icon?: PositionedIcon;\n gravityIcon?: PositionedGravityIcon;\n size?: 's' \| 'm' \| 'l' \| 'xl';\n}\n\nexport enum ImageCardDirection {\n Direct = 'direct',\n Reverse = 'reverse',\n}\n\nexport const SubBlockTypes = Object.values(SubBlockType);\n\nexport interface DividerProps {\n size?: DividerSize;\n border?: boolean;\n}\n\nexport interface HubspotFormProps extends HubspotEventHandlers, AnalyticsEventsBase {\n className?: string;\n theme?: ContentTheme;\n isMobile?: boolean;\n region?: string;\n portalId: string;\n formId: string;\n formInstanceId?: string;\n formClassName?: string;\n\n /\n To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n /\n onBeforeLoad?: (arg: HubspotEventData) => void;\n\n /\n To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n /\n onBeforeSubmit?: (arg: HubspotEventData) => void;\n\n /\n To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n /\n onSubmit?: (arg: HubspotEventData) => void;\n\n /\n To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n /\n onLoad?: (arg: HubspotEventData) => void;\n hubspotEvents?: string[];\n createDOMElement?: boolean;\n defaultValues?: HubspotFormDefaultValues;\n}\n\n//cards\nexport interface QuoteProps extends Themable, CardBaseProps {\n text?: string;\n // for backward compatibility, yfmText will become property 'text' in major\n yfmText?: string;\n image: ThemedImage;\n logo: ThemeSupporting<ImageProps>;\n color?: string;\n /\n @deprecated use property button instead\n /\n url?: string;\n /\n @deprecated use property button instead\n /\n urlTitle?: string;\n author?: AuthorItem;\n /\n @deprecated use property button instead\n /\n buttonText?: string;\n theme?: TextTheme;\n quoteType?: QuoteType;\n button?: ButtonProps;\n}\n\nexport interface BackgroundCardProps\n extends CardBaseProps,\n AnalyticsEventsBase,\n CardLayoutProps,\n Omit<ContentBlockProps, 'centered' \| 'controlPosition'> {\n url?: string;\n urlTitle?: string;\n background?: ThemeSupporting<ImageObjectProps>;\n paddingBottom?: 's' \| 'm' \| 'l' \| 'xl';\n backgroundColor?: string;\n}\n\nexport interface BasicCardProps\n extends CardBaseProps,\n AnalyticsEventsBase,\n CardLayoutProps,\n Omit<ContentBlockProps, 'colSizes' \| 'centered' \| 'theme' \| 'controlPosition'> {\n url: string;\n urlTitle?: string;\n icon?: ThemeSupporting<ImageProps>;\n gravityIcon?: ThemeSupporting<GravityIconProps>;\n target?: string;\n iconPosition?: IconPosition;\n /\n @deprecated This property will be removed in future versions\n /\n hoverBackgroundColor?: string;\n}\n\nexport interface BannerCardProps {\n title: string;\n subtitle?: string;\n className?: string;\n image?: ThemeSupporting<string>;\n disableCompress?: boolean;\n color?: ThemeSupporting<string>;\n theme?: TextTheme;\n button?: Pick<ButtonProps, 'text' \| 'url' \| 'target' \| 'theme'>;\n mediaView?: MediaView;\n}\n\nexport interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {}\n\nexport interface PriceCardProps extends CardBaseProps, Pick<ContentBlockProps, 'theme'> {\n title: string;\n price: string;\n pricePeriod?: string;\n priceDetails?: string;\n description?: string;\n buttons?: ButtonProps[];\n links?: LinkProps[];\n backgroundColor?: string;\n list?: string[];\n}\n\nexport interface LayoutItemProps extends ClassNameProps, CardLayoutProps, AnalyticsEventsBase {\n content: Omit<ContentBlockProps, 'colSizes' \| 'centered'>;\n contentMargin?: LayoutItemContentMargin;\n media?: ThemeSupporting<MediaProps>;\n metaInfo?: string[];\n border?: boolean;\n fullscreen?: boolean;\n icon?: ThemeSupporting<PositionedIcon>;\n url?: string;\n urlTitle?: string;\n target?: string;\n}\n\nexport interface ImageCardProps\n extends CardBaseProps,\n AnalyticsEventsBase,\n CardLayoutProps,\n Omit<ContentBlockProps, 'colSizes' \| 'centered' \| 'controlPosition'> {\n image: ThemeSupporting<ImageProps>;\n enableImageBorderRadius?: boolean;\n margins?: ImageCardMargins;\n direction?: ImageCardDirection;\n backgroundColor?: string;\n url?: string;\n urlTitle?: string;\n target?: string;\n}\n\n// sub-block models\nexport type DividerModel = {\n type: SubBlockType.Divider;\n} & DividerProps;\n\nexport type QuoteModel = {\n type: SubBlockType.Quote;\n} & QuoteProps;\n\nexport type LayoutItemModel = {\n type: SubBlockType.LayoutItem;\n} & LayoutItemProps;\n\nexport type BackgroundCardModel = {\n type: SubBlockType.BackgroundCard;\n} & BackgroundCardProps;\n\n/* @deprecated */\nexport type PriceDetailedModel = {\n type: SubBlockType.PriceDetailed;\n} & PriceDetailedProps;\n\nexport type MediaCardModel = {\n type: SubBlockType.MediaCard;\n} & MediaCardProps;\n\nexport type HubspotFormModel = {\n type: SubBlockType.HubspotForm;\n} & HubspotFormProps;\n\nexport type BannerCardModel = {\n type: SubBlockType.BannerCard;\n} & BannerCardProps;\n\nexport type BasicCardModel = {\n type: SubBlockType.BasicCard;\n} & BasicCardProps;\n\nexport type PriceCardModel = {\n type: SubBlockType.PriceCard;\n} & PriceCardProps;\n\nexport type ImageCardModel = {\n type: SubBlockType.ImageCard;\n} & ImageCardProps;\n\nexport type SubBlockModels =\n \| DividerModel\n \| QuoteModel\n \| PriceDetailedModel\n \| MediaCardModel\n \| BackgroundCardModel\n \| HubspotFormModel\n \| BannerCardModel\n \| BasicCardModel\n \| PriceCardModel\n \| LayoutItemModel\n \| ImageCardModel;\n\nexport type SubBlock = SubBlockModels;\n"]}

package/build/cjs/sub-blocks/LayoutItem/LayoutItem.css CHANGED Viewed

@@ -39,4 +39,19 @@ unpredictable css rules order in build */
   .pc-layout-item__content {
     margin-right: 0;
   }
+}
+a.pc-layout-item {
+  color: inherit;
+  text-decoration: none;
+}
+a.pc-layout-item:hover, a.pc-layout-item:active {
+  --pc-text-header-color: inherit;
+  color: inherit;
+}
+a.pc-layout-item .pc-layout-item__media .pc-media-component-image__item {
+  transition: transform 300ms ease-in-out;
+}
+a.pc-layout-item:hover .pc-layout-item__media .pc-media-component-image__item {
+  transform: scale(1.05);
 }

package/build/cjs/sub-blocks/LayoutItem/LayoutItem.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import { LayoutItemProps } from "../../models/index.js";
-declare const LayoutItem: ({ content: { links, ...content }, contentMargin, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition, }: LayoutItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const LayoutItem: ({ content: { links, ...content }, contentMargin, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition, url, urlTitle, target, }: LayoutItemProps) => import("react/jsx-runtime").JSX.Element;
 export default LayoutItem;

package/build/cjs/sub-blocks/LayoutItem/LayoutItem.js CHANGED Viewed

@@ -6,16 +6,19 @@ const React = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components/index.js");
 const theme_1 = require("../../context/theme/index.js");
+const hooks_1 = require("../../hooks/index.js");
+const models_1 = require("../../models/index.js");
 const utils_1 = require("../../utils/index.js");
 const microdata_1 = require("../../utils/microdata.js");
 const Content_1 = tslib_1.__importDefault(require("../Content/Content.js"));
 const utils_2 = require("./utils.js");
 const b = (0, utils_1.block)('layout-item');
-const LayoutItem = ({ content: { links, ...content }, contentMargin = 'm', metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition = 'content', }) => {
+const LayoutItem = ({ content: { links, ...content }, contentMargin = 'm', metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition = 'content', url, urlTitle, target, }) => {
     const normalizedLinks = React.useMemo(() => (0, utils_2.getLayoutItemLinks)(links), [links]);
     const areControlsInFooter = controlPosition === 'footer';
     const theme = (0, theme_1.useTheme)();
     const themedIcon = (0, utils_1.getThemedValue)(icon, theme);
+    const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.CardBase, url);
     const contentProps = {
         controlPosition: areControlsInFooter ? 'bottom' : 'default',
         ...content,
@@ -36,7 +39,14 @@ const LayoutItem = ({ content: { links, ...content }, contentMargin = 'm', metaI
         });
         return fullscreen && (0, utils_2.hasFullscreen)(themedMedia) ? ((0, jsx_runtime_1.jsx)(components_1.FullscreenMedia, { showFullscreenIcon: (0, utils_2.showFullscreenIcon)(themedMedia), children: ({ className: mediaClassName, fullscreen: _fullscreen, ...fullscreenMediaProps } = {}) => ((0, jsx_runtime_1.jsx)(components_1.Media, { ...mediaWithMicrodata, ...fullscreenMediaProps, className: b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })) })) : ((0, jsx_runtime_1.jsx)(components_1.Media, { ...themedMedia, className: b('media', { border }), analyticsEvents: analyticsEvents }));
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [renderMedia(), metaInfo && (0, jsx_runtime_1.jsx)(components_1.MetaInfo, { items: metaInfo, className: b('meta-info') }), (0, jsx_runtime_1.jsx)("div", { className: b('content', { 'no-media': !media, margin: contentMargin }), children: (0, jsx_runtime_1.jsx)(components_1.IconWrapper, { icon: themedIcon, className: b('wrapper'), size: contentProps.size, children: (0, jsx_runtime_1.jsx)(Content_1.default, { ...contentProps, titleId: titleId }) }) })] }));
+    const cardContent = ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [renderMedia(), metaInfo && (0, jsx_runtime_1.jsx)(components_1.MetaInfo, { items: metaInfo, className: b('meta-info') }), (0, jsx_runtime_1.jsx)("div", { className: b('content', { 'no-media': !media, margin: contentMargin }), children: (0, jsx_runtime_1.jsx)(components_1.IconWrapper, { icon: themedIcon, className: b('wrapper'), size: contentProps.size, children: (0, jsx_runtime_1.jsx)(Content_1.default, { ...contentProps, titleId: titleId }) }) })] }));
+    if (url) {
+        return ((0, jsx_runtime_1.jsx)(components_1.RouterLink, { href: url, children: (0, jsx_runtime_1.jsx)(uikit_1.Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: b(null, className), title: urlTitle, onClick: () => handleAnalytics(analyticsEvents), extraProps: {
+                    draggable: false,
+                    onDragStart: (event) => event.preventDefault(),
+                }, children: cardContent }) }));
+    }
+    return (0, jsx_runtime_1.jsx)("div", { className: b(null, className), children: cardContent });
 };
 exports.default = LayoutItem;
 //# sourceMappingURL=LayoutItem.js.map

package/build/cjs/sub-blocks/LayoutItem/LayoutItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LayoutItem.js","sourceRoot":"../../../../src","sources":["sub-blocks/LayoutItem/LayoutItem.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,~~6CAA4C~~;~~AAE5C~~,~~0DAA+E~~;~~AAC/E~~,wDAA6C;~~AAE7C~~,gDAAkD;AAClD,wDAA0D;AAC1D,4EAAyC;AAEzC,sCAA8E;AAI9E,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,UAAU,GAAG,CAAC,EAChB,OAAO,EAAE,EAAC,KAAK,EAAE,GAAG,OAAO,EAAC,EAC5B,aAAa,GAAG,GAAG,EACnB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,UAAU,EACV,IAAI,EACJ,SAAS,EACT,eAAe,EACf,eAAe,GAAG,SAAS,~~GACb~~,EAAE,EAAE;IAClB,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAA,0BAAkB,EAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAChF,MAAM,mBAAmB,GAAG,eAAe,KAAK,QAAQ,CAAC;IACzD,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IACzB,MAAM,UAAU,GAAG,IAAA,sBAAc,EAAC,IAAI,EAAE,KAAK,CAAC,CAAC;~~IAE~~/C,MAAM,YAAY,GAAsB;QACpC,eAAe,EAAE,mBAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;QAC3D,GAAG,OAAO;QACV,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,OAAO,CAAC,IAAI,IAAI,GAAG;QACzB,QAAQ,EAAE,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAC;KAC9B,CAAC;IACF,MAAM,OAAO,GAAG,IAAA,iBAAS,GAAE,CAAC;IAC5B,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,IAAI,CAAC,KAAK,EAAE,CAAC;YACT,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,MAAM,WAAW,GAAG,IAAA,sBAAc,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACjD,MAAM,EAAC,KAAK,EAAC,GAAG,OAAO,CAAC;QACxB,MAAM,kBAAkB,GAAG,IAAA,+BAAmB,EAAC,WAAW,EAAE;YACxD,IAAI,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI;YACrD,WAAW,EAAE,OAAO,CAAC,IAAI;SAC5B,CAAC,CAAC;QAEH,OAAO,UAAU,IAAI,IAAA,qBAAa,EAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAC9C,uBAAC,4BAAe,IAAC,kBAAkB,EAAE,IAAA,0BAAkB,EAAC,WAAW,CAAC,YAC/D,CAAC,EACE,SAAS,EAAE,cAAc,EACzB,UAAU,EAAE,WAAW,EACvB,GAAG,oBAAoB,EAC1B,GAAG,EAAE,EAAE,EAAE,CAAC,CACP,uBAAC,kBAAK,OACE,kBAAkB,KAClB,oBAAoB,EACxB,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,MAAM,EAAC,EAAE,cAAc,CAAC,EAC/C,eAAe,EAAE,eAAe,GAClC,CACL,GACa,CACrB,CAAC,CAAC,CAAC,CACA,uBAAC,kBAAK,OACE,WAAW,EACf,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,MAAM,EAAC,CAAC,EAC/B,eAAe,EAAE,eAAe,GAClC,CACL,CAAC;IACN,CAAC,CAAC;~~IACF~~,~~OAAO~~,~~CACH~~,~~iCAAK~~,~~SAAS~~,~~EAAE~~,~~CAAC~~,CAAC,~~IAAI~~,~~EAAE~~,~~SAAS,CAAC,aAC7B,~~WAAW,EAAE,EACb,QAAQ,IAAI,uBAAC,qBAAQ,IAAC,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,GAAI,EACrE,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,EAAC,CAAC,YACrE,uBAAC,wBAAW,IAAC,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,YAAY,CAAC,IAAI,YAC3E,uBAAC,iBAAO,OAAK,YAAY,EAAE,OAAO,EAAE,OAAO,GAAI,GACrC,GACZ,~~IACJ~~,~~CACT~~,CAAC;~~AACN~~,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {useUniqId} from '@gravity-ui/uikit';\n\nimport {FullscreenMedia, IconWrapper, Media, MetaInfo} from '../../components';\nimport {useTheme} from '../../context/theme';\nimport {ContentBlockProps, LayoutItemProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\nimport {mergeVideoMicrodata} from '../../utils/microdata';\nimport Content from '../Content/Content';\n\nimport {getLayoutItemLinks, hasFullscreen, showFullscreenIcon} from './utils';\n\nimport './LayoutItem.scss';\n\nconst b = block('layout-item');\n\nconst LayoutItem = ({\n content: {links, ...content},\n contentMargin = 'm',\n metaInfo,\n media,\n border,\n fullscreen,\n icon,\n className,\n analyticsEvents,\n controlPosition = 'content',\n}: LayoutItemProps) => {\n const normalizedLinks = React.useMemo(() => getLayoutItemLinks(links), [links]);\n const areControlsInFooter = controlPosition === 'footer';\n const theme = useTheme();\n const themedIcon = getThemedValue(icon, theme);\n\n const contentProps: ContentBlockProps = {\n controlPosition: areControlsInFooter ? 'bottom' : 'default',\n ...content,\n links: normalizedLinks,\n size: content.size \|\| 's',\n colSizes: {all: 12, md: 12},\n };\n const titleId = useUniqId();\n const renderMedia = () => {\n if (!media) {\n return null;\n }\n const themedMedia = getThemedValue(media, theme);\n const {title} = content;\n const mediaWithMicrodata = mergeVideoMicrodata(themedMedia, {\n name: typeof title === 'string' ? title : title?.text,\n description: content.text,\n });\n\n return fullscreen && hasFullscreen(themedMedia) ? (\n <FullscreenMedia showFullscreenIcon={showFullscreenIcon(themedMedia)}>\n {({\n className: mediaClassName,\n fullscreen: _fullscreen,\n ...fullscreenMediaProps\n } = {}) => (\n <Media\n {...mediaWithMicrodata}\n {...fullscreenMediaProps}\n className={b('media', {border}, mediaClassName)}\n analyticsEvents={analyticsEvents}\n />\n )}\n </FullscreenMedia>\n ) : (\n <Media\n {...themedMedia}\n className={b('media', {border})}\n analyticsEvents={analyticsEvents}\n />\n );\n };\n ~~return~~ (\n <~~div className={b(null, className)}~~>\n {renderMedia()}\n {metaInfo && <MetaInfo items={metaInfo} className={b('meta-info')} />}\n <div className={b('content', {'no-media': !media, margin: contentMargin})}>\n <IconWrapper icon={themedIcon} className={b('wrapper')} size={contentProps.size}>\n <Content {...contentProps} titleId={titleId} />\n </IconWrapper>\n </div>\n </~~div~~>\n );\n};\n\nexport default LayoutItem;\n"]}
1	+ {"version":3,"file":"LayoutItem.js","sourceRoot":"../../../../src","sources":["sub-blocks/LayoutItem/LayoutItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Link, useUniqId} from '@gravity-ui/uikit';\n\nimport {FullscreenMedia, IconWrapper, Media, MetaInfo, RouterLink} from '../../components';\nimport {useTheme} from '../../context/theme';\nimport {useAnalytics} from '../../hooks';\nimport {ContentBlockProps, DefaultEventNames, LayoutItemProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\nimport {mergeVideoMicrodata} from '../../utils/microdata';\nimport Content from '../Content/Content';\n\nimport {getLayoutItemLinks, hasFullscreen, showFullscreenIcon} from './utils';\n\nimport './LayoutItem.scss';\n\nconst b = block('layout-item');\n\nconst LayoutItem = ({\n content: {links, ...content},\n contentMargin = 'm',\n metaInfo,\n media,\n border,\n fullscreen,\n icon,\n className,\n analyticsEvents,\n controlPosition = 'content',\n url,\n urlTitle,\n target,\n}: LayoutItemProps) => {\n const normalizedLinks = React.useMemo(() => getLayoutItemLinks(links), [links]);\n const areControlsInFooter = controlPosition === 'footer';\n const theme = useTheme();\n const themedIcon = getThemedValue(icon, theme);\n const handleAnalytics = useAnalytics(DefaultEventNames.CardBase, url);\n\n const contentProps: ContentBlockProps = {\n controlPosition: areControlsInFooter ? 'bottom' : 'default',\n ...content,\n links: normalizedLinks,\n size: content.size \|\| 's',\n colSizes: {all: 12, md: 12},\n };\n const titleId = useUniqId();\n const renderMedia = () => {\n if (!media) {\n return null;\n }\n const themedMedia = getThemedValue(media, theme);\n const {title} = content;\n const mediaWithMicrodata = mergeVideoMicrodata(themedMedia, {\n name: typeof title === 'string' ? title : title?.text,\n description: content.text,\n });\n\n return fullscreen && hasFullscreen(themedMedia) ? (\n <FullscreenMedia showFullscreenIcon={showFullscreenIcon(themedMedia)}>\n {({\n className: mediaClassName,\n fullscreen: _fullscreen,\n ...fullscreenMediaProps\n } = {}) => (\n <Media\n {...mediaWithMicrodata}\n {...fullscreenMediaProps}\n className={b('media', {border}, mediaClassName)}\n analyticsEvents={analyticsEvents}\n />\n )}\n </FullscreenMedia>\n ) : (\n <Media\n {...themedMedia}\n className={b('media', {border})}\n analyticsEvents={analyticsEvents}\n />\n );\n };\n\n const cardContent = (\n <React.Fragment>\n {renderMedia()}\n {metaInfo && <MetaInfo items={metaInfo} className={b('meta-info')} />}\n <div className={b('content', {'no-media': !media, margin: contentMargin})}>\n <IconWrapper icon={themedIcon} className={b('wrapper')} size={contentProps.size}>\n <Content {...contentProps} titleId={titleId} />\n </IconWrapper>\n </div>\n </React.Fragment>\n );\n\n if (url) {\n return (\n <RouterLink href={url}>\n <Link\n href={url}\n target={target}\n rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n className={b(null, className)}\n title={urlTitle}\n onClick={() => handleAnalytics(analyticsEvents)}\n extraProps={{\n draggable: false,\n onDragStart: (event: React.DragEvent<HTMLAnchorElement>) =>\n event.preventDefault(),\n }}\n >\n {cardContent}\n </Link>\n </RouterLink>\n );\n }\n\n return <div className={b(null, className)}>{cardContent}</div>;\n};\n\nexport default LayoutItem;\n"]}

package/build/cjs/sub-blocks/LayoutItem/schema.d.ts CHANGED Viewed

@@ -495,6 +495,16 @@ export declare const LayoutItem: {
         fullscreen: {
             type: string;
         };
+        url: {
+            type: string;
+        };
+        urlTitle: {
+            type: string;
+        };
+        target: {
+            type: string;
+            enum: string[];
+        };
         analyticsEvents: {
             oneOf: ({
                 optionName: string;

package/build/cjs/sub-blocks/LayoutItem/schema.js CHANGED Viewed

@@ -28,6 +28,16 @@ exports.LayoutItem = {
         fullscreen: {
             type: 'boolean',
         },
+        url: {
+            type: 'string',
+        },
+        urlTitle: {
+            type: 'string',
+        },
+        target: {
+            type: 'string',
+            enum: ['_blank', '_parent', '_top', '_self'],
+        },
         analyticsEvents: {
             oneOf: [
                 {

package/build/cjs/sub-blocks/LayoutItem/schema.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["sub-blocks/LayoutItem/schema.ts"],"names":[],"mappings":";;;;AAAA,kEAA+B;AAE/B,yFAAwD;AACxD,8DAAsF;AACtF,4DAAmE;AACnE,iDAA4D;AAE/C,QAAA,UAAU,GAAG;IACtB,IAAI,EAAE,QAAQ;IACd,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9B,UAAU,EAAE;QACR,GAAG,kBAAS;QACZ,GAAG,wBAAe;QAClB,KAAK,EAAE,mBAAU;QACjB,OAAO,EAAE,IAAA,cAAI,EAAC,oBAAW,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;QACnD,aAAa,EAAE;YACX,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YAChB,OAAO,EAAE,GAAG;SACf;QACD,QAAQ,EAAE,gBAAQ;QAClB,MAAM,EAAE;YACJ,IAAI,EAAE,SAAS;SAClB;QACD,UAAU,EAAE;YACR,IAAI,EAAE,SAAS;SAClB;QACD,eAAe,EAAE;YACb,KAAK,EAAE;gBACH;oBACI,GAAG,4BAAoB;oBACvB,UAAU,EAAE,QAAQ;iBACvB;gBACD;oBACI,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,4BAAoB;oBAC3B,UAAU,EAAE,MAAM;iBACrB;aACJ;SACJ;KACJ;CACJ,CAAC","sourcesContent":["import omit from 'lodash/omit';\n\nimport metaInfo from '../../components/MetaInfo/schema';\nimport {BaseProps, CardLayoutProps, MediaProps} from '../../schema/validators/common';\nimport {AnalyticsEventSchema} from '../../schema/validators/event';\nimport {ContentBase} from '../../sub-blocks/Content/schema';\n\nexport const LayoutItem = {\n type: 'object',\n additionalProperties: false,\n required: ['content', 'media'],\n properties: {\n ...BaseProps,\n ...CardLayoutProps,\n media: MediaProps,\n content: omit(ContentBase, ['colSize', 'centered']),\n contentMargin: {\n type: 'string',\n enum: ['m', 'l'],\n default: 'm',\n },\n metaInfo: metaInfo,\n border: {\n type: 'boolean',\n },\n fullscreen: {\n type: 'boolean',\n },\n analyticsEvents: {\n oneOf: [\n {\n ...AnalyticsEventSchema,\n optionName: 'single',\n },\n {\n type: 'array',\n items: AnalyticsEventSchema,\n optionName: 'list',\n },\n ],\n },\n },\n};\n"]}
1	+ {"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["sub-blocks/LayoutItem/schema.ts"],"names":[],"mappings":";;;;AAAA,kEAA+B;AAE/B,yFAAwD;AACxD,8DAAsF;AACtF,4DAAmE;AACnE,iDAA4D;AAE/C,QAAA,UAAU,GAAG;IACtB,IAAI,EAAE,QAAQ;IACd,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9B,UAAU,EAAE;QACR,GAAG,kBAAS;QACZ,GAAG,wBAAe;QAClB,KAAK,EAAE,mBAAU;QACjB,OAAO,EAAE,IAAA,cAAI,EAAC,oBAAW,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;QACnD,aAAa,EAAE;YACX,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YAChB,OAAO,EAAE,GAAG;SACf;QACD,QAAQ,EAAE,gBAAQ;QAClB,MAAM,EAAE;YACJ,IAAI,EAAE,SAAS;SAClB;QACD,UAAU,EAAE;YACR,IAAI,EAAE,SAAS;SAClB;QACD,GAAG,EAAE;YACD,IAAI,EAAE,QAAQ;SACjB;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,QAAQ;SACjB;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC;SAC/C;QACD,eAAe,EAAE;YACb,KAAK,EAAE;gBACH;oBACI,GAAG,4BAAoB;oBACvB,UAAU,EAAE,QAAQ;iBACvB;gBACD;oBACI,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,4BAAoB;oBAC3B,UAAU,EAAE,MAAM;iBACrB;aACJ;SACJ;KACJ;CACJ,CAAC","sourcesContent":["import omit from 'lodash/omit';\n\nimport metaInfo from '../../components/MetaInfo/schema';\nimport {BaseProps, CardLayoutProps, MediaProps} from '../../schema/validators/common';\nimport {AnalyticsEventSchema} from '../../schema/validators/event';\nimport {ContentBase} from '../../sub-blocks/Content/schema';\n\nexport const LayoutItem = {\n type: 'object',\n additionalProperties: false,\n required: ['content', 'media'],\n properties: {\n ...BaseProps,\n ...CardLayoutProps,\n media: MediaProps,\n content: omit(ContentBase, ['colSize', 'centered']),\n contentMargin: {\n type: 'string',\n enum: ['m', 'l'],\n default: 'm',\n },\n metaInfo: metaInfo,\n border: {\n type: 'boolean',\n },\n fullscreen: {\n type: 'boolean',\n },\n url: {\n type: 'string',\n },\n urlTitle: {\n type: 'string',\n },\n target: {\n type: 'string',\n enum: ['_blank', '_parent', '_top', '_self'],\n },\n analyticsEvents: {\n oneOf: [\n {\n ...AnalyticsEventSchema,\n optionName: 'single',\n },\n {\n type: 'array',\n items: AnalyticsEventSchema,\n optionName: 'list',\n },\n ],\n },\n },\n};\n"]}

package/build/docs/sub-blocks/LayoutItem.md CHANGED Viewed

@@ -26,24 +26,29 @@ Accepted as `children` by `CardLayout`, `Slider`, `SliderOld`; also used as the
   "media": {
     "light": {"image": "/assets/light.png"},
     "dark": {"image": "/assets/dark.png"}
-  }
+  },
+  "url": "https://example.com",
+  "target": "_blank"
 }
 ```
 ## Properties
-| Property             | Type                                 | Default     | Description                                                                                   |
-| -------------------- | ------------------------------------ | ----------- | --------------------------------------------------------------------------------------------- |
-| `type` _required_    | `'layout-item'`                      | —           | Sub-block discriminator.                                                                      |
-| `when`               | `string`                             | —           | Conditional rendering expression.                                                             |
-| `content` _required_ | `object`                             | —           | Text content area. See below.                                                                 |
-| `media` _required_   | `MediaProps \| {light, dark}`        | —           | Media area (image / video / youtube / iframe / dataLens). Themed: `T \| {light: T, dark: T}`. |
-| `contentMargin`      | `'m' \| 'l'`                         | `'m'`       | Spacing between the media and the content.                                                    |
-| `metaInfo`           | `string[]`                           | —           | List of meta strings rendered under the media (YFM supported).                                |
-| `border`             | `boolean`                            | —           | Adds a border to the media.                                                                   |
-| `fullscreen`         | `boolean`                            | —           | Enables fullscreen-expandable media (icon + overlay).                                         |
-| `controlPosition`    | `'content' \| 'footer'`              | `'content'` | Where buttons/links render: inline in the content or at the card footer.                      |
-| `analyticsEvents`    | `AnalyticsEvent \| AnalyticsEvent[]` | —           | Analytics events fired on media interaction.                                                  |
+| Property             | Type                                         | Default     | Description                                                                                   |
+| -------------------- | -------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------- |
+| `type` _required_    | `'layout-item'`                              | —           | Sub-block discriminator.                                                                      |
+| `when`               | `string`                                     | —           | Conditional rendering expression.                                                             |
+| `content` _required_ | `object`                                     | —           | Text content area. See below.                                                                 |
+| `media` _required_   | `MediaProps \| {light, dark}`                | —           | Media area (image / video / youtube / iframe / dataLens). Themed: `T \| {light: T, dark: T}`. |
+| `contentMargin`      | `'m' \| 'l'`                                 | `'m'`       | Spacing between the media and the content.                                                    |
+| `metaInfo`           | `string[]`                                   | —           | List of meta strings rendered under the media (YFM supported).                                |
+| `border`             | `boolean`                                    | —           | Adds a border to the media.                                                                   |
+| `fullscreen`         | `boolean`                                    | —           | Enables fullscreen-expandable media (icon + overlay).                                         |
+| `controlPosition`    | `'content' \| 'footer'`                      | `'content'` | Where buttons/links render: inline in the content or at the card footer.                      |
+| `url`                | `string`                                     | —           | Makes the entire card a link. Linked cards animate their image on hover.                      |
+| `urlTitle`           | `string`                                     | —           | Native `title` attribute for the card link.                                                   |
+| `target`             | `'_blank' \| '_parent' \| '_top' \| '_self'` | —           | Link target.                                                                                  |
+| `analyticsEvents`    | `AnalyticsEvent \| AnalyticsEvent[]`         | —           | Analytics events fired on media interaction.                                                  |
 ### `content` object

package/build/esm/constructor-items.d.ts CHANGED Viewed

@@ -28,7 +28,7 @@ export declare const subBlockMap: {
     "price-detailed": (props: import("./models/index.js").PriceDetailedProps) => import("react/jsx-runtime").JSX.Element;
     "media-card": ({ border, analyticsEvents, ...mediaProps }: import("./models/index.js").MediaCardProps) => import("react/jsx-runtime").JSX.Element;
     "banner-card": (props: import("./models/index.js").BannerCardProps) => import("react/jsx-runtime").JSX.Element;
-    "layout-item": ({ content: { links, ...content }, contentMargin, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition, }: import("./models/index.js").LayoutItemProps) => import("react/jsx-runtime").JSX.Element;
+    "layout-item": ({ content: { links, ...content }, contentMargin, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition, url, urlTitle, target, }: import("./models/index.js").LayoutItemProps) => import("react/jsx-runtime").JSX.Element;
     "background-card": (props: import("./models/index.js").BackgroundCardProps) => import("react/jsx-runtime").JSX.Element;
     "basic-card": (props: import("./models/index.js").BasicCardProps) => import("react/jsx-runtime").JSX.Element;
     content: (props: import("./sub-blocks/Content/Content.js").ContentProps) => import("react/jsx-runtime").JSX.Element;

package/build/esm/demo/ComponentMap/ComponentMap.css ADDED Viewed

@@ -0,0 +1,55 @@
+.pc-component-map {
+  position: relative;
+  width: 100%;
+  height: min(760px, 100vh - 96px);
+  min-height: 480px;
+  overflow: hidden;
+}
+.pc-component-map__canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+  touch-action: none;
+}
+.pc-component-map__canvas_interactive {
+  cursor: pointer;
+}
+.pc-component-map__canvas_dragging {
+  cursor: grabbing;
+}
+.pc-component-map__canvas:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: -3px;
+}
+.pc-component-map__toolbar {
+  position: absolute;
+  z-index: 1;
+  top: 12px;
+  right: 12px;
+  left: 12px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.pc-component-map__search {
+  flex: 1 1 200px;
+  width: 0;
+  max-width: 320px;
+  min-width: 0;
+}
+.pc-component-map__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+.pc-component-map__empty {
+  margin: 0;
+  padding: 24px;
+}

package/build/esm/demo/ComponentMap/ComponentMap.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { ComponentMapData } from "./model.js";
+import './ComponentMap.css';
+interface ComponentMapProps {
+    data: ComponentMapData;
+}
+export declare function ComponentMap({ data }: ComponentMapProps): import("react/jsx-runtime").JSX.Element;
+export {};