@redneckz/wildless-cms-uni-blocks 0.12.4 → 0.12.6

package/src/components/ProductTile/ProductTile.tsx

@@ -1,73 +1,38 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
+import { BaseProductTile } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { style } from '../../utils/style';
-import { Headline } from '../Headline/Headline';
-import type { Benefit, ProductTileContent } from './ProductTileContent';
-import { renderAdditionalDescription } from './renderAdditionalDescription';
-import { renderBenefit } from './renderBenefit';
-import { renderImage } from './renderImage';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import type { ProductTileContent } from './ProductTileContent';
 
 export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 
 export const ProductTile = JSX<ProductTileProps>(
   ({
-    className = '',
-    title,
+    className,
+    padding,
     headlineVersion = 'S',
-    description,
+    isTabularBenefits = true,
     additionalDescription,
-    benefits = [],
-    buttons,
-    image,
-    directionRight = true,
+    imageOptions,
     ...rest
   }) => (
-    <BlockWrapper
-      className={style(
-        'overflow-hidden box-border relative min-h-[364px] flex flex-col justify-between',
-        className,
-      )}
-      {...rest}
-    >
-      <div className={style('flex flex-col', directionRight ? '' : 'items-end')}>
-        <Headline
-          className={style('!p-0 !bg-transparent z-10', title || description ? 'mb-3.5' : '')}
-          title={title}
-          description={description}
-          headlineVersion={headlineVersion}
-          as="h2"
-          align="text-left"
-        />
-        {renderBenefits(benefits, image)}
-        {renderAdditionalDescription(additionalDescription, image)}
-      </div>
-      {renderButtonsSection(buttons, {
-        className: style('mt-5 text-l', directionRight ? '' : 'justify-end'),
-      })}
-      {renderImage(image, directionRight)}
+    <BlockWrapper className={className} padding="p-0" {...rest}>
+      <BaseProductTile
+        className="h-full"
+        defaultPadding="p-m"
+        padding={padding}
+        headlineVersion={headlineVersion}
+        isTabularBenefits={isTabularBenefits}
+        imageOptions={{ isBackground: true, ...imageOptions }}
+        {...rest}
+      >
+        {additionalDescription ? (
+          <Paragraph size="text-m" font="font-light" color="group-data-primary:text-secondary-text">
+            {additionalDescription}
+          </Paragraph>
+        ) : null}
+      </BaseProductTile>
     </BlockWrapper>
   ),
 );
-
-function renderBenefits(benefits: Benefit[], image?: Picture) {
-  if (!benefits.length) {
-    return null;
-  }
-
-  // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
-  const benefitsWidth = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
-
-  return (
-    <div
-      className={style(
-        'z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline',
-        benefitsWidth,
-      )}
-    >
-      {benefits.length ? benefits.map(renderBenefit) : null}
-    </div>
-  );
-}

package/src/components/ProductTile/ProductTileContent.ts

