@redneckz/wildless-cms-uni-blocks 0.14.11 → 0.14.13

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

@@ -19,6 +19,7 @@
       }
     ],
     "version": "primary",
-    "listItemSize": "S"
+    "listItemSize": "S",
+    "isImageAlwaysOnRight": true
   }
 }

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -16,4 +16,6 @@ export type CarouselRecommendationCardContent = UniBlockContent &
   AlignProps & {
     /** @title Соц сети */
     socialMedia?: ButtonContent[];
+    /** @title Изображение всегда справа */
+    isImageAlwaysOnRight?: boolean;
   };

package/mobile/src/components/DepositFiltration/DepositFiltration.example.json

@@ -41,20 +41,6 @@
             "type": "number"
           }
         }
-      },
-      "period": {
-        "title": "Срок",
-        "type": "object",
-        "properties": {
-          "min": {
-            "title": "Минимум",
-            "type": "number"
-          },
-          "max": {
-            "title": "Максимум",
-            "type": "number"
-          }
-        }
       }
     },
     "sumInput": {

package/mobile/src/components/DepositFiltration/DepositFiltrationContent.ts

@@ -13,8 +13,6 @@ export type DepositFiltrationSchema = {
   percents?: StringArray;
   /** @hidden */
   sum?: NumberRange;
-  /** @hidden */
-  period?: NumberRange;
 };
 
 /**
@@ -32,7 +30,5 @@ export interface DepositFiltrationContent extends BaseFiltrationInnerContent {
   periodInput?: {
     /** @title Лейбл */
     title?: string;
-    min?: number;
-    max?: number;
   };
 }

