@redneckz/wildless-cms-uni-blocks 0.3.86 → 0.3.87

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

@@ -3,24 +3,44 @@ import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
 import { Recommendation, RecommendationProps } from './Recommendation';
 
-const creditCard: Picture = {
-  src: 'credit-card-1.png',
+const cowCard: Picture = {
+  src: 'cow-card.png',
   format: 'webp',
   size: {
-    width: 180,
-    height: 180,
+    width: 290,
+    height: 290,
   },
-  title: 'credit-card-1',
+  title: 'cow-card',
 };
 
-const chair: Picture = {
-  src: 'chair.png',
+const productBasket: Picture = {
+  src: 'product-basket.png',
   format: 'webp',
   size: {
-    width: 180,
-    height: 180,
+    width: 290,
+    height: 290,
   },
-  title: 'chair',
+  title: 'product-basket',
+};
+
+const five: Picture = {
+  src: '5.svg',
+  format: 'webp',
+  size: {
+    width: 268,
+    height: 218,
+  },
+  title: 'five',
+};
+
+const card: Picture = {
+  src: '120.png',
+  format: 'webp',
+  size: {
+    width: 268,
+    height: 218,
+  },
+  title: '120',
 };
 
 const socialMedia: LinkProps[] = [
@@ -35,31 +55,58 @@ export const defaultProps: RecommendationProps = {
   recommendations: [
     {
       title: 'РоссельхозБанк',
-      items: ['Свежие новости', 'Акции и предложения', 'Ставки и катировки'],
-      image: chair,
+      items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
+      image: cowCard,
       socialMedia,
     },
     {
       title: 'Своё Родное',
       description: 'Льготный период 120 дней',
-      image: creditCard,
+      image: productBasket,
       socialMedia,
     },
     {
       title: 'Своё Фермерство',
       description: 'Льготный период 120 дней',
-      image: creditCard,
+      image: cowCard,
       socialMedia,
     },
     {
       title: 'Кредитные карты',
       description: 'Льготный период 120 дней',
-      image: creditCard,
+      image: productBasket,
     },
     {
       title: 'Кредитные карты',
       description: 'Льготный период 120 дней',
-      image: creditCard,
+      image: cowCard,
+    },
+  ],
+};
+
+export const shortProps: RecommendationProps = {
+  context,
+  title: 'Также интересуются',
+  recommendations: [
+    {
+      title: 'Кредиты',
+      items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
+      image: five,
+    },
+    {
+      title: 'Кредитная карта с длинным заголовком',
+      description: 'Льготный период 120 дней',
+      image: card,
+    },
+    {
+      title: 'Кредиты',
+      items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
+      image: five,
+    },
+    {
+      title: 'Кредитная карта с длинным заголовком',
+      description: 'Льготный период 120 дней',
+      image: card,
     },
   ],
 };
@@ -85,4 +132,9 @@ export default {
       <Recommendation className="col-span-12" {...defaultProps} version="secondary" />
     </div>
   ),
+  'secondary private short': (
+    <div className="container grid grid-cols-12" data-theme="pc">
+      <Recommendation className="col-span-12" {...shortProps} version="secondary" />
+    </div>
+  ),
 };

package/src/components/Recommendation/Recommendation.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { RecommendationCard } from './RecommendationCard';
@@ -26,23 +26,25 @@ export const Recommendation = JSX<RecommendationProps>(
         className={`relative font-sans p-9 overflow-hidden text-center ${blockClassName} ${className}`}
         {...rest}
       >
-        {title ? <Heading headingType="h2" className="mb-6" title={title} /> : null}
-        <div
-          className="flex duration-1000 gap-3.5"
-          style={{ transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }}
-          role="list"
-        >
-          {recommendations?.length
-            ? recommendations.map(
-                renderRecommendationCard({ context, version, className: cardClassName }),
-              )
-            : null}
+        {title ? <Heading headingType="h3" className="mb-6" title={title} /> : null}
+        <div>
+          <div
+            className="flex duration-1000 gap-3.5"
+            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>
-        {renderNavButtons({
-          cardsCount: recommendations.length,
-          activeCardIndex,
-          setActiveCardIndex,
-        })}
         <div
           className={`${BLUR_BLOCK_CLASSES} left-0 ${
             version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'
@@ -93,7 +95,7 @@ const renderNavButtons = ({
         handler: [handlePrevClick, handleNextClick],
         isShown: [showPrevButton, showNextButton],
         btnClass: ['left-8', 'right-8'],
-        className: 'top-1/2 mt-6',
+        className: 'top-1/2 mt-3',
       })}
     </div>
   );

package/src/components/Recommendation/RecommendationCard.tsx

@@ -15,35 +15,40 @@ export interface RecommendationCardProps extends RecommendationCardTypes, UniBlo
 
 export const RecommendationCard = JSX<RecommendationCardProps>(
   ({ context, className = '', title, description, items, image, version, socialMedia }) => {
+    const tileTitle = title ? (
+      <Heading headingType="h5" as="h3" className="font-normal mb-3.5 z-10" title={title} />
+    ) : null;
+    const tileImage = image?.src ? (
+      <Img className="absolute bottom-0 right-0 m-0" image={image} />
+    ) : null;
+
     return (
       <section
-        className={`border border-solid box-border p-[30px] min-w-[524px] ${className}`}
+        className={`relative overflow-hidden text-left border border-solid box-border p-7 min-w-[524px] min-h-[218px] ${className}`}
         role="listitem"
       >
         <BaseTile
           context={context}
           className="flex justify-between"
-          title={
-            title ? (
-              <Heading headingType="h4" as="h3" className="font-normal mb-3.5" title={title} />
-            ) : null
-          }
-          image={image?.src && <Img className="mt-auto ml-7" image={image} />}
+          title={tileTitle}
+          image={tileImage}
         >
-          {description ? <Description className="text-left" description={description} /> : null}
+          {description ? <Description className="mb-2" description={description} /> : null}
           {items?.length ? (
             <List
-              className="text-md text-left font-light flex flex-col flex-1 gap-2"
+              className="text-md font-light flex flex-col flex-1 gap-2 max-w-[236px]"
               items={items}
               version={version}
             />
           ) : null}
-          <SocialMedia
-            className="pt-[42px] pb-0"
-            media={socialMedia}
-            version={version}
-            context={context}
-          />
+          {socialMedia ? (
+            <SocialMedia
+              className="pt-[42px] pb-0"
+              media={socialMedia}
+              version={version}
+              context={context}
+            />
+          ) : null}
         </BaseTile>
       </section>
     );

package/src/components/Recommendation/RecommendationContent.ts

@@ -1,9 +1,8 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { HeadlineCommonProps, TitleProp } from '../../model/HeadlineType';
 
 export interface RecommendationCardTypes extends HeadlineCommonProps, ListContent, ImageContent {
   /**
@@ -16,7 +15,7 @@ export interface RecommendationCardTypes extends HeadlineCommonProps, ListConten
 /**
  * @title Рекомендации
  */
-export interface RecommendationContent extends HeadingCommonProps {
+export interface RecommendationContent extends TitleProp {
   /** @title Карточки */
   recommendations?: RecommendationCardTypes[];
   version?: BlockVersion;

package/src/components/TariffsTable/TariffsTable.tsx

@@ -56,7 +56,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
             title={title}
           />
         ) : null}
-        {description ? <div className="mb-9 text-center text-m-base">{description}</div> : null}
+        {description ? <div className="mb-9 text-center text-l">{description}</div> : null}
         {rowData?.length ? (
           <Foldable
             blocks={foldableBlocks}

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

@@ -21,6 +21,7 @@ const items = [
 export const TEXT_BLOCK: TextBlockContent = {
   title: 'Все карты Россельхозбанка работают',
   description:
+    /* eslint-disable max-len */
     "Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка",
 };
 

package/src/components/TextBlock/TextBlock.fixture.tsx

@@ -15,6 +15,7 @@ const image: Picture = {
 export const TEXT_BLOCK: TextBlockContent = {
   title: 'Все карты Россельхозбанка работают',
   description:
+    /* eslint-disable max-len */
     "Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка",
 };