@redneckz/wildless-cms-uni-blocks 0.2.71 → 0.2.74

package/lib/{Img.d.ts → ui-kit/Img.d.ts}

@@ -1,4 +1,4 @@
-import type { Picture, ImgSource } from './types';
+import type { ImgSource, Picture } from '../model/Picture';
 export interface TextWithImageProps {
     className?: string;
     image: Picture;

package/lib/ui-kit/Img.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Img.js","sourceRoot":"","sources":["../../src/ui-kit/Img.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAQxC,MAAM,CAAC,MAAM,GAAG,GAAG,GAAG,CAAqB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACnE,mBAAS,SAAS,EAAE,GAAG,SAAS,IAAI,EAAE,EAAE,aACrC,KAAK,CAAC,OAAO,EAAE,MAAM;YACpB,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,iBAAgC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,IAA9D,GAAG,KAAK,IAAI,GAAG,EAAE,CAAiD,CAChF,CAAC;YACJ,CAAC,CAAC,IAAI,EACR,cAAK,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,KAAM,KAAK,EAAE,IAAI,GAAI,IACnF,CACX,CAAC,CAAC;AAEH,MAAM,UAAU,gBAAgB,CAAC,MAA2B;IAC1D,OAAO,MAAM,CAAC,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;AACxD,CAAC"}

package/lib/ui-kit/SVG.d.ts

@@ -13,6 +13,8 @@ export interface SVGProps extends SVGPathOptions {
     className?: string;
     viewBox?: string;
     paths: SVGPath[];
+    width?: string;
+    height?: string;
 }
 export declare const SVG: (props: import("@redneckz/uni-jsx").PropsWithChildren<SVGProps, any>, context?: any) => any;
 export {};

package/lib/ui-kit/SVG.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
-export const SVG = JSX(({ className, viewBox, fill = 'none', paths, ...commonOptions }) => {
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, viewBox: viewBox, fill: fill, children: paths.map(({ d, fill, ...options }, i) => (_jsx("path", { d: d, fill: fill || 'currentColor', ...commonOptions, ...options }, i))) }));
+export const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, viewBox: viewBox, fill: fill, width: width, height: height, children: paths.map(({ d, fill, ...options }, i) => (_jsx("path", { d: d, fill: fill || 'currentColor', ...commonOptions, ...options }, i))) }));
 });
 //# sourceMappingURL=SVG.js.map

