@redneckz/wildless-cms-uni-blocks 0.3.70 → 0.3.71

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

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 import { ProductBlock } from './ProductBlock';
@@ -77,7 +77,7 @@ export const PRODUCT_BLOCK: ProductBlockContent = {
 };
 
 export default {
-  default: (
+  'primary with back button': (
     <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
@@ -90,7 +90,10 @@ export default {
         buttons={buttons}
         image={image}
       />
-
+    </div>
+  ),
+  'primary with color benefits': (
+    <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
@@ -102,8 +105,20 @@ export default {
         buttons={buttons}
         image={image}
       />
+    </div>
+  ),
+  'primary with list': (
+    <div className="container grid grid-cols-12">
       <ProductBlock className="col-span-12" context={context} {...PRODUCT_BLOCK} image={image} />
+    </div>
+  ),
+  'primary without image': (
+    <div className="container grid grid-cols-12">
       <ProductBlock className="col-span-12" context={context} {...PRODUCT_BLOCK} />
+    </div>
+  ),
+  'primary with default benefits': (
+    <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
@@ -115,7 +130,7 @@ export default {
       />
     </div>
   ),
-  secondary: (
+  'secondary with back button': (
     <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
@@ -129,7 +144,10 @@ export default {
         image={image}
         version="secondary"
       />
-
+    </div>
+  ),
+  'secondary with benefits': (
+    <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
@@ -142,6 +160,10 @@ export default {
         image={image}
         version="secondary"
       />
+    </div>
+  ),
+  'secondary with list': (
+    <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
@@ -149,12 +171,20 @@ export default {
         image={image}
         version="secondary"
       />
+    </div>
+  ),
+  'secondary without image': (
+    <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
         {...PRODUCT_BLOCK}
         version="secondary"
       />
+    </div>
+  ),
+  'secondary without back button': (
+    <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}

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

@@ -56,7 +56,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             {description ? (
               <Description className="mt-3 text-m-md" description={description} />
             ) : null}
-            {benefits?.filter((items) => items.label)?.length ? (
+            {benefits?.filter((_) => _.label)?.length ? (
               <div className="mt-3">
                 {benefits.map((benefit, i) =>
                   renderBenefit({ benefit, version, benefitsVersion }, i),

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -42,7 +42,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
                 description={description}
               />
             ) : null}
-            {benefits?.filter((items) => items.label)?.length ? (
+            {benefits?.filter((_) => _.label)?.length ? (
               <div className="flex gap-6 mt-6">
                 {benefits.map((benefit, i) =>
                   renderBenefit({ benefit, version, benefitsVersion }, i),

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

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { ProductGallery } from './ProductGallery';
 
 const moneyImage: Picture = {

package/src/components/ProductGallery/ProductGallery.fixture.tsx

@@ -1,7 +1,7 @@
-import { context } from '../../setup-fixture';
-import { ProductGallery } from './ProductGallery';
 import type { Picture } from '../../model/Picture';
+import { context } from '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { ProductGallery } from './ProductGallery';
 
 const percentImage: Picture = {
   src: '3-6-percent.png',

package/src/components/ProductTile/ProductTile.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import type { Picture } from '../../model/Picture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';

package/src/components/ProductTile/ProductTile.tsx

@@ -61,7 +61,7 @@ export const ProductTile = JSX<ProductTileProps>(
           {description ? (
             <Description className="mt-4 max-w-[600px]" description={description} />
           ) : null}
-          {renderBenefits(benefits, version)}
+          {renderBenefits(benefits || [], version)}
 
           {additionalDescription
             ? renderAdditionalDescription(additionalDescription, version)
@@ -72,7 +72,7 @@ export const ProductTile = JSX<ProductTileProps>(
   },
 );
 
-function renderBenefits(benefits: TextBenefit[] = [], version: BlockVersion) {
+function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
   return (
     <div className="flex mt-5 mb-1">
       {benefits.length ? <div className="mr-8">{benefits.map(renderBenefitLabel)}</div> : null}

package/src/components/PromoTile/PromoTile.fixture.tsx

@@ -1,6 +1,6 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
+import { getCurrentDate } from '../../utils/getCurrentDate';
 import { PromoTile } from './PromoTile';
-import { getCurrentDate } from '../../utils/getCurrentDate'
 
 export default {
   default: (

package/src/components/Recommendation/Recommendation.fixture.tsx

@@ -1,6 +1,6 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { Recommendation, RecommendationProps } from './Recommendation';
 
 const creditCard: Picture = {
@@ -66,18 +66,23 @@ export const defaultProps: RecommendationProps = {
 
 export default {
   default: (
-    <div>
-      <div className="container grid grid-cols-12" data-theme="pc">
-        <Recommendation className="col-span-12 mb-1" {...defaultProps} version="secondary" />
-      </div>
-
-      <div className="container grid grid-cols-12" data-theme="bc">
-        <Recommendation className="col-span-12 mb-1" {...defaultProps} version="secondary" />
-      </div>
-
-      <div className="container grid grid-cols-12 mb-1">
-        <Recommendation className="col-span-12" {...defaultProps} />
-      </div>
+    <div className="container grid grid-cols-12 mb-1">
+      <Recommendation className="col-span-12" {...defaultProps} />
+    </div>
+  ),
+  'secondary private clients': (
+    <div className="container grid grid-cols-12" data-theme="pc">
+      <Recommendation className="col-span-12" {...defaultProps} version="secondary" />
+    </div>
+  ),
+  'secondary business clients': (
+    <div className="container grid grid-cols-12" data-theme="bc">
+      <Recommendation className="col-span-12" {...defaultProps} version="secondary" />
+    </div>
+  ),
+  'secondary ecosystem own': (
+    <div className="container grid grid-cols-12" data-theme="eo">
+      <Recommendation className="col-span-12" {...defaultProps} version="secondary" />
     </div>
   ),
 };

package/src/components/Recommendation/Recommendation.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { RecommendationCard } from './RecommendationCard';
 import type { RecommendationCardTypes, RecommendationContent } from './RecommendationContent';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 
 const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
 const CARD_FULL_VIEW_COUNT = 2;
@@ -87,20 +87,12 @@ const renderNavButtons = ({
 
   return (
     <div>
-      {showPrevButton ? (
-        <ArrowButton
-          className="absolute top-1/2 left-8 z-10 mt-6"
-          onClick={handlePrevClick}
-          ariaLabel="Пролистать влево"
-        />
-      ) : null}
-      {showNextButton ? (
-        <ArrowButton
-          className="absolute top-1/2 right-8 z-10 mt-6 rotate-180"
-          onClick={handleNextClick}
-          ariaLabel="Пролистать вправо"
-        />
-      ) : null}
+      {renderArrows({
+        handler: [handlePrevClick, handleNextClick],
+        isShown: [showPrevButton, showNextButton],
+        btnClass: ['left-8', 'right-8'],
+        className: 'top-1/2 mt-6',
+      })}
     </div>
   );
 };

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

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { StepsBlock } from './StepsBlock';
 
 const steps = [
@@ -17,7 +17,7 @@ const steps = [
 ];
 
 export default {
-  default: (
+  primary: (
     <div className="container grid grid-cols-12">
       <div className="col-span-12">
         <StepsBlock
@@ -27,12 +27,24 @@ export default {
           size="normal"
           steps={steps}
         />
+      </div>
+    </div>
+  ),
+  'primary small': (
+    <div className="container grid grid-cols-12">
+      <div className="col-span-12">
         <StepsBlock
           context={context}
           title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
           size="small"
           steps={steps}
         />
+      </div>
+    </div>
+  ),
+  'primary with images': (
+    <div className="container grid grid-cols-12">
+      <div className="col-span-12">
         <StepsBlock
           context={context}
           title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
@@ -58,6 +70,12 @@ export default {
             },
           ]}
         />
+      </div>
+    </div>
+  ),
+  'primary with icons': (
+    <div className="container grid grid-cols-12">
+      <div className="col-span-12">
         <StepsBlock
           context={context}
           title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
@@ -80,7 +98,6 @@ export default {
       </div>
     </div>
   ),
-
   secondary: (
     <div className="container grid grid-cols-12">
       <div className="col-span-12">
@@ -92,6 +109,12 @@ export default {
           steps={steps}
           version="secondary"
         />
+      </div>
+    </div>
+  ),
+  'secondary small': (
+    <div className="container grid grid-cols-12">
+      <div className="col-span-12">
         <StepsBlock
           context={context}
           title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
@@ -99,6 +122,12 @@ export default {
           steps={steps}
           version="secondary"
         />
+      </div>
+    </div>
+  ),
+  'secondary with images': (
+    <div className="container grid grid-cols-12">
+      <div className="col-span-12">
         <StepsBlock
           context={context}
           title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
@@ -125,6 +154,12 @@ export default {
           ]}
           version="secondary"
         />
+      </div>
+    </div>
+  ),
+  'secondary with icons': (
+    <div className="container grid grid-cols-12">
+      <div className="col-span-12">
         <StepsBlock
           context={context}
           title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"

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

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { StepsBlock } from './StepsBlock';
 
 const steps = [

package/src/components/TariffsTable/TariffsTable.example.json

@@ -83,11 +83,7 @@
           },
           {
             "list": {
-              "items": [
-                "item 1",
-                "item 2",
-                "item 3"
-              ]
+              "items": ["item 1", "item 2", "item 3"]
             }
           }
         ]

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

@@ -1,7 +1,7 @@
-import { mobileContext } from '../../setup-fixture';
+import type { Picture } from '../../model/Picture';
+import { mobileContext } from '../../react/setup-fixture';
 import { TariffsTable } from './TariffsTable';
 import type { TariffsTableColumn, TariffsTableRowHeader } from './TariffsTableContent';
-import type { Picture } from '../../model/Picture';
 
 const image: Picture = {
   src: 'payment-systems.png',
@@ -17,15 +17,11 @@ const image: Picture = {
 const rowHeaders: TariffsTableRowHeader[] = [
   { title: 'Начисление процентов на остаток по счету', icon: { icon: 'OkIcon' } },
   { title: 'Снятие наличных', icon: { icon: 'GlassIcon' } },
-  { title: 'Оформление онлайн', icon: { icon: 'ShieldTickIcon' } },
   { title: 'Кэшбэк баллами' },
   { title: 'Кнопки-иконки' },
-  { title: 'Стоимость SMS-сервиса' },
   { title: 'Дополнительная информация' },
   { title: 'Описание и кнопка' },
-  { title: 'Описание и кнопка' },
   { title: 'Описание и ссылка' },
-  { title: 'Описание и список' },
 ];
 
 const columns: TariffsTableColumn[] = [
@@ -42,7 +38,6 @@ const columns: TariffsTableColumn[] = [
           description: 'В сторонних банкоматах - 1 раз в месяц, далее 1% минимум 150 руб',
         },
       ],
-      [{ label: 'Нет' }],
       [{ label: 'Платёжные системы картинкой' }, { image: image }],
       [
         {
@@ -64,11 +59,6 @@ const columns: TariffsTableColumn[] = [
           ],
         },
       ],
-      [
-        {
-          label: 'Бесплатно',
-        },
-      ],
       [
         {
           image: {
@@ -94,19 +84,6 @@ const columns: TariffsTableColumn[] = [
           ],
         },
       ],
-      [
-        {
-          label: '30 тыс - 5 млн рублей',
-          buttons: [
-            {
-              text: 'Подробнее',
-              version: 'secondary',
-              href: '/',
-              target: '_blank',
-            },
-          ],
-        },
-      ],
       [
         {
           label: '30 тыс - 5 млн рублей',
@@ -118,11 +95,6 @@ const columns: TariffsTableColumn[] = [
               version: 'link',
             },
           ],
-        },
-      ],
-      [
-        {
-          label: '30 тыс - 5 млн рублей',
           list: {
             items: ['item 1', 'item 2', 'item 3'],
           },

package/src/components/TariffsTable/TariffsTable.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { TariffsTable } from './TariffsTable';
 import type { TariffsTableColumn, TariffsTableRowHeader } from './TariffsTableContent';