@redneckz/wildless-cms-uni-blocks 0.2.72 → 0.2.75

package/lib/ui-kit/Button.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 const buttonStyleMap = {
     primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
@@ -8,11 +8,17 @@ const buttonDisabledStyleMap = {
     primary: 'bg-secondary-dark text-secondary-text',
     secondary: 'bg-secondary-light text-secondary-text',
 };
-const styleButton = 'inline-block rounded-md px-8 py-2 text-center font-sans';
-export const Button = JSX(({ className, text, href, target, onClick, children, disabled, version = 'primary', ariaLabel, }) => {
+const styleButton = 'inline-block text-center font-sans select-none';
+export const Button = JSX(({ className, text, aboveText, appendLeft, href, target, onClick, children, disabled, rounded, version = 'none', ariaLabel, ...rest }) => {
+    const buttonInner = children ?? (_jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, rounded: rounded }));
     if (disabled) {
-        return (_jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: "-1", className: `${styleButton} select-none ${buttonDisabledStyleMap[version]} ${className || ''}`, children: children ? (_jsx("div", { children: children })) : (_jsx("div", { className: "text-sm font-medium py-1.5", children: text })) }));
+        return (_jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: "-1", className: `${styleButton} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: buttonInner }));
     }
-    return (_jsx("a", { className: `${styleButton} no-underline ${buttonStyleMap[version]} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, children: children ? (_jsx("div", { children: children })) : (_jsx("div", { className: "text-sm font-medium py-1.5", children: text })) }));
+    return (_jsx("a", { className: `${styleButton} cursor-pointer no-underline ${buttonStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: !href ? 'button' : 'link', ...rest, children: buttonInner }));
+});
+export const ButtonInner = JSX(({ text, aboveText, appendLeft, rounded }) => {
+    const withoutText = !text && !aboveText && Boolean(appendLeft);
+    const buttonInnerClasses = `flex items-center justify-center ${withoutText ? 'h-12 w-12 min-h-12 min-w-12' : `px-8 gap-2 ${aboveText ? 'py-2' : 'py-[13px]'}`} ${rounded ? 'rounded-full' : ''}`;
+    return (_jsxs("div", { className: buttonInnerClasses, children: [appendLeft ? appendLeft : null, !withoutText ? (_jsxs("div", { children: [_jsx("div", { className: "text-xxs text-left", children: aboveText }), _jsx("div", { className: "text-sm font-medium text-left", children: text })] })) : null] }));
 });
 //# sourceMappingURL=Button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/ui-kit/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAIxC,MAAM,cAAc,GAAkC;IACpD,OAAO,EAAE,4EAA4E;IACrF,SAAS,EACP,0FAA0F;CAC7F,CAAC;AAEF,MAAM,sBAAsB,GAAkC;IAC5D,OAAO,EAAE,uCAAuC;IAChD,SAAS,EAAE,wCAAwC;CACpD,CAAC;AAEF,MAAM,WAAW,GAAG,yDAAyD,CAAC;AAE9E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CACvB,CAAC,EACC,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,SAAS,GACV,EAAE,EAAE;IACH,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL,cACE,IAAI,EAAC,QAAQ,mBACC,MAAM,gBACR,SAAS,EACrB,QAAQ,EAAC,IAAI,EACb,SAAS,EAAE,GAAG,WAAW,gBAAgB,sBAAsB,CAAC,OAAO,CAAC,IACtE,SAAS,IAAI,EACf,EAAE,YAED,QAAQ,CAAC,CAAC,CAAC,CACV,wBAAM,QAAQ,GAAO,CACtB,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,4BAA4B,YAAE,IAAI,GAAO,CACzD,GACG,CACP,CAAC;KACH;IAED,OAAO,CACL,YACE,SAAS,EAAE,GAAG,WAAW,iBAAiB,cAAc,CAAC,OAAO,CAAC,IAAI,SAAS,IAAI,EAAE,EAAE,EACtF,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,gBACJ,SAAS,YAEpB,QAAQ,CAAC,CAAC,CAAC,CACV,wBAAM,QAAQ,GAAO,CACtB,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,4BAA4B,YAAE,IAAI,GAAO,CACzD,GACC,CACL,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/ui-kit/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAIxC,MAAM,cAAc,GAAkC;IACpD,OAAO,EAAE,4EAA4E;IACrF,SAAS,EACP,0FAA0F;CAC7F,CAAC;AAEF,MAAM,sBAAsB,GAAkC;IAC5D,OAAO,EAAE,uCAAuC;IAChD,SAAS,EAAE,wCAAwC;CACpD,CAAC;AAEF,MAAM,WAAW,GAAG,gDAAgD,CAAC;AAErE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CACvB,CAAC,EACC,SAAS,EACT,IAAI,EACJ,SAAS,EACT,UAAU,EACV,IAAI,EACJ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,GAAG,MAAM,EAChB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,QAAQ,IAAI,CAC9B,KAAC,WAAW,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,CAC5F,CAAC;IAEF,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL,cACE,IAAI,EAAC,QAAQ,mBACC,MAAM,gBACR,SAAS,EACrB,QAAQ,EAAC,IAAI,EACb,SAAS,EAAE,GAAG,WAAW,IAAI,sBAAsB,CAAC,OAAO,CAAC,IAAI,EAAE,IAChE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAC7B,IAAI,SAAS,IAAI,EAAE,EAAE,YAEpB,WAAW,GACR,CACP,CAAC;KACH;IAED,OAAO,CACL,YACE,SAAS,EAAE,GAAG,WAAW,gCAAgC,cAAc,CAAC,OAAO,CAAC,IAAI,EAAE,IACpF,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAC7B,IAAI,SAAS,IAAI,EAAE,EAAE,EACrB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,gBACJ,SAAS,EACrB,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,KAC3B,IAAI,YAEP,WAAW,GACV,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAmB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE,EAAE;IAC5F,MAAM,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,OAAO,CAAC,UAAU,CAAC,CAAC;IAE/D,MAAM,kBAAkB,GAAG,oCACzB,WAAW,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,cAAc,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,EAC9F,IAAI,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IAEpC,OAAO,CACL,eAAK,SAAS,EAAE,kBAAkB,aAC/B,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,EAC9B,CAAC,WAAW,CAAC,CAAC,CAAC,CACd,0BACE,cAAK,SAAS,EAAC,oBAAoB,YAAE,SAAS,GAAO,EACrD,cAAK,SAAS,EAAC,+BAA+B,YAAE,IAAI,GAAO,IACvD,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

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

@@ -1,9 +1,21 @@
 import type { ButtonVersion } from '../model/ButtonVersion';
 import type { LinkContent } from '../model/LinkContent';
-export interface ButtonProps extends LinkContent {
+import { IconName } from './IconProps';
+export interface ButtonInnerProps {
+    text?: string;
+    aboveText?: string;
+    appendLeft?: any;
+    rounded?: boolean;
+}
+export interface ButtonProps extends LinkContent, ButtonInnerProps {
     className?: string;
-    onClick?: (ev: MouseEvent) => any;
     version?: ButtonVersion;
-    ariaLabel?: string;
     disabled?: boolean;
+    rel?: string;
+    ariaLabel?: string;
+    /** @hidden */
+    onClick?: (ev: MouseEvent) => any;
+}
+export interface ButtonWithIconProps extends ButtonProps {
+    icon?: IconName;
 }

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

@@ -1,4 +1,26 @@
-export declare type IconName = 'ActualBalanceIcon' | 'AppleIcon' | 'CalendarIcon' | 'ClockIcon' | 'ComfortableCompIcon' | 'DollarIcon' | 'EmptyWalletIcon' | 'EuroIcon' | 'GridIcon' | 'LoupeIcon' | 'NewDocIcon' | 'OkIcon' | 'PassSendIcon' | 'PercentageSquareIcon' | 'PlayMarketIcon' | 'ProfileIcon' | 'SignDocsIcon' | 'TelegramIcon' | 'VKIcon' | 'ArrowLeftIcon';
+export declare enum IconMap {
+    'ActualBalanceIcon' = 0,
+    'AppleIcon' = 1,
+    'CalendarIcon' = 2,
+    'ClockIcon' = 3,
+    'ComfortableCompIcon' = 4,
+    'DollarIcon' = 5,
+    'EmptyWalletIcon' = 6,
+    'EuroIcon' = 7,
+    'GridIcon' = 8,
+    'LoupeIcon' = 9,
+    'NewDocIcon' = 10,
+    'OkIcon' = 11,
+    'PassSendIcon' = 12,
+    'PercentageSquareIcon' = 13,
+    'PlayMarketIcon' = 14,
+    'ProfileIcon' = 15,
+    'SignDocsIcon' = 16,
+    'TelegramIcon' = 17,
+    'VKIcon' = 18,
+    'GlassIcon' = 19
+}
+export declare type IconName = keyof typeof IconMap;
 export interface IconProps {
     className?: string;
     name: IconName;

package/lib/ui-kit/IconProps.js

@@ -1,2 +1,24 @@
-export {};
+export var IconMap;
+(function (IconMap) {
+    IconMap[IconMap["ActualBalanceIcon"] = 0] = "ActualBalanceIcon";
+    IconMap[IconMap["AppleIcon"] = 1] = "AppleIcon";
+    IconMap[IconMap["CalendarIcon"] = 2] = "CalendarIcon";
+    IconMap[IconMap["ClockIcon"] = 3] = "ClockIcon";
+    IconMap[IconMap["ComfortableCompIcon"] = 4] = "ComfortableCompIcon";
+    IconMap[IconMap["DollarIcon"] = 5] = "DollarIcon";
+    IconMap[IconMap["EmptyWalletIcon"] = 6] = "EmptyWalletIcon";
+    IconMap[IconMap["EuroIcon"] = 7] = "EuroIcon";
+    IconMap[IconMap["GridIcon"] = 8] = "GridIcon";
+    IconMap[IconMap["LoupeIcon"] = 9] = "LoupeIcon";
+    IconMap[IconMap["NewDocIcon"] = 10] = "NewDocIcon";
+    IconMap[IconMap["OkIcon"] = 11] = "OkIcon";
+    IconMap[IconMap["PassSendIcon"] = 12] = "PassSendIcon";
+    IconMap[IconMap["PercentageSquareIcon"] = 13] = "PercentageSquareIcon";
+    IconMap[IconMap["PlayMarketIcon"] = 14] = "PlayMarketIcon";
+    IconMap[IconMap["ProfileIcon"] = 15] = "ProfileIcon";
+    IconMap[IconMap["SignDocsIcon"] = 16] = "SignDocsIcon";
+    IconMap[IconMap["TelegramIcon"] = 17] = "TelegramIcon";
+    IconMap[IconMap["VKIcon"] = 18] = "VKIcon";
+    IconMap[IconMap["GlassIcon"] = 19] = "GlassIcon";
+})(IconMap || (IconMap = {}));
 //# sourceMappingURL=IconProps.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconProps.js","sourceRoot":"","sources":["../../src/ui-kit/IconProps.ts"],"names":[],"mappings":""}
+{"version":3,"file":"IconProps.js","sourceRoot":"","sources":["../../src/ui-kit/IconProps.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,OAqBX;AArBD,WAAY,OAAO;IACjB,+DAAmB,CAAA;IACnB,+CAAW,CAAA;IACX,qDAAc,CAAA;IACd,+CAAW,CAAA;IACX,mEAAqB,CAAA;IACrB,iDAAY,CAAA;IACZ,2DAAiB,CAAA;IACjB,6CAAU,CAAA;IACV,6CAAU,CAAA;IACV,+CAAW,CAAA;IACX,kDAAY,CAAA;IACZ,0CAAQ,CAAA;IACR,sDAAc,CAAA;IACd,sEAAsB,CAAA;IACtB,0DAAgB,CAAA;IAChB,oDAAa,CAAA;IACb,sDAAc,CAAA;IACd,sDAAc,CAAA;IACd,0CAAQ,CAAA;IACR,gDAAW,CAAA;AACb,CAAC,EArBW,OAAO,KAAP,OAAO,QAqBlB"}

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

@@ -1,4 +1,4 @@
-import type { Picture, ImgSource } from './model/Picture';
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.2.72",
+  "version": "0.2.75",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",

package/src/BaseTile.tsx

@@ -1,11 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BaseTileContent } from './BaseTileContent';
-import { Img } from './Img';
 import type { BlockVersion } from './model/BlockVersion';
 import type { UniBlockProps } from './types';
 import { BlockItem } from './ui-kit/BlockItem';
-import { IconButton } from './ui-kit/IconButton';
-import type { IconButtonProps } from './ui-kit/IconButtonProps';
+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 { useLink } from './useLink';
 import { getColSpan } from './utils/getColSpan';
@@ -81,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

@@ -1,6 +1,6 @@
 import type { BlockVersion } from './model/BlockVersion';
 import type { Picture } from './model/Picture';
-import type { IconButtonProps } from './ui-kit/IconButtonProps';
+import type { ButtonWithIconProps } from './ui-kit/ButtonProps';
 import type { TitleSize } from './ui-kit/TitleProps';
 
 export interface BaseTileContent {
@@ -9,6 +9,6 @@ export interface BaseTileContent {
   description?: string;
   image?: Picture;
   items?: string[];
-  buttons?: Omit<IconButtonProps, 'className' | 'onClick' | 'ariaLabel'>[];
+  buttons?: ButtonWithIconProps[];
   version?: BlockVersion;
 }

package/src/BlockContent.ts

@@ -12,6 +12,7 @@ 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
@@ -27,4 +28,5 @@ export type BlockContent =
   | ProductGalleryContent
   | ExchangeRateTileContent
   | MobileAppTileContent
-  | GalleryContent;
+  | GalleryContent
+  | ComparisonTableContent;

package/src/Blocks.ts

@@ -3,6 +3,7 @@ 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';
@@ -12,6 +13,7 @@ import { PromoTile } from './PromoTile';
 import { StepsBlock } from './StepsBlock';
 import { TextBlock } from './TextBlock';
 import { Tile } from './Tile';
+import { ComparisonTable } from './ComparisonTable';
 
 export const Blocks = {
   Header,
@@ -28,4 +30,6 @@ export const Blocks = {
   ExchangeRateTile,
   MobileAppTile,
   Gallery,
+  MiniGallery,
+  ComparisonTable,
 };

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>
+  ),
+};

package/src/ComparisonTable/ComparisonTable.tsx

@@ -0,0 +1,126 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../types';
+import { ArrowButton } from '../ui-kit/ArrowButton';
+import { Title } from '../ui-kit/Title';
+import { TableRowContainer } from './TableRowContainer';
+import { TableCarouselContainer } from './TableCarouselContainer';
+import { useLink } from '../useLink';
+import type { ComparisonTableContent, RowData } from './ComparisonTableContent';
+import { HeaderCell } from './HeaderCell';
+import { TableRow } from './TableRow';
+import { COLS_LENGTH_FOR_SCROLL, FIRST_CELL_CLASSES } from './constants';
+
+export interface ComparisonTableProps extends ComparisonTableContent, UniBlockProps {}
+
+export const ComparisonTable = JSX<ComparisonTableProps>(
+  ({
+    className,
+    context,
+    title,
+    rowHeaders,
+    columns,
+    visibleRowLength = 0,
+    isColoredFirstColumn = false,
+  }) => {
+    const router = context.useRouter();
+    const { handlerDecorator } = context;
+    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+    const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
+
+    const colHeaders = columns?.map(({ header }) => header || {});
+    const colData = columns?.map(({ data }) => data) || [];
+    const rowData: RowData = rowHeaders
+      ?.map((header, i) => ({
+        header,
+        data: colData.map((col) => col?.[i] || [{}]),
+      }))
+      .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
+
+    const nextClick = () => setActiveCardIndex(activeCardIndex + 1);
+    const prevClick = () => setActiveCardIndex(activeCardIndex - 1);
+    const showToggle = () => setIsShowAllRow(!isShowAllRow);
+
+    const isScrollAvailable = colData?.length && colData.length > COLS_LENGTH_FOR_SCROLL;
+    const showNextButton =
+      isScrollAvailable && colData?.length - activeCardIndex > COLS_LENGTH_FOR_SCROLL;
+    const showPrevButton = isScrollAvailable && activeCardIndex > 0;
+
+    return (
+      <section
+        className={`bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${
+          className || ''
+        }`}
+      >
+        <Title className="font-medium m-0 max-w-[47rem] text-center mb-9 mx-auto">{title}</Title>
+        <div role="table">
+          {colHeaders?.length ? (
+            <TableRowContainer>
+              <div className={FIRST_CELL_CLASSES} role="columnheader" scope="col" />
+              <TableCarouselContainer activeCardIndex={activeCardIndex}>
+                {colHeaders.map((header, i) => (
+                  <HeaderCell
+                    key={String(i)}
+                    {...header}
+                    link={header.link && useLink({ router, handlerDecorator }, header.link)}
+                  />
+                ))}
+              </TableCarouselContainer>
+            </TableRowContainer>
+          ) : null}
+
+          {rowData?.length ? (
+            <div className="relative">
+              {rowData.map((row, i, { length }) => (
+                <TableRow
+                  key={String(i)}
+                  row={row}
+                  isFirstRow={i === 0}
+                  isLastRow={i + 1 === length}
+                  activeCardIndex={activeCardIndex}
+                  isColoredFirstColumn={isColoredFirstColumn}
+                />
+              ))}
+              {isScrollAvailable ? (
+                <div>
+                  <div className="absolute top-7 right-7 z-10">
+                    <ArrowButton
+                      onClick={nextClick}
+                      disabled={!showNextButton}
+                      ariaLabel="Пролистать вправо"
+                    />
+                    <ArrowButton
+                      className="mt-4 rotate-180"
+                      onClick={prevClick}
+                      disabled={!showPrevButton}
+                      ariaLabel="Пролистать влево"
+                    />
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+
+        {isScrollAvailable ? (
+          <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+        ) : null}
+
+        {visibleRowLength ? (
+          <div className="pr-[50px]">
+            <div className="flex w-full">
+              <div className={FIRST_CELL_CLASSES} />
+              <button
+                onClick={showToggle}
+                className="mt-5 flex-1 border-main-stroke border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"
+              >
+                <div className="font-sans font-medium text-xs py-[11px]">
+                  {!isShowAllRow ? 'Показать все параметры' : 'Скрыть'}
+                </div>
+              </button>
+            </div>
+          </div>
+        ) : null}
+      </section>
+    );
+  },
+);