@redneckz/wildless-cms-uni-blocks 0.2.47 → 0.2.50

package/src/ProductGallery.tsx

@@ -29,16 +29,14 @@ export const ProductGallery = JSX<ProductGalleryProps>(
     return (
       <section className={`font-sans bg-white overflow-hidden w-100 ${className || ''}`}>
         <div
-          className={`flex transition duration-1000`}
+          className={`flex duration-1000`}
           style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
           role="list"
         >
           {galleryBlocks.map((_, i) => renderProductBlock(_, i, context))}
         </div>
 
-        <div
-          className={`border-0 border-t border-solid border-main-divider grid grid-cols-${galleryNav.length}`}
-        >
+        <div className={`border-t border-solid border-main-divider flex`}>
           {galleryNav.map((slide, i) =>
             renderNavButton({
               slide,
@@ -73,7 +71,7 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick, duration }) {
       type="button"
       key={String(i)}
       onClick={onClick}
-      className={`group relative overflow-hidden border-0 bg-inherit cursor-pointer text-left px-0 py-4`}
+      className={`group relative overflow-hidden border-0 bg-inherit cursor-pointer text-left px-0 py-4 grow basis-0`}
     >
       <div className="border-0 border-r border-solid border-main-divider px-6">
         <div className={`text-sm font-medium group-hover:text-primary-text ${btnTitleClassName}`}>

package/src/ProductTile.fixture.tsx

@@ -0,0 +1,147 @@
+import { context } from './setup-fixture';
+
+import { ProductTile } from './ProductTile';
+import { Picture } from './types';
+
+const cardWithMoney: Picture = {
+  src: 'card-with-diamond.png',
+  alt: 'Кредиты в РСХБ',
+  format: 'webp',
+};
+
+const letterWithMoney: Picture = {
+  src: 'letter-with-money.png',
+  alt: 'Пенсионный кредит в РСХБ',
+  format: 'webp',
+};
+
+const building: Picture = {
+  src: 'building.png',
+  alt: 'Кредит под залог недвижимости в РСХБ',
+  format: 'webp',
+};
+
+export default {
+  credit: (
+    <div className="grid grid-cols-12">
+      <ProductTile
+        context={context}
+        className="col-span-6"
+        title="Акция! “Кредит На все, что хочется!”"
+        description="Потребительский кредит на любые цели, без залога и поручительства"
+        benefits={[
+          {
+            label: 'Кредитный лимит',
+            description: 'до 5 млн Р',
+          },
+          {
+            label: 'Процентная ставка',
+            description: 'от 12,5%',
+          },
+          {
+            label: 'Срок кредитования',
+            description: 'до 5 лет',
+          },
+        ]}
+        button={{
+          text: 'Подробнее',
+          href: '/credit-cards',
+          version: 'secondary',
+        }}
+        image={cardWithMoney}
+      />
+    </div>
+  ),
+  pension: (
+    <div className="grid grid-cols-12">
+      <ProductTile
+        context={context}
+        className="col-span-6"
+        title="Акция! “Пенсионный кредит”"
+        description={'Потребительский кредит на любые цели, без залога и поручительства'}
+        benefits={[
+          {
+            label: 'Кредитный лимит',
+            description: 'до 3 млн Р',
+          },
+          {
+            label: 'Процентная ставка',
+            description: 'от 12,5%',
+          },
+          {
+            label: 'Срок кредитования',
+            description: 'до 3 лет',
+          },
+        ]}
+        button={{
+          href: 'https://rshb.ru',
+          text: 'Подробнее',
+          target: '_blank',
+          version: 'secondary',
+        }}
+        image={letterWithMoney}
+      />
+    </div>
+  ),
+  'credit-card': (
+    <div className="grid grid-cols-12">
+      <ProductTile
+        context={context}
+        className="col-span-8"
+        title="Кредит под залог недвижимости"
+        description={'Без переоформления залогой недвижимости на банк'}
+        benefits={[
+          {
+            label: 'Кредитный лимит',
+            description: 'до 10 млн Р',
+          },
+          {
+            label: 'Процентная ставка',
+            description: 'от 21,5%',
+          },
+          {
+            label: 'Срок кредитования',
+            description: 'до 10 лет',
+          },
+        ]}
+        button={{
+          href: 'https://rshb.ru',
+          text: 'Подробнее',
+          target: '_blank',
+          version: 'secondary',
+        }}
+        image={building}
+      />
+    </div>
+  ),
+  'pension-credit': (
+    <div className="grid grid-cols-12">
+      <ProductTile
+        context={context}
+        className="col-span-4"
+        title="Кредит пенсионный"
+        description={'Для людей в возрасте до 75 лет'}
+        benefits={[
+          {
+            label: 'Кредитный лимит',
+            description: 'до 3 млн Р',
+          },
+          {
+            label: 'Процентная ставка',
+            description: 'от 16,8%',
+          },
+          {
+            label: 'Срок кредитования',
+            description: 'до 5 лет',
+          },
+        ]}
+        button={{
+          href: 'https://rshb.ru',
+          text: 'Подробнее',
+          target: '_blank',
+          version: 'secondary',
+        }}
+      />
+    </div>
+  ),
+};

package/src/ProductTile.tsx

@@ -0,0 +1,95 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ContentPageContext } from './ContentPageContext';
+import { Img } from './Img';
+import { BlockVersion, Picture } from './types';
+import type { ButtonProps } from './ui-kit/Button';
+import { Button } from './ui-kit/Button';
+import { useLink } from './useLink';
+import type { Benefit } from './types';
+
+export interface ProductTileContent {
+  title?: string;
+  description?: string;
+  benefits?: Benefit[];
+  image?: Picture;
+  button?: ButtonProps;
+  version?: BlockVersion;
+}
+
+export interface ProductTileProps extends ProductTileContent {
+  className?: string;
+  context: ContentPageContext;
+}
+
+const productTileStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
+export const ProductTile = JSX<ProductTileProps>(
+  ({ className, context, title, description, button, image, benefits, version = 'primary' }) => {
+    const router = context.useRouter();
+    const { handlerDecorator } = context;
+    return (
+      <section className={`font-sans p-9 ${className || ''} ${productTileStyleMap[version]}`}>
+        <div className="flex flex-col w-full">
+          {title && (
+            <h3 className="font-medium text-title-sm m-0 whitespace-pre-wrap max-w-[600px]">
+              {title}
+            </h3>
+          )}
+          {description && (
+            <div className="font-normal text-base max-w-[600px] mt-4">{description}</div>
+          )}
+          <div className="flex mt-5">
+            <div className="grow flex flex-col">
+              <div className="flex">
+                {benefits?.length ? (
+                  <div className="mr-8">{benefits.map(renderBenefitDescription)}</div>
+                ) : null}
+                {benefits?.length ? (
+                  <div className="pt-1">
+                    {benefits.map((_, i) => renderBenefitLabel(_, i, version))}
+                  </div>
+                ) : null}
+              </div>
+              {button?.text && (
+                <div className="mt-auto">
+                  <Button
+                    className="mt-8"
+                    {...useLink({ router, handlerDecorator }, button)}
+                    version="secondary"
+                  />
+                </div>
+              )}
+            </div>
+            {image && (
+              <div className="mt-auto flex-none h-[220px] w-[220px]">
+                <Img image={image} />
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderBenefitLabel(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-sm mb-4 ${labelStyleMap[version]}`}>
+      {benefit.label}
+    </div>
+  );
+}
+function renderBenefitDescription(benefit: Benefit, i: number) {
+  return (
+    <div key={String(i)} className="text-xl font-medium mb-2.5">
+      {benefit.description}
+    </div>
+  );
+}

package/src/StepsBlock.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { NewDocIcon, PassSendIcon, ActualBalanceIcon } from './Icons/index';
 import type { UniBlockProps } from './types';
+import { joinList } from './utils/joinList';
 
 const ICONS = { NewDocIcon, PassSendIcon, ActualBalanceIcon };
 export interface Step {
@@ -24,22 +25,35 @@ export const StepsBlock = JSX<StepsBlockProps>(({ className, title, steps }) =>
       }`}
     >
       <h2 className="font-medium text-title m-0 max-w-[47rem] text-center">{title}</h2>
-      {steps?.length ? <div className="flex mt-9">{steps.map(renderStep)}</div> : null}
+      {steps?.length ? (
+        <div>
+          <div className="flex mt-9 items-center px-[88px]">
+            {joinList(<div className="h-0.5 w-full bg-secondary-light"></div>)(
+              steps.map((step, i) => renderStepIcon(step, i)),
+            )}
+          </div>
+          <div className="flex mt-9 justify-between gap-x-24">{steps.map(renderStepTitle)}</div>
+        </div>
+      ) : null}
     </section>
   );
 });
 
-const renderStep = (step: Step, i: number) => {
+const renderStepIcon = (step: Step, i: number) => {
   return (
-    <div
-      key={String(i)}
-      className="flex flex-col items-center text-center px-12 relative after:content-[''] last:after:content-none after:bg-secondary-light after:absolute after:top-[50px] after:h-0.5 after:w-full after:right-[-50%]"
-    >
+    <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">
         {(step.icon && ICONS[step.icon]?.({ width: 48, height: 48 })) || (
           <span className="font-medium text-title-sm text-secondary-text">{i + 1}</span>
         )}
       </div>
+    </div>
+  );
+};
+
+const renderStepTitle = (step: Step, i: number) => {
+  return (
+    <div key={String(i)} className="flex flex-col items-center text-center relative w-[276px]">
       <div className="max-w-min">
         <h5 className="font-medium text-xl m-0 mt-4 whitespace-nowrap px-3">{step.label}</h5>
         {step.description && (

package/src/index.ts

@@ -17,3 +17,4 @@ export { Blocks } from './Blocks';
 export { LikeAPI } from './api/LikeAPI';
 
 export * as url from './utils/url';
+export { joinList } from './utils/joinList';

package/src/types.ts

@@ -9,27 +9,12 @@ import type {
   TiffOptions,
   WebpOptions,
 } from 'sharp';
-import type { BenefitsBlockContent } from './BenefitsBlock';
+import type { BlockContent } from './Blocks';
 import type { ContentPageContext } from './ContentPageContext';
-import type { HeaderContent } from './Header/index';
-import type { PlaceholderContent } from './Placeholder';
-import type { ProductBlockInnerContent } from './ProductBlockInner';
-import type { ProductGalleryContent } from './ProductGallery';
-import type { StepsBlockContent } from './StepsBlock';
-import type { TileContent } from './Tile';
-
-export type BlockVersion = 'primary' | 'secondary';
 
 export type ColorPalette = 'pc' | 'bc' | 'eo';
 
-export type BlockContent =
-  | HeaderContent
-  | PlaceholderContent
-  | ProductBlockInnerContent
-  | TileContent
-  | StepsBlockContent
-  | BenefitsBlockContent
-  | ProductGalleryContent;
+export type BlockVersion = 'primary' | 'secondary';
 
 export interface BlockDef {
   type: string;

package/src/ui-kit/TopItem.tsx

@@ -14,7 +14,7 @@ export interface TopItemProps extends TopItemContent {
 
 export const TopItem = JSX<TopItemProps>(
   ({ className, text, href, target, active, flat, onClick, children, ariaLabel }) => {
-    const linkStyle = active ? 'border-primary-main rounded-3xl' : 'border-transparent';
+    const linkStyle = active ? 'border-primary-main rounded-md' : 'border-transparent';
     const textStyle = active
       ? 'text-primary-main'
       : `${flat ? 'text-primary-text' : 'text-secondary-text'} hover:text-primary-main`;

package/src/utils/joinList.ts

@@ -0,0 +1,7 @@
+export function joinList<E>(sep: E): (list: E[]) => E[] {
+  return (list) =>
+    list.reduce(
+      (acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]),
+      [] as E[],
+    );
+}