@redneckz/wildless-cms-uni-blocks 0.14.63 → 0.14.65

package/mobile/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -1,11 +1,12 @@
 import {
   type AdditionalDescriptionProps,
+  type DescriptionProps,
   type HeadlineCommonProps,
+  type TitleProps,
 } from '../../model/HeadlineType';
 import { type UniBlockContent } from '../../model/JSXBlock';
 import { type Picture } from '../../model/Picture';
 import { type ButtonsSectionContent } from '../../ui-kit/Button/ButtonsSectionContent';
-import { type HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 import { type ImageContent } from '../../ui-kit/Img/ImgProps';
 import { type ListContent } from '../../ui-kit/List/ListContent';
 
@@ -15,7 +16,8 @@ import { type ListContent } from '../../ui-kit/List/ListContent';
 export type MobileAppTileContent = UniBlockContent &
   AdditionalDescriptionProps &
   HeadlineCommonProps &
-  HeadingCommonProps &
+  TitleProps &
+  DescriptionProps &
   ButtonsSectionContent &
   ListContent &
   ImageContent & {

package/mobile/src/components/ProductBlock/ProductBlock.tsx

@@ -2,24 +2,17 @@ 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 { getBorderStyle } from '../../utils/getBorderStyle';
 import { style } from '../../utils/style';
 import { type ProductBlockContent } from './ProductBlockContent';
 
 export interface ProductBlockProps extends UniBlockProps, ProductBlockContent {}
 
-export const ProductBlock = JSX<ProductBlockProps>(
-  ({ className, padding, showBorder, ...rest }) => (
-    <BlockWrapper
-      className={style(
-        'overflow-hidden flex flex-col gap-3xl box-border',
-        getBorderStyle(showBorder),
-        className,
-      )}
-      padding="p-0"
-      {...rest}
-    >
-      <BaseProductTile defaultPadding="p-6xl" padding={padding} className="grow h-full" {...rest} />
-    </BlockWrapper>
-  ),
-);
+export const ProductBlock = JSX<ProductBlockProps>(({ className, padding, ...rest }) => (
+  <BlockWrapper
+    className={style('overflow-hidden flex flex-col gap-3xl box-border', className)}
+    padding="p-0"
+    {...rest}
+  >
+    <BaseProductTile defaultPadding="p-6xl" padding={padding} className="grow h-full" {...rest} />
+  </BlockWrapper>
+));

package/mobile/src/components/ProductBlock/ProductBlockContent.ts

@@ -8,6 +8,4 @@ export type ProductBlockContent = UniBlockContent &
   BaseProductTileContent & {
     /** @title Отображать кнопку возврата */
     backwardButton?: boolean;
-    /** @title Показывать рамку вокруг блока */
-    showBorder?: boolean;
   };

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

@@ -1,5 +1,6 @@
 {
   "content": {
-    "__html": "<h1>Заголовок 1</h1>\n<h2>Заголовок 2</h2>\n<h3>Заголовок 3</h3>\n<h4>Заголовок 4</h4>\n<h5>Заголовок 5</h5>\n<h6>Заголовок 6</h6>\n<p>Параграф, в котором много текста и даже <a href=\"#\">ссылка</a></p>\n<p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>\n<ul>\n  <li>Список с точками</li>\n  <li>Список с точками</li>\n</ul>\n<ol>\n  <li>Нумерованный список</li>\n  <li>Нумерованный список</li>\n</ol>\n"
+    "__html": "<h1>Заголовок 1</h1>\n<h2>Заголовок 2</h2>\n<h3>Заголовок 3</h3>\n<h4>Заголовок 4</h4>\n<h5>Заголовок 5</h5>\n<h6>Заголовок 6</h6>\n<p>Параграф, в котором много текста и даже <a href=\"#\">ссылка</a></p>\n<p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>\n<ul>\n  <li>Список с точками</li>\n  <li>Список с точками</li>\n</ul>\n<ol>\n  <li>Нумерованный список</li>\n  <li>Нумерованный список</li>\n</ol>\n",
+    "richVersion": ""
   }
 }

package/mobile/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -1,5 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Img } from '../../ui-kit/Img/Img';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
 import { type Tariff } from './useSafeBoxes';
 
 export interface SafeDepositRentalTotalProps {
@@ -17,14 +19,18 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
         {renderTotal('Аренда за', days)}
         {renderTotal('Цена', price + ' ₽')}
       </div>
-      <span className="@xl:hidden order-3 mb-xs text-s font-light text-secondary-text">
-        {imageDescription}
-      </span>
+      <div className="@xl:hidden order-3 mb-xs">
+        <Paragraph size="text-s" font="font-light" color="text-secondary-text">
+          {imageDescription}
+        </Paragraph>
+      </div>
       <div className="flex flex-col items-center gap-s order-3 @xl:order-none mb-xl @xl:mb-0 bg-primary-main py-s @xl:p-3xl text-center">
         <Img image={{ icon: 'PackA4Icon' }} className="@xl:h-60" />
-        <span className="hidden @xl:inline text-s font-light text-white opacity-80 whitespace-pre-line">
-          {imageDescription}
-        </span>
+        <div className="hidden @xl:inline opacity-80 whitespace-pre-line">
+          <Paragraph size="text-s" font="font-light" color="text-white">
+            {imageDescription}
+          </Paragraph>
+        </div>
       </div>
     </div>
   );
@@ -33,7 +39,9 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
 const renderTotal = (label: string, total: string | number) => {
   return (
     <div className="flex justify-between items-center gap-y-xs @xl:flex-col @xl:items-start">
-      <div className="text-l font-light text-secondary-text">{label}</div>
+      <Text size="text-l" font="font-light" color="text-secondary-text">
+        {label}
+      </Text>
       <span className="text-l @xl:text-h3 text-primary-text">{total}</span>
     </div>
   );

package/mobile/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -9,7 +9,7 @@ import {
 } from '../../ui-kit/InnerTable/InnerTableButton';
 import { type TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import { List } from '../../ui-kit/List/List';
-import { type ListProps } from '../../ui-kit/List/ListProps';
+import { type ListProps } from '../../ui-kit/List/ListContent';
 import { Text } from '../../ui-kit/Text/Text';
 import { type LabelDescriptionCell } from './TariffsTableContent';
 

package/mobile/src/components/TariffsTable/TariffsTableContent.ts

@@ -4,7 +4,7 @@ import { type IconProps } from '../../model/Picture';
 import { type ButtonsSectionContent } from '../../ui-kit/Button/ButtonsSectionContent';
 import { type ImageContent } from '../../ui-kit/Img/ImgProps';
 import { type TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
-import { type ListProps } from '../../ui-kit/List/ListProps';
+import { type ListProps } from '../../ui-kit/List/ListContent';
 
 /**
  * @hidden

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

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Headline } from '../../components/Headline/Headline';
+import { type HeadlineVersion } from '../../model/HeadlineType';
 import { type UniBlockProps } from '../../model/JSXBlock';
 import { type VNode } from '../../model/VNode';
 import { BaseTile } from '../BaseTile/BaseTile';
@@ -7,6 +8,7 @@ import { BenefitsList } from '../BenefitsList/BenefitsList';
 import { renderButtonsSection } from '../Button/renderButtonsSection';
 import { Img } from '../Img/Img';
 import { List } from '../List/List';
+import { type ListItemSize } from '../List/ListContent';
 import { PriceList } from '../PriceList/PriceList';
 import { RichText } from '../RichText/RichText';
 import { Tags } from '../Tags/Tags';
@@ -16,6 +18,15 @@ interface BaseProductTileProps extends UniBlockProps, BaseProductTileContent {
   backwardButton?: boolean;
 }
 
+const LIST_SIZE: Record<HeadlineVersion, ListItemSize> = {
+  XXL: 'L',
+  XL: 'L',
+  L: 'M',
+  M: 'M',
+  S: 'S',
+  XS: 'S',
+};
+
 export const BaseProductTile = JSX<BaseProductTileProps>(
   // eslint-disable-next-line max-lines-per-function
   ({
@@ -34,7 +45,6 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
     items,
     isDotted = true,
     priceList = [],
-    listItemSize,
     tags = [],
     buttons,
     image,
@@ -86,7 +96,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
           ) : null}
           {__html ? <RichText __html={__html} /> : null}
           {items?.length ? (
-            <List items={items} isDotted={isDotted} listItemSize={listItemSize} />
+            <List items={items} isDotted={isDotted} listItemSize={LIST_SIZE[headlineVersion]} />
           ) : null}
           {children}
           {priceList?.length ? <PriceList priceList={priceList} /> : null}

package/mobile/src/ui-kit/BaseProductTile/BaseProductTileContent.ts

@@ -1,6 +1,6 @@
 import { type Align } from '../../model/Align';
 import { type BulletsProps } from '../../model/Bullets';
-import { type HeadlineProps, type LabelProps } from '../../model/HeadlineType';
+import { type HeadlineProps } from '../../model/HeadlineType';
 import { type BenefitsListContent } from '../BenefitsList/BenefitsListContent';
 import { type ButtonsSectionContent } from '../Button/ButtonsSectionContent';
 import { type ImageContent } from '../Img/ImgProps';
@@ -38,7 +38,6 @@ export type BaseProductTileContent = HeadlineProps &
   TagsContent &
   ButtonsSectionContent &
   ImageContent &
-  LabelProps &
   PriceListProps & {
     imageOptions?: TileImageOptions;
     /** @title Заголовок во всю ширину */

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

@@ -31,7 +31,7 @@ export const BaseTile = JSX<BaseTileProps>(
     className,
     version = 'primary',
     defaultPadding,
-    padding,
+    padding = '',
     title = '',
     insetTitle = '',
     buttons,

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

@@ -1,40 +1,52 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
-import { type ListItemSize } from './ListContent';
+import { type ListItemSize, type ListProps } from './ListContent';
 import { ListItem } from './ListItem';
-import { type ListProps } from './ListProps';
 
-export const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
-  XS: 'text-m font-light',
-  S: 'text-l font-light',
-  M: 'text-h6',
-  L: 'text-h5',
-};
-
-const ITEM_INDENT_MAP: Record<ListItemSize, string> = {
-  XS: 'ml-2xs',
-  S: 'ml-xs',
-  M: 'ml-s',
-  L: 'ml-m',
+export const LIST_VERSION_STYLE: Record<
+  ListItemSize,
+  {
+    textSize: string;
+    indentStyle: string;
+    dotStyle: string;
+  }
+> = {
+  S: {
+    textSize: 'text-l font-light',
+    indentStyle: 'ml-xs',
+    dotStyle: 'w-1 h-1 mr-xs',
+  },
+  M: {
+    textSize: 'text-h6',
+    indentStyle: 'ml-s',
+    dotStyle: 'w-1.5 h-1.5 mr-s',
+  },
+  L: {
+    textSize: 'text-h5',
+    indentStyle: 'ml-m',
+    dotStyle: 'w-1.5 h-1.5 mr-m',
+  },
 };
 
 export const List = JSX<ListProps>(
-  ({ className, hasIndent, isDotted = true, items = [], listItemSize = 'M' }) =>
-    items?.length ? (
+  ({ className, isDotted = true, items = [], listItemSize = 'M' }) => {
+    const versionStyle = LIST_VERSION_STYLE[listItemSize];
+
+    return items?.length ? (
       <section
         className={style(
           'flex flex-col gap-xs text-left text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text',
-          TEXT_SIZE_MAP[listItemSize],
-          hasIndent ? ITEM_INDENT_MAP[listItemSize] : '',
+          versionStyle.textSize,
           className,
         )}
         role="list"
       >
         {items.map((item, i) => (
-          <ListItem key={String(i)} isDotted={isDotted} size={listItemSize}>
+          <ListItem key={String(i)} isDotted={isDotted} dotClassName={versionStyle.dotStyle}>
             {item}
           </ListItem>
         ))}
       </section>
-    ) : null,
+    ) : null;
+  },
 );

package/mobile/src/ui-kit/List/ListContent.ts

@@ -1,11 +1,23 @@
+import { type BulletsProps } from '../../model/Bullets';
+
 /**
  * @title Размер пунктов списка
- * @enumNames ["Очень маленький", "Маленький", "Средний", "Большой"]
+ * @enumNames ["Маленький", "Средний", "Большой"]
  */
-export type ListItemSize = 'XS' | 'S' | 'M' | 'L';
+export type ListItemSize = 'S' | 'M' | 'L';
 
 export interface ListContent {
   /** @title Список */
   items?: string[];
+  /** @hidden */
   listItemSize?: ListItemSize;
 }
+
+/**
+ * @title Содержимое списка
+ */
+export type ListProps = ListContent &
+  BulletsProps & {
+    /** @hidden */
+    className?: string;
+  };

package/mobile/src/ui-kit/List/ListItem.tsx

@@ -1,32 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
-import { type ListItemSize } from './ListContent';
 
 /**
  * @title Параметры элемента списка
  */
 export interface ListItemProps {
   className?: string;
+  dotClassName?: string;
   text?: string;
   isDotted?: boolean;
-  size?: ListItemSize;
 }
 
-const DOT_SIZE_MAP = {
-  L: 'w-1.5 h-1.5 mr-m', // TODO: Действительно нужен этот вариант? отличается только margin
-  M: 'w-1.5 h-1.5 mr-s',
-  S: 'w-1 h-1 mr-xs',
-  XS: 'w-1 h-1 mr-xs',
-};
-
-export const ListItem = JSX<ListItemProps>(({ className, isDotted, children, size = 'M' }) => (
+export const ListItem = JSX<ListItemProps>(({ className, isDotted, dotClassName, children }) => (
   <div className={style('font-sans flex', className)} role="listitem">
     {isDotted ? (
       <div className="shrink-0">
         <div
           className={style(
             'align-middle inline-block rounded-full bg-primary-text group-data-secondary:bg-white',
-            DOT_SIZE_MAP[size],
+            dotClassName,
           )}
         />
       </div>

package/mobile/src/ui-kit/RichText/RichTextProps.ts

@@ -2,10 +2,10 @@ type HTML = string;
 
 /**
  * @title Стиль форматированного текста
- * @default ""
- * @enumNames ["по умолчанию", "Строки разного цвета", "Горизонтальные разделители"]
+ * @default "primary"
+ * @enumNames ["Основсной", "Второстепенный"]
  */
-export type RichVersion = '' | 'striped' | 'horizontal-separator';
+export type RichVersion = '' | 'secondary';
 
 export interface RichTextProps {
   /** @title Форматированный текст */

package/package.json

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

package/src/common.css

@@ -198,6 +198,7 @@ html {
 
   .md-container {
     @apply text-l font-sans;
+    overflow: auto;
   }
 
   .md-container p.h1 {
@@ -257,39 +258,42 @@ html {
     @apply font-normal;
   }
 
-  .striped.md-container table {
+  .secondary.md-container table {
     width: 100%;
-    table-layout: fixed;
     text-align: left;
   }
 
-  .striped.md-container table thead,
-  .horizontal-separator.md-container table thead {
+  .secondary.md-container table thead,
+  .md-container table thead {
     color: rgb(var(--color-secondary-text));
   }
 
-  .striped.md-container table td,
-  .striped.md-container table th {
+  .secondary.md-container table td,
+  .secondary.md-container table th {
     padding: 8px 14px 5px;
   }
 
-  .striped.md-container table tbody tr:nth-child(2n-1) {
+  .secondary.md-container table tbody tr:nth-child(2n-1) {
     background-color: rgb(var(--color-secondary-light));
   }
 
-  .horizontal-separator.md-container table {
+  .secondary.md-container ul li {
+    color: rgb(125, 126, 127);
+  }
+
+  .md-container table {
     width: 100%;
     text-align: left;
   }
 
-  .horizontal-separator.md-container table td,
-  .horizontal-separator.md-container table th {
+  .md-container table td,
+  .md-container table th {
     padding: 12px 8px 12px 0;
     font-size: 18px;
     min-width: 116px;
   }
 
-  .horizontal-separator.md-container table tr {
+  .md-container table tr {
     border-bottom: 1px solid rgb(var(--color-primary-divider));
   }
 }

package/src/components/BenefitsBlock/BenefitsBlock.example.json

@@ -5,10 +5,7 @@
     "benefitList": [
       {
         "label": "Преимущество №1",
-        "description": {
-          "name": "Описание 1",
-          "benefitType": "text"
-        },
+        "description": "Описание 1",
         "icon": {
           "icon": "SmallClockIcon",
           "format": "webp",
@@ -20,10 +17,8 @@
       },
       {
         "label": "Преимущество №2",
-        "description": {
-          "items": ["Пункт 1", "Пункт 2"],
-          "benefitType": "list"
-        },
+        "items": ["Пункт 1", "Пункт 2"],
+        "isDotted": false,
         "icon": {
           "icon": "SignDocsIcon",
           "format": "webp",

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

@@ -19,10 +19,7 @@ const benefitImage = {
 };
 const benefitIcon: BenefitBlockItemProps = {
   label: 'Оформление',
-  description: {
-    name: 'Обеспечение ',
-    benefitType: 'text',
-  },
+  description: 'Обеспечение',
   icon: { icon: 'PersonalCardIcon' },
 };
 

package/src/components/BenefitsBlock/BenefitsBlock.fixture.tsx

@@ -2,7 +2,7 @@ import '../../setup-fixture';
 
 import { type Picture } from '../../model/Picture';
 import { BenefitsBlock } from './BenefitsBlock';
-import { type BenefitBlockItemProps, type ListBenefitDef } from './BenefitsBlockContent';
+import { type BenefitBlockItemProps } from './BenefitsBlockContent';
 
 const itemsList = [
   'Комиссия за выдачу',
@@ -23,27 +23,42 @@ const image: Picture = {
 
 const benefitImage: BenefitBlockItemProps = {
   label: 'Без залога и поручительства',
-  description: {
-    name: 'Единовременное перечисление суммы кредита в полном объёме на текущий счет в Банке',
-    benefitType: 'text',
-  },
+  description: 'Единовременное перечисление суммы кредита в полном объёме на текущий счет в Банке',
   icon: image,
 };
 
 const benefitIcon: BenefitBlockItemProps = {
   label: 'Без залога ',
-  description: {
-    name: 'Единовременное перечисление ',
-    benefitType: 'text',
-  },
+  description: 'Единовременное перечисление',
   icon: { icon: 'CalendarTickIcon' },
 };
 
-const descriptionList: ListBenefitDef = {
-  bullets: true,
-  items: itemsList,
-  benefitType: 'list',
-};
+const benefitList: BenefitBlockItemProps[] = [
+  {
+    label: 'Без комиссии',
+    items: itemsList,
+    isDotted: true,
+    icon: { icon: 'SignDocsIcon' },
+  },
+  {
+    label: 'Оформление по паспорту',
+    items: itemsList,
+    isDotted: true,
+    icon: { icon: 'SignDocsIcon' },
+  },
+  {
+    label: 'Без залога и поручительства',
+    items: itemsList,
+    isDotted: true,
+    icon: { icon: 'SignDocsIcon' },
+  },
+  {
+    label: 'Деньги за 3 дня',
+    items: itemsList,
+    isDotted: true,
+    icon: { icon: 'ActualBalanceIcon', iconVersion: 'normal' },
+  },
+];
 
 export default {
   'desc-img': (
@@ -71,28 +86,7 @@ export default {
       <BenefitsBlock
         className="col-span-12"
         title="Преимущества кредита"
-        benefitList={[
-          {
-            label: 'Без комиссии',
-            description: descriptionList,
-            icon: { icon: 'SignDocsIcon' },
-          },
-          {
-            label: 'Оформление по паспорту',
-            description: descriptionList,
-            icon: { icon: 'SignDocsIcon' },
-          },
-          {
-            label: 'Без залога и поручительства',
-            description: descriptionList,
-            icon: { icon: 'SignDocsIcon' },
-          },
-          {
-            label: 'Деньги за 3 дня',
-            description: descriptionList,
-            icon: { icon: 'ActualBalanceIcon', iconVersion: 'normal' },
-          },
-        ]}
+        benefitList={benefitList}
       />
     </div>
   ),
@@ -101,28 +95,7 @@ export default {
       <BenefitsBlock
         className="col-span-12"
         title="Преимущества кредита"
-        benefitList={[
-          {
-            label: 'Без комиссии',
-            description: descriptionList,
-            icon: { icon: 'SignDocsIcon', iconVersion: 'normal' },
-          },
-          {
-            label: 'Оформление по паспорту',
-            description: descriptionList,
-            icon: { icon: 'SignDocsIcon', iconVersion: 'normal' },
-          },
-          {
-            label: 'Без залога и поручительства',
-            description: descriptionList,
-            icon: { icon: 'SignDocsIcon', iconVersion: 'normal' },
-          },
-          {
-            label: 'Деньги за 3 дня',
-            description: descriptionList,
-            icon: { icon: 'ActualBalanceIcon', iconVersion: 'normal' },
-          },
-        ]}
+        benefitList={benefitList}
         version="secondary"
       />
     </div>
@@ -137,19 +110,13 @@ export default {
           { ...benefitIcon },
           {
             label: 'Без залога ',
-            description: {
-              name: 'Единовременное перечисление ',
-              benefitType: 'text',
-            },
+            description: 'Единовременное перечисление',
             icon: { icon: 'CalendarTickIcon', iconVersion: 'white' },
             iconBgVersion: '',
           },
           {
             label: 'Деньги за 3 дня',
-            description: {
-              name: 'Рассмотрение',
-              benefitType: 'text',
-            },
+            description: 'Рассмотрение',
             icon: { icon: 'GlobalIcon', iconVersion: 'white' },
             iconBgVersion: '',
           },