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

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 = [
@@ -43,19 +43,19 @@ export default {
             label: 'В мобильном приложении или интернет-банке',
             description: 'Для всех клиентов Россельхозбанка',
             icon: { icon: 'SignDocsIcon' },
-            button: { text: 'Войти в интернет-банк' },
+            button: { text: 'Войти в интернет-банк', href: 'https://www.rshb.ru/' },
           },
           {
             label: 'Через Госуслуги',
             description: 'При наличии данных в Единой биометрической системе',
             icon: { icon: 'ClockIcon' },
-            button: { text: 'Оформить' },
+            button: { text: 'Оформить', href: 'https://www.rshb.ru/' },
           },
           {
             label: 'В офисах Россельхозбанка',
             description: 'Откройте вклад',
             icon: { icon: 'ComfortableCompIcon' },
-            button: { text: 'Офисы на карте' },
+            button: { text: 'Офисы на карте', href: 'https://www.rshb.ru/' },
           },
         ]}
       />

package/src/components/StepsBlock/StepsBlock.tsx

@@ -83,7 +83,7 @@ const renderStepTitle = (step: Step, i: number, isMainButton: boolean) => {
         <Button
           className="box-border mt-8 py-3 h-12 w-full max-w-[240px]"
           version="primary"
-          href="#"
+          href={step.button?.href}
         >
           {step.button.text}
         </Button>

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';
 

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

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { mobileContext } from '../../setup-fixture';
+import { mobileContext } from '../../react/setup-fixture';
 import { TextBlock } from './TextBlock';
 import { TextBlockContent } from './TextBlockContent';
 
@@ -25,112 +25,115 @@ export const TEXT_BLOCK: TextBlockContent = {
 };
 
 export default {
-  default: (
+  'private clients': (
     <div className="container grid grid-cols-12">
       <div className="col-span-12">
-        <div>
-          <p>Private clients</p>
-          <div className="flex flex-col gap-[6px]" data-theme="pc">
-            <TextBlock
-              context={mobileContext}
-              {...TEXT_BLOCK}
-              blockVersion="primary"
-              iconVersion="small"
-            />
-            <TextBlock
-              context={mobileContext}
-              {...TEXT_BLOCK}
-              blockVersion="primary"
-              iconVersion="big"
-              image={image}
-            />
-            <TextBlock
-              context={mobileContext}
-              {...TEXT_BLOCK}
-              blockVersion="primary"
-              iconVersion="none"
-            />
-            <TextBlock
-              context={mobileContext}
-              description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
-              blockVersion="primary"
-            />
-            <TextBlock
-              context={mobileContext}
-              title="Все карты Россельхозбанка работают"
-              blockVersion="primary"
-            />
-            <TextBlock
-              context={mobileContext}
-              title="Все карты Россельхозбанка работают"
-              blockVersion="primary"
-              iconVersion="small"
-              items={items}
-            />
-            <TextBlock
-              context={mobileContext}
-              title="Все карты Россельхозбанка работают"
-              description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
-              blockVersion="secondary"
-              iconVersion="small"
-              items={items}
-            />
-            <TextBlock
-              context={mobileContext}
-              title="Все карты Россельхозбанка работают"
-              description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
-              blockVersion="secondary-light"
-              iconVersion="small"
-              items={items}
-            />
-          </div>
+        <div className="flex flex-col gap-[6px]" data-theme="pc">
+          <TextBlock
+            context={mobileContext}
+            {...TEXT_BLOCK}
+            blockVersion="primary"
+            iconVersion="small"
+          />
+          <TextBlock
+            context={mobileContext}
+            {...TEXT_BLOCK}
+            blockVersion="primary"
+            iconVersion="big"
+            image={image}
+          />
+          <TextBlock
+            context={mobileContext}
+            {...TEXT_BLOCK}
+            blockVersion="primary"
+            iconVersion="none"
+          />
+          <TextBlock
+            context={mobileContext}
+            description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
+            blockVersion="primary"
+          />
+          <TextBlock
+            context={mobileContext}
+            title="Все карты Россельхозбанка работают"
+            blockVersion="primary"
+          />
+          <TextBlock
+            context={mobileContext}
+            title="Все карты Россельхозбанка работают"
+            blockVersion="primary"
+            iconVersion="small"
+            items={items}
+          />
+          <TextBlock
+            context={mobileContext}
+            title="Все карты Россельхозбанка работают"
+            description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
+            blockVersion="secondary"
+            iconVersion="small"
+            items={items}
+          />
+          <TextBlock
+            context={mobileContext}
+            title="Все карты Россельхозбанка работают"
+            description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
+            blockVersion="secondary-light"
+            iconVersion="small"
+            items={items}
+          />
         </div>
-        <div>
-          <p>Business clients</p>
-          <div className="flex flex-col gap-[6px]" data-theme="bc">
-            <TextBlock
-              className="flex flex-col"
-              context={mobileContext}
-              {...TEXT_BLOCK}
-              blockVersion="primary"
-              iconVersion="small"
-            />
-            <TextBlock
-              context={mobileContext}
-              {...TEXT_BLOCK}
-              iconVersion="small"
-              blockVersion="secondary"
-            />
-            <TextBlock
-              context={mobileContext}
-              {...TEXT_BLOCK}
-              iconVersion="small"
-              blockVersion="secondary-light"
-            />
-          </div>
+      </div>
+    </div>
+  ),
+  'business clients': (
+    <div className="container grid grid-cols-12">
+      <div className="col-span-12">
+        <div className="flex flex-col gap-[6px]" data-theme="bc">
+          <TextBlock
+            className="flex flex-col"
+            context={mobileContext}
+            {...TEXT_BLOCK}
+            blockVersion="primary"
+            iconVersion="small"
+          />
+          <TextBlock
+            context={mobileContext}
+            {...TEXT_BLOCK}
+            iconVersion="small"
+            blockVersion="secondary"
+          />
+          <TextBlock
+            context={mobileContext}
+            {...TEXT_BLOCK}
+            iconVersion="small"
+            blockVersion="secondary-light"
+          />
         </div>
-        <div>
-          <p>Ecosystem own</p>
-          <div className="flex flex-col gap-[6px]" data-theme="eo">
-            <TextBlock
-              context={mobileContext}
-              {...TEXT_BLOCK}
-              iconVersion="small"
-              blockVersion="primary"
-            />
-            <TextBlock
-              context={mobileContext}
-              {...TEXT_BLOCK}
-              iconVersion="small"
-              blockVersion="secondary"
-            />
-            <TextBlock
-              context={mobileContext}
-              {...TEXT_BLOCK}
-              iconVersion="small"
-              blockVersion="secondary-light"
-            />
-          </div>
+      </div>
+    </div>
+  ),
+  'ecosystem own': (
+    <div className="container grid grid-cols-12">
+      <div className="col-span-12">
+        <div className="flex flex-col gap-[6px]" data-theme="eo">
+          <TextBlock
+            context={mobileContext}
+            {...TEXT_BLOCK}
+            iconVersion="small"
+            blockVersion="primary"
+          />
+          <TextBlock
+            context={mobileContext}
+            {...TEXT_BLOCK}
+            iconVersion="small"
+            blockVersion="secondary"
+          />
+          <TextBlock
+            context={mobileContext}
+            {...TEXT_BLOCK}
+            iconVersion="small"
+            blockVersion="secondary-light"
+          />
         </div>
       </div>
     </div>