@redneckz/wildless-cms-uni-blocks 0.2.74 → 0.2.77

package/src/components/PromoTile/PromoTile.fixture.tsx

@@ -0,0 +1,25 @@
+import { context } from '../../setup-fixture';
+
+import { PromoTile } from './PromoTile';
+
+export default {
+  default: (
+    <div className="grid grid-cols-12">
+      <PromoTile
+        context={context}
+        className="col-span-4"
+        title="Акции и спецпредложения"
+        description="Пенсионный кредит по специальной процентной ставке"
+        version="secondary"
+        date="2022-04-16"
+        buttons={[
+          {
+            text: 'Все акции',
+            href: '/credits',
+            version: 'secondary',
+          },
+        ]}
+      />
+    </div>
+  ),
+};

package/src/components/PromoTile/PromoTile.tsx

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { PromoTileContent } from './PromoTileContent';
+import { Tile } from '../Tile/Tile';
+import type { UniBlockProps } from '../../types';
+
+export interface PromoTileProps extends PromoTileContent, UniBlockProps {}
+
+export const PromoTile = JSX<PromoTileProps>(
+  ({
+    className,
+    context,
+    title = 'Акции и спецпредложения',
+    date,
+    description,
+    buttons = [],
+    version,
+  }) => {
+    return (
+      <Tile
+        className={className}
+        context={context}
+        title={title}
+        buttons={buttons}
+        version={version}
+      >
+        <div>
+          {date && <div className="text-sm mb-2">{formatDate(date)}</div>}
+          <div className="text-base">{description}</div>
+        </div>
+      </Tile>
+    );
+  },
+);
+
+function formatDate(date: string) {
+  const dateObj = new Date(date);
+  const dateFormat: Intl.DateTimeFormatOptions = {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  };
+  return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
+}

package/src/components/PromoTile/PromoTileContent.ts

@@ -0,0 +1,5 @@
+import type { BaseTileContent } from '../BaseTile/BaseTileContent';
+
+export interface PromoTileContent extends BaseTileContent {
+  date?: string;
+}

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -0,0 +1,23 @@
+import { context } from '../../setup-fixture';
+import { StepsBlock } from './StepsBlock';
+
+export default (
+  <StepsBlock
+    context={context}
+    title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+    steps={[
+      {
+        label: 'Заявка на кредит',
+        description: 'Оставьте онлайн-заявку на потребительский кредит',
+      },
+      {
+        label: 'В случае одобрения',
+        description: 'Менеджер свяжется с вами и согласует встречу',
+      },
+      {
+        label: 'Получение наличных',
+        description: 'Получите наличные в отделении банка',
+      },
+    ]}
+  />
+);

package/src/components/StepsBlock/StepsBlock.tsx

@@ -0,0 +1,55 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { Step, StepsBlockContent } from './StepsBlockContent';
+import type { UniBlockProps } from '../../types';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Title } from '../../ui-kit/Title/Title';
+import { joinList } from '../../utils/joinList';
+
+export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
+
+export const StepsBlock = JSX<StepsBlockProps>(({ className, title, steps }) => {
+  return (
+    <section
+      className={`font-sans text-primary-text bg-white px-12 py-12 flex flex-col items-center ${
+        className || ''
+      }`}
+    >
+      <Title className="font-medium m-0 max-w-[47rem] text-center">{title}</Title>
+      {steps?.length ? (
+        <div>
+          <div className="flex mt-9 items-center px-[88px]">
+            {joinList(<div className="h-0.5 w-full bg-secondary-light"></div>)(
+              steps.map((step, i) => renderStepIcon(step, i)),
+            )}
+          </div>
+          <div className="flex mt-9 justify-between gap-x-24">{steps.map(renderStepTitle)}</div>
+        </div>
+      ) : null}
+    </section>
+  );
+});
+
+const renderStepIcon = (step: Step, i: number) => {
+  return (
+    <div key={String(i)} className="flex flex-col items-center text-center relative">
+      <div className="h-[100px] w-[100px] min-w-[100px] min-h-[100px] bg-secondary-light rounded-full p-[26px] box-border z-10">
+        {(step.icon && <Icon name={step.icon} width="48" height="48" />) || (
+          <span className="font-medium text-title-sm text-secondary-text">{i + 1}</span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const renderStepTitle = (step: Step, i: number) => {
+  return (
+    <div key={String(i)} className="flex flex-col items-center text-center relative w-[276px]">
+      <div className="max-w-min">
+        <h5 className="font-medium text-xl m-0 mt-4 whitespace-nowrap px-3">{step.label}</h5>
+        {step.description && (
+          <div className="font-normal text-sm text-secondary-text mt-2">{step.description}</div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -0,0 +1,12 @@
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+
+export interface Step {
+  label: string;
+  description?: string;
+  icon?: IconName;
+}
+
+export interface StepsBlockContent {
+  title?: string;
+  steps?: Step[];
+}

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/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="Совершайте любые личные покупки" />;