@redneckz/wildless-cms-uni-blocks 0.4.3 → 0.4.5

package/src/components/TariffsTable/dataFixture.ts

@@ -0,0 +1,158 @@
+import type {
+  TariffsTableColumn,
+  TariffsTableContent,
+  TariffsTableRowHeader,
+  LabelDescriptionCellDef,
+  ListBlockDef,
+  InnerTableBlockDef,
+} from './TariffsTableContent';
+import type { Picture } from '../../model/Picture';
+
+const title = 'Заголовок';
+const description = 'Описание предоставляемого продукта';
+
+const image: Picture = {
+  src: 'payment-systems.png',
+  format: 'webp',
+  size: {
+    width: 288,
+    height: 56,
+  },
+  alt: 'Платёжные системы',
+  title: 'Платёжные системы',
+};
+
+const LABEL_BLOCK: LabelDescriptionCellDef = {
+  tableCellType: 'LabelDescription',
+  label: 'Заголовок без описания',
+};
+
+const LABEL_DESCRIPTION_BLOCK: LabelDescriptionCellDef = {
+  label: 'Ячейка 1-2',
+  tableCellType: 'LabelDescription',
+  description: 'Описание',
+};
+
+const TABLE_BLOCK: InnerTableBlockDef = {
+  tableCellType: 'Table',
+  dataUrl: 'tariffs-inner-table-data',
+};
+
+const DESCRIPTION_BLOCK: LabelDescriptionCellDef = {
+  tableCellType: 'LabelDescription',
+  description: 'Описание без заголовка',
+};
+
+const LIST_BLOCK: ListBlockDef = {
+  tableCellType: 'List',
+  isDotted: true,
+  items: ['Элемент списка 1', 'Элемент списка 2', 'Элемент списка 3'],
+};
+
+const rowHeaders: TariffsTableRowHeader[] = [
+  { title: 'Начисление процентов на остаток по счету', icon: { icon: 'OkIcon' } },
+  { title: 'Снятие наличных', icon: { icon: 'GlassIcon' } },
+  { title: 'Кэшбэк баллами' },
+  { title: 'Кнопки-иконки' },
+  { title: 'Дополнительная информация' },
+  { title: 'Описание и кнопка' },
+  { title: 'Описание и ссылка' },
+];
+
+export const columns: TariffsTableColumn[] = [
+  {
+    data: [
+      [LABEL_BLOCK, LIST_BLOCK, LABEL_DESCRIPTION_BLOCK, LIST_BLOCK],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'В банкоматах и кассах Россельхозбанка и банков-партнеров',
+          tableCellType: 'LabelDescription',
+        },
+        {
+          label: 'Бесплатно',
+          description: 'В сторонних банкоматах - 1 раз в месяц, далее 1% минимум 150 руб',
+          tableCellType: 'LabelDescription',
+        },
+      ],
+      [LABEL_BLOCK],
+      [
+        {
+          label: 'Платёжные системы картинкой',
+          tableCellType: 'LabelDescription',
+        },
+        {
+          image: image,
+          tableCellType: 'Img',
+        },
+      ],
+      [
+        { label: 'Кнопки-иконки', tableCellType: 'LabelDescription' },
+        {
+          tableCellType: 'Buttons',
+          buttons: [
+            {
+              icon: { icon: 'AppleIcon' },
+              rounded: true,
+              version: 'secondary',
+              href: '/',
+              target: '_blank',
+            },
+            {
+              icon: { icon: 'PlayMarketIcon' },
+              rounded: true,
+              version: 'secondary',
+              href: '/',
+              target: '_blank',
+            },
+          ],
+        },
+      ],
+      [
+        {
+          label: 'Бесплатно',
+          tableCellType: 'LabelDescription',
+        },
+      ],
+      [
+        {
+          image: {
+            src: 'money-1.png',
+            format: 'webp',
+            size: {
+              width: 140,
+              height: 140,
+            },
+            alt: 'Деньги',
+          },
+          tableCellType: 'Img',
+        },
+      ],
+    ],
+  },
+];
+
+export const columnsTable: TariffsTableColumn[] = [
+  {
+    data: [
+      [LABEL_BLOCK, LIST_BLOCK],
+      [TABLE_BLOCK, DESCRIPTION_BLOCK],
+      [LIST_BLOCK, DESCRIPTION_BLOCK],
+      [TABLE_BLOCK],
+    ],
+  },
+];
+
+export const TARIFFS_TABLE_FIXTURE_EXAMPLE: TariffsTableContent = {
+  title,
+  description,
+  tariffsColumns: columns,
+  rowHeaders,
+};
+
+export const TARIFFS_TABLE_INNER_TABLE_FIXTURE_EXAMPLE: TariffsTableContent = {
+  title,
+  description,
+  tariffsColumns: columnsTable,
+  rowHeaders,
+};

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

