@redneckz/wildless-cms-uni-blocks 0.3.13 → 0.3.14

package/mobile/src/model/BlockVersion.ts

@@ -1,5 +1,11 @@
 /**
- * @title Цвет плитки
+ * @title Цвет блока
  * @enumNames ["Основная", "Второстепенная"]
  */
 export type BlockVersion = 'primary' | 'secondary';
+
+/**
+ * @title Цвет блока
+ * @enumNames ["Прозрачная", Основная", "Второстепенная"]
+ */
+export type BlockVersionWithTransparent = 'transparent' | 'primary' | 'secondary';

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

@@ -8,5 +8,5 @@ export interface DescriptionProps extends DescriptionContent {
 export const Description = JSX<DescriptionProps>((props) => {
   const { className = '', description } = props;
 
-  return <div className={`font-normal text-m-md ${className}`}>{description}</div>;
+  return <div className={`font-normal text-base ${className}`}>{description}</div>;
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Blocks.ts

@@ -17,6 +17,7 @@ import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
+import { Recommendation } from './Recommendation/Recommendation';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
@@ -40,6 +41,7 @@ export const Blocks = {
   ProductGallery,
   ProductTile,
   PromoTile,
+  Recommendation,
   StepsBlock,
   TariffsTable,
   TextBlock,

package/src/components/ContentPage/ContentPage.page.json

@@ -1882,6 +1882,80 @@
       "type": "CreditCalculator",
       "style": ["col-span-12"]
     },
+    {
+      "type": "Recommendation",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "С этим продуктом приобретают",
+        "recommendations": [
+          {
+            "title": "Кредиты",
+            "items": ["до 10 000 000 ₽", "до 10 лет"],
+            "image": {
+              "src": "chair.png",
+              "alt": "Варианты потребительского кредита",
+              "format": "webp",
+              "size": {
+                "width": 180,
+                "height": 180
+              }
+            }
+          },
+          {
+            "title": "Кредитные карты",
+            "description": "Льготный период 120 дней",
+            "image": {
+              "src": "credit-card-1.png",
+              "alt": "Варианты потребительского кредита",
+              "format": "webp",
+              "size": {
+                "width": 180,
+                "height": 180
+              }
+            }
+          },
+          {
+            "title": "Кредитные карты",
+            "description": "Льготный период 120 дней",
+            "image": {
+              "src": "credit-card-1.png",
+              "alt": "Варианты потребительского кредита",
+              "format": "webp",
+              "size": {
+                "width": 180,
+                "height": 180
+              }
+            }
+          },
+          {
+            "title": "Кредитные карты",
+            "description": "Льготный период 120 дней",
+            "image": {
+              "src": "credit-card-1.png",
+              "alt": "Варианты потребительского кредита",
+              "format": "webp",
+              "size": {
+                "width": 180,
+                "height": 180
+              }
+            }
+          },
+          {
+            "title": "Кредитные карты",
+            "description": "Льготный период 120 дней",
+            "image": {
+              "src": "credit-card-1.png",
+              "alt": "Варианты потребительского кредита",
+              "format": "webp",
+              "size": {
+                "width": 180,
+                "height": 180
+              }
+            }
+          }
+        ]
+      }
+    },
     {
       "type": "Footer",
       "style": ["col-span-12"],

package/src/components/ContentPage/ContentPageHead.tsx

@@ -28,7 +28,7 @@ export const ContentPageHead = JSX<ContentPageHeadProps>(({ HeadComponent, data,
 function renderOpenGraph(og: Record<string, string> | undefined) {
   return og
     ? Object.entries(og).map(([key, value]) => (
-        <meta key={key} name={`og:${key}`} content={value} />
+        <meta key={key} property={`og:${key}`} content={value} />
       ))
     : null;
 }

package/src/components/Headline/Headline.example.json

@@ -2,5 +2,5 @@
   "title": "Заголовок",
   "description": "Описание",
   "align": "center",
-  "bgColor": "transparent"
+  "bgColorHeadline": "transparent"
 }

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

@@ -8,7 +8,7 @@ export const HEADLINE: HeadlineContent = {
   title: 'Своя кредитная карта',
   description: 'Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах.',
   align: 'center',
-  bgColor: 'transparent',
+  bgColorHeadline: 'transparent',
 };
 
 const image: Picture = {
@@ -20,47 +20,71 @@ const image: Picture = {
   },
 };
 
+const defaultProps: HeadlineContent = {
+  title: 'Копите в нескольких валютах',
+  description:
+    'Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада',
+  image: image,
+};
+
+const primaryProps: HeadlineContent = {
+  ...defaultProps,
+  bgColorHeadline: 'primary',
+};
+
+const secondaryProps: HeadlineContent = {
+  ...defaultProps,
+  bgColorHeadline: 'secondary',
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Headline
-        className="col-span-12"
-        context={context}
-        title="Копите в нескольких валютах"
-        description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
-        image={image}
-      />
+      <Headline className="col-span-12" context={context} {...defaultProps} align="left" />
+      <Headline className="col-span-12" context={context} {...defaultProps} align="center" />
+      <Headline className="col-span-12" context={context} {...defaultProps} align="right" />
     </div>
   ),
-  'title-img': (
+
+  primary: (
     <div className="container grid grid-cols-12">
+      <Headline className="col-span-12" context={context} {...primaryProps} align="left" />
+      <Headline className="col-span-12" context={context} {...primaryProps} align="center" />
+      <Headline className="col-span-12" context={context} {...primaryProps} align="right" />
       <Headline
         className="col-span-12"
         context={context}
         title="Копите в нескольких валютах"
         image={image}
+        bgColorHeadline="primary"
       />
-    </div>
-  ),
-  'desc-img': (
-    <div className="container grid grid-cols-12">
       <Headline
         className="col-span-12"
         context={context}
         description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
         image={image}
+        bgColorHeadline="primary"
       />
     </div>
   ),
-  white: (
+  secondary: (
     <div className="container grid grid-cols-12">
+      <Headline className="col-span-12" context={context} {...secondaryProps} align="left" />
+      <Headline className="col-span-12" context={context} {...secondaryProps} align="center" />
+      <Headline className="col-span-12" context={context} {...secondaryProps} align="right" />
       <Headline
         className="col-span-12"
         context={context}
         title="Копите в нескольких валютах"
+        image={image}
+        bgColorHeadline="secondary"
+      />
+      <Headline
+        className="col-span-12"
+        context={context}
         description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
-        bgColor="bg-white"
         image={image}
+        bgColorHeadline="secondary"
       />
     </div>
   ),

package/src/components/Headline/Headline.fixture.tsx

@@ -7,35 +7,38 @@ export const HEADLINE: HeadlineContent = {
   title: 'Своя кредитная карта',
   description: 'Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах.',
   align: 'center',
-  bgColor: 'transparent',
+};
+
+export const HEADLINE_PRIMARY: HeadlineContent = {
+  ...HEADLINE,
+  bgColorHeadline: 'primary',
+};
+
+export const HEADLINE_SECONDARY: HeadlineContent = {
+  ...HEADLINE,
+  bgColorHeadline: 'secondary',
 };
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...HEADLINE} />
+      <Headline className="col-span-12" context={context} {...HEADLINE} align="left" />
+      <Headline className="col-span-12" context={context} {...HEADLINE} align="right" />
     </div>
   ),
-  'left white': (
+  primary: (
     <div className="container grid grid-cols-12">
-      <Headline
-        className="col-span-12"
-        context={context}
-        {...HEADLINE}
-        align="left"
-        bgColor="bg-white"
-      />
+      <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} />
+      <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} align="left" />
+      <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} align="right" />
     </div>
   ),
-  'right transparent': (
+  secondary: (
     <div className="container grid grid-cols-12">
-      <Headline
-        className="col-span-12"
-        context={context}
-        {...HEADLINE}
-        align="right"
-        bgColor="transparent"
-      />
+      <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} />
+      <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} align="left" />
+      <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} align="right" />
     </div>
   ),
 };

