@redneckz/wildless-cms-uni-blocks 0.6.50 → 0.7.1

package/src/components/Blocks.ts

@@ -50,6 +50,7 @@ import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
 import { StepsBlock } from './StepsBlock/StepsBlock';
+import { SwipeListControlBlock } from './SwipeListControlBlock/SwipeListControlBlock';
 import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
@@ -109,6 +110,7 @@ export const Blocks: BlocksRegistry = {
   RollupItem,
   SafeDepositRental,
   StepsBlock,
+  SwipeListControlBlock,
   Tabs,
   TariffsTable,
   TextBlock,

package/src/components/Carousel/Carousel.ui.json

@@ -0,0 +1,8 @@
+{
+  "content": {},
+  "style": {
+    "ui:options": {
+      "minCols": 12
+    }
+  }
+}

package/src/components/CarouselCard/CarouselCard.tsx

@@ -10,20 +10,26 @@ export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full';
 
 const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {
-  normal: 'min-w-[1007px]',
+  normal: 'min-w-[970px]',
   mini: 'min-w-[355px]',
 };
 
 export const CarouselCard = JSX<CarouselCardProps>(
   ({ className = '', button, description, title, version = 'normal' }) => (
-    <section className={`flex pb-9 pl-12 ${CARD_WIDTH_MAP[version]} ${className}`}>
+    <section className={`flex pb-9 pl-12 border-box ${CARD_WIDTH_MAP[version]} ${className}`}>
       <div className="relative w-full">
         <div className={`${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark`} />
         <div className={`${BLOCK_CLASSES} z-10 top-6 right-8 bg-green`} />
         <div className={`${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light`} />
-        <div className="relative bg-white z-10 py-6 px-10 border border-solid border-green-light">
-          <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
-          {button ? <div className="mt-6">{renderButton({ button })}</div> : null}
+        <div className="relative bg-white z-10 p-10 border border-solid border-green-light">
+          <Headline
+            className="!p-0"
+            title={title}
+            description={description}
+            headlineVersion="L"
+            align="text-left"
+          />
+          {button ? <div className="mt-14">{renderButton({ button })}</div> : null}
         </div>
       </div>
     </section>

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -16,7 +16,7 @@ export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
       className={`font-sans border border-gray flex min-w-[536px] ${VersionStyleMap[version]} ${className}`}
       {...rest}
     >
-      <div className="w-[200px] min-w-[200px] self-end">
+      <div className="w-[200px] min-w-[200px] self-center">
         {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
         {icon?.src ? <Img image={icon} /> : null}
       </div>

package/src/components/CarouselTariffsCard/CarouselTariffsCard.example.json

@@ -1,13 +1,21 @@
 {
-  "title": "Заголовок",
+  "title": "Заголовок карточки",
   "button": {
     "href": "",
     "text": "Кнопка",
     "target": "_self",
-    "version": "primary"
+    "version": "secondary"
+  },
+  "icon": {
+    "icon": "",
+    "format": "webp",
+    "size": {
+      "width": 267,
+      "height": 73
+    }
   },
   "isHighlighting": false,
-  "rows": [
+  "cardCells": [
     {
       "title": "Ячейка 1-1",
       "description": "Описание 1-1"

package/src/components/CarouselTariffsCard/CarouselTariffsCard.fixture.tsx

@@ -27,7 +27,7 @@ const buttonSecondary: ButtonProps = {
   version: 'secondary',
 };
 
-const rows = [
+const cardCells = [
   { title: 'Открытие расчетного счета', description: 'Бесплатно' },
   { title: 'Внутрибанковские платежи', description: '0 ₽' },
   { title: 'Внешние платежи, до 10 шт.', description: '0 ₽' },
@@ -43,14 +43,14 @@ export const TARIFFS_CARD: CarouselTariffsCardContent = {
   title: 'Расчётный эконом',
   icon: imageMonth,
   button: buttonSecondary,
-  rows,
+  cardCells,
 };
 
 export const TARIFFS_CARD_HIT: CarouselTariffsCardContent = {
   icon: imageMonth,
   title: 'Расчётный эконом',
   button,
-  rows,
+  cardCells,
   isHighlighting: true,
 };
 

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,49 +1,52 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+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 { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { VNode } from '../../model/VNode';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
-const VISIBLE_ROWS_COUNT = 1;
+const VISIBLE_CELLS_COUNT = 1;
 
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
-  ({ className = '', title, icon, isHighlighting, button, rows = [], ...rest }) => {
-    const rowsNode = rows.map(renderCardInfo);
-    const visibleRows = rowsNode.slice(0, VISIBLE_ROWS_COUNT);
-    const hiddenRows = rowsNode.slice(VISIBLE_ROWS_COUNT);
+  ({ className = '', title, icon, isHighlighting, button, cardCells = [], ...rest }) => {
+    const cellsNode = cardCells.map(renderCardInfo);
+    const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
+    const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
 
     return (
       <BlockWrapper
-        className={`font-sans relative bg-white border border-gray min-w-[322px] p-8
+        className={`font-sans relative bg-white border border-gray min-w-[322px] p-8 flex flex-col
         ${getHitStyle(isHighlighting)}
         ${className}`}
         {...rest}
       >
         {isHighlighting ? renderHitIcon() : null}
-        {icon?.src ? <Img image={icon} /> : null}
+        {renderIconBlock(icon)}
         {title ? (
           <Heading className="text-primary-text text-center pt-2" headingType="h5" title={title} />
         ) : null}
         {button ? <Button className="w-full mt-4" {...button} /> : null}
-        {rows.length ? (
+        {cardCells.length ? (
           <Foldable
             renderFoldableSection={({ isUnfolded }) => (
               <div>
-                {visibleRows}
-                <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
+                {visibleCells}
+                <FoldableSection isUnfolded={isUnfolded}>{hiddenCells}</FoldableSection>
               </div>
             )}
-            renderFoldButton={rows.length > 1 ? renderFoldButton : null}
+            renderFoldButton={cardCells.length > 1 ? renderFoldButton : null}
           />
         ) : null}
       </BlockWrapper>
@@ -51,8 +54,15 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
   },
 );
 
+const renderIconBlock = (icon?: Picture) => (
+  <div className="w-[267px] min-w-[267px] self-center">
+    {icon?.src ? <Img image={icon} /> : null}
+    {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+  </div>
+);
+
 const getHitStyle = (isHighlighting?: boolean): string =>
-  isHighlighting ? 'mt-9 pt-[70px]' : 'mt-[70px] pt-9';
+  isHighlighting ? 'mt-9 pt-[70px]' : 'mt-[70px] pt-7';
 
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
   <button
@@ -82,8 +92,10 @@ const renderCardInfo = (cell: HeadlineCommonProps, i: number): VNode => (
 );
 
 const renderHitIcon = (): VNode => (
-  <div className="absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
+  <div className="absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
     <Icon iconVersion="black" name="HeartIcon" width="23" height="22" asSVG />
-    <div className="text-center">Хит</div>
+    <Paragraph size="text-s" font="font-normal" align="text-center" color="text-primary-text">
+      ХИТ
+    </Paragraph>
   </div>
 );

package/src/components/CarouselTariffsCard/CarouselTariffsCardContent.ts

@@ -12,5 +12,5 @@ export type CarouselTariffsCardContent = TitleProps & {
   /** @title Кнопка */
   button?: ButtonProps;
   /** @title Ячейка */
-  rows?: HeadlineCommonProps[];
+  cardCells?: HeadlineCommonProps[];
 };

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -43,5 +43,9 @@ export type LinkDocsContent = HeadlineCommonProps & {
   orientation?: ListOrientation; // TODO: мобильный проп
   /** @title Рамка элементов (моб.) */ // TODO: мобильный проп
   hasBorder?: boolean;
+  /**
+   * @title Выравнивание
+   * @default text-center
+   */
   align?: TextAlign;
 };

package/src/components/SwipeListControlBlock/SwipeListControlBlock.example.json

@@ -0,0 +1,18 @@
+{
+  "content": {
+    "listType": "vertical-list"
+  },
+  "style": ["col-span-12", "h-96"],
+  "type": "SwipeListControlBlock",
+  "blocks": [
+    {
+      "type": "Headline",
+      "content": {
+        "title": "Заголовок блока",
+        "description": "Описание блока",
+        "headlineVersion": "M"
+      },
+      "style": ["col-span-12"]
+    }
+  ]
+}

package/src/components/SwipeListControlBlock/SwipeListControlBlock.fixture.tsx

@@ -0,0 +1,27 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { Blocks } from '../Blocks';
+import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
+import { SwipeListControlBlock } from './SwipeListControlBlock';
+
+const options = {
+  blocksRegistry: Blocks,
+} as BlockRendererOptions;
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <SwipeListControlBlock
+        className="col-span-12 h-96"
+        block={{
+          type: 'SwipeListControlBlock',
+          blocks: [
+            { type: 'ProductTile', content: PRODUCT_TILE },
+            { type: 'ProductTile', content: PRODUCT_TILE },
+          ],
+        }}
+        listType="vertical-list"
+        options={options}
+      />
+    </div>
+  ),
+};

package/src/components/SwipeListControlBlock/SwipeListControlBlock.tsx

@@ -0,0 +1,23 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import type { SwipeListControlBlockContent } from './SwipeListControlBlockContent';
+
+interface SwipeListControlBlockProps extends SwipeListControlBlockContent, UniBlockProps {}
+
+export const SwipeListControlBlock: JSXBlock<SwipeListControlBlockProps> =
+  JSX<SwipeListControlBlockProps>(({ gap, listType, padding, showDots, options, ...rest }) => {
+    return (
+      <BlockWrapper {...rest}>
+        <SwipeListControl gap={gap} listType={listType} padding={padding} showDots={showDots}>
+          {renderChildren({ ...rest, options })}
+        </SwipeListControl>
+      </BlockWrapper>
+    );
+  });
+
+SwipeListControlBlock.childrenTypes = {
+  exclude: ['SwipeListControlBlock'],
+};

package/src/components/SwipeListControlBlock/SwipeListControlBlock.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/SwipeListControlBlock/SwipeListControlBlockContent.ts

@@ -0,0 +1,6 @@
+import type { SwipeListControlProps } from '../../ui-kit/SwipeListControl/SwipeListControlProps';
+
+/**
+ * @title Swipe-контроллер
+ */
+export type SwipeListControlBlockContent = SwipeListControlProps;