@redneckz/wildless-cms-uni-blocks 0.3.11 → 0.3.14

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

@@ -0,0 +1,46 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { Tab, TabClickHandler, TabsProps } from './TabsProps';
+
+const TAB_STYLE = 'px-2 h-14 pb-2 pt-3 border border-b-0 border-main-stroke';
+const ACTIVE_TAB_STYLE = 'px-2 h-16 pt-4 pb-2 text-white bg-primary-main';
+
+export const Tabs = JSX<TabsProps>(({ tabs, currentTabIndex, onTabClick }) => {
+  return (
+    <div className="flex items-end border-b border-main-stroke" role="tablist">
+      {tabs?.map(renderTab(currentTabIndex, onTabClick))}
+    </div>
+  );
+});
+
+const renderTab =
+  (currentTabIndex: number, onTabClick: TabClickHandler) => (tab: Tab, index: number) => {
+    const isActive = currentTabIndex === index;
+    return (
+      <div
+        key={String(index)}
+        className={`flex h-full flex-1 cursor-pointer mr-2 last:mr-0 ${
+          isActive ? ACTIVE_TAB_STYLE : TAB_STYLE
+        }`}
+        role="tab"
+        onClick={() => onTabClick(index)}
+        aria-selected={String(isActive)}
+      >
+        {tab?.icon ? renderIcon(tab, isActive) : null}
+        <div>
+          {tab?.title ? <h3 className="font-medium m-0 text-base">{tab?.title}</h3> : null}
+          {tab?.description ? (
+            <span className={`font-light text-xs ${isActive ? '' : 'text-secondary-text'}`}>
+              {tab?.description}
+            </span>
+          ) : null}
+        </div>
+      </div>
+    );
+  };
+
+const renderIcon = (tab: Tab, isActive: boolean) => (
+  <div className="h-full mt-1" style={isActive ? { filter: 'invert(1)' } : null}>
+    <Icon className="w-5 h-5 mr-3" name={tab?.icon || 'CardIcon'} asSVG={!isActive} />
+  </div>
+);

package/mobile/src/ui-kit/Tabs/TabsProps.ts

@@ -0,0 +1,20 @@
+import type { IconName } from '../../icons/IconName';
+
+/**
+ * @title Вкладка
+ */
+export interface Tab {
+  /** @title Имя вкладки */
+  title?: string;
+  /** @title Описание */
+  description?: string;
+  icon?: IconName;
+}
+
+export type TabClickHandler = (value: number) => void;
+
+export interface TabsProps {
+  tabs?: Tab[];
+  currentTabIndex: number;
+  onTabClick: TabClickHandler;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.11",
+  "version": "0.3.14",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -99,14 +99,24 @@
     "cosmos:mobile": "cosmos --config cosmos.config.mobile.json",
     "precosmos:export": "npm run build:icons",
     "cosmos:export": "rimraf ./build && cosmos-export && cosmos-export --config cosmos.config.mobile.json",
-    "prepare": "husky install && npm run --prefix ./eslint-rules build || exit 0"
+    "prepare": "husky install && npm run --prefix ./eslint-rules build || exit 0",
+    "e2e": "cypress open",
+    "e2e:run": "cypress run --browser chrome --env type=actual",
+    "e2e:test": "npm run clean:diff && npm run e2e:run",
+    "e2e:base": "npm run create:base && npm run clean:diff && npm run clean:actual",
+    "create:base": "cypress run --browser chrome --env type=base --config screenshotsFolder=cypress/snapshots/base",
+    "clean:diff": "rimraf  ./cypress/snapshots/diff || exit 0",
+    "clean:actual": "rimraf ./cypress/snapshots/actual || exit 0"
   },
   "peerDependencies": {
+    "cypress": "^10.4.0",
+    "cypress-visual-regression": "^1.7.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
     "@redneckz/uni-jsx": "^0.1.6",
+    "cypress-visual-regression": "^1.7.0",
     "glob": "^8.0.3",
     "remark-html": "^15.0.1",
     "remark-parse": "^10.0.1",

package/src/common.css

@@ -136,4 +136,16 @@
     box-shadow: none;
     border: 3px solid #42ab44;
   }
