@redneckz/wildless-cms-uni-blocks 0.2.73 → 0.2.76

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

@@ -0,0 +1,116 @@
+import { context } from '../../setup-fixture';
+import { TextBlock } from './TextBlock';
+import type { Picture } from '../../model/Picture';
+
+const image: Picture = {
+  src: 'bank-card.png',
+  format: 'webp',
+  size: {
+    width: 48,
+    height: 48,
+  },
+};
+
+export default (
+  <div className="font-sans overflow-hidden">
+    <div>
+      <p>Private clients</p>
+      <div className="flex flex-col gap-6" data-theme="pc">
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="big"
+          image={image}
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="none"
+        />
+        <TextBlock
+          context={context}
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary-light"
+          iconVersion="small"
+        />
+      </div>
+    </div>
+    <div>
+      <p>Business clients</p>
+      <div className="flex flex-col gap-6" data-theme="bc">
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary-light"
+          iconVersion="small"
+        />
+      </div>
+    </div>
+    <div>
+      <p>Ecosystem own</p>
+      <div className="flex flex-col gap-6" data-theme="eo">
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="primary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary"
+          iconVersion="small"
+        />
+        <TextBlock
+          context={context}
+          title="Все карты Россельхозбанка работают"
+          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          blockVersion="secondary-light"
+          iconVersion="small"
+        />
+      </div>
+    </div>
+  </div>
+);

package/src/components/TextBlock/TextBlock.tsx

