@redneckz/wildless-cms-uni-blocks 0.3.5 → 0.3.8

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

@@ -16,14 +16,14 @@ export function renderBenefit(benefit: Benefit, i: number, version: string) {
     <div key={String(i)} className="flex gap-3 items-center mb-2.5 last:mb-0">
       {benefit.icon && (
         <Icon
-          className="w-[25px] h-[25px] rounded-full box-border"
+          className="w-6 h-6 rounded-full box-border"
           name={benefit.icon}
           width="24"
           height="24"
           asSVG
         />
       )}
-      <div className={`font-medium text-m-base m-0 ${benefitTitleStyleMap[version]}`}>
+      <div className={`font-medium text-m-title-xs m-0 ${benefitTitleStyleMap[version]}`}>
         {benefit.label}
       </div>
       {benefit.description && (

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

@@ -26,6 +26,12 @@ const worker: Picture = {
     width: 280,
     height: 280,
   },
+  sources: [
+    {
+      src: 'money-2.png 1x, money-2-2x.png 2x',
+      format: 'png',
+    },
+  ],
 };
 
 const creditCard: Picture = {
@@ -39,6 +45,98 @@ const creditCard: Picture = {
 };
 
 export default {
+  default: (
+    <div className="p-2">
+      <div className="container grid grid-cols-12">
+        <ProductGallery
+          className="col-span-12"
+          context={context}
+          slides={[
+            {
+              productBlock: {
+                title: 'Акция «Кредит на все, что хочется!»',
+                items: [
+                  'Потребительский кредит по специальной процентной ставке',
+                  'Получите деньги без залога и поручительства',
+                  'Кредитный лимит до 5 млн рублей',
+                ],
+                buttons: [
+                  {
+                    href: 'https://rshb.ru',
+                    text: 'Подробнее',
+                    target: '_blank',
+                    version: 'primary',
+                  },
+                ],
+                image: moneyImage,
+              },
+            },
+            {
+              productBlock: {
+                title: 'Ставка от 12,5% годовых на срок до 3 лет!',
+                items: [
+                  'Потребительский кредит по специальной процентной ставке',
+                  'Получите деньги без залога и поручительства',
+                  'Кредитный лимит до 5 млн рублей',
+                ],
+                buttons: [
+                  {
+                    href: 'https://rshb.ru',
+                    text: 'Подробнее',
+                    target: '_blank',
+                    version: 'primary',
+                  },
+                ],
+                image: worker,
+              },
+            },
+            {
+              nav: {
+                title: 'Выгодно покупать',
+                desc: 'Дополнительные бонусные баллы за покупки',
+              },
+              productBlock: {
+                title: 'Дополнительные бонусные баллы за покупки!',
+                items: [
+                  'Потребительский кредит по специальной процентной ставке',
+                  'Получите деньги без залога и поручительства',
+                  'Кредитный лимит до 5 млн рублей',
+                ],
+                buttons: [
+                  {
+                    href: 'https://rshb.ru',
+                    text: 'Подробнее',
+                    target: '_blank',
+                    version: 'primary',
+                  },
+                ],
+                image: creditCard,
+              },
+            },
+            {
+              productBlock: {
+                title: 'Карты Unionpay',
+                items: [
+                  'Потребительский кредит по специальной процентной ставке',
+                  'Получите деньги без залога и поручительства',
+                  'Кредитный лимит до 5 млн рублей',
+                ],
+                buttons: [
+                  {
+                    href: 'https://rshb.ru',
+                    text: 'Подробнее',
+                    target: '_blank',
+                    version: 'primary',
+                  },
+                ],
+                image: creditCard,
+              },
+            },
+          ]}
+        />
+      </div>
+    </div>
+  ),
   primary: (
     <div className="p-2">
       <div className="container grid grid-cols-12">

package/src/components/ProductGallery/ProductGallery.fixture.tsx

@@ -7,8 +7,8 @@ const moneyImage: Picture = {
   src: 'money-1.png',
   format: 'webp',
   size: {
-    width: 280,
-    height: 280,
+    width: 234,
+    height: 234,
   },
   alt: 'Варианты потребительского кредита',
 };

package/src/components/ProductGallery/ProductGallery.mobile.tsx

@@ -1,58 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { ProductGalleryBlock } from './ProductGalleryBlock';
 import type { ProductGalleryContent } from './ProductGalleryContent';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import { ProductGalleryBlock } from './ProductGalleryBlock';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
-export const ProductGallery = JSX<ProductGalleryProps>(
-  ({ className, context, duration = 0, slides = [] }) => {
-    const galleryBlocks = slides.map((s) => s.productBlock);
-    const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
-
-    return (
-      <section className={`font-sans bg-white overflow-hidden w-100 ${className || ''}`}>
-        <div
-          className={`flex duration-1000`}
-          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
-          role="list"
-        >
-          {galleryBlocks.map((block, i) => (
-            <ProductGalleryBlock key={String(i)} block={block} context={context} />
-          ))}
-        </div>
-
-        <div className="flex px-4 py-6">
-          {slides.map((_, i) =>
-            renderNavButton({
-              slide: _.productBlock,
-              i,
-              activeSlideIndex,
-              onClick: () => setActiveSlideIndex(i),
-              duration,
-            }),
-          )}
-        </div>
-      </section>
-    );
-  },
-);
+export const ProductGallery = JSX<ProductGalleryProps>(({ className, context, slides = [] }) => {
+  const galleryBlocks = slides.map((s) => s.productBlock);
 
-function renderNavButton({ slide, i, activeSlideIndex, onClick, duration }) {
-  const isActiveBtn = i === activeSlideIndex;
-  const progressBarClassName = isActiveBtn ? 'animate-slide bg-primary-main' : 'bg-main-divider';
   return (
-    <button
-      type="button"
-      key={String(i)}
-      onClick={onClick}
-      aria-label={slide?.title}
-      className={`relative overflow-hidden border-0 bg-inherit cursor-pointer pl-0 mr-1.5 pt-4 pb-5 last:mr-0 grow basis-0`}
-    >
-      <div
-        className={`absolute bottom-0 left-0 w-full h-[3px] ${progressBarClassName}`}
-        style={{ animationDuration: `${duration}s`, animationFillMode: 'forwards' }}
-      ></div>
-    </button>
+    <section className={`font-sans bg-white overflow-hidden w-100 pb-6 ${className || ''}`}>
+      <SwipeListControl context={context}>
+        {galleryBlocks.map((block, i) => (
+          <ProductGalleryBlock key={String(i)} block={block} context={context} />
+        ))}
+      </SwipeListControl>
+    </section>
   );
-}
+});

package/src/components/ProductGallery/ProductGalleryBlock.mobile.tsx

@@ -12,7 +12,7 @@ export interface ProductGalleryBlockProps extends UniBlockProps {
 export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
   ({ block, headingType, context }) => {
     return (
-      <section className="flex grow-0 shrink-0 basis-full px-4 py-6" role="listitem">
+      <section className="flex grow-0 shrink-0 basis-full px-4 pt-6" role="listitem">
         <div className="flex grow">
           <ProductBlockInner context={context} headingType={headingType || 'h2'} {...block} />
         </div>

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

@@ -49,7 +49,7 @@ const renderStepTitle = (params: RenderStepTitleParams) => {
           {renderIconArea(step, size, i)}
           {!isLastStep && <div className={`min-h-8 h-full w-[2px] bg-secondary-light ${margin}`} />}
         </div>
-        <div className="flex flex-col justify-center relative">
+        <div className="flex flex-col justify-start relative">
           {step.label && (
             <div className="font-medium text-m-title-xs m-0 text-left">{step.label}</div>
           )}
@@ -82,7 +82,7 @@ const renderIconArea = (step: Step, size: SizeVersion, i: number) => {
       className={`${iconAreaSize} bg-secondary-light 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} asSVG />) || i + 1}
+        {(step.icon && <Icon name={step.icon} width={iconSize} height={iconSize} />) || i + 1}
       </span>
     </div>
   );

package/src/components/Tile/Tile.tsx

@@ -49,9 +49,8 @@ export const Tile = JSX<TileProps>((props) => {
             <Heading
               headingType={getTileHeadingType(className)}
               title={title}
-              className={`whitespace-pre-wrap max-w-[600px] ${
-                version === 'primary' ? 'text-primary-text' : ''
-              }`}
+              className={`whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
+              ${version === 'primary' ? 'text-primary-text' : ''}`}
             />
           )
         }
@@ -64,8 +63,12 @@ export const Tile = JSX<TileProps>((props) => {
       >
         {description && <Description className="mt-4 max-w-[600px]" description={description} />}
         {children}
-        {items?.length ? <List items={items} /> : null}
+        {renderList(items, version)}
       </BaseTile>
     </section>
   );
 });
+
+function renderList(items, version) {
+  return items?.length ? <List items={items} version={version} /> : null;
+}

package/src/types.ts

@@ -26,12 +26,17 @@ export interface SlotsMap {
 }
 
 export interface ContentPageMeta {
-  title: string;
-  slug: string;
-  description?: string;
-  keywords?: string[];
-  robots?: string[];
+  title?: string;
+  slug?: string;
+  main?: {
+    description?: string;
+    keywords?: string[];
+    canonical?: string;
+    robots?: string[];
+  };
   og?: Record<string, string>;
+  twitter?: Record<string, string>;
+  jsonLd?: string;
 }
 
 export interface ContentPageDef extends ContentPageMeta {

package/src/ui-kit/BlockItem/BlockItem.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockItemProps, BlockItemVersion } from './BlockItemProps';
 
-const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
+const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3 mt-2';
 
 const TEXT_STYLE_MAP: Record<BlockItemVersion, string> = {
-  primary: 'text-primary-text',
+  primary: 'text-secondary-text',
   secondary: 'text-white',
   gray: 'text-secondary-text',
 };
@@ -18,8 +18,8 @@ const LIST_STYLE_MAP: Record<BlockItemVersion, string> = {
 export const BlockItem = JSX<BlockItemProps>(
   ({ className = '', isDotted = true, text, children, version = 'primary' }) => {
     return (
-      <div className={`font-sans flex items-center ${className}`} role="listitem">
-        {isDotted && <div className={getListStyle(version)} />}
+      <div className={`font-sans flex items-start ${className}`} role="listitem">
+        {isDotted && <div className={getListStyle(version)} />}!!!!!
         <span className={TEXT_STYLE_MAP[version]}>{text || children}</span>
       </div>
     );

package/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-base ${className || ''}`}>{description}</div>;
+  return <div className={`font-normal text-m-md ${className || ''}`}>{description}</div>;
 });

package/src/ui-kit/Heading/Heading.fixture.mobile.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Heading } from './Heading';
 
 export default {

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

@@ -22,7 +22,7 @@ export const Heading = JSX<HeadingProps>((props) => {
   const Tag = headingType;
 
   return (
-    <Tag className={`font-sans font-medium ${HeadingClass[headingType]} ${className || ''}`}>
+    <Tag className={`font-sans font-medium m-0 ${HeadingClass[headingType]} ${className || ''}`}>
       {title}
     </Tag>
   );

package/src/ui-kit/Heading/Heading.tsx

@@ -22,7 +22,9 @@ export const Heading = JSX<HeadingProps>((props) => {
   const Tag = headingType;
 
   return (
-    <Tag className={`font-sans font-medium ${HEADING_STYLE_MAP[headingType]} ${className || ''}`}>
+    <Tag
+      className={`font-sans font-medium m-0 ${HEADING_STYLE_MAP[headingType]} ${className || ''}`}
+    >
       {title}
     </Tag>
   );

package/src/ui-kit/List/ListItem.tsx

@@ -11,7 +11,7 @@ export interface ListItemProps {
   isDotted?: boolean;
 }
 
-const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
+const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3 mt-2';
 
 const TEXT_STYLE_MAP: Record<ListItemVersion, string> = {
   primary: 'text-primary-text',
@@ -28,9 +28,9 @@ const LIST_STYLE_MAP: Record<ListItemVersion, string> = {
 export const ListItem = JSX<ListItemProps>(
   ({ className = '', isDotted = true, children, version = 'primary' }) => {
     return (
-      <div className={`font-sans flex items-center ${className}`} role="listitem">
+      <div className={`font-sans flex items-start ${className}`} role="listitem">
         {isDotted && <div className={getListStyle(version)} />}
-        <span className={TEXT_STYLE_MAP[version]}>{children}</span>
+        <span className={`text-m-md ${TEXT_STYLE_MAP[version]}`}>{children}</span>
       </div>
     );
   },

package/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -15,7 +15,7 @@ export interface SwipeListControlDotsProps {
 export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
   ({ children, activeIndex, indexFraction, showDots }) => {
     return showDots && children?.length ? (
-      <div className="flex gap-2 mx-auto mt-[22px] w-fit">
+      <div className="flex gap-2 mx-auto mt-5 w-fit">
         {children?.map((_, idx) => (
           <div
             key={String(idx)}

package/src/ui-kit/SwipeListControl/SwipeListControlItem.tsx

@@ -12,7 +12,11 @@ export interface SwipeListControlItemProps {
 export const SwipeListControlItem = JSX<SwipeListControlItemProps>(
   ({ className = '', children, ...rest }) => {
     return (
-      <div className={`snap-center snap-always min-w-full ${className}`} role="listitem" {...rest}>
+      <div
+        className={`snap-center snap-always min-w-full box-border ${className}`}
+        role="listitem"
+        {...rest}
+      >
         {children}
       </div>
     );