@redneckz/wildless-cms-uni-blocks 0.3.74 → 0.3.76

package/src/components/ProductTile/ProductTile.tsx

@@ -5,7 +5,6 @@ import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { ProductTileContent, TextBenefit } from './ProductTileContent';
@@ -33,39 +32,36 @@ export const ProductTile = JSX<ProductTileProps>(
   }) => {
     return (
       <section
-        className={`bg-white overflow-hidden text-primary-text font-sans p-9 box-border ${className} ${
+        className={`bg-white overflow-hidden text-primary-text font-sans p-9 box-border min-h-[364px] relative justify-between grid ${className} ${
           productTileStyleMap[version]
         } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
         id={anchor}
       >
-        <BaseTile
-          context={context}
-          title={
-            title ? (
-              <Heading
-                headingType={headingType}
-                as="h3"
-                title={title}
-                className={`whitespace-pre-wrap max-w-[600px]`}
-              />
-            ) : null
-          }
-          buttons={
-            buttons?.length ? (
-              <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
-            ) : null
-          }
-          image={image?.src && <Img className="mt-auto ml-7" image={image} />}
-        >
+        <div className="z-[1]">
+          {title ? (
+            <Heading
+              headingType={headingType}
+              as="h3"
+              title={title}
+              className={`whitespace-pre-wrap text-h4`}
+            />
+          ) : null}
           {description ? (
-            <Description className="mt-4 max-w-[600px]" description={description} />
+            <Description className="mt-2 text-md font-light" description={description} />
           ) : null}
           {renderBenefits(benefits || [], version)}
-
           {additionalDescription
             ? renderAdditionalDescription(additionalDescription, version)
             : null}
-        </BaseTile>
+        </div>
+        {buttons?.length ? (
+          <ButtonSection
+            context={context}
+            buttons={buttons}
+            className="flex self-end mt-5 gap-4 z-[1]"
+          />
+        ) : null}
+        {image?.src ? <Img className="absolute right-0 bottom-0" image={image} /> : null}
       </section>
     );
   },
@@ -73,10 +69,12 @@ export const ProductTile = JSX<ProductTileProps>(
 
 function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
   return (
-    <div className="flex mt-5 mb-1">
-      {benefits.length ? <div className="mr-8">{benefits.map(renderBenefitLabel)}</div> : null}
+    <div className="flex mt-4">
       {benefits.length ? (
-        <div className="pt-1">
+        <div className="mr-6 gap-2.5 text-title-2xs">{benefits.map(renderBenefitLabel)}</div>
+      ) : null}
+      {benefits.length ? (
+        <div className="pt-1 text-m">
           {benefits.map((_, i) => renderBenefitDescription(_, i, version))}
         </div>
       ) : null}
@@ -86,7 +84,7 @@ function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
 
 function renderBenefitLabel(benefit: TextBenefit, i: number) {
   return (
-    <div key={String(i)} className={`text-xl font-medium ${i ? 'mt-2.5' : ''}`}>
+    <div key={String(i)} className={`${i ? 'mt-2.5' : ''}`}>
       {benefit.label}
     </div>
   );
@@ -97,8 +95,9 @@ function renderBenefitDescription(benefit: TextBenefit, i: number, version = 'pr
     primary: 'text-secondary-text',
     secondary: 'text-white',
   };
+
   return (
-    <div key={String(i)} className={`text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
+    <div key={String(i)} className={`${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
       {benefit.description}
     </div>
   );
@@ -109,5 +108,6 @@ function renderAdditionalDescription(additionalDescription: string, version = 'p
     primary: 'text-secondary-text',
     secondary: 'text-white',
   };
-  return <div className={`text-sm mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>;
+
+  return <div className={`text-m mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>;
 }

package/src/components/PromoTile/PromoTile.tsx

@@ -68,5 +68,6 @@ function formatDate(date: string) {
     month: 'long',
     year: 'numeric',
   };
+
   return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
 }

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

@@ -5,17 +5,10 @@ import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
+import { getStyleMap } from './StepsBlockStyleMaps';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
-type StyleType = {
-  background: string;
-  title: string;
-  description: string;
-  iconBackground: string;
-  iconConnector: string;
-};
-
 const STEPS_SIZE_MAP: Record<SizeVersion, string> = {
   normal: 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]',
   small: 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]',
@@ -26,47 +19,35 @@ const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
   small: 'min-h-[50px]',
 };
 
-const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
-  primary: {
-    background: 'bg-white',
-    title: 'text-primary-text',
-    description: 'text-secondary-text',
-    iconBackground: 'bg-secondary-light',
-    iconConnector: 'bg-secondary-light',
-  },
-  secondary: {
-    background: 'bg-primary-main',
-    title: 'text-white',
-    description: 'text-white/80',
-    iconBackground: 'bg-white/30',
-    iconConnector: 'bg-white',
-  },
-};
-
-const styleMaps = (version: BlockVersion): StyleType => STEPS_BLOCK_STYLE_MAPS[version];
-
 export const StepsBlock = JSX<StepsBlockProps>(
-  ({ className, title, description, steps, size = 'normal', version = 'primary' }) => {
-    const style = styleMaps(version);
+  ({
+    className,
+    title,
+    description,
+    showLines = true,
+    steps,
+    size = 'normal',
+    version = 'primary',
+  }) => {
+    const styleMap = getStyleMap(version);
+
     return (
       <section
         className={`box-border font-sans bg-white px-4 py-6 flex flex-col
-        ${style.background} ${style.title} ${className || ''}`}
+        ${styleMap.background} ${styleMap.title} ${className || ''}`}
       >
         {title ? (
-          <Heading headingType="h3" className={`text-center ${style.title}`} title={title} />
+          <Heading headingType="h3" className={`text-center ${styleMap.title}`} title={title} />
         ) : null}
         {description ? (
-          <p className={`text-m-md text-center ${style.description} ${title && 'mt-2'}`}>
+          <p className={`text-m-md text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
             {description}
           </p>
         ) : null}
         {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) =>
-                renderStepTitle({ step, size, i, length: steps.length, version: version }),
-              )}
+              {steps.map(renderStepTitle(size, version, showLines))}
             </div>
           </div>
         ) : null}
