@redneckz/wildless-cms-uni-blocks 0.2.115 → 0.3.1

package/src/components/ContentPage/normalizeBlock.mobile.spec.ts

@@ -0,0 +1,71 @@
+import { BlockDef } from '../../types';
+import { normalizeBlock } from './normalizeBlock.mobile';
+
+describe('normalizeBlock', () => {
+  it('should return new block definition where properties from "mobile" override desktop properties', () => {
+    const blockDef: BlockDef = {
+      type: 'TextBlock',
+      content: {
+        title: 'Desktop Title',
+        description: 'Desktop description',
+      },
+      mobile: {
+        type: 'TextBlock',
+        content: {
+          title: 'Mobile Title',
+        },
+      },
+    };
+
+    const mobileBlockDef: BlockDef = {
+      type: 'TextBlock',
+      content: {
+        title: 'Mobile Title',
+        description: 'Desktop description',
+      },
+    };
+
+    expect(normalizeBlock(blockDef)).toEqual(mobileBlockDef);
+  });
+
+  it('should return new block definition same to input', () => {
+    const blockDef: BlockDef = {
+      type: 'TextBlock',
+      content: {
+        title: 'Desktop Title',
+        description: 'Desktop description',
+      },
+    };
+
+    const mobileBlockDef: BlockDef = {
+      type: 'TextBlock',
+      content: {
+        title: 'Desktop Title',
+        description: 'Desktop description',
+      },
+    };
+
+    expect(normalizeBlock(blockDef)).toEqual(mobileBlockDef);
+  });
+
+  it('should return new block definition where content contains mobile content', () => {
+    const blockDef: BlockDef = {
+      type: 'TextBlock',
+      mobile: {
+        type: 'TextBlock',
+        content: {
+          title: 'Mobile Title',
+        },
+      },
+    };
+
+    const mobileBlockDef: BlockDef = {
+      type: 'TextBlock',
+      content: {
+        title: 'Mobile Title',
+      },
+    };
+
+    expect(normalizeBlock(blockDef)).toEqual(mobileBlockDef);
+  });
+});

package/src/components/ContentPage/normalizeBlock.mobile.ts

@@ -0,0 +1,6 @@
+import { BlockDef } from '../../types';
+
+export function normalizeBlock(block: BlockDef) {
+  const { mobile, ...rest } = block;
+  return mobile ? { ...rest, ...mobile, content: { ...rest.content, ...mobile.content } } : block;
+}

package/src/components/ContentPage/normalizeBlock.spec.ts

@@ -0,0 +1,50 @@
+import { BlockDef } from '../../types';
+import { normalizeBlock } from './normalizeBlock';
+
+describe('normalizeBlock', () => {
+  it('should return new block definition without "mobile" property', () => {
+    const blockDef: BlockDef = {
+      type: 'TextBlock',
+      content: {
+        title: 'Desktop Title',
+        description: 'Desktop description',
+      },
+      mobile: {
+        type: 'TextBlock',
+        content: {
+          title: 'Mobile Title',
+        },
+      },
+    };
+
+    const desktopBlockDef: BlockDef = {
+      type: 'TextBlock',
+      content: {
+        title: 'Desktop Title',
+        description: 'Desktop description',
+      },
+    };
+
+    expect(normalizeBlock(blockDef)).toEqual(desktopBlockDef);
+  });
+
+  it('should return new block definition same to input', () => {
+    const blockDef: BlockDef = {
+      type: 'TextBlock',
+      content: {
+        title: 'Desktop Title',
+        description: 'Desktop description',
+      },
+    };
+
+    const desktopBlockDef: BlockDef = {
+      type: 'TextBlock',
+      content: {
+        title: 'Desktop Title',
+        description: 'Desktop description',
+      },
+    };
+
+    expect(normalizeBlock(blockDef)).toEqual(desktopBlockDef);
+  });
+});

package/src/components/ContentPage/normalizeBlock.ts

@@ -0,0 +1,7 @@
+import { BlockDef } from '../../types';
+
+export function normalizeBlock(block: BlockDef) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { mobile, ...rest } = block;
+  return rest;
+}

package/src/components/ContentPage/{toMobilePage.ts → normalizePage.mobile.ts}

@@ -1,6 +1,15 @@
 import type { BlockDef, ContentPageDef } from '../../types';
