@redneckz/wildless-cms-uni-blocks 0.2.106 → 0.2.109

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -1,26 +1,107 @@
 import { context } from '../../setup-fixture';
 import { StepsBlock } from './StepsBlock';
+import { StepsBlock as StepsBlockMobile } from './StepsBlock.mobile';
 
-export default (
-  <div className="container grid grid-cols-12">
-    <StepsBlock
-      className="col-span-12"
+const steps = [
+  {
+    label: 'Заявка на кредит',
+    description: 'Оставьте онлайн-заявку на потребительский кредит',
+  },
+  {
+    label: 'В случае одобрения',
+    description: 'Менеджер свяжется с вами и согласует встречу',
+  },
+  {
+    label: 'Получение наличных',
+    description: 'Получите наличные в отделении банка',
+  },
+];
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <StepsBlock
+        className="col-span-12"
+        context={context}
+        title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+        steps={steps}
+      />
+    </div>
+  ),
+  mobile: (
+    <StepsBlockMobile
+      context={context}
+      title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+      description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
+      size="normal"
+      steps={steps}
+    />
+  ),
+  'mobile only desc': (
+    <StepsBlockMobile
+      context={context}
+      description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
+      size="normal"
+      steps={steps}
+    />
+  ),
+
+  'mobile small': (
+    <StepsBlockMobile
       context={context}
       title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+      size="small"
+      steps={steps}
+    />
+  ),
+
+  'mobile small multi-options': (
+    <StepsBlockMobile
+      context={context}
+      title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+      description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
+      size="small"
       steps={[
+        {
+          description: 'Оставьте онлайн-заявку на потребительский кредит',
+          icon: 'ClockIcon',
+        },
+        {
+          label: 'В случае одобрения',
+          icon: 'SignDocsIcon',
+        },
         {
           label: 'Заявка на кредит',
           description: 'Оставьте онлайн-заявку на потребительский кредит',
+          icon: 'ComfortableCompIcon',
+        },
+        {
+          label: 'Получение наличных',
+          icon: 'ClockIcon',
+        },
+      ]}
+    />
+  ),
+
+  'mobile small icons': (
+    <StepsBlockMobile
+      context={context}
+      title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+      size="small"
+      steps={[
+        {
+          label: 'Заявка на кредит',
+          icon: 'EmptyWalletIcon',
         },
         {
           label: 'В случае одобрения',
-          description: 'Менеджер свяжется с вами и согласует встречу',
+          icon: 'PercentageSquareIcon',
         },
         {
           label: 'Получение наличных',
-          description: 'Получите наличные в отделении банка',
+          icon: 'CalendarIcon',
         },
       ]}
     />
-  </div>
-);
+  ),
+};

package/src/components/StepsBlock/StepsBlock.mobile.tsx

@@ -0,0 +1,71 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Title } from '../../ui-kit/Title/Title';
+import type { Step, StepsBlockContent } from './StepsBlockContent';
+
+export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
+
+export const StepsBlock = JSX<StepsBlockProps>(
+  ({ className, title, description, showLines = true, steps, size = 'normal' }) => {
+    return (
+      <section
+        className={`box-border font-sans text-primary-text bg-white px-20 py-[50px] flex flex-col ${
+          className || ''
+        }`}
+      >
+        {title && (
+          <Title size="3XS" className="font-medium m-0 text-center">
+            {title}
+          </Title>
+        )}
+        {description && <p className={`text-md text-center ${title && 'mt-2'}`}>{description}</p>}
+        {steps?.length ? (
+          <div className={`box-border py-0.5 mb-0.5 mt-5`}>
+            <div className="flex flex-col justify-between gap-x-[101px]">
+              {steps.map((step, i, array) => renderStepTitle({ step, size }, i, array))}
+            </div>
+          </div>
+        ) : null}
+      </section>
+    );
+  },
+);
+
+const renderStepTitle = ({ step: step, size: size }, i: number, array: Step[]) => {
+  const isLastStep = array.length - 1 === i;
+  const iconAreaSize =
+    size === 'normal'
+      ? 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]'
+      : 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]';
+  const iconSize = size === 'normal' ? '38' : '27';
+  const margin = size === 'normal' ? 'ml-[34px]' : 'ml-[24px]';
+  return (
+    <div>
+      <div key={String(i)} className="flex flex-row text-center relative">
+        <div
+          className={`${iconAreaSize} bg-secondary-light rounded-full z-10 mr-3 flex justify-center content-center`}
+        >
+          <span className="font-medium text-title-xs text-secondary-text self-center">
+            {(step.icon && <Icon name={step.icon} width={iconSize} height={iconSize} />) || i + 1}
+          </span>
+        </div>
+        <div className="flex flex-col justify-center relative">
+          {step.label && (
+            <div className="font-medium text-mobile-md m-0 text-left">{step.label}</div>
+          )}
+          {step.description && (
+            <div
+              className={`font-normal text-sm text-secondary-text text-left ${
+                step.label ? 'mt-1' : ''
+              }`}
+            >
+              {step.description}
+            </div>
+          )}
+        </div>
+      </div>
+      {!isLastStep && <div className={`h-8 w-[2px] bg-secondary-light ${margin}`} />}
+    </div>
+  );
+};

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,5 +1,7 @@
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 
+import type { SizeVersion } from '../../model/SizeVersion';
+
 /**
  * @title Шаг
  */