@@ -1,41 +1,10 @@
-import type { DefaultListItemType } from '../../model/DefaultListItemType';
-import type {
-  AdditionalDescriptionProps,
-  DescriptionProps,
-  HeadlineProps,
-  LabelProps,
-} from '../../model/HeadlineType';
+import type { AdditionalDescriptionProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { RichTextItem } from '../../model/RichTextItem';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-
-/**
- * @title Стандартный
- */
-type TextBenefit = DescriptionProps & LabelProps & DefaultListItemType;
-
-/**
- * @title Преимущество
- * @default{
- *  "type": "default"
- * }
- */
-export type Benefit = TextBenefit | RichTextItem;
+import { BaseProductTileContent } from '../../ui-kit/BaseProductTile/BaseProductTileContent';
 
 /**
  * @title Продуктовая плитка
  */
 export type ProductTileContent = UniBlockContent &
-  HeadlineProps &
-  AdditionalDescriptionProps &
-  ButtonContent &
-  ImageContent & {
-    /**
-     * @title Преимущества
-     * @maxItems 7
-     */
-    benefits?: Benefit[];
-    /** @title Картинка справа/текст слева */
-    directionRight?: boolean;
-  };
+  BaseProductTileContent &
+  AdditionalDescriptionProps;

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

@@ -0,0 +1,47 @@
+import '../../setup-fixture';
+
+import { RepresentativeOfficeInfo } from './RepresentativeOfficeInfo';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { Picture } from '../../model/Picture';
+
+const BUTTON: ButtonWithIconProps = {
+  text: 'Информация о регионе',
+  target: '_blank',
+  version: 'secondary',
+  icon: { icon: 'ArrowTopRightIcon', iconVersion: 'color' },
+};
+
+const ICON: Picture = {
+  icon: 'BelarusianFlag',
+  iconVersion: 'color',
+};
+
+const DESCRIPTION = `
+<p><strong>Представительство АО «Россельхозбанк» в Республике Беларусь (г. Минск) зарегистрировано в октябре 2008 года</strong></p>
+<br>
+<p class="text-slate-600/50 mb-3">Основными задачи Представительства</p>
+<ul>
+  <li>установление и развитие деловых связей с белорусскими финансовыми институтами и компаниями АПК для реализации совместных проектов;</li>
+  <li>организация взаимодействия с государственными органами власти и международными организациями, находящимися в Республике Беларусь;</li>
+  <li>продвижение и сопровождение в Республике Беларусь российских инвестиционных проектов;</li>
+  <li>мониторинг реализации двусторонних и многосторонних соглашений, участником которых является АО «Россельхозбанк».</li>
+</ul>
+`;
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <RepresentativeOfficeInfo
+        className="col-span-12 sm:col-span-6"
+        title="Представительство в Республике Беларусь"
+        __html={DESCRIPTION}
+        address="Республика Беларусь, 220004, г. Минск, ул. Немига, д. 40"
+        telephone="(+375-17)-226-4578"
+        email="prshbrb@mail.ru"
+        button={BUTTON}
+        icon={ICON}
+        version="primary"
+      />
+    </div>
+  ),
+};

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.fixture.tsx

@@ -1,22 +1,30 @@
 import '../../setup-fixture';
 
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { RepresentativeOfficeInfo } from './RepresentativeOfficeInfo';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { Picture } from '../../model/Picture';
 
