@redneckz/wildless-cms-uni-blocks 0.14.21 → 0.14.23

package/mobile/tailwind.config.cjs

@@ -0,0 +1,127 @@
+const config = require('../tailwind.config.cjs');
+
+const quadXL = '1.5rem 1.25rem'; // 24px 20px
+
+module.exports = {
+  ...config,
+  theme: {
+    ...config.theme,
+    extend: {
+      ...config.theme.extend,
+      borderRadius: {
+        icon: '0.375rem',
+      },
+      spacing: {
+        '6xl': '1.5rem', // 24px
+        '5xl': '1.5rem', // 24px
+        '4xl': '1.5rem', // 24px
+        '3xl': '1rem', // 16px
+        '2xl': '1rem', // 16px
+        xl: '1rem', // 16px
+        lg: '1rem', // 16px
+        m: '0.5rem', // 8px
+        s: '0.5rem', // 8px
+        xs: '0.5rem', // 8px
+        '2xs': '0.25rem', // 4px
+        '3xs': '0', // 0
+      },
+      padding: {
+        '6xl': quadXL,
+        '5xl': quadXL,
+        '4xl': quadXL,
+      },
+      fontSize: {
+        ...config.theme.extend.fontSize,
+        'title-extra': ['9.375rem', '13rem'], // 150px 208px
+        h0: [
+          '1.5rem',
+          {
+            // 24px 34px
+            lineHeight: '2.125rem',
+            fontWeight: '400',
+          },
+        ],
+        h1: [
+          '1.5rem',
+          {
+            // 24px 34px
+            lineHeight: '2.125rem',
+            fontWeight: '400',
+          },
+        ],
+        h2: [
+          '1.5rem',
+          {
+            // 24px 34px
+            lineHeight: '2.125rem',
+            fontWeight: '400',
+          },
+        ],
+        h3: [
+          '1.25rem',
+          {
+            // 20px 28px
+            lineHeight: '1.75rem',
+            fontWeight: '400',
+          },
+        ],
+        h4: [
+          '1.25rem',
+          {
+            // 20px 28px
+            lineHeight: '1.75rem',
+            fontWeight: '400',
+          },
+        ],
+        h5: [
+          '1rem',
+          {
+            // 16px 24px
+            lineHeight: '1.5rem',
+            fontWeight: '400',
+          },
+        ],
+        h6: [
+          '1rem',
+          {
+            // 16px 24px
+            lineHeight: '1.5rem',
+            fontWeight: '400',
+          },
+        ],
+        xl: [
+          '1rem',
+          {
+            // 16px 24px
+            lineHeight: '1.5rem',
+            fontWeight: '400',
+          },
+        ],
+        l: [
+          '1rem',
+          {
+            // 16px 24px
+            lineHeight: '1.5rem',
+            fontWeight: '400',
+          },
+        ],
+        s: [
+          '0.875rem',
+          {
+            // 14px 20px
+            lineHeight: '1.25rem',
+            fontWeight: '400',
+          },
+        ],
+        xs: [
+          '0.75rem',
+          {
+            // 12px 18px
+            lineHeight: '1.125rem',
+            fontWeight: '400',
+          },
+        ],
+      },
+    },
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.21",
+  "version": "0.14.23",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -69,6 +69,7 @@
     "mobile/src",
     "cosmos-static/icons",
     "tailwind.config.cjs",
+    "mobile/tailwind.config.cjs",
     "!**/*.spec.*"
   ],
   "repository": {

package/src/api/CorporateLeadAPI.ts

@@ -22,6 +22,10 @@ export function CorporateLeadAPI() {
         body: JSON.stringify(body),
       });
 
+      if (!response?.ok) {
+        return null;
+      }
+
       const data = await response.json();
 
       return data;

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.example.json

@@ -3,7 +3,7 @@
     "title": "Вы можете оплатить бонусными баллами",
     "subtitle": "Удобный каталог с большим ассортиментом товаров и сервисов",
     "columnsCount": "4",
-    "cardTextAlign": "center",
+    "cardTextAlign": "text-center",
     "bonusBenefits": [
       {
         "title": "Верхний заголовок",

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -10,7 +10,7 @@ export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockP
 export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
   ({
     bonusBenefits,
-    cardTextAlign = 'center',
+    cardTextAlign = 'text-center',
     className = '',
     columnsCount = '4',
     subtitle,

package/src/components/BonusBenefitsBlock/BonusBenefitsBlockContent.ts

@@ -1,4 +1,3 @@
-import { type AlignType } from '../../model/AlignType';
 import {
   type DescriptionProps,
   type SubtitleProps,
@@ -6,6 +5,7 @@ import {
 } from '../../model/HeadlineType';
 import { type UniBlockContent } from '../../model/JSXBlock';
 import { type IconProps } from '../../model/Picture';
+import { type TextAlign } from '../../ui-kit/Text/TextProps';
 
 /**
  * @title Количество элементов в строке
@@ -31,5 +31,5 @@ export type BonusBenefitsBlockContent = UniBlockContent &
     /** @title Список бонусов */
     bonusBenefits?: BonusBenefit[];
     columnsCount?: ColumnsCount;
-    cardTextAlign?: AlignType;
+    cardTextAlign?: TextAlign;
   };

package/src/components/BonusBenefitsBlock/renderBonusBenefit.tsx

@@ -1,29 +1,32 @@
-import { AlignStyles } from '../../model/AlignStyles';
 import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
+import { type TextAlign } from '../../ui-kit/Text/TextProps';
 import { style } from '../../utils/style';
 import { type 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={AlignStyles}>
-        {title}
-      </Text>
-    ) : null}
-    {icon ? <Img image={icon} height="180" className="w-auto" /> : null}
-    {description ? (
-      <Text size="text-h6" font="font-normal" align={AlignStyles}>
-        {description}
-      </Text>
-    ) : null}
-  </div>
-);
+export const renderBonusBenefit =
+  (cardTextAlign: TextAlign) =>
+  ({ icon, title, description }: BonusBenefit, i: number) =>
+    (
+      <div
+        key={String(i)}
+        className={style(
+          'flex flex-col gap-1',
+          bonusBenefitStyles,
+          !description && !title ? 'justify-center' : '',
+        )}
+      >
+        {title ? (
+          <Text size="text-h6" font="font-normal" align={cardTextAlign}>
+            {title}
+          </Text>
+        ) : null}
+        {icon ? <Img image={icon} height="180" className="w-auto" /> : null}
+        {description ? (
+          <Text size="text-h6" font="font-normal" align={cardTextAlign}>
+            {description}
+          </Text>
+        ) : null}
+      </div>
+    );

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

@@ -1,15 +1,10 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { type AlignType } from '../../model/AlignType';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import { type TextAlign } from '../../ui-kit/Text/TextProps';
 import { type BonusBenefit, type ColumnsCount } from './BonusBenefitsBlockContent';
 import { renderBonusBenefit } from './renderBonusBenefit';
 
 export const renderBonusBenefits = (
   bonusBenefits: BonusBenefit[],
   _columnsCount: ColumnsCount,
-  _cardTextAlign: AlignType,
-) => (
-  <SwipeListControl>
-    {bonusBenefits.map((_, i) => renderBonusBenefit({ ..._ }, i))}
-  </SwipeListControl>
-);
+  _cardTextAlign: TextAlign,
+) => <SwipeListControl>{bonusBenefits.map(renderBonusBenefit(_cardTextAlign))}</SwipeListControl>;

package/src/components/BonusBenefitsBlock/renderBonusBenefits.tsx

@@ -1,15 +1,14 @@
-import { AlignText } from '../../model/AlignText';
-import { type AlignType } from '../../model/AlignType';
+import { type TextAlign } from '../../ui-kit/Text/TextProps';
 import { type BonusBenefit, type ColumnsCount } from './BonusBenefitsBlockContent';
 import { renderBonusBenefit } from './renderBonusBenefit';
 
 export const renderBonusBenefits = (
   bonusBenefits: BonusBenefit[],
   columnsCount: ColumnsCount,
-  cardTextAlign: AlignType,
+  cardTextAlign: TextAlign,
 ) => (
-  <div className={`grid gap-2xs ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`}>
-    {bonusBenefits.map(renderBonusBenefit)}
+  <div className={`grid gap-2xs ${getElementsColsValue(columnsCount)}`}>
+    {bonusBenefits.map(renderBonusBenefit(cardTextAlign))}
   </div>
 );
 

package/src/components/BusinessBlock/BusinessBlock.example.json

@@ -31,7 +31,7 @@
         },
         {
           "icon": {
-            "icon": "PercentageSquareIcon",
+            "icon": "PercentageRoundIcon",
             "format": "webp",
             "size": { "width": 24, "height": 24 },
             "iconVersion": "color"
@@ -77,7 +77,7 @@
         },
         {
           "icon": {
-            "icon": "PercentageSquareIcon",
+            "icon": "PercentageRoundIcon",
             "format": "webp",
             "size": { "width": 24, "height": 24 },
             "iconVersion": "color"

package/src/components/BusinessBlock/BusinessBlock.fixture.tsx

@@ -25,7 +25,7 @@ const items: BusinessCardItemProps[] = [
     text: 'Пункт 2',
   },
   {
-    icon: { icon: 'PercentageSquareIcon' },
+    icon: { icon: 'PercentageRoundIcon' },
     text: 'Пункт 3',
   },
 ];

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

@@ -77,7 +77,7 @@ export default {
         {
           nav: {
             title: 'Обменивайте баллы на путешествия',
-            icon: { icon: 'PercentageSquareIcon' },
+            icon: { icon: 'PercentageRoundIcon' },
           },
           calculatorBlock: {
             title: 'Обменивайте баллы на путешествия',

package/src/components/Calculator/Calculator.fixture.tsx

@@ -109,7 +109,7 @@ export default {
           {
             nav: {
               title: 'Обменивайте баллы на путешествия',
-              icon: { icon: 'PercentageSquareIcon' },
+              icon: { icon: 'PercentageRoundIcon' },
             },
             calculatorBlock: BONUS_CALCULATOR_BLOCK,
           },
@@ -180,7 +180,7 @@ export default {
           {
             nav: {
               title: 'Обменивайте баллы на путешествия',
-              icon: { icon: 'PercentageSquareIcon' },
+              icon: { icon: 'PercentageRoundIcon' },
             },
             calculatorBlock: BONUS_CALCULATOR_BLOCK,
           },

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

@@ -1,6 +1,5 @@
-import '../../setup-fixture';
-
 import { type Picture } from '../../model/Picture';
+import '../../setup-fixture';
 import { type ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { type ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { CarouselTariffsCard } from './CarouselTariffsCard';
@@ -32,7 +31,7 @@ const buttonSecondary: ButtonProps = {
 
 const buttonIcon: ButtonContent = {
   text: 'App Store',
-  icon: { icon: 'DocIconMonoColor', iconVersion: 'color' },
+  icon: { icon: 'DocIcon', iconVersion: 'color' },
   href: 'rshb.ru',
   version: 'link',
 };

package/src/components/CarouselTariffsCard/CarouselTariffsCard.fixture.tsx

@@ -1,6 +1,5 @@
-import '../../setup-fixture';
-
 import { type Picture } from '../../model/Picture';
+import '../../setup-fixture';
 import { type ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { CarouselTariffsCard } from './CarouselTariffsCard';
 import { type CarouselTariffsCardContent } from './CarouselTariffsCardContent';
@@ -31,7 +30,7 @@ const buttonSecondary: ButtonContent = {
 
 const buttonIcon: ButtonContent = {
   text: 'App Store',
-  icon: { icon: 'DocIconMonoColor', iconVersion: 'color' },
+  icon: { icon: 'DocIcon' },
   href: 'rshb.ru',
   version: 'link',
 };

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

@@ -28,13 +28,13 @@ export const PICTURE_TEXT: PictureTextContent = {
       type: 'default',
       label: 'Кредит по одному документу',
       description: 'До 300 тыс ₽ по упрощённой процедуре получения кредита',
-      icon: { icon: 'DocumentTextIcon' },
+      icon: { icon: 'DocIcon' },
     },
     {
       type: 'default',
       label: 'Кредит на общих условиях',
       description: 'До 5 млн ₽ на общих условиях получения кредита',
-      icon: { icon: 'DocumentTextIcon', iconVersion: 'white' },
+      icon: { icon: 'DocIcon', iconVersion: 'white' },
     },
   ],
 };

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

@@ -1,6 +1,5 @@
-import '../../setup-fixture';
-
 import { type Picture } from '../../model/Picture';
+import '../../setup-fixture';
 import { PictureText } from './PictureText';
 import { type PictureTextContent } from './PictureTextContent';
 
@@ -42,13 +41,13 @@ export const PICTURE_TEXT: PictureTextContent = {
       type: 'default',
       label: 'Кредит по одному документу',
       description: 'До 300 тыс ₽ по упрощённой процедуре получения кредита',
-      icon: { icon: 'DocumentTextIcon' },
+      icon: { icon: 'DocIcon' },
     },
     {
       type: 'default',
       label: 'Кредит на общих условиях',
       description: 'До 5 млн ₽ на общих условиях получения кредита',
-      icon: { icon: 'DocumentTextIcon' },
+      icon: { icon: 'DocIcon' },
     },
   ],
   image,

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

@@ -40,7 +40,7 @@ const benefits: ComplexBenefitContent[] = [
     type: 'default',
     label: 'От 16,9%',
     description: 'Ставка по кредиту',
-    icon: { icon: 'PercentageSquareIcon' },
+    icon: { icon: 'PercentageRoundIcon' },
   },
   {
     type: 'default',

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -1,6 +1,5 @@
-import '../../setup-fixture';
-
 import { type Picture } from '../../model/Picture';
+import '../../setup-fixture';
 import { type ComplexBenefitContent } from '../../ui-kit/BenefitItem/BenefitItemContent';
 import { type ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { ProductBlock } from './ProductBlock';
@@ -27,7 +26,7 @@ const benefits: ComplexBenefitContent[] = [
     type: 'default',
     label: 'От 16,9%',
     description: 'Ставка по кредиту',
-    icon: { icon: 'PercentageSquareIcon' },
+    icon: { icon: 'PercentageRoundIcon' },
   },
   {
     type: 'default',

package/src/components/ProductBlock/ProductBlock.tsx

@@ -12,16 +12,23 @@ import { renderBackwardButton } from './renderBackwardButton';
 export interface ProductBlockProps extends UniBlockProps, ProductBlockContent {}
 
 export const ProductBlock = JSX<ProductBlockProps>(
-  ({ className, padding, backwardButton, ...rest }) => {
+  ({ className, padding, backwardButton, showBorder, ...rest }) => {
     const router = useRouter();
     const handleClick = useCallback((ev?: PreventableEvent) => {
       ev?.preventDefault();
       router.back();
     }, []);
+    const borderStyle = showBorder
+      ? 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider'
+      : '';
 
     return (
       <BlockWrapper
-        className={style('overflow-hidden flex flex-col gap-3xl box-border', className)}
+        className={style(
+          'overflow-hidden flex flex-col gap-3xl box-border',
+          borderStyle,
+          className,
+        )}
         defaultPadding="p-6xl"
         padding={padding}
         {...rest}

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -8,4 +8,6 @@ export type ProductBlockContent = UniBlockContent &
   BaseProductTileContent & {
     /** @title Отображать кнопку возврата (только для десктопной версии) */
     backwardButton?: boolean;
+    /** @title Показывать рамку вокруг блока */
+    showBorder?: boolean;
   };

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

@@ -102,7 +102,7 @@ export default {
             {
               type: 'default',
               label: 'В случае одобрения',
-              icon: { icon: 'PercentageSquareIcon' },
+              icon: { icon: 'PercentageRoundIcon' },
             },
             {
               type: 'default',
@@ -189,7 +189,7 @@ export default {
             {
               type: 'default',
               label: 'В случае одобрения',
-              icon: { icon: 'PercentageSquareIcon' },
+              icon: { icon: 'PercentageRoundIcon' },
             },
             {
               type: 'default',

package/src/components/StickyBottomMenu/StickyBottomMenu.mobile.tsx

@@ -40,7 +40,6 @@ export const StickyBottomMenu = JSX<StickyBottomMenuProps>(({ ...rest }) => {
       <BlockWrapper
         className="@container-normal fixed w-full h-[74px] bottom-0 left-0 my-0 mx-auto bg-transparent z-[100]"
         padding="p-0"
-        data-component="sticky-bottom-menu"
       >
         <RenderMenuItems menuItems={menuItemsWithButton} onClick={toggle} />
       </BlockWrapper>

package/src/icons/FaxIcon.svg

@@ -1 +1 @@
-<svg title="Факс" isInverse="true" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 12c-4 0-4 1.79-4 4v1c0 2.76 0 5 5 5h8c4 0 5-2.24 5-5v-1c0-2.21 0-4-4-4-1 0-1.28.21-1.8.6l-1.02 1.08a2.999 2.999 0 0 1-4.37 0L8.8 12.6C8.28 12.21 8 12 7 12ZM5 9.96V12M19 12V6c0-2.21 0-4-4-4H9C5 2 5 3.79 5 6" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.328 9.2h3.33M13.66 6.2h.84M9.5 6.2h1.58" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Факс" isInverse="true" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 12c-4 0-4 1.79-4 4v1c0 2.76 0 5 5 5h8c4 0 5-2.24 5-5v-1c0-2.21 0-4-4-4-1 0-1.28.21-1.8.6l-1.02 1.08a2.999 2.999 0 0 1-4.37 0L8.8 12.6C8.28 12.21 8 12 7 12ZM5 9.96V12M19 12V6c0-2.21 0-4-4-4H9C5 2 5 3.79 5 6" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.328 9.2h3.33M13.66 6.2h.84M9.5 6.2h1.58" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/icons/GeolocationIcon.svg

@@ -1,4 +1,4 @@
 <svg title="Геолокация" isInverse="true" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.5999 8.59219C12.5999 10.0255 11.4416 11.1922 9.9999 11.1922C8.55824 11.1922 7.3999 10.0339 7.3999 8.59219C7.3999 7.15052 8.56657 5.99219 9.9999 5.99219C10.2832 5.99219 10.5582 6.03385 10.8082 6.11719" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4.98314 3.58338C8.62481 0.158384 15.6831 1.33338 16.9831 7.09172C17.9415 11.3251 15.3081 14.9084 12.9998 17.1251C11.3248 18.7417 8.67481 18.7417 6.99147 17.1251C4.69147 14.9001 2.04981 11.3167 3.01647 7.08338" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.98314 3.58338C8.62481 0.158384 15.6831 1.33338 16.9831 7.09172C17.9415 11.3251 15.3081 14.9084 12.9998 17.1251C11.3248 18.7417 8.67481 18.7417 6.99147 17.1251C4.69147 14.9001 2.04981 11.3167 3.01647 7.08338" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>