@redneckz/wildless-cms-uni-blocks 0.3.94 → 0.3.96

package/mobile/src/components/Placeholder/Placeholder.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { PlaceholderContent } from '../../components/Placeholder/PlaceholderContent';
+import type { PlaceholderContent } from './PlaceholderContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Headline } from '../Headline/Headline';
 import type { UniBlockProps } from '../../types';
@@ -30,7 +30,7 @@ export const Placeholder = JSX<PlaceholderProps>(
           description={description}
           headlineVersion={getTileHeadingType(className)}
         />
-        <figure className="m-0 min-w-[600px]">{renderShimmer()}</figure>
+        <figure className="m-0 min-w-[80%]">{renderShimmer()}</figure>
       </BlockWrapper>
     );
   },

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -96,7 +96,7 @@ function renderBenefitDescription(benefit: TextBenefit, i: number, version = 'pr
   };
 
   return (
-    <div key={String(i)} className={`text-m ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
+    <div key={String(i)} className={`text-m-light ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
       {benefit.description}
     </div>
   );
@@ -108,5 +108,7 @@ function renderAdditionalDescription(additionalDescription: string, version = 'p
     secondary: 'text-white',
   };
 
-  return <div className={`text-m mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>;
+  return (
+    <div className={`text-m-light mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>
+  );
 }

package/mobile/src/components/PromoTile/PromoTile.tsx

@@ -59,7 +59,7 @@ export const PromoTile = JSX<PromoTileProps>(
           }
         >
           <div className="mt-1.5">
-            {date ? <div className="text-sm mb-2">{formatDate(date)}</div> : null}
+            {date ? <div className="text-s mb-2">{formatDate(date)}</div> : null}
             <div className="text-l">{description}</div>
           </div>
         </BaseTile>

package/mobile/src/components/Recommendation/RecommendationCard.tsx

