@redneckz/wildless-cms-uni-blocks 0.3.23 → 0.3.26

package/mobile/src/components/ComparisonTable/ComparisonTable.tsx

@@ -16,7 +16,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     columns,
     visibleRowLength = 0,
     isColoredFirstColumn = false,
-    useSwiper = false,
+    orientation = 'horizontal',
   }) => {
     const tableData =
       columns?.map(({ data, header }) => ({
@@ -50,7 +50,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
           isColoredFirstColumn,
           columnsViewState,
           handleToggleColumn,
-          useSwiper,
+          orientation,
           setColumnsViewState,
         })}
       </section>
@@ -65,41 +65,62 @@ const renderColumns = ({
   isColoredFirstColumn,
   columnsViewState,
   handleToggleColumn,
-  useSwiper,
+  orientation = 'horizontal',
   setColumnsViewState,
 }) => (
   <div role="table">
-    {tableData?.length ? (
-      useSwiper ? (
-        <SwipeListControl
-          context={context}
-          onSlideChange={onSlideChange(columnsViewState, setColumnsViewState)}
-        >
-          {tableData.map(
-            renderColumn({
-              context,
-              visibleRowLength,
-              isColoredFirstColumn,
-              columnsViewState,
-              handleToggleColumn,
-            }),
-          )}
-        </SwipeListControl>
-      ) : (
-        tableData.map(
-          renderColumn({
-            context,
-            visibleRowLength,
-            isColoredFirstColumn,
-            columnsViewState,
-            handleToggleColumn,
-          }),
-        )
-      )
-    ) : null}
+    {tableData?.length
+      ? renderInnerTable({
+          orientation,
+          context,
+          columnsViewState,
+          setColumnsViewState,
+          tableData,
+          visibleRowLength,
+          isColoredFirstColumn,
+          handleToggleColumn,
+        })
+      : null}
   </div>
 );
 
+const renderInnerTable = ({
+  orientation,
+  context,
+  columnsViewState,
+  setColumnsViewState,
+  tableData,
+  visibleRowLength,
+  isColoredFirstColumn,
+  handleToggleColumn,
+}) =>
+  orientation === 'horizontal' ? (
+    tableData.map(
+      renderColumn({
+        context,
+        visibleRowLength,
+        isColoredFirstColumn,
+        columnsViewState,
+        handleToggleColumn,
+      }),
+    )
+  ) : (
+    <SwipeListControl
+      context={context}
+      onSlideChange={onSlideChange(columnsViewState, setColumnsViewState)}
+    >
+      {tableData.map(
+        renderColumn({
+          context,
+          visibleRowLength,
+          isColoredFirstColumn,
+          columnsViewState,
+          handleToggleColumn,
+        }),
+      )}
+    </SwipeListControl>
+  );
+
 const renderColumn =
   ({ context, visibleRowLength, isColoredFirstColumn, columnsViewState, handleToggleColumn }) =>
   (columnData, i) =>

package/mobile/src/components/ComparisonTable/ComparisonTableContent.ts

@@ -1,6 +1,7 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { ListOrientation } from '../../model/ListOrientation';
 
 /**
  * @hidden
@@ -81,6 +82,6 @@ export interface ComparisonTableContent {
   isColoredFirstColumn?: boolean;
   /** @title Отображать заданное количество строк */
   visibleRowLength?: number;
-  /** @title Использовать свайпер (моб.) */
-  useSwiper?: boolean;
+  /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
+  orientation?: ListOrientation;
 }

package/mobile/src/components/ContentPage/ContentPage.tsx

