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

package/src/components/ProductTile/ProductTile.fixture.tsx

@@ -1,7 +1,7 @@
 import { context } from '../../setup-fixture';
 
-import { ProductTile } from './ProductTile';
 import type { Picture } from '../../model/Picture';
+import { ProductTile } from './ProductTile';
 
 const cardWithMoney: Picture = {
   src: 'card-with-diamond.png',
@@ -31,16 +31,16 @@ export default {
         description="Потребительский кредит на любые цели, без залога и поручительства"
         benefits={[
           {
-            label: 'Кредитный лимит',
-            description: 'до 5 млн Р',
+            label: 'до 5 млн Р',
+            description: 'Кредитный лимит',
           },
           {
-            label: 'Процентная ставка',
-            description: 'от 12,5%',
+            label: 'от 12,5%',
+            description: 'Процентная ставка',
           },
           {
-            label: 'Срок кредитования',
-            description: 'до 5 лет',
+            label: 'до 5 лет',
+            description: 'Срок кредитования',
           },
         ]}
         buttons={[
@@ -63,16 +63,16 @@ export default {
         description={'Потребительский кредит на любые цели, без залога и поручительства'}
         benefits={[
           {
-            label: 'Кредитный лимит',
-            description: 'до 3 млн Р',
+            label: 'до 3 млн Р',
+            description: 'Кредитный лимит',
           },
           {
-            label: 'Процентная ставка',
-            description: 'от 12,5%',
+            label: 'от 12,5%',
+            description: 'Процентная ставка',
           },
           {
-            label: 'Срок кредитования',
-            description: 'до 3 лет',
+            label: 'до 3 лет',
+            description: 'Срок кредитования',
           },
         ]}
         buttons={[
@@ -96,16 +96,16 @@ export default {
         description={'Без переоформления залогой недвижимости на банк'}
         benefits={[
           {
-            label: 'Кредитный лимит',
-            description: 'до 10 млн Р',
+            label: 'до 10 млн Р',
+            description: 'Кредитный лимит',
           },
           {
-            label: 'Процентная ставка',
-            description: 'от 21,5%',
+            label: 'от 21,5%',
+            description: 'Процентная ставка',
           },
           {
-            label: 'Срок кредитования',
-            description: 'до 10 лет',
+            label: 'до 10 лет',
+            description: 'Срок кредитования',
           },
         ]}
         buttons={[
@@ -129,16 +129,16 @@ export default {
         description={'Для людей в возрасте до 75 лет'}
         benefits={[
           {
-            label: 'Кредитный лимит',
-            description: 'до 3 млн Р',
+            label: 'до 3 млн Р',
+            description: 'Кредитный лимит',
           },
           {
-            label: 'Процентная ставка',
-            description: 'от 16,8%',
+            label: 'от 16,8%',
+            description: 'Процентная ставка',
           },
           {
-            label: 'Срок кредитования',
-            description: 'до 5 лет',
+            label: 'до 5 лет',
+            description: 'Срок кредитования',
           },
         ]}
         buttons={[

package/src/components/ProductTile/ProductTile.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { ProductTileContent } from './ProductTileContent';
-import { Tile } from '../Tile/Tile';
 import type { UniBlockProps } from '../../types';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import { Tile } from '../Tile/Tile';
+import type { ProductTileContent } from './ProductTileContent';
 
 export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 
@@ -12,31 +12,32 @@ export const ProductTile = JSX<ProductTileProps>((props) => {
   return (
     <Tile {...props}>
       <div className="flex mt-5 mb-1">
+        {benefits?.length ? <div className="mr-8">{benefits.map(renderBenefitLabel)}</div> : null}
         {benefits?.length ? (
-          <div className="mr-8">{benefits.map(renderBenefitDescription)}</div>
-        ) : null}
-        {benefits?.length ? (
-          <div className="pt-1">{benefits.map((_, i) => renderBenefitLabel(_, i, version))}</div>
+          <div className="pt-1">
+            {benefits.map((_, i) => renderBenefitDescription(_, i, version))}
+          </div>
         ) : null}
       </div>
     </Tile>
   );
 });
 
-function renderBenefitLabel(benefit: Benefit, i: number, version = 'primary') {
-  const labelStyleMap: Record<BlockVersion, string> = {
-    primary: 'text-secondary-text',
-    secondary: 'text-white',
-  };
+function renderBenefitLabel(benefit: Benefit, i: number) {
   return (
-    <div key={String(i)} className={`text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
+    <div key={String(i)} className={`text-xl font-medium ${i ? 'mt-2.5' : ''}`}>
       {benefit.label}
     </div>
   );
 }
-function renderBenefitDescription(benefit: Benefit, i: number) {
+
+function renderBenefitDescription(benefit: Benefit, i: number, version = 'primary') {
+  const labelStyleMap: Record<BlockVersion, string> = {
+    primary: 'text-secondary-text',
+    secondary: 'text-white',
+  };
   return (
-    <div key={String(i)} className={`text-xl font-medium ${i ? 'mt-2.5' : ''}`}>
+    <div key={String(i)} className={`text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
       {benefit.description}
     </div>
   );

package/src/components/ProductTile/ProductTileContent.ts

@@ -5,6 +5,9 @@ import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
  * @title Продуктовая плитка
  */
 export interface ProductTileContent extends Omit<BaseTileCommonProps, 'align'> {
-  /** @title Преимущества */
+  /**
+   * @title Преимущества
+   * @maxItems 7
+   */
   benefits?: Omit<Benefit, 'icon'>[];
 }

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,6 +1,5 @@
 import { context } from '../../setup-fixture';
 import { StepsBlock } from './StepsBlock';
-import { StepsBlock as StepsBlockMobile } from './StepsBlock.mobile';
 
 const steps = [
   {
@@ -28,80 +27,4 @@ export default {
       />
     </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: 'В случае одобрения',
-          icon: 'PercentageSquareIcon',
-        },
-        {
-          label: 'Получение наличных',
-          icon: 'CalendarIcon',
-        },
-      ]}
-    />
-  ),
 };

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

@@ -7,7 +7,7 @@ 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' }) => {
+  ({ 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 ${
@@ -15,11 +15,11 @@ export const StepsBlock = JSX<StepsBlockProps>(
         }`}
       >
         {title && (
-          <Title size="3XS" className="font-medium m-0 text-center">
+          <Title size="M" className="font-medium m-0 text-center">
             {title}
           </Title>
         )}
-        {description && <p className={`text-md text-center ${title && 'mt-2'}`}>{description}</p>}
+        {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]">
@@ -32,7 +32,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
   },
 );
 
-const renderStepTitle = ({ step: step, size: size }, i: number, array: Step[]) => {
+const renderStepTitle = ({ step, size }, i: number, array: Step[]) => {
   const isLastStep = array.length - 1 === i;
   const iconAreaSize =
     size === 'normal'
@@ -40,19 +40,20 @@ const renderStepTitle = ({ step: step, size: size }, i: number, array: Step[]) =
       : '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-title-xs text-secondary-text self-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-mobile-md m-0 text-left">{step.label}</div>
+            <div className="font-medium text-m-title-xs m-0 text-left">{step.label}</div>
           )}
           {step.description && (
             <div

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/ui-kit/BlockItem/BlockItem.tsx

@@ -17,7 +17,7 @@ const LIST_STYLE_MAP: Record<BlockItemVersion, string> = {
 export const BlockItem = JSX<BlockItemProps>(
   ({ className = '', isDotted = true, text, children, version = 'primary', white }) => {
     return (
-      <div className={`font-sans inline-block flex ${className}`} role="listitem">
+      <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>

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,14 +1,4 @@
-export enum SizeTableClass {
-  'XL' = 'text-title-lg',
-  '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;
+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"}