@redneckz/wildless-cms-uni-blocks 0.14.27 → 0.14.28

package/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { type JSXBlock, type UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { getBorderStyle } from '../../utils/getBorderStyle';
 import { style } from '../../utils/style';
 import { gapStyles } from './gapStyles';
 import { type HorizontalLayoutContent } from './HorizontalLayoutContent';
@@ -28,9 +29,7 @@ export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalL
       {renderChildren({
         ...rest,
         extraProps: {
-          className: isCardBorder
-            ? 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider'
-            : '',
+          className: getBorderStyle(isCardBorder),
         },
       })}
     </BlockWrapper>

package/src/components/LinkDocs/LinkDocItem.tsx

@@ -7,38 +7,28 @@ export interface LinkDocItemProps extends LinkDoc {
   icon?: VNode;
 }
 
-export const LinkDocItem = JSX<LinkDocItemProps>(({ icon, text, fileSize, ...linkProps }) => (
-  <a
-    className="flex box-border gap-s 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>
-));
+export const LinkDocItem = JSX<LinkDocItemProps>(
+  ({ icon, text, fileFormat, fileSize, ...linkProps }) => {
+    const prefix = fileFormat || fileSize ? ',' : '';
+    const size = fileSize ?? '';
+    const format = fileFormat ? String(fileFormat) : '';
 
-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) : '';
-};
+    return (
+      <a
+        className="flex box-border gap-s 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 && `${size} ${prefix} ${format}`}
+            </Text>
+          </Text>
+        ) : null}
+      </a>
+    );
+  },
+);

package/src/components/LinkDocs/LinkDocs.example.json

@@ -17,12 +17,14 @@
         "docType": "Link",
         "text": "Документ №1",
         "href": "/documents/document1.doc",
+        "fileFormat": "doc",
         "fileSize": "123КБ"
       },
       {
         "docType": "Link",
         "text": "Документ №2",
         "href": "/documents/document2.rtf",
+        "fileFormat": "rtf",
         "target": "_blank"
       },
       {
@@ -34,7 +36,8 @@
       {
         "docType": "Link",
         "text": "Документ №4",
-        "href": "/abc/map.rar"
+        "href": "/abc/map.rar",
+        "fileFormat": "rar"
       }
     ],
     "columnsMode": "double",

package/src/components/LinkDocs/LinkDocs.tsx

@@ -51,7 +51,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
             )}
             role="list"
           >
-            {documents.map(renderLinkDocItem(router, columnsMode, icon))}
+            {documents.map(renderLinkDocItem(router, icon))}
           </div>
         ) : null}
       </BlockWrapper>
@@ -60,8 +60,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
 );
 
 const renderLinkDocItem =