-const button: ButtonWithIconProps = {
+const BUTTON: ButtonWithIconProps = {
   text: 'Информация о регионе',
   target: '_blank',
   version: 'secondary',
   icon: { icon: 'ArrowTopRightIcon', iconVersion: 'color' },
 };
 
-const description = `
+const ICON: Picture = {
+  icon: 'BelarusianFlag',
+  iconVersion: 'color',
+};
+
+const DESCRIPTION = `
 <p><strong>Представительство АО «Россельхозбанк» в Республике Беларусь (г. Минск) зарегистрировано в октябре 2008 года</strong></p>
 <br>
-<p>Основными задачи Представительства</p>
+<p class="text-slate-600/50 mb-3">Основными задачи Представительства</p>
 <ul>
-  <li>установление и развитие деловых связей с белорусскими финансовыми институтами и компаниями АПК для реализации совместных проектов</li>
-  <li>организация взаимодействия с государственными органами власти и международными организациями, находящимися в Республике Бкларусь</li>
+  <li>установление и развитие деловых связей с белорусскими финансовыми институтами и компаниями АПК для реализации совместных проектов;</li>
+  <li>организация взаимодействия с государственными органами власти и международными организациями, находящимися в Республике Беларусь;</li>
+  <li>продвижение и сопровождение в Республике Беларусь российских инвестиционных проектов;</li>
+  <li>мониторинг реализации двусторонних и многосторонних соглашений, участником которых является АО «Россельхозбанк».</li>
 </ul>
 `;
 
@@ -24,13 +32,14 @@ export default {
   default: (
     <div className="container grid grid-cols-12">
       <RepresentativeOfficeInfo
-        className="col-span-6"
+        className="col-span-12 sm:col-span-6"
         title="Представительство в Республике Беларусь"
-        __html={description}
+        __html={DESCRIPTION}
         address="Республика Беларусь, 220004, г. Минск, ул. Немига, д. 40"
         telephone="(+375-17)-226-4578"
         email="prshbrb@mail.ru"
-        button={button}
+        button={BUTTON}
+        icon={ICON}
         version="primary"
       />
     </div>

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -30,9 +30,9 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
     ...rest
   }) => (
     <BlockWrapper className={style('box-border text-left', className)} version={version} {...rest}>
-      <div className="w-full flex justify-between">
-        {title ? <Heading headingType="h4" as="h3" className="mb-6" title={title} /> : null}
+      <div className="w-full sm:flex sm:justify-between sm:flex-row-reverse">
         {renderIconBlock(icon)}
+        {title ? <Heading headingType="h4" as="h3" className="mb-3 sm:mb-6" title={title} /> : null}
       </div>
       <div className="w-full">
         {__html ? renderDescriptionBlock(__html) : null}
@@ -50,7 +50,7 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
 );
 
 const renderIconBlock = (icon?: Picture) => (
-  <div className="self-end">
+  <div className={'w-10 h-7 sm:w-24 sm:h-16 mb-3 sm:mb-0 sm:mt-3'}>
     {icon?.src ? <Img image={icon} /> : null}
     {icon?.icon ? <Img image={icon} /> : null}
   </div>

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

@@ -30,6 +30,14 @@ export default {
           description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
           size="normal"
           steps={steps}
+          buttons={[
+            {
+              text: 'Отправить заявку',
+              href: 'https://www.rshb.ru/',
+              target: '_blank',
+              version: 'primary',
+            },
+          ]}
         />
       </div>
     </div>
@@ -56,23 +64,23 @@ export default {
             {
               type: 'default',
               description: 'Оставьте онлайн-заявку на потребительский кредит',
-              icon: { icon: 'ClockIcon' },
+              icon: { src: 'bank-card.png' },
             },
             {
               type: 'default',
               label: 'В случае одобрения',
-              icon: { icon: 'SignDocsIcon' },
+              icon: { src: 'card-with-diamond.png' },
             },
             {
               type: 'default',
               label: 'Заявка на кредит',
               description: 'Оставьте онлайн-заявку на потребительский кредит',
-              icon: { icon: 'ComfortableCompIcon' },
+              icon: { src: 'building.png' },
             },
             {
               type: 'default',
               label: 'Получение наличных',
-              icon: { icon: 'ClockIcon' },
+              icon: { src: 'globe-1.png' },
             },
           ]}
         />
@@ -142,23 +150,23 @@ export default {
             {
               type: 'default',
               description: 'Оставьте онлайн-заявку на потребительский кредит',
-              icon: { icon: 'ClockIcon', iconVersion: 'normal' },
+              icon: { src: 'bank-card.png' },
             },
             {
               type: 'default',
               label: 'В случае одобрения',
-              icon: { icon: 'SignDocsIcon', iconVersion: 'normal' },
+              icon: { src: 'card-with-diamond.png' },
             },
             {
               type: 'default',
               label: 'Заявка на кредит',
               description: 'Оставьте онлайн-заявку на потребительский кредит',
-              icon: { icon: 'ComfortableCompIcon', iconVersion: 'normal' },
+              icon: { src: 'building.png' },
             },
             {
               type: 'default',
               label: 'Получение наличных',
-              icon: { icon: 'ClockIcon', iconVersion: 'normal' },
+              icon: { src: 'globe-1.png' },
             },
           ]}
           version="secondary"

package/src/components/StepsBlock/StepsBlock.mobile.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import type { SizeVersion } from '../../model/SizeVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -8,63 +7,71 @@ import { Img } from '../../ui-kit/Img/Img';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 import { checkCanRenderIcon } from './checkCanRenderIcon';
-import type { DefaultStep, Step, StepsBlockContent } from './StepsBlockContent';
+import type { DefaultStep, Step } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
+import { style } from '../../utils/style';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { StepsBlockContent } from './StepsBlockContent';
+import { UniBlockProps } from '../../model/JSXBlock';
 
-export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
+type StepIconVersion = Record<'icon' | 'image', string>;
 
-const STEPS_SIZE_MAP: Record<SizeVersion, string> = {
-  normal: 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]',
-  small: 'h-12 w-12 min-w-12 min-h-12',
+const STEPS_SIZE_MAP: Record<SizeVersion, StepIconVersion> = {
+  normal: { icon: 'h-11 w-11', image: 'h-14 w-14' },
+  small: { icon: 'h-12 w-12', image: 'h-14 w-14' },
 };
 
 const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
-  normal: 'min-h-[70px]',
+  normal: '',
   small: 'min-h-12',
 };
 
 const styleMap = STEPS_BLOCK_STYLE;
 
+export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
+
 export const StepsBlock = JSX<StepsBlockProps>(
   ({
     className = '',
     title,
     description,
-    showLines = true,
     steps,
+    buttons,
     size = 'normal',
     version = 'primary',
     ...rest
   }) => (
     <BlockWrapper
-      className={`box-border flex flex-col ${className}`}
-      defaultPadding="px-4 py-6"
+      className={style('box-border flex flex-col gap-2', className)}
+      defaultPadding="p-default"
       version={version}
       {...rest}
     >
-      {title ? <Heading headingType="h3" className="text-center" title={title} /> : null}
+      {title ? <Heading headingType="h3" className="text-left" title={title} /> : null}
       {description ? (
-        <p className={`text-m-light text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
-          {description}
-        </p>
+        <Paragraph size="text-xl" font="font-light">
+          <span className={styleMap.description}>{description}</span>
+        </Paragraph>
       ) : null}
       {steps?.length ? (
-        <div className={`box-border py-0.5 mb-0.5 mt-5`}>
-          <div className="flex flex-col justify-between gap-x-[101px]">
-            {steps.map(renderStep(size, version, showLines))}
+        <div className="box-border">
+          <div className="flex flex-col justify-between">
+            {steps.map(renderStep(size, version))}
           </div>
         </div>
       ) : null}
