@gravity-ui/page-constructor 8.15.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 (129) hide show
  1. package/README.md +31 -9
  2. package/build/cjs/constructor-items.d.ts +1 -1
  3. package/build/cjs/demo/ComponentMap/ComponentMap.css +55 -0
  4. package/build/cjs/demo/ComponentMap/ComponentMap.d.ts +6 -0
  5. package/build/cjs/demo/ComponentMap/ComponentMap.js +286 -0
  6. package/build/cjs/demo/ComponentMap/ComponentMap.js.map +1 -0
  7. package/build/cjs/demo/ComponentMap/draw.d.ts +23 -0
  8. package/build/cjs/demo/ComponentMap/draw.js +134 -0
  9. package/build/cjs/demo/ComponentMap/draw.js.map +1 -0
  10. package/build/cjs/demo/ComponentMap/edgeGeometry.d.ts +20 -0
  11. package/build/cjs/demo/ComponentMap/edgeGeometry.js +146 -0
  12. package/build/cjs/demo/ComponentMap/edgeGeometry.js.map +1 -0
  13. package/build/cjs/demo/ComponentMap/graph.d.ts +9 -0
  14. package/build/cjs/demo/ComponentMap/graph.js +68 -0
  15. package/build/cjs/demo/ComponentMap/graph.js.map +1 -0
  16. package/build/cjs/demo/ComponentMap/layout.d.ts +12 -0
  17. package/build/cjs/demo/ComponentMap/layout.js +149 -0
  18. package/build/cjs/demo/ComponentMap/layout.js.map +1 -0
  19. package/build/cjs/demo/ComponentMap/model.d.ts +55 -0
  20. package/build/cjs/demo/ComponentMap/model.js +3 -0
  21. package/build/cjs/demo/ComponentMap/model.js.map +1 -0
  22. package/build/cjs/demo/ComponentMap/viewport.d.ts +7 -0
  23. package/build/cjs/demo/ComponentMap/viewport.js +41 -0
  24. package/build/cjs/demo/ComponentMap/viewport.js.map +1 -0
  25. package/build/cjs/demo/HeroAndMedia.stories.js +12 -23
  26. package/build/cjs/demo/HeroAndMedia.stories.js.map +1 -1
  27. package/build/cjs/demo/TokenizationHeader.stories.d.ts +13 -0
  28. package/build/cjs/demo/TokenizationHeader.stories.js +47 -0
  29. package/build/cjs/demo/TokenizationHeader.stories.js.map +1 -0
  30. package/build/cjs/demo/TokenizationHero.stories.d.ts +9 -0
  31. package/build/cjs/demo/TokenizationHero.stories.js +20 -0
  32. package/build/cjs/demo/TokenizationHero.stories.js.map +1 -0
  33. package/build/cjs/demo/tokenizationLanding.d.ts +2 -0
  34. package/build/cjs/demo/tokenizationLanding.js +21 -0
  35. package/build/cjs/demo/tokenizationLanding.js.map +1 -0
  36. package/build/cjs/models/constructor-items/sub-blocks.d.ts +3 -0
  37. package/build/cjs/models/constructor-items/sub-blocks.js.map +1 -1
  38. package/build/cjs/sub-blocks/LayoutItem/LayoutItem.css +15 -0
  39. package/build/cjs/sub-blocks/LayoutItem/LayoutItem.d.ts +1 -1
  40. package/build/cjs/sub-blocks/LayoutItem/LayoutItem.js +12 -2
  41. package/build/cjs/sub-blocks/LayoutItem/LayoutItem.js.map +1 -1
  42. package/build/cjs/sub-blocks/LayoutItem/schema.d.ts +10 -0
  43. package/build/cjs/sub-blocks/LayoutItem/schema.js +10 -0
  44. package/build/cjs/sub-blocks/LayoutItem/schema.js.map +1 -1
  45. package/build/docs/INDEX.md +191 -0
  46. package/build/docs/blocks/Banner.md +59 -0
  47. package/build/docs/blocks/CardLayout.md +79 -0
  48. package/build/docs/blocks/Companies.md +67 -0
  49. package/build/docs/blocks/ContentLayout.md +54 -0
  50. package/build/docs/blocks/ExtendedFeatures.md +74 -0
  51. package/build/docs/blocks/FilterBlock.md +112 -0
  52. package/build/docs/blocks/FoldableList.md +78 -0
  53. package/build/docs/blocks/Footer.md +110 -0
  54. package/build/docs/blocks/Form.md +89 -0
  55. package/build/docs/blocks/Header.md +70 -0
  56. package/build/docs/blocks/HeaderSlider.md +70 -0
  57. package/build/docs/blocks/Hero.md +67 -0
  58. package/build/docs/blocks/Icons.md +61 -0
  59. package/build/docs/blocks/Info.md +73 -0
  60. package/build/docs/blocks/Map.md +81 -0
  61. package/build/docs/blocks/Media.md +63 -0
  62. package/build/docs/blocks/PromoFeaturesBlock.md +74 -0
  63. package/build/docs/blocks/Questions.md +78 -0
  64. package/build/docs/blocks/Share.md +45 -0
  65. package/build/docs/blocks/Slider.md +89 -0
  66. package/build/docs/blocks/SliderOld.md +63 -0
  67. package/build/docs/blocks/Table.md +64 -0
  68. package/build/docs/blocks/Tabs.md +92 -0
  69. package/build/docs/guides/data-preparation-ru.md +257 -0
  70. package/build/docs/guides/data-preparation.md +259 -0
  71. package/build/docs/sub-blocks/BackgroundCard.md +63 -0
  72. package/build/docs/sub-blocks/BannerCard.md +57 -0
  73. package/build/docs/sub-blocks/BasicCard.md +60 -0
  74. package/build/docs/sub-blocks/Content.md +58 -0
  75. package/build/docs/sub-blocks/Divider.md +47 -0
  76. package/build/docs/sub-blocks/HubspotForm.md +47 -0
  77. package/build/docs/sub-blocks/ImageCard.md +59 -0
  78. package/build/docs/sub-blocks/LayoutItem.md +75 -0
  79. package/build/docs/sub-blocks/MediaCard.md +66 -0
  80. package/build/docs/sub-blocks/PriceCard.md +60 -0
  81. package/build/docs/sub-blocks/PriceDetailed.md +74 -0
  82. package/build/docs/sub-blocks/Quote.md +74 -0
  83. package/build/esm/constructor-items.d.ts +1 -1
  84. package/build/esm/demo/ComponentMap/ComponentMap.css +55 -0
  85. package/build/esm/demo/ComponentMap/ComponentMap.d.ts +7 -0
  86. package/build/esm/demo/ComponentMap/ComponentMap.js +283 -0
  87. package/build/esm/demo/ComponentMap/ComponentMap.js.map +1 -0
  88. package/build/esm/demo/ComponentMap/draw.d.ts +23 -0
  89. package/build/esm/demo/ComponentMap/draw.js +130 -0
  90. package/build/esm/demo/ComponentMap/draw.js.map +1 -0
  91. package/build/esm/demo/ComponentMap/edgeGeometry.d.ts +20 -0
  92. package/build/esm/demo/ComponentMap/edgeGeometry.js +136 -0
  93. package/build/esm/demo/ComponentMap/edgeGeometry.js.map +1 -0
  94. package/build/esm/demo/ComponentMap/graph.d.ts +9 -0
  95. package/build/esm/demo/ComponentMap/graph.js +62 -0
  96. package/build/esm/demo/ComponentMap/graph.js.map +1 -0
  97. package/build/esm/demo/ComponentMap/layout.d.ts +12 -0
  98. package/build/esm/demo/ComponentMap/layout.js +144 -0
  99. package/build/esm/demo/ComponentMap/layout.js.map +1 -0
  100. package/build/esm/demo/ComponentMap/model.d.ts +55 -0
  101. package/build/esm/demo/ComponentMap/model.js +2 -0
  102. package/build/esm/demo/ComponentMap/model.js.map +1 -0
  103. package/build/esm/demo/ComponentMap/viewport.d.ts +7 -0
  104. package/build/esm/demo/ComponentMap/viewport.js +34 -0
  105. package/build/esm/demo/ComponentMap/viewport.js.map +1 -0
  106. package/build/esm/demo/HeroAndMedia.stories.js +1 -12
  107. package/build/esm/demo/HeroAndMedia.stories.js.map +1 -1
  108. package/build/esm/demo/TokenizationHeader.stories.d.ts +13 -0
  109. package/build/esm/demo/TokenizationHeader.stories.js +43 -0
  110. package/build/esm/demo/TokenizationHeader.stories.js.map +1 -0
  111. package/build/esm/demo/TokenizationHero.stories.d.ts +9 -0
  112. package/build/esm/demo/TokenizationHero.stories.js +16 -0
  113. package/build/esm/demo/TokenizationHero.stories.js.map +1 -0
  114. package/build/esm/demo/tokenizationLanding.d.ts +2 -0
  115. package/build/esm/demo/tokenizationLanding.js +16 -0
  116. package/build/esm/demo/tokenizationLanding.js.map +1 -0
  117. package/build/esm/models/constructor-items/sub-blocks.d.ts +3 -0
  118. package/build/esm/models/constructor-items/sub-blocks.js.map +1 -1
  119. package/build/esm/sub-blocks/LayoutItem/LayoutItem.css +15 -0
  120. package/build/esm/sub-blocks/LayoutItem/LayoutItem.d.ts +1 -1
  121. package/build/esm/sub-blocks/LayoutItem/LayoutItem.js +14 -4
  122. package/build/esm/sub-blocks/LayoutItem/LayoutItem.js.map +1 -1
  123. package/build/esm/sub-blocks/LayoutItem/schema.d.ts +10 -0
  124. package/build/esm/sub-blocks/LayoutItem/schema.js +10 -0
  125. package/build/esm/sub-blocks/LayoutItem/schema.js.map +1 -1
  126. package/package.json +4 -2
  127. package/schema/index.js +1 -1
  128. package/server/models/constructor-items/sub-blocks.d.ts +3 -0
  129. package/widget/index.js +1 -1
