@redneckz/wildless-cms-uni-blocks 0.12.4 → 0.12.5

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

@@ -0,0 +1,67 @@
+import '../../setup-fixture';
+
+import { BonusBenefitsBlock } from './BonusBenefitsBlock';
+import { BonusBenefit } from './BonusBenefitsBlockContent';
+
+const bonusBenefits: BonusBenefit[] = [
+  {
+    title: 'Оформи «Молодёжную карту»',
+    icon: { icon: 'WateringCanIcon', iconVersion: 'normal' },
+  },
+  {
+    title:
+      'Попроси в бухгалтерии ВУЗа/работодателя специальное заявление для перечисления стипендии/заработной платы на банковскую карту',
+    icon: { icon: 'AirPlaneIcon', iconVersion: 'normal' },
+  },
+  {
+    title:
+      'Заполни заявление и укажи реквизиты «Молодёжной карты». Узнать реквизиты ты можешь после получения карты в офисе, мобильном приложении (нажми на карту → действия → информация → реквизиты карты) или на сайте Банка в личном кабинете',
+    icon: { icon: 'CarIcon', iconVersion: 'normal' },
+  },
+  {
+    title: 'Отнеси заявление в бухгалтерию',
+    icon: { icon: 'CinemaIcon', iconVersion: 'normal' },
+  },
+];
+
+const bonusBenefitsWithDescription: BonusBenefit[] = [
+  {
+    description: 'Достойное вознаграждение',
+    icon: { icon: 'WateringCanIcon', iconVersion: 'normal' },
+  },
+  {
+    description: 'Социальный пакет',
+    icon: { icon: 'AirPlaneIcon', iconVersion: 'normal' },
+  },
+  {
+    description: 'Профессиональное обучение',
+    icon: { icon: 'CarIcon', iconVersion: 'normal' },
+  },
+  {
+    description: 'Карьерный рост и развитие',
+    icon: { icon: 'CinemaIcon', iconVersion: 'normal' },
+  },
+];
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <BonusBenefitsBlock
+        className="col-span-12"
+        title="Преимущества кредита"
+        subtitle="Удобный каталог с большим ассортиментом товаров и сервисов"
+        bonusBenefits={bonusBenefits}
+      />
+    </div>
+  ),
+  'with description': (
+    <div className="container grid grid-cols-12">
+      <BonusBenefitsBlock
+        className="col-span-12"
+        title="Преимущества кредита"
+        subtitle="Удобный каталог с большим ассортиментом товаров и сервисов"
+        bonusBenefits={bonusBenefitsWithDescription}
+      />
+    </div>
+  ),
+};

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -1,15 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { AlignText } from '../../model/AlignText';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
-import type {
-  BonusBenefit,
-  BonusBenefitsBlockContent,
-  ColumnsCount,
-} from './BonusBenefitsBlockContent';
+import type { BonusBenefitsBlockContent } from './BonusBenefitsBlockContent';
+import { renderBonusBenefits } from './renderBonusBenefits';
 
 export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockProps {}
 
@@ -23,48 +18,17 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
     title,
     ...rest
   }) => (
-    <BlockWrapper
-      className={style('flex flex-col text-center', className)}
-      defaultPadding="p-default"
-      {...rest}
-    >
-      <Headline className="!p-0 mb-8" title={title} description={subtitle} headlineVersion="M" />
-      {bonusBenefits?.length ? (
-        <div
-          className={`grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`}
-        >
-          {bonusBenefits.map(renderBonusBenefit)}
-        </div>
-      ) : null}
+    <BlockWrapper className={style('p-default', className)} defaultPadding="p-default" {...rest}>
+      <Headline
+        className="mb-4 sm:mb-8"
+        isPadding={false}
+        title={title}
+        description={subtitle}
+        headlineVersion="M"
+      />
+      {bonusBenefits?.length
+        ? renderBonusBenefits(bonusBenefits, columnsCount, cardTextAlign)
+        : null}
     </BlockWrapper>
   ),
 );
