@redneckz/wildless-cms-uni-blocks 0.3.44 → 0.3.45

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

@@ -1,8 +1,8 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
-import { ProductBlock } from './ProductBlock';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
-import type { ButtonWithIconProps, ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { ProductBlock } from './ProductBlock';
 import type { ProductBlockContent } from './ProductBlockContent';
 
 const image: Picture = {
@@ -54,9 +54,10 @@ const items = [
   'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
 ];
 
-const backwardButton: ButtonProps = {
+const backwardButton: ButtonWithIconProps = {
   href: 'https://rshb.ru',
   text: 'Все кредитные карты',
+  icon: { icon: 'ArrowLeftIcon' },
 };
 
 export const PRODUCT_BLOCK: ProductBlockContent = {
@@ -72,7 +73,7 @@ export default {
       <ProductBlock
         className="col-span-12"
         context={context}
-        title={'Потребительский кредит наличными'}
+        title="Потребительский кредит наличными"
         headingType="h2"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}
@@ -86,9 +87,9 @@ export default {
       <ProductBlock
         context={context}
         className="col-span-12"
-        title={'Потребительский кредит наличными'}
+        title="Потребительский кредит наличными"
         headingType="h2"
-        version={'secondary'}
+        version="secondary"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}
         buttons={[
@@ -119,7 +120,7 @@ export default {
       <ProductBlock
         className="col-span-12"
         context={context}
-        title={'Потребительский кредит наличными'}
+        title="Потребительский кредит наличными"
         headingType="h1"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}

package/src/components/ProductBlock/ProductBlock.tsx

@@ -25,19 +25,19 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
     context,
     className = '',
     breadcrumbs,
+    backwardButton,
     version = 'primary',
     anchor = null,
     ...otherProps
   } = props;
   const router = context.useRouter();
   const { handlerDecorator } = context;
-
   return (
     <section
-      className={`font-sans overflow-hidden pt-10 pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap[version]} ${className}`}
+      className={`font-sans overflow-hidden pt-[50px] pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap[version]} ${className}`}
       id={anchor}
     >
-      {renderBackwardButton('Все дебетовые карты', version, 'mb-10')}
+      {backwardButton ? renderBackwardButton(backwardButton, version, 'mb-10 -mt-[10px]') : null}
       {breadcrumbs?.length ? (
         <div className="text-xs mb-6">
           {joinList(<span className={`mx-2 ${breadcrumbsStyleMap[version]}`}>/</span>)(

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,6 +1,6 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { ButtonContent, ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonContent, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
@@ -32,8 +32,6 @@ export type ProductBlockInnerContent = HeadingContent &
      * @hidden
      */
     textBlockClassName?: string;
-    /** @title Текст кнопки возврата */
-    backwardButton?: ButtonProps;
   };
 
 /**
@@ -42,4 +40,6 @@ export type ProductBlockInnerContent = HeadingContent &
 export interface ProductBlockContent extends ProductBlockInnerContent {
   /** @title Хлебные крошки */
   breadcrumbs?: LinkProps[];
+  /** @title Кнопка возврата */
+  backwardButton?: ButtonWithIconProps;
 }

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -1,34 +1,24 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import { Button } from '../../ui-kit/Button/Button';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
 
-const backwardBgStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-primary-main',
-  secondary: 'bg-white',
-};
-
-const backwardIconStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-white',
-  secondary: 'text-primary-text',
-};
-
-export function renderBackwardButton(text: string, version: BlockVersion, className: string) {
+export function renderBackwardButton(
+  button: ButtonWithIconProps,
+  version: BlockVersion,
+  className: string,
+) {
   return (
     <div className={`flex items-center ${className}`}>
       <Button
+        version={version}
         rounded
-        className={`w-12 h-12 min-h-12 max-h-12 flex items-center justify-center mr-3 ${backwardBgStyleMap[version]}`}
-        ariaLabel={text}
+        className="w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3"
+        ariaLabel={button?.text}
       >
-        <Img
-          className={`w-4 h-4 min-w-4 min-h-4 rounded-full box-border ${backwardIconStyleMap[version]}`}
-          image={{ icon: 'ArrowLeftIcon' }}
-          width="24"
-          height="24"
-          asSVG
-        />
+        <Img className="w-4 h-4" image={button?.icon || { icon: 'ArrowLeftIcon' }} asSVG />
       </Button>
-      {text ? <span className="text-m-md">{text}</span> : null}
+      {button?.text ? <span className="text-m-md font-light">{button.text}</span> : null}
     </div>
   );
 }

package/src/components/ProductBlock/renderBenefit.tsx

@@ -27,12 +27,10 @@ export function renderBenefit(benefit: Benefit, i: number, version: string) {
           asSVG
         />
       ) : null}
-      <div className="flex gap-0.5 flex-col h-full max-w-[149px]">
-        <div className={`font-medium text-xl m-0 ${benefitTitleStyleMap[version]}`}>
-          {benefit.label}
-        </div>
+      <div className="flex gap-0.5 flex-col h-full max-w-[149px]  min-w-[149px]">
+        <div className={`text-xl m-0 ${benefitTitleStyleMap[version]}`}>{benefit.label}</div>
         {benefit.description && (
-          <div className={`font-normal text-m-md ${benefitDescStyleMap[version]}`}>
+          <div className={`font-light text-m-md ${benefitDescStyleMap[version]}`}>
             {benefit.description}
           </div>
         )}

package/src/components/Recommendation/Recommendation.tsx

@@ -89,14 +89,14 @@ const renderNavButtons = ({
     <div>
       {showPrevButton && (
         <ArrowButton
-          className="absolute top-1/2 left-8 rotate-180 z-10 mt-6"
+          className="absolute top-1/2 left-8 z-10 mt-6"
           onClick={handlePrevClick}
           ariaLabel="Пролистать влево"
         />
       )}
       {showNextButton && (
         <ArrowButton
-          className="absolute top-1/2 right-8 z-10 mt-6"
+          className="absolute top-1/2 right-8 z-10 mt-6 rotate-180"
           onClick={handleNextClick}
           ariaLabel="Пролистать вправо"
         />

package/src/components/StepsBlock/StepsBlock.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Button } from '../../ui-kit/Button/Button';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { joinList } from '../../utils/joinList';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
@@ -24,7 +24,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
       >
         <Heading headingType="h2" className="max-w-[47rem] text-center" title={title} />
         {steps?.length ? (
-          <div className={`box-border py-0.5 mb-0.5 ${title ? 'mt-9' : ''}`}>
+          <div className={`box-border ${title ? 'mt-9' : ''}`}>
             <div className="flex items-center px-[88px]">
               {joinList(
                 <div
@@ -39,7 +39,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
         ) : null}
         {button?.text ? (
           <Button
-            className="box-border mt-[43px] py-3 h-12 w-full max-w-[240px]"
+            className="box-border mt-8 py-3 h-12 w-full max-w-[240px]"
             version="primary"
             href="#"
           >

package/src/icons/ArrowLeftIcon.svg

@@ -1,4 +1,4 @@
-<svg title="Стрелка 'Влево'" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg title="Стрелка" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M7 11.834L3 8.00065L7 4.16732" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
   <path d="M14 9.00195C14.5523 9.00195 15 8.55424 15 8.00195C15 7.44967 14.5523 7.00195 14 7.00195L14 9.00195ZM8 7.00195C7.44772 7.00195 7 7.44967 7 8.00195C7 8.55424 7.44772 9.00195 8 9.00195L8 7.00195ZM14 7.00195L8 7.00195L8 9.00195L14 9.00195L14 7.00195Z" fill="currentColor"/>
 </svg>

package/src/icons/IconName.ts

@@ -84,7 +84,7 @@ export enum IconTitleMap {
   ActualBalanceIcon = 'Деньги',
   AppleIcon = 'Лого «Apple»',
   ArrowDownIcon = "Стрелка 'Вниз'",
-  ArrowLeftIcon = "Стрелка 'Влево'",
+  ArrowLeftIcon = 'Стрелка',
   ArrowsRewindRight = 'ArrowsRewindRight',
   ArrowUpIcon = 'ArrowUpIcon',
   AtmIcon = 'Банкомат',
@@ -164,7 +164,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   "Деньги", "Лого «Apple»", "Стрелка 'Вниз'", "Стрелка 'Влево'", "ArrowsRewindRight", "ArrowUpIcon", "Банкомат", "Банк", "Бургер", "Бургер (белый)", "Календарь 2", "Скруглённый календарь", "Календарь", "Календарь с галочкой", "Календарь белый", "Кред. карта", "Кред. карта под наклоном", "Кред. карта с галочкой", "Карта с драгоценностями", "Деньги внутри кошелька", "Часы", "Крестик", "Кресло", "Кредитные карты", "Скидка", "Документ", "Документ (одноцветный)", "Документ с текстом", "Доллар", "Земля", "Пустой кошелёк с возвратом", "Пустой кошелёк", "Пустой кошелёк (белый)", "Евро", "Геолокация", "Зеркало", "Глобус", "Gps", "Сетка", "Сетка (белая)", "Диаграмма роста", "Скидка", "JCB", "Лупа", "MasterCard", "Минус", "МИР", "Деньги", "Денежное страхование", "Монитор и мобильный", "Новый документ", "Офис", "Лого «Одноклассники»", "Бизнес", "Проценты (круг.)", "Проценты", "Проценты белые", "Персональная карта", "Лого «PlayMarket»", "Плюс", "Профиль, 2 персоны", "Профиль", "Рубль (круг.)", "Сейф", "Безопасность", "Подписанные документы", "Маленькие часы", "Лого «Telegram»", "UnionPay", "Пользователь", "Visa", "Лого «VK»", "Пополнение карты", "Кошелёк с плюсом", "Кошелёк", "Кошелёк с деньгами"
+ *   "Деньги", "Лого «Apple»", "Стрелка 'Вниз'", "Стрелка", "ArrowsRewindRight", "ArrowUpIcon", "Банкомат", "Банк", "Бургер", "Бургер (белый)", "Календарь 2", "Скруглённый календарь", "Календарь", "Календарь с галочкой", "Календарь белый", "Кред. карта", "Кред. карта под наклоном", "Кред. карта с галочкой", "Карта с драгоценностями", "Деньги внутри кошелька", "Часы", "Крестик", "Кресло", "Кредитные карты", "Скидка", "Документ", "Документ (одноцветный)", "Документ с текстом", "Доллар", "Земля", "Пустой кошелёк с возвратом", "Пустой кошелёк", "Пустой кошелёк (белый)", "Евро", "Геолокация", "Зеркало", "Глобус", "Gps", "Сетка", "Сетка (белая)", "Диаграмма роста", "Скидка", "JCB", "Лупа", "MasterCard", "Минус", "МИР", "Деньги", "Денежное страхование", "Монитор и мобильный", "Новый документ", "Офис", "Лого «Одноклассники»", "Бизнес", "Проценты (круг.)", "Проценты", "Проценты белые", "Персональная карта", "Лого «PlayMarket»", "Плюс", "Профиль, 2 персоны", "Профиль", "Рубль (круг.)", "Сейф", "Безопасность", "Подписанные документы", "Маленькие часы", "Лого «Telegram»", "UnionPay", "Пользователь", "Visa", "Лого «VK»", "Пополнение карты", "Кошелёк с плюсом", "Кошелёк", "Кошелёк с деньгами"
  * ]
  */
 export type IconName =

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

@@ -1,20 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from './Button';
 import { ButtonProps } from './ButtonProps';
-import { SVG } from '../SVG';
-
-const ARROW_PATHS = [
-  {
-    d: 'm9 12 4-4-4-4',
-    stroke: 'currentColor',
-    strokeWidth: '2',
-    strokeLinecap: 'round',
-    fill: 'none',
-  },
-  {
-    d: 'M2 9a1 1 0 0 1 0-2v2Zm6-2a1 1 0 0 1 0 2V7ZM2 7h6v2H2V7Z',
-  },
-];
+import { Img } from '../Img/Img';
 
 export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) => (
   <Button
@@ -27,6 +14,12 @@ export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) =
     disabled={disabled}
     {...rest}
   >
-    <SVG paths={ARROW_PATHS} viewBox="0 0 16 16" fill="none" width="16" height="16" />
+    <Img
+      className="w-4 h-4 min-w-4 min-h-4 rounded-full box-border"
+      image={{ icon: 'ArrowLeftIcon' }}
+      width="16"
+      height="16"
+      asSVG
+    />
   </Button>
 ));

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

@@ -21,22 +21,26 @@ const buttonStyle = 'text-center font-sans select-none';
 export interface ButtonCommonProps extends ButtonProps, ButtonWithIconProps {}
 
 export const Button = JSX<ButtonCommonProps>((props) => {
-  const { text, aboveText, appendLeft, children, disabled, rounded } = props;
+  const { text, aboveText, appendLeft, children, disabled, rounded, ...rest } = props;
 
   const buttonInner = children ?? (
     <ButtonInner text={text} aboveText={aboveText} appendLeft={appendLeft} rounded={rounded} />
   );
 
   return disabled ? (
-    <DisabledButton {...props}>{buttonInner}</DisabledButton>
+    <DisabledButton rounded={rounded} {...rest}>
+      {buttonInner}
+    </DisabledButton>
   ) : (
-    <RegularButton {...props}>{buttonInner}</RegularButton>
+    <RegularButton rounded={rounded} {...rest}>
+      {buttonInner}
+    </RegularButton>
   );
 });
 
 export const RegularButton = JSX<ButtonCommonProps>(
   ({
-    className,
+    className = '',
     ariaLabel,
     version = 'none',
     rounded,
@@ -46,20 +50,17 @@ export const RegularButton = JSX<ButtonCommonProps>(
     onClick,
     ...rest
   }) => {
-    // Pick Button props to prevent forwarding into HTML <a> tag leading to errors being printed in console.
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { aboveText, appendLeft, ...linkProps } = rest;
     return (
       <a
         className={`${buttonStyle} inline-block cursor-pointer no-underline ${
           buttonStyleMap[version] || ''
-        } ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`}
+        } ${rounded ? 'rounded-full' : 'rounded-md'} ${className}`}
         href={href}
         target={target}
         onClick={onClick}
         aria-label={ariaLabel}
         role={href ? 'link' : 'button'}
-        {...linkProps}
+        {...rest}
       >
         {children}
       </a>

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

@@ -14,7 +14,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
       {isWithText(props) ? (
         <div>
           <div className="text-m-2xs font-light text-left">{aboveText}</div>
-          <div className="text-button text-left">{text}</div>
+          <div className="text-button-sm text-left">{text}</div>
         </div>
       ) : null}
     </div>

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

@@ -8,10 +8,10 @@ export interface HeadingProps extends HeadingContent, HeadingTypeContent {
 
 const HEADING_STYLE_MAP: Record<HeadingType, string> = {
   h1: 'text-title-xl tracking-[-0.3px]',
-  h2: 'text-title',
-  h3: 'text-title-sm',
-  h4: 'text-title-xs',
-  h5: 'text-title-2xs tracking-[0.2px]',
+  h2: 'text-title-lg',
+  h3: 'text-title',
+  h4: 'text-title-sm',
+  h5: 'text-title-xs',
   h6: 'text-title-2xs tracking-[0.2px]',
 };
 

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

@@ -8,13 +8,14 @@ export const TableArrowScrollControl = JSX<TableArrowScrollControlProps>(
       <div>
         <div className="absolute top-7 right-7 z-10">
           <ArrowButton
+            className="mt-4 rotate-180"
             onClick={onNextClick}
             disabled={!showNextButton}
             ariaLabel="Пролистать вправо"
             data-block-control="scroll-right"
           />
           <ArrowButton
-            className="mt-4 rotate-180"
+            className="mt-4"
             onClick={onPrevClick}
             disabled={!showPrevButton}
             ariaLabel="Пролистать влево"