@@ -17,6 +19,7 @@ export interface Step {
 export interface StepsBlockContent {
   /** @title Заголовок */
   title?: string;
+  description?: string; // TODO: mobile content
   /** @title Линии */
   showLines?: boolean;
   /**
@@ -25,4 +28,5 @@ export interface StepsBlockContent {
    * @maxItems 3
    */
   steps?: Step[];
+  size?: SizeVersion; // TODO: mobile content
 }

package/src/components/TariffsTable/TariffsTable.example.json

@@ -46,14 +46,17 @@
                 "icon": "AppleIcon",
                 "rounded": true,
                 "version": "secondary",
-                "href": "/_blank",
-                "target": "_blank"
+                "href": "/",
+                "target": "_blank",
+                "text": ""
               },
               {
                 "icon": "PlayMarketIcon",
                 "rounded": true,
                 "version": "secondary",
-                "href": "/secondary"
+                "href": "/",
+                "target": "_blank",
+                "text": ""
               }
             ]
           }
@@ -61,23 +64,16 @@
         [
           {
             "image": {
-              "src": "payment-systems.png",
               "format": "webp",
               "size": {
                 "width": 288,
                 "height": 56
-              },
-              "alt": "Описание картинки",
-              "title": "Подсказка"
+              }
             }
           },
           {
             "list": {
-              "items": [
-                "item 1",
-                "item 2",
-                "item 3"
-              ]
+              "items": ["item 1", "item 2", "item 3"]
             }
           }
         ]

package/src/components/TariffsTable/TariffsTable.fixture.tsx

@@ -1,6 +1,6 @@
+import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { TariffsTable } from './TariffsTable';
-import type { Picture } from '../../model/Picture';
 import type { TariffsTableColumn, TariffsTableRowHeader } from './TariffsTableContent';
 
 const image: Picture = {
@@ -48,14 +48,15 @@ const columns: TariffsTableColumn[] = [
               icon: 'AppleIcon',
               rounded: true,
               version: 'secondary',
-              href: '/_blank',
+              href: '/',
               target: '_blank',
             },
             {
               icon: 'PlayMarketIcon',
               rounded: true,
               version: 'secondary',
-              href: '/secondary',
+              href: '/',
+              target: '_blank',
             },
           ],
         },