-
-const renderBonusBenefit = ({ icon, title, description }: BonusBenefit, i: number) => {
-  return (
-    <div
-      key={String(i)}
-      className={style(
-        'flex flex-col items-center text-h6',
-        !description && !title ? 'justify-center' : '',
-      )}
-    >
-      {title ? <span>{title}</span> : null}
-      {icon ? <Img image={icon} height="180" className="w-auto" /> : null}
-      {description ? <span>{description}</span> : null}
-    </div>
-  );
-};
-
-const getElementsColsValue = (colValue: ColumnsCount) => {
-  switch (colValue) {
-    case '3':
-      return 'grid-cols-3';
-    case '4':
-      return 'grid-cols-4';
-    case '5':
-      return 'grid-cols-5';
-    default:
-      return 'grid-cols-5';
-  }
-};

package/src/components/BonusBenefitsBlock/bonusBenefitAlign.mobile.ts

@@ -0,0 +1 @@
+export const bonusBenefitAlign = 'text-left';

package/src/components/BonusBenefitsBlock/bonusBenefitAlign.ts

@@ -0,0 +1 @@
+export const bonusBenefitAlign = 'text-center';

package/src/components/BonusBenefitsBlock/bonusBenefitStyles.mobile.ts

@@ -0,0 +1 @@
+export const bonusBenefitStyles = 'justify-between p-4 h-full border border-gray';

package/src/components/BonusBenefitsBlock/bonusBenefitStyles.ts

@@ -0,0 +1 @@
+export const bonusBenefitStyles = 'items-center';

package/src/components/BonusBenefitsBlock/renderBonusBenefit.tsx

@@ -0,0 +1,29 @@
+import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
+import { bonusBenefitAlign } from './bonusBenefitAlign';
+import { BonusBenefit } from './BonusBenefitsBlockContent';
+import { bonusBenefitStyles } from './bonusBenefitStyles';
+
+export const renderBonusBenefit = ({ icon, title, description }: BonusBenefit, i: number) => (
+  <div
+    key={String(i)}
+    className={style(
+      'flex flex-col',
+      bonusBenefitStyles,
+      !description && !title ? 'justify-center' : '',
+    )}
+  >
+    {title ? (
+      <Text size="text-h6" font="font-normal" align={bonusBenefitAlign}>
+        {title}
+      </Text>
+    ) : null}
+    {icon ? <Img image={icon} height="180" className="w-auto" /> : null}
+    {description ? (
+      <Text size="text-h6" font="font-normal" align={bonusBenefitAlign}>
+        {description}
+      </Text>
+    ) : null}
+  </div>
+);

package/src/components/BonusBenefitsBlock/renderBonusBenefits.mobile.tsx

@@ -0,0 +1,14 @@
+import { AlignType } from '../../model/AlignType';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import { BonusBenefit, ColumnsCount } from './BonusBenefitsBlockContent';
+import { renderBonusBenefit } from './renderBonusBenefit';
+
+export const renderBonusBenefits = (
+  bonusBenefits: BonusBenefit[],
+  columnsCount: ColumnsCount,
+  cardTextAlign: AlignType,
+) => (
+  <SwipeListControl>
+    {bonusBenefits.map((_, i) => renderBonusBenefit({ ..._ }, i))}
+  </SwipeListControl>
+);

package/src/components/BonusBenefitsBlock/renderBonusBenefits.tsx

@@ -0,0 +1,27 @@
+import { AlignText } from '../../model/AlignText';
+import type { AlignType } from '../../model/AlignType';
+import { BonusBenefit, ColumnsCount } from './BonusBenefitsBlockContent';
+import { renderBonusBenefit } from './renderBonusBenefit';
+
+export const renderBonusBenefits = (
+  bonusBenefits: BonusBenefit[],
+  columnsCount: ColumnsCount,
+  cardTextAlign: AlignType,
+) => (
+  <div className={`grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`}>
+    {bonusBenefits.map(renderBonusBenefit)}
+  </div>
+);
+
+const getElementsColsValue = (colValue: ColumnsCount) => {
+  switch (colValue) {
+    case '3':
+      return 'grid-cols-3';
+    case '4':
+      return 'grid-cols-4';
+    case '5':
+      return 'grid-cols-5';
+    default:
+      return 'grid-cols-5';
+  }
+};

