@gravity-ui/page-constructor 8.16.0 → 8.18.0

package/build/esm/demo/TokenizationHeader.stories.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PageConstructor } from "../containers/PageConstructor/index.js";
+import { createTokenizationLandingContent } from "./tokenizationLanding.js";
+import headerData from "../blocks/Header/__stories__/data.json";
+import navData from "../navigation/__stories__/data.json";
+export default {
+    title: 'Lab/Tokenization/Blocks/Header',
+    component: PageConstructor,
+};
+const Template = ({ headerBlock, navigation }) => (_jsx(PageConstructor, { navigation: navigation, content: createTokenizationLandingContent(headerBlock) }));
+const navigation = navData.navigation;
+export const Default = Template.bind({});
+Default.args = {
+    navigation,
+    headerBlock: headerData.default,
+};
+export const BreadcrumbsLight = Template.bind({});
+BreadcrumbsLight.args = {
+    navigation,
+    headerBlock: headerData.breadcrumbs[0],
+};
+export const BreadcrumbsDark = Template.bind({});
+BreadcrumbsDark.args = {
+    navigation,
+    headerBlock: headerData.breadcrumbs[1],
+};
+export const Image = Template.bind({});
+Image.args = {
+    navigation,
+    headerBlock: {
+        ...headerData.image,
+        title: headerData.image.title.replace('{{width}}', 'm'),
+    },
+};
+export const BackgroundMedia = Template.bind({});
+BackgroundMedia.args = {
+    navigation,
+    headerBlock: {
+        type: 'header-block',
+        ...headerData.media.image,
+    },
+};
+//# sourceMappingURL=TokenizationHeader.stories.js.map

package/build/esm/demo/TokenizationHeader.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenizationHeader.stories.js","sourceRoot":"../../../src","sources":["demo/TokenizationHeader.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,eAAe,EAAC,+CAAsC;AAG9D,OAAO,EAAC,gCAAgC,EAAC,iCAA8B;AAEvE,OAAO,UAAU,+CAA+C;AAChE,OAAO,OAAO,4CAA4C;AAO1D,eAAe;IACX,KAAK,EAAE,gCAAgC;IACvC,SAAS,EAAE,eAAe;CACrB,CAAC;AAEV,MAAM,QAAQ,GAAuB,CAAC,EAAC,WAAW,EAAE,UAAU,EAAC,EAAE,EAAE,CAAC,CAChE,KAAC,eAAe,IACZ,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,gCAAgC,CAAC,WAAW,CAAC,GACxD,CACL,CAAC;AAEF,MAAM,UAAU,GAAG,OAAO,CAAC,UAA4B,CAAC;AAExD,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACX,UAAU;IACV,WAAW,EAAE,UAAU,CAAC,OAA2B;CACtD,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAClD,gBAAgB,CAAC,IAAI,GAAG;IACpB,UAAU;IACV,WAAW,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,CAAqB;CAC7D,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,eAAe,CAAC,IAAI,GAAG;IACnB,UAAU;IACV,WAAW,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC,CAAqB;CAC7D,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACT,UAAU;IACV,WAAW,EAAE;QACT,GAAG,UAAU,CAAC,KAAK;QACnB,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC;KACtC;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,eAAe,CAAC,IAAI,GAAG;IACnB,UAAU;IACV,WAAW,EAAE;QACT,IAAI,EAAE,cAAc;QACpB,GAAG,UAAU,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/esm/demo/TokenizationHero.stories.d.ts

@@ -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").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, StoryArgs>;

package/build/esm/demo/TokenizationHero.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PageConstructor } from "../containers/PageConstructor/index.js";
+import { createTokenizationLandingContent } from "./tokenizationLanding.js";
+import heroData from "../blocks/Hero/__stories__/data.json";
+import navData from "../navigation/__stories__/data.json";
+export default {
+    title: 'Lab/Tokenization/Blocks/Hero',
+    component: PageConstructor,
+};
+const Template = ({ heroBlock, navigation }) => (_jsx(PageConstructor, { navigation: navigation, content: createTokenizationLandingContent(heroBlock) }));
+export const Default = Template.bind({});
+Default.args = {
+    navigation: navData.navigation,
+    heroBlock: heroData.default,
+};
+//# sourceMappingURL=TokenizationHero.stories.js.map

