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

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,38 @@ 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, HEADLINE_BLOCK_STYLE_MAPS } 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',
+  }) => {
+    const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
     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 ${STYLE_MAPS.background} ${className}`}>
+        {title && (
+          <Heading
+            headingType="h2"
+            className={`${STYLE_MAPS.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 ${STYLE_MAPS.description} ${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,25 @@ 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, HEADLINE_BLOCK_STYLE_MAPS } 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 }) => {
+    const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
     return (
-      <section className={`p-[50px] ${bgColor} ${className}`}>
+      <section className={`p-[50px] ${STYLE_MAPS.background} ${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,32 @@
+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',
+};
+
+type StyleType = {
+  background: string;
+  text: string;
+  description: string;
+};
+
+export const HEADLINE_BLOCK_STYLE_MAPS: Record<BlockVersionWithTransparent, StyleType> = {
+  transparent: {
+    background: 'bg-transparent',
+    text: 'text-primary-text',
+    description: 'text-primary-text',
+  },
+  primary: {
+    background: 'bg-white',
+    text: 'text-primary-text',
+    description: 'text-primary-text',
+  },
+  secondary: {
+    background: 'bg-primary-main',
+    text: 'text-white',
+    description: 'text-white/80',
+  },
+};

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>
+  );
+};

package/src/components/Recommendation/RecommendationCard.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../types';
+import { Description } from '../../ui-kit/Description/Description';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { List } from '../../ui-kit/List/List';
+import { BaseTile } from '../BaseTile/BaseTile';
+import type { RecommendationCardContent } from './RecommendationContent';
+
+export interface RecommendationCardProps extends RecommendationCardContent, UniBlockProps {
+  version?: BlockVersion;
+}
+
+export const RecommendationCard = JSX<RecommendationCardProps>(
+  ({ context, className = '', title, description, items, image, version }) => {
+    return (
+      <section
+        className={`border border-solid box-border rounded-md p-7 min-w-[515px] max-w-[515px] ${className}`}
+        role="listitem"
+      >
+        <BaseTile
+          context={context}
+          title={title && <Heading headingType="h4" title={title} className="mb-4" />}
+          image={image?.src && <Img className="mt-auto ml-7" image={image} />}
+        >
+          {description ? <Description description={description} /> : null}
+          {items?.length ? <List items={items} version={version} /> : null}
+        </BaseTile>
+      </section>
+    );
+  },
+);

package/src/components/Recommendation/RecommendationContent.ts

@@ -0,0 +1,19 @@
+import type { BlockVersion } 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';
+import type { ListContent } from '../../ui-kit/List/ListContent';
+
+export type RecommendationCardContent = HeadingContent &
+  DescriptionContent &
+  ListContent &
+  ImageContent;
+
+/**
+ * @title Рекомендации
+ */
+export interface RecommendationContent extends HeadingContent {
+  /** @title Карточки */
+  recommendations?: RecommendationCardContent[];
+  version?: BlockVersion;
+}