@redneckz/wildless-cms-uni-blocks 0.10.0 → 0.10.1

package/mobile/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.ui.json

@@ -0,0 +1,20 @@
+{
+  "content": {
+    "__html": {
+      "ui:widget": "html"
+    },
+    "button": {
+      "icon": {
+        "ui:field": "icon"
+      },
+      "iconRight": {
+        "ui:field": "icon"
+      }
+    }
+  },
+  "style": {
+    "ui:options": {
+      "maxCols": 6
+    }
+  }
+}

package/mobile/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfoContent.ts

@@ -0,0 +1,22 @@
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { IconProps } from '../../model/Picture';
+import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
+import type { TitleProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
+
+/**
+ * @title Блок с информацией о представительстве
+ */
+export type RepresentativeOfficeInfoContent = UniBlockContent &
+  TitleProps &
+  RichTextProps &
+  IconProps & {
+    /** @title Адрес */
+    address?: string;
+    /** @title Телефон (факс) */
+    telephone?: string;
+    /** @title E-mail */
+    email?: string;
+    /** @title Кнопка */
+    button?: ButtonWithIconProps;
+  };

package/mobile/src/components/Tile/Tile.example.json

@@ -28,6 +28,7 @@
         "version": "primary"
       }
     ],
-    "version": "primary"
+    "version": "primary",
+    "directionRight": true
   }
 }

package/mobile/src/components/Tile/Tile.tsx

@@ -11,6 +11,7 @@ import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { TileContent } from './TileContent';
+import { style } from '../../utils/style';
 
 export interface TileProps extends TileContent, UniBlockProps {}
 
@@ -27,14 +28,21 @@ export const Tile = JSX<TileProps>(
     className = '',
     tags,
     children,
+    directionRight = true,
     ...rest
   }) => (
     <BlockWrapper
-      className={`overflow-hidden p-9 pr-3 box-border ${getTileRightPadding(
+      className={style(
+        'flex grow justify-between items-stretch h-full p-9 pr-3 box-border',
+        getTileRightPadding(className),
+        getTileMinHeight(className),
         className,
-      )} ${getTileMinHeight(className)} ${className}`}
+      )}
       {...rest}
     >
+      {image?.src ? (
+        <Img className={style('mt-auto ml-7', directionRight ? 'order-2' : '')} image={image} />
+      ) : null}
       <BaseTile
         title={
           title ? (
@@ -50,22 +58,23 @@ export const Tile = JSX<TileProps>(
           className: 'mt-8',
           buttonClassName: 'min-w-[158px]',
         })}
-        image={image?.src ? <Img className="mt-auto ml-7" image={image} /> : null}
       >
-        {__html ? (
-          <div className="max-w-[600px] mt-2.5">
-            <RichText __html={__html} />
-          </div>
-        ) : null}
-        {children}
-        <List
-          className="mt-2.5"
-          itemClassName="mb-1.5"
-          items={items}
-          isDotted={isDotted}
-          listItemSize={listItemSize}
-        />
-        {tags?.length ? <Tags tags={tags} className="mt-5" /> : null}
+        <div>
+          {__html ? (
+            <div className="max-w-[600px] mt-2.5">
+              <RichText __html={__html} />
+            </div>
+          ) : null}
+          {children}
+          <List
+            className="mt-2.5"
+            itemClassName="mb-1.5"
+            items={items}
+            isDotted={isDotted}
+            listItemSize={listItemSize}
+          />
+          {tags?.length ? <Tags tags={tags} className="mt-5" /> : null}
+        </div>
       </BaseTile>
     </BlockWrapper>
   ),

package/mobile/src/components/Tile/TileContent.ts

