@redneckz/wildless-cms-uni-blocks 0.6.40 → 0.6.41

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -22,30 +22,33 @@ export const ProductTile = JSX<ProductTileProps>(
     benefits = [],
     buttons,
     image,
+    isImageOnRightSide = true,
     version = 'primary',
     ...rest
   }) => (
     <BlockWrapper
-      className={`overflow-hidden font-sans p-9 box-border relative justify-between grid min-h-[364px]
-          ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)}`}
+      className={`overflow-hidden font-sans p-9 box-border relative min-h-[364px]
+          ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${className}`}
       {...rest}
     >
-      <Headline
-        className={`!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`}
-        as="h2"
-        title={title}
-        description={description}
-        headlineVersion={headlineVersion}
-        bgColorHeadline={version}
-        align="left"
-        {...rest}
-      />
-      {renderBenefits(benefits, version, image)}
-      {additionalDescription ? renderAdditionalDescription(additionalDescription, image) : null}
-      {buttons?.length ? (
-        <ButtonSection buttons={buttons} className="flex self-end mt-5 gap-4 z-10 text-l" />
-      ) : null}
-      {image?.src ? <Img className="absolute right-0 bottom-0" image={image} /> : null}
+      <div className={`flex flex-col ${isImageOnRightSide ? '' : 'items-end'}`}>
+        <Headline
+          className={`!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`}
+          as="h2"
+          title={title}
+          description={description}
+          headlineVersion={headlineVersion}
+          bgColorHeadline={version}
+          align="left"
+          {...rest}
+        />
+        {renderBenefits(benefits, version, image)}
+        {additionalDescription ? renderAdditionalDescription(additionalDescription, image) : null}
+        {buttons?.length ? (
+          <ButtonSection buttons={buttons} className="mt-5 gap-4 z-10 text-l" />
+        ) : null}
+      </div>
+      {renderImage(image, isImageOnRightSide)}
     </BlockWrapper>
   ),
 );
@@ -87,3 +90,16 @@ function renderAdditionalDescription(additionalDescription: string, image?: Pict
     <div className={`text-m-light mt-2.5 z-10 ${DESCRIPTION_WIDTH}`}>{additionalDescription}</div>
   );
 }
+
+function renderImage(image?: Picture, isImageOnRightSide?: boolean) {
+  if (!image?.src) {
+    return null;
+  }
+
+  return (
+    <Img
+      className={`absolute ${isImageOnRightSide ? 'right-0' : 'left-0'} bottom-0`}
+      image={image}
+    />
+  );
+}

package/mobile/src/components/ProductTile/ProductTileContent.ts

@@ -33,4 +33,6 @@ export type ProductTileContent = HeadlineProps &
     benefits?: TextBenefit[];
     /** @title Дополнительное описание */
     additionalDescription?: string;
+    /** @title Картинка справа/текст слева */
+    isImageOnRightSide?: boolean;
   };

package/mobile/src/model/LogoType.ts

@@ -0,0 +1,6 @@
+import type { Picture } from './Picture';
+
+export type LogoType = {
+  image?: Picture;
+  title?: string;
+};

package/mobile/src/services/sitemap/SitemapProps.ts

@@ -1,4 +1,5 @@
 import type { LinkProps } from '../../model/LinkProps';