+
+  /* Hide arrows */
+  input[type='number']::-webkit-outer-spin-button,
+  input[type='number']::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Hide arrows */
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
 }

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

@@ -58,8 +58,10 @@ const propsTextBlock: AccordionProps = {
   ],
 };
 
-export default (
-  <div className="container grid grid-cols-12">
-    <Accordion className="col-span-12" {...propsTextBlock} />
-  </div>
-);
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Accordion className="col-span-12" {...propsTextBlock} />
+    </div>
+  ),
+};

package/src/components/Accordion/Accordion.fixture.tsx

@@ -1,23 +1,25 @@
 import { context } from '../../setup-fixture';
+import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
 import { HEADLINE } from '../Headline/Headline.fixture';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
+import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
 import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
+import { PRODUCT_BLOCK } from '../ProductBlock/ProductBlock.fixture';
+import { PRODUCT_TILE, PRODUCT_PENSION_TILE } from '../ProductTile/ProductTile.fixture';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
-import { TILE } from '../Tile/Tile.fixture';
-import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
-import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
-import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
+import { TILE, TILE_PREMIUM } from '../Tile/Tile.fixture';
 import type { AccordionProps } from './Accordion';
 import { Accordion } from './Accordion';
 import type {
+  GalleryAccordionBlockDef,
   HeadlineAccordionBlockDef,
   LinkDocsAccordionBlockDef,
+  MiniGalleryAccordionBlockDef,
   PictureTextAccordionBlockDef,
+  ProductBlockAccordionBlockDef,
+  ProductTileAccordionBlockDef,
   TextBlockAccordionBlockDef,
   TileAccordionBlockDef,
-  ProductTileAccordionBlockDef,
-  GalleryAccordionBlockDef,
-  MiniGalleryAccordionBlockDef,
 } from './AccordionContent';
 
 const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockAccordionBlockDef = {
@@ -35,6 +37,11 @@ const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextAccordionBlockDef = {
   ...PICTURE_TEXT,
 };
 
+const PRODUCT_BLOCK_ACCORDION_BLOCK: ProductBlockAccordionBlockDef = {
+  accordionBlockType: 'ProductBlock',
+  ...PRODUCT_BLOCK,
+};
+
 const LINK_DOCS_ACCORDION_BLOCK: LinkDocsAccordionBlockDef = {
   accordionBlockType: 'LinkDocs',
   ...linkDocsContentExample,
@@ -46,11 +53,21 @@ const TILES_ACCORDION_BLOCK: TileAccordionBlockDef = {
   ...TILE,
 };
 
+const TILES_PREMIUM_ACCORDION_BLOCK: TileAccordionBlockDef = {
+  accordionBlockType: 'Tile',
+  ...TILE_PREMIUM,
+};
+
 const PRODUCT_TILES_ACCORDION_BLOCK: ProductTileAccordionBlockDef = {
   accordionBlockType: 'ProductTile',
   ...PRODUCT_TILE,
 };
 
+const PRODUCT_PENSION_TILES__ACCORDION_BLOCK: ProductTileAccordionBlockDef = {
+  accordionBlockType: 'ProductTile',
+  ...PRODUCT_PENSION_TILE,
+};
+
 const GALLERY_ACCORDION_BLOCK: GalleryAccordionBlockDef = {
   accordionBlockType: 'Gallery',
   ...GALLERY,
@@ -61,8 +78,7 @@ const MINI_GALLERY_ACCORDION_BLOCK: MiniGalleryAccordionBlockDef = {
   ...MINI_GALLERY,
 };
 
-const propsTextBlock: AccordionProps = {
-  title: 'Accordion title',
+const propsBlock: AccordionProps = {
   context,
   accordionItems: [
     {
@@ -100,8 +116,58 @@ const propsTextBlock: AccordionProps = {
   ],
 };
 
-export default (
-  <div className="container grid grid-cols-12">
-    <Accordion className="col-span-12" {...propsTextBlock} />
-  </div>
-);
+const propsTwoColumns: AccordionProps = {
+  context,
+  accordionItems: [
+    {
+      label: 'Другие продукты Россельхозбанка 1',
+      blocks: [
+        TILES_PREMIUM_ACCORDION_BLOCK,
+        TILES_PREMIUM_ACCORDION_BLOCK,
+        TILES_ACCORDION_BLOCK,
+        TILES_ACCORDION_BLOCK,
+      ],
+      columns: 2,
+    },
+    {
+      label: 'Другие продукты Россельхозбанка 2',
+      blocks: [
+        PRODUCT_TILES_ACCORDION_BLOCK,
+        PRODUCT_TILES_ACCORDION_BLOCK,
+        PRODUCT_PENSION_TILES__ACCORDION_BLOCK,
+        PRODUCT_PENSION_TILES__ACCORDION_BLOCK,
+      ],
+      columns: 2,
+    },
+    {
+      label: 'Другие продукты Россельхозбанка 3',
+      blocks: [PRODUCT_BLOCK_ACCORDION_BLOCK, PRODUCT_BLOCK_ACCORDION_BLOCK],
+      columns: 2,
+    },
+
+    {
+      label: 'Другие продукты Россельхозбанка 4',
+      blocks: [
+        TEXT_BLOCK_ACCORDION_BLOCK,
+        TEXT_BLOCK_ACCORDION_BLOCK,
+        TEXT_BLOCK_ACCORDION_BLOCK,
+        TEXT_BLOCK_ACCORDION_BLOCK,
+      ],
+      columns: 2,
+    },
+  ],
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Accordion className="col-span-12" {...propsBlock} />
+    </div>
+  ),
+
+  'two columns': (
+    <div className="container grid grid-cols-12">
+      <Accordion className="col-span-12" {...propsTwoColumns} />
+    </div>
+  ),
+};

package/src/components/Accordion/AccordionBlocks.tsx

@@ -1,6 +1,7 @@
 import { Headline } from '../Headline/Headline';
 import { LinkDocs } from '../LinkDocs/LinkDocs';
 import { PictureText } from '../PictureText/PictureText';
+import { ProductBlock } from '../ProductBlock/ProductBlock';
 import { TextBlock } from '../TextBlock/TextBlock';
 import { Tile } from '../Tile/Tile';
 import { ProductTile } from '../ProductTile/ProductTile';
@@ -13,6 +14,7 @@ export const AccordionBlocks = {
   LinkDocs,
   TextBlock,
   PictureText,
+  ProductBlock,
   Tile,
   ProductTile,
   Gallery,

package/src/components/Accordion/AccordionContent.ts

@@ -3,6 +3,7 @@ import type { HeadlineContent } from '../Headline/HeadlineContent';
 import type { LinkDocsContent } from '../LinkDocs/LinkDocsContent';
 import type { MiniGalleryContent } from '../MiniGallery/MiniGalleryContent';
 import type { PictureTextContent } from '../PictureText/PictureTextContent';
+import type { ProductBlockContent } from '../ProductBlock/ProductBlockContent';
 import type { ProductTileContent } from '../ProductTile/ProductTileContent';
 import type { TextBlockContent } from '../TextBlock/TextBlockContent';
 import type { TileContent } from '../Tile/TileContent';
@@ -18,6 +19,7 @@ export type AccordionBlockType =
   | 'PictureText'
   | 'Tile'
   | 'ProductTile'
+  | 'ProductBlock'
   | 'Gallery'
   | 'MiniGallery'
   | 'LinkList';
@@ -46,6 +48,11 @@ export type TextBlockAccordionBlockDef = TextBlockContent & AccordionBlockDef;
  */
 export type PictureTextAccordionBlockDef = PictureTextContent & AccordionBlockDef;
 
+/**
+ * @title Продуктовый блок
+ */
+export type ProductBlockAccordionBlockDef = ProductBlockContent & AccordionBlockDef;
+
 /**
  * @title Плитка
  */
@@ -85,12 +92,19 @@ export type AccordionBlockProps =
   | LinkDocsAccordionBlockDef
   | TextBlockAccordionBlockDef
   | PictureTextAccordionBlockDef
+  | ProductBlockAccordionBlockDef
   | TileAccordionBlockDef
   | ProductTileAccordionBlockDef
   | GalleryAccordionBlockDef
   | MiniGalleryAccordionBlockDef
   | LinkListAccordionBlockDef;
 
+/**
+ * @title Количество колонок
+ * @enumNames ["1 колонка", "2 колонки"]
+ */
+export type ColumnsCount = 1 | 2;
+
 /**
  * @title Элемент списка
  */
@@ -107,6 +121,8 @@ export interface AccordionItemCommonProps {
    * @default false
    */
   bordered?: boolean; // TODO: только для мобильной версии
+
+  columns?: ColumnsCount;
 }
 
 /**

package/src/components/Accordion/AccordionItem.mobile.tsx

@@ -26,13 +26,13 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, bordered,
         onClick={handleToggle}
       >
         <span
-          className={`text-sm pr-2.5 font-medium ${
+          className={`text-m-title-xs pr-2.5 font-medium ${
             hasContent ? 'group-hover:text-primary-main' : ''
           }`}
         >
           {label}
         </span>
-        {hasContent ? <Icon name={icon} width="20" height="20" asSVG /> : null}
+        {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
       </button>
       {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
     </li>

package/src/components/Accordion/AccordionItem.tsx

@@ -7,7 +7,7 @@ import { isActiveHandler } from './utils/isActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
-export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, context }) => {
+export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, columns, context }) => {
   const { hasContent, icon, handleToggle } = isActiveHandler({
     context,
     blocks,
@@ -29,7 +29,9 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, context }
         </span>
         {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
       </button>
-      {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
+      {hasContent ? (
+        <AccordionItemInner columns={columns} blocks={blocks} context={context} />
+      ) : null}
     </li>
   );
 });

package/src/components/Accordion/AccordionItemInner.mobile.tsx

@@ -21,7 +21,7 @@ const renderBlock = (context: ContentPageContext) => (block: AccordionBlockProps
 
   const AccordionBlock: JSXBlock = AccordionBlocks[type];
   return (
-    <div className="mb-5 last:mb-0" key={`block_${i}`}>
+    <div className="mb-5 last:mb-0 first:mt-2" key={`block_${i}`}>
       <AccordionBlock context={context} {...block} className="!p-0" />
     </div>
   );

package/src/components/Accordion/AccordionItemInner.tsx

@@ -5,24 +5,29 @@ import { AccordionBlocks } from './AccordionBlocks';
 import type { AccordionBlockProps } from './AccordionContent';
 import type { AccordionItemProps } from './AccordionItem';
 
-export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
+export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, columns = 1, context }) => {
   return (
-    <div className={'transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0'}>
-      {blocks?.length ? blocks.map(renderBlock(context)) : null}
+    <div
+      className={
+        'transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0 flex flex-wrap'
+      }
+    >
+      {blocks?.length ? blocks.map(renderBlock(context, columns)) : null}
     </div>
   );
 });
 
-const renderBlock = (context: ContentPageContext) => (block: AccordionBlockProps, i: number) => {
-  const type = block?.accordionBlockType;
-  if (!type || !(type in AccordionBlocks)) {
-    return null;
-  }
-
-  const AccordionBlock: JSXBlock = AccordionBlocks[type];
-  return (
-    <div className="mb-5 last:mb-0 pb-5" key={`block_${i}`}>
-      <AccordionBlock context={context} {...block} className="!p-0" />
-    </div>
-  );
-};
+const renderBlock =
+  (context: ContentPageContext, columns: number) => (block: AccordionBlockProps, i: number) => {
+    const type = block?.accordionBlockType;
+    if (!type || !(type in AccordionBlocks)) {
+      return null;
+    }
+    const columnsCountClass = columns === 2 ? 'w-1/2' : '';
+    const AccordionBlock: JSXBlock = AccordionBlocks[type];
+    return (
+      <div className={`mb-5 last:mb-0 pb-5 ${columnsCountClass}`} key={`block_${i}`}>
+        <AccordionBlock context={context} {...block} className="!p-0" />
+      </div>
+    );
+  };

package/src/components/BaseTile/BaseTile.tsx

@@ -12,7 +12,7 @@ export const BaseTile = JSX<BaseTileProps>(
         <div className="flex grow w-full justify-between">
           <div className="flex flex-col justify-between w-full">
             <div>{children}</div>
-            <div>{buttons}</div>
+            {buttons?.length ? <div>{buttons}</div> : null}
           </div>
           {image}
         </div>

package/src/components/BenefitsBlock/BenefitsBlock.fixture.tsx

@@ -2,36 +2,39 @@ import { context } from '../../setup-fixture';
 
 import { BenefitsBlock } from './BenefitsBlock';
 
-export default (
-  <div className="container grid grid-cols-12">
-    <BenefitsBlock
-      context={context}
-      className="col-span-12"
-      title="Преимущества кредита"
-      benefits={[
-        {
-          label: 'Без комиссии',
-          description:
-            'Комиссия за выдачу кредита не взимается. Допускается полное или частичное погашение кредита',
-          icon: 'ClockIcon',
-        },
-        {
-          label: 'Оформление по паспорту',
-          description: 'Обеспечение не требуется. Кредит можно получить на любые цели',
-          icon: 'SignDocsIcon',
-        },
-        {
-          label: 'Без залога и поручительства',
-          description:
-            'Единовременное перечисление суммы кредита в полном объёме на текущий счет в Банке',
-          icon: 'ComfortableCompIcon',
-        },
-        {
-          label: 'Деньги за 3 дня',
-          description: 'Рассмотрение заявки с момента предоставления полного комплекта документов',
-          icon: 'ActualBalanceIcon',
-        },
-      ]}
-    />
-  </div>
-);
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <BenefitsBlock
+        context={context}
+        className="col-span-12"
+        title="Преимущества кредита"
+        benefits={[
+          {
+            label: 'Без комиссии',
+            description:
+              'Комиссия за выдачу кредита не взимается. Допускается полное или частичное погашение кредита',
+            icon: 'ClockIcon',
+          },
+          {
+            label: 'Оформление по паспорту',
+            description: 'Обеспечение не требуется. Кредит можно получить на любые цели',
+            icon: 'SignDocsIcon',
+          },
+          {
+            label: 'Без залога и поручительства',
+            description:
+              'Единовременное перечисление суммы кредита в полном объёме на текущий счет в Банке',
+            icon: 'ComfortableCompIcon',
+          },
+          {
+            label: 'Деньги за 3 дня',
+            description:
+              'Рассмотрение заявки с момента предоставления полного комплекта документов',
+            icon: 'ActualBalanceIcon',
+          },
+        ]}
+      />
+    </div>
+  ),
+};

package/src/components/Blocks.mobile.ts

@@ -1,29 +1,33 @@
 import { Accordion } from './Accordion/Accordion';
+import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Gallery } from './Gallery/Gallery';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
 import { LinkDocs } from './LinkDocs/LinkDocs';
+import { LinkList } from './LinkList/LinkList';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { StepsBlock } from './StepsBlock/StepsBlock';
+import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
-import { LinkList } from './LinkList/LinkList';
 
 export const Blocks = {
   Accordion,
+  ComparisonTable,
   ExchangeRateTile,
   Footer,
   Gallery,
   Header,
   Headline,
   LinkDocs,
+  LinkList,
   MobileAppTile,
   ProductBlock,
   ProductGallery,
   StepsBlock,
+  TariffsTable,
   TextBlock,
-  LinkList,
 };

package/src/components/Blocks.ts

@@ -12,10 +12,12 @@ import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Navigation } from './Navigation/Navigation';
 import { PictureText } from './PictureText/PictureText';
+import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
+import { Recommendation } from './Recommendation/Recommendation';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
@@ -39,9 +41,11 @@ export const Blocks = {
   ProductGallery,
   ProductTile,
   PromoTile,
+  Recommendation,
   StepsBlock,
   TariffsTable,
   TextBlock,
   Tile,
   Navigation,
+  Placeholder,
 };