package/src/components/Headline/Headline.mobile.tsx

@@ -3,17 +3,33 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { ALIGN_TEXT, BACKGROUND_COLOR } from './constants';
 import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
 export const Headline = JSX<HeadlineProps>(
-  ({ bgColor = 'transparent', className = '', title, description, image }) => {
+  ({
+    bgColorHeadline = 'transparent',
+    className = '',
+    title,
+    description,
+    image,
+    align = 'left',
+  }) => {
     return (
-      <section className={`px-4 py-6 ${bgColor} ${className}`}>
-        {title && <Heading headingType="h2" className="text-primary-text" title={title} />}
+      <section className={`px-4 py-6 ${BACKGROUND_COLOR[bgColorHeadline]} ${className}`}>
+        {title && (
+          <Heading
+            headingType="h2"
+            className={`text-primary-text ${ALIGN_TEXT[align]}`}
+            title={title}
+          />
+        )}
         {description && (
-          <p className={`font-normal text-m-md ${title ? 'mt-2.5' : ''}`}>{description}</p>
+          <p className={`font-normal text-m-md ${ALIGN_TEXT[align]} ${title ? 'mt-2.5' : ''}`}>
+            {description}
+          </p>
         )}
         {image?.src && (
           <div className="mt-5 mx-auto flex justify-center">

package/src/components/Headline/Headline.tsx

@@ -2,27 +2,24 @@ import { JSX } from '@redneckz/uni-jsx';
 
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { AlignType } from '../BaseTile/BaseTileProps';
+import { ALIGN_TEXT, BACKGROUND_COLOR } from './constants';
 import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
-const alignText: Record<AlignType, string> = {
-  left: 'text-left',
-  center: 'text-center',
-  right: 'text-right',
-};
-
 export const Headline = JSX<HeadlineProps>(
-  ({ bgColor = 'transparent', align = 'left', className = '', title, description }) => {
-    const textClasses = alignText[align];
+  ({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description }) => {
     return (
-      <section className={`p-[50px] ${bgColor} ${className}`}>
+      <section className={`p-[50px] ${BACKGROUND_COLOR[bgColorHeadline]} ${className}`}>
         {title && (
-          <Heading headingType="h2" className={`text-primary-text ${textClasses}`} title={title} />
+          <Heading
+            headingType="h2"
+            className={`text-primary-text ${ALIGN_TEXT[align]}`}
+            title={title}
+          />
         )}
         {description && (
-          <p className={`font-normal text-base mt-4 ${textClasses}`}>{description}</p>
+          <p className={`font-normal text-base mt-4 ${ALIGN_TEXT[align]}`}>{description}</p>
         )}
       </section>
     );

package/src/components/Headline/HeadlineContent.ts

@@ -1,4 +1,4 @@
-import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
@@ -11,6 +11,5 @@ export type HeadlineContent = HeadingContent &
   DescriptionContent &
   ImageContent & {
     align?: AlignType;
-    // TODO: image for mobile
-    bgColor?: BgColorVersion;
+    bgColorHeadline?: BlockVersionWithTransparent;
   };

package/src/components/Headline/constants.ts

@@ -0,0 +1,14 @@
+import type { AlignType } from '../BaseTile/BaseTileProps';
+import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
+
+export const ALIGN_TEXT: Record<AlignType, string> = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+};
+
+export const BACKGROUND_COLOR: Record<BlockVersionWithTransparent, string> = {
+  transparent: 'bg-transparent',
+  primary: 'bg-white',
+  secondary: 'bg-primary-main',
+};

package/src/components/ProductBlock/ProductBlockInner.mobile.tsx

@@ -48,7 +48,9 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
               ) : null
             }
           >
-            {description ? <Description className="mt-3" description={description} /> : null}
+            {description ? (
+              <Description className="mt-3 text-m-md" description={description} />
+            ) : null}
             {benefits?.filter((items) => items.label)?.length ? (
               <div className="mt-3">{benefits.map((_, i) => renderBenefit(_, i, version))}</div>
             ) : null}

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -45,7 +45,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             }
           >
             {description && (
-              <Description className="text-m-base mt-4 max-w-[600px]" description={description} />
+              <Description className="mt-4 max-w-[600px]" description={description} />
             )}
             {benefits?.filter((items) => items.label)?.length ? (
               <div className="flex gap-6 mt-6">

package/src/components/Recommendation/Recommendation.example.json

@@ -0,0 +1,38 @@
+{
+  "title": "Блок рекомендаций",
+  "recommendations": [
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 180,
+          "height": 180
+        }
+      },
+      "title": "Заголовок 1",
+      "description": "Описание 1"
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 180,
+          "height": 180
+        }
+      },
+      "title": "Заголовок 2",
+      "description": "Описание 2"
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 180,
+          "height": 180
+        }
+      },
+      "title": "Заголовок 3",
+      "description": "Описание 3"
+    }
+  ]
+}

