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

package/mobile/src/components/Headline/Headline.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/mobile/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/mobile/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/mobile/src/components/ProductBlock/ProductBlockInner.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/mobile/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/mobile/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/mobile/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/mobile/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;
+}

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

@@ -1,26 +1,62 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { SizeVersion } from '../../model/SizeVersion';
-import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
+import type { SizeVersion } from '../../model/SizeVersion';
+import type { UniBlockProps } from '../../types';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
+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',
+  },
+};
+
+const styleMaps = (version: BlockVersion): StyleType => STEPS_BLOCK_STYLE_MAPS[version];
+
 export const StepsBlock = JSX<StepsBlockProps>(
-  ({ className, title, description, steps, size = 'normal' }) => {
+  ({ className, title, description, steps, size = 'normal', version = 'primary' }) => {
+    const style = styleMaps(version);
     return (
       <section
-        className={`box-border font-sans text-primary-text bg-white px-4 py-6 flex flex-col ${
-          className || ''
-        }`}
+        className={`box-border font-sans bg-white px-4 py-6 flex flex-col
+        ${style.background} ${style.title} ${className || ''}`}
       >
-        {title && <Heading headingType="h3" className="text-center" title={title} />}
-        {description && <p className={`text-m-md text-center ${title && 'mt-2'}`}>{description}</p>}
+        {title && (
+          <Heading headingType="h3" className={`text-center ${style.title}`} title={title} />
+        )}
+        {description && (
+          <p className={`text-m-md text-center ${style.description} ${title && 'mt-2'}`}>
+            {description}
+          </p>
+        )}
         {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 }))}
+              {steps.map((step, i) =>
+                renderStepTitle({ step, size, i, length: steps.length, version: version }),
+              )}
             </div>
           </div>
         ) : null}
@@ -34,20 +70,23 @@ interface RenderStepTitleParams {
   size: SizeVersion;
   i: number;
   length: number;
+  version: BlockVersion;
 }
 
 const renderStepTitle = (params: RenderStepTitleParams) => {
-  const { step, size, i, length } = params;
-
+  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>
-          {renderIconArea(step, size, i)}
-          {!isLastStep && <div className={`min-h-8 h-full w-[2px] bg-secondary-light ${margin}`} />}
+        <div className="overflow-hidden">
+          {renderIconArea(params)}
+          {!isLastStep && (
+            <div className={`min-h-8 h-full w-[2px] ${style.iconConnector} ${margin}`} />
+          )}
         </div>
         <div className="flex flex-col justify-start relative">
           {step.label && (
@@ -55,7 +94,7 @@ const renderStepTitle = (params: RenderStepTitleParams) => {
           )}
           {step.description && (
             <div
-              className={`font-normal text-sm text-secondary-text text-left ${
+              className={`font-normal text-sm ${style.description} text-left ${
                 step.label ? 'mt-1' : ''
               }`}
             >
@@ -68,7 +107,9 @@ const renderStepTitle = (params: RenderStepTitleParams) => {
   );
 };
 
-const renderIconArea = (step: Step, size: SizeVersion, i: number) => {
+const renderIconArea = (params: RenderStepTitleParams) => {
+  const { step, size, i, version } = params;
+  const style = styleMaps(version);
   const iconAreaSize =
     size === 'normal'
       ? 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]'
@@ -79,10 +120,10 @@ const renderIconArea = (step: Step, size: SizeVersion, i: number) => {
 
   return (
     <div
-      className={`${iconAreaSize} bg-secondary-light rounded-full z-10 mr-3 flex justify-center content-center`}
+      className={`${iconAreaSize} ${style.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
     >
-      <span className={`font-medium text-secondary-text self-center ${iconTextSize}`}>
-        {(step.icon && <Icon name={step.icon} width={iconSize} height={iconSize} />) || i + 1}
+      <span className={`font-medium flex self-center ${style.title} ${iconTextSize}`}>
+        {(step.icon && <Icon name={step.icon} width={iconSize} height={iconSize} asSVG />) || i + 1}
       </span>
     </div>
   );

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,6 +1,6 @@
 import type { IconName } from '../../ui-kit/Icon/IconProps';
-
 import type { SizeVersion } from '../../model/SizeVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 /**
  * @title Шаг
@@ -30,4 +30,5 @@ export interface StepsBlockContent {
    */
   steps?: Step[];
   size?: SizeVersion; // TODO: mobile content
+  version?: BlockVersion; // TODO: mobile content
 }

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.16",
   "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/Footer/Footer.mobile.tsx

@@ -8,11 +8,11 @@ import { HorizontalNavigation } from './HorizontalNavigation';
 import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
 
+import { useSitemap } from '../../services/sitemap/useSitemap';
 import { Button } from '../../ui-kit/Button/Button';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import { getAccordionItems } from '../../utils/getAccordionItems';
-import { useSitemap } from "../../services/sitemap/useSitemap";
 
 export interface FooterProps extends FooterContent, UniBlockProps {}
 
@@ -27,7 +27,7 @@ export const Footer = JSX<FooterProps>(
     horizontalNavigationTitle,
   }) => {
     const sitemap = useSitemap(context.useAsyncData);
-    const dispositions = sitemap?.dispositions
+    const dispositions = sitemap?.dispositions;
     return (
       <footer className={`px-4 py-[26px] bg-white ${className}`}>
         <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />

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

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