@@ -0,0 +1,65 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { Picture } from '../../model/Picture';
+import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
+import type { UniBlockProps } from '../../types';
+import { Img } from '../../ui-kit/Img';
+
+export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
+
+const textBlockStyleMaps: Record<
+  TextBlockVersion,
+  { background: string; icon: string; title: string; description: string }
+> = {
+  primary: {
+    background: 'bg-white',
+    icon: 'bg-primary-main text-white',
+    title: 'text-primary-text',
+    description: 'text-secondary-text',
+  },
+  secondary: {
+    background: 'bg-primary-main',
+    icon: 'bg-white text-primary-main',
+    title: 'text-white',
+    description: 'text-white',
+  },
+  'secondary-light': {
+    background: 'bg-primary-main/10',
+    icon: 'bg-primary-main text-white',
+    title: 'text-primary-text',
+    description: 'text-secondary-text',
+  },
+};
+
+export const TextBlock = JSX<TextBlockProps>(
+  ({ title, description, blockVersion = 'primary', iconVersion, image, className }) => {
+    const textBlockStyleMap = textBlockStyleMaps[blockVersion];
+    return (
+      <section
+        className={`font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`}
+      >
+        {iconVersion && iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null}
+        {iconVersion && iconVersion === 'big' ? renderImage(image) : null}
+        <div className="py-0.5">
+          {title && (
+            <div className={`font-medium text-base mb-1 ${textBlockStyleMap.title}`}>{title}</div>
+          )}
+          {description && (
+            <div className={`text-sm ${textBlockStyleMap.description}`}>{description}</div>
+          )}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderIcon(className: string) {
+  return (
+    <div className={`pt-1.5 pr-4`}>
+      <div className={`rounded-full h-4 w-4 text-center text-xs ${className}`}>i</div>
+    </div>
+  );
+}
+
+function renderImage(image?: Picture) {
+  return image?.src ? <Img className="pt-0.5 pr-3" image={image} /> : null;
+}

package/src/components/TextBlock/TextBlockContent.ts

@@ -0,0 +1,12 @@
+import type { Picture } from '../../model/Picture';
+
+export type TextBlockVersion = 'primary' | 'secondary' | 'secondary-light';
+export type TextBlockIconVersion = 'none' | 'small' | 'big';
+
+export interface TextBlockContent {
+  title?: string;
+  description?: string;
+  blockVersion?: TextBlockVersion;
+  iconVersion?: TextBlockIconVersion;
+  image?: Picture;
+}

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

@@ -0,0 +1,134 @@
+import { context } from '../../setup-fixture';
+
+import { Tile } from './Tile';
+import type { Picture } from '../../model/Picture';
+
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+};
+
+const image2: Picture = {
+  src: 'credit-card-1.png',
+  format: 'webp',
+};
+
+const image3: Picture = {
+  src: 'column-1.png',
+  format: 'webp',
+};
+
+const image4: Picture = {
+  src: 'globe-1.png',
+  format: 'webp',
+};
+
+export default {
+  credit: (
+    <div className="grid grid-cols-12">
+      <Tile
+        context={context}
+        className="col-span-8"
+        title="Кредиты"
+        items={[
+          'Кредитный лимит до 10 млн ₽',
+          'Кредиты наличными на любые цели',
+          'Получите деньги без залога и поручителей',
+        ]}
+        buttons={[
+          {
+            text: 'Подробнее',
+            href: '/credit-cards',
+            version: 'secondary',
+          },
+        ]}
+        image={image}
+      />
+    </div>
+  ),
+  mortgage: (
+    <div className="grid grid-cols-12">
+      <Tile
+        context={context}
+        version="secondary"
+        className="col-span-4"
+        title="Ипотека"
+        description={
+          'Широкий выбор ипотечных программ с государственной поддержкой. Специальные предложения от 12,2 %'
+        }
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+      />
+    </div>
+  ),
+  'credit-card': (
+    <div className="grid grid-cols-12">
+      <Tile
+        context={context}
+        className="col-span-6"
+        title="Банковские пластиковые карты"
+        items={['Счета в разных валютах', 'Бесплатное обслуживание', 'Кэшбэк до 15% от покупок']}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+        image={image2}
+      />
+    </div>
+  ),
+  premium: (
+    <div className="grid grid-cols-12">
+      <Tile
+        context={context}
+        className="col-span-6"
+        title="Премиальные продукты"
+        description={
+          'Выделенные зоны обслуживания и персональный финансовый консультант. Полный спектр премиальных продуктов, подчеркивающих ваш статус'
+        }
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+        image={image3}
+      />
+    </div>
+  ),
+  ecosystem: (
+    <div className="grid grid-cols-12">
+      <Tile
+        context={context}
+        className="col-span-12 pr-28"
+        title="Экосистема «СВОЕ», созданная для людей"
+        items={[
+          'Качественные фермерские продукты напрямую от производителей',
+          'Самая большая база сельских туров по России',
+          'Площадки для создания комфортной жизни за городом',
+          'Подробная база вакансий для жителей сельской местности',
+        ]}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+        image={image4}
+      />
+    </div>
+  ),
+};

package/src/components/Tile/Tile.tsx

@@ -0,0 +1,38 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { BaseTile } from '../BaseTile/BaseTile';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { TileContent } from '../Tile/TileContent';
+import type { UniBlockProps } from '../../types';
+import { getColSpan } from '../../utils/getColSpan';
+
+export interface TileProps extends TileContent, UniBlockProps {}
+
+const tileStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
+export const Tile = JSX<TileProps>((props) => {
+  const { children, className, version = 'primary' } = props;
+
+  return (
+    <section
+      className={`font-sans p-9 min-h-[320px] box-border ${className || ''} ${
+        tileStyleMap[version]
+      } ${getContainerPaddingRight(className)} `}
+    >
+      <BaseTile {...props}>{children}</BaseTile>
+    </section>
+  );
+});
+
+function getContainerPaddingRight(className: string = '') {
+  const colSpan = getColSpan(className);
+  if (colSpan <= 6) {
+    return 'pr-9';
+  } else if (colSpan <= 8) {
+    return 'pr-[4.75rem]';
+  } else {
+    return 'pr-[9.4rem]';
+  }
+}

package/src/components/Tile/TileContent.ts

@@ -0,0 +1,3 @@
+import type { BaseTileContent } from '../BaseTile/BaseTileContent';
+
+export type TileContent = BaseTileContent;

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

@@ -1,6 +1,6 @@
 import glob from 'glob';
 import util from 'util';
-import { toMobilePage } from '../toMobilePage';
+import { toMobilePage } from '../components/ContentPage/toMobilePage';
 import type { ContentPageDef } from '../types';
 import type { TransformationOptions } from './TransformationOptions';
 import { transformContentPage } from './transformContentPage';

package/src/cosmos.decorator.tsx

@@ -1,5 +1,11 @@
 export default ({ children }) => {
   document.querySelector(':root')?.setAttribute('lang', 'ru'); // for lighthouse accessibility metrics
+  if (!document.querySelector('meta[name=description]')) {
+    const meta = document.createElement('meta');
+    meta.name = 'description';
+    meta.content = 'description';
+    document.getElementsByTagName('head')[0].appendChild(meta);
+  }
 
   return (
     <div

package/src/hooks/useLink.ts

@@ -0,0 +1,28 @@
+import { HandlerDecorator, Router } from '../components/ContentPage/ContentPageContext';
+import type { LinkContent } from '../model/LinkContent';
+import { adjustHref, isURL } from '../utils/url';
+
+const defaultHandlerDecorator: HandlerDecorator = (handler, targetContent) => handler;
+
+export function useLink(
+  {
+    router,
+    handlerDecorator = defaultHandlerDecorator,
+  }: { router: Router; handlerDecorator?: HandlerDecorator },
+  link: Partial<LinkContent & { className: string }>,
+) {
+  const href = adjustHref(link.href, router);
+  return {
+    ...link,
+    href,
+    ariaLabel: link.text,
+    onClick: handlerDecorator((ev: MouseEvent) => {
+      const isLocalHref = href && !isURL(href);
+      const isLocalTarget = !link.target || link.target === '_self';
+      if (isLocalHref && isLocalTarget) {
+        ev.preventDefault();
+        router.push(href);
+      }
+    }, link),
+  };
+}

package/src/hooks/useSitemap.ts

@@ -0,0 +1,17 @@
+import type { AsyncDataHook } from '../components/ContentPage/ContentPageContext';
+import type { HeaderContent } from '../components/Header/HeaderContent';
+import { projectSettings } from '../ProjectSettings';
+
+export function useSitemap(useAsyncData: AsyncDataHook): HeaderContent {
+  const { data } = useAsyncData(sitemapURL(), fetchSitemap);
+  return data || {};
+}
+
+async function fetchSitemap(): Promise<HeaderContent> {
+  const response = await fetch(sitemapURL());
+  return await response.json();
+}
+
+function sitemapURL() {
+  return `/wcms-resources/${projectSettings.SITEMAP || 'sitemap'}.json`;
+}

package/src/icons/AppleIcon.svg

@@ -1,13 +1 @@
-<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g clip-path="url(#a)">
-    <path
-      d="M19.406 12.761c-.023-3.028 2.793-4.511 2.93-4.572-1.603-2.073-4.075-2.357-4.968-2.377-2.083-.204-4.098 1.117-5.174 1.117-1.076 0-2.725-1.097-4.488-1.056-2.266.04-4.395 1.198-5.563 3.007-2.404 3.698-.618 9.124 1.694 12.09 1.145 1.464 2.496 3.09 4.259 3.028 1.717-.06 2.358-.975 4.441-.975 2.06 0 2.656.975 4.465.935 1.854-.02 3.022-1.463 4.12-2.947 1.329-1.666 1.855-3.332 1.878-3.413 0 0-3.549-1.2-3.594-4.837Zm-3.389-8.92c.916-1.037 1.557-2.419 1.374-3.841-1.35.061-3.022.833-3.984 1.829-.847.894-1.625 2.337-1.42 3.698 1.512.102 3.069-.67 4.03-1.686Z"
-      fill="#42AB44"
-    />
-  </g>
-  <defs>
-    <clipPath id="a">
-      <rect width="24" height="24" rx="6" fill="#fff" />
-    </clipPath>
-  </defs>
-</svg>
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 24"><path d="M18.406 12.761c-.023-3.028 2.793-4.511 2.93-4.572-1.603-2.073-4.075-2.357-4.968-2.377-2.083-.204-4.098 1.117-5.174 1.117-1.076 0-2.725-1.097-4.488-1.056-2.266.04-4.395 1.198-5.563 3.007-2.404 3.698-.618 9.124 1.694 12.09 1.145 1.464 2.496 3.09 4.259 3.028 1.717-.06 2.358-.975 4.441-.975 2.06 0 2.656.975 4.465.935 1.854-.02 3.022-1.463 4.12-2.947 1.329-1.666 1.855-3.332 1.878-3.413 0 0-3.549-1.2-3.594-4.837Zm-3.389-8.92c.916-1.037 1.557-2.419 1.374-3.841-1.35.061-3.022.833-3.984 1.829-.847.894-1.625 2.337-1.42 3.698 1.512.102 3.069-.67 4.03-1.686Z" fill="#42AB44"/></svg>

package/src/icons/GlassIcon.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63 63"><g clip-path="url(#a)"><path d="M63 60.987c0-.13-.172-.259-.505-.382-3.072-.812-12.836-1.398-24.405-1.398-14.04 0-25.427.873-25.427 1.944 0 .13.172.26.505.382 3.083.812 12.837 1.399 24.406 1.399 14.04 0 25.426-.873 25.426-1.945Z" fill="#050304"/><path d="M63 60.987c0-.13-.172-.259-.505-.382-3.072-.812-12.836-1.398-24.405-1.398-14.04 0-25.427.873-25.427 1.944 0 .13.172.26.505.382 3.083.812 12.837 1.399 24.406 1.399 14.04 0 25.426-.873 25.426-1.945Z" fill="url(#b)"/><path d="M63 60.987c0-.13-.172-.259-.505-.382-3.072-.812-12.836-1.398-24.405-1.398-14.04 0-25.427.873-25.427 1.944 0 .13.172.26.505.382 3.083.812 12.837 1.399 24.406 1.399 14.04 0 25.426-.873 25.426-1.945Z" fill="#050304"/><path d="M63 60.987c0-.13-.172-.259-.505-.382-3.072-.812-12.836-1.398-24.405-1.398-14.04 0-25.427.873-25.427 1.944 0 .13.172.26.505.382 3.083.812 12.837 1.399 24.406 1.399 14.04 0 25.426-.873 25.426-1.945Z" fill="url(#c)"/><path d="M53.554 40.447a.31.31 0 0 0-.609 0l-.269 1.279a1.153 1.153 0 0 1-.89.89l-1.28.27a.31.31 0 0 0 0 .608l1.28.27c.447.093.796.443.89.89l.27 1.28a.31.31 0 0 0 .608 0l.269-1.28c.094-.447.443-.797.89-.89l1.28-.27a.31.31 0 0 0 0-.608l-1.28-.27a1.153 1.153 0 0 1-.89-.89l-.27-1.279Z" fill="#FFCA42"/><path d="M48.658 53.298H15.076a.827.827 0 0 1-.824-.824v-2.213c0-.454.37-.825.824-.825h33.582c.453 0 .824.371.824.825v2.213c0 .453-.371.824-.824.824Z" fill="#FA552D"/><path d="M48.658 53.298H15.076a.827.827 0 0 1-.824-.824v-2.213c0-.454.37-.825.824-.825h33.582c.453 0 .824.371.824.825v2.213c0 .453-.371.824-.824.824Z" fill="#42AB44"/><path d="M26.19 52.168h-.597v.552h.597v-.552Zm1.196-.42h-.598v.972h.598v-.972Zm1.195-.643h-.598v1.615h.598v-1.615Zm1.195.26h-.598v1.355h.598v-1.356Zm1.191-1.357h-.598v2.436h.598v-2.436Zm1.195 0h-.597v2.712h.597v-2.712Zm1.196 0h-.598v2.712h.598v-2.712Zm1.195 0h-.598v2.712h.598v-2.712Zm1.19 0h-.597v2.712h.598v-2.712Zm1.196 0h-.597v2.712h.597v-2.712Zm1.195 0h-.597v2.712h.597v-2.712Zm1.196 0h-.598v1.904h.598v-1.904Zm1.19 0h-.597v2.712h.598v-2.712Zm1.196 0h-.598v2.712h.598v-2.712Zm1.195 0h-.598v2.712h.598v-2.712Zm1.195 0h-.597v2.712h.597v-2.712Zm1.191 0H44.7v2.712h.597v-2.712Zm1.196 0h-.598v2.712h.597v-2.712Zm1.195 0h-.598v2.712h.598v-2.712Zm1.195 0h-.598v2.712h.598v-2.712Z" fill="#5F1A58"/><path d="M26.19 52.168h-.597v.552h.597v-.552Zm1.196-.42h-.598v.972h.598v-.972Zm1.195-.643h-.598v1.615h.598v-1.615Zm1.195.26h-.598v1.355h.598v-1.356Zm1.191-1.357h-.598v2.436h.598v-2.436Zm1.195 0h-.597v2.712h.597v-2.712Zm1.196 0h-.598v2.712h.598v-2.712Zm1.195 0h-.598v2.712h.598v-2.712Zm1.19 0h-.597v2.712h.598v-2.712Zm1.196 0h-.597v2.712h.597v-2.712Zm1.195 0h-.597v2.712h.597v-2.712Zm1.196 0h-.598v1.904h.598v-1.904Zm1.19 0h-.597v2.712h.598v-2.712Zm1.196 0h-.598v2.712h.598v-2.712Zm1.195 0h-.598v2.712h.598v-2.712Zm1.195 0h-.597v2.712h.597v-2.712Zm1.191 0H44.7v2.712h.597v-2.712Zm1.196 0h-.598v2.712h.597v-2.712Zm1.195 0h-.598v2.712h.598v-2.712Zm1.195 0h-.598v2.712h.598v-2.712Z" fill="#050304"/><path d="M26.19 52.168h-.597v.552h.597v-.552Zm1.196-.42h-.598v.972h.598v-.972Zm1.195-.643h-.598v1.615h.598v-1.615Zm1.195.26h-.598v1.355h.598v-1.356Zm1.191-1.357h-.598v2.436h.598v-2.436Zm1.195 0h-.597v2.712h.597v-2.712Zm1.196 0h-.598v2.712h.598v-2.712Zm1.195 0h-.598v2.712h.598v-2.712Zm1.19 0h-.597v2.712h.598v-2.712Zm1.196 0h-.597v2.712h.597v-2.712Zm1.195 0h-.597v2.712h.597v-2.712Zm1.196 0h-.598v1.904h.598v-1.904Zm1.19 0h-.597v2.712h.598v-2.712Zm1.196 0h-.598v2.712h.598v-2.712Zm1.195 0h-.598v2.712h.598v-2.712Zm1.195 0h-.597v2.712h.597v-2.712Zm1.191 0H44.7v2.712h.597v-2.712Zm1.196 0h-.598v2.712h.597v-2.712Zm1.195 0h-.598v2.712h.598v-2.712Zm1.195 0h-.598v2.712h.598v-2.712Z" fill="url(#d)"/><path d="M48.657 53.298H40.11v-3.862h8.544c.453 0 .824.371.824.824v2.214a.82.82 0 0 1-.82.824Z" fill="#050304"/><path d="M48.657 53.298H40.11v-3.862h8.544c.453 0 .824.371.824.824v2.214a.82.82 0 0 1-.82.824Z" fill="url(#e)"/><path d="M48.657 53.298H40.11v-3.862h8.544c.453 0 .824.371.824.824v2.214a.82.82 0 0 1-.82.824Z" fill="#050304"/><path d="M48.657 53.298H40.11v-3.862h8.544c.453 0 .824.371.824.824v2.214a.82.82 0 0 1-.82.824Z" fill="url(#f)"/><path d="M54.117 57.162H20.54a.827.827 0 0 1-.824-.824v-2.213c0-.454.37-.825.824-.825h33.582c.453 0 .824.371.824.825v2.213a.83.83 0 0 1-.829.824Z" fill="#42AB44"/><path d="M54.117 57.162H40.43l-20.714-2.176v-.861c0-.454.37-.825.824-.825h33.582c.453 0 .824.371.824.825v2.213a.83.83 0 0 1-.829.824Z" fill="#050304"/><path d="M54.117 57.162H40.43l-20.714-2.176v-.861c0-.454.37-.825.824-.825h33.582c.453 0 .824.371.824.825v2.213a.83.83 0 0 1-.829.824Z" fill="url(#g)"/><path d="M51.198 61.021H17.616a.827.827 0 0 1-.824-.824v-2.214c0-.453.37-.824.824-.824h33.582c.453 0 .824.371.824.825v2.213a.824.824 0 0 1-.824.824Z" fill="#050304"/><path d="M51.198 61.021H17.616a.827.827 0 0 1-.824-.824v-2.214c0-.453.37-.824.824-.824h33.582c.453 0 .824.371.824.825v2.213a.824.824 0 0 1-.824.824Z" fill="url(#h)"/><path d="M51.198 61.021H17.616a.827.827 0 0 1-.824-.824v-2.214c0-.453.37-.824.824-.824h33.582c.453 0 .824.371.824.825v2.213a.824.824 0 0 1-.824.824Z" fill="#050304"/><path d="M51.198 61.021H17.616a.827.827 0 0 1-.824-.824v-2.214c0-.453.37-.824.824-.824h33.582c.453 0 .824.371.824.825v2.213a.824.824 0 0 1-.824.824Z" fill="url(#i)"/><path d="M51.198 61.021h-8.544v-3.862h8.544c.453 0 .824.371.824.825v2.213c0 .457-.37.824-.824.824Z" fill="#050304"/><path d="M51.198 61.021h-8.544v-3.862h8.544c.453 0 .824.371.824.825v2.213c0 .457-.37.824-.824.824Z" fill="url(#j)"/><path d="M51.198 61.021h-8.544v-3.862h8.544c.453 0 .824.371.824.825v2.213c0 .457-.37.824-.824.824Z" fill="#050304"/><path d="M51.198 61.021h-8.544v-3.862h8.544c.453 0 .824.371.824.825v2.213c0 .457-.37.824-.824.824Z" fill="url(#k)"/><path d="M24.704 57.763h-.598v2.658h.598v-2.658Zm1.195.334h-.597v1.99h.597v-1.99Zm1.191.614h-.597v.762h.597v-.762Zm1.196.56h-.598v1.15h.598v-1.15Zm1.195-1.137h-.598v.956h.598v-.956Zm2.386.383h-.598v1.15h.598v-1.15Z" fill="#5F1A58"/><path d="M24.704 57.763h-.598v2.658h.598v-2.658Zm1.195.334h-.597v1.99h.597v-1.99Zm1.191.614h-.597v.762h.597v-.762Zm1.196.56h-.598v1.15h.598v-1.15Zm1.195-1.137h-.598v.956h.598v-.956Zm2.386.383h-.598v1.15h.598v-1.15Z" fill="#050304"/><path d="M24.704 57.763h-.598v2.658h.598v-2.658Zm1.195.334h-.597v1.99h.597v-1.99Zm1.191.614h-.597v.762h.597v-.762Zm1.196.56h-.598v1.15h.598v-1.15Zm1.195-1.137h-.598v.956h.598v-.956Zm2.386.383h-.598v1.15h.598v-1.15Z" fill="url(#l)"/><path d="M32.922 49.437c9.144 0 16.556-7.412 16.556-16.556 0-9.143-7.413-16.556-16.556-16.556s-16.556 7.413-16.556 16.556c0 9.144 7.413 16.556 16.556 16.556Z" fill="#050304"/><path d="M32.922 49.437c9.144 0 16.556-7.412 16.556-16.556 0-9.143-7.413-16.556-16.556-16.556s-16.556 7.413-16.556 16.556c0 9.144 7.413 16.556 16.556 16.556Z" fill="url(#m)"/><mask id="n" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="14" y="16" width="34" height="34"><path d="M30.804 49.436c9.143 0 16.556-7.412 16.556-16.556 0-9.143-7.413-16.555-16.556-16.555-9.144 0-16.556 7.412-16.556 16.555 0 9.144 7.412 16.556 16.556 16.556Z" fill="#91BD65"/></mask><g mask="url(#n)"><path d="M30.804 49.436c9.143 0 16.556-7.412 16.556-16.556 0-9.143-7.413-16.555-16.556-16.555-9.144 0-16.556 7.412-16.556 16.555 0 9.144 7.412 16.556 16.556 16.556Z" fill="url(#o)"/><path d="m24.416 27.667-7.386-8.172-2.827 1.636 6.256 6.714 3.957-.178Z" fill="#FFCA42"/><path d="m24.416 27.667-7.386-8.172-2.827 1.636 6.256 6.714 3.957-.178Z" fill="url(#p)"/><mask id="q" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="17" y="19" width="28" height="28"><path d="M30.803 46.495c7.519 0 13.614-6.095 13.614-13.613S38.322 19.27 30.803 19.27c-7.518 0-13.613 6.095-13.613 13.613s6.095 13.613 13.613 13.613Z" fill="#91BD65"/></mask><g mask="url(#q)"><path d="M30.803 46.495c7.519 0 13.614-6.095 13.614-13.613S38.322 19.27 30.803 19.27c-7.518 0-13.613 6.095-13.613 13.613s6.095 13.613 13.613 13.613Z" fill="#FA552D"/><path d="M30.803 46.495c7.519 0 13.614-6.095 13.614-13.613S38.322 19.27 30.803 19.27c-7.518 0-13.613 6.095-13.613 13.613s6.095 13.613 13.613 13.613Z" fill="url(#r)"/><path d="M30.803 46.495c7.519 0 13.614-6.095 13.614-13.613S38.322 19.27 30.803 19.27c-7.518 0-13.613 6.095-13.613 13.613s6.095 13.613 13.613 13.613Z" fill="url(#s)"/><path d="M15.888 49.14h29.369l-2.3-11.803a3.147 3.147 0 0 0-3.087-2.543H21.274a3.147 3.147 0 0 0-3.087 2.543l-2.3 11.804Z" fill="#FFCA42"/><path d="M15.888 49.14h29.369l-2.3-11.803a3.147 3.147 0 0 0-3.087-2.543H21.274a3.147 3.147 0 0 0-3.087 2.543l-2.3 11.804Z" fill="url(#t)"/></g><path d="M27.029 27.451c2.39-1.986.944-5.06-2.477-2.72-3.825 2.622-.532 5.222 2.477 2.72Z" fill="#FFCA42"/><path d="M27.029 27.451c2.39-1.986.944-5.06-2.477-2.72-3.825 2.622-.532 5.222 2.477 2.72Z" fill="url(#u)"/><path d="M31.34 20.876c-7.517 0-13.613 6.096-13.613 13.613 0 1.204.157 2.37.45 3.483a13.57 13.57 0 0 1-.986-5.09c0-7.517 6.096-13.613 13.614-13.613 6.313 0 11.622 4.303 13.163 10.135-2.02-5-6.911-8.528-12.628-8.528Z" fill="#FA552D"/><path d="M31.34 20.876c-7.517 0-13.613 6.096-13.613 13.613 0 1.204.157 2.37.45 3.483a13.57 13.57 0 0 1-.986-5.09c0-7.517 6.096-13.613 13.614-13.613 6.313 0 11.622 4.303 13.163 10.135-2.02-5-6.911-8.528-12.628-8.528Z" fill="url(#v)"/><path d="M31.34 20.876c-7.517 0-13.613 6.096-13.613 13.613 0 1.204.157 2.37.45 3.483a13.57 13.57 0 0 1-.986-5.09c0-7.517 6.096-13.613 13.614-13.613 6.313 0 11.622 4.303 13.163 10.135-2.02-5-6.911-8.528-12.628-8.528Z" fill="#050304"/><path d="M31.34 20.876c-7.517 0-13.613 6.096-13.613 13.613 0 1.204.157 2.37.45 3.483a13.57 13.57 0 0 1-.986-5.09c0-7.517 6.096-13.613 13.614-13.613 6.313 0 11.622 4.303 13.163 10.135-2.02-5-6.911-8.528-12.628-8.528Z" fill="url(#w)"/></g><path d="M21.614 6.16a.425.425 0 0 0-.833 0l-.368 1.75a1.578 1.578 0 0 1-1.22 1.22l-1.75.368a.425.425 0 0 0 0 .832l1.75.368c.613.13 1.091.607 1.22 1.22l.368 1.75a.425.425 0 0 0 .833 0l.368-1.75a1.578 1.578 0 0 1 1.219-1.22l1.75-.368a.425.425 0 0 0 0-.832l-1.75-.368a1.578 1.578 0 0 1-1.22-1.22l-.367-1.75ZM8.279 39.569a.64.64 0 0 0-1.252 0l-.553 2.632a2.372 2.372 0 0 1-1.833 1.833l-2.632.553a.64.64 0 0 0 0 1.252l2.632.553c.92.194 1.64.913 1.833 1.833l.553 2.633a.64.64 0 0 0 1.252 0l.553-2.633c.194-.92.913-1.64 1.833-1.833l2.632-.553a.64.64 0 0 0 0-1.252l-2.632-.553A2.372 2.372 0 0 1 8.832 42.2l-.553-2.632Z" fill="#FFCA42"/></g><defs><linearGradient id="b" x1="12.663" y1="61.069" x2="63" y2="61.069" gradientUnits="userSpaceOnUse"><stop stop-color="#FA552D"/><stop offset=".104" stop-color="#FA552D" stop-opacity="0"/><stop offset=".81" stop-color="#5F1A58" stop-opacity="0"/><stop offset="1" stop-color="#5F1A58"/></linearGradient><linearGradient id="c" x1="63" y1="62.932" x2="12.717" y2="62.932" gradientUnits="userSpaceOnUse"><stop stop-color="#04D600"/><stop offset=".297" stop-color="#00D63C" stop-opacity="0"/><stop offset=".833" stop-color="#FA552D" stop-opacity="0"/><stop offset="1" stop-color="#FA552D"/></linearGradient><linearGradient id="d" x1="62.165" y1="54.392" x2="15.354" y2="51.029" gradientUnits="userSpaceOnUse"><stop stop-color="#04D600"/><stop offset=".7" stop-color="#00D63C" stop-opacity="0"/></linearGradient><linearGradient id="e" x1="46.244" y1="51.847" x2="40.039" y2="51.847" gradientUnits="userSpaceOnUse"><stop stop-color="#5F1A58"/><stop offset="1" stop-color="#5F1A58" stop-opacity="0"/></linearGradient><linearGradient id="f" x1="54.82" y1="55.679" x2="35.901" y2="55.295" gradientUnits="userSpaceOnUse"><stop stop-color="#04D600"/><stop offset=".7" stop-color="#00D63C" stop-opacity="0"/></linearGradient><linearGradient id="g" x1="75.037" y1="59.543" x2="4.274" y2="54.143" gradientUnits="userSpaceOnUse"><stop stop-color="#04D600"/><stop offset=".7" stop-color="#00D63C" stop-opacity="0"/></linearGradient><linearGradient id="h" x1="16.792" y1="59.265" x2="21.944" y2="59.265" gradientUnits="userSpaceOnUse"><stop stop-color="#FA552D"/><stop offset="1" stop-color="#FA552D" stop-opacity="0"/></linearGradient><linearGradient id="i" x1="72.113" y1="63.402" x2="1.35" y2="58.002" gradientUnits="userSpaceOnUse"><stop stop-color="#04D600"/><stop offset=".7" stop-color="#00D63C" stop-opacity="0"/></linearGradient><linearGradient id="j" x1="42.757" y1="59.059" x2="48.94" y2="59.059" gradientUnits="userSpaceOnUse"><stop stop-color="#5F1A58"/><stop offset="1" stop-color="#5F1A58" stop-opacity="0"/></linearGradient><linearGradient id="k" x1="57.365" y1="63.402" x2="38.447" y2="63.018" gradientUnits="userSpaceOnUse"><stop stop-color="#04D600"/><stop offset=".7" stop-color="#00D63C" stop-opacity="0"/></linearGradient><linearGradient id="l" x1="36.293" y1="62.06" x2="20.623" y2="61.677" gradientUnits="userSpaceOnUse"><stop stop-color="#04D600"/><stop offset=".7" stop-color="#00D63C" stop-opacity="0"/></linearGradient><linearGradient id="m" x1="55.687" y1="41.093" x2="29.024" y2="16.325" gradientUnits="userSpaceOnUse"><stop stop-color="#04D600"/><stop offset=".297" stop-color="#00D63C" stop-opacity="0"/><stop offset=".833" stop-color="#FA552D" stop-opacity="0"/><stop offset="1" stop-color="#FA552D"/></linearGradient><linearGradient id="o" x1="23.849" y1="45.931" x2="26.662" y2="14.768" gradientUnits="userSpaceOnUse"><stop stop-color="#7DC15D"/><stop offset="1" stop-color="#FEE54F"/></linearGradient><linearGradient id="p" x1="18.119" y1="22.174" x2="19.561" y2="25.265" gradientUnits="userSpaceOnUse"><stop stop-color="#FEFFCF"/><stop offset="1" stop-color="#FEFFCF" stop-opacity="0"/></linearGradient><linearGradient id="r" x1="28.215" y1="46.697" x2="28.215" y2="21.144" gradientUnits="userSpaceOnUse"><stop stop-color="#FFCA42"/><stop offset="1" stop-color="#FFCA42" stop-opacity="0"/></linearGradient><linearGradient id="s" x1="24.794" y1="25.705" x2="30.803" y2="46.495" gradientUnits="userSpaceOnUse"><stop stop-color="#7DC15D"/><stop offset="1" stop-color="#FEE54F"/></linearGradient><linearGradient id="t" x1="30.572" y1="34.794" x2="30.572" y2="40.927" gradientUnits="userSpaceOnUse"><stop stop-color="#FEFFCF"/><stop offset="1" stop-color="#FEFFCF" stop-opacity="0"/></linearGradient><linearGradient id="u" x1="24.301" y1="28.354" x2="24.919" y2="25.469" gradientUnits="userSpaceOnUse"><stop stop-color="#FEFFCF"/><stop offset="1" stop-color="#FEFFCF" stop-opacity="0"/></linearGradient><linearGradient id="v" x1="24.301" y1="20.32" x2="26.98" y2="30.005" gradientUnits="userSpaceOnUse"><stop stop-color="#5F1A58"/><stop offset="1" stop-color="#5F1A58" stop-opacity="0"/></linearGradient><linearGradient id="w" x1="59.239" y1="49.504" x2="5.149" y2="48.856" gradientUnits="userSpaceOnUse"><stop stop-color="#04D600"/><stop offset=".7" stop-color="#00D63C" stop-opacity="0"/></linearGradient><clipPath id="a"><path fill="#fff" d="M0 0h63v63H0z"/></clipPath></defs></svg>

package/src/icons/PlayMarketIcon.svg

@@ -1,6 +1 @@
-<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M1 22.427V2.576C1 1.883 1.447 1.284 2.094 1L14.85 12.498 2.089 24a1.89 1.89 0 0 1-.795-.646A1.625 1.625 0 0 1 1 22.427Zm17.899-6.282-13.95 7.259 11.002-9.915 2.948 2.656Zm4.335-5.035c.237.162.428.37.561.61.133.239.203.502.205.77.002.267-.064.53-.193.771s-.317.452-.551.617l-2.964 1.542-3.241-2.922 3.24-2.92 2.944 1.532ZM4.959 1.598l13.938 7.253-2.945 2.654L4.958 1.598Z"
-    fill="#42AB44"
-  />
-</svg>
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><path d="M0 21.427V1.576C0 .883.447.284 1.094 0L13.85 11.498 1.089 23a1.89 1.89 0 0 1-.795-.646A1.625 1.625 0 0 1 0 21.427Zm17.899-6.282-13.95 7.259 11.002-9.915 2.948 2.656Zm4.335-5.035c.237.162.428.37.561.61.133.239.203.502.205.77.002.267-.064.53-.193.771s-.317.452-.551.617l-2.964 1.542-3.241-2.922 3.24-2.92 2.944 1.532ZM3.959.598l13.938 7.253-2.945 2.654L3.958.598Z" fill="#42AB44"/></svg>

package/src/index.ts

@@ -18,16 +18,16 @@ export type {
   LikeService,
   HandlerDecorator,
   Search,
-} from './ContentPageContext';
+} from './components/ContentPage/ContentPageContext';
 
-export { ContentPageHead } from './ContentPageHead';
-export type { BlockDecorator } from './ContentPage';
-export { ContentPage } from './ContentPage';
-export { toMobilePage } from './toMobilePage';
+export { ContentPageHead } from './components/ContentPage/ContentPageHead';
+export type { BlockDecorator } from './components/ContentPage/ContentPage';
+export { ContentPage } from './components/ContentPage/ContentPage';
+export { toMobilePage } from './components/ContentPage/toMobilePage';
 
-export { Blocks } from './Blocks';
-export type { BlockContent } from './BlockContent';
-export { MobileBlocks } from './MobileBlocks';
+export { Blocks } from './components/Blocks';
+export type { BlockContent } from './components/BlockContent';
+export { MobileBlocks } from './components/MobileBlocks';
 
 export * as url from './utils/url';
 export { joinList } from './utils/joinList';

package/src/setup-fixture.ts

@@ -3,7 +3,7 @@ import { setup } from '@redneckz/uni-jsx';
 import runtime from 'react/jsx-runtime';
 import { useEffect, useState } from 'react';
 import { DaDataAPI } from './api/DaDataAPI';
-import type { ContentPageContext } from './ContentPageContext';
+import type { ContentPageContext } from './components/ContentPage/ContentPageContext';
 
 const { jsx, jsxs } = runtime as any;
 setup(jsx, jsxs);

package/src/types.ts

@@ -1,5 +1,5 @@
-import type { BlockContent } from './BlockContent';
-import type { ContentPageContext } from './ContentPageContext';
+import type { BlockContent } from './components/BlockContent';
+import type { ContentPageContext } from './components/ContentPage/ContentPageContext';
 import type { BlockVersion } from './model/BlockVersion';
 
 export type ColorPalette = 'pc' | 'bc' | 'eo';

package/src/ui-kit/BlockItem/BlockItem.fixture.tsx

@@ -0,0 +1,5 @@
+import '../../setup-fixture';
+
+import { BlockItem } from './BlockItem';
+
+export default <BlockItem text="Совершайте любые личные покупки" />;

package/src/ui-kit/Button/ArrowButton.tsx

@@ -0,0 +1,32 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Button } from './Button';
+import { ButtonProps } from './ButtonProps';
+import { SVG } from '../SVG';
+
+const ARROW_PATHS = [
+  {
+    d: 'm9 12 4-4-4-4',
+    stroke: 'currentColor',
+    strokeWidth: '2',
+    strokeLinecap: 'round',
+    fill: 'none',
+  },
+  {
+    d: 'M2 9a1 1 0 0 1 0-2v2Zm6-2a1 1 0 0 1 0 2V7ZM2 7h6v2H2V7Z',
+  },
+];
+
+export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) => (
+  <Button
+    rounded
+    className={`shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${
+      disabled
+        ? 'bg-secondary-light text-secondary-text'
+        : 'bg-white text-primary-text hover:text-primary-main'
+    } ${className || ''}`}
+    disabled={disabled}
+    {...rest}
+  >
+    <SVG paths={ARROW_PATHS} viewBox="0 0 16 16" fill="none" width="16" height="16" />
+  </Button>
+));