package/src/components/Recommendation/Recommendation.fixture.tsx

@@ -0,0 +1,73 @@
+import type { Picture } from '../../model/Picture';
+import { context } from '../../setup-fixture';
+import { Recommendation, RecommendationProps } from './Recommendation';
+
+const creditCard: Picture = {
+  src: 'credit-card-1.png',
+  format: 'webp',
+  size: {
+    width: 180,
+    height: 180,
+  },
+  title: 'credit-card-1',
+};
+
+const chair: Picture = {
+  src: 'chair.png',
+  format: 'webp',
+  size: {
+    width: 180,
+    height: 180,
+  },
+  title: 'chair',
+};
+
+export const defaultProps: RecommendationProps = {
+  context,
+  title: 'С этим продуктом приобретают',
+  recommendations: [
+    {
+      title: 'Кредиты',
+      items: ['до 10 000 000 ₽', 'до 10 лет'],
+      image: chair,
+    },
+    {
+      title: 'Кредитные карты',
+      description: 'Льготный период 120 дней',
+      image: creditCard,
+    },
+    {
+      title: 'Кредитные карты',
+      description: 'Льготный период 120 дней',
+      image: creditCard,
+    },
+    {
+      title: 'Кредитные карты',
+      description: 'Льготный период 120 дней',
+      image: creditCard,
+    },
+    {
+      title: 'Кредитные карты',
+      description: 'Льготный период 120 дней',
+      image: creditCard,
+    },
+  ],
+};
+
+export default {
+  default: (
+    <div>
+      <div className="container grid grid-cols-12" data-theme="pc">
+        <Recommendation className="col-span-12 mb-1" version="secondary" {...defaultProps} />
+      </div>
+
+      <div className="container grid grid-cols-12" data-theme="bc">
+        <Recommendation className="col-span-12 mb-1" version="secondary" {...defaultProps} />
+      </div>
+
+      <div className="container grid grid-cols-12 mb-1">
+        <Recommendation className="col-span-12" {...defaultProps} />
+      </div>
+    </div>
+  ),
+};