+import type { LogoType } from '../../model/LogoType';
 import type { Picture } from '../../model/Picture';
 
 /**
@@ -22,10 +23,7 @@ export interface DispositionItem extends LinkProps {
 export interface SitemapDataProps {
   topItems?: TopMenuItem[];
   dispositions?: DispositionItem[];
-  logo?: {
-    image?: Picture;
-    title?: string;
-  };
+  logo?: LogoType;
   defaultLocation?: string;
   officesLink?: string;
 }

package/mobile/src/ui-kit/Logo/Logo.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BgColorVersion } from '../../model/BgColorVersion';
-import { Img } from '../Img/Img';
+import type { LogoType } from '../../model/LogoType';
+import { renderImage } from './renderImage';
+import { renderTitle } from './renderTitle';
 
 export interface LogoProps {
   className: string;
@@ -8,44 +9,28 @@ export interface LogoProps {
   targetBlank: boolean;
   bgColor?: string;
   showTitle?: boolean;
+  logo?: LogoType;
 }
 
-const ICON_VERSION_MAP: Record<BgColorVersion, string> = {
-  'bg-white': 'color',
-  transparent: 'white',
-};
-
-const SVG_COLOR: Record<BgColorVersion, string> = {
-  'bg-white': 'text-primary-main',
-  transparent: 'text-white',
-};
-
-const TEXT_COLOR: Record<BgColorVersion, string> = {
-  'bg-white': 'text-black',
-  transparent: 'text-white',
-};
-
 export const Logo = JSX<Partial<LogoProps>>(
-  ({ className = '', href, children, targetBlank, bgColor = 'bg-white', showTitle = true }) => {
+  ({
+    bgColor = 'bg-white',
+    children,
+    className = '',
+    href,
+    logo,
+    showTitle = true,
+    targetBlank,
+  }) => {
     return (
       <a
         className={`inline-flex items-center font-sans no-underline ${className}`}
         href={href || 'https://rshb.ru/'}
         target={targetBlank ? '_blank' : '_self'}
-        aria-label="Россельхозбанк"
+        aria-label={logo?.title || 'Россельхозбанк'}
       >
-        <Img
-          image={{ icon: 'LogoIcon', iconVersion: ICON_VERSION_MAP[bgColor] }}
-          className={`${SVG_COLOR[bgColor]}`}
-          width="34"
-          height="34"
-          asSVG
-        />
-        {showTitle ? (
-          <span className={`${TEXT_COLOR[bgColor]} text-s font-medium ml-2.5`}>
-            {children || 'Россельхозбанк'}
-          </span>
-        ) : null}
+        {renderImage(bgColor, logo?.image, { width: '34', height: '34' })}
+        {showTitle ? renderTitle(children || logo?.title, bgColor, 'text-s') : null}
       </a>
     );
   },

package/mobile/src/ui-kit/Logo/renderImage.tsx

@@ -0,0 +1,40 @@
+import { BgColorVersion } from '../../model/BgColorVersion';
+import type { Picture } from '../../model/Picture';
+import { Img } from '../Img/Img';
+
+const ICON_VERSION_MAP: Record<BgColorVersion, string> = {
+  'bg-white': 'color',
+  transparent: 'white',
+};
+
+const SVG_COLOR: Record<BgColorVersion, string> = {
+  'bg-white': 'text-primary-main',
+  transparent: 'text-white',
+};
+
+export const renderImage = (
+  bgColor: string,
+  image?: Picture,
+  size?: { width: string; height: string },
+) => {
+  return image?.src ? (
+    <Img
+      image={image}
+      className={SVG_COLOR[bgColor]}
+      width={size?.width}
+      height={size?.height}
+      asSVG
+    />
+  ) : (
+    <Img
+      image={{
+        icon: image?.icon || 'LogoIcon',
+        iconVersion: ICON_VERSION_MAP[bgColor],
+      }}
+      className={SVG_COLOR[bgColor]}
+      width={size?.width}
+      height={size?.height}
+      asSVG
+    />
+  );
+};

package/mobile/src/ui-kit/Logo/renderTitle.tsx

@@ -0,0 +1,15 @@
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { VNode } from '../../model/VNode';
+
+const TEXT_COLOR: Record<BgColorVersion, string> = {
+  'bg-white': 'text-primary-text',
+  transparent: 'text-white',
+};
+
+export const renderTitle = (title: VNode, bgColor: string, className?: string) => {
+  return (
+    <span className={`${TEXT_COLOR[bgColor]} ml-2.5 font-medium ${className || ''}`}>
+      {title || 'Россельхозбанк'}
+    </span>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.6.40",
+  "version": "0.6.41",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Blocks.ts

@@ -5,6 +5,7 @@ import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { BusinessBlock } from './BusinessBlock/BusinessBlock';
+import { ButtonBlock } from './ButtonBlock/ButtonBlock';
 import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
@@ -58,6 +59,7 @@ export const Blocks: BlocksRegistry = {
   AccordionItem,
   BenefitsBlock,
   BusinessBlock,
+  ButtonBlock,
   Bonus,
   BonusBenefitsBlock,
   CardTransfer,

package/src/components/ButtonBlock/ButtonBlock.example.json

@@ -0,0 +1,10 @@
+{
+  "content": {
+    "button": {
+      "href": "/credit-cards",
+      "text": "Подробнее",
+      "target": "_blank",
+      "version": "primary"
+    }
+  }
+}

package/src/components/ButtonBlock/ButtonBlock.fixture.tsx

@@ -0,0 +1,18 @@
+import '../../setup-fixture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { ButtonBlock } from './ButtonBlock';
+
+const button: ButtonWithIconProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'primary',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12 p-4">
+      <ButtonBlock className="col-span-12" button={button} />
+    </div>
+  ),
+};

package/src/components/ButtonBlock/ButtonBlock.tsx

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import type { ButtonBlockContent } from './ButtonBlockContent';
+
+interface ButtonBlockProps extends ButtonBlockContent, UniBlockProps {}
+
+export const ButtonBlock = JSX<ButtonBlockProps>((props) => {
+  const { className, button, ...rest } = props;
+
+  return (
+    <BlockWrapper className={className} {...rest}>
+      {button ? renderButton({ button }) : null}
+    </BlockWrapper>
+  );
+});

package/src/components/ButtonBlock/ButtonBlock.ui.json

@@ -0,0 +1,12 @@
+{
+  "content": {
+    "button": {
+      "icon": {
+        "ui:field": "icon"
+      },
+      "iconRight": {
+        "ui:field": "icon"
+      }
+    }
+  }
+}

package/src/components/ButtonBlock/ButtonBlockContent.ts

@@ -0,0 +1,9 @@
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Блок Кнопка
+ */
+export interface ButtonBlockContent {
+  /** @title Кнопка */
+  button?: ButtonWithIconProps;
+}