@@ -75,53 +56,49 @@ export const StepsBlock = JSX<StepsBlockProps>(
   },
 );
 
-interface RenderStepTitleParams {
-  step: Step;
-  size: SizeVersion;
-  i: number;
-  length: number;
-  version: BlockVersion;
-}
+const renderStepTitle =
+  (size: SizeVersion, version: BlockVersion, showLines: boolean) =>
+  (step: Step, i: number, steps: Step[]) => {
+    const isLastStep = steps.length - 1 === i;
+    const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
+    const styleMap = getStyleMap(version);
 
-const renderStepTitle = (params: RenderStepTitleParams) => {
-  const { step, size, i, length, version } = params;
-  const isLastStep = length - 1 === i;
-  const margin = size === 'normal' ? 'ml-[34px]' : 'ml-[24px]';
-  const style = styleMaps(version);
-
-  return (
-    <div key={String(i)}>
-      <div key={String(i)} className="flex flex-row text-center relative">
-        <div className="overflow-hidden">
-          {renderIconArea(params)}
-          {isLastStep ? null : (
-            <div className={`min-h-8 h-full w-[2px] ${style.iconConnector} ${margin}`} />
-          )}
-        </div>
-        <div
-          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">{step.label}</div>
-          ) : null}
-          {step.description ? (
-            <div
-              className={`font-normal text-sm ${style.description} text-left ${
-                step.label ? 'mt-1' : ''
-              }`}
-            >
-              {step.description}
-            </div>
-          ) : null}
+    return (
+      <div key={String(i)}>
+        <div className="flex flex-row text-center relative">
+          <div className="overflow-hidden">
+            {renderIconArea(size, version)}
+            {isLastStep ? null : (
+              <div
+                className={`min-h-8 h-full w-[2px] ${
+                  showLines ? styleMap.iconConnector : ''
+                } ${margin}`}
+              />
+            )}
+          </div>
+          <div
+            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">{step.label}</div>
+            ) : null}
+            {step.description ? (
+              <div
+                className={`font-normal text-sm ${styleMap.description} text-left ${
+                  step.label ? 'mt-1' : ''
+                }`}
+              >
+                {step.description}
+              </div>
+            ) : null}
+          </div>
         </div>
       </div>
-    </div>
-  );
-};
+    );
+  };
 
