@redneckz/wildless-cms-uni-blocks 0.2.111 → 0.2.112

package/mobile/src/common.css

@@ -0,0 +1,141 @@
+@import '../fonts/ubuntu/ubuntu.css';
+
+/* Private clients | Green */
+[data-theme='pc'] {
+  --color-primary-main: 66, 171, 68;
+  --color-primary-hover: 36, 131, 65;
+  --color-primary-active: 36, 95, 52;
+  --color-secondary-hover: 216, 242, 217;
+  --color-secondary-active: 197, 226, 198;
+  --color-gradient-from: 141, 189, 76;
+  --color-gradient-to: 69, 172, 69;
+}
+/* Business clients | Light-Green */
+[data-theme='bc'] {
+  --color-primary-main: 131, 184, 62;
+  --color-primary-hover: 92, 146, 29;
+  --color-primary-active: 60, 94, 16;
+  --color-secondary-hover: 232, 244, 217;
+  --color-secondary-active: 216, 227, 202;
+  --color-gradient-from: 141, 189, 76; /* TODO: change color to theme bc */
+  --color-gradient-to: 69, 172, 69; /* TODO: change color to theme bc */
+}
+/* Ecosystem own | Yellow */
+[data-theme='eo'] {
+  --color-primary-main: 221, 182, 61;
+  --color-primary-hover: 187, 151, 39;
+  --color-primary-active: 126, 99, 12;
+  --color-secondary-hover: 241, 236, 221;
+  --color-secondary-active: 229, 222, 199;
+  --color-gradient-from: 141, 189, 76; /* TODO: change color to theme eo */
+  --color-gradient-to: 69, 172, 69; /* TODO: change color to theme eo */
+}
+
+[data-theme='eo2'] {
+  --color-primary-main: 255, 204, 0;
+  --color-primary-hover: 187, 151, 39;
+  --color-primary-active: 126, 99, 12;
+  --color-secondary-hover: 241, 236, 221;
+  --color-secondary-active: 229, 222, 199;
+  --color-gradient-from: 141, 189, 76; /* TODO: change color to theme eo */
+  --color-gradient-to: 69, 172, 69; /* TODO: change color to theme eo */
+}
+
+[data-theme='eo3'] {
+  --color-primary-main: 225, 186, 30;
+  --color-primary-hover: 187, 151, 39;
+  --color-primary-active: 126, 99, 12;
+  --color-secondary-hover: 241, 236, 221;
+  --color-secondary-active: 229, 222, 199;
+  --color-gradient-from: 141, 189, 76; /* TODO: change color to theme eo */
+  --color-gradient-to: 69, 172, 69; /* TODO: change color to theme eo */
+}
+
+[data-theme='eo4'] {
+  --color-primary-main: 233, 191, 23;
+  --color-primary-hover: 187, 151, 39;
+  --color-primary-active: 126, 99, 12;
+  --color-secondary-hover: 241, 236, 221;
+  --color-secondary-active: 229, 222, 199;
+  --color-gradient-from: 141, 189, 76; /* TODO: change color to theme eo */
+  --color-gradient-to: 69, 172, 69; /* TODO: change color to theme eo */
+}
+
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .rotate-180 {
+    transform: rotate(180deg);
+  }
+
+  .-translate-x-full {
+    transform: translateX(-100%);
+  }
+
+  /* Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .horizontal-list {
+    display: flex;
+    overflow-x: scroll;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    touch-action: pan-x;
+    scroll-snap-type: x mandatory;
+  }
+
+  .horizontal-list-item {
+    flex-shrink: 0;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+    width: 100%;
+  }
+
+  input[type='range'].slider {
+    -webkit-appearance: none;
+    height: 4px;
+    background: transparent;
+    border-radius: 5px;
+    background-image: linear-gradient(#42ab44, #42ab44);
+    background-repeat: no-repeat;
+  }
+
+  input[type='range'].slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 18px;
+    width: 18px;
+    border-radius: 50%;
+    background: #fff;
+    cursor: pointer;
+    box-shadow: none;
+    border: 3px solid #42ab44;
+  }
+
+  input[type='range'].slider::-moz-range-thumb {
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background: #fff;
+    cursor: pointer;
+    box-shadow: none;
+    border: 3px solid #42ab44;
+  }
+
+  input[type='range'].slider::-ms-thumb {
+    height: 18px;
+    width: 18px;
+    border-radius: 50%;
+    background: #fff;
+    cursor: pointer;
+    box-shadow: none;
+    border: 3px solid #42ab44;
+  }
+}

package/mobile/src/components/Accordion/Accordion.example.json

@@ -0,0 +1,50 @@
+{
+  "title": "Аккордеон",
+  "accordionItems": [
+    {
+      "label": "Аккордеон 1",
+      "blocks": [
+        {
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок",
+          "description": "Описание текстового блока"
+        },
+        {
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок №2",
+          "description": "Описание текстового блока №2"
+        }
+      ]
+    },
+    {
+      "label": "Аккордеон 2",
+      "blocks": [
+        {
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок",
+          "description": "Описание текстового блока"
+        },
+        {
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок №2",
+          "description": "Описание текстового блока №2"
+        }
+      ]
+    },
+    {
+      "label": "Аккордеон 3",
+      "blocks": [
+        {
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок",
+          "description": "Описание текстового блока"
+        },
+        {
+          "accordionBlockType": "TextBlock",
+          "title": "Текстовый блок №2",
+          "description": "Описание текстового блока №2"
+        }
+      ]
+    }
+  ]
+}

package/mobile/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Title } from '../../ui-kit/Title/Title';
+import type { AccordionContent } from './AccordionContent';
+import { AccordionItem } from './AccordionItem';
+
+export interface AccordionProps extends AccordionContent, UniBlockProps {}
+
+export const Accordion = JSX<AccordionProps>(({ title, accordionItems, context, className }) => {
+  return (
+    <section className={`p-[50px] font-sans bg-white text-primary-text ${className || ''}`}>
+      {title ? <Title className="m-0 mb-2.5">{title}</Title> : null}
+      {accordionItems?.length ? (
+        <ul className="list-none m-0 p-0">
+          {accordionItems.map((item, i) => (
+            <AccordionItem key={`AccordionItem${i}`} {...item} context={context} />
+          ))}
+        </ul>
+      ) : null}
+    </section>
+  );
+});

package/mobile/src/components/Accordion/AccordionBlocks.tsx

@@ -0,0 +1,11 @@
+import { Headline } from '../Headline/Headline';
+import { LinkDocs } from '../LinkDocs/LinkDocs';
+import { PictureText } from '../PictureText/PictureText';
+import { TextBlock } from '../TextBlock/TextBlock';
+
+export const AccordionBlocks = {
+  Headline,
+  LinkDocs,
+  TextBlock,
+  PictureText,
+};

package/mobile/src/components/Accordion/AccordionContent.ts

@@ -0,0 +1,79 @@
+import type { HeadlineContent } from '../Headline/HeadlineContent';
+import type { LinkDocsContent } from '../LinkDocs/LinkDocsContent';
+import type { PictureTextContent } from '../PictureText/PictureTextContent';
+import type { TextBlockContent } from '../TextBlock/TextBlockContent';
+
+/**
+ * @title Тип блока
+ */
+export type AccordionTypeBlock = 'Headline' | 'LinkDocs' | 'TextBlock' | 'PictureText';
+
+/**
+ * @title Заголовок
+ */
+export interface HeadlineAccordionBlock extends HeadlineContent {
+  /** @default Headline */
+  accordionBlockType: AccordionTypeBlock;
+}
+
+/**
+ * @title Список документов
+ */
+export interface LinkDocsAccordionBlock extends LinkDocsContent {
+  /** @default LinkDocs */
+  accordionBlockType: AccordionTypeBlock;
+}
+
+/**
+ * @title Текстовый блок
+ */
+export interface TextBlockAccordionBlock extends TextBlockContent {
+  /** @default TextBlock */
+  accordionBlockType: AccordionTypeBlock;
+}
+
+/**
+ * @title Картинка с текстом
+ */
+export interface PictureTextAccordionBlock extends PictureTextContent {
+  /** @default PictureText */
+  accordionBlockType: AccordionTypeBlock;
+}
+
+/**
+ * @title Выберите блок
+ */
+export type EmptyOption = null;
+
+/**
+ * @title Содержимое аккордеона
+ */
+export type AccordionBlockProps =
+  | EmptyOption
+  | HeadlineAccordionBlock
+  | LinkDocsAccordionBlock
+  | TextBlockAccordionBlock
+  | PictureTextAccordionBlock;
+
+/**
+ * @title Элемент списка
+ */
+export interface AccordionItemCommonProps {
+  /**
+   * @title Название
+   * @default Список
+   */
+  label?: string;
+  /** @title Блоки */
+  blocks?: AccordionBlockProps[];
+}
+
+/**
+ * @title Аккордеон
+ */
+export interface AccordionContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Список */
+  accordionItems?: AccordionItemCommonProps[];
+}