package/build/esm/demo/TokenizationHero.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenizationHero.stories.js","sourceRoot":"../../../src","sources":["demo/TokenizationHero.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,eAAe,EAAC,+CAAsC;AAG9D,OAAO,EAAC,gCAAgC,EAAC,iCAA8B;AAEvE,OAAO,QAAQ,6CAA6C;AAC5D,OAAO,OAAO,4CAA4C;AAO1D,eAAe;IACX,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,eAAe;CACrB,CAAC;AAEV,MAAM,QAAQ,GAAuB,CAAC,EAAC,SAAS,EAAE,UAAU,EAAC,EAAE,EAAE,CAAC,CAC9D,KAAC,eAAe,IACZ,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,gCAAgC,CAAC,SAAS,CAAC,GACtD,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACX,UAAU,EAAE,OAAO,CAAC,UAA4B;IAChD,SAAS,EAAE,QAAQ,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/esm/demo/tokenizationLanding.d.ts

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

package/build/esm/demo/tokenizationLanding.js

@@ -0,0 +1,16 @@
+import { blockTransform } from "../../.storybook/utils.js";
+import bannerData from "../blocks/Banner/__stories__/data.json";
+import companiesData from "../blocks/Companies/__stories__/data.json";
+import promoFeaturesData from "../blocks/PromoFeaturesBlock/__stories__/data.json";
+export const createTokenizationLandingContent = (headerBlock) => ({
+    blocks: [
+        blockTransform(headerBlock),
+        blockTransform({
+            ...promoFeaturesData.common,
+            ...promoFeaturesData.defaultTheme.content,
+        }),
+        blockTransform(companiesData.withDescription.content),
+        blockTransform(bannerData.default.content),
+    ],
+});
+//# sourceMappingURL=tokenizationLanding.js.map

package/build/esm/demo/tokenizationLanding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokenizationLanding.js","sourceRoot":"../../../src","sources":["demo/tokenizationLanding.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAC,kCAA+B;AAGtD,OAAO,UAAU,+CAA+C;AAChE,OAAO,aAAa,kDAAkD;AACtE,OAAO,iBAAiB,2DAA2D;AAEnF,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAAC,WAA6B,EAAe,EAAE,CAAC,CAAC;IAC7F,MAAM,EAAE;QACJ,cAAc,CAAC,WAAW,CAAC;QAC3B,cAAc,CAAC;YACX,GAAG,iBAAiB,CAAC,MAAM;YAC3B,GAAG,iBAAiB,CAAC,YAAY,CAAC,OAAO;SAC5C,CAAC;QACF,cAAc,CAAC,aAAa,CAAC,eAAe,CAAC,OAAO,CAAC;QACrD,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC;KAC7C;CACJ,CAAC,CAAC","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/esm/models/constructor-items/sub-blocks.d.ts

