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

package/src/components/ExchangeRateOffice/ExchangeRateOfficeContent.ts

@@ -0,0 +1,36 @@
+/**
+ * @title Информация об одной валюте
+ */
+export interface CurrencyInformation {
+  /** @title Номер */
+  id?: number;
+  /** @title Название */
+  title?: string;
+  /** @title Покупная цена */
+  buyPrice?: number;
+  /** @title Цена продажи */
+  sellPrice?: number;
+  /** @title Разница покупки */
+  buyDifference?: number;
+  /** @title Разница продажи */
+  sellDifference?: number;
+  /** @title Имя основного офиса для покупки */
+  buyOfficeName?: string;
+  /** @title Другие офисы покупки */
+  buyBonusOfficeName?: string;
+  /** @title Имя основного офиса для продажи*/
+  sellOfficeName?: string;
+  /** @title Другие офисы продажи */
+  sellBonusOfficeName?: string;
+}
+/**
+ * @title Курсы валют офиса
+ */
+export interface ExchangeRateOfficeContent {
+  /** @title Имя офиса */
+  officeName?: string;
+  /** @title Список валют */
+  currencies?: CurrencyInformation[];
+  /** @title Актуальность информации */
+  actuality?: string;
+}

package/src/components/ExchangeRateOffice/renderCurrencies.tsx

@@ -0,0 +1,73 @@
+import type { IconName } from '../../icons/IconName';
+import { Img } from '../../ui-kit/Img/Img';
+import { style } from '../../utils/style';
+import { Currencies } from './Currencies';
+import type { CurrencyInformation } from './ExchangeRateOfficeContent';
+
+const CURRENCY_ICONS_MAP: Record<keyof typeof Currencies, IconName> = {
+  USD: 'DollarIcon',
+  EUR: 'EuroIcon',
+  GBP: 'DollarIcon',
+  AUD: 'DollarIcon',
+  CNY: 'DollarIcon',
+  RUB: 'RoundRubleIcon',
+};
+
+export const renderCurrencyRow = ({
+  title,
+  buyPrice,
+  buyDifference,
+  sellPrice,
+  sellDifference,
+  buyOfficeName,
+  sellOfficeName,
+}: CurrencyInformation) => {
+  return (
+    <tr key={title} className="pb-1 text-h6">
+      <td className="pt-4">
+        <div className="flex items-center">
+          {title ? (
+            <Img image={{ icon: CURRENCY_ICONS_MAP[title] }} width="24" height="24" />
+          ) : null}
+          <span className="ml-2">{title}</span>
+        </div>
+      </td>
+      {renderCurrency(buyPrice, buyDifference)}
+      {renderCurrency(sellPrice, sellDifference)}
+      {renderOffice(buyPrice, buyOfficeName)}
+      {renderOffice(sellPrice, sellOfficeName)}
+    </tr>
+  );
+};
+
+const formatCurrency = (value?: number) => (value ? currencyNumberFormat.format(value) : '');
+
+const renderCurrency = (price?: number, difference?: number) => {
+  return (
+    <td className="pt-4 pl-11">
+      <div>{formatCurrency(price)}</div>
+      <div
+        className={style(
+          'font-normal text-sm text-secondary-text',
+          (difference || 0) >= 0 ? 'text-green' : 'text-red',
+        )}
+      >
+        {formatCurrency(difference)}
+      </div>
+    </td>
+  );
+};
+
+const renderOffice = (price?: number, officeName = '') => {
+  return (
+    <td className="pt-4 pl-11">
+      <div>{formatCurrency(price)}</div>
+      <div className="font-normal text-sm text-green">{officeName}</div>
+    </td>
+  );
+};
+
+const currencyNumberFormat = new Intl.NumberFormat('ru', {
+  style: 'currency',
+  currency: Currencies.RUB,
+});

package/src/components/ExchangeRateOffice/renderTableHeader.tsx

@@ -0,0 +1,11 @@
+import { Text } from '../../ui-kit/Text/Text';
+
+export const renderTableHeader = (title: string) => {
+  return (
+    <th className="pl-11">
+      <Text size="text-m-light" align="text-left" color="text-secondary-text">
+        {title}
+      </Text>
+    </th>
+  );
+};

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
+    }
+  }
+}

package/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/src/components/RichTextBlock/RichTextBlock.fixture.tsx

@@ -1,5 +1,6 @@
 import '../../setup-fixture';
 import { RichTextBlock } from './RichTextBlock';
+import type { RichTextBlockContent } from './RichTextBlockContent';
 
 const HTML = `
   <p class="h1">Заголовок 1</p>
@@ -20,10 +21,31 @@ const HTML = `
   </ol>
 `;
 
+export const RICH_TEXT_SEPARATOR: RichTextBlockContent = {
+  __html:
+    '<table>' +
+    '<thead><tr><th><p>Полное наименование организации</p></th><th><p>Адрес (место нахождения)</p></th><th><p>Доля участия</p></th></tr></thead>' +
+    '<tbody>' +
+    '<tr><td><p><a href="rshb.ru">Акционерное общество «Национальное бюро кредитных историй»</p></a></td>' +
+    '<td><p>Россия, г. Москва, Скатертный пер., д. 20, стр.1</p></td><td><p>0,5%</p></td></tr>' +
+    '<tr><td><p><a href="rshb.ru">Акционерное общество\n' +
+    '«Негосударственный пенсионный фонд\n' +
+    '«Первый национальный пенсионный фонд»</p></td><td><p>Россия, г. Москва, ул. Большая Дмитровка,\n' +
+    'д. 23, стр.1</a></p></td><td><p>2,2%</p></td></tr>' +
+    '</tbody>' +
+    '</table>',
+  richVersion: 'horizontal-separator',
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <RichTextBlock className="col-span-12" __html={HTML} />
     </div>
   ),
+  'horizontal-separator': (
+    <div className="container grid grid-cols-12">
+      <RichTextBlock className="col-span-12" {...RICH_TEXT_SEPARATOR} />
+    </div>
+  ),
 };

package/src/components/RichTextBlock/RichTextBlock.tsx

@@ -7,11 +7,11 @@ import type { RichTextBlockContent } from './RichTextBlockContent';
 interface RichTextBlockProps extends RichTextBlockContent, UniBlockProps {}
 
 export const RichTextBlock = JSX<RichTextBlockProps>((props) => {
-  const { __html, ...rest } = props;
+  const { __html, richVersion, ...rest } = props;
 
   return (
     <BlockWrapper {...rest}>
-      <RichText __html={__html} />
+      <RichText __html={__html} richVersion={richVersion} />
     </BlockWrapper>
   );
 });