package/src/components/Carousel/Carousel.fixture.tsx

@@ -4,7 +4,7 @@ import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOpti
 import { Blocks } from '../Blocks';
 import { BANK_HISTORY_CARD } from '../CarouselBankHistoryCard/CarouselBankHistoryCard.fixture';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
-import { CATALOG_CARD } from '../CarouselCatalogCard/CarouselCatalogCard.fixture';
+import { CATALOG_CARD } from '../CarouselCatalogCard/CatalogCard';
 import { CAROUSEL_EVENT_CARD } from '../CarouselEventCard/CarouselEventCard.fixture';
 import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
 import {
@@ -19,6 +19,17 @@ import {
 import { RICH_CARD } from '../CarouselRichTextCard/CarouselRichTextCard.fixture';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
 import { Carousel } from './Carousel';
+import { Picture } from '../../model/Picture';
+
+const catalogImage: Picture = {
+  src: 'pay-ring.png',
+  format: 'webp',
+  size: {
+    width: 230,
+    height: 230,
+  },
+  title: 'pay-ring',
+};
 
 const options = {
   blocksRegistry: Blocks,
@@ -71,7 +82,7 @@ export default {
           type: 'Carousel',
           blocks: new Array(6).fill({
             type: 'CarouselCatalogCard',
-            content: CATALOG_CARD,
+            content: { ...CATALOG_CARD, image: catalogImage },
           }),
         }}
         options={options}

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

@@ -0,0 +1,23 @@
+import '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
+import { CarouselCatalogCard } from './CarouselCatalogCard';
+import { CATALOG_CARD } from './CatalogCard';
+
+const image: Picture = {
+  src: 'pay-ring.png',
+  format: 'webp',
+  size: {
+    width: 117,
+    height: 117,
+  },
+  title: 'pay-ring',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CarouselCatalogCard className={'col-span-12'} {...CATALOG_CARD} image={image} />
+    </div>
+  ),
+};

package/src/components/CarouselCatalogCard/CarouselCatalogCard.fixture.tsx

@@ -1,11 +1,10 @@
 import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
-import type { ProductColorVersion } from '../../model/ProductColorVersion';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { CarouselCatalogCard } from './CarouselCatalogCard';
+import { CATALOG_CARD } from './CatalogCard';
 
-const payRing: Picture = {
+const image: Picture = {
   src: 'pay-ring.png',
   format: 'webp',
   size: {
@@ -15,31 +14,10 @@ const payRing: Picture = {
   title: 'pay-ring',
 };
 
-const colors: ProductColorVersion[] = ['black', 'white'];
-
-const buttonPrimary: ButtonWithIconProps = {
-  href: '/credit-cards',
-  text: 'Подробнее',
-  target: '_blank',
-  version: 'primary',
-  icon: {
-    icon: 'AppleIcon',
-  },
-};
-
-export const CATALOG_CARD = {
-  title: 'SATURN S-VI',
-  description: 'Керамическое кольцо с глянцевой поверхностью и огранкой по внешним контурам',
-  image: payRing,
-  price: 5600,
-  colors: colors,
-  button: buttonPrimary,
-};
-
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <CarouselCatalogCard {...CATALOG_CARD} />
+      <CarouselCatalogCard className={'col-span-4'} {...CATALOG_CARD} image={image} />
     </div>
   ),
 };

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -21,7 +21,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
   ({ className = '', title, description, image, price, button, colors, ...rest }) => (
     <BlockWrapper
       className={style(
-        'border box-border border-gray min-w-[392px] h-full flex flex-col justify-left',
+        'border box-border border-gray p-default sm:p-7 h-full flex flex-col justify-left',
         className,
       )}
       {...rest}
@@ -41,7 +41,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
         <div className="flex mb-4 text-secondary-text">
           <div className="mr-1.5">
             <Text size="text-s" align="text-left" font="font-light">
-              Доступные цвета:
+              Цвета:
             </Text>
           </div>
           {colors.map(renderColorOption)}
@@ -61,6 +61,6 @@ const renderColorOption = (color: ProductColorVersion, i: number) => (
   <div
     role="figure"
     key={String(i)}
-    className={`w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
+    className={`w-6 h-6 ml-1 sm:ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
   />
 );

package/src/components/CarouselCatalogCard/CatalogCard.ts

@@ -0,0 +1,22 @@
+import type { ProductColorVersion } from '../../model/ProductColorVersion';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+const colors: ProductColorVersion[] = ['black', 'white'];
+
+const buttonPrimary: ButtonWithIconProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'primary',
+  icon: {
+    icon: 'AppleIcon',
+  },
+};
+
+export const CATALOG_CARD = {
+  title: 'SATURN S-VI',
+  description: 'Керамическое кольцо с глянцевой поверхностью и огранкой по внешним контурам',
+  price: 5600,
+  colors: colors,
+  button: buttonPrimary,
+};

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.example.json

@@ -3,17 +3,7 @@
     "format": "webp",
     "size": {
       "width": 290
-    },
-    "sources": [
-      {
-        "media": 1279,
-        "size": {
-          "width": 174
-        },
-        "format": "webp",
-        "alignment": "southeast"
-      }
-    ]
+    }
   },
   "title": "Заголовок",
   "description": "Описание",

package/src/components/CarouselProductCard/CarouselProductCard.example.json

@@ -5,17 +5,7 @@
       "size": {
         "width": 140,
         "height": 140
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 84
-          },
-          "format": "webp",
-          "alignment": "center"
-        }
-      ]
+      }
     },
     "title": "Заголовок 1",
     "description": "Описание 1",

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