@@ -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/esm/models/constructor-items/sub-blocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"sub-blocks.js","sourceRoot":"../../../../src","sources":["models/constructor-items/sub-blocks.ts"],"names":[],"mappings":"AA8BA,MAAM,CAAN,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,KAAZ,YAAY,QAoBvB;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACpB,2BAAW,CAAA;IACX,6BAAa,CAAA;AACjB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAkBD,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,uCAAiB,CAAA;IACjB,yCAAmB,CAAA;AACvB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED,MAAM,CAAC,MAAM,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"]}
+{"version":3,"file":"sub-blocks.js","sourceRoot":"../../../../src","sources":["models/constructor-items/sub-blocks.ts"],"names":[],"mappings":"AA8BA,MAAM,CAAN,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,KAAZ,YAAY,QAoBvB;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACpB,2BAAW,CAAA;IACX,6BAAa,CAAA;AACjB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAkBD,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,uCAAiB,CAAA;IACjB,yCAAmB,CAAA;AACvB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED,MAAM,CAAC,MAAM,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/esm/sub-blocks/LayoutItem/LayoutItem.css

@@ -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/esm/sub-blocks/LayoutItem/LayoutItem.d.ts

@@ -1,4 +1,4 @@
 import { LayoutItemProps } from "../../models/index.js";
 import './LayoutItem.css';
-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/esm/sub-blocks/LayoutItem/LayoutItem.js

@@ -1,19 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { useUniqId } from '@gravity-ui/uikit';
-import { FullscreenMedia, IconWrapper, Media, MetaInfo } from "../../components/index.js";
+import { Link, useUniqId } from '@gravity-ui/uikit';
+import { FullscreenMedia, IconWrapper, Media, MetaInfo, RouterLink } from "../../components/index.js";
 import { useTheme } from "../../context/theme/index.js";
+import { useAnalytics } from "../../hooks/index.js";
+import { DefaultEventNames } from "../../models/index.js";
 import { block, getThemedValue } from "../../utils/index.js";
 import { mergeVideoMicrodata } from "../../utils/microdata.js";
 import Content from "../Content/Content.js";
 import { getLayoutItemLinks, hasFullscreen, showFullscreenIcon } from "./utils.js";
 import './LayoutItem.css';
 const b = 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(() => getLayoutItemLinks(links), [links]);
     const areControlsInFooter = controlPosition === 'footer';
     const theme = useTheme();
     const themedIcon = getThemedValue(icon, theme);
+    const handleAnalytics = useAnalytics(DefaultEventNames.CardBase, url);
     const contentProps = {
         controlPosition: areControlsInFooter ? 'bottom' : 'default',
         ...content,
@@ -34,7 +37,14 @@ const LayoutItem = ({ content: { links, ...content }, contentMargin = 'm', metaI
         });
         return fullscreen && hasFullscreen(themedMedia) ? (_jsx(FullscreenMedia, { showFullscreenIcon: showFullscreenIcon(themedMedia), children: ({ className: mediaClassName, fullscreen: _fullscreen, ...fullscreenMediaProps } = {}) => (_jsx(Media, { ...mediaWithMicrodata, ...fullscreenMediaProps, className: b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })) })) : (_jsx(Media, { ...themedMedia, className: b('media', { border }), analyticsEvents: analyticsEvents }));
     };
-    return (_jsxs("div", { className: b(null, className), children: [renderMedia(), metaInfo && _jsx(MetaInfo, { items: metaInfo, className: b('meta-info') }), _jsx("div", { className: b('content', { 'no-media': !media, margin: contentMargin }), children: _jsx(IconWrapper, { icon: themedIcon, className: b('wrapper'), size: contentProps.size, children: _jsx(Content, { ...contentProps, titleId: titleId }) }) })] }));
+    const cardContent = (_jsxs(React.Fragment, { children: [renderMedia(), metaInfo && _jsx(MetaInfo, { items: metaInfo, className: b('meta-info') }), _jsx("div", { className: b('content', { 'no-media': !media, margin: contentMargin }), children: _jsx(IconWrapper, { icon: themedIcon, className: b('wrapper'), size: contentProps.size, children: _jsx(Content, { ...contentProps, titleId: titleId }) }) })] }));
+    if (url) {
+        return (_jsx(RouterLink, { href: url, children: _jsx(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 _jsx("div", { className: b(null, className), children: cardContent });
 };
 export default LayoutItem;
 //# sourceMappingURL=LayoutItem.js.map

package/build/esm/sub-blocks/LayoutItem/LayoutItem.js.map

@@ -1 +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 {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"]}
+{"version":3,"file":"LayoutItem.js","sourceRoot":"../../../../src","sources":["sub-blocks/LayoutItem/LayoutItem.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAC,eAAe,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAC,kCAAyB;AAC3F,OAAO,EAAC,QAAQ,EAAC,qCAA4B;AAC7C,OAAO,EAAC,YAAY,EAAC,6BAAoB;AACzC,OAAO,EAAoB,iBAAiB,EAAkB,8BAAqB;AACnF,OAAO,EAAC,KAAK,EAAE,cAAc,EAAC,6BAAoB;AAClD,OAAO,EAAC,mBAAmB,EAAC,iCAA8B;AAC1D,OAAO,OAAO,8BAA2B;AAEzC,OAAO,EAAC,kBAAkB,EAAE,aAAa,EAAE,kBAAkB,EAAC,mBAAgB;AAE9E,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,GAAG,KAAK,CAAC,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,EAC3B,GAAG,EACH,QAAQ,EACR,MAAM,GACQ,EAAE,EAAE;IAClB,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAChF,MAAM,mBAAmB,GAAG,eAAe,KAAK,QAAQ,CAAC;IACzD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC/C,MAAM,eAAe,GAAG,YAAY,CAAC,iBAAiB,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAEtE,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,SAAS,EAAE,CAAC;IAC5B,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,IAAI,CAAC,KAAK,EAAE,CAAC;YACT,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,MAAM,WAAW,GAAG,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACjD,MAAM,EAAC,KAAK,EAAC,GAAG,OAAO,CAAC;QACxB,MAAM,kBAAkB,GAAG,mBAAmB,CAAC,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,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAC9C,KAAC,eAAe,IAAC,kBAAkB,EAAE,kBAAkB,CAAC,WAAW,CAAC,YAC/D,CAAC,EACE,SAAS,EAAE,cAAc,EACzB,UAAU,EAAE,WAAW,EACvB,GAAG,oBAAoB,EAC1B,GAAG,EAAE,EAAE,EAAE,CAAC,CACP,KAAC,KAAK,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,KAAC,KAAK,OACE,WAAW,EACf,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,MAAM,EAAC,CAAC,EAC/B,eAAe,EAAE,eAAe,GAClC,CACL,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAChB,MAAC,KAAK,CAAC,QAAQ,eACV,WAAW,EAAE,EACb,QAAQ,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,GAAI,EACrE,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,EAAC,CAAC,YACrE,KAAC,WAAW,IAAC,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,YAAY,CAAC,IAAI,YAC3E,KAAC,OAAO,OAAK,YAAY,EAAE,OAAO,EAAE,OAAO,GAAI,GACrC,GACZ,IACO,CACpB,CAAC;IAEF,IAAI,GAAG,EAAE,CAAC;QACN,OAAO,CACH,KAAC,UAAU,IAAC,IAAI,EAAE,GAAG,YACjB,KAAC,IAAI,IACD,IAAI,EAAE,GAAG,EACT,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,EAC5D,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7B,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,eAAe,CAAC,EAC/C,UAAU,EAAE;oBACR,SAAS,EAAE,KAAK;oBAChB,WAAW,EAAE,CAAC,KAAyC,EAAE,EAAE,CACvD,KAAK,CAAC,cAAc,EAAE;iBAC7B,YAEA,WAAW,GACT,GACE,CAChB,CAAC;IACN,CAAC;IAED,OAAO,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,YAAG,WAAW,GAAO,CAAC;AACnE,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","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/esm/sub-blocks/LayoutItem/schema.d.ts

@@ -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/esm/sub-blocks/LayoutItem/schema.js

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

package/build/esm/sub-blocks/LayoutItem/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["sub-blocks/LayoutItem/schema.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,uBAAoB;AAE/B,OAAO,QAAQ,4CAAyC;AACxD,OAAO,EAAC,SAAS,EAAE,eAAe,EAAE,UAAU,EAAC,0CAAuC;AACtF,OAAO,EAAC,oBAAoB,EAAC,yCAAsC;AACnE,OAAO,EAAC,WAAW,EAAC,6BAAwC;AAE5D,MAAM,CAAC,MAAM,UAAU,GAAG;IACtB,IAAI,EAAE,QAAQ;IACd,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9B,UAAU,EAAE;QACR,GAAG,SAAS;QACZ,GAAG,eAAe;QAClB,KAAK,EAAE,UAAU;QACjB,OAAO,EAAE,IAAI,CAAC,WAAW,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,QAAQ;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,oBAAoB;oBACvB,UAAU,EAAE,QAAQ;iBACvB;gBACD;oBACI,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,oBAAoB;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"]}
+{"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["sub-blocks/LayoutItem/schema.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,uBAAoB;AAE/B,OAAO,QAAQ,4CAAyC;AACxD,OAAO,EAAC,SAAS,EAAE,eAAe,EAAE,UAAU,EAAC,0CAAuC;AACtF,OAAO,EAAC,oBAAoB,EAAC,yCAAsC;AACnE,OAAO,EAAC,WAAW,EAAC,6BAAwC;AAE5D,MAAM,CAAC,MAAM,UAAU,GAAG;IACtB,IAAI,EAAE,QAAQ;IACd,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9B,UAAU,EAAE;QACR,GAAG,SAAS;QACZ,GAAG,eAAe;QAClB,KAAK,EAAE,UAAU;QACjB,OAAO,EAAE,IAAI,CAAC,WAAW,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,QAAQ;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,oBAAoB;oBACvB,UAAU,EAAE,QAAQ;iBACvB;gBACD;oBACI,IAAI,EAAE,OAAO;oBACb,KAAK,EAAE,oBAAoB;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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "8.16.0",
+  "version": "8.18.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "type": "commonjs",
@@ -73,6 +73,7 @@
     "lint": "run-p lint:js lint:styles lint:prettier typecheck",
     "typecheck": "tsc --noEmit",
     "dev": "npm run storybook:start",
+    "storybook:map": "node scripts/storybook-map/generate.js",
     "storybook:start": "storybook dev -p 7009",
     "storybook:build": "storybook build -c .storybook -o storybook-static",
     "start": "node dist",