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

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/LinkDocs/LinkDocs.example.json

@@ -34,8 +34,6 @@
       }
     ],
     "columnsMode": "double",
-    "orientation": "vertical",
-    "hasBorder": true,
     "align": "text-center"
   }
 }

package/src/components/LinkDocs/LinkDocs.fixture.mobile.tsx

@@ -3,19 +3,9 @@ import { LinkDocs } from './LinkDocs';
 import { linkDocsContentExample } from './linkDocsContentExample';
 
 export default {
-  'vertical (default)': (
+  default: (
     <div className="container grid grid-cols-12">
       <LinkDocs className="col-span-12" {...linkDocsContentExample} />
     </div>
   ),
-  'vertical, no border': (
-    <div className="container grid grid-cols-12">
-      <LinkDocs className="col-span-12" hasBorder={false} {...linkDocsContentExample} />
-    </div>
-  ),
-  'horizontal, swipe list': (
-    <div className="container grid grid-cols-12">
-      <LinkDocs className="col-span-12" {...linkDocsContentExample} orientation="horizontal" />
-    </div>
-  ),
 };

package/src/components/LinkDocs/LinkDocs.mobile.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import type { LinkDocsContent } from './LinkDocsContent';
-import { LinkDocsHorizontalList } from './LinkDocsHorizontalList';
-import { LinkDocsVerticalList } from './LinkDocsVerticalList';
+import { LinkDocsListItem } from './LinkDocsListItem';
 
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
@@ -14,27 +14,42 @@ export const LinkDocs = JSX<LinkDocsProps>(
     className = '',
     title,
     description,
-    icon = { icon: 'DocIconMonoColor' },
+    icon = { icon: 'DocDownloadIcon', iconVersion: 'black' },
     documents,
-    orientation = 'vertical',
-    hasBorder = true,
     align,
     ...rest
   }) => (
-    <BlockWrapper className={style('py-6 px-4 overflow-x-hidden', className)} {...rest}>
+    <BlockWrapper className={style('py-6 px-4', className)} {...rest}>
       <Headline
-        className={`!p-0 ${description ? 'gap-2' : 'gap-5'}`}
+        isPadding={false}
         title={title}
         description={description}
         align={align}
         headlineVersion="M"
         as="h2"
       />
-      {orientation === 'vertical' ? (
-        <LinkDocsVerticalList hasBorder={hasBorder} documents={documents} icon={icon} />
-      ) : (
-        <LinkDocsHorizontalList hasBorder={hasBorder} documents={documents} icon={icon} />
-      )}
+      {documents?.length ? (
+        <div className="mt-5 flex flex-col gap-6" role="list">
+          {documents.map((doc, i) => (
+            <div key={String(i)} role="listitem">
+              <LinkDocsListItem
+                doc={doc}
+                icon={
+                  icon ? (
+                    <Img
+                      className="min-w-11 min-h-11 h-fit p-2.5 bg-main-divider rounded-md"
+                      image={icon}
+                      width="24"
+                      height="24"
+                      asSVG
+                    />
+                  ) : null
+                }
+              />
+            </div>
+          ))}
+        </div>
+      ) : null}
     </BlockWrapper>
   ),
 );

package/src/components/LinkDocs/LinkDocs.tsx

@@ -1,14 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
-import { LinkDocsList } from './LinkDocsList';
+import { LinkDocsListItem } from './LinkDocsListItem';
 
 const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