@@ -0,0 +1,34 @@
+import type { Picture } from '../../model/Picture';
+import { CarouselProgramsCard } from './CarouselProgramsCard';
+import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
+
+const imageMonth: Picture = {
+  src: 'coin.png',
+  format: 'webp',
+  size: {
+    width: 112,
+  },
+  title: 'money',
+};
+
+const list = [
+  { title: 'От 16 до 81', description: 'платежей' },
+  {
+    title: 'От 3 до 7,5 млн руб. ',
+    description: 'остаток по счету',
+  },
+];
+
+export const BUSINESS_CARD: CarouselProgramsCardContent = {
+  title: 'Продвинутый',
+  icon: imageMonth,
+  href: 'http://rshb.ru',
+  target: '_blank',
+  list,
+};
+
+const CAROUSEL_BUSINESS_CARD = <CarouselProgramsCard className="col-span-12" {...BUSINESS_CARD} />;
+
+export default {
+  default: <div className="container grid grid-cols-12">{CAROUSEL_BUSINESS_CARD}</div>,
+};

package/src/components/CarouselProgramsCard/CarouselProgramsCard.fixture.tsx

@@ -8,8 +8,7 @@ const imageMonth: Picture = {
   src: 'coin.png',
   format: 'webp',
   size: {
-    width: 200,
-    height: 242,
+    width: 130,
   },
   title: 'money',
 };
@@ -30,12 +29,8 @@ export const BUSINESS_CARD: CarouselProgramsCardContent = {
   list,
 };
 
-const CAROUSEL_BUSINESS_CARD = <CarouselProgramsCard className="col-span-4" {...BUSINESS_CARD} />;
-const CAROUSEL_BUSINESS_CARD_SECONDARY = (
-  <CarouselProgramsCard className="col-span-4" {...BUSINESS_CARD} version="secondary" />
-);
+const CAROUSEL_BUSINESS_CARD = <CarouselProgramsCard className="col-span-6" {...BUSINESS_CARD} />;
 
 export default {
   default: <div className="container grid grid-cols-12">{CAROUSEL_BUSINESS_CARD}</div>,
-  secondary: <div className="container grid grid-cols-12">{CAROUSEL_BUSINESS_CARD_SECONDARY}</div>,
 };

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -5,8 +5,11 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
+import { cardDescriptionColor, cardTitleFont } from './programCardStyles';
 
 export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, UniBlockProps {}
 