package/mobile/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -44,7 +44,7 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
   }
 
   return (
-    <BlockWrapper className={className} {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-4xl" {...rest}>
       <div className="container text-m font-light space-y-4xl">
         {columns?.length ? (
           <div>

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

@@ -25,7 +25,7 @@ export const PictureText = JSX<PictureTextProps>(
         padding={padding}
         headlineVersion={headlineVersion}
         align={align}
-        isFullWidthTitle={false}
+        isFullWidthTitle={true}
         imageOptions={{ directionRight: false, imageAlign: 'center', ...imageOptions }}
         {...rest}
       >

package/mobile/src/components/Tile/Tile.tsx

@@ -15,6 +15,7 @@ export const Tile = JSX<TileProps>(
         padding={padding}
         headlineVersion={headlineVersion}
         listItemSize={listItemSize}
+        isFullWidthTitle={false}
         {...rest}
       />
     </BlockWrapper>

package/mobile/src/ui-kit/BaseFiltration/BaseFiltrationContent.ts

@@ -1,5 +1,5 @@
 import type { ButtonVersion } from '../../model/ButtonVersion';
-import type { DescriptionProps, TitleProps } from '../../model/HeadlineType';
+import type { DescriptionProps, LabelProps, TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Заголовок
@@ -99,9 +99,7 @@ export type ResetButton = {
  */
 export type NotFound = TitleProps & DescriptionProps;
 
-export interface BaseFiltrationInnerContent {
-  /** @title Название сворачивающейся кнопки */
-  label?: string;
+export type BaseFiltrationInnerContent = LabelProps & {
   /**
    * @title Количество отображаемых предметов
    * @minimum 1
@@ -109,4 +107,4 @@ export interface BaseFiltrationInnerContent {
   topItemsCount?: number;
   resetButton?: ResetButton;
   notFound?: NotFound;
-}
+};

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

@@ -54,7 +54,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
         className={className}
         padding={padding}
         defaultPadding={defaultPadding}
-        {...(isFullWidthTitle ? { insetTitle: headline } : { title: headline })}
+        {...(isFullWidthTitle ? { title: headline } : { insetTitle: headline })}
         {...leftOrRightImage(img, directionRight)}
         isImageSecondary={isImageSecondary}
         imageAlign={imageAlign}

package/mobile/src/ui-kit/BaseProductTile/BaseProductTileContent.ts

@@ -1,6 +1,6 @@
 import type { Align } from '../../model/Align';
 import type { BulletsProps } from '../../model/Bullets';
-import type { HeadlineProps } from '../../model/HeadlineType';
+import type { HeadlineProps, LabelProps } from '../../model/HeadlineType';
 import type { BenefitsListContent } from '../BenefitsList/BenefitsListContent';
 import type { ButtonsSectionContent } from '../Button/ButtonsSectionContent';
 import type { ImageContent } from '../Img/ImgProps';
@@ -27,9 +27,8 @@ export type BaseProductTileContent = HeadlineProps &
   BulletsProps &
   TagsContent &
   ButtonsSectionContent &
-  ImageContent & {
-    /** @title Лейбл (моб.) */
-    label?: string;
+  ImageContent &
+  LabelProps & {
     imageOptions?: TileImageOptions;
     /** @title Заголовок во всю ширину */
     isFullWidthTitle?: boolean;

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

@@ -33,7 +33,7 @@ export const BaseTile = JSX<BaseTileProps>(
     rightImage,
     imageAlign,
     isImageAlwaysOnRight = false,
-    isImageSecondary,
+    isImageSecondary = false,
     children,
   }) => (
     <div
@@ -63,7 +63,7 @@ export const BaseTile = JSX<BaseTileProps>(
           </div>
           {renderImageContainer(rightImage, {
             className: style(
-              '@xl:justify-self-end row-start-1 @xl:row-end-3 @xl:col-start-2',
+              '@xl:justify-self-end @xl:row-start-1 @xl:row-end-3 @xl:col-start-2 ',
               positionStyle(isImageAlwaysOnRight),
               isImageSecondary ? 'hidden @xl:block' : '',
             ),

package/mobile/src/ui-kit/Button/ArrowButton.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import { Img } from '../Img/Img';
 import { Button } from './Button';
 import type { ButtonProps } from './ButtonProps';
@@ -6,11 +7,13 @@ import type { ButtonProps } from './ButtonProps';
 export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) => (
   <Button
     rounded
-    className={`group/btn shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${
+    className={style(
+      'group/btn w-12 h-12 min-h-12 max-h-12 flex items-center justify-center shadow-main-black',
       disabled
         ? 'bg-secondary-light text-secondary-text'
-        : 'bg-white text-primary-text hover:text-primary-main'
-    } ${className || ''}`}
+        : 'bg-white text-primary-text hover:text-primary-main',
+      className || '',
+    )}
     disabled={disabled}
     {...rest}
   >

package/mobile/src/ui-kit/Button/renderButtonsSection.tsx

@@ -18,7 +18,9 @@ export const renderButtonsSection = (
     <div
       className={style(
         'flex',
-        isVertical ? 'flex-col gap-xs justify-items-stretch' : 'flex-wrap gap-lg sm:gap-m',
+        isVertical
+          ? 'flex-col gap-xs justify-items-stretch'
+          : 'flex-wrap @xl:flex-nowrap gap-lg sm:gap-m',
         className,
       )}
     >

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

@@ -36,7 +36,7 @@ export const CookiePopup = JSX<CookiePopupProps>(({ termLink, personalDataPolicy
 
   return opened ? (
     <div className="container fixed left-0 right-0 bottom-0 z-50">
-      <div className="bg-white m-xl p-xl rounded-md flex sm:items-center shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
+      <div className="bg-white m-xl p-xl rounded-md flex sm:items-center shadow-main-black">
         <div className="sm:flex-1">
           <Paragraph size="text-s" font="font-light" color="text-primary-text">
             АО «Россельхозбанк» использует

package/mobile/src/ui-kit/InputRange/renderRangeWithTicks.tsx

@@ -1,3 +1,4 @@
+import { style } from '../../utils/style';
 import { parseDecimal } from './parseDecimal';
 
 interface RangeWithTicksProps {
@@ -32,9 +33,10 @@ export function renderRangeWithTicks({
           {list.map((_, i) => (
             <div
               key={String(i)}
-              className={`w-2 h-2 rounded-full ${
-                rangeValue <= i || disabled ? 'bg-gray' : 'bg-primary-main'
-              }`}
+              className={style(
+                'w-2 h-2 rounded-full',
+                rangeValue <= i || disabled ? 'bg-gray' : 'bg-primary-main',
+              )}
             />
           ))}
         </div>

package/mobile/src/ui-kit/Select/SelectPopup.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
-import type { Option } from './Option';
 import { filterOptions } from './filterOptions';
 import { formatOption } from './formatOption';
+import type { Option } from './Option';
 
 export interface SelectPopupProps {
   popupRef?: { current: HTMLDivElement | null };
@@ -16,7 +16,7 @@ export interface SelectPopupProps {
 export const SelectPopup = JSX<SelectPopupProps>(({ popupRef, options, value, query, onChange }) =>
   options?.length ? (
     <div
-      className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]"
+      className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md s1hadow-black"
       role="listbox"
       ref={popupRef}
     >

package/mobile/src/ui-kit/YandexMap/renderSearchField.tsx

@@ -7,7 +7,7 @@ const styles = {
   border: 'border border-transparent rounded-md',
   position: 'relative flex items-center',
   font: 'text-center font-sans',
-  shadow: 'shadow-[0_4px_25px_rgba(0,0,0,0.07)]',
+  shadow: 'shadow-main-black',
 };
 
 export const renderSearchField = (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.11",
+  "version": "0.14.13",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Carousel/renderCardHighlight.tsx

@@ -10,7 +10,7 @@ interface CardHighlightProps {
 export const renderCardHighlight = ({ className, text = 'ХИТ' }: CardHighlightProps = {}) => (
   <div
     className={style(
-      'w-14 h-14 bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]',
+      'w-14 h-14 bg-white flex flex-col items-center justify-center rounded-md shadow-main-black',
       className,
     )}
   >

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

@@ -19,6 +19,7 @@
       }
     ],
     "version": "primary",
-    "listItemSize": "S"
+    "listItemSize": "S",
+    "isImageAlwaysOnRight": true
   }
 }

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -26,6 +26,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     target,
     title,
     align = 'text-left',
+    isImageAlwaysOnRight = true,
     ...rest
   }) => {
     return (
@@ -39,7 +40,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
             className="h-full"
             defaultPadding="p-m"
             padding={padding}
-            title={
+            insetTitle={
               title ? (
                 <Headline
                   title={title}
@@ -54,6 +55,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
             buttons={
               socialMedia.length ? <SocialMedia media={socialMedia} showButtonText={true} /> : null
             }
+            isImageAlwaysOnRight={isImageAlwaysOnRight}
           >
             {items.length ? <List items={items} listItemSize={listItemSize} /> : null}
           </BaseTile>

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -16,4 +16,6 @@ export type CarouselRecommendationCardContent = UniBlockContent &
   AlignProps & {
     /** @title Соц сети */
     socialMedia?: ButtonContent[];
+    /** @title Изображение всегда справа */
+    isImageAlwaysOnRight?: boolean;
   };

package/src/components/DepositFiltration/DepositFiltration.example.json

@@ -41,20 +41,6 @@
             "type": "number"
           }
         }
-      },
-      "period": {
-        "title": "Срок",
-        "type": "object",
-        "properties": {
-          "min": {
-            "title": "Минимум",
-            "type": "number"
-          },
-          "max": {
-            "title": "Максимум",
-            "type": "number"
-          }
-        }
       }
     },
     "sumInput": {

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

@@ -90,20 +90,6 @@ const SCHEMA: DepositFiltrationContent['filtrationSchema'] = {
       },
     },
   },
-  period: {
-    title: 'Срок',
-    type: 'object',
-    properties: {
-      min: {
-        title: 'Минимум',
-        type: 'number',
-      },
-      max: {
-        title: 'Максимум',
-        type: 'number',
-      },
-    },
-  },
 };
 
 const options = {
@@ -119,7 +105,7 @@ export default {
         filtrationSchema={SCHEMA}
         topItemsCount={2}
         sumInput={{ title: 'Сумма' }}
-        periodInput={{ title: 'Срок, месяцев', min: 3, max: 60 }}
+        periodInput={{ title: 'Срок, месяцев' }}
         resetButton={{ text: 'Очистить фильтры', version: 'secondary' }}
         notFound={{
           title: 'Нет подходящей программы',

package/src/components/DepositFiltration/DepositFiltration.fixture.tsx

@@ -90,20 +90,6 @@ const SCHEMA: DepositFiltrationContent['filtrationSchema'] = {
       },
     },
   },
-  period: {
-    title: 'Срок',
-    type: 'object',
-    properties: {
-      min: {
-        title: 'Минимум',
-        type: 'number',
-      },
-      max: {
-        title: 'Максимум',
-        type: 'number',
-      },
-    },
-  },
 };
 
 const options = {

package/src/components/DepositFiltration/DepositFiltrationContent.ts

@@ -13,8 +13,6 @@ export type DepositFiltrationSchema = {
   percents?: StringArray;
   /** @hidden */
   sum?: NumberRange;
-  /** @hidden */
-  period?: NumberRange;
 };
 
 /**
@@ -32,7 +30,5 @@ export interface DepositFiltrationContent extends BaseFiltrationInnerContent {
   periodInput?: {
     /** @title Лейбл */
     title?: string;
-    min?: number;
-    max?: number;
   };
 }

package/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -44,7 +44,7 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
   }
 
   return (
-    <BlockWrapper className={className} {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-4xl" {...rest}>
       <div className="container text-m font-light space-y-4xl">
         {columns?.length ? (
           <div>

package/src/components/PictureText/PictureText.tsx

@@ -25,7 +25,7 @@ export const PictureText = JSX<PictureTextProps>(
         padding={padding}
         headlineVersion={headlineVersion}
         align={align}
-        isFullWidthTitle={false}
+        isFullWidthTitle={true}
         imageOptions={{ directionRight: false, imageAlign: 'center', ...imageOptions }}
         {...rest}
       >

package/src/components/Tile/Tile.tsx

@@ -15,6 +15,7 @@ export const Tile = JSX<TileProps>(
         padding={padding}
         headlineVersion={headlineVersion}
         listItemSize={listItemSize}
+        isFullWidthTitle={false}
         {...rest}
       />
     </BlockWrapper>

package/src/ui-kit/BaseFiltration/BaseFiltrationContent.ts

@@ -1,5 +1,5 @@
 import type { ButtonVersion } from '../../model/ButtonVersion';
-import type { DescriptionProps, TitleProps } from '../../model/HeadlineType';
+import type { DescriptionProps, LabelProps, TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Заголовок
@@ -99,9 +99,7 @@ export type ResetButton = {
  */
 export type NotFound = TitleProps & DescriptionProps;
 
-export interface BaseFiltrationInnerContent {
-  /** @title Название сворачивающейся кнопки */
-  label?: string;
+export type BaseFiltrationInnerContent = LabelProps & {
   /**
    * @title Количество отображаемых предметов
    * @minimum 1
@@ -109,4 +107,4 @@ export interface BaseFiltrationInnerContent {
   topItemsCount?: number;
   resetButton?: ResetButton;
   notFound?: NotFound;
-}
+};

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

@@ -54,7 +54,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
         className={className}
         padding={padding}
         defaultPadding={defaultPadding}
-        {...(isFullWidthTitle ? { insetTitle: headline } : { title: headline })}
+        {...(isFullWidthTitle ? { title: headline } : { insetTitle: headline })}
         {...leftOrRightImage(img, directionRight)}
         isImageSecondary={isImageSecondary}
         imageAlign={imageAlign}

package/src/ui-kit/BaseProductTile/BaseProductTileContent.ts

@@ -1,6 +1,6 @@
 import type { Align } from '../../model/Align';
 import type { BulletsProps } from '../../model/Bullets';
-import type { HeadlineProps } from '../../model/HeadlineType';
+import type { HeadlineProps, LabelProps } from '../../model/HeadlineType';
 import type { BenefitsListContent } from '../BenefitsList/BenefitsListContent';
 import type { ButtonsSectionContent } from '../Button/ButtonsSectionContent';
 import type { ImageContent } from '../Img/ImgProps';
@@ -27,9 +27,8 @@ export type BaseProductTileContent = HeadlineProps &
   BulletsProps &
   TagsContent &
   ButtonsSectionContent &
-  ImageContent & {
-    /** @title Лейбл (моб.) */
-    label?: string;
+  ImageContent &
+  LabelProps & {
     imageOptions?: TileImageOptions;
     /** @title Заголовок во всю ширину */
     isFullWidthTitle?: boolean;

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

@@ -33,7 +33,7 @@ export const BaseTile = JSX<BaseTileProps>(
     rightImage,
     imageAlign,
     isImageAlwaysOnRight = false,
-    isImageSecondary,
+    isImageSecondary = false,
     children,
   }) => (
     <div
@@ -63,7 +63,7 @@ export const BaseTile = JSX<BaseTileProps>(
           </div>
           {renderImageContainer(rightImage, {
             className: style(
-              '@xl:justify-self-end row-start-1 @xl:row-end-3 @xl:col-start-2',
+              '@xl:justify-self-end @xl:row-start-1 @xl:row-end-3 @xl:col-start-2 ',
               positionStyle(isImageAlwaysOnRight),
               isImageSecondary ? 'hidden @xl:block' : '',
             ),

package/src/ui-kit/Button/ArrowButton.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import { Img } from '../Img/Img';
 import { Button } from './Button';
 import type { ButtonProps } from './ButtonProps';
@@ -6,11 +7,13 @@ import type { ButtonProps } from './ButtonProps';
 export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) => (
   <Button
     rounded
-    className={`group/btn shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${
+    className={style(
+      'group/btn w-12 h-12 min-h-12 max-h-12 flex items-center justify-center shadow-main-black',
       disabled
         ? 'bg-secondary-light text-secondary-text'
-        : 'bg-white text-primary-text hover:text-primary-main'
-    } ${className || ''}`}
+        : 'bg-white text-primary-text hover:text-primary-main',
+      className || '',
+    )}
     disabled={disabled}
     {...rest}
   >

package/src/ui-kit/Button/renderButtonsSection.tsx

@@ -18,7 +18,9 @@ export const renderButtonsSection = (
     <div
       className={style(
         'flex',
-        isVertical ? 'flex-col gap-xs justify-items-stretch' : 'flex-wrap gap-lg sm:gap-m',
+        isVertical
+          ? 'flex-col gap-xs justify-items-stretch'
+          : 'flex-wrap @xl:flex-nowrap gap-lg sm:gap-m',
         className,
       )}
     >

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

@@ -36,7 +36,7 @@ export const CookiePopup = JSX<CookiePopupProps>(({ termLink, personalDataPolicy
 
   return opened ? (
     <div className="container fixed left-0 right-0 bottom-0 z-50">
-      <div className="bg-white m-xl p-xl rounded-md flex sm:items-center shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
+      <div className="bg-white m-xl p-xl rounded-md flex sm:items-center shadow-main-black">
         <div className="sm:flex-1">
           <Paragraph size="text-s" font="font-light" color="text-primary-text">
             АО «Россельхозбанк» использует

package/src/ui-kit/InputRange/renderRangeWithTicks.tsx

@@ -1,3 +1,4 @@
+import { style } from '../../utils/style';
 import { parseDecimal } from './parseDecimal';
 
 interface RangeWithTicksProps {
@@ -32,9 +33,10 @@ export function renderRangeWithTicks({
           {list.map((_, i) => (
             <div
               key={String(i)}
-              className={`w-2 h-2 rounded-full ${
-                rangeValue <= i || disabled ? 'bg-gray' : 'bg-primary-main'
-              }`}
+              className={style(
+                'w-2 h-2 rounded-full',
+                rangeValue <= i || disabled ? 'bg-gray' : 'bg-primary-main',
+              )}
             />
           ))}
         </div>

package/src/ui-kit/Select/SelectPopup.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
-import type { Option } from './Option';
 import { filterOptions } from './filterOptions';
 import { formatOption } from './formatOption';
+import type { Option } from './Option';
 
 export interface SelectPopupProps {
   popupRef?: { current: HTMLDivElement | null };
@@ -16,7 +16,7 @@ export interface SelectPopupProps {
 export const SelectPopup = JSX<SelectPopupProps>(({ popupRef, options, value, query, onChange }) =>
   options?.length ? (
     <div
-      className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]"
+      className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md s1hadow-black"
       role="listbox"
       ref={popupRef}
     >

package/src/ui-kit/YandexMap/renderSearchField.tsx

@@ -7,7 +7,7 @@ const styles = {
   border: 'border border-transparent rounded-md',
   position: 'relative flex items-center',
   font: 'text-center font-sans',
-  shadow: 'shadow-[0_4px_25px_rgba(0,0,0,0.07)]',
+  shadow: 'shadow-main-black',
 };
 
 export const renderSearchField = (

package/tailwind.config.cjs

@@ -254,6 +254,7 @@ module.exports = {
         },
       },
       boxShadow: {
+        'main-black': '0 4px 25px rgba(0, 0, 0, 0.07)',
         'dark-blue': '0 18px 36px -4px rgba(24, 39, 75, 0.42);',
         'blue-gray': '0 14px 36px -4px rgba(21, 40, 90, 0.24);',
       },