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

package/src/components/ExchangeRateOffice/ExchangeRateOffice.tsx

@@ -23,7 +23,7 @@ export const ExchangeRateOffice = JSX<ExchangeRateOfficeProps>(
             className="whitespace-pre-wrap text-h4 mb-5"
           />
           <div className="pl-11">
-            <Text size="text-m-light" align="text-left" color="text-secondary-text">
+            <Text size="text-m" font="font-light" align="text-left" color="text-secondary-text">
               {actuality}
             </Text>
           </div>
@@ -34,7 +34,12 @@ export const ExchangeRateOffice = JSX<ExchangeRateOfficeProps>(
               <thead>
                 <tr>
                   <th>
-                    <Text size="text-m-light" align="text-left" color="text-secondary-text">
+                    <Text
+                      size="text-m"
+                      font="font-light"
+                      align="text-left"
+                      color="text-secondary-text"
+                    >
                       Валюта
                     </Text>
                   </th>

package/src/components/ExchangeRateOffice/renderTableHeader.tsx

@@ -3,7 +3,7 @@ import { Text } from '../../ui-kit/Text/Text';
 export const renderTableHeader = (title: string) => {
   return (
     <th className="pl-11">
-      <Text size="text-m-light" align="text-left" color="text-secondary-text">
+      <Text size="text-m" font="font-light" align="text-left" color="text-secondary-text">
         {title}
       </Text>
     </th>

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -3,7 +3,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 import { formatCurrency } from './formatCurrency';
 
-const TABLE_HEAD_STYLE = 'text-left text-m-light text-secondary-text';
+const TABLE_HEAD_STYLE = 'text-left text-m font-light text-secondary-text';
 const TABLE_HEAD_STYLE_WITH_PL = `${TABLE_HEAD_STYLE} pl-11`;
 
 const CURRENCY_ICONS_MAP = {

package/src/components/Footer/Contacts.tsx

@@ -39,7 +39,7 @@ const renderContactsGroup = (item: ContactGroup, i: number) => (
 const renderContact = (item: ContactInfo, index: number) => (
   <div className="mb-4" key={String(index)}>
     <div>{renderText(item.type, item.text)}</div>
-    <div className="mt-1 text-s-light text-secondary-text">{item.description}</div>
+    <div className="mt-1 text-s font-light text-secondary-text">{item.description}</div>
   </div>
 );
 
@@ -56,7 +56,7 @@ const renderText = (type: ContactInfo['type'], text = '') => {
       );
     case 'email':
       return (
-        <a className="text-xl-light text-primary-text no-underline" href={`mailto:${text}`}>
+        <a className="text-xl font-light text-primary-text no-underline" href={`mailto:${text}`}>
           {text}
         </a>
       );

package/src/components/Footer/HorizontalNavigation.tsx

@@ -14,7 +14,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(({ className
             <HorizontalNavigationLink
               key={String(i)}
               index={i}
-              className="text-l-light max-w-[292px]"
+              className="text-l font-light max-w-[292px]"
               {..._}
             />
           ))}

package/src/components/Footer/SocialMedia.tsx

@@ -18,7 +18,7 @@ export const SocialMedia = JSX<SocialMediaProps>(
           <MediaButton key={String(index)} buttonSize={buttonSize} {..._} />
         ))}
       </div>
-      <Text size="text-s-light" color="text-secondary-text">
+      <Text size="text-s" font="font-light" color="text-secondary-text">
         {children}
       </Text>
     </div>

package/src/components/Footer/TextInformation.tsx

@@ -2,12 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import { Text } from '../../ui-kit/Text/Text';
 import type { FooterLink } from './FooterLink';
 import { TextInformationLink } from './TextInformationLink';
-import { textInformationTextSize } from './textInformationTextSize';
 
 export const TextInformation = JSX<FooterLink>(({ className = '', links }) => (
   <div className={className}>
     <div className="pt-4 xl:pt-5">
-      <Text size={textInformationTextSize} color="text-secondary-text">
+      <Text size="text-xs" font="font-light" color="text-secondary-text">
         {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
       </Text>
     </div>

package/src/components/Footer/TextInformationLink.tsx

@@ -15,7 +15,7 @@ export const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
 
     return (
       <a
-        className={`text-xs-light text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`}
+        className={`text-xs font-light text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`}
         href={href}
         target={target}
         onClick={onClick}

package/src/components/GracePeriod/GracePeriod.tsx

@@ -50,7 +50,7 @@ const renderCalendar = (calendar: CalendarItem[]) => {
             style={{ flexBasis: _.flexBasis }}
           >
             <div className="flex">{renderMonthImages(_)}</div>
-            <div className="text-s-light text-primary-text mt-3">
+            <div className="text-s font-light text-primary-text mt-3">
               <span>{_.text}</span>&thinsp;
               <span className="text-primary-main">{_.greenText}</span>
             </div>

package/src/components/Header/DropdownMenu.tsx

@@ -53,7 +53,7 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
             <a
               key={item.href || String(i)}
               className={style(
-                'text-l-light pb-4 hover:text-primary-main',
+                'text-l font-light pb-4 hover:text-primary-main',
                 item === activeItem ? 'text-primary-main' : '',
               )}
               {...link(linkProps)}

package/src/components/Headline/Headline.example.json

@@ -3,16 +3,6 @@
     "title": "Заголовок",
     "description": "Описание",
     "align": "center",
-    "bgColorHeadline": "transparent",
-    "headlineVersion": "M",
-    "image": {
-      "format": "webp",
-      "size": {
-        "width": 180,
-        "height": 180
-      },
-      "alt": "",
-      "title": ""
-    }
+    "headlineVersion": "M"
   }
 }

package/src/components/Headline/Headline.tsx

@@ -45,6 +45,7 @@ export const Headline = JSX<HeadlineProps>(
         {description ? (
           <Paragraph
             size={versionStyle.descriptionSize as TextSize}
+            font={versionStyle.descriptionWeight}
             align={align}
             {...descriptionStyle}
           >

package/src/components/Headline/HeadlineContent.ts

@@ -1,14 +1,12 @@
 import type { HeadlineProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { HeadingTagType } from '../../ui-kit/Heading/HeadingProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 
 /**
  * @title Заголовок
  */
 export type HeadlineContent = UniBlockContent &
-  HeadlineProps &
-  ImageContent & {
+  HeadlineProps & {
     /** @hidden */
     as?: HeadingTagType;
     /** @title Внутренний отступ блока */

package/src/components/Headline/headlineVersionStyles.ts

@@ -1,43 +1,50 @@
 import type { HeadlineSmallVersion, HeadlineVersion } from '../../model/HeadlineType';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
-import type { TextSize, TitleSize } from '../../ui-kit/Text/TextProps';
+import type { FontWeight, TextSize, TitleSize } from '../../ui-kit/Text/TextProps';
 
 export const headlineVersionStyles: Record<
   HeadlineVersion,
   {
     title: HeadingCommonProps;
     descriptionSize: TextSize | TitleSize;
+    descriptionWeight: FontWeight;
     descriptionStyle: string;
   }
 > = {
   XXL: {
     title: { headingType: 'h0', as: 'h1' },
     descriptionSize: 'text-h5',
+    descriptionWeight: 'font-normal',
     descriptionStyle: 'mt-m',
   },
   XL: {
     title: { headingType: 'h1', as: 'h1' },
-    descriptionSize: 'text-xl-light',
+    descriptionSize: 'text-xl',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-s',
   },
   L: {
     title: { headingType: 'h2', as: 'h2' },
-    descriptionSize: 'text-xl-light',
+    descriptionSize: 'text-xl',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-s',
   },
   M: {
     title: { headingType: 'h3', as: 'h2' },
-    descriptionSize: 'text-xl-light',
+    descriptionSize: 'text-xl',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-text',
   },
   S: {
     title: { headingType: 'h4', as: 'h2' },
-    descriptionSize: 'text-xl-light',
+    descriptionSize: 'text-xl',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-xs',
   },
   XS: {
     title: { headingType: 'h5', as: 'h2' },
-    descriptionSize: 'text-l-light',
+    descriptionSize: 'text-l',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-xs',
   },
 };

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -74,7 +74,7 @@ function renderNavButton({ title, i, isActive, onClick }: NavButtonProps) {
       key={String(i)}
       onClick={onClick}
       aria-label={title}
-      className={`box-border px-4 py-3 text-m-light ${btnClassName}`}
+      className={`box-border px-4 py-3 text-m font-light ${btnClassName}`}
     >
       {title}
     </button>

package/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -45,7 +45,7 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
 
   return (
     <BlockWrapper className={className} {...rest}>
-      <div className="container text-m-light">
+      <div className="container text-m font-light">
         {columns?.length ? (
           <div>
             <div className="flex items-end relative pl-9 pr-5 text-white">

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -33,7 +33,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
     return (
       <BlockWrapper
         className={style('min-h-80', className)}
-        defaultPadding="p-0"
+        padding="p-0"
         version={version}
         {...rest}
       >

package/src/components/MobileAppTile/renderList.tsx

@@ -2,9 +2,9 @@ import { List } from '../../ui-kit/List/List';
 
 export const renderList = (items?: string[]) => {
   return items?.length ? (
-    <List items={items} className="text-l-light mb-2 last:mb-0" />
+    <List items={items} className="text-l font-light mb-2 last:mb-0" />
   ) : (
-    <span className="text-m-light text-secondary-text">
+    <span className="text-m font-light text-secondary-text">
       Наведите камеру телефона на QR-код и скачайте приложение
     </span>
   );

package/src/components/OfficeMap/OfficeMap.tsx

@@ -57,7 +57,7 @@ export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
           <div className="text-h2">{name}</div>
           {renderCurrentDaySchedule(currentWeekDay)}
         </div>
-        <div className="flex text-l-light pt-4">
+        <div className="flex text-l font-light pt-4">
           <Icon name="GeolocationIcon" width="24" height="24" className="pr-1" />
           {address}
         </div>

package/src/components/OfficeMap/renderFunctions.tsx

@@ -1,4 +1,5 @@
 import { Icon } from '../../ui-kit/Icon/Icon';
+import { Text } from '../../ui-kit/Text/Text';
 import { NearbyOffices, WorkScheduleWeek } from './OfficeMapContent';
 
 export const renderCurrentDaySchedule = ({ lunchHour, status, workTime }: WorkScheduleWeek) => {
@@ -29,11 +30,11 @@ export const renderNearbyOffice = (
 ) => (
   <div className="flex mr-4" key={`nearbyOffice${index}`}>
     <Icon name={icon} width="16" height="16" className="mr-1" />
-    {title ? <span className="text-m">{title}&nbsp;</span> : null}
-    <span className="text-m-light">
+    {title ? <Text size="text-m">{title}&nbsp;</Text> : null}
+    <Text size="text-m" font="font-light">
       {distance ? ` (${distance})` : null}
       {time ? `, ${time}` : null}
-    </span>
+    </Text>
   </div>
 );
 export const renderDay = (
@@ -46,12 +47,12 @@ export const renderDay = (
   >
     <div className="flex justify-between items-center w-full pb-1 text-l text-primary-text">
       <div>{title}</div>
-      {status ? null : <div className="text-m-light text-error">Выходной</div>}
+      {status ? null : <div className="text-m font-light text-error">Выходной</div>}
       {status && workTime ? <div>{workTime}</div> : null}
     </div>
     {status && lunchHour ? renderLunchHour(lunchHour) : null}
     {description ? (
-      <div className="pb-1 text-s-light text-secondary-text">{description}</div>
+      <div className="pb-1 text-s font-light text-secondary-text">{description}</div>
     ) : null}
   </div>
 );
@@ -60,12 +61,12 @@ const renderLunchHour = (lunchHour: string) => {
   const hasTime = /\d+/gi.test(lunchHour);
 
   return hasTime ? (
-    <div className="flex justify-between items-center w-full pb-1 text-m-light text-error">
+    <div className="flex justify-between items-center w-full pb-1 text-m font-light text-error">
       <div>Перерыв</div>
       <div>{lunchHour}</div>
     </div>
   ) : (
-    <div className="flex justify-between items-center w-full pb-1 text-m-light text-primary-main">
+    <div className="flex justify-between items-center w-full pb-1 text-m font-light text-primary-main">
       <div>{lunchHour}</div>
     </div>
   );

package/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -3,6 +3,7 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import type {
   OfficeServicesBlockContent,
@@ -27,6 +28,10 @@ const renderListItems = (itemList: OfficeServicesBlockList, i: number) => (
     {itemList.icon ? (
       <Img className="mr-3 min-w-6 min-h-6 w-6 h-6" width="24" height="24" image={itemList.icon} />
     ) : null}
-    {itemList.label ? <span className="text-l-light">{itemList.label}</span> : null}
+    {itemList.label ? (
+      <Text size="text-l" font="font-light">
+        {itemList.label}
+      </Text>
+    ) : null}
   </li>
 );

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

@@ -2,6 +2,8 @@
   "content": {
     "title": "Блок с картинкой",
     "description": "Описание",
+    "headlineVersion": "M",
+    "align": "text-center",
     "image": {
       "format": "webp",
       "size": {
@@ -10,7 +12,6 @@
       }
     },
     "version": "primary",
-    "directionRight": false,
     "benefits": [
       {
         "type": "default",
@@ -30,6 +31,10 @@
       }
     ],
     "sum": 500000,
-    "monthLimit": 25000
+    "monthLimit": 25000,
+    "imageOptions": {
+      "directionRight": false,
+      "imageAlign": "center"
+    }
   }
 }

package/src/components/PictureText/PictureText.tsx

@@ -8,15 +8,26 @@ import { renderInsuranceSumMonth } from './renderInsuranceSumMonth';
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
 export const PictureText = JSX<PictureTextProps>(
-  ({ className, headlineVersion = 'M', align = 'text-center', sum, monthLimit, ...rest }) => (
-    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+  ({
+    className,
+    padding,
+    headlineVersion = 'M',
+    align = 'text-center',
+    sum,
+    monthLimit,
+    imageOptions,
+    ...rest
+  }) => (
+    <BlockWrapper className={className} padding="p-0" {...rest}>
       <BaseProductTile
         className="h-full"
+        defaultPadding="p-default"
+        padding={padding}
         headlineVersion={headlineVersion}
         align={align}
         isInsetTitle={false}
+        imageOptions={{ directionRight: false, imageAlign: 'center', ...imageOptions }}
         {...rest}
-        imageOptions={{ directionRight: false, imageAlign: 'center', ...rest.imageOptions }}
       >
         {renderInsuranceSumMonth(Number(sum), Number(monthLimit))}
       </BaseProductTile>

package/src/components/ProductBlock/ProductBlock.example.json

@@ -24,7 +24,6 @@
     ],
     "version": "primary",
     "benefitsVersion": "normal",
-    "benefitsCountOfRow": 3,
     "benefits": [
       {
         "label": "Преимущество №1",
@@ -39,6 +38,9 @@
         }
       }
     ],
-    "directionRight": true
+    "imageOptions": {
+      "directionRight": true,
+      "imageAlign": "end"
+    }
   }
 }

package/src/components/ProductBlock/ProductBlock.tsx

@@ -6,20 +6,24 @@ import { style } from '../../utils/style';
 import type { ProductBlockContent } from './ProductBlockContent';
 import { renderBackwardButton } from './renderBackwardButton';
 
-export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
+export interface ProductBlockProps extends UniBlockProps, ProductBlockContent {}
 
-export const ProductBlock = JSX<ProductBlockProps>(({ className, backwardButton, ...rest }) => (
-  <BlockWrapper
-    className={style('overflow-hidden flex flex-col gap-lg box-border', className)}
-    defaultPadding="p-default"
-    {...rest}
-  >
-    {backwardButton?.text
-      ? renderBackwardButton(
-          backwardButton,
-          !rest.version || rest.version === 'primary' ? 'primary' : 'white',
-        )
-      : null}
-    <BaseProductTile className="grow h-full" {...rest} />
-  </BlockWrapper>
-));
+export const ProductBlock = JSX<ProductBlockProps>(
+  ({ className, padding, backwardButton, ...rest }) => (
+    <BlockWrapper
+      className={style('overflow-hidden flex flex-col gap-lg box-border', className)}
+      defaultPadding="p-default"
+      padding={padding}
+      {...rest}
+    >
+      {backwardButton?.text
+        ? renderBackwardButton(
+            backwardButton,
+            !rest.version || rest.version === 'primary' ? 'primary' : 'white',
+          )
+        : null}
+
+      <BaseProductTile className="grow h-full" {...rest} />
+    </BlockWrapper>
+  ),
+);

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

@@ -8,20 +8,22 @@ import type { ProductGalleryContent } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
-export const ProductGallery = JSX<ProductGalleryProps>(({ className, slides = [], ...rest }) => (
-  <BlockWrapper
-    className={style('overflow-hidden relative', className)}
-    defaultPadding="p-m"
-    {...rest}
-  >
-    <SwipeListControl gap={0} padding={0}>
-      {slides
-        .map((s) => s.productBlock)
-        .map((_, i) => (
-          <div key={String(i)} className="box-border h-full" role="listitem">
-            <BaseProductTile className="px-5 h-full" headlineVersion="L" {..._} {...rest} />
-          </div>
-        ))}
-    </SwipeListControl>
-  </BlockWrapper>
-));
+export const ProductGallery = JSX<ProductGalleryProps>(
+  ({ className, padding, slides = [], ...rest }) => (
+    <BlockWrapper
+      className={style('overflow-hidden relative', className)}
+      padding={padding}
+      {...rest}
+    >
+      <SwipeListControl gap={0} padding={0}>
+        {slides
+          .map((s) => s.productBlock)
+          .map((_, i) => (
+            <div key={String(i)} className="box-border h-full" role="listitem">
+              <BaseProductTile className="px-5 h-full" headlineVersion="L" {..._} {...rest} />
+            </div>
+          ))}
+      </SwipeListControl>
+    </BlockWrapper>
+  ),
+);

package/src/components/ProductGallery/ProductGallery.tsx

@@ -9,13 +9,14 @@ import type { ProductGalleryContent, ProductSlide } from './ProductGalleryConten
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
 export const ProductGallery = JSX<ProductGalleryProps>(
-  ({ className = '', slides = [], ...rest }) => {
+  ({ className = '', padding, slides = [], ...rest }) => {
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
 
     return (
       <BlockWrapper
         className={style('box-border overflow-hidden', className)}
         defaultPadding="py-default"
+        padding={padding}
         {...rest}
       >
         <div
@@ -58,8 +59,8 @@ const renderNavButton =
       ? 'text-primary-text text-h6 py-2'
       : 'text-l pb-1 text-secondary-text group-data-secondary:text-white';
     const btnDescClassName = isActive
-      ? 'text-secondary-text text-l-light'
-      : 'text-m-light text-secondary-text group-data-secondary:text-white/80';
+      ? 'text-secondary-text text-l font-light'
+      : 'text-secondary-text text-m font-light group-data-secondary:text-white/80';
 
     return (
       <button

package/src/components/ProductTile/ProductTile.example.json

@@ -10,6 +10,7 @@
       }
     },
     "version": "primary",
+    "isTabularBenefits": true,
     "benefits": [
       {
         "type": "default",
@@ -34,7 +35,9 @@
       }
     ],
     "imageOptions": {
-      "directionRight": true
+      "directionRight": true,
+      "imageAlign": "end",
+      "isBackground": true
     }
   }
 }