package/src/components/Recommendation/Recommendation.tsx

@@ -0,0 +1,105 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { RecommendationCard } from './RecommendationCard';
+import type { RecommendationCardContent, RecommendationContent } from './RecommendationContent';
+
+const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
+const CARD_FULL_VIEW_COUNT = 2;
+const CARD_SHIFT = 525;
+
+export interface RecommendationProps extends RecommendationContent, UniBlockProps {}
+
+export const Recommendation = JSX<RecommendationProps>(
+  ({ context, recommendations = [], className = '', title, version }) => {
+    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+
+    const blockClassName =
+      version === 'secondary' ? 'bg-primary-main text-white' : 'bg-white text-primary-text';
+    const cardClassName = version === 'secondary' ? 'border-main-divider' : 'border-main-stroke';
+
+    return (
+      <section
+        className={`relative font-sans p-[50px] overflow-hidden ${blockClassName} ${className}`}
+      >
+        {title ? <Heading headingType="h3" className="mb-8" title={title} /> : null}
+        <div
+          className="flex duration-1000 gap-4"
+          style={{ transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }}
+          role="list"
+        >
+          {recommendations?.length
+            ? recommendations.map(
+                renderRecommendationCard({ context, version, className: cardClassName }),
+              )
+            : null}
+        </div>
+        {renderNavButtons({
+          cardsCount: recommendations.length,
+          activeCardIndex,
+          setActiveCardIndex,
+        })}
+        <div
+          className={`${BLUR_BLOCK_CLASSES} left-0 ${
+            version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'
+          }`}
+        />
+        <div
+          className={`${BLUR_BLOCK_CLASSES} right-0 ${
+            version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'
+          }`}
+        />
+      </section>
+    );
+  },
+);
+
+const renderRecommendationCard =
+  ({ context, version, className }) =>
+  (card: RecommendationCardContent, i: number) => {
+    return (
+      <RecommendationCard
+        key={String(i)}
+        context={context}
+        {...card}
+        version={version}
+        className={className}
+      />
+    );
+  };
+
+const renderNavButtons = ({
+  cardsCount,
+  activeCardIndex,
+  setActiveCardIndex,
+}: {
+  cardsCount: number;
+  activeCardIndex: number;
+  setActiveCardIndex: (number) => void;
+}) => {
+  const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+  const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+  const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
+  const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
+  const showPrevButton = isUseSlider && activeCardIndex > 0;
+
+  return (
+    <div>
+      {showPrevButton && (
+        <ArrowButton
+          className="absolute top-1/2 left-8 rotate-180 z-10 mt-6"
+          onClick={handlePrevClick}
+          ariaLabel="Пролистать влево"
+        />
+      )}
+      {showNextButton && (
+        <ArrowButton
+          className="absolute top-1/2 right-8 z-10 mt-6"
+          onClick={handleNextClick}
+          ariaLabel="Пролистать вправо"
+        />
+      )}
+    </div>
+  );
+};