-  double: 'flex gap-x-5 gap-y-[26px] flex-wrap',
-  single: 'flex gap-3.5 flex-col',
+  double: 'flex-wrap',
+  single: 'flex-col',
 };
 
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
@@ -33,12 +34,26 @@ export const LinkDocs = JSX<LinkDocsProps>(
         headlineVersion="M"
         as="h2"
       />
-      <LinkDocsList
-        className={`mt-8 ${linkColumnsModeStyleMap[columnsMode]}`}
-        columnsMode={columnsMode}
-        documents={documents}
-        icon={icon}
-      />
+      {documents?.length ? (
+        <div className={style('mt-8 flex gap-6', linkColumnsModeStyleMap[columnsMode])} role="list">
+          {documents.map((doc, i) => (
+            <div
+              key={String(i)}
+              className={columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}
+              role="listitem"
+            >
+              <LinkDocsListItem
+                doc={doc}
+                icon={
+                  icon ? (
+                    <Img className="min-w-6 min-h-6" image={icon} width="24" height="24" asSVG />
+                  ) : null
+                }
+              ></LinkDocsListItem>
+            </div>
+          ))}
+        </div>
+      ) : null}
     </BlockWrapper>
   ),
 );

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -1,7 +1,6 @@
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
-import type { ListOrientation } from '../../model/ListOrientation';
 import type { IconProps } from '../../model/Picture';
 import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
@@ -31,10 +30,6 @@ export type LinkDocsContent = UniBlockContent &
     /** @title Список */
     documents?: LinkDocsItem[];
     columnsMode?: LinkColumnsMode;
-    /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
-    orientation?: ListOrientation; // TODO: мобильный проп
-    /** @title Рамка элементов (моб.) */ // TODO: мобильный проп
-    hasBorder?: boolean;
     /** @title Выравнивание */
     align?: TextAlign;
   };

package/src/components/LinkDocs/LinkDocsListItem.tsx

@@ -1,14 +1,49 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { LinkDocsListItemProps } from './LinkDocsListItemBase';
-import { LinkDocsListItemBase } from './LinkDocsListItemBase';
-
-export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', doc, icon }) => (
-  <LinkDocsListItemBase
-    className={`flex h-full box-border ${className}`}
-    iconClassName="mr-2.5 min-w-6 min-h-6"
-    textClassName="self-center text-l-light"
-    suffixClassName="text-secondary-text group-hover/item:text-primary-main"
-    doc={doc}
-    icon={icon}
-  />
-));
+import type { VNode } from '../../model/VNode';
+import { Text } from '../../ui-kit/Text/Text';
+import type { LinkDocsItem } from './LinkDocsContent';
+
+export interface LinkDocsListItemProps {
+  doc: LinkDocsItem;
+  icon?: VNode;
+}
+
+export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ doc, icon }) => {
+  const { text, fileSize, ...linkProps } = doc;
+
+  return (
+    <a
+      className="flex box-border gap-3 group/item h-fit w-fit text-primary-text no-underline hover:text-primary-main"
+      role="link"
+      {...linkProps}
+    >
+      {icon}
+      {text ? (
+        <Text size="text-l" font="font-light">
+          {text}
+          <Text color="text-secondary-text">
+            {linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize)}
+          </Text>
+        </Text>
+      ) : null}
+    </a>
+  );
+});
+
+const formatSuffix = (ext?: string, fileSize?: string) => {
+  const prefix = ext || fileSize ? ',' : '';
+  const extension = ext ? ` ${ext}` : '';
+  const size = fileSize ? ` (${fileSize})` : '';
+
+  return prefix + extension + size;
+};
+
+const getExtFromHref = (href: string) => {
+  if (!href) {
+    return '';
+  }
+
+  const index = href.lastIndexOf('.');
+
+  return index !== -1 ? href.substring(index + 1) : '';
+};

package/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -3,7 +3,6 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import type {
   OfficeServicesBlockContent,
   OfficeServicesBlockList,
@@ -30,7 +29,7 @@ const renderListItems = (itemList: OfficeServicesBlockList, i: number) => (
         width="24"
         height="24"
         asSVG
-        image={getIconWithVersion(itemList.icon)}
+        image={itemList.icon}
       />
     ) : null}
     {itemList.label ? <span className="text-l-light">{itemList.label}</span> : 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>
+  ),
+};