@@ -1,7 +1,7 @@
 import type { Picture } from '../../model/Picture';
 import { mobileContext } from '../../react/setup-fixture';
 import { TextBlock } from './TextBlock';
-import { TextBlockContent } from './TextBlockContent';
+import type { TextBlockContent } from './TextBlockContent';
 
 const image: Picture = {
   src: 'bank-card.png',

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

@@ -1,7 +1,7 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
 import { TextBlock } from './TextBlock';
-import { TextBlockContent } from './TextBlockContent';
+import type { TextBlockContent } from './TextBlockContent';
 
 const image: Picture = {
   src: 'bank-card.png',

package/src/components/Tile/Tile.example.json

@@ -9,6 +9,7 @@
     }
   },
   "isDotted": true,
+  "listItemSize": "M",
   "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
   "buttons": [
     {

package/src/components/Tile/Tile.fixture.tsx

@@ -29,8 +29,9 @@ const image4: Picture = {
 
 export const TILE: TileContent = {
   title: 'Кредиты',
-  headingType: 'h3',
-  isDotted: false,
+  headingType: 'h4',
+  isDotted: true,
+  listItemSize: 'L',
   items: ['До 3 млн ₽', 'до 5 лет'],
   buttons: [
     {
@@ -44,7 +45,7 @@ export const TILE: TileContent = {
 
 export const TILE_PREMIUM: TileContent = {
   title: 'Премиальные продукты',
-  headingType: 'h3',
+  headingType: 'h4',
   description:
     'Выделенные зоны обслуживания и персональный финансовый консультант. Полный спектр премиальных продуктов, подчеркивающих ваш статус',
   buttons: [
@@ -71,7 +72,7 @@ export default {
         version="secondary"
         className="col-span-4"
         title="Ипотека"
-        headingType="h3"
+        headingType="h4"
         items={[
           'Качественные фермерские продукты напрямую от производителей',
           'Самая большая база сельских туров по России',
@@ -95,7 +96,7 @@ export default {
         context={context}
         className="col-span-6"
         title="Банковские пластиковые карты"
-        headingType="h3"
+        headingType="h4"
         items={['Счета в разных валютах', 'Бесплатное обслуживание', 'Кэшбэк до 15% от покупок']}
         buttons={[
           {
@@ -120,7 +121,7 @@ export default {
         context={context}
         className="col-span-12 pr-28"
         title="Экосистема «СВОЕ», созданная для людей"
-        headingType="h3"
+        headingType="h4"
         items={[
           'Качественные фермерские продукты напрямую от производителей',
           'Самая большая база сельских туров по России',

package/src/components/Tile/Tile.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
@@ -7,6 +7,7 @@ import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
+import type { ListProps } from '../../ui-kit/List/ListProps';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
@@ -16,11 +17,6 @@ export interface TileProps extends TileContent, UniBlockProps {
   role?: string;
 }
 
-const tileStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
 export const Tile = JSX<TileProps>((props) => {
   const {
     context,
@@ -32,16 +28,18 @@ export const Tile = JSX<TileProps>((props) => {
     buttons,
     image,
     isDotted = true,
+    listItemSize = 'M',
     className = '',
     version = 'primary',
     ...rest
   } = props;
+  const headingClassName = version === 'primary' ? 'text-primary-text' : '';
 
   return (
     <BlockWrapper
       context={context}
       className={`overflow-hidden font-sans p-9 pr-3 box-border ${className} ${
-        tileStyleMap[version]
+        VersionStyleMap[version]
       } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
       {...rest}
     >
@@ -53,8 +51,7 @@ export const Tile = JSX<TileProps>((props) => {
               headingType={headingType}
               as="h2"
               title={title}
-              className={`whitespace-pre-wrap max-w-[600px] text-h4
-              ${version === 'primary' ? 'text-primary-text' : ''}`}
+              className={`whitespace-pre-wrap max-w-[600px] ${headingClassName}`}
             />
           ) : null
         }
@@ -63,7 +60,7 @@ export const Tile = JSX<TileProps>((props) => {
             <ButtonSection
               context={context}
               buttons={buttons.map((button) => ({ ...button, className: 'w-[158px]' }))}
-              className="flex mt-9 gap-3"
+              className="flex mt-8 gap-3"
             />
           ) : null
         }
@@ -73,16 +70,23 @@ export const Tile = JSX<TileProps>((props) => {
           <Description className="max-w-[600px] text-xl-light mt-2" description={description} />
         ) : null}
         {children}
-        {renderList(items, version, isDotted)}
+        {renderList(items, { version, isDotted, listItemSize })}
       </BaseTile>
     </BlockWrapper>
   );
 });
 
-function renderList(items, version, isDotted: boolean) {
+function renderList(items, { version, isDotted, listItemSize }: ListProps) {
   const listVersion = version === 'primary' ? 'tile' : 'tile-white';
 
   return items?.length ? (
-    <List items={items} isDotted={isDotted} itemClassName="text-h6 mt-2" version={listVersion} />
+    <List
+      items={items}
+      isDotted={isDotted}
+      className="mt-3"
+      listItemSize={listItemSize}
+      itemClassName="mb-1.5"
+      version={listVersion}
+    />
   ) : null;
 }

package/src/components/Tile/TileContent.ts

@@ -1,15 +1,16 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { DescriptionProps } from '../../model/HeadlineType';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { DescriptionProp } from '../../model/HeadlineType';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
+import type { ListItemSize } from '../../ui-kit/List/ListProps';
 
 /**
  * @title Плитка
  */
 export type TileContent = HeadingCommonProps &
-  DescriptionProp &
+  DescriptionProps &
   ListContent &
   ButtonContent &
   ImageContent & {
@@ -18,5 +19,6 @@ export type TileContent = HeadingCommonProps &
      *  @default true
      */
     isDotted?: boolean;
+    listItemSize?: ListItemSize;
     version?: BlockVersion;
   };

package/src/components/__snapshots__/Blocks.spec.tsx.snap

@@ -8,7 +8,7 @@ exports[`Blocks Accordion should render block "Accordion" without content 1`] =
 
 exports[`Blocks BenefitsBlock should render block "BenefitsBlock" without content 1`] = `
 <section
-  class="font-sans text-primary-text bg-white p-12 flex flex-col items-center "
+  class="font-sans text-primary-text p-12 flex flex-col items-center  bg-white"
 />
 `;
 
@@ -109,7 +109,7 @@ exports[`Blocks ExchangeRateTile should render block "ExchangeRateTile" without
       class="flex grow w-full justify-between"
     >
       <div
-        class="flex flex-col w-full"
+        class="flex flex-col justify-between w-full"
       >
         <div>
           <div
@@ -220,7 +220,7 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
         />
       </svg>
       <span
-        class="text-black font-medium ml-2.5"
+        class="text-black font-light ml-2.5"
       >
         Россельхозбанк
       </span>
@@ -260,7 +260,7 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
         value=""
       />
       <a
-        class="text-center font-sans select-none inline-block cursor-pointer no-underline focus:border-primary-focus focus:border text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active rounded-md invisible peer-focus:visible absolute top-1 right-1"
+        class="text-center font-sans select-none border border-transparent inline-block cursor-pointer no-underline focus:border-primary-focus focus:border text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active rounded-md invisible peer-focus:visible absolute top-1 right-1"
         role="button"
       >
         <div
@@ -282,7 +282,7 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
       >
         <a
           aria-label="Обратная связь"
-          class="text-center font-sans select-none inline-block cursor-pointer no-underline focus:border-primary-focus focus:border text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active rounded-md mb-6 w-full"
+          class="text-center font-sans select-none border border-transparent inline-block cursor-pointer no-underline focus:border-primary-focus focus:border text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active rounded-md mb-6 w-full"
           href="/"
           role="link"
           target="_blank"
@@ -388,12 +388,6 @@ exports[`Blocks GracePeriod should render block "GracePeriod" without content 1`
 </section>
 `;
 
-exports[`Blocks GroupBlock should render block "GroupBlock" without content 1`] = `
-<section
-  class="box-border "
-/>
-`;
-
 exports[`Blocks Header should render block "Header" without content 1`] = `
 <header
   class="pt-6 pb-5 px-20 bg-white "
@@ -429,7 +423,7 @@ exports[`Blocks Header should render block "Header" without content 1`] = `
           />
         </svg>
         <span
-          class="text-black font-medium ml-2.5"
+          class="text-black font-light ml-2.5"
         >
           Россельхозбанк
         </span>
@@ -478,7 +472,7 @@ exports[`Blocks Header should render block "Header" without content 1`] = `
               Иконка Лупа
             </desc>
             <use
-              class="text-black group-hover:text-primary-main pointer-events-none"
+              class="text-black group-hover:text-primary-hover group-hover:invert-0 pointer-events-none"
               href="icons/LoupeIcon.svg#icon"
               xlink:href="icons/LoupeIcon.svg#icon"
             />
@@ -492,7 +486,7 @@ exports[`Blocks Header should render block "Header" without content 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="h-full bg-main-divider rounded-full pointer-events-none"
+            class="h-full bg-main-divider/20 rounded-full pointer-events-none"
           >
             <title>
               Иконка Сетка (белая)
@@ -501,7 +495,7 @@ exports[`Blocks Header should render block "Header" without content 1`] = `
               Иконка Сетка (белая)
             </desc>
             <use
-              class="text-black group-hover:text-primary-main"
+              class="text-black group-hover:text-primary-hover group-hover:invert-0"
               href="icons/GridIcon.svg#icon"
               xlink:href="icons/GridIcon.svg#icon"
             />
@@ -591,7 +585,7 @@ exports[`Blocks MobileAppTile should render block "MobileAppTile" without conten
       class="flex grow w-full justify-between"
     >
       <div
-        class="flex flex-col w-full"
+        class="flex flex-col justify-between w-full"
       >
         <div>
           <div
@@ -620,12 +614,6 @@ exports[`Blocks Navigation should render block "Navigation" without content 1`]
 </section>
 `;
 
-exports[`Blocks NavigatorTabs should render block "NavigatorTabs" without content 1`] = `
-<section
-  class="sticky top-0 z-20 box-border flex gap-x-1 h-14 "
-/>
-`;
-
 exports[`Blocks OtherProducts should render block "OtherProducts" without content 1`] = `
 <section
   class="font-sans text-primary-text "
@@ -687,7 +675,7 @@ exports[`Blocks Placeholder should render block "Placeholder" without content 1`
 
 exports[`Blocks ProductBlock should render block "ProductBlock" without content 1`] = `
 <section
-  class="font-sans overflow-hidden p-[50px] flex flex-col box-border min-h-[528px] bg-white text-primary-text "
+  class="font-sans overflow-hidden p-[50px] flex flex-col box-border min-h-[454px] bg-white text-primary-text "
 >
   <div
     class="flex grow justify-between items-stretch h-full "
@@ -706,7 +694,7 @@ exports[`Blocks ProductBlock should render block "ProductBlock" without content
           class="flex grow w-full justify-between"
         >
           <div
-            class="flex flex-col w-full"
+            class="flex flex-col justify-between w-full"
           >
             <div />
           </div>
@@ -735,18 +723,14 @@ exports[`Blocks ProductGallery should render block "ProductGallery" without cont
 
 exports[`Blocks ProductTile should render block "ProductTile" without content 1`] = `
 <section
-  class="bg-white overflow-hidden text-primary-text font-sans p-9 box-border min-h-[364px] relative justify-between grid  bg-white text-primary-text pr-[9.4rem] min-h-[360px] "
+  class="overflow-hidden font-sans p-9 box-border relative justify-between grid  bg-white text-primary-text pr-[9.4rem] min-h-[360px]"
 >
+  <section
+    class="font-sans flex flex-col p-[50px] gap-2 bg-white !p-0 z-10 "
+  />
   <div
-    class="z-[1]"
-  >
-    <section
-      class="font-sans flex flex-col p-[50px] gap-2 bg-white !p-0"
-    />
-    <div
-      class="flex mt-3.5"
-    />
-  </div>
+    class="z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline max-w-[calc(100%-186px)]"
+  />
 </section>
 `;
 
@@ -757,22 +741,20 @@ exports[`Blocks PromoTile should render block "PromoTile" without content 1`] =
   <div
     class="font-sans flex flex-col grow h-full items-start "
   >
-    <div>
-      <section
-        class="font-sans flex flex-col p-[50px] gap-4 bg-white !p-0 max-w-[600px]"
+    <section
+      class="font-sans flex flex-col p-[50px] gap-4 bg-white !p-0 max-w-[600px]"
+    >
+      <h2
+        class="font-sans m-0 text-h2 whitespace-pre-wrap text-primary-text text-left"
       >
-        <h2
-          class="font-sans m-0 text-h2 whitespace-pre-wrap text-primary-text text-left"
-        >
-          Акции и спецпредложения
-        </h2>
-      </section>
-    </div>
+        Акции и спецпредложения
+      </h2>
+    </section>
     <div
       class="flex grow w-full justify-between"
     >
       <div
-        class="flex flex-col w-full"
+        class="flex flex-col justify-between w-full"
       >
         <div>
           <div
@@ -866,6 +848,12 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
+              <option
+                class=""
+                value="выберите отделение"
+              >
+                выберите отделение
+              </option>
               <option
                 class=""
                 value="МоскваОфис1"
@@ -1023,7 +1011,6 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               class="flex items-center relative cursor-pointer"
             >
               <input
-                checked=""
                 class="appearance-none flex justify-center items-center w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
                 name="contractType"
                 type="radio"
@@ -1041,6 +1028,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               class="flex items-center relative cursor-pointer"
             >
               <input
+                checked=""
                 class="appearance-none flex justify-center items-center w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
                 name="contractType"
                 type="radio"
@@ -1055,7 +1043,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
           </div>
         </div>
         <a
-          class="text-center font-sans select-none inline-block cursor-pointer no-underline focus:border-primary-focus focus:border text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active rounded-md "
+          class="text-center font-sans select-none border border-transparent inline-block cursor-pointer no-underline focus:border-primary-focus focus:border text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active rounded-md "
           role="button"
         >
           <div
@@ -1163,7 +1151,7 @@ exports[`Blocks Tabs should render block "Tabs" without content 1`] = `
 
 exports[`Blocks TariffsTable should render block "TariffsTable" without content 1`] = `
 <section
-  class="bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative "
+  class="bg-white font-sans p-[50px] overflow-hidden text-primary-text relative  "
 />
 `;
 
@@ -1188,7 +1176,7 @@ exports[`Blocks Tile should render block "Tile" without content 1`] = `
       class="flex grow w-full justify-between"
     >
       <div
-        class="flex flex-col w-full"
+        class="flex flex-col justify-between w-full"
       >
         <div />
       </div>

package/src/content-page-repository/transformContentPage.ts

@@ -18,11 +18,16 @@ export async function transformContentPage(
   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   return mapJSON<ContentPageDef>(JSON.parse(content), async (value: any, [key]) => {
     const isMarkdown = typeof value === 'string' && key?.endsWith('__md');
-    const isPicture = value && isLocalPath(value?.src);
+
     if (isMarkdown) {
       return await transformMarkdown(value);
-    } else if (isPicture) {
-      return await transformPicture(pagePath, value as Picture, options);
+    } else if (isPicture(value)) {
+      try {
+        return await transformPicture(pagePath, value, options);
+      } catch (ex) {
+        console.warn('Error while transforming picture on page: %s', pagePath);
+        console.error(ex);
+      }
     }
 
     return value;
@@ -34,3 +39,5 @@ const isLocalPath = (_: any): boolean => isString(_) && _.length < 512 && !isURL
 const isString = (_: any): _ is string => Boolean(_ && typeof _ === 'string');
 
 const isURL = (src: string) => ['data:', 'https:', 'http:'].some((proto) => src.startsWith(proto));
+
+const isPicture = (_: any): _ is Picture => Boolean(_ && isLocalPath(_?.src));