package/src/components/Calculator/constants.ts

@@ -18,7 +18,7 @@ export const DEFAULT_CREDIT_CALCULATOR_PARAMS: CreditCalculatorSourceBookParams
   maxSum: DEFAULT_MAX_SUM,
   minMonths: DEFAULT_MIN_MONTHS,
   maxMonths: DEFAULT_MAX_MONTHS,
-  rateBottomRange: 10,
+  rateBottomRange: 12,
   rateTopRange: 7,
   isSalaryClient: true,
   isStateEmployee: true,

package/src/components/Header/Header.mobile.tsx

@@ -22,7 +22,7 @@ export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white',
   const router = useRouter();
 
   const fallback: Fallback | undefined = rest.options?.page?.fallback;
-  const { topItems, dispositions, defaultLocation } = useSWRResource<SitemapDataProps>(
+  const { topItems, dispositions, defaultLocation, logo } = useSWRResource<SitemapDataProps>(
     projectSettings.SITEMAP || 'sitemap',
     fallback,
   );
@@ -36,7 +36,7 @@ export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white',
   return (
     <header className={`${bgColor} ${className}`}>
       <div className="container px-4 py-0 box-border">
-        <HeaderTop onClick={handleBurgerMenuShow} bgColor={bgColor} />
+        <HeaderTop onClick={handleBurgerMenuShow} bgColor={bgColor} logo={logo} />
         <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-12">
           <div className="flex no-scrollbar horizontal-list h-full items-center">
             {subItems?.map((_, i) => (

package/src/components/Header/HeaderTop.tsx

@@ -1,13 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { LogoType } from '../../model/LogoType';
 import { Img } from '../../ui-kit/Img/Img';
 import { Logo } from '../../ui-kit/Logo/Logo';
 
 export interface HeaderTopProps {
   onClick: () => void;
   bgColor?: BgColorVersion;
+  logo?: LogoType;
 }
-export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
+export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor, logo }) => (
   <div className="flex items-center justify-between border-0 border-b border-main-divider h-12">
     <div className="flex items-center">
       <button
@@ -23,7 +25,7 @@ export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
           asSVG
         />
       </button>
-      <Logo className="mr-8" bgColor={bgColor} />
+      <Logo className="mr-8" bgColor={bgColor} logo={logo} />
     </div>
     <button
       className={`${

package/src/components/ProductTile/ProductTile.example.json

@@ -29,6 +29,7 @@
         "text": "Кнопка",
         "version": "primary"
       }
-    ]
+    ],
+    "isImageOnRightSide": true
   }
 }

package/src/components/ProductTile/ProductTile.fixture.tsx

@@ -200,4 +200,17 @@ export default {
       />
     </div>
   ),
+  'credit-card-reverse': (
+    <div className="container grid grid-cols-12">
+      <ProductTile
+        className="col-span-8"
+        title="Кредит под залог недвижимости"
+        description={'Без переоформления залогой недвижимости на банк'}
+        benefits={benefits}
+        buttons={buttons2}
+        image={building}
+        isImageOnRightSide={false}
+      />
+    </div>
+  ),
 };

package/src/components/ProductTile/ProductTile.tsx

@@ -22,30 +22,33 @@ export const ProductTile = JSX<ProductTileProps>(
     benefits = [],
     buttons,
     image,
+    isImageOnRightSide = true,
     version = 'primary',
     ...rest
   }) => (
     <BlockWrapper
-      className={`overflow-hidden font-sans p-9 box-border relative justify-between grid min-h-[364px]
-          ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)}`}
+      className={`overflow-hidden font-sans p-9 box-border relative min-h-[364px]
+          ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${className}`}
       {...rest}
     >
-      <Headline
-        className={`!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`}
-        as="h2"
-        title={title}
-        description={description}
-        headlineVersion={headlineVersion}
-        bgColorHeadline={version}
-        align="left"
-        {...rest}
-      />
-      {renderBenefits(benefits, version, image)}
-      {additionalDescription ? renderAdditionalDescription(additionalDescription, image) : null}
-      {buttons?.length ? (
-        <ButtonSection buttons={buttons} className="flex self-end mt-5 gap-4 z-10 text-l" />
-      ) : null}
-      {image?.src ? <Img className="absolute right-0 bottom-0" image={image} /> : null}
+      <div className={`flex flex-col ${isImageOnRightSide ? '' : 'items-end'}`}>
+        <Headline
+          className={`!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`}
+          as="h2"
+          title={title}
+          description={description}
+          headlineVersion={headlineVersion}
+          bgColorHeadline={version}
+          align="left"
+          {...rest}
+        />
+        {renderBenefits(benefits, version, image)}
+        {additionalDescription ? renderAdditionalDescription(additionalDescription, image) : null}
+        {buttons?.length ? (
+          <ButtonSection buttons={buttons} className="mt-5 gap-4 z-10 text-l" />
+        ) : null}
+      </div>
+      {renderImage(image, isImageOnRightSide)}
     </BlockWrapper>
   ),
 );
@@ -87,3 +90,16 @@ function renderAdditionalDescription(additionalDescription: string, image?: Pict
     <div className={`text-m-light mt-2.5 z-10 ${DESCRIPTION_WIDTH}`}>{additionalDescription}</div>
   );
 }
+
+function renderImage(image?: Picture, isImageOnRightSide?: boolean) {
+  if (!image?.src) {
+    return null;
+  }
+
+  return (
+    <Img
+      className={`absolute ${isImageOnRightSide ? 'right-0' : 'left-0'} bottom-0`}
+      image={image}
+    />
+  );
+}

package/src/components/ProductTile/ProductTileContent.ts

@@ -33,4 +33,6 @@ export type ProductTileContent = HeadlineProps &
     benefits?: TextBenefit[];
     /** @title Дополнительное описание */
     additionalDescription?: string;
+    /** @title Картинка справа/текст слева */
+    isImageOnRightSide?: boolean;
   };

package/src/model/LogoType.ts

@@ -0,0 +1,6 @@
+import type { Picture } from './Picture';
+
+export type LogoType = {
+  image?: Picture;
+  title?: string;
+};

package/src/services/sitemap/SitemapProps.ts

@@ -1,4 +1,5 @@
 import type { LinkProps } from '../../model/LinkProps';
+import type { LogoType } from '../../model/LogoType';
 import type { Picture } from '../../model/Picture';
 
 /**
@@ -22,10 +23,7 @@ export interface DispositionItem extends LinkProps {
 export interface SitemapDataProps {
   topItems?: TopMenuItem[];
   dispositions?: DispositionItem[];
-  logo?: {
-    image?: Picture;
-    title?: string;
-  };
+  logo?: LogoType;
   defaultLocation?: string;
   officesLink?: string;
 }

package/src/ui-kit/Logo/Logo.mobile.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BgColorVersion } from '../../model/BgColorVersion';
-import { Img } from '../Img/Img';
+import type { LogoType } from '../../model/LogoType';
+import { renderImage } from './renderImage';
+import { renderTitle } from './renderTitle';
 
 export interface LogoProps {
   className: string;
@@ -8,44 +9,28 @@ export interface LogoProps {
   targetBlank: boolean;
   bgColor?: string;
   showTitle?: boolean;
+  logo?: LogoType;
 }
 
-const ICON_VERSION_MAP: Record<BgColorVersion, string> = {
-  'bg-white': 'color',
-  transparent: 'white',
-};
-
-const SVG_COLOR: Record<BgColorVersion, string> = {
-  'bg-white': 'text-primary-main',
-  transparent: 'text-white',
-};
-
-const TEXT_COLOR: Record<BgColorVersion, string> = {
-  'bg-white': 'text-black',
-  transparent: 'text-white',
-};
-
 export const Logo = JSX<Partial<LogoProps>>(
-  ({ className = '', href, children, targetBlank, bgColor = 'bg-white', showTitle = true }) => {
+  ({
+    bgColor = 'bg-white',
+    children,
+    className = '',
+    href,
+    logo,
+    showTitle = true,
+    targetBlank,
+  }) => {
     return (
       <a
         className={`inline-flex items-center font-sans no-underline ${className}`}
         href={href || 'https://rshb.ru/'}
         target={targetBlank ? '_blank' : '_self'}
-        aria-label="Россельхозбанк"
+        aria-label={logo?.title || 'Россельхозбанк'}
       >
-        <Img
-          image={{ icon: 'LogoIcon', iconVersion: ICON_VERSION_MAP[bgColor] }}
-          className={`${SVG_COLOR[bgColor]}`}
-          width="34"
-          height="34"
-          asSVG
-        />
-        {showTitle ? (
-          <span className={`${TEXT_COLOR[bgColor]} text-s font-medium ml-2.5`}>
-            {children || 'Россельхозбанк'}
-          </span>
-        ) : null}
+        {renderImage(bgColor, logo?.image, { width: '34', height: '34' })}
+        {showTitle ? renderTitle(children || logo?.title, bgColor, 'text-s') : null}
       </a>
     );
   },

package/src/ui-kit/Logo/Logo.tsx

@@ -1,8 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BgColorVersion } from '../../model/BgColorVersion';
-import type { Picture } from '../../model/Picture';
-import type { VNode } from '../../model/VNode';
-import { Img } from '../Img/Img';
+import type { LogoType } from '../../model/LogoType';
+import { renderImage } from './renderImage';
+import { renderTitle } from './renderTitle';
 
 export interface LogoProps {
   className: string;
@@ -10,26 +9,9 @@ export interface LogoProps {
   targetBlank: boolean;
   bgColor?: string;
   showTitle?: boolean;
-  logo?: {
-    image?: Picture;
-    title?: string;
-  };
+  logo?: LogoType;
 }
 
-const ICON_VERSION_MAP: Record<BgColorVersion, string> = {
-  'bg-white': 'color',
-  transparent: 'white',
-};
-
-const SVG_COLOR: Record<BgColorVersion, string> = {
-  'bg-white': 'text-primary-main',
-  transparent: 'text-white',
-};
-const TEXT_COLOR: Record<BgColorVersion, string> = {
-  'bg-white': 'text-primary-text',
-  transparent: 'text-white',
-};
-
 export const Logo = JSX<Partial<LogoProps>>(
   ({
     className = '',
@@ -47,28 +29,9 @@ export const Logo = JSX<Partial<LogoProps>>(
         target={targetBlank ? '_blank' : '_self'}
         aria-label={logo?.title || 'Россельхозбанк'}
       >
-        {logo?.image?.src ? (
-          <Img image={logo.image} className={SVG_COLOR[bgColor]} width="40" height="45" asSVG />
-        ) : (
-          <Img
-            image={{
-              icon: logo?.image?.icon || 'LogoIcon',
-              iconVersion: ICON_VERSION_MAP[bgColor],
-            }}
-            className={`${SVG_COLOR[bgColor]} w-10`}
-            width="40"
-            height="45"
-            asSVG
-          />
-        )}
-        {showTitle ? renderTitle(children, bgColor, logo?.title) : null}
+        {renderImage(bgColor, logo?.image, { width: '40', height: '45' })}
+        {showTitle ? renderTitle(children || logo?.title, bgColor) : null}
       </a>
     );
   },
 );
-
-const renderTitle = (children: VNode, bgColor: string, title?: string) => {
-  const text = children || title || 'Россельхозбанк';
-
-  return <span className={`${TEXT_COLOR[bgColor]} font-medium ml-2.5`}>{text}</span>;
-};