@@ -3,26 +3,15 @@ import { blockTransform } from "../../.storybook/utils.js";
3
3
  import { PageConstructor } from "../containers/PageConstructor/index.js";
4
4
  import bannerData from "../blocks/Banner/__stories__/data.json";
5
5
  import companiesData from "../blocks/Companies/__stories__/data.json";
6
- import headerData from "../blocks/Header/__stories__/data.json";
7
6
  import infoData from "../blocks/Info/__stories__/data.json";
8
7
  import mediaData from "../blocks/Media/__stories__/data.json";
9
8
  import navData from "../navigation/__stories__/data.json";
10
9
  export default {
11
- title: 'Lab/Tokenization/Blocks/HeroAndMedia',
10
+ title: 'Lab/Tokenization/Blocks/MediaAndPromo',
12
11
  component: PageConstructor,
13
12
  };
14
13
  const Template = ({ navigation, custom = {}, }) => (_jsx(PageConstructor, { navigation: navigation, custom: custom, content: {
15
14
  blocks: [
16
- // header-block: default with action buttons
17
- blockTransform(headerData.default),
18
- // header-block: with breadcrumbs + light background
19
- blockTransform(headerData.breadcrumbs[0]),
20
- // header-block: with breadcrumbs + dark theme
21
- blockTransform(headerData.breadcrumbs[1]),
22
- // header-block: with image
23
- blockTransform(headerData.image),
24
- // header-block: with background image and color (media variant)
25
- blockTransform({ type: 'header-block', ...headerData.media.image }),
26
15
  // banner-block: light theme with themed image
27
16
  blockTransform(bannerData.default.content),
28
17
  // banner-block: forced dark theme
@@ -1 +1 @@
1
- {"version":3,"file":"HeroAndMedia.stories.js","sourceRoot":"../../../src","sources":["demo/HeroAndMedia.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,cAAc,EAAC,kCAA+B;AACtD,OAAO,EAAC,eAAe,EAAC,+CAAsC;AAG9D,OAAO,UAAU,+CAA+C;AAChE,OAAO,aAAa,kDAAkD;AACtE,OAAO,UAAU,+CAA+C;AAChE,OAAO,QAAQ,6CAA6C;AAC5D,OAAO,SAAS,8CAA8C;AAC9D,OAAO,OAAO,4CAA4C;AAE1D,eAAe;IACX,KAAK,EAAE,sCAAsC;IAC7C,SAAS,EAAE,eAAe;CACrB,CAAC;AAEV,MAAM,QAAQ,GAAiE,CAAC,EAC5E,UAAU,EACV,MAAM,GAAG,EAAE,GACd,EAAE,EAAE,CAAC,CACF,KAAC,eAAe,IACZ,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,EACH;QACI,MAAM,EAAE;YACJ,4CAA4C;YAC5C,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC;YAClC,oDAAoD;YACpD,cAAc,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;YACzC,8CAA8C;YAC9C,cAAc,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;YACzC,2BAA2B;YAC3B,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC;YAChC,gEAAgE;YAChE,cAAc,CAAC,EAAC,IAAI,EAAE,cAAc,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,EAAC,CAAC;YAEjE,8CAA8C;YAC9C,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC;YAC1C,kCAAkC;YAClC,cAAc,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC;YAE5C,kCAAkC;YAClC,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC;YACjC,4BAA4B;YAC5B,cAAc,CAAC,SAAS,CAAC,WAAW,CAAC;YACrC,6BAA6B;YAC7B,cAAc,CAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,OAAO,EAAC,CAAC;YACjE,mCAAmC;YACnC,cAAc,CAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,kBAAkB,EAAC,CAAC;YAC5E,kCAAkC;YAClC,cAAc,CAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,gBAAgB,EAAC,CAAC;YAE1E,8BAA8B;YAC9B,cAAc,CAAC,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC;YAC7C,oCAAoC;YACpC,cAAc,CAAC,aAAa,CAAC,eAAe,CAAC,OAAO,CAAC;YAErD,mCAAmC;YACnC,cAAc,CAAC,QAAQ,CAAC,OAAO,CAAC;YAChC,gDAAgD;YAChD,cAAc,CAAC,EAAC,IAAI,EAAE,YAAY,EAAE,GAAG,QAAQ,CAAC,KAAK,EAAC,CAAC;SAC1D;KACW,GAEtB,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;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,OAAO,EAAC,cAAc,EAAC,kCAA+B;AACtD,OAAO,EAAC,eAAe,EAAC,+CAAsC;AAG9D,OAAO,UAAU,+CAA+C;AAChE,OAAO,aAAa,kDAAkD;AACtE,OAAO,QAAQ,6CAA6C;AAC5D,OAAO,SAAS,8CAA8C;AAC9D,OAAO,OAAO,4CAA4C;AAE1D,eAAe;IACX,KAAK,EAAE,uCAAuC;IAC9C,SAAS,EAAE,eAAe;CACrB,CAAC;AAEV,MAAM,QAAQ,GAAiE,CAAC,EAC5E,UAAU,EACV,MAAM,GAAG,EAAE,GACd,EAAE,EAAE,CAAC,CACF,KAAC,eAAe,IACZ,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,EACH;QACI,MAAM,EAAE;YACJ,8CAA8C;YAC9C,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC;YAC1C,kCAAkC;YAClC,cAAc,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC;YAE5C,kCAAkC;YAClC,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC;YACjC,4BAA4B;YAC5B,cAAc,CAAC,SAAS,CAAC,WAAW,CAAC;YACrC,6BAA6B;YAC7B,cAAc,CAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,OAAO,EAAC,CAAC;YACjE,mCAAmC;YACnC,cAAc,CAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,kBAAkB,EAAC,CAAC;YAC5E,kCAAkC;YAClC,cAAc,CAAC,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,gBAAgB,EAAC,CAAC;YAE1E,8BAA8B;YAC9B,cAAc,CAAC,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC;YAC7C,oCAAoC;YACpC,cAAc,CAAC,aAAa,CAAC,eAAe,CAAC,OAAO,CAAC;YAErD,mCAAmC;YACnC,cAAc,CAAC,QAAQ,CAAC,OAAO,CAAC;YAChC,gDAAgD;YAChD,cAAc,CAAC,EAAC,IAAI,EAAE,YAAY,EAAE,GAAG,QAAQ,CAAC,KAAK,EAAC,CAAC;SAC1D;KACW,GAEtB,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;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"]}
@@ -0,0 +1,13 @@
1
+ import { Meta } from '@storybook/react';
2
+ import { HeaderBlockModel, NavigationData } from "../models/index.js";
3
+ interface StoryArgs {
4
+ headerBlock: HeaderBlockModel;
5
+ navigation: NavigationData;
6
+ }
7
+ declare const _default: Meta;
8
+ export default _default;
9
+ export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, StoryArgs>;
10
+ export declare const BreadcrumbsLight: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, StoryArgs>;
11
+ export declare const BreadcrumbsDark: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, StoryArgs>;
12
+ export declare const Image: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, StoryArgs>;
13
+ export declare const BackgroundMedia: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, StoryArgs>;
@@ -0,0 +1,43 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { PageConstructor } from "../containers/PageConstructor/index.js";
3
+ import { createTokenizationLandingContent } from "./tokenizationLanding.js";
4
+ import headerData from "../blocks/Header/__stories__/data.json";
5
+ import navData from "../navigation/__stories__/data.json";
6
+ export default {
7
+ title: 'Lab/Tokenization/Blocks/Header',
8
+ component: PageConstructor,
9
+ };
10
+ const Template = ({ headerBlock, navigation }) => (_jsx(PageConstructor, { navigation: navigation, content: createTokenizationLandingContent(headerBlock) }));
11
+ const navigation = navData.navigation;
12
+ export const Default = Template.bind({});
13
+ Default.args = {
14
+ navigation,
15
+ headerBlock: headerData.default,
16
+ };
17
+ export const BreadcrumbsLight = Template.bind({});
18
+ BreadcrumbsLight.args = {
19
+ navigation,
20
+ headerBlock: headerData.breadcrumbs[0],
21
+ };
22
+ export const BreadcrumbsDark = Template.bind({});
23
+ BreadcrumbsDark.args = {
24
+ navigation,
25
+ headerBlock: headerData.breadcrumbs[1],
26
+ };
27
+ export const Image = Template.bind({});
28
+ Image.args = {
29
+ navigation,
30
+ headerBlock: {
31
+ ...headerData.image,
32
+ title: headerData.image.title.replace('{{width}}', 'm'),
33
+ },
34
+ };
35
+ export const BackgroundMedia = Template.bind({});
36
+ BackgroundMedia.args = {
37
+ navigation,
38
+ headerBlock: {
39
+ type: 'header-block',
40
+ ...headerData.media.image,
41
+ },
42
+ };
43
+ //# sourceMappingURL=TokenizationHeader.stories.js.map
@@ -0,0 +1 @@
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"]}
@@ -0,0 +1,9 @@
1
+ import { Meta } from '@storybook/react';
2
+ import { HeroBlockModel, NavigationData } from "../models/index.js";
3
+ interface StoryArgs {
4
+ heroBlock: HeroBlockModel;
5
+ navigation: NavigationData;
6
+ }
7
+ declare const _default: Meta;
8
+ export default _default;
9
+ export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, StoryArgs>;
@@ -0,0 +1,16 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { PageConstructor } from "../containers/PageConstructor/index.js";
3
+ import { createTokenizationLandingContent } from "./tokenizationLanding.js";
4
+ import heroData from "../blocks/Hero/__stories__/data.json";
5
+ import navData from "../navigation/__stories__/data.json";
6
+ export default {
7
+ title: 'Lab/Tokenization/Blocks/Hero',
8
+ component: PageConstructor,
9
+ };
10
+ const Template = ({ heroBlock, navigation }) => (_jsx(PageConstructor, { navigation: navigation, content: createTokenizationLandingContent(heroBlock) }));
11
+ export const Default = Template.bind({});
12
+ Default.args = {
13
+ navigation: navData.navigation,
14
+ heroBlock: heroData.default,
15
+ };
16
+ //# sourceMappingURL=TokenizationHero.stories.js.map
@@ -0,0 +1 @@
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"]}
@@ -0,0 +1,2 @@
1
+ import { ConstructorBlock, PageContent } from "../models/index.js";
2
+ export declare const createTokenizationLandingContent: (headerBlock: ConstructorBlock) => PageContent;
@@ -0,0 +1,16 @@
1
+ import { blockTransform } from "../../.storybook/utils.js";
2
+ import bannerData from "../blocks/Banner/__stories__/data.json";
3
+ import companiesData from "../blocks/Companies/__stories__/data.json";
4
+ import promoFeaturesData from "../blocks/PromoFeaturesBlock/__stories__/data.json";
5
+ export const createTokenizationLandingContent = (headerBlock) => ({
6
+ blocks: [
7
+ blockTransform(headerBlock),
8
+ blockTransform({
9
+ ...promoFeaturesData.common,
10
+ ...promoFeaturesData.defaultTheme.content,
11
+ }),
12
+ blockTransform(companiesData.withDescription.content),
13
+ blockTransform(bannerData.default.content),
14
+ ],
15
+ });
16
+ //# sourceMappingURL=tokenizationLanding.js.map
@@ -0,0 +1 @@
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"]}
@@ -154,6 +154,9 @@ export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, Analyt
154
154
  border?: boolean;
155
155
  fullscreen?: boolean;
156
156
  icon?: ThemeSupporting<PositionedIcon>;
157
+ url?: string;
158
+ urlTitle?: string;
159
+ target?: string;
157
160
  }
158
161
  export interface ImageCardProps extends CardBaseProps, AnalyticsEventsBase, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'controlPosition'> {
159
162
  image: ThemeSupporting<ImageProps>;
@@ -1 +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"]}
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 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"]}
@@ -39,4 +39,19 @@ unpredictable css rules order in build */
39
39
  .pc-layout-item__content {
40
40
  margin-right: 0;
41
41
  }
42
+ }
43
+
44
+ a.pc-layout-item {
45
+ color: inherit;
46
+ text-decoration: none;
47
+ }
48
+ a.pc-layout-item:hover, a.pc-layout-item:active {
49
+ --pc-text-header-color: inherit;
50
+ color: inherit;
51
+ }
52
+ a.pc-layout-item .pc-layout-item__media .pc-media-component-image__item {
53
+ transition: transform 300ms ease-in-out;
54
+ }
55
+ a.pc-layout-item:hover .pc-layout-item__media .pc-media-component-image__item {
56
+ transform: scale(1.05);
42
57
  }
@@ -1,4 +1,4 @@
1
1
  import { LayoutItemProps } from "../../models/index.js";
2
2
  import './LayoutItem.css';
3
- declare const LayoutItem: ({ content: { links, ...content }, contentMargin, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition, }: LayoutItemProps) => import("react/jsx-runtime").JSX.Element;
3
+ 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;
4
4
  export default LayoutItem;
@@ -1,19 +1,22 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import * as React from 'react';
3
- import { useUniqId } from '@gravity-ui/uikit';
4
- import { FullscreenMedia, IconWrapper, Media, MetaInfo } from "../../components/index.js";
3
+ import { Link, useUniqId } from '@gravity-ui/uikit';
4
+ import { FullscreenMedia, IconWrapper, Media, MetaInfo, RouterLink } from "../../components/index.js";
5
5
  import { useTheme } from "../../context/theme/index.js";
6
+ import { useAnalytics } from "../../hooks/index.js";
7
+ import { DefaultEventNames } from "../../models/index.js";
6
8
  import { block, getThemedValue } from "../../utils/index.js";
7
9
  import { mergeVideoMicrodata } from "../../utils/microdata.js";
8
10
  import Content from "../Content/Content.js";
9
11
  import { getLayoutItemLinks, hasFullscreen, showFullscreenIcon } from "./utils.js";
10
12
  import './LayoutItem.css';
11
13
  const b = block('layout-item');
12
- const LayoutItem = ({ content: { links, ...content }, contentMargin = 'm', metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition = 'content', }) => {
14
+ const LayoutItem = ({ content: { links, ...content }, contentMargin = 'm', metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition = 'content', url, urlTitle, target, }) => {
13
15
  const normalizedLinks = React.useMemo(() => getLayoutItemLinks(links), [links]);
14
16
  const areControlsInFooter = controlPosition === 'footer';
15
17
  const theme = useTheme();
16
18
  const themedIcon = getThemedValue(icon, theme);
19
+ const handleAnalytics = useAnalytics(DefaultEventNames.CardBase, url);
17
20
  const contentProps = {
18
21
  controlPosition: areControlsInFooter ? 'bottom' : 'default',
19
22
  ...content,
@@ -34,7 +37,14 @@ const LayoutItem = ({ content: { links, ...content }, contentMargin = 'm', metaI
34
37
  });
35
38
  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 }));
36
39
  };
37
- 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 }) }) })] }));
40
+ 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 }) }) })] }));
41
+ if (url) {
42
+ 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: {
43
+ draggable: false,
44
+ onDragStart: (event) => event.preventDefault(),
45
+ }, children: cardContent }) }));
46
+ }
47
+ return _jsx("div", { className: b(null, className), children: cardContent });
38
48
  };
