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

package/src/PromoTile.fixture.tsx

@@ -1,25 +0,0 @@
-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/PromoTile.tsx

@@ -1,43 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { PromoTileContent } from './PromoTileContent';
-import { Tile } from './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/PromoTileContent.ts

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

package/src/StepsBlock.fixture.tsx

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

package/src/StepsBlock.tsx

@@ -1,55 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { Step, StepsBlockContent } from './StepsBlockContent';
-import type { UniBlockProps } from './types';
-import { Icon } from './ui-kit/Icon';
-import { Title } from './ui-kit/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/StepsBlockContent.ts

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

package/src/TextBlock.fixture.tsx

@@ -1,116 +0,0 @@
-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/TextBlock.tsx

@@ -1,65 +0,0 @@
-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/TextBlockContent.ts

@@ -1,12 +0,0 @@
-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/Tile.fixture.tsx

@@ -1,134 +0,0 @@
-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/Tile.tsx

@@ -1,38 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { BaseTile } from './BaseTile';
-import type { BlockVersion } from './model/BlockVersion';
-import type { TileContent } from './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/TileContent.ts

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

package/src/toMobilePage.ts

@@ -1,21 +0,0 @@
-import type { BlockDef, ContentPageDef } from './types';
-
-export function toMobilePage(contentPage: ContentPageDef): ContentPageDef {
-  const blocks = contentPage.blocks?.filter(({ mobile }) => !mobile?.hidden).map(toMobileBlock);
-  return {
-    ...contentPage,
-    blocks,
-  };
-}
-
-function toMobileBlock(block: BlockDef): BlockDef {
-  const { mobile } = block;
-  if (mobile) {
-    return {
-      ...block,
-      style: mobile.style?.length ? mobile.style : block.style,
-    };
-  } else {
-    return block;
-  }
-}

package/src/ui-kit/ArrowButton.tsx

@@ -1,32 +0,0 @@
-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>
-));

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

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