@@ -16,7 +16,7 @@ export interface RecommendationCardProps extends RecommendationCardTypes, UniBlo
 export const RecommendationCard = JSX<RecommendationCardProps>(
   ({ context, className = '', title, description, items, image, version, socialMedia }) => {
     const tileTitle = title ? (
-      <Heading headingType="h5" as="h3" className="font-normal mb-3.5 z-10" title={title} />
+      <Heading headingType="h5" as="h3" className="mb-3.5 z-10" title={title} />
     ) : null;
     const tileImage = image?.src ? (
       <Img className="absolute bottom-0 right-0 m-0" image={image} />
@@ -36,7 +36,7 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
           {description ? <Description className="mb-2" description={description} /> : null}
           {items?.length ? (
             <List
-              className="text-md font-light flex flex-col flex-1 gap-2 max-w-[236px]"
+              className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
               items={items}
               version={version}
             />

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

@@ -0,0 +1,3 @@
+{
+  "title": "Аренда сейфовых ячеек"
+}

package/mobile/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useSafeDepositRental } from '../../hooks/useSafeDepositRental';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { SafeDepositRentalContent } from './SafeDepositRentalContent';
@@ -10,10 +9,71 @@ export interface SafeDepositRentalProps extends SafeDepositRentalContent, UniBlo
 
 const DEFAULT_DAYS = 26;
 
+const DATA = {
+  cities: [
+    {
+      city: 'Москва',
+      offices: [
+        {
+          office: 'МоскваОфис1',
+          rate: 1,
+        },
+        {
+          office: 'МоскваОфис2',
+          rate: 2,
+        },
+        {
+          office: 'МоскваОфис3',
+          rate: 3,
+        },
+      ],
+    },
+    {
+      city: 'Краснодар',
+      offices: [
+        {
+          office: 'КраснодарОфис1',
+          rate: 2,
+        },
+        {
+          office: 'КраснодарОфис2',
+          rate: 4,
+        },
+        {
+          office: 'КраснодарОфис3',
+          rate: 6,
+        },
+      ],
+    },
+  ],
+  cellDimensions: [
+    {
+      dimension: 'маленькая',
+    },
+    {
+      dimension: 'средняя',
+    },
+    {
+      dimension: 'большая',
+    },
+  ],
+  cellOptions: [
+    {
+      option: '125x225x375',
+    },
+    {
+      option: '200x300x400',
+    },
+    {
+      option: '300x400x500',
+    },
+  ],
+};
+
 export const SafeDepositRental = JSX<SafeDepositRentalProps>(
   ({ context, className = '', ...rest }) => {
     const [days, setDays] = context.useState(DEFAULT_DAYS);
-    const data = useSafeDepositRental(context.useAsyncData);
+    const data = DATA;
 
     return (
       <BlockWrapper context={context} className={`bg-white px-8 py-12 ${className}`} {...rest}>
@@ -23,7 +83,7 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
           ) : null}
           <SafeDepositRentalTotal days={days} />
         </div>
-        <p className="text-button font-light text-secondary-text">
+        <p className="text-s-light text-secondary-text">
           Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег
           или процедуры ипотечной сделки
         </p>

package/mobile/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -22,7 +22,7 @@ export const SafeDepositRentalForm = ({
       {cellDimensions.length && cellOptions.length
         ? renderDimensionsOptions(cellDimensions, cellOptions, context)
         : null}
-      <span className="text-secondary-text font-light">Тип договора</span>
+      <span className="text-secondary-text text-l-light">Тип договора</span>
       <div className="flex justify-between items-center mt-5">
         {renderRadioButtons(context)}
         <Button text="Офисы на карте" version="primary" />
@@ -111,9 +111,9 @@ const renderSelect = (props: SelectProps) => {
 
   return (
     <div>
-      <span className="block font-light text-m mb-2">{label}</span>
+      <span className="block text-m-light mb-2">{label}</span>
       <Select
-        className="h-14 border border-gray p-4 rounded-md text-m-sm w-full cursor-pointer"
+        className="h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
         value={selected}
         onChange={(_) => setSelected(_)}
       >
@@ -132,7 +132,7 @@ export const renderRentalPeriod = (days, setDays) => {
 
   return (
     <div className="mb-6">
-      <span className="block font-light text-m mb-[3px]">Срок аренды</span>
+      <span className="block text-m-light mb-[3px]">Срок аренды</span>
       <InputRange min={1} max={365} value={days} items={items} onChange={setDays} />
     </div>
   );

package/mobile/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -19,7 +19,7 @@ export const SafeDepositRentalTotal = ({ days }: Days) => {
       <div className="bg-primary-main px-10 pt-10 pb-4 text-center">
         <Img image={{ icon: 'PackA4' }} width="290" height="257" asSVG />
 
-        <span className="font-light text-white opacity-80 mt-2 inline-block">
+        <span className="text-s-light text-white opacity-80 mt-2 inline-block">
           На рисунки изображена пачка<br></br> листов формата А4
         </span>
       </div>
@@ -30,7 +30,7 @@ export const SafeDepositRentalTotal = ({ days }: Days) => {
 const renderTotal = (label, total, className = '') => {
   return (
     <div className={className}>
-      <span className="block font-light text-m mb-1">{label}</span>
+      <span className="block text-m-light mb-1">{label}</span>
       <span className="text-h3">{total}</span>
     </div>
   );

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

@@ -2,9 +2,9 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { UniBlockProps } from '../../types';
+import type { Step, StepsBlockContent } from './StepsBlockContent';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import type { Step, StepsBlockContent } from './StepsBlockContent';
 import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
 import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
 
@@ -41,7 +41,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
           <Heading headingType="h3" className={`text-center ${styleMap.title}`} title={title} />
         ) : null}
         {description ? (
-          <p className={`text-m text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
+          <p className={`text-m-light text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
             {description}
           </p>
         ) : null}
@@ -68,7 +68,7 @@ const renderStepTitle =
       <div key={String(i)}>
         <div className="flex flex-row text-center relative">
           <div className="overflow-hidden">
-            {renderIconArea(size, version)}
+            {renderIconArea(size, version)(step, i)}
             {isLastStep ? null : (
               <div
                 className={`min-h-8 h-full w-[2px] ${
@@ -81,7 +81,7 @@ const renderStepTitle =
             className={`flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`}
           >
             {step.label ? (
-              <div className="font-medium text-m-title-xs m-0 text-left mb-1">{step.label}</div>
+              <div className="text-m-title-xs font-medium m-0 text-left mb-1">{step.label}</div>
             ) : null}
             {step.description ? (
               <div className={`text-s ${styleMap.description} text-left`}>{step.description}</div>

package/mobile/src/components/Tabs/renderTab.tsx

@@ -10,7 +10,7 @@ interface RenderTabProps {
 
 type OnTabClick = (tab: Tab) => void;
 
-const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2';
+const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs-light ml-2';
 
 export const renderTab =
   ({ onClick, currentTab, showCounter, page }: RenderTabProps) =>
@@ -18,7 +18,7 @@ export const renderTab =
     const isActive = currentTab === tab;
 
     const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
-    const tabText = `text-m ${
+    const tabText = `text-m-light ${
       isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main'
     }`;
     const counterBlockStyle = `${badgeStyle}

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

@@ -25,7 +25,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
         {title ? (
           <Heading headingType="h2" className={`text-center ${headingMargin}`} title={title} />
         ) : null}
-        {description ? <div className="mb-5 text-center text-m-md">{description}</div> : null}
+        {description ? <div className="mb-5 text-center text-m">{description}</div> : null}
         {tiles?.length ? renderOrientationTable(orientation, tiles, context) : null}
       </section>
     );

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

@@ -31,8 +31,8 @@ const renderCellInner = (
     {i > 0 && (
       <div className="border-main-divider border border-solid border-t-0 border-x-0 my-4" />
     )}
-    {label ? <div className="text-xl font-medium m-0">{label}</div> : null}
-    {description ? <div className="text-sm text-secondary-text">{description}</div> : null}
+    {label ? <div className="text-xl m-0">{label}</div> : null}
+    {description ? <div className="text-s text-secondary-text">{description}</div> : null}
     {list?.items?.length ? renderList(list) : null}
     {image ? <Img image={image} /> : null}
     {buttons?.length ? renderButtons(buttons) : null}
@@ -41,7 +41,7 @@ const renderCellInner = (
 
 const renderList = (list: TariffsTableList) => (
   <List
-    className="flex flex-col justify-between items-start text-sm"
+    className="flex flex-col justify-between items-start text-s"
     version="gray"
     items={list.items}
     isDotted={list.isDotted ?? true}

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

@@ -18,7 +18,7 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
     return (
       <TableRowContainer>
         <div
-          className={`text-sm py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${
+          className={`text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${
             !isLastRow ? 'border-solid' : ''
           }`}
         >

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

@@ -28,10 +28,8 @@ const renderCellInner = (
     {i > 0 && (
       <div className="border-main-divider border border-solid border-t-0 border-x-0 my-2" />
     )}
-    {label ? <div className="text-m-sm m-0">{label}</div> : null}
-    {description ? (
-      <div className="text-m-sm text-secondary-text mt-[3px]">{description}</div>
-    ) : null}
+    {label ? <div className="text-s m-0">{label}</div> : null}
+    {description ? <div className="text-s text-secondary-text mt-[3px]">{description}</div> : null}
     {list?.items?.length ? renderList(list) : null}
     {image ? <Img image={{ ...image, className: 'm-0' }} /> : null}
     {buttons?.length ? renderButtons(buttons) : null}
@@ -40,7 +38,7 @@ const renderCellInner = (
 
 const renderList = (list: TariffsTableList) => (
   <List
-    className="flex flex-col justify-between items-start text-m-sm"
+    className="flex flex-col justify-between items-start text-s"
     version="gray"
     items={list.items}
     isDotted={list.isDotted ?? true}

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

@@ -50,14 +50,14 @@ export const TextBlock = JSX<TextBlockProps>(
         {iconVersion === 'big' ? renderImage(image) : null}
         <div className="py-0.5">
           {title ? (
-            <div className={`font-medium text-base mb-1 ${textBlockStyleMap.title}`}>{title}</div>
+            <div className={`text-l font-medium mb-1 ${textBlockStyleMap.title}`}>{title}</div>
           ) : null}
           {description ? (
-            <div className={`text-sm ${textBlockStyleMap.description}`}>{description}</div>
+            <div className={`text-s ${textBlockStyleMap.description}`}>{description}</div>
           ) : null}
           {items?.length ? (
             <List
-              className="mt-1 text-m-md"
+              className="mt-1 text-m"
               items={items}
               isDotted={isDotted}
               version={listBlockVersion}
@@ -72,7 +72,7 @@ export const TextBlock = JSX<TextBlockProps>(
 function renderIcon(className: string) {
   return (
     <div className="mb-3">
-      <div className={`rounded-full h-4 w-4 text-center text-xs ${className}`}>i</div>
+      <div className={`rounded-full h-4 w-4 text-center text-xs-light ${className}`}>i</div>
     </div>
   );
 }

package/mobile/src/components/Tile/Tile.tsx

@@ -83,11 +83,6 @@ function renderList(items, version, isDotted: boolean) {
   const listVersion = version === 'primary' ? 'tile' : 'tile-white';
 
   return items?.length ? (
-    <List
-      items={items}
-      isDotted={isDotted}
-      itemClassName="text-h6 font-light mt-2"
-      version={listVersion}
-    />
+    <List items={items} isDotted={isDotted} itemClassName="text-h6 mt-2" version={listVersion} />
   ) : null;
 }