39
49
  export default LayoutItem;
40
50
  //# sourceMappingURL=LayoutItem.js.map
@@ -1 +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"]}
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"]}
@@ -495,6 +495,16 @@ export declare const LayoutItem: {
495
495
  fullscreen: {
496
496
  type: string;
497
497
  };
498
+ url: {
499
+ type: string;
500
+ };
501
+ urlTitle: {
502
+ type: string;
503
+ };
504
+ target: {
505
+ type: string;
506
+ enum: string[];
507
+ };
498
508
  analyticsEvents: {
499
509
  oneOf: ({
500
510
  optionName: string;
@@ -24,6 +24,16 @@ export const LayoutItem = {
24
24
  fullscreen: {
25
25
  type: 'boolean',
26
26
  },
27
+ url: {
28
+ type: 'string',
29
+ },
30
+ urlTitle: {
31
+ type: 'string',
32
+ },
33
+ target: {
34
+ type: 'string',
35
+ enum: ['_blank', '_parent', '_top', '_self'],
36
+ },
27
37
  analyticsEvents: {
28
38
  oneOf: [
29
39
  {
@@ -1 +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"]}
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,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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "8.15.0",
3
+ "version": "8.17.0",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "type": "commonjs",
@@ -73,6 +73,7 @@
73
73
  "lint": "run-p lint:js lint:styles lint:prettier typecheck",
74
74
  "typecheck": "tsc --noEmit",
75
75
  "dev": "npm run storybook:start",
76
+ "storybook:map": "node scripts/storybook-map/generate.js",
76
77
  "storybook:start": "storybook dev -p 7009",
77
78
  "storybook:build": "storybook build -c .storybook -o storybook-static",
78
79
  "start": "node dist",
@@ -137,8 +138,9 @@
137
138
  "@commitlint/config-conventional": "^19.6.0",
138
139
  "@diplodoc/transform": "^4.57.1",
139
140
  "@gravity-ui/eslint-config": "^3.2.0",
140
- "@gravity-ui/gulp-utils": "^1.0.3",
141
+ "@gravity-ui/gulp-utils": "^1.1.1",
141
142
  "@gravity-ui/prettier-config": "^1.1.0",
143
+ "@gravity-ui/readme-validator": "^1.3.0",
142
144
  "@gravity-ui/stylelint-config": "^4.0.1",
143
145
  "@gravity-ui/tsconfig": "^1.0.0",
144
146
  "@gravity-ui/uikit": "^7.13.1",