@@ -15,18 +18,17 @@ export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
     return (
       <BlockWrapper
         className={style('border border-gray', className)}
-        defaultPadding="p-0"
+        defaultPadding="p-lg sm:p-0"
         {...rest}
       >
-        <LinkWrapper className="flex" href={href} target={target}>
-          <div className="w-[200px] min-w-[200px] self-center">
-            {icon?.icon ? <Img image={icon} /> : null}
-            {icon?.src ? <Img image={icon} /> : null}
+        <LinkWrapper className="sm:flex sm:items-center" href={href} target={target}>
+          <div className="min-w-[200px] flex justify-center">
+            {icon?.src || icon?.icon ? <Img image={icon} /> : null}
           </div>
-          <div className="p-8 pl-3 w-full">
-            {title ? <Heading className="mb-3.5" headingType="h5" title={title} /> : null}
+          <div className="sm:px-3 py-xl">
+            {title ? <Heading className="mb-2 sm:mb-3.5" headingType="h6" title={title} /> : null}
             {list.length ? (
-              <div className="flex flex-col gap-3">{list?.map(renderList)}</div>
+              <div className="flex flex-col gap-2 sm:gap-3">{list?.map(renderList)}</div>
             ) : null}
           </div>
         </LinkWrapper>
@@ -36,8 +38,16 @@ export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
 );
 
 const renderList = (_: HeadlineCommonProps, i: number) => (
-  <div key={String(i)} className="break-words">
-    {_.title ? <div className="text-h6">{_.title}</div> : null}
-    {_.description ? <span className="text-l-light mt-1">{_.description}</span> : null}
+  <div key={String(i)} className="flex flex-row-reverse justify-between gap-y-1 sm:flex-col">
+    {_.title ? (
+      <Text size="text-l" font={cardTitleFont}>
+        {_.title}
+      </Text>
+    ) : null}
+    {_.description ? (
+      <Paragraph size="text-l" font="font-light" color={cardDescriptionColor}>
+        {_.description}
+      </Paragraph>
+    ) : null}
   </div>
 );

package/src/components/CarouselProgramsCard/programCardStyles.mobile.ts

@@ -0,0 +1,2 @@
+export const cardTitleFont = 'font-light';
+export const cardDescriptionColor = '';

package/src/components/CarouselProgramsCard/programCardStyles.ts

@@ -0,0 +1,2 @@
+export const cardTitleFont = 'font-normal';
+export const cardDescriptionColor = 'text-secondary-text';

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json

@@ -5,18 +5,7 @@
       "size": {
         "width": 290,
         "height": 290
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 174,
-            "height": 174
-          },
-          "format": "webp",
-          "alignment": "southeast"
-        }
-      ]
+      }
     },
     "title": "Заголовок 1",
     "description": "Описание 1",

package/src/components/ErrorBlock/ErrorBlock.example.json

@@ -9,17 +9,7 @@
         "format": "webp",
         "size": {
           "width": 460
-        },
-        "sources": [
-          {
-            "media": 1279,
-            "size": {
-              "width": 276
-            },
-            "format": "webp",
-            "alignment": "center"
-          }
-        ]
+        }
       }
     },
     "button": {

package/src/components/MobileAppTile/MobileAppTile.example.json

@@ -6,17 +6,7 @@
       "size": {
         "width": 529,
         "height": 345
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 360
-          },
-          "format": "webp",
-          "alignment": "center"
-        }
-      ]
+      }
     },
     "alignTitle": "left",
     "qr": null,

package/src/components/PictureText/PictureText.example.json

@@ -7,17 +7,7 @@
       "size": {
         "width": 400,
         "height": 300
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 240
-          },
-          "format": "webp",
-          "alignment": "center"
-        }
-      ]
+      }
     },
     "version": "primary",
     "directionRight": false,

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

@@ -10,12 +10,6 @@ const imageInsurance: Picture = {
   size: {
     width: 335,
   },
-  sources: [
-    {
-      src: 'insurance.png',
-      format: 'png',
-    },
-  ],
 };
 
 const imageMonitor: Picture = {

package/src/components/PictureText/PictureText.fixture.tsx

@@ -22,12 +22,6 @@ const imageInsurance: Picture = {
     width: 400,
     height: 300,
   },
-  sources: [
-    {
-      src: 'insurance.png',
-      format: 'png',
-    },
-  ],
 };
 
 const imageMonitor: Picture = {