+      {renderButtonsSection(buttons, { className: 'mt-3', isVertical: true })}
     </BlockWrapper>
   ),
 );
 
 // TODO: Create universal function for this case
 const renderStep =
-  (size: SizeVersion, version: BlockVersion, showLines: boolean) =>
+  (size: SizeVersion, version: BlockVersion) =>
   // Linter doesn't understand that switch processes all cases
   // eslint-disable-next-line consistent-return
-  (step: Step, i: number, steps: Step[]) => {
+  (step: Step, i: number) => {
     const { type } = step;
 
     if (!(type === 'default' || type === 'rte')) {
@@ -73,7 +80,7 @@ const renderStep =
 
     switch (type) {
       case 'default':
-        return renderDefaultStep(size, version, showLines)(step, i, steps);
+        return renderDefaultStep(size, version)(step, i);
       case 'rte':
         return <RichText __html={step.__html} />;
       default:
@@ -82,52 +89,46 @@ const renderStep =
   };
 
 const renderDefaultStep =
-  (size: SizeVersion, version: BlockVersion, showLines: boolean) =>
-  (step: DefaultStep, i: number, steps: Step[]) => {
-    const isLastStep = steps.length - 1 === i;
-    const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
-
-    return (
-      <div key={String(i)}>
-        <div className="flex flex-row text-center relative">
-          <div className="overflow-hidden flex-shrink-0">
+  (size: SizeVersion, version: BlockVersion) => (step: DefaultStep, i: number) =>
+    (
+      <div key={String(i)} className="contents">
+        <div className="flex flex-row text-center relative py-3">
+          <div className="overflow-hidden flex flex-shrink-0 items-center">
             {renderIconArea(size, version)(step, i)}
-            {isLastStep ? null : (
-              <div
-                className={`min-h-8 h-full w-0.5 ${
-                  showLines ? styleMap.iconConnector : ''
-                } ${margin}`}
-              />
-            )}
           </div>
           <div
-            className={`flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`}
+            className={style(
+              'flex flex-col justify-center h-fit',
+              STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size],
+            )}
           >
-            {step.label ? (
-              <div className="text-m-title-xs font-medium m-0 text-left mb-1">{step.label}</div>
-            ) : null}
+            {step.label ? <div className="text-l m-0 text-left">{step.label}</div> : null}
             {step.description ? (
-              <div className={`text-s ${styleMap.description} text-left`}>{step.description}</div>
+              <div className={style('text-s font-light text-left', styleMap.description)}>
+                {step.description}
+              </div>
             ) : null}
           </div>
         </div>
       </div>
     );
-  };
 
 const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step, i: number) => {
-  const iconAreaSize = STEPS_SIZE_MAP[size];
-
-  const iconSize = size === 'normal' ? '38' : '27';
-  const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
-
+  const iconSize = size === 'normal' ? '38' : '24';
   const iconVersion = version === 'secondary' ? 'white' : 'color';
+  const isImg = Boolean(step?.icon?.src);
+  const iconAreaSize = STEPS_SIZE_MAP[size][isImg ? 'image' : 'icon'];
+  const containerStyle = isImg ? '' : `rounded-md ${styleMap.iconBackground}`;
 
   return (
     <div
-      className={`${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
+      className={style(
+        iconAreaSize,
+        containerStyle,
+        'z-10 mr-3 flex justify-center content-center',
+      )}
     >
-      <span className={`font-medium flex self-center ${iconTextSize}`}>
+      <span className="flex self-center text-h4 text-secondary-text group-data-secondary:text-white">
         {checkCanRenderIcon(step?.icon) ? (
           <Img
             image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}

package/src/components/Tabs/LinkTab.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import { getLinkTabClassName } from './tabItemClasses';
+import { style } from '../../utils/style';
+import { getTabClassName } from './tabItemClasses';
 import type { LinkTabData, TabData, TabsMode } from './TabsContent';
 
 interface LinkTabProps {
@@ -23,14 +24,24 @@ export const LinkTab = JSX<LinkTabProps>((props) => {
   };
 
   return (
-    <a
+    <div
+      className={getTabClassName('block', active, tabsMode)}
       role="tab"
-      className={getLinkTabClassName('link', active, tabsMode)}
-      target={tab.target}
-      href={adjustedProps.href}
-      onClick={handleClick}
+      aria-selected={active}
+      onClick={() => onClick(tab)}
     >
-      <span className={getLinkTabClassName('text', active, tabsMode)}>{tab.text}</span>
-    </a>
+      <a
+        role="tab"
+        className={style(
+          'flex flex-1 items-center justify-center h-full',
+          getTabClassName('text', active, tabsMode),
+        )}
+        target={tab.target}
+        href={adjustedProps.href}
+        onClick={handleClick}
+      >
+        <span>{tab.text}</span>
+      </a>
+    </div>
   );
 });

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

@@ -0,0 +1,55 @@
+import '../../setup-fixture';
+
+import { Tabs } from './Tabs';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Tabs
+        className="col-span-12"
+        tabs={[
+          { type: 'group', ref: 'tab1', title: 'Вкладка 1' },
+          { type: 'group', ref: 'tab2', title: 'Вкладка 2' },
+          { type: 'link', href: 'https://google.com', text: 'Вкладка 3' },
+          { type: 'link', href: 'https://yandex.com', text: 'Вкладка 4' },
+        ]}
+        tabsMode="wideScreen"
+      />
+    </div>
+  ),
+  scrollable: (
+    <div className="container grid grid-cols-12">
+      <Tabs
+        className="col-span-12"
+        tabs={[
+          { type: 'group', ref: 'tab1', title: 'Вкладка 1' },
+          { type: 'group', ref: 'tab2', title: 'Вкладка 2' },
+          { type: 'link', href: 'https://google.com', text: 'Вкладка 3' },
+          { type: 'link', href: 'https://yandex.com', text: 'Вкладка 4' },
+          { type: 'link', href: 'https://ya.com', text: 'Вкладка 5' },
+          { type: 'link', href: 'https://habr.com', text: 'Вкладка 6' },
+          { type: 'link', href: 'https://kremlin.com', text: 'Вкладка 7' },
+          { type: 'link', href: 'https://gov.com', text: 'Вкладка 8' },
+          { type: 'group', ref: 'tab3', title: 'Вкладка 9' },
+        ]}
+        tabsMode="scrollable"
+      />
+    </div>
+  ),
+  centered: (
+    <div className="container grid grid-cols-12">
+      <Tabs
+        className="col-span-12"
+        tabs={[
+          { type: 'group', ref: 'tab1', title: '2021' },
+          { type: 'group', ref: 'tab2', title: '2020' },
+          { type: 'link', href: 'https://google.com', text: '2019' },
+          { type: 'link', href: 'https://yandex.com', text: '2018' },
+          { type: 'link', href: 'https://ya.com', text: '2017' },
+          { type: 'link', href: 'https://habr.com', text: '2016' },
+        ]}
+        tabsMode="centered"
+      />
+    </div>
+  ),
+};