+import { Blocks } from '../Blocks';
+import { isBlockInRegistry } from './isBlockInRegistry';
+import { normalizeBlock } from './normalizeBlock';
+
+export function normalizePage(
+  contentPage: ContentPageDef | undefined | null,
+): ContentPageDef | undefined {
+  if (!contentPage) {
+    return undefined;
+  }
 
-export function toMobilePage(contentPage: ContentPageDef): ContentPageDef {
   const { blocks, slots } = contentPage;
 
   return {
@@ -22,17 +31,7 @@ export function toMobilePage(contentPage: ContentPageDef): ContentPageDef {
 }
 
 function getMobileBlocks(blocks?: BlockDef[]) {
-  return blocks?.filter(({ mobile }) => !mobile?.hidden).map(toMobileBlock);
-}
-
-function toMobileBlock(block: BlockDef): BlockDef {
-  const { mobile } = block;
-  if (mobile) {
-    return {
-      ...block,
-      style: mobile.style?.length ? mobile.style : block.style,
-    };
-  } else {
-    return block;
-  }
+  return blocks
+    ?.filter((block) => isBlockInRegistry(block, Blocks) && !block.mobile?.hidden)
+    .map(normalizeBlock);
 }

package/src/components/ContentPage/normalizePage.ts

@@ -0,0 +1,35 @@
+import type { BlockDef, ContentPageDef } from '../../types';
+import { Blocks } from '../Blocks';
+import { isBlockInRegistry } from './isBlockInRegistry';
+import { normalizeBlock } from './normalizeBlock';
+
+export function normalizePage<T extends ContentPageDef | undefined | null>(
+  contentPage: T,
+): T extends ContentPageDef ? ContentPageDef : ContentPageDef | undefined {
+  if (!contentPage) {
+    return undefined as any;
+  }
+
+  const { blocks, slots } = contentPage;
+
+  return {
+    ...contentPage,
+    blocks: getDesktopBlocks(blocks),
+    slots:
+      slots &&
+      Object.keys(slots).reduce(
+        (res, key) => ({
+          ...res,
+          [key]: {
+            ...slots[key],
+            blocks: getDesktopBlocks(slots[key].blocks),
+          },
+        }),
+        {},
+      ),
+  };
+}
+
+function getDesktopBlocks(blocks?: BlockDef[]) {
+  return blocks?.filter((block) => isBlockInRegistry(block, Blocks)).map(normalizeBlock);
+}

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -1,8 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import { Tile } from '../Tile/Tile';
+import { BaseTile } from '../BaseTile/BaseTile';
+import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
+import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
+import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { ExchangeRateTileContent } from './ExchangeRateTileContent';
 
 export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlockProps {}
@@ -23,42 +28,46 @@ const buttons: ButtonProps[] = [
   },
 ];
 
-export const ExchangeRateTile = JSX<ExchangeRateTileProps>(({ className, context, title }) => {
-  const { data } = context.useAsyncData(CBR_EXCHANGE_RATE_URL, fetchExchangeRate);
-  return (
-    <Tile
-      className={className}
-      context={context}
-      title={title || 'Курсы обмена валют'}
-      buttons={buttons}
-    >
-      <table>
-        <thead>
-          <tr>
-            <CurrencyTH>Валюта</CurrencyTH>
-            <CurrencyTH className="pl-11">Курс</CurrencyTH>
-          </tr>
-        </thead>
-        <tbody>
-          {CURRENCY_CODES.map((code) => {
-            const value = (data?.Valute || {})[code]?.Value;
-            return (
-              <tr key={code}>
-                <CurrencyTD className="pt-4">
-                  <div className="flex items-center">
-                    <Icon name={CURRENCY_ICONS_MAP[code]} width="24" height="24" />
-                    <span className="ml-2">{code}</span>
-                  </div>
-                </CurrencyTD>
-                <CurrencyTD className="pt-4 pl-11">{formatCurrency(value)}</CurrencyTD>
+export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
+  ({ className = '', context, title = 'Курсы обмена валют' }) => {
+    const { data } = context.useAsyncData(CBR_EXCHANGE_RATE_URL, fetchExchangeRate);
+    return (
+      <section
+        className={`bg-white text-primary-text font-sans p-9 box-border ${className}  ${getTileRightPadding(
+          className,
+        )} ${getTileMinHeight(className)} `}
+      >
+        <BaseTile
+          context={context}
+          title={
+            title && (
+              <Heading
+                headingType={getTileHeadingType(className)}
+                title={title}
+                className={`whitespace-pre-wrap max-w-[600px]`}
+              />
+            )
+          }
+          buttons={
+            buttons?.length ? (
+              <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+            ) : null
+          }
+        >
+          <table>
+            <thead>
+              <tr>
+                <CurrencyTH>Валюта</CurrencyTH>
+                <CurrencyTH className="pl-11">Курс</CurrencyTH>
               </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    </Tile>
-  );
-});
+            </thead>
+            <tbody>{CURRENCY_CODES.map(renderCurrencyRow(data))}</tbody>
+          </table>
+        </BaseTile>
+      </section>
+    );
+  },
+);
 
 const CurrencyTH = JSX<{ className?: string }>(({ className = '', children }) => (
   <th className={`text-left font-normal text-sm text-secondary-text ${className}`}>{children}</th>
@@ -78,3 +87,18 @@ async function fetchExchangeRate(): Promise<{
 const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
 
 const formatCurrency = (value?: number) => (value ? currencyNumberFormat.format(value) : '');
+
+const renderCurrencyRow = (data) => (code: string) => {
+  const value = (data?.Valute || {})[code]?.Value;
+  return (
+    <tr key={code}>
+      <CurrencyTD className="pt-4">
+        <div className="flex items-center">
+          <Icon name={CURRENCY_ICONS_MAP[code]} width="24" height="24" />
+          <span className="ml-2">{code}</span>
+        </div>
+      </CurrencyTD>
+      <CurrencyTD className="pt-4 pl-11">{formatCurrency(value)}</CurrencyTD>
+    </tr>
+  );
+};

package/src/components/ExchangeRateTile/ExchangeRateTileContent.ts

@@ -1,7 +1,6 @@
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+
 /**
  * @title Курсы валют
  */
-export interface ExchangeRateTileContent {
-  /** @title Заголовок */
-  title?: string;
-}
+export type ExchangeRateTileContent = HeadingContent;

package/src/components/Footer/Footer.fixture.tsx

@@ -8,132 +8,6 @@ export default (
     <Footer
       className="col-span-12"
       topItems={[
-        {
-          href: DEFAULT_ORIGIN,
-          text: 'Частным клиентам',
-          target: '_blank',
-          items: [
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Кредитные карты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Дебетовые карты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Кредиты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Ипотека',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Вклады и сбережения',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Инвестиции',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Страхование',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Премиальным клиентам',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Биометрическая регистрация',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Перевод денег',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Обмен денег',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Акции',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Тарифы',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Архивная информация',
-            },
-          ],
-        },
-        {
-          href: DEFAULT_ORIGIN,
-          text: 'Бизнес клиентам',
-          target: '_blank',
-          items: [
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'РКО',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Кредиты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Депозиты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Эквайринг',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Банковские карты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'ВЭД',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Инвестиции',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Обмен валюты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Страхование',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Партнёрские программы',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Онлайн-сервисы',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Акции',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Тарифы',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Архивная информация',
-            },
-          ],
-        },
         {
           href: DEFAULT_ORIGIN,
           text: 'О банке',

package/src/components/Footer/MediaButton.tsx

@@ -25,7 +25,7 @@ interface MediaButtonProps {
 }
 
 export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
-  const { icon, width, height } =
+  const { icon, width, height, label } =
     ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
 
   if (!icon) return null;
@@ -34,6 +34,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
     <a
       className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:fill-primary-main"
       href={href}
+      aria-label={label}
       target="_blank"
       rel="noopener noreferrer"
     >

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

@@ -0,0 +1,103 @@
+import { BlockVersion } from '../../model/BlockVersion';
+import type { Picture } from '../../model/Picture';
+import { context } from '../../setup-fixture';
+import type { ButtonCommonProps } from '../../ui-kit/Button/Button';
+import { Gallery } from './Gallery';
+
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+  size: {
+    width: 150,
+    height: 150,
+  },
+  title: 'money',
+};
+
+const buttonPrimary: ButtonCommonProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'secondary',
+};
+const link: ButtonCommonProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'link',
+};
+
+const defaultItems = [
+  { title: 'До 1 млн ₽', text: 'Кредитный лимит' },
+  { title: 'От 16,9%', text: 'Ставка по кредиту' },
+  { title: 'До 15% ', text: 'Кэшбэк от покупок' },
+];
+
+const cards = [
+  {
+    image,
+    title: 'Вклады в любой валюте',
+    description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
+    button: link,
+  },
+  {
+    image,
+    title: 'Вклады в любой валюте',
+    description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
+  },
+  {
+    image,
+    title: 'Вклады в любой валюте',
+    itemsMobile: defaultItems,
+  },
+  {
+    title: 'Вклады в любой валюте',
+    description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
+  },
+  {
+    image,
+    title: 'Вклады в любой валюте',
+  },
+  {
+    image,
+    title: 'Вклады в любой валюте',
+    description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
+    button: buttonPrimary,
+  },
+  {
+    image,
+    title: 'Вклады в любой валюте',
+    description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
+    button: buttonPrimary,
+    version: 'secondary' as BlockVersion,
+  },
+];
+
+const defaultProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  isScroll: false,
+  context,
+  cards: cards,
+};
+
+const scrollProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  isScroll: true,
+  context,
+  cards: cards,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Gallery className="col-span-12" {...defaultProps} />
+    </div>
+  ),
+  scroll: (
+    <div className="container grid grid-cols-12">
+      <Gallery className="col-span-12" {...scrollProps} />
+    </div>
+  ),
+};

package/src/components/Gallery/Gallery.fixture.tsx

@@ -22,12 +22,12 @@ const buttonPrimary: ButtonCommonProps = {
 };
 
 const defaultItems = [
-  'Качественные фермерские продукты напрямую от производителей',
-  'Самая большая база сельских туров по России',
-  'Площадки для создания комфортной жизни за городом',
+  { text: 'Качественные фермерские продукты напрямую от производителей' },
+  { text: 'Самая большая база сельских туров по России' },
+  { text: 'Площадки для создания комфортной жизни за городом' },
 ];
 
-const defaultProps: GalleryProps = {
+export const defaultProps: GalleryProps = {
   title: 'Вы можете оплатить бонусными баллами',
   description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
   context,
@@ -39,6 +39,7 @@ const defaultProps: GalleryProps = {
       image,
       button: buttonPrimary,
       items: defaultItems,
+      version: 'secondary',
     },
     {
       title: 'Более 1000 развлечений',