package/mobile/src/components/Accordion/AccordionItem.tsx

@@ -0,0 +1,72 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { JSXBlock } from '../ContentPage/ContentPage';
+import { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { AccordionBlocks } from './AccordionBlocks';
+import type { AccordionBlockProps, AccordionItemCommonProps } from './AccordionContent';
+
+export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
+
+export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, context }) => {
+  const [isActive, setIsActive] = context.useState(false);
+  const hasContent = blocks?.length;
+  const icon = isActive ? 'MinusIcon' : 'PlusIcon';
+
+  const handleToggle = (e: MouseEvent) => {
+    if (!hasContent) {
+      return;
+    }
+
+    setIsActive(!isActive);
+    const contentBlock = getContentBlock(e);
+    contentBlock.style.maxHeight = contentBlock.style.maxHeight
+      ? null
+      : `${contentBlock.scrollHeight}px`;
+  };
+
+  return (
+    <li className="border-0 border-b border-solid border-main-divider last:border-b-0">
+      <button
+        className={`border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans text-primary-text
+        ${hasContent ? 'group cursor-pointer' : ''}`}
+        onClick={handleToggle}
+      >
+        <span
+          className={`m-0 text-xl pr-2.5 font-medium ${
+            hasContent ? 'group-hover:text-primary-main' : ''
+          }`}
+        >
+          {label}
+        </span>
+        {hasContent ? <Icon name={icon} width="24" height="24" /> : null}
+      </button>
+      {hasContent ? (
+        <div
+          className={`${
+            isActive ? 'pb-5' : ''
+          } text-sm transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0 `}
+        >
+          {blocks?.length ? blocks.map((block, i) => renderBlock(block, i, context)) : null}
+        </div>
+      ) : null}
+    </li>
+  );
+});
+
+const renderBlock = (block: AccordionBlockProps, i: number, context: ContentPageContext) => {
+  const type = block?.accordionBlockType;
+  if (!type || !(type in AccordionBlocks)) {
+    return null;
+  }
+
+  const AccordionBlock: JSXBlock = AccordionBlocks[type];
+  return (
+    <div className="mb-5 last:mb-0" key={`block_${i}`}>
+      <AccordionBlock context={context} {...block} />
+    </div>
+  );
+};
+
+const getContentBlock = ({ target }) =>
+  target.tagName === 'BUTTON' ? target.nextSibling : target.parentNode.nextSibling;