-const renderIconArea = (params: RenderStepTitleParams) => {
-  const { step, size, i, version } = params;
-  const style = styleMaps(version);
+const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step, i: number) => {
+  const styleMap = getStyleMap(version);
   const iconAreaSize = STEPS_SIZE_MAP[size];
 
   const iconSize = size === 'normal' ? '38' : '27';
@@ -129,11 +106,10 @@ const renderIconArea = (params: RenderStepTitleParams) => {
 
   return (
     <div
-      className={`${iconAreaSize} ${style.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
+      className={`${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
     >
-      <span className={`font-medium flex self-center ${style.title} ${iconTextSize}`}>
-        {(step.icon?.icon && <Img image={step.icon} width={iconSize} height={iconSize} asSVG />) ||
-          i + 1}
+      <span className={`font-medium flex self-center ${styleMap.title} ${iconTextSize}`}>
+        {(step.icon?.icon && <Img image={step.icon} width={iconSize} height={iconSize} />) || i + 1}
       </span>
     </div>
   );

package/src/components/StepsBlock/StepsBlock.tsx

@@ -5,11 +5,21 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { joinList } from '../../utils/joinList';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
+import { getStyleMap, StyleType } from './StepsBlockStyleMaps';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
 export const StepsBlock = JSX<StepsBlockProps>(
-  ({ className = '', title, showLines = true, steps = [], button, anchor = null }) => {
+  ({
+    className = '',
+    title,
+    showLines = true,
+    steps = [],
+    button,
+    anchor = null,
+    version = 'primary',
+  }) => {
+    const styleMap = getStyleMap(version);
     const shortGaps = steps.length > 3;
 
     return (
@@ -18,6 +28,8 @@ export const StepsBlock = JSX<StepsBlockProps>(
           'box-border font-sans text-primary-text bg-white',
           shortGaps ? 'px-20' : 'px-[70px]',
           'py-[50px] flex flex-col items-center',
+          styleMap.background,
+          styleMap.title,
           className,
         ].join(' ')}
         id={anchor}
@@ -30,10 +42,10 @@ export const StepsBlock = JSX<StepsBlockProps>(
                 <div
                   className={`h-0.5 w-full bg-secondary-light ${!showLines ? 'opacity-0' : ''}`}
                 />,
-              )(steps.map(renderStepIcon))}
+              )(steps.map(renderStepIcon(styleMap)))}
             </div>
             <div className={`flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`}>
-              {steps.map((step, i) => renderStepTitle(step, i, Boolean(button?.text)))}
+              {steps.map(renderStepTitle(styleMap, Boolean(button?.text)))}
             </div>
           </div>
         ) : null}
@@ -51,33 +63,37 @@ export const StepsBlock = JSX<StepsBlockProps>(
   },
 );
 
-const renderStepIcon = (step: Step, i: number) => {
+const renderStepIcon = (styleMap: StyleType) => (step: Step, i: number) => {
   return (
     <div key={String(i)} className="flex flex-col items-center text-center relative">
-      <div className="h-[100px] w-[100px] min-w-[100px] min-h-[100px] bg-secondary-light rounded-full p-[26px] box-border z-10">
+      <div
+        className={`h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 ${styleMap.iconBackground}`}
+      >
         {(step.icon?.icon && <Img image={step.icon} width="48" height="48" />) || (
-          <span className="font-normal text-title-sm text-secondary-text">{i + 1}</span>
+          <span className={`font-normal text-title-sm ${styleMap.title}`}>{i + 1}</span>
         )}
       </div>
     </div>
   );
 };
 
-const renderStepTitle = (step: Step, i: number, isMainButton: boolean) => {
+const renderStepTitle = (styleMap: StyleType, isMainButton: boolean) => (step: Step, i: number) => {
   return (
     <div
       key={String(i)}
       className="flex flex-col items-center justify-between text-center relative w-[276px] whitespace-pre-line overflow-hidden"
     >
       <div>
-        {step.label && <div className="font-normal text-xl m-0 mt-4">{step.label}</div>}
-        {step.description && (
+        {step.label ? <div className="font-normal text-xl m-0 mt-4">{step.label}</div> : null}
+        {step.description ? (
           <div
-            className={`font-light text-base text-secondary-text ${step.label ? 'mt-2' : 'mt-4'}`}
+            className={`font-light text-base ${styleMap.description} ${
+              step.label ? 'mt-2' : 'mt-4'
+            }`}
           >
             {step.description}
           </div>
-        )}
+        ) : null}
       </div>
       {step?.button?.text && !isMainButton ? (
         <Button

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,6 +1,6 @@
-import type { SizeVersion } from '../../model/SizeVersion';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
+import type { SizeVersion } from '../../model/SizeVersion';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
@@ -35,7 +35,10 @@ export interface StepsBlockContent {
    */
   steps?: Step[];
   button?: ButtonProps;
-  /** @title Размер шагов (моб.) */
+  /**
+   * @title Размер шагов (моб.)
+   * @default normal
+   */
   size?: SizeVersion; // TODO: mobile content
-  version?: BlockVersion; // TODO: mobile content
+  version?: BlockVersion;
 }

package/src/components/StepsBlock/StepsBlockStyleMaps.ts

@@ -0,0 +1,28 @@
+import { BlockVersion } from '../../model/BlockVersion';
+
+export type StyleType = {
+  background: string;
+  title: string;
+  description: string;
+  iconBackground: string;
+  iconConnector: string;
+};
+
+const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
+  primary: {
+    background: 'bg-white',
+    title: 'text-primary-text',
+    description: 'text-secondary-text',
+    iconBackground: 'bg-secondary-light',
+    iconConnector: 'bg-secondary-light',
+  },
+  secondary: {
+    background: 'bg-primary-main',
+    title: 'text-white',
+    description: 'text-white/80',
+    iconBackground: 'bg-white/30',
+    iconConnector: 'bg-white',
+  },
+};
+
+export const getStyleMap = (version: BlockVersion): StyleType => STEPS_BLOCK_STYLE_MAPS[version];

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

@@ -40,6 +40,7 @@ export const TextBlock = JSX<TextBlockProps>(
     isDotted = true,
   }) => {
     const textBlockStyleMap = textBlockStyleMaps[blockVersion];
+
     return (
       <section
         className={`font-sans px-4 py-[18px] flex flex-col ${textBlockStyleMap.background} ${className}`}

package/src/components/TextBlock/TextBlock.tsx

@@ -41,6 +41,7 @@ export const TextBlock = JSX<TextBlockProps>(
     anchor = null,
   }) => {
     const textBlockStyleMap = textBlockStyleMaps[blockVersion];
+
     return (
       <section
         className={`font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`}

package/src/content-page-repository/ContentPageRepository.ts

@@ -27,6 +27,7 @@ export function ContentPageRepository({
   async function getAllContentPagesMap(): Promise<Record<string, ContentPageDef>> {
     const pagePaths = await listAllContentPages();
     const pages = await Promise.all(pagePaths.map(readPage));
+
     return pagePaths.reduce(
       (result, path, i) => ({
         ...result,
@@ -42,11 +43,13 @@ export function ContentPageRepository({
 
   async function getSecondaryContentPages(customPageType?: string) {
     const pages = await getAllContentPages();
+
     return pages.filter(not(bySlug(INDEX_PAGE_SLUG))).filter(byCustomPageType(customPageType));
   }
 
   async function getContentPageBySlug(slug: string): Promise<ContentPageDef | undefined> {
     const pages = await getAllContentPages();
+
     return pages.find(bySlug(slug));
   }
 
@@ -55,6 +58,7 @@ export function ContentPageRepository({
   }
 
   const cache: Record<string, ContentPageDef> = {};
+
   async function readPage(filePath: string): Promise<ContentPageDef> {
     if (!(filePath in cache)) {
       cache[filePath] = await transformContentPage(filePath, {
@@ -62,6 +66,7 @@ export function ContentPageRepository({
         publicDir,
       });
     }
+
     return cache[filePath];
   }
 

package/src/content-page-repository/mapJSON.ts

@@ -14,6 +14,7 @@ export async function mapJSON<T>(
 
   if (Array.isArray(data)) {
     const values = data.map((_, i) => mapJSON(_, mapper, [String(i)].concat(keyParts)));
+
     return Promise.all(values) as any;
   } else if (typeof data === 'object' && (data as any).toString() === '[object Object]') {
     const subKeys = Object.keys(data as any);
@@ -21,7 +22,9 @@ export async function mapJSON<T>(
     const pairs = (await Promise.all(values)).map((_, i) => ({
       [subKeys[i]]: _,
     }));
+
     return Object.assign({}, ...pairs);
   }
+
   return mapper<T>(data, keyParts);
 }

package/src/content-page-repository/transformContentPage.ts

@@ -14,6 +14,7 @@ export async function transformContentPage(
   options: TransformationOptions,
 ): Promise<ContentPageDef> {
   const content = await readFile(pagePath, 'utf8');
+
   return mapJSON<ContentPageDef>(JSON.parse(content), async (value: any, [key]) => {
     const isMarkdown = typeof value === 'string' && key?.endsWith('__md');
     const isPicture = value && isLocalPath(value?.src);
@@ -22,6 +23,7 @@ export async function transformContentPage(
     } else if (isPicture) {
       return await transformPicture(pagePath, value as Picture, options);
     }
+
     return value;
   });
 }

package/src/content-page-repository/transformMarkdown.ts

@@ -8,5 +8,6 @@ export async function transformMarkdown(markdown: string | null | undefined): Pr
   }
 
   const result = await unified().use(remarkParse).use(remarkHtml).process(markdown);
+
   return result.toString('utf-8');
 }

package/src/content-page-repository/transformPicture.ts

@@ -17,6 +17,7 @@ export async function transformPicture(
   const [transformedPicture, ...transformedSources] = await Promise.all(
     [picture].concat(sources).map((_) => transformImg(pagePath, src, { ...options, ..._ })),
   );
+
   return {
     ...picture,
     src: transformedPicture,
@@ -70,6 +71,7 @@ function transformSrc(src: string, { format, size }: TransformationOptions & Img
   }
 
   const suffix = [size?.width, size?.height].filter(Boolean).join('-');
+
   return `${path.basename(src, path.extname(src))}${suffix ? `-${suffix}` : ''}.${
     String(format) || path.extname(src)
   }`;

package/src/hooks/useCreditCalculatorData.ts

@@ -5,11 +5,13 @@ export function useCreditCalculatorData(
   directoryName: string | undefined,
 ): any {
   const { data } = useAsyncData(creditCalculatorUrl(directoryName), fetchCreditCalculatorData);
+
   return data || {};
 }
 
 async function fetchCreditCalculatorData(url: string): Promise<any> {
   const response = await fetch(url);
+
   return await response.json();
 }
 

package/src/hooks/useExchangeRates.ts

@@ -11,6 +11,7 @@ export function useExchangeRates(useAsyncData: AsyncDataHook): ExchangeCurrencyI
   const { data } = useAsyncData(EXCHANGE_RATES_URL, fetchExchangeRates);
 
   const result = data?.hits?.hits?.map((_) => _._source) || [];
+
   return result.length ? getCurrencyListByRate(result) : result;
 }
 
@@ -23,6 +24,7 @@ async function fetchExchangeRates(): Promise<any | undefined> {
       },
       body: JSON.stringify(EXCHANGE_RATES_BODY),
     });
+
     return await response.json();
   } catch (err) {
     console.error(err);
@@ -79,6 +81,7 @@ const getCurrencyListByRate = (currencyRates: RatesData[]) =>
         sell: Number(_.rate_sell),
       });
     }
+
     return result;
   }, []);
 

package/src/hooks/useLink.ts

@@ -13,6 +13,7 @@ export function useLink(
   link: Partial<LinkProps & { className: string }>,
 ) {
   const href = adjustHref(link.href, router);
+
   return {
     ...link,
     href,

package/src/react/setup-fixture.ts

@@ -40,6 +40,7 @@ export const context: ContentPageContext = {
         setData(_);
       });
     }, [key, fetcher]);
+
     return { data };
   },
   useGeolocation: (defaultLocation) => {

package/src/services/sitemap/findActiveSubItem.ts

@@ -10,5 +10,6 @@ export const findActiveSubItem =
     const activeSubItem = possibleActiveSubItems?.length
       ? maxBy((_: T) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
       : null;
+
     return activeSubItem;
   };

package/src/services/sitemap/useSitemap.ts

@@ -4,11 +4,13 @@ import { projectSettings } from '../../ProjectSettings';
 
 export function useSitemap(useAsyncData: AsyncDataHook): HeaderContent {
   const { data } = useAsyncData(sitemapURL(), fetchSitemap);
+
   return data || {};
 }
 
 async function fetchSitemap(): Promise<HeaderContent> {
   const response = await fetch(sitemapURL());
+
   return await response.json();
 }