@@ -105,7 +106,6 @@ const columns: TariffsTableColumn[] = [
         { label: '69 рублей в месяц' },
         {
           list: {
-            version: 'primary',
             items: ['item 1', 'item 2', 'item 3'],
           },
         },

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -1,10 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { DIVIDER_CLASSES } from './constants';
 import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
-import { Img } from '../../ui-kit/Img';
 import { Button } from '../../ui-kit/Button/Button';
-import type { TariffsTableCellData } from './TariffsTableContent';
 import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img';
+import type { TariffsTableCellData } from './TariffsTableContent';
 
 export interface TariffsTableCellProps {
   cell: TariffsTableCellData[];

package/src/components/Tile/Tile.tsx

@@ -15,11 +15,11 @@ const tileStyleMap: Record<BlockVersion, string> = {
 };
 
 export const Tile = JSX<TileProps>((props) => {
-  const { children, className, version = 'primary', role } = props;
+  const { children, className = '', version = 'primary', role } = props;
 
   return (
     <section
-      className={`font-sans p-9 box-border ${className || ''} ${
+      className={`font-sans p-9 box-border ${className} ${
         tileStyleMap[version]
       } ${getContainerPaddingRight(className)} ${getContainerMinHeight(className)} `}
       role={role}

package/src/model/SizeVersion.ts

@@ -0,0 +1,8 @@
+/**
+ * @title Размер
+ * @enumNames [
+ *    "Обычный",
+ *    "Уменьшенный"
+ * ]
+ */
+export type SizeVersion = 'normal' | 'small';

package/src/ui-kit/BlockItem/BlockItem.tsx

@@ -1,25 +1,36 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
 import { BlockItemProps, BlockItemVersion } from './BlockItemProps';
 
-const listStyleMap: Record<BlockItemVersion, string> = {
-  primary: 'bg-secondary-text w-[6px] h-[6px] min-w-[6px] min-h-[6px] mt-2.5 rounded-full',
-  secondary: 'bg-white w-[6px] h-[6px] min-w-[6px] min-h-[6px] mt-2.5 rounded-full',
+const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
+
+const TEXT_STYLE_MAP: Record<BlockItemVersion, string> = {
+  primary: 'text-primary-text',
+  secondary: 'text-secondary-text',
 };
 
-const textStyleMap: Record<BlockItemVersion, string> = {
-  primary: 'text-secondary-text',
-  secondary: '',
+const LIST_STYLE_MAP: Record<BlockItemVersion, string> = {
+  primary: 'bg-primary-main',
+  secondary: 'bg-secondary-text',
 };
 
 export const BlockItem = JSX<BlockItemProps>(
-  ({ className, isDotted = true, text, children, version = 'primary' }) => {
+  ({ className = '', isDotted = true, text, children, version = 'primary', white }) => {
     return (
-      <div className={`inline-block flex ${className || ''}`} role="listitem">
-        {isDotted && <div className={`inline-block mr-3 ${listStyleMap[version]}`} />}
-        <span className={`text-base font-normal font-sans mr-3 ${textStyleMap[version]}`}>
-          {text || children}
-        </span>
+      <div className={`font-sans inline-block flex ${className}`} role="listitem">
+        {isDotted && <div className={getListStyle(version, white)} />}
+        <span className={white ? 'text-white' : TEXT_STYLE_MAP[version]}>{text || children}</span>
       </div>
     );
   },
 );
+
+const getListStyle = (version: BlockVersion, white?: boolean) => {
+  const color = white ? 'bg-white' : LIST_STYLE_MAP[version];
+  const size =
+    version === 'primary'
+      ? 'w-[8px] h-[8px] min-w-[8px] min-h-[8px] mt-2'
+      : 'w-[6px] h-[6px] min-w-[6px] min-h-[6px] mt-2.5';
+
+  return `${LIST_STYLE_CLASSES} ${color} ${size}`;
+};

package/src/ui-kit/BlockItem/BlockItemProps.ts

@@ -17,6 +17,7 @@ export interface BlockItemContent {
 export interface BlockItemProps extends BlockItemContent {
   className?: string;
   version?: BlockItemVersion;
+  white?: boolean;
   /** @title Маркер */
   isDotted?: boolean;
 }

package/src/ui-kit/Button/Button.tsx

@@ -85,7 +85,7 @@ export const ButtonInner = JSX<ButtonInner>(({ text, aboveText, appendLeft, roun
       {appendLeft ? appendLeft : null}
       {!withoutText ? (
         <div>
-          <div className="text-xxs text-left">{aboveText}</div>
+          <div className="text-2xs text-left">{aboveText}</div>
           <div className="text-sm font-medium text-left">{text}</div>
         </div>
       ) : null}

package/src/ui-kit/Icon/IconProps.ts

@@ -61,8 +61,8 @@ export enum IconMap {
   'UserTickIcon',
   'VisaIcon',
   'VKIcon',
-  'WalletAdd',
-  'WalletAdd2',
+  'WalletAddIcon',
+  'WalletAdd2Icon',
   'WalletIcon',
   'WalletWithMoneyIcon',
 }

package/src/ui-kit/Title/TitleProps.ts

@@ -3,6 +3,9 @@ export enum SizeTableClass {
   'L' = 'text-title',
   'M' = 'text-title-sm',
   'S' = 'text-title-xs',
+  'XS' = 'text-title-xs',
+  '2XS' = 'text-title-2xs',
+  '3XS' = 'text-title-3xs',
 }
 
 export type TitleSize = keyof typeof SizeTableClass;