package/mobile/src/components/BaseTile/BaseTile.tsx

@@ -0,0 +1,108 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../types';
+import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
+import { Button } from '../../ui-kit/Button/Button';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img';
+import { Title } from '../../ui-kit/Title/Title';
+import { getColSpan } from '../../utils/getColSpan';
+import type { BaseTileCommonProps, BaseTileIconButton } from './BaseTileProps';
+
+export interface BaseTileProps extends BaseTileCommonProps, UniBlockProps {}
+
+const TITLE_CLASSES = 'font-medium m-0 whitespace-pre-wrap max-w-[600px]';
+
+export const BaseTile = JSX<BaseTileProps>(
+  ({
+    className,
+    context,
+    title,
+    titleSize,
+    description,
+    children,
+    buttons,
+    image,
+    items,
+    version = 'primary',
+  }) => {
+    const router = context.useRouter();
+    const { handlerDecorator } = context;
+    return (
+      <div className={`font-sans flex flex-col grow h-full items-start`}>
+        {title && (
+          <Title
+            size={getTitleSize(titleSize, className)}
+            className={`${TITLE_CLASSES} ${version === 'primary' ? 'text-primary-text' : ''}`}
+          >
+            {title}
+          </Title>
+        )}
+        <div className="flex grow w-full justify-between">
+          <div className="flex flex-col justify-between items-start">
+            <div>
+              {description && (
+                <div className={`font-normal text-base mt-4 max-w-[600px]`}>{description}</div>
+              )}
+              {children}
+              {items?.length ? renderItems(items, version) : null}
+            </div>
+            {buttons?.length ? (
+              <div className="flex mt-9 gap-3">
+                {buttons.map((button, index) =>
+                  renderButton(useLink({ router, handlerDecorator }, button), index),
+                )}
+              </div>
+            ) : null}
+          </div>
+          {image?.src && <Img className="mt-auto ml-7" image={image} />}
+        </div>
+      </div>
+    );
+  },
+);
+
+function getTitleSize(titleSize, className = '') {
+  if (titleSize) {
+    return titleSize;
+  }
+
+  const colSpan = getColSpan(className);
+  if (colSpan <= 4) {
+    return 'S';
+  } else if (colSpan <= 8) {
+    return 'M';
+  } else {
+    return 'L';
+  }
+}
+
+function renderItems(items: string[] = [], version?: BlockVersion) {
+  return (
+    <section className="max-w-[600px] mt-5" role="list">
+      {items.map((_, i) => (
+        <BlockItem
+          key={String(i)}
+          className={i ? 'mt-2.5' : ''}
+          text={_}
+          white={version !== 'primary'}
+        />
+      ))}
+    </section>
+  );
+}
+
+function renderButton({ icon, asSVG, ...button }: BaseTileIconButton, i: number) {
+  if (!button?.text) return;
+
+  return icon ? (
+    <Button
+      key={String(i)}
+      appendLeft={<Icon name={icon} asSVG={asSVG} width="24" height="24" />}
+      {...button}
+    />
+  ) : (
+    <Button key={String(i)} {...button} />
+  );
+}