-  (router: Router, columnsMode: LinkColumnsMode, icon: Picture) =>
-  (docBlockDef: DocBlockDef, i: number) => {
+  (router: Router, icon: Picture) => (docBlockDef: DocBlockDef, i: number) => {
     const href =
       docBlockDef?.docType === 'Attachment'
         ? adjustHref(router)(docBlockDef?.attachment?.src)
@@ -72,12 +71,15 @@ const renderLinkDocItem =
         ? formatBytes(docBlockDef?.attachment?.fileSize || 0)
         : docBlockDef?.fileSize;
 
+    const fileFormat = docBlockDef?.docType !== 'Attachment' ? docBlockDef?.fileFormat : '';
+
     return (
       <div key={String(i)} role="listitem">
         <LinkDocItem
           text={docBlockDef?.text}
           target={docBlockDef?.target}
           href={href}
+          fileFormat={fileFormat}
           fileSize={fileSize}
           icon={icon ? <Img className={linkIconStyle} image={icon} width="24" height="24" /> : null}
         />

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -17,6 +17,8 @@ export type LinkColumnsMode = 'single' | 'double';
 export interface LinkDoc extends LinkProps {
   /** @title размер файла */
   fileSize?: string;
+  /** @title формат файла */
+  fileFormat?: string;
 }
 
 export interface AttachmentDoc {
@@ -44,6 +46,10 @@ export type AttachmentDocDef = AttachmentDoc & {
   docType: 'Attachment';
 };
 
+/**
+ * @title Документ
+ * @default null
+ */
 export type DocBlockDef = EmptyOption | LinkDocDef | AttachmentDocDef;
 
 /**

package/src/components/LinkDocs/linkDocsContentExample.ts

@@ -10,28 +10,37 @@ export const linkDocsContentExample: LinkDocsContent = {
       attachment: { src: '/abc1/cooldoc.doc' },
       target: '_self',
     },
-    { docType: 'Link', text: 'target blank', href: '/abc2/wtf.rtf', target: '_blank' },
-    { docType: 'Link', text: 'GlassIcon', href: '/abc3/map.jpeg' },
-    { docType: 'Link', text: 'no icon', href: '/abc4' },
+    {
+      docType: 'Link',
+      text: 'target blank',
+      href: '/abc2/wtf.rtf',
+      fileFormat: 'rtf',
+      target: '_blank',
+    },
+    { docType: 'Link', text: 'GlassIcon', href: '/abc3/map.jpeg', fileFormat: 'jpeg' },
+    { docType: 'Link', text: 'no icon', href: '/abc4', fileFormat: 'rtf' },
     { docType: 'Link', text: 'документ 5', href: '/abc5' },
-    { docType: 'Link', text: 'документ 6', href: '/abc6/abc.pdf' },
-    { docType: 'Link', text: 'Text text text', href: '/abc7/yolo.png' },
+    { docType: 'Link', text: 'документ 6', href: '/abc6/abc.pdf', fileFormat: 'pdf' },
+    { docType: 'Link', text: 'Text text text', href: '/abc7/yolo.png', fileFormat: 'png' },
     {
       docType: 'Link',
       text: 'Some more generic text to stretch item, and even more, more text, and more generic text, and even more, more text, and even more',
       href: '/abc8/archive.zip',
+      fileFormat: 'zip',
       fileSize: '2.3МБ',
     },
     {
       docType: 'Link',
       text: 'И ещё немного текста',
       href: '/abc9/rarniw.rar',
+      fileFormat: 'rar',
       fileSize: '666МБ',
     },
     {
       docType: 'Link',
       text: 'Форматируем, сортируем, смотрим как отображается...',
       href: '/abc10/',
+      fileFormat: 'pdf',
       fileSize: '65ГБ',
     },
   ],

package/src/components/MobileAppTile/MobileAppTile.example.json

@@ -30,6 +30,7 @@
     "title": "Мобильное приложение",
     "description": "Загрузить для IOS и Android",
     "version": "primary",
-    "headingType": "h4"
+    "headingType": "h4",
+    "additionalDescription": "Наведите камеру телефона на QR-код и скачайте приложение"
   }
 }

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

@@ -4,6 +4,8 @@ import { type Picture } from '../../model/Picture';
 import { type ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { MobileAppTile } from './MobileAppTile';
 
+const ADDITIONALDESCRIPTION = 'Наведите камеру телефона на QR-код и скачайте приложение';
+
 const image: Picture = {
   src: 'icon-phone.png',
   format: 'webp',
@@ -57,7 +59,7 @@ export default {
         className="col-span-12"
         description="Загрузить для IOS и Android"
         image={image}
-        items={listItems}
+        additionalDescription={ADDITIONALDESCRIPTION}
         title="Мобильное приложение!"
         buttons={[
           {

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -24,6 +24,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
     items,
     listItemSize,
     qr,
+    additionalDescription = '',
     title = 'Мобильное приложение',
     version = 'primary',
     ...rest
@@ -67,7 +68,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
               'flex-col items-start @xl:flex-row @xl:items-center',
             )}
           >
-            {renderList(items, listItemSize)}
+            {renderList(items, listItemSize, additionalDescription)}
             {qr?.src ? (
               <div
                 className={style(

package/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -1,4 +1,7 @@
-import { type HeadlineCommonProps } from '../../model/HeadlineType';
+import {
+  type AdditionalDescriptionProps,
+  type HeadlineCommonProps,
+} from '../../model/HeadlineType';
 import { type UniBlockContent } from '../../model/JSXBlock';
 import { type Picture } from '../../model/Picture';
 import { type ButtonsSectionContent } from '../../ui-kit/Button/ButtonsSectionContent';
@@ -10,6 +13,7 @@ import { type ListContent } from '../../ui-kit/List/ListContent';
  * @title Мобильное приложение
  */
 export type MobileAppTileContent = UniBlockContent &
+  AdditionalDescriptionProps &
   HeadlineCommonProps &
   HeadingCommonProps &
   ButtonsSectionContent &

package/src/components/MobileAppTile/renderList.tsx

@@ -1,12 +1,17 @@
 import { List } from '../../ui-kit/List/List';
 import { type ListItemSize } from '../../ui-kit/List/ListContent';
+import { Text } from '../../ui-kit/Text/Text';
 
-export const renderList = (items?: string[], listItemSize?: ListItemSize) => {
+export const renderList = (
+  items?: string[],
+  listItemSize?: ListItemSize,
+  additionalDescription?: string,
+) => {
   return items?.length ? (
     <List items={items} listItemSize={listItemSize} className="text-l font-light" />
   ) : (
-    <span className="text-m font-light text-secondary-text">
-      Наведите камеру телефона на QR-код и скачайте приложение
-    </span>
+    <Text size="text-m" font-weight="font-light" color="text-secondary-text">
+      {additionalDescription}
+    </Text>
   );
 };

package/src/components/OfficesAtmsMap/OfficesAtmsMapContent.ts

@@ -33,6 +33,7 @@ export type AtmsDef = {
 
 /**
  * @title Данные
+ * @default null
  */
 export type OfficesAtmsBlockDef = EmptyOption | OfficesDef | AtmsDef;
 

package/src/components/ProductBlock/ProductBlock.tsx

@@ -5,6 +5,7 @@ import { type UniBlockProps } from '../../model/JSXBlock';
 import { BaseProductTile } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
+import { getBorderStyle } from '../../utils/getBorderStyle';
 import { style } from '../../utils/style';
 import { type ProductBlockContent } from './ProductBlockContent';
 import { renderBackwardButton } from './renderBackwardButton';
@@ -18,22 +19,24 @@ export const ProductBlock = JSX<ProductBlockProps>(
       ev?.preventDefault();
       router.back();
     }, []);
-    const borderStyle = showBorder
-      ? 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider'
-      : '';
 
     return (
       <BlockWrapper
         className={style(
           'overflow-hidden flex flex-col gap-3xl box-border',
-          borderStyle,
+          getBorderStyle(showBorder),
           className,
         )}
         defaultPadding="p-6xl"
         padding={padding}
         {...rest}
       >
-        {backwardButton ? renderBackwardButton(rest.version || 'primary', handleClick) : null}
+        {backwardButton
+          ? renderBackwardButton(
+              !rest.version || rest.version === 'primary' ? 'primary' : 'white',
+              handleClick,
+            )
+          : null}
         <BaseProductTile className="grow h-full" {...rest} />
       </BlockWrapper>
     );

package/src/components/TariffsTable/TariffsTable.tsx

@@ -8,7 +8,6 @@ import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import { COLS_LENGTH_FOR_SCROLL } from './constants';
-import { headlineAlign } from './headlineAlign';
 import { type TariffsTableContent } from './TariffsTableContent';
 import { TariffsTableRow } from './TariffsTableRow';
 import { TariffsTableWrapper } from './TariffsTableWrapper';
@@ -43,7 +42,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
 
     return (
       <BlockWrapper
-        className={style('overflow-hidden relative space-y-0 @4xl:space-y-xl', className)}
+        className={style('overflow-hidden relative space-y-6xl @4xl:space-y-xl', className)}
         defaultPadding="p-6xl"
         {...rest}
       >
@@ -52,7 +51,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
           description={description}
           headlineVersion="M"
           isEmbedded={true}
-          align={headlineAlign}
+          align="text-center"
         />
         <div className="space-y-m">
           {hiddenRowsNum > 0 ? (

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type UniBlockProps } from '../../model/JSXBlock';
 import { type TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
-
 import { type CellDef } from './TariffsTableContent';
 import { renderCellInner } from './TariffsTableRenderCell';
 

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -91,6 +91,7 @@ export type InnerTableBlockDef = TariffsTableInnerContent & {
 
 /**
  * @title Содержимое ячейки
+ * @default null
  */
 export type CellDef =
   | EmptyOption

package/src/components/TariffsTable/TariffsTableVertical.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-
 import { type TariffsTableProps } from './TariffsTableContent';
 import { TariffsTableTileCell } from './TariffsTableTileCell';
 

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

@@ -0,0 +1,28 @@
+{
+  "content": {
+    "title": "Плитка",
+    "headlineVersion": "S",
+    "__html": "<p>Описание</p>",
+    "image": {
+      "format": "webp",
+      "size": {
+        "format": "webp",
+        "width": 445
+      }
+    },
+    "isDotted": true,
+    "listItemSize": "M",
+    "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
+    "buttons": [
+      {
+        "text": "Кнопка",
+        "version": "primary"
+      }
+    ],
+    "version": "primary",
+    "imageOptions": {
+      "directionRight": true,
+      "imageAlign": "end"
+    }
+  }
+}

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

@@ -0,0 +1,48 @@
+import '../../setup-fixture';
+
+import { type Picture } from '../../model/Picture';
+import { Tile } from './Tile';
+import { type TileContent } from './TileContent';
+
+const image: Picture = {
+  src: 'from-5-5-percent.svg',
+  format: 'webp',
+  size: {
+    width: 145,
+  },
+};
+
+export const TILE: TileContent = {
+  title: 'Кредиты',
+  isDotted: true,
+  listItemSize: 'L',
+  items: ['До 3 млн ₽', 'до 5 лет'],
+  __html: undefined,
+  buttons: [
+    {
+      text: 'Подробнее',
+      href: '/credit-cards',
+      version: 'secondary',
+    },
+  ],
+  image,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Tile className="col-span-12" {...TILE} />
+    </div>
+  ),
+  rightImage: (
+    <div className="container grid grid-cols-12">
+      <Tile
+        className="col-span-12"
+        {...TILE}
+        imageOptions={{
+          isImageAlwaysOnRight: true,
+        }}
+      />
+    </div>
+  ),
+};

package/src/components/Tile/Tile.fixture.tsx

@@ -0,0 +1,146 @@
+import { type Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { Tile } from './Tile';
+import { type TileContent } from './TileContent';
+
+const image: Picture = {
+  src: 'from-5-5-percent.svg',
+  format: 'webp',
+  size: {
+    width: 445,
+  },
+};
+
+const image2: Picture = {
+  src: 'credit-card-1.png',
+  format: 'webp',
+};
+
+const image3: Picture = {
+  src: 'column-1.png',
+  format: 'webp',
+};
+
+const image4: Picture = {
+  src: 'globe-1.png',
+  format: 'webp',
+};
+
+export const TILE: TileContent = {
+  title: 'Кредиты',
+  isDotted: true,
+  listItemSize: 'L',
+  items: ['До 3 млн ₽', 'до 5 лет'],
+  buttons: [
+    {
+      text: 'Подробнее',
+      href: '/credit-cards',
+      version: 'secondary',
+    },
+  ],
+  image,
+};
+
+export const TILE_PREMIUM: TileContent = {
+  title: 'Премиальные продукты',
+  __html:
+    '<p>Выделенные зоны обслуживания и персональный финансовый консультант. <strong>Полный спектр</strong> премиальных продуктов, <u>подчеркивающих</u> ваш статус</p>',
+  buttons: [
+    {
+      href: 'https://rshb.ru',
+      text: 'Подробнее',
+      target: '_blank',
+      version: 'secondary',
+    },
+  ],
+  image: image3,
+};
+
+const tags = ['Tag #1', 'Tag #2', 'Tag #3'];
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Tile className="col-span-8" {...TILE} />
+    </div>
+  ),
+  mortgage: (
+    <div className="container grid grid-cols-12">
+      <Tile
+        version="secondary"
+        className="col-span-4"
+        title="Ипотека"
+        items={[
+          'Качественные фермерские продукты напрямую от производителей',
+          'Самая большая база сельских туров по России',
+          'Площадки для создания комфортной жизни за городом',
+          'Подробная база вакансий для жителей сельской местности',
+        ]}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+      />
+    </div>
+  ),
+  'credit-card': (
+    <div className="container grid grid-cols-12">
+      <Tile
+        className="col-span-6"
+        title="Банковские пластиковые карты"
+        items={['Счета в разных валютах', 'Бесплатное обслуживание', 'Кэшбэк до 15% от покупок']}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+        image={image2}
+      />
+    </div>
+  ),
+  premium: (
+    <div className="container grid grid-cols-12">
+      <Tile className="col-span-6" {...TILE_PREMIUM} />
+    </div>
+  ),
+  ecosystem: (
+    <div className="container grid grid-cols-12">
+      <Tile
+        className="col-span-12"
+        title="Экосистема «СВОЕ», созданная для людей"
+        items={[
+          'Качественные фермерские продукты напрямую от производителей',
+          'Самая большая база сельских туров по России',
+          'Площадки для создания комфортной жизни за городом',
+          'Подробная база вакансий для жителей сельской местности',
+        ]}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+        image={image4}
+      />
+    </div>
+  ),
+  tags: (
+    <div className="container grid grid-cols-12">
+      <Tile className="col-span-8" {...TILE} tags={tags} />
+    </div>
+  ),
+  'direction left': (
+    <div className="container grid grid-cols-12">
+      <Tile className="col-span-8" imageOptions={{ directionRight: false }} {...TILE} />
+    </div>
+  ),
+};

package/src/components/Tile/Tile.tsx

@@ -0,0 +1,23 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type UniBlockProps } from '../../model/JSXBlock';
+import { BaseProductTile } from '../../ui-kit/BaseProductTile/BaseProductTile';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { type TileContent } from './TileContent';
+
+export interface TileProps extends TileContent, UniBlockProps {}
+
+export const Tile = JSX<TileProps>(
+  ({ className, padding, headlineVersion = 'S', listItemSize = 'M', ...rest }) => (
+    <BlockWrapper className={className} padding="p-0" {...rest}>
+      <BaseProductTile
+        className="h-full"
+        defaultPadding="p-xl"
+        padding={padding}
+        headlineVersion={headlineVersion}
+        listItemSize={listItemSize}
+        isFullWidthTitle={false}
+        {...rest}
+      />
+    </BlockWrapper>
+  ),
+);

package/src/components/Tile/Tile.ui.json

@@ -0,0 +1,17 @@
+{
+  "content": {
+    "benefits": {
+      "items": {
+        "__html": {
+          "ui:widget": "html"
+        },
+        "type": {
+          "ui:widget": "hidden"
+        }
+      }
+    },
+    "__html": {
+      "ui:widget": "html"
+    }
+  }
+}