@@ -20,4 +20,6 @@ export type TileContent = UniBlockContent &
   ImageContent &
   BulletsProps & {
     listItemSize?: ListItemSize;
+    /** @title Картинка справа/текст слева */
+    directionRight?: boolean;
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -189,7 +189,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "54 kB",
+      "limit": "55 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/components/Blocks.ts

@@ -55,6 +55,7 @@ import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 import { Video } from './Video/Video';
+import { RepresentativeOfficeInfo } from './RepresentativeOfficeInfo/RepresentativeOfficeInfo';
 
 export const Blocks: BlocksRegistry = {
   ApplicationForm,
@@ -113,4 +114,5 @@ export const Blocks: BlocksRegistry = {
   VerticalLayout,
   Video,
   ExchangeRateOffice,
+  RepresentativeOfficeInfo,
 };

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -34,9 +34,11 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
         </div>
       ) : null}
       {colors?.length ? (
-        <div className="flex mb-4 text-s-light text-secondary-text">
+        <div className="flex mb-4 text-secondary-text">
           <div className="mr-1.5">
-            <Text>Доступные цвета: </Text>
+            <Text size="text-s" align="text-left" font="font-light">
+              Доступные цвета:
+            </Text>
           </div>
           {colors.map(renderColorOption)}
         </div>

package/src/components/Footer/FooterContent.ts

@@ -29,4 +29,4 @@ export type SubMenuItem = LinkProps & IconProps;
 /**
  * @title Подвал
  */
-export type FooterContent = UniBlockContent & {};
+export type FooterContent = UniBlockContent;

package/src/components/Headline/Headline.tsx

@@ -42,11 +42,7 @@ export const Headline = JSX<HeadlineProps>(
           />
         ) : null}
         {description ? (
-          <Paragraph
-            color="group-data-secondary:text-white/80"
-            size={versionStyle.descriptionSize as TextSize}
-            align={align}
-          >
+          <Paragraph size={versionStyle.descriptionSize as TextSize} align={align}>
             {description}
           </Paragraph>
         ) : null}

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -76,12 +76,24 @@ export const PRODUCT_BLOCK: ProductBlockContent = {
   buttons: buttons,
 };
 
+const PRODUCT_BLOCK_WITH_BACK_BUTTON: ProductBlockContent = {
+  backwardButton,
+  headlineVersion: 'L',
+  title: 'Потребительский кредит наличными',
+  description:
+    'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
+  benefitsCountOfRow: 2,
+  benefits,
+  benefitsVersion: 'normal',
+  buttons,
+  image,
+};
+
 export default {
   'primary with back button': (
     <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
-        backwardButton={backwardButton}
         headlineVersion="L"
         title="Потребительский кредит наличными"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
@@ -97,15 +109,7 @@ export default {
     <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
-        backwardButton={backwardButton}
-        headlineVersion="L"
-        title="Потребительский кредит наличными"
-        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        benefitsCountOfRow={2}
-        benefits={benefits}
-        benefitsVersion="normal"
-        buttons={buttons}
-        image={image}
+        {...PRODUCT_BLOCK_WITH_BACK_BUTTON}
         directionRight={false}
       />
     </div>
@@ -201,16 +205,4 @@ export default {
       />
     </div>
   ),
-  'secondary with footnote': (
-    <div className="container grid grid-cols-12">
-      <ProductBlock
-        className="col-span-12"
-        footnote="*в соответствии с Указанием Банка России от 28.12.2015 № 3921-У"
-        headlineVersion="L"
-        image={image}
-        title="Оплата проходит в 180 странах мира"
-        version="secondary"
-      />
-    </div>
-  ),
 };

package/src/components/ProductBlock/ProductBlock.tsx

@@ -6,6 +6,7 @@ import { joinList } from '../../utils/joinList';
 import type { ProductBlockContent } from './ProductBlockContent';
 import { ProductBlockInner } from './ProductBlockInner';
 import { renderBackwardButton } from './renderBackwardButton';
+import { style } from '../../utils/style';
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
@@ -17,23 +18,21 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
 
   return (
     <BlockWrapper
-      className={`overflow-hidden p-12 flex flex-col box-border min-h-[454px] ${className}`}
+      className={style('overflow-hidden p-12 flex flex-col box-border min-h-[454px]', className)}
       version={version}
       {...rest}
     >
-      {backwardButton?.text
-        ? renderBackwardButton(backwardButton, buttonVersion, 'mb-10 -mt-2.5')
-        : null}
+      {backwardButton?.text ? renderBackwardButton(backwardButton, buttonVersion) : null}
       {breadcrumbs?.length ? (
         <div className="text-xs-light mb-6">
-          {joinList(<span className={`mx-2 ${breadcrumbStyle}`}>/</span>)(
+          {joinList(<span className={style('mx-2', breadcrumbStyle)}>/</span>)(
             breadcrumbs.map((breadcrumb, i) => (
               <Breadcrumb key={String(i)} className={breadcrumbStyle} {...breadcrumb} />
             )),
           )}
         </div>
       ) : null}
-      <ProductBlockInner version={version} {...rest} />
+      <ProductBlockInner className="mt-10" version={version} {...rest} />
     </BlockWrapper>
   );
 });

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,5 +1,4 @@
 import type { BulletsProps } from '../../model/Bullets';
-import type { Footnote } from '../../model/Footnote';
 import type { HeadlineProps } from '../../model/HeadlineType';
 import type { IconVersion } from '../../model/IconVersion';
 import type { UniBlockContent } from '../../model/JSXBlock';
@@ -14,7 +13,6 @@ export type ProductBlockInnerContent = HeadlineProps &
   RichTextProps &
   ListContent &
   ButtonContent &
-  Footnote &
   ImageContent &
   BulletsProps & {
     /**

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -22,7 +22,6 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     benefits,
     benefitsVersion,
     buttons,
-    footnote,
     image,
     __html,
     items,
@@ -37,7 +36,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     return (
       <div className={style('flex grow justify-between items-stretch h-full', className)}>
         {image?.src ? (
-          <Img className={`mt-[-50px] ${directionRight ? 'order-2' : ''}`} image={image} />
+          <Img className={style('mt-[-50px]', directionRight ? 'order-2' : '')} image={image} />
         ) : null}
         <div className={style('flex flex-col', textBlockClassName)}>
           <Headline
@@ -47,29 +46,26 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             headlineVersion={headlineVersion}
             align="text-left"
           />
-          <div className="flex flex-col justify-between h-full">
-            <BaseTile buttons={renderButtonsSection(buttons)}>
-              {benefitsCount ? (
-                <div className={benefitsContainerStyles}>
-                  {benefits?.map(renderBenefit(version, benefitsVersion))}
-                </div>
-              ) : null}
-              {__html ? (
-                <div className="mt-5">
-                  <RichText __html={__html} />
-                </div>
-              ) : null}
-              {items?.length ? (
-                <List
-                  className="mt-5 text-h6"
-                  items={items}
-                  itemClassName="mb-[7px]"
-                  isDotted={isDotted}
-                />
-              ) : null}
-            </BaseTile>
-            {footnote ? <p className="text-m-light pt-12">{footnote}</p> : null}
-          </div>
+          <BaseTile buttons={renderButtonsSection(buttons)}>
+            {benefitsCount ? (
+              <div className={benefitsContainerStyles}>
+                {benefits?.map(renderBenefit(version, benefitsVersion))}
+              </div>
+            ) : null}
+            {__html ? (
+              <div className="mt-5">
+                <RichText __html={__html} />
+              </div>
+            ) : null}
+            {items?.length ? (
+              <List
+                className="mt-5 text-h6"
+                items={items}
+                itemClassName="mb-[7px]"
+                isDotted={isDotted}
+              />
+            ) : null}
+          </BaseTile>
         </div>
       </div>
     );

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -7,7 +7,7 @@ import { style } from '../../utils/style';
 export function renderBackwardButton(
   button: BackwardButtonProps,
   version: ButtonVersion,
-  className: string,
+  className?: string,
 ) {
   const { text, href, target } = button;
   const iconVersion = version === 'primary' ? 'white' : 'black';

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

@@ -135,7 +135,11 @@ export default {
       <ProductTile className="col-span-6" {...PRODUCT_TILE} />
     </div>
   ),
-  secondary: <ProductTile className="col-span-6" {...PRODUCT_TILE} version="secondary" />,
+  secondary: (
+    <div className="container grid grid-cols-12">
+      <ProductTile className="col-span-6" {...PRODUCT_TILE} version="secondary" />
+    </div>
+  ),
   pension: (
     <div className="container grid grid-cols-12">
       <ProductTile
@@ -216,7 +220,7 @@ export default {
         benefits={benefits}
         buttons={buttons2}
         image={building}
-        isImageOnRightSide={false}
+        directionRight={false}
       />
     </div>
   ),

package/src/components/ProductTile/ProductTile.tsx

@@ -23,18 +23,18 @@ export const ProductTile = JSX<ProductTileProps>(
     benefits = [],
     buttons,
     image,
-    isImageOnRightSide = true,
+    directionRight = true,
     ...rest
   }) => (
     <BlockWrapper
       className={style(
-        'overflow-hidden p-9 box-border relative min-h-[364px]',
+        'overflow-hidden p-9 box-border relative min-h-[364px] flex flex-col justify-between',
         getTileRightPadding(className),
         className,
       )}
       {...rest}
     >
-      <div className={style('flex flex-col', isImageOnRightSide ? '' : 'items-end')}>
+      <div className={style('flex flex-col', directionRight ? '' : 'items-end')}>
         <Headline
           className={style('!p-0 !bg-transparent z-10', title || description ? 'mb-3.5' : '')}
           title={title}
@@ -45,9 +45,11 @@ export const ProductTile = JSX<ProductTileProps>(
         />
         {renderBenefits(benefits, image)}
         {renderAdditionalDescription(additionalDescription, image)}
-        {renderButtonsSection(buttons, { className: 'mt-5 z-10 text-l' })}
       </div>
-      {renderImage(image, isImageOnRightSide)}
+      {renderButtonsSection(buttons, {
+        className: style('mt-5 text-l', directionRight ? '' : 'justify-end'),
+      })}
+      {renderImage(image, directionRight)}
     </BlockWrapper>
   ),
 );
@@ -62,7 +64,10 @@ function renderBenefits(benefits: Benefit[], image?: Picture) {
 
   return (
     <div
-      className={`z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline ${benefitsWidth}`}
+      className={style(
+        'z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline',
+        benefitsWidth,
+      )}
     >
       {benefits.length ? benefits.map(renderBenefit) : null}
     </div>

package/src/components/ProductTile/ProductTileContent.ts

@@ -37,5 +37,5 @@ export type ProductTileContent = UniBlockContent &
      */
     benefits?: Benefit[];
     /** @title Картинка справа/текст слева */
-    isImageOnRightSide?: boolean;
+    directionRight?: boolean;
   };

package/src/components/ProductTile/renderImage.tsx

@@ -1,14 +1,15 @@
 import type { Picture } from '../../model/Picture';
 import { Img } from '../../ui-kit/Img/Img';
+import { style } from '../../utils/style';
 
-export function renderImage(image?: Picture, isImageOnRightSide?: boolean) {
+export function renderImage(image?: Picture, directionRight?: boolean) {
   if (!image?.src) {
     return null;
   }
 
   return (
     <Img
-      className={`absolute ${isImageOnRightSide ? 'right-0' : 'left-0'} bottom-0`}
+      className={style('absolute', directionRight ? 'right-0' : 'left-0', 'bottom-0')}
       image={image}
     />
   );

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.example.json

@@ -0,0 +1,10 @@
+{
+  "title": "Заголовок",
+  "__html": "<p>Описание</p>",
+  "button": {
+    "text": "Информация о регионе",
+    "version": "link",
+    "icon": { "format": "webp", "size": { "width": 16, "height": 16 } },
+    "iconRight": { "format": "webp", "size": { "width": 16, "height": 16 } }
+  }
+}

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.fixture.tsx

@@ -0,0 +1,37 @@
+import '../../setup-fixture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { RepresentativeOfficeInfo } from './RepresentativeOfficeInfo';
+
+const button: ButtonWithIconProps = {
+  text: 'Информация о регионе',
+  target: '_blank',
+  version: 'secondary',
+  icon: { icon: 'ArrowTopRightIcon', iconVersion: 'color' },
+};
+
+const description = `
+<p><strong>Представительство АО «Россельхозбанк» в Республике Беларусь (г. Минск) зарегистрировано в октябре 2008 года</strong></p>
+<br>
+<p>Основными задачи Представительства</p>
+<ul>
+  <li>установление и развитие деловых связей с белорусскими финансовыми институтами и компаниями АПК для реализации совместных проектов</li>
+  <li>организация взаимодействия с государственными органами власти и международными организациями, находящимися в Республике Бкларусь</li>
+</ul>
+`;
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <RepresentativeOfficeInfo
+        className="col-span-6"
+        title="Представительство в Республике Беларусь"
+        __html={description}
+        address="Республика Беларусь, 220004, г. Минск, ул. Немига, д. 40"
+        telephone="(+375-17)-226-4578"
+        email="prshbrb@mail.ru"
+        button={button}
+        version="primary"
+      />
+    </div>
+  ),
+};

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -0,0 +1,82 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { RepresentativeOfficeInfoContent } from './RepresentativeOfficeInfoContent';
+import type { Picture } from '../../model/Picture';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { IconName } from '../../icons/IconName';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { Text } from '../../ui-kit/Text/Text';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { style } from '../../utils/style';
+
+export interface RepresentativeOfficeInfoProps
+  extends RepresentativeOfficeInfoContent,
+    UniBlockProps {}
+
+export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
+  ({
+    address,
+    email,
+    telephone,
+    button,
+    className = '',
+    __html,
+    icon,
+    title,
+    version = 'primary',
+    ...rest
+  }) => (
+    <BlockWrapper
+      className={style('box-border text-left p-9', className)}
+      version={version}
+      {...rest}
+    >
+      <div className="w-full flex justify-between">
+        {title ? <Heading headingType="h4" as="h3" className="mb-6" title={title} /> : null}
+        {renderIconBlock(icon)}
+      </div>
+      <div className="w-full">
+        {__html ? renderDescriptionBlock(__html) : null}
+        {renderBlock('Адрес', address, 'GeolocationIcon')}
+        {renderBlock('Телефон', telephone, 'PhoneIcon')}
+        {renderBlock('E-mail', email, 'MailIcon')}
+        {button?.text
+          ? renderButtonsSection([button], {
+              className: 'mb-6',
+            })
+          : null}
+      </div>
+    </BlockWrapper>
+  ),
+);
+
+const renderIconBlock = (icon?: Picture) => (
+  <div className="self-end">
+    {icon?.src ? <Img image={icon} /> : null}
+    {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+  </div>
+);
+
+const renderDescriptionBlock = (__html?: string) => (
+  <div className="border-b border-main-divider pb-5 my-5">
+    <RichText __html={__html} />
+  </div>
+);
+
+const renderBlock = (blockName: string, data?: string, iconName?: IconName | undefined) => (
+  <div className="flex mb-4">
+    <Icon className="pr-4" iconVersion="black" name={iconName} width="24" height="24" asSVG />
+    <div className="flex flex-col first:pb-1">
+      <Text size="text-m-light">{blockName}</Text>
+      {data ? (
+        <Text size="text-h6" color="text-green">
+          {data}
+        </Text>
+      ) : null}
+    </div>
+  </div>
+);

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.ui.json

@@ -0,0 +1,20 @@
+{
+  "content": {
+    "__html": {
+      "ui:widget": "html"
+    },
+    "button": {
+      "icon": {
+        "ui:field": "icon"
+      },
+      "iconRight": {
+        "ui:field": "icon"
+      }
+    }
+  },
+  "style": {
+    "ui:options": {
+      "maxCols": 6
+    }
+  }
+}