package/mobile/src/components/BaseTile/BaseTileProps.ts

@@ -0,0 +1,44 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { Picture } from '../../model/Picture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { TitleSize } from '../../ui-kit/Title/TitleProps';
+
+/**
+ * @title Выравнивание
+ * @enumNames [
+ *    "По левому краю",
+ *    "По центру",
+ *    "По правому краю"
+ * ]
+ */
+export type AlignType = 'left' | 'center' | 'right';
+
+export interface BaseTileIconButton extends ButtonWithIconProps {
+  icon?: IconName;
+}
+
+/**
+ * @title Плитка
+ */
+export interface BaseTileCommonProps {
+  /** @title Заголовок */
+  title?: string;
+  /**
+   * @title Размер заголовка
+   * @default M
+   */
+  titleSize?: TitleSize;
+  /** @title Описание */
+  description?: string;
+  image?: Picture;
+  /** @title Список */
+  items?: string[];
+  /**
+   * @title Кнопки
+   * @maxItems 4
+   */
+  buttons?: BaseTileIconButton[];
+  version?: BlockVersion;
+  align?: AlignType;
+}

package/mobile/src/components/BenefitsBlock/BenefitsBlock.example.json

@@ -0,0 +1,13 @@
+{
+  "title": "Преимущества",
+  "benefits": [
+    {
+      "label": "Преимущество №1",
+      "icon": "ClockIcon"
+    },
+    {
+      "label": "Преимущество №2",
+      "icon": "SignDocsIcon"
+    }
+  ]
+}

package/mobile/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Title } from '../../ui-kit/Title/Title';
+import type { Benefit, BenefitsBlockContent } from './BenefitsBlockContent';
+
+export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
+
+export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefits }) => {
+  return (
+    <section
+      className={`font-sans text-primary-text bg-white p-12 pb-2 flex flex-col items-center ${
+        className || ''
+      }`}
+    >
+      {title ? <Title className="font-medium m-0 max-w-[47rem] text-center">{title}</Title> : null}
+      {benefits?.length ? (
+        <div className="grid grid-cols-2 gap-5 mt-9">{benefits.map(renderStep)}</div>
+      ) : null}
+    </section>
+  );
+});
+
+const renderStep = (benefit: Benefit, i: number) => {
+  return (
+    <div key={String(i)} className="flex items-center p-10 gap-5 max-w-[580px]">
+      {benefit.icon && (
+        <Icon
+          className="h-[70px] w-[70px] min-w-[70px] min-h-[70px]"
+          name={benefit.icon}
+          width="70"
+          height="70"
+        />
+      )}
+      <div>
+        <h3 className="font-medium text-xl m-0">{benefit.label}</h3>
+        {benefit.description && (
+          <div className="font-normal text-sm mt-2">{benefit.description}</div>
+        )}
+      </div>
+    </div>
+  );
+};