@@ -91,7 +91,6 @@ function renderBlock(
   if (!(type && type in blocksRegistry)) {
     console.warn(`No block with "${type}" is registered`);
   }
-
   const BlockComponent = blocksRegistry[type || 'Placeholder'] || Placeholder;
   return blockDecorator(
     {

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

@@ -0,0 +1,19 @@
+{
+  "tabs": [
+    {
+      "title": "Вкладка 1",
+      "description": "Описание",
+      "icon": "CardIcon"
+    },
+    {
+      "title": "Вкладка 2",
+      "description": "Описание",
+      "icon": "ChartSquareIcon"
+    },
+    {
+      "title": "Вкладка 3",
+      "description": "Описание",
+      "icon": "DiscountShapeIcon"
+    }
+  ]
+}

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

@@ -1,6 +1,7 @@
 {
   "title": "Галерея",
   "description": "Описание",
+  "orientation": "horizontal",
   "cards": [
     {
       "image": {

package/mobile/src/components/Gallery/Gallery.tsx

@@ -8,6 +8,7 @@ import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl
 import type { GalleryCard } from './GalleryContent';
 import { GalleryItem } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
+import type { ListOrientation } from '../../model/ListOrientation';
 
 const blockStyle: Record<BlockVersion, string> = {
   primary: 'bg-white',
@@ -15,7 +16,7 @@ const blockStyle: Record<BlockVersion, string> = {
 };
 
 export const Gallery = JSX<GalleryProps>(
-  ({ context, title, description, cards = [], className, isScroll = true }) => {
+  ({ context, title, description, cards = [], className, orientation = 'horizontal' }) => {
     return (
       <section
         className={`relative font-sans text-primary-text bg-white px-4 py-6 overflow-hidden ${className}`}
@@ -34,14 +35,14 @@ export const Gallery = JSX<GalleryProps>(
             </div>
           ) : null}
         </div>
-        {renderCardsLayout(isScroll, cards, context)}
+        {renderCardsLayout(orientation, cards, context)}
       </section>
     );
   },
 );
 
-function renderCardsLayout(isScroll: boolean, cards: GalleryCard[], context) {
-  return isScroll ? (
+function renderCardsLayout(orientation: ListOrientation, cards: GalleryCard[], context) {
+  return orientation === 'horizontal' ? (
     <SwipeListControl context={context}>{cards?.map(renderCard)}</SwipeListControl>
   ) : (
     <div className="grid gap-[14px]">{cards?.map(renderCard)}</div>

package/mobile/src/components/Gallery/GalleryCardInner.tsx

@@ -1,16 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
-import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
 import { Button } from '../../ui-kit/Button/Button';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
-import type { GalleryCard } from './GalleryContent';
+import { List } from '../../ui-kit/List/List';
+import type { GalleryCard, GalleryItem } from './GalleryContent';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 export const GalleryCardInner = JSX<GalleryCard>(
   ({ title, description, image, items, button, version }) => {
     const titleStyleClasses = getTitleStyle(version, description, items);
     return (
-      <div>
+      <div className="h-full flex flex-col justify-between">
         <div>
           {image?.src ? (
             <div className="flex justify-center">
@@ -43,21 +43,16 @@ function renderCardTitle(title: string, className: string) {
   return <div className={`font-medium text-xl m-0 ${className}`}>{title}</div>;
 }
 
-function renderItems(items, version) {
+function renderItems(items: GalleryItem[], version: BlockVersion = 'primary') {
   return (
-    <section className={`max-w-[308px] mt-2`} role="list">
-      {items
-        .filter((item) => item?.text)
-        .map((item, i) => renderItem(item.text as string, i, version))}
-    </section>
-  );
-}
-
-function renderItem(item: string, i: number, version?: BlockVersion) {
-  return (
-    <BlockItem key={String(i)} version={version ?? 'primary'}>
-      <span className="text-sm">{item}</span>
-    </BlockItem>
+    <List
+      className={`max-w-[308px] mt-2 text-sm ${
+        version === 'primary' ? '!text-secondary-text' : ''
+      }`}
+      itemClassName="mt-1 first:mt-0"
+      items={items.filter((item) => item?.text).map((item) => item.text as string)}
+      version={version}
+    />
   );
 }
 

package/mobile/src/components/Gallery/GalleryContent.ts

@@ -1,6 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ListOrientation } from '../../model/ListOrientation';
 
 /**
  * @title Элемент списка
@@ -41,6 +42,6 @@ export interface GalleryContent {
    * @minItems 3
    */
   cards?: GalleryCard[];
-  /** @title Горизонтальная прокрутка (для мобильных прокрутка shift+mouseScroll) */
-  isScroll?: boolean; //TODO: for mobile
+  /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
+  orientation?: ListOrientation; //TODO: for mobile
 }

package/mobile/src/components/LinkDocs/LinkDocsContent.ts

@@ -1,6 +1,7 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import type { AlignType } from '../BaseTile/BaseTileProps';
+import type { ListOrientation } from '../../model/ListOrientation';
 
 /**
  * @title Отображение списка
@@ -11,15 +12,6 @@ import type { AlignType } from '../BaseTile/BaseTileProps';
  */
 export type LinkColumnsMode = 'single' | 'double';
 
-/**
- * @title Отображение списка (моб.)
- * @enumNames [
- *    "Вертикально",
- *    "Горизонтально",
- *    ]
- */
-export type LinkListMode = 'vertical' | 'horizontal';
-
 /**
  * @title Элемент списка
  */
@@ -41,7 +33,8 @@ export interface LinkDocsContent {
   /** @title Список */
   documents?: LinkDocsItem[];
   columnsMode?: LinkColumnsMode;
-  listMode?: LinkListMode; // TODO: мобильный проп
+  /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
+  listMode?: ListOrientation; // TODO: мобильный проп
   /** @title Рамка элементов (моб.) */ // TODO: мобильный проп
   hasBorder?: boolean;
   align?: AlignType;

package/mobile/src/components/MiniGallery/MiniGalleryContent.ts

@@ -2,6 +2,6 @@ import type { GalleryContent } from '../Gallery/GalleryContent';
 
 /**
  * @title Мини-галерея
- * @minItems 3
+ * @minItems 4
  */
 export type MiniGalleryContent = GalleryContent;

package/mobile/src/components/OtherProducts/OtherProductsItem.tsx

@@ -26,7 +26,7 @@ export const OtherProductsItem = JSX<BlockItemProps>(
           />
         ) : null}
         <button
-          className="border-none bg-primary-main px-0 py-[25px] w-full font-sans text-white text-base flex justify-center cursor-pointer"
+          className="border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer"
           onClick={handleToggle}
         >
           <span className="pr-3">{isActive ? 'Скрыть' : label}</span>

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

@@ -9,6 +9,7 @@
     }
   },
   "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+  "isDotted": true,
   "buttons": [
     {
       "text": "Кнопка",

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

@@ -1,18 +1,23 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { ProductBlockInner } from './ProductBlockInner';
 import type { UniBlockProps } from '../../types';
 import type { ProductBlockContent } from './ProductBlockContent';
-import { ProductBlockInner } from './ProductBlockInner';
+import type { BlockVersion } from '../../model/BlockVersion';
+
+const productBlockStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
-export const ProductBlock = JSX<ProductBlockProps>(
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  (props /* Get rid of image and benefits */) => {
-    const { className } = props;
-    return (
-      <section className={`font-sans bg-white px-4 py-6 ${className || ''}`}>
-        <ProductBlockInner {...props} />
-      </section>
-    );
-  },
-);
+export const ProductBlock = JSX<ProductBlockProps>((props /* Get rid of image and benefits */) => {
+  const { className = '', version = 'primary' } = props;
+  return (
+    <section
+      className={`font-sans bg-white px-4 py-6 ${productBlockStyleMap[version]} ${className}`}
+    >
+      <ProductBlockInner {...props} />
+    </section>
+  );
+});

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

@@ -20,6 +20,10 @@ export type ProductBlockInnerContent = HeadingContent &
      */
     benefits?: Benefit[];
     version?: BlockVersion;
+    /** @title Буллиты */
+    isDotted?: boolean;
+    /** @title Лейбл (моб.) */
+    label?: string;
     /**
      * @title Стиль для текстовой части
      * @hidden

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

@@ -7,6 +7,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
 import type { ProductBlockInnerContent } from './ProductBlockContent';
+import type { BlockVersion } from '../../model/BlockVersion';
 import { renderBenefit } from './renderBenefit';
 
 export type ProductBlockInnerProps = ProductBlockInnerContent & UniBlockProps;
@@ -23,10 +24,13 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     image,
     items,
     version = 'primary',
+    isDotted = true,
+    label,
   }) => {
     return (
-      <div className={`w-full text-primary-text ${className}`}>
+      <div className={`w-full ${className}`}>
         <div>
+          {label ? renderLabel(label, version) : null}
           <BaseTile
             context={context}
             title={
@@ -54,7 +58,14 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             {benefits?.filter((items) => items.label)?.length ? (
               <div className="mt-3">{benefits.map((_, i) => renderBenefit(_, i, version))}</div>
             ) : null}
-            {items?.length ? <List className="mt-3" items={items} /> : null}
+            {items?.length ? (
+              <List
+                className="mt-3 text-m-md"
+                items={items}
+                version={version}
+                isDotted={isDotted}
+              />
+            ) : null}
           </BaseTile>
         </div>
         {renderImage(image)}
@@ -65,8 +76,17 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
 
 function renderImage(image) {
   return image?.src ? (
-    <div className="mt-5">
-      <Img image={{ className: 'block', ...image }} />
-    </div>
+    <Img imageClassName="mt-5 mx-auto block" image={{ className: 'block', ...image }} />
   ) : null;
 }
+
+const labelStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-primary-main border-secondary-hover',
+  secondary: 'text-white/80',
+};
+
+const renderLabel = (label: string, version: BlockVersion) => (
+  <div className={`m-xs px-2.5 py-1.5 mb-5 rounded-md border-2 w-fit ${labelStyleMap[version]}`}>
+    {label}
+  </div>
+);

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

@@ -11,7 +11,7 @@ const benefitDescStyleMap: Record<BlockVersion, string> = {
   secondary: 'text-white',
 };
 
-export function renderBenefit(benefit: Benefit, i: number, version: string) {
+export function renderBenefit(benefit: Benefit, i: number, version: BlockVersion) {
   return (
     <div key={String(i)} className="flex gap-3 items-center mb-2.5 last:mb-0">
       {benefit.icon && (
@@ -21,6 +21,7 @@ export function renderBenefit(benefit: Benefit, i: number, version: string) {
           width="24"
           height="24"
           asSVG
+          color={version}
         />
       )}
       <div className={`font-medium text-m-title-xs m-0 ${benefitTitleStyleMap[version]}`}>

package/mobile/src/components/ProductGallery/ProductGalleryContent.ts

@@ -27,6 +27,9 @@ export interface ProductGalleryContent {
    * @hidden //! temporary not used
    */
   duration?: number;
-  /** @title Слайды */
+  /**
+   * @title Слайды
+   * @minItems 2
+   */
   slides?: ProductSlide[];
 }

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

@@ -1,9 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
 import { Button } from '../../ui-kit/Button/Button';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
-import type { TariffsTableCellData } from './TariffsTableContent';
+import { List } from '../../ui-kit/List/List';
+import type { TariffsTableCellData, TariffsTableList } from './TariffsTableContent';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 export interface TariffsTableCellProps {
   cell: TariffsTableCellData[];
@@ -32,31 +33,31 @@ const renderCellInner = (
     )}
     {label ? <div className="text-xl font-medium m-0">{label}</div> : null}
     {description ? <div className="text-sm text-secondary-text">{description}</div> : null}
-    {list?.items?.length ? (
-      <div className="flex flex-col justify-between items-start">
-        <div role="list">
-          {list.items.map((text, idx) => (
-            <BlockItem
-              className="text-sm"
-              key={String(idx)}
-              text={text}
-              version="gray"
-              isDotted={list.isDotted ?? true}
-            />
-          ))}
-        </div>
-      </div>
-    ) : null}
+    {list?.items?.length ? renderList(list) : null}
     {image && <Img image={image} />}
-    {buttons?.length
-      ? buttons.map(({ icon, ...buttonProps }, idx) => (
-          <Button
-            className={`${idx > 0 ? 'ml-3' : ''} w-12 h-12`}
-            key={String(idx)}
-            appendLeft={icon && <Icon name={icon} width="24px" height="24px" asSVG />}
-            {...buttonProps}
-          />
-        ))
-      : null}
+    {buttons?.length ? renderButtons(buttons) : null}
+  </div>
+);
+
+const renderList = (list: TariffsTableList) => (
+  <List
+    className="flex flex-col justify-between items-start text-sm"
+    version="gray"
+    items={list.items}
+    isDotted={list.isDotted ?? true}
+  />
+);
+
+const renderButtons = (buttons: ButtonWithIconProps[]) => (
+  <div>
+    {buttons.map(({ icon, rounded, ...buttonProps }, idx) => (
+      <Button
+        className={`${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`}
+        key={String(idx)}
+        rounded={rounded}
+        appendLeft={icon && <Icon name={icon} width="24px" height="24px" asSVG />}
+        {...buttonProps}
+      />
+    ))}
   </div>
 );

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

@@ -56,7 +56,7 @@ export type TariffsTableContent = HeadingContent &
     columns?: TariffsTableColumn[];
     /** @title Параметры */
     rowHeaders?: TariffsTableRowHeader[];
-    /** @title Направление таблицы (моб.) */
+    /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
     orientation?: ListOrientation;
   };
 

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

@@ -1,10 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { TableTileHeader } from './TableTileHeader';
-import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
 import { Img } from '../../ui-kit/Img/Img';
 import { Button } from '../../ui-kit/Button/Button';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import type { TariffsTableCellData, TariffsTableTileCellProps } from './TariffsTableContent';
+import { List } from '../../ui-kit/List/List';
+import type {
+  TariffsTableCellData,
+  TariffsTableList,
+  TariffsTableTileCellProps,
+} from './TariffsTableContent';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ header, data }) => {
   return (
@@ -27,35 +32,32 @@ const renderCellInner = (
     {description ? (
       <div className="text-m-sm text-secondary-text mt-[3px]">{description}</div>
     ) : null}
-    {list?.items?.length ? (
-      <div className="flex flex-col justify-between items-start">
-        <div role="list">
-          {list.items.map((text, idx) => (
-            <BlockItem
-              className="text-m-sm"
-              key={String(idx)}
-              text={text}
-              version="gray"
-              isDotted={list.isDotted ?? true}
-            />
-          ))}
-        </div>
-      </div>
-    ) : null}
+    {list?.items?.length ? renderList(list) : null}
     {image && <Img image={{ ...image, className: 'm-0' }} />}
-    {buttons?.length ? (
-      <div>
-        {buttons.map(({ icon, rounded, ...buttonProps }, idx) => (
-          <Button
-            className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`}
-            key={String(idx)}
-            rounded={rounded}
-            appendLeft={icon && <Icon name={icon} width="24px" height="24px" asSVG />}
-            {...buttonProps}
-            aria-label={icon}
-          />
-        ))}
-      </div>
-    ) : null}
+    {buttons?.length ? renderButtons(buttons) : null}
+  </div>
+);
+
+const renderList = (list: TariffsTableList) => (
+  <List
+    className="flex flex-col justify-between items-start text-m-sm"
+    version="gray"
+    items={list.items}
+    isDotted={list.isDotted ?? true}
+  />
+);
+
+const renderButtons = (buttons: ButtonWithIconProps[]) => (
+  <div>
+    {buttons.map(({ icon, rounded, ...buttonProps }, idx) => (
+      <Button
+        className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`}
+        key={String(idx)}
+        rounded={rounded}
+        appendLeft={icon && <Icon name={icon} width="24px" height="24px" asSVG />}
+        {...buttonProps}
+        aria-label={icon}
+      />
+    ))}
   </div>
 );

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

@@ -9,5 +9,6 @@
       "width": 43,
       "height": 43
     }
-  }
+  },
+  "isDotted": true
 }

package/mobile/src/components/TextBlock/TextBlock.tsx

@@ -55,10 +55,10 @@ export const TextBlock = JSX<TextBlockProps>(
           ) : null}
           {items?.length ? (
             <List
-              className="mt-1"
+              className="mt-1 text-m-md"
               items={items}
               isDotted={isDotted}
-              version={blockVersion.indexOf('secondary') !== -1 ? 'secondary' : 'gray'}
+              version={blockVersion === 'secondary' ? 'secondary' : 'gray'}
             />
           ) : null}
         </div>