@redneckz/wildless-cms-uni-blocks 0.2.107 → 0.2.111

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

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

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

@@ -1,26 +1,30 @@
 import { context } from '../../setup-fixture';
 import { StepsBlock } from './StepsBlock';
 
-export default (
-  <div className="container grid grid-cols-12">
-    <StepsBlock
-      className="col-span-12"
-      context={context}
-      title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-      steps={[
-        {
-          label: 'Заявка на кредит',
-          description: 'Оставьте онлайн-заявку на потребительский кредит',
-        },
-        {
-          label: 'В случае одобрения',
-          description: 'Менеджер свяжется с вами и согласует встречу',
-        },
-        {
-          label: 'Получение наличных',
-          description: 'Получите наличные в отделении банка',
-        },
-      ]}
-    />
-  </div>
-);
+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>
+  ),
+};

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

@@ -0,0 +1,72 @@
+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, 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="M" className="font-medium m-0 text-center">
+            {title}
+          </Title>
+        )}
+        {description && <p className={`text-m-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, 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]';
+  const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
+  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-secondary-text self-center ${iconTextSize}`}>
+            {(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-m-title-xs 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.fixture.tsx

@@ -106,7 +106,6 @@ const columns: TariffsTableColumn[] = [
         { label: '69 рублей в месяц' },
         {
           list: {
-            version: 'primary',
             items: ['item 1', 'item 2', 'item 3'],
           },
         },

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -39,7 +39,7 @@ const renderCellInner = (
             <BlockItem
               key={String(idx)}
               text={text}
-              version={list.version ?? 'primary'}
+              version={list.version ?? 'secondary'}
               isDotted={list.isDotted ?? true}
             />
           ))}

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/index.ts

@@ -17,7 +17,6 @@ export type {
 export { ContentPageHead } from './components/ContentPage/ContentPageHead';
 export { toMobilePage } from './components/ContentPage/toMobilePage';
 export { Header } from './components/Header/Header';
-export { MobileBlocks } from './components/MobileBlocks';
 export type { Img, ImgSource, Picture } from './model/Picture';
 export { projectSettings } from './ProjectSettings';
 export type { ProjectSettings } from './ProjectSettings';

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 items-baseline ${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/Img.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ImgSource, Picture } from '../model/Picture';
 
-export interface TextWithImageProps {
+export interface ImageProps {
   className?: string;
   image: Picture;
 }
 
-export const Img = JSX<TextWithImageProps>(({ className, image: { size, ...image } }) => {
+export const Img = JSX<ImageProps>(({ className, image: { size, ...image } }) => {
   const style = {
     width: size?.width ? `${size?.width}px` : '100%',
     height: size?.height ? `${size?.height}px` : '100%',

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

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { TitleSize, TitleProps } from './TitleProps';
+
+export const SizeTableClass: Record<TitleSize, string> = {
+  XL: 'text-m-title',
+  L: 'text-m-title',
+  M: 'text-m-title-md',
+  S: 'text-m-title-xs',
+  '2XS': 'text-m-title-xs',
+  '3XS': 'text-m-title-xs',
+};
+
+export const Title = JSX<TitleProps>(({ size = 'L', className, children, ...rest }) => {
+  const Tag = size === 'XL' || size === 'L' ? 'h1' : 'h2';
+  return (
+    <Tag className={getClasses(SizeTableClass[size], className)} {...rest}>
+      {children}
+    </Tag>
+  );
+});
+
+const getClasses = (...classes: (string | undefined)[]) => classes.filter(Boolean).join(' ');

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

@@ -1,5 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { SizeTableClass, TitleProps } from './TitleProps';
+import { TitleSize, TitleProps } from './TitleProps';
+
+export const SizeTableClass: Record<TitleSize, string> = {
+  XL: 'text-title-lg',
+  L: 'text-title',
+  M: 'text-title-sm',
+  S: 'text-title-xs',
+  '2XS': 'text-title-2xs',
+  '3XS': 'text-title-2xs',
+};
 
 export const Title = JSX<TitleProps>(({ size = 'L', className, children, ...rest }) => {
   const Tag = size === 'XL' ? 'h1' : 'h2';

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

@@ -1,11 +1,4 @@
-export enum SizeTableClass {
-  'XL' = 'text-title-lg',
-  'L' = 'text-title',
-  'M' = 'text-title-sm',
-  'S' = 'text-title-xs',
-}
-
-export type TitleSize = keyof typeof SizeTableClass;
+export type TitleSize = 'XL' | 'L' | 'M' | 'S' | '2XS' | '3XS';
 
 export interface TitleProps extends Partial<HTMLHeadingElement> {
   size?: TitleSize;

package/dist/components/MobileBlocks.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MobileBlocks.js","sourceRoot":"","sources":["../../src/components/MobileBlocks.ts"],"names":[],"mappings":";;AAAA,0EAAuE;AACvE,0DAAgD;AAChD,6DAAmD;AACnD,4CAAyC;AACzC,kDAA+C;AAC/C,iEAA8D;AAC9D,wDAAqD;AACrD,2DAAwD;AACxD,2DAAwD;AACxD,4EAAkE;AAClE,2DAAwD;AACxD,qDAAkD;AAClD,sCAAmC;AAEtB,QAAA,YAAY,GAAG;IAC1B,gBAAgB,EAAhB,mCAAgB;IAChB,MAAM,EAAN,sBAAM;IACN,OAAO,EAAP,wBAAO;IACP,MAAM,EAAN,eAAM;IACN,QAAQ,EAAR,mBAAQ;IACR,aAAa,EAAb,6BAAa;IACb,WAAW,EAAX,yBAAW;IACX,WAAW,EAAX,yBAAW;IACX,YAAY,EAAZ,kCAAY;IACZ,WAAW,EAAX,yBAAW;IACX,SAAS,EAAT,qBAAS;IACT,IAAI,EAAJ,WAAI;IACJ,UAAU,EAAV,uBAAU;CACX,CAAC"}

package/lib/components/MobileBlocks.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MobileBlocks.js","sourceRoot":"","sources":["../../src/components/MobileBlocks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,gBAAgB;IAChB,MAAM;IACN,OAAO;IACP,MAAM;IACN,QAAQ;IACR,aAAa;IACb,WAAW;IACX,WAAW;IACX,YAAY;IACZ,WAAW;IACX,SAAS;IACT,IAAI;IACJ,UAAU;CACX,CAAC"}