package/mobile/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -0,0 +1,25 @@
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+
+/**
+ * @title Преимущество
+ */
+export interface Benefit {
+  /** @title Название */
+  label?: string;
+  /** @title Описание */
+  description?: string;
+  icon?: IconName;
+}
+
+/**
+ * @title Блок преимущества
+ */
+export interface BenefitsBlockContent {
+  /** @title Заголовок */
+  title?: string;
+  /**
+   * @title Список преимуществ
+   * @maxItems 6
+   */
+  benefits?: Benefit[];
+}

package/mobile/src/components/BlockContent.ts

@@ -0,0 +1,43 @@
+import type { BenefitsBlockContent } from './BenefitsBlock/BenefitsBlockContent';
+import type { ComparisonTableContent } from './ComparisonTable/ComparisonTableContent';
+import type { ExchangeRateTileContent } from './ExchangeRateTile/ExchangeRateTileContent';
+import type { FooterContent } from './Footer/FooterContent';
+import type { GalleryContent } from './Gallery/GalleryContent';
+import type { HeaderContent } from './Header/HeaderContent';
+import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
+import type { MobileAppTileContent } from './MobileAppTile/MobileAppTileContent';
+import type { NavigationContent } from './Navigation/NavigationContent';
+import type { PictureTextContent } from './PictureText/PictureTextContent';
+import type { PlaceholderContent } from './Placeholder/PlaceholderContent';
+import type { ProductBlockContent } from './ProductBlock/ProductBlockContent';
+import type { ProductGalleryContent } from './ProductGallery/ProductGalleryContent';
+import type { ProductTileContent } from './ProductTile/ProductTileContent';
+import type { PromoTileContent } from './PromoTile/PromoTileContent';
+import type { StepsBlockContent } from './StepsBlock/StepsBlockContent';
+import type { TariffsTableContent } from './TariffsTable/TariffsTableContent';
+import type { TextBlockContent } from './TextBlock/TextBlockContent';
+import type { TileContent } from './Tile/TileContent';
+
+/**
+ * @hidden
+ */
+export type BlockContent =
+  | BenefitsBlockContent
+  | ComparisonTableContent
+  | ExchangeRateTileContent
+  | FooterContent
+  | GalleryContent
+  | HeaderContent
+  | LinkDocsContent
+  | MobileAppTileContent
+  | PictureTextContent
+  | PlaceholderContent
+  | ProductBlockContent
+  | ProductGalleryContent
+  | ProductTileContent
+  | PromoTileContent
+  | StepsBlockContent
+  | TariffsTableContent
+  | TextBlockContent
+  | TileContent
+  | NavigationContent;

package/mobile/src/components/Blocks.ts

@@ -0,0 +1,31 @@
+import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
+import { Footer } from './Footer/Footer';
+import { Gallery } from './Gallery/Gallery';
+import { Header } from './Header/Header';
+import { Headline } from './Headline/Headline';
+import { MobileAppTile } from './MobileAppTile/MobileAppTile';
+import { Navigation } from './Navigation/Navigation';
+import { PictureText } from './PictureText/PictureText';
+import { Placeholder } from './Placeholder/Placeholder';
+import { ProductBlock } from './ProductBlock/ProductBlock';
+import { ProductTile } from './ProductTile/ProductTile';
+import { StepsBlock } from './StepsBlock/StepsBlock';
+import { TextBlock } from './TextBlock/TextBlock';
+import { Tile } from './Tile/Tile';
+
+export const Blocks = {
+  ExchangeRateTile,
+  Footer,
+  Gallery,
+  Header,
+  Headline,
+  MobileAppTile,
+  PictureText,
+  Placeholder,
+  ProductBlock,
+  ProductTile,
+  TextBlock,
+  Tile,
+  Navigation,
+  StepsBlock,
+};