package/lib/ui-kit/SVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"SVG.js","sourceRoot":"","sources":["../../src/ui-kit/SVG.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAqBxC,MAAM,CAAC,MAAM,GAAG,GAAG,GAAG,CACpB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa,EAAE,EAAE,EAAE;IACjE,OAAO,CACL,cAAK,KAAK,EAAC,4BAA4B,EAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,YACvF,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CACzC,eAAc,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,IAAI,cAAc,KAAM,aAAa,KAAM,OAAO,IAArE,CAAC,CAAwE,CACrF,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"SVG.js","sourceRoot":"","sources":["../../src/ui-kit/SVG.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAuBxC,MAAM,CAAC,MAAM,GAAG,GAAG,GAAG,CACpB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa,EAAE,EAAE,EAAE;IAChF,OAAO,CACL,cACE,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,YAEb,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CACzC,eAAc,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,IAAI,cAAc,KAAM,aAAa,KAAM,OAAO,IAArE,CAAC,CAAwE,CACrF,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/lib/ui-kit/Title.d.ts

@@ -1,11 +1,2 @@
-export declare enum SizeTableClass {
-    'XL' = "text-title-lg",
-    'L' = "text-title",
-    'M' = "text-title-sm",
-    'S' = "text-title-xs"
-}
-export declare type TitleSize = keyof typeof SizeTableClass;
-export interface TitleProps extends Partial<HTMLHeadingElement> {
-    size?: TitleSize;
-}
+import { TitleProps } from './TitleProps';
 export declare const Title: (props: import("@redneckz/uni-jsx").PropsWithChildren<TitleProps, any>, context?: any) => any;

package/lib/ui-kit/Title.js

@@ -1,12 +1,6 @@
 import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
-export var SizeTableClass;
-(function (SizeTableClass) {
-    SizeTableClass["XL"] = "text-title-lg";
-    SizeTableClass["L"] = "text-title";
-    SizeTableClass["M"] = "text-title-sm";
-    SizeTableClass["S"] = "text-title-xs";
-})(SizeTableClass || (SizeTableClass = {}));
+import { SizeTableClass } from './TitleProps.js';
 export const Title = JSX(({ size = 'L', className, children, ...rest }) => {
     const Tag = size === 'XL' ? 'h1' : 'h2';
     return (_jsx(Tag, { className: getClasses(SizeTableClass[size], className), ...rest, children: children }));

package/lib/ui-kit/Title.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title.js","sourceRoot":"","sources":["../../src/ui-kit/Title.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,MAAM,CAAN,IAAY,cAKX;AALD,WAAY,cAAc;IACxB,sCAAsB,CAAA;IACtB,kCAAkB,CAAA;IAClB,qCAAqB,CAAA;IACrB,qCAAqB,CAAA;AACvB,CAAC,EALW,cAAc,KAAd,cAAc,QAKzB;AAQD,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAa,CAAC,EAAE,IAAI,GAAG,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACpF,MAAM,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IACxC,OAAO,CACL,KAAC,GAAG,IAAC,SAAS,EAAE,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,KAAM,IAAI,YAClE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,CAAC,GAAG,OAA+B,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC"}
+{"version":3,"file":"Title.js","sourceRoot":"","sources":["../../src/ui-kit/Title.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,cAAc,EAAc,MAAM,cAAc,CAAC;AAE1D,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAa,CAAC,EAAE,IAAI,GAAG,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACpF,MAAM,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IACxC,OAAO,CACL,KAAC,GAAG,IAAC,SAAS,EAAE,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,KAAM,IAAI,YAClE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,CAAC,GAAG,OAA+B,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC"}

package/lib/ui-kit/TitleProps.d.ts

@@ -0,0 +1,10 @@
+export declare enum SizeTableClass {
+    'XL' = "text-title-lg",
+    'L' = "text-title",
+    'M' = "text-title-sm",
+    'S' = "text-title-xs"
+}
+export declare type TitleSize = keyof typeof SizeTableClass;
+export interface TitleProps extends Partial<HTMLHeadingElement> {
+    size?: TitleSize;
+}

package/lib/ui-kit/TitleProps.js

@@ -0,0 +1,8 @@
+export var SizeTableClass;
+(function (SizeTableClass) {
+    SizeTableClass["XL"] = "text-title-lg";
+    SizeTableClass["L"] = "text-title";
+    SizeTableClass["M"] = "text-title-sm";
+    SizeTableClass["S"] = "text-title-xs";
+})(SizeTableClass || (SizeTableClass = {}));
+//# sourceMappingURL=TitleProps.js.map

package/lib/ui-kit/TitleProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleProps.js","sourceRoot":"","sources":["../../src/ui-kit/TitleProps.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,cAKX;AALD,WAAY,cAAc;IACxB,sCAAsB,CAAA;IACtB,kCAAkB,CAAA;IAClB,qCAAqB,CAAA;IACrB,qCAAqB,CAAA;AACvB,CAAC,EALW,cAAc,KAAd,cAAc,QAKzB"}

package/lib/ui-kit/TopItem.d.ts

@@ -1,4 +1,4 @@
-import type { LinkContent } from '../types';
+import type { LinkContent } from '../model/LinkContent';
 export interface TopItemContent extends LinkContent {
     active?: boolean;
 }

package/lib/useLink.d.ts

@@ -1,12 +1,15 @@
 import { HandlerDecorator, Router } from './ContentPageContext';
-import type { LinkContent } from './types';
+import type { LinkContent } from './model/LinkContent';
 export declare function useLink({ router, handlerDecorator, }: {
     router: Router;
     handlerDecorator?: HandlerDecorator;
-}, link: Partial<LinkContent>): {
+}, link: Partial<LinkContent & {
+    className: string;
+}>): {
     href: string | undefined;
     ariaLabel: string | undefined;
     onClick: (ev: MouseEvent) => void;
     text?: string | undefined;
     target?: string | undefined;
+    className?: string | undefined;
 };

package/lib/useLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLink.js","sourceRoot":"","sources":["../src/useLink.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,uBAAuB,GAAqB,CAAC,OAAO,EAAE,aAAa,EAAE,EAAE,CAAC,OAAO,CAAC;AAEtF,MAAM,UAAU,OAAO,CACrB,EACE,MAAM,EACN,gBAAgB,GAAG,uBAAuB,GACc,EAC1D,IAA0B;IAE1B,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IAC3C,OAAO;QACL,GAAG,IAAI;QACP,IAAI;QACJ,SAAS,EAAE,IAAI,CAAC,IAAI;QACpB,OAAO,EAAE,gBAAgB,CAAC,CAAC,EAAc,EAAE,EAAE;YAC3C,MAAM,WAAW,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YACzC,MAAM,aAAa,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC;YAC9D,IAAI,WAAW,IAAI,aAAa,EAAE;gBAChC,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aACnB;QACH,CAAC,EAAE,IAAI,CAAC;KACT,CAAC;AACJ,CAAC"}
+{"version":3,"file":"useLink.js","sourceRoot":"","sources":["../src/useLink.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,uBAAuB,GAAqB,CAAC,OAAO,EAAE,aAAa,EAAE,EAAE,CAAC,OAAO,CAAC;AAEtF,MAAM,UAAU,OAAO,CACrB,EACE,MAAM,EACN,gBAAgB,GAAG,uBAAuB,GACc,EAC1D,IAAkD;IAElD,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IAC3C,OAAO;QACL,GAAG,IAAI;QACP,IAAI;QACJ,SAAS,EAAE,IAAI,CAAC,IAAI;QACpB,OAAO,EAAE,gBAAgB,CAAC,CAAC,EAAc,EAAE,EAAE;YAC3C,MAAM,WAAW,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YACzC,MAAM,aAAa,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC;YAC9D,IAAI,WAAW,IAAI,aAAa,EAAE;gBAChC,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aACnB;QACH,CAAC,EAAE,IAAI,CAAC;KACT,CAAC;AACJ,CAAC"}

package/lib/useSitemap.d.ts

@@ -1,3 +1,3 @@
 import type { AsyncDataHook } from './ContentPageContext';
-import type { HeaderContent } from './Header/index';
+import type { HeaderContent } from './Header/HeaderContent';
 export declare function useSitemap(useAsyncData: AsyncDataHook): HeaderContent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.2.71",
+  "version": "0.2.74",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -54,6 +54,7 @@
       "types": "./lib/utils/*.d.ts"
     },
     "./bundle/*.js": "./bundle/*.js",
+    "./bundle/*.json": "./bundle/*.json",
     "./*.json": "./*.json",
     "./*.js": "./*.js",
     "./*.cjs": "./*.cjs"
@@ -82,7 +83,8 @@
     "build:lib": "rimraf ./lib && tsc --build --verbose",
     "postbuild:lib": "replace-in-file --configFile=replace-config.lib.cjs --verbose",
     "build:commonjs": "rimraf ./dist && tsc --module commonjs --noImplicitUseStrict --outDir dist",
-    "bundle": "rimraf ./bundle && rollup -c",
+    "bundle": "rimraf ./bundle && rollup -c && npm run build:schema",
+    "build:schema": "ts-json-schema-generator --path './src/**/*Content.ts' --no-type-check --type '*' -o ./bundle/blocks.schema.json",
     "build:style": "postcss './src/**/*.css' --env production --dir ./lib",
     "build:icons": "svgo -f ./src/icons -o ./cosmos-static/icons",
     "size": "size-limit",
@@ -139,6 +141,7 @@
     "svgo": "^2.8.0",
     "tailwindcss": "^3.1.1",
     "ts-jest": "^28.0.4",
+    "ts-json-schema-generator": "^1.0.0",
     "ts-loader": "^9.3.0",
     "typescript": "^4.7.3",
     "webpack": "^5.73.0",

package/src/BaseTile.tsx

@@ -1,25 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Img } from './Img';
-import type { BlockVersion, Picture, UniBlockProps } from './types';
+import type { BaseTileContent } from './BaseTileContent';
+import type { BlockVersion } from './model/BlockVersion';
+import type { UniBlockProps } from './types';
 import { BlockItem } from './ui-kit/BlockItem';
-import type { IconButtonProps } from './ui-kit/IconButton';
-import { IconButton } from './ui-kit/IconButton';
+import { Button } from './ui-kit/Button';
+import type { ButtonWithIconProps } from './ui-kit/ButtonProps';
+import { Icon } from './ui-kit/Icon';
+import { Img } from './ui-kit/Img';
 import { Title } from './ui-kit/Title';
-import type { TitleSize } from './ui-kit/Title';
 import { useLink } from './useLink';
 import { getColSpan } from './utils/getColSpan';
 
-export interface BaseTileContent {
-  title?: string;
-  titleSize?: TitleSize;
-  description?: string;
-  image?: Picture;
-  items?: string[];
-  buttons?: IconButtonProps[];
-  version?: BlockVersion;
-}
-
 export interface BaseTileProps extends BaseTileContent, UniBlockProps {}
+
 const TITLE_CLASSES = 'font-medium m-0 mb-4 whitespace-pre-wrap max-w-[600px]';
 
 export const BaseTile = JSX<BaseTileProps>(
@@ -89,6 +82,17 @@ function renderItems(items: string[] = [], version?: BlockVersion) {
   );
 }
 
-function renderButton(button: IconButtonProps, i: number) {
-  return button?.text ? <IconButton key={String(i)} {...button} /> : null;
+function renderButton({ icon, ...button }: ButtonWithIconProps, i: number) {
+  if (!button?.text) return;
+
+  if (icon)
+    return (
+      <Button
+        key={String(i)}
+        appendLeft={<Icon name={icon} width="24" height="24" />}
+        {...button}
+      />
+    );
+
+  return <Button key={String(i)} {...button} />;
 }

package/src/BaseTileContent.ts

@@ -0,0 +1,14 @@
+import type { BlockVersion } from './model/BlockVersion';
+import type { Picture } from './model/Picture';
+import type { ButtonWithIconProps } from './ui-kit/ButtonProps';
+import type { TitleSize } from './ui-kit/TitleProps';
+
+export interface BaseTileContent {
+  title?: string;
+  titleSize?: TitleSize;
+  description?: string;
+  image?: Picture;
+  items?: string[];
+  buttons?: ButtonWithIconProps[];
+  version?: BlockVersion;
+}

package/src/BenefitsBlock.tsx

@@ -1,17 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { Benefit, BenefitsBlockContent } from './BenefitsBlockContent';
 import type { UniBlockProps } from './types';
-import { Icon, IconName } from './ui-kit/Icon';
-
-export interface Benefit {
-  label: string;
-  description?: string;
-  icon?: IconName;
-}
-
-export interface BenefitsBlockContent {
-  title?: string;
-  benefits?: Benefit[];
-}
+import { Icon } from './ui-kit/Icon';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 

package/src/BenefitsBlockContent.ts

@@ -0,0 +1,12 @@
+import type { IconName } from './ui-kit/IconProps';
+
+export interface Benefit {
+  label: string;
+  description?: string;
+  icon?: IconName;
+}
+
+export interface BenefitsBlockContent {
+  title?: string;
+  benefits?: Benefit[];
+}

package/src/BlockContent.ts

@@ -0,0 +1,32 @@
+import type { BenefitsBlockContent } from './BenefitsBlockContent';
+import type { ExchangeRateTileContent } from './ExchangeRateTileContent';
+import type { FooterContent } from './Footer/FooterContent';
+import type { GalleryContent } from './GalleryContent';
+import type { HeaderContent } from './Header/HeaderContent';
+import type { MobileAppTileContent } from './MobileAppTileContent';
+import type { PlaceholderContent } from './PlaceholderContent';
+import type { ProductBlockContent } from './ProductBlockContent';
+import type { ProductGalleryContent } from './ProductGalleryContent';
+import type { ProductTileContent } from './ProductTileContent';
+import type { PromoTileContent } from './PromoTileContent';
+import type { StepsBlockContent } from './StepsBlockContent';
+import type { TextBlockContent } from './TextBlockContent';
+import type { TileContent } from './TileContent';
+import type { ComparisonTableContent } from './ComparisonTable';
+
+export type BlockContent =
+  | HeaderContent
+  | FooterContent
+  | PlaceholderContent
+  | TileContent
+  | PromoTileContent
+  | TextBlockContent
+  | ProductTileContent
+  | ProductBlockContent
+  | StepsBlockContent
+  | BenefitsBlockContent
+  | ProductGalleryContent
+  | ExchangeRateTileContent
+  | MobileAppTileContent
+  | GalleryContent
+  | ComparisonTableContent;

package/src/Blocks.ts

@@ -1,19 +1,19 @@
-import { BenefitsBlock, BenefitsBlockContent } from './BenefitsBlock';
-import { ExchangeRateTile, ExchangeRateTileContent } from './ExchangeRateTile';
-import { Footer, FooterContent } from './Footer/index';
-import { Header, HeaderContent } from './Header/index';
-import { MobileAppTile, MobileAppTileContent } from './MobileAppTile';
-import { Placeholder, PlaceholderContent } from './Placeholder';
+import { BenefitsBlock } from './BenefitsBlock';
+import { ExchangeRateTile } from './ExchangeRateTile';
+import { Footer } from './Footer/Footer';
+import { Gallery } from './Gallery';
+import { Header } from './Header/Header';
+import { MiniGallery } from './MiniGallery';
+import { MobileAppTile } from './MobileAppTile';
+import { Placeholder } from './Placeholder';
 import { ProductBlock } from './ProductBlock';
-import { ProductBlockInnerContent } from './ProductBlockInner';
-import { ProductGallery, ProductGalleryContent } from './ProductGallery';
-import { StepsBlock, StepsBlockContent } from './StepsBlock';
-import { ProductTile, ProductTileContent } from './ProductTile';
-import { BaseTileContent } from './BaseTile';
-import { PromoTile, PromoTileContent } from './PromoTile';
+import { ProductGallery } from './ProductGallery';
+import { ProductTile } from './ProductTile';
+import { PromoTile } from './PromoTile';
+import { StepsBlock } from './StepsBlock';
+import { TextBlock } from './TextBlock';
 import { Tile } from './Tile';
-import { TextBlock, TextBlockContent } from './TextBlock';
-import { Gallery, GalleryContent } from './Gallery';
+import { ComparisonTable } from './ComparisonTable';
 
 export const Blocks = {
   Header,
@@ -30,20 +30,6 @@ export const Blocks = {
   ExchangeRateTile,
   MobileAppTile,
   Gallery,
+  MiniGallery,
+  ComparisonTable,
 };
-
-export type BlockContent =
-  | HeaderContent
-  | FooterContent
-  | PlaceholderContent
-  | BaseTileContent
-  | TextBlockContent
-  | ProductTileContent
-  | PromoTileContent
-  | ProductBlockInnerContent
-  | StepsBlockContent
-  | BenefitsBlockContent
-  | ProductGalleryContent
-  | ExchangeRateTileContent
-  | MobileAppTileContent
-  | GalleryContent;

package/src/ComparisonTable/ComparisonTable.fixture.tsx

@@ -0,0 +1,265 @@
+import type { Picture } from '../model/Picture';
+import { context } from '../setup-fixture';
+import { ComparisonTable } from './ComparisonTable';
+import type { Column } from './ComparisonTableContent';
+
+const image1: Picture = {
+  src: 'card-1.png',
+  format: 'webp',
+  size: {
+    width: 100,
+    height: 63,
+  },
+};
+
+const image2: Picture = {
+  src: 'card-2.png',
+  format: 'webp',
+  size: {
+    width: 100,
+    height: 63,
+  },
+};
+
+const image3: Picture = {
+  src: 'card-3.png',
+  format: 'webp',
+  size: {
+    width: 100,
+    height: 63,
+  },
+};
+
+const rowHeaders = [
+  { title: 'Начисление процентов на остаток по счету' },
+  { title: 'Снятие наличных' },
+  { title: 'Оформление онлайн' },
+  { title: 'Кэшбэк баллами' },
+  { title: 'Стоимость обслуживания' },
+  { title: 'Стоимость SMS-сервиса' },
+  { title: 'Дополнительная информация' },
+];
+const rowHeaders2 = [
+  { title: 'Срок вклада (дней)' },
+  { title: 'Ставка по вкладу' },
+  { title: 'Минимальная сумма' },
+  { title: 'Максимальная сумма' },
+];
+const columns: Column[] = [
+  {
+    header: {
+      title: 'Россельхоз-Росснефть',
+      image: image1,
+      link: {
+        text: 'Подробнее',
+        href: '/credits',
+      },
+    },
+    data: [
+      [{ label: 'Нет' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'В банкоматах и кассах Россельхозбанка и банков-партнеров',
+        },
+        {
+          label: 'Бесплатно',
+          description: 'В сторонних банкоматах - 1 раз в месяц, далее 1% минимум 150 руб',
+        },
+      ],
+      [{ label: 'Нет' }],
+      [{ label: 'До 7%' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'При обороте по карте от 10000 ₽ в месяц',
+        },
+      ],
+      [{ label: '69 рублей в месяц' }],
+      [{ description: 'Оплачивайте покупки картой и заправляйтесь за баллы в сети АЗС Роснефть' }],
+    ],
+  },
+  {
+    header: {
+      title: 'Panasonic',
+      image: image2,
+      link: {
+        text: 'Подробнее',
+        href: '/credits',
+      },
+    },
+    data: [
+      [{ label: 'Нет' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'В банкоматах и кассах Россельхозбанка и банков-партнеров',
+        },
+        {
+          label: '1%',
+          description: 'В сторонних банкоматах, минимум 150 руб',
+        },
+      ],
+      [{ label: 'Нет' }],
+      [{ label: 'До 20%' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'При обороте по карте от 10000 ₽ в месяц',
+        },
+      ],
+      [{ label: '69 рублей в месяц' }],
+      [
+        {
+          description:
+            'Копите баллы каждый день и обменивайте их на скидки на электронику и бытовую технику Panasonic',
+        },
+      ],
+    ],
+  },
+  {
+    header: {
+      title: 'Профсоюзная',
+      image: image3,
+      link: {
+        text: 'Подробнее',
+        href: '/credits',
+      },
+    },
+    data: [
+      [{ label: 'Нет' }],
+      [{ label: 'Бесплатно' }],
+      [{ label: 'Есть' }],
+      [{ label: 'До 20%' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'При обороте по карте от 10000 ₽ в месяц',
+        },
+      ],
+      [{ label: '69 рублей в месяц' }],
+      [{ description: 'Для членов профсоюзных организаций' }],
+    ],
+  },
+];
+const columns2: Column[] = [
+  {
+    header: {
+      title: '«Пополняемый»',
+      icon: 'GlassIcon',
+      link: {
+        text: 'Подробнее',
+        href: '/credits',
+      },
+    },
+    data: [
+      [{ label: 'от 91 до 1095' }],
+      [{ label: 'до 8,2% ₽' }, { label: 'до 0,01% USD' }],
+      [{ label: 'От 3000 ₽' }, { label: 'От 50 USD' }],
+      [{ label: 'до 10 млн ₽' }, { label: 'до 300 тыс. USD' }],
+    ],
+  },
+  {
+    header: {
+      title: '«Комфортный»',
+      icon: 'ComfortableCompIcon',
+      link: {
+        text: 'Подробнее',
+        href: '/credits',
+      },
+    },
+    data: [
+      [{ label: 'от 91 до 1095' }],
+      [{ label: 'до 7,2% ₽' }, { label: 'до 0,01% USD' }],
+      [{ label: 'От 10 000 ₽' }, { label: 'От 150 USD' }],
+      [{ label: 'до 10 млн ₽' }, { label: 'до 300 тыс. USD' }],
+    ],
+  },
+  {
+    header: {
+      title: '«Доходный пенсионный»',
+      icon: 'ClockIcon',
+      link: {
+        text: 'Подробнее',
+        href: '/credits',
+      },
+    },
+    data: [
+      [{ label: 'от 91 до 1460' }],
+      [{ label: 'до 9,5% ₽' }],
+      [{ label: 'От 500 ₽' }],
+      [{ label: 'Без ограничений' }],
+    ],
+  },
+];
+
+export default {
+  'with images': (
+    <div className="w-[1280px]">
+      <div className="grid grid-cols-12">
+        <ComparisonTable
+          className="col-span-12"
+          title="Другие дебетовые карты Россельхозбанка"
+          context={context}
+          rowHeaders={rowHeaders}
+          columns={Array(2).fill(columns).flat()}
+        />
+      </div>
+    </div>
+  ),
+  'with images and hidden rows': (
+    <div className="w-[1280px]">
+      <div className="grid grid-cols-12">
+        <ComparisonTable
+          className="col-span-12"
+          title="Другие дебетовые карты Россельхозбанка"
+          visibleRowLength={3}
+          context={context}
+          rowHeaders={rowHeaders}
+          columns={Array(2).fill(columns).flat()}
+        />
+      </div>
+    </div>
+  ),
+  'with images and colored first column': (
+    <div className="w-[1280px]">
+      <div className="grid grid-cols-12">
+        <ComparisonTable
+          className="col-span-12"
+          title="Другие дебетовые карты Россельхозбанка"
+          visibleRowLength={3}
+          isColoredFirstColumn={true}
+          context={context}
+          rowHeaders={rowHeaders}
+          columns={Array(2).fill(columns).flat()}
+        />
+      </div>
+    </div>
+  ),
+  'with icons': (
+    <div className="w-[1280px]">
+      <div className="grid grid-cols-12">
+        <ComparisonTable
+          className="col-span-12"
+          title="Другие вклады и сбережения"
+          context={context}
+          rowHeaders={rowHeaders2}
+          columns={Array(2).fill(columns2).flat()}
+        />
+      </div>
+    </div>
+  ),
+  'with icons and two cols': (
+    <div className="w-[1280px]">
+      <div className="grid grid-cols-12">
+        <ComparisonTable
+          className="col-span-12"
+          title="Другие вклады и сбережения"
+          context={context}
+          rowHeaders={rowHeaders2}
+          columns={columns2.slice(0, 2)}
+        />
+      </div>
+    </div>
+  ),
+};