@redneckz/wildless-cms-uni-blocks 0.4.2 → 0.4.4

package/src/components/ProductGallery/ProductGallery.example.json

@@ -16,7 +16,23 @@
         },
         "version": "primary",
         "description": "Описание",
-        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+        "benefits": [
+          {
+            "icon": {
+              "icon": "ActualBalanceIcon"
+            },
+            "label": "Денежное преимущество",
+            "description": "эмпирическая выгода"
+          },
+          {
+            "icon": {
+              "icon": "BankIcon"
+            },
+            "label": "Возврат %",
+            "description": "при пополнении счёта"
+          }
+        ]
       }
     },
     {
@@ -35,7 +51,23 @@
         },
         "version": "primary",
         "description": "Описание",
-        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+        "benefits": [
+          {
+            "icon": {
+              "icon": "BankIcon"
+            },
+            "label": "Возврат %",
+            "description": "при пополнении счёта"
+          },
+          {
+            "icon": {
+              "icon": "ActualBalanceIcon"
+            },
+            "label": "Денежное преимущество",
+            "description": "эмпирическая выгода"
+          }
+        ]
       }
     }
   ]

package/src/components/ProductGallery/ProductGallery.tsx

@@ -2,10 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
-import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
 import type { ProductGalleryContent } from './ProductGalleryContent';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
+import { VersionStyleMap } from '../../model/BlockVersion';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
@@ -14,21 +15,11 @@ type StyleType = {
   text: string;
 };
 
-const productGalleryStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
 const productBlockStyleMap: Record<BlockVersion, StyleType> = {
   primary: { title: 'text-secondary-text', text: 'text-secondary-text' },
   secondary: { title: 'text-white', text: 'text-white/80' },
 };
 
-const productSlideStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
 export const ProductGallery = JSX<ProductGalleryProps>(
   ({ className = '', context, slides = [], version = 'primary', ...rest }) => {
     const galleryNav = slides.map((s) => s.nav);
@@ -39,7 +30,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
       <BlockWrapper
         context={context}
         className={`box-border pt-[50px] overflow-hidden relative font-sans w-100 ${className}
-        ${productGalleryStyleMap[version]}`}
+        ${VersionStyleMap[version]}`}
         {...rest}
       >
         <div
@@ -78,7 +69,7 @@ function renderProductBlock(block: ProductBlockInnerContent, i: number, context)
     >
       <div className="flex grow">
         <ProductBlockInner
-          className={`pl-[50px] z-[1] ${additionalClass}`}
+          className={`pl-[50px] z-10 ${additionalClass}`}
           context={context}
           textBlockClassName="mb-[154px]"
           {...block}
@@ -95,7 +86,7 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick, version }) {
   const btnClassName = isActiveBtn
     ? 'bg-white shadow-dark-blue/42 w-[354px] min-w-[354px] border-none'
     : `min-w-[277px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10
-      ${productSlideStyleMap[version]}`;
+      ${VersionStyleMap[version]}`;
   const btnTitleClassName = isActiveBtn
     ? 'text-primary-text text-h6'
     : `text-l ${productBlockStyleMap[version].title}`;

package/src/components/ProductGallery/ProductGalleryBlock.tsx

@@ -1,14 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
 import type { HeadlineProps } from '../../model/HeadlineType';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
-
-const productGalleryStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
+import { VersionStyleMap } from '../../model/BlockVersion';
 
 export interface ProductGalleryBlockProps extends UniBlockProps {
   headlineVersion?: HeadlineProps;
@@ -21,7 +16,7 @@ export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
 
     return (
       <section
-        className={`flex grow-0 shrink-0 basis-full px-4 pt-6 ${productGalleryStyleMap[version]} ${className}`}
+        className={`flex grow-0 shrink-0 basis-full px-4 pt-6 ${VersionStyleMap[version]} ${className}`}
         role="listitem"
       >
         <div className="flex grow">

package/src/components/ProductTile/ProductTile.fixture.tsx

@@ -1,32 +1,40 @@
 import { context } from '../../react/setup-fixture';
-
 import type { Picture } from '../../model/Picture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductTile } from './ProductTile';
 import type { ProductTileContent } from './ProductTileContent';
 
+const imageSize = {
+  height: 242,
+  width: 242,
+};
+
 const cardWithMoney: Picture = {
   src: 'card-with-diamond.png',
   alt: 'Кредиты в РСХБ',
   format: 'webp',
+  size: imageSize,
 };
 
 const letterWithMoney: Picture = {
   src: 'letter-with-money.png',
   alt: 'Пенсионный кредит в РСХБ',
   format: 'webp',
+  size: imageSize,
 };
 
 const letterWithPhone: Picture = {
   src: 'letter-with-phone.png',
   alt: 'Пенсионный кредит в РСХБ',
   format: 'webp',
+  size: imageSize,
 };
 
 const building: Picture = {
   src: 'building.png',
   alt: 'Кредит под залог недвижимости в РСХБ',
   format: 'webp',
+  size: imageSize,
 };
 
 const benefits = [
@@ -51,6 +59,21 @@ const benefits2 = [
   },
 ];
 
+const multilineBenefits = [
+  {
+    label: 'Широкий',
+    description: 'выбор платёжных систем',
+  },
+  {
+    label: 'Специальные',
+    description: 'условия по снятию наличных условия по снятию наличных',
+  },
+  {
+    label: '0,5 балла',
+    description: '«Урожай» за 100 рублей «Урожай» за 100 рублей',
+  },
+];
+
 const buttons: ButtonProps[] = [
   {
     text: 'Подробнее',
@@ -159,4 +182,15 @@ export default {
       />
     </div>
   ),
+  'stretching with long description': (
+    <div className="container grid grid-cols-12">
+      <ProductTile
+        context={context}
+        className="col-span-6"
+        {...PRODUCT_TILE}
+        benefits={multilineBenefits}
+        title="Многострочные преимущества"
+      />
+    </div>
+  ),
 };

package/src/components/ProductTile/ProductTile.tsx

@@ -1,21 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
+import type { ProductTileContent, TextBenefit } from './ProductTileContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import { Headline } from '../Headline/Headline';
-import type { ProductTileContent, TextBenefit } from './ProductTileContent';
+import { VersionStyleMap } from '../../model/BlockVersion';
 
 export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 
-const productTileStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
 export const ProductTile = JSX<ProductTileProps>(
   ({
     context,
@@ -24,7 +20,7 @@ export const ProductTile = JSX<ProductTileProps>(
     headlineVersion = 'S',
     description,
     additionalDescription,
-    benefits,
+    benefits = [],
     buttons,
     image,
     version = 'primary',
@@ -33,32 +29,28 @@ export const ProductTile = JSX<ProductTileProps>(
     return (
       <BlockWrapper
         context={context}
-        className={`bg-white overflow-hidden text-primary-text font-sans p-9 box-border min-h-[364px] relative justify-between grid ${className} ${
-          productTileStyleMap[version]
-        } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
+        className={`overflow-hidden font-sans p-9 box-border relative justify-between grid ${className} ${
+          VersionStyleMap[version]
+        } ${getTileRightPadding(className)} ${getTileMinHeight(className)}`}
         {...rest}
       >
-        <div className="z-[1]">
-          <Headline
-            context={context}
-            className="!p-0"
-            as="h2"
-            title={title}
-            description={description}
-            headlineVersion={headlineVersion}
-            bgColorHeadline={version}
-            align="left"
-          />
-          {renderBenefits(benefits || [], version)}
-          {additionalDescription
-            ? renderAdditionalDescription(additionalDescription, version)
-            : null}
-        </div>
+        <Headline
+          context={context}
+          className={`!p-0 z-10 ${title || description ? 'mb-3.5' : ''}`}
+          as="h2"
+          title={title}
+          description={description}
+          headlineVersion={headlineVersion}
+          bgColorHeadline={version}
+          align="left"
+        />
+        {renderBenefits(benefits, version)}
+        {additionalDescription ? renderAdditionalDescription(additionalDescription, version) : null}
         {buttons?.length ? (
           <ButtonSection
             context={context}
             buttons={buttons}
-            className="flex self-end mt-5 gap-4 z-[1] text-l"
+            className="flex self-end mt-5 gap-4 z-10 text-l"
           />
         ) : null}
         {image?.src ? <Img className="absolute right-0 bottom-0" image={image} /> : null}
@@ -67,40 +59,37 @@ export const ProductTile = JSX<ProductTileProps>(
   },
 );
 
-function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
-  return (
-    <div className="flex mt-3.5">
-      {benefits.length ? (
-        <div className="mr-6 gap-2.5 text-h6">{benefits.map(renderBenefitLabel)}</div>
-      ) : null}
-      {benefits.length ? (
-        <div className="pt-1 text-m">
-          {benefits.map((_, i) => renderBenefitDescription(_, i, version))}
-        </div>
-      ) : null}
-    </div>
-  );
-}
+// picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
+const BENEFITS_WIDTH = 'max-w-[calc(100%-186px)]';
 
-function renderBenefitLabel(benefit: TextBenefit, i: number) {
+function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
   return (
-    <div key={String(i)} className={`${i ? 'mt-2.5' : ''}`}>
-      {benefit.label}
+    <div
+      className={`z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline ${BENEFITS_WIDTH}`}
+    >
+      {benefits.length ? benefits.map(renderBenefit(version)) : null}
     </div>
   );
 }
 
-function renderBenefitDescription(benefit: TextBenefit, i: number, version = 'primary') {
+function renderBenefit(version: BlockVersion = 'primary') {
   const labelStyleMap: Record<BlockVersion, string> = {
     primary: 'text-secondary-text',
     secondary: 'text-white',
   };
 
-  return (
-    <div key={String(i)} className={`text-m-light ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
-      {benefit.description}
-    </div>
-  );
+  return function renderVersionedBenefit(benefit: TextBenefit, i) {
+    const { label = '', description = '' } = benefit;
+
+    return [
+      <div key={`label-${i}`} className="text-h6">
+        {label}
+      </div>,
+      <div key={`desc-${i}`} className={`text-m-light ${labelStyleMap[version]}`}>
+        {description}
+      </div>,
+    ];
+  };
 }
 
 function renderAdditionalDescription(additionalDescription: string, version = 'primary') {

package/src/components/PromoTile/PromoTile.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
+import type { PromoTileContent } from './PromoTileContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { BaseTile } from '../BaseTile/BaseTile';
@@ -8,15 +8,10 @@ import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import { Headline } from '../Headline/Headline';
-import type { PromoTileContent } from './PromoTileContent';
+import { VersionStyleMap } from '../../model/BlockVersion';
 
 export interface PromoTileProps extends PromoTileContent, UniBlockProps {}
 
-const promoTileStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
 export const PromoTile = JSX<PromoTileProps>(
   ({
     className = '',
@@ -32,7 +27,7 @@ export const PromoTile = JSX<PromoTileProps>(
       <BlockWrapper
         context={context}
         className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${
-          promoTileStyleMap[version]
+          VersionStyleMap[version]
         } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
         {...rest}
       >
@@ -40,17 +35,15 @@ export const PromoTile = JSX<PromoTileProps>(
           context={context}
           title={
             title ? (
-              <div>
-                <Headline
-                  context={context}
-                  title={title}
-                  className={`!p-0 max-w-[600px]`}
-                  headlineVersion={getTileHeadingType(className)}
-                  bgColorHeadline={version}
-                  align="left"
-                  as="h2"
-                />
-              </div>
+              <Headline
+                context={context}
+                title={title}
+                className={`!p-0 max-w-[600px]`}
+                headlineVersion={getTileHeadingType(className)}
+                bgColorHeadline={version}
+                align="left"
+                as="h2"
+              />
             ) : null
           }
           buttons={

package/src/components/PromoTile/PromoTileContent.ts

@@ -1,13 +1,13 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { DescriptionProps } from '../../model/HeadlineType';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { DescriptionProp } from '../../model/HeadlineType';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 
 /**
  * @title Акции
  */
 export type PromoTileContent = HeadingCommonProps &
-  DescriptionProp &
+  DescriptionProps &
   ButtonContent & {
     /** @title Дата публикации */
     date?: string;

package/src/components/Recommendation/RecommendationContent.ts

@@ -1,21 +1,21 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { LinkProps } from '../../model/LinkProps';
+import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import type { LinkCommonProps } from '../../model/LinkProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
-import type { HeadlineCommonProps, TitleProp } from '../../model/HeadlineType';
 
 export interface RecommendationCardTypes extends HeadlineCommonProps, ListContent, ImageContent {
   /**
    * @title Соц сети
    * @minItems 3
    */
-  socialMedia?: LinkProps[];
+  socialMedia?: LinkCommonProps[];
 }
 
 /**
  * @title Рекомендации
  */
-export interface RecommendationContent extends TitleProp {
+export interface RecommendationContent extends TitleProps {
   /** @title Карточки */
   recommendations?: RecommendationCardTypes[];
   version?: BlockVersion;

package/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -15,6 +15,10 @@ const DATA = {
     {
       city: 'Москва',
       offices: [
+        {
+          office: 'выберите отделение',
+          rate: null,
+        },
         {
           office: 'МоскваОфис1',
           rate: 1,

package/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -139,7 +139,7 @@ export const renderRentalPeriod = (days, setDays) => {
 
 // TODO: В качестве компонента не годится
 const RadioButtons = JSX<any>(() => {
-  const [selected, setSelected] = useState('option1');
+  const [selected, setSelected] = useState('option2');
   const onChange = (_: React.ChangeEvent<HTMLInputElement>) => setSelected(_.target.value);
 
   return (

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

@@ -67,7 +67,7 @@ const renderStepTitle =
     return (
       <div key={String(i)}>
         <div className="flex flex-row text-center relative">
-          <div className="overflow-hidden">
+          <div className="overflow-hidden flex-shrink-0">
             {renderIconArea(size, version)(step, i)}
             {isLastStep ? null : (
               <div

package/src/components/Tabs/Tabs.example.json

@@ -2,15 +2,18 @@
   "showCounter": true,
   "tabs": [
     {
-      "id": "tab1",
+      "type": "group",
+      "ref": "tab1",
       "title": "Вкладка 1"
     },
     {
-      "id": "tab2",
+      "type": "group",
+      "ref": "tab2",
       "title": "Вкладка 2"
     },
     {
-      "id": "tab3",
+      "type": "group",
+      "ref": "tab3",
       "title": "Вкладка 3"
     }
   ]

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

@@ -8,9 +8,9 @@ export default {
         context={context}
         className="col-span-12"
         tabs={[
-          { id: 'tab1', title: 'Вкладка 1' },
-          { id: 'tab2', title: 'Вкладка 2' },
-          { id: 'tab3', title: 'Вкладка 3' },
+          { type: 'group', ref: 'tab1', title: 'Вкладка 1' },
+          { type: 'group', ref: 'tab2', title: 'Вкладка 2' },
+          { type: 'link', href: 'https://google.com', text: 'Вкладка 3' },
         ]}
       />
     </div>

package/src/components/Tabs/Tabs.tsx

@@ -7,21 +7,30 @@ import { renderTab } from './renderTab';
 import type { Tab, TabsContent } from './TabsContent';
 
 export interface TabActivationEvent {
+  type?: Tab['type'];
   label?: string;
 }
 
-export interface TabsProps extends TabsContent, UniBlockProps {}
+export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
-export const Tabs = JSX<TabsProps>((props) => {
+export const Tabs = JSX<TabsBlockProps>((props) => {
   const { context, className, tabs, page, showCounter } = props;
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
-  useEffect(() => EventBus.inst.subject('tab', { label: currentTab?.id }), [currentTab]);
+  useEffect(() => {
+    if (currentTab?.type === 'group') {
+      return EventBus.inst.subject('tab', { label: currentTab.ref });
+    }
+
+    return undefined;
+  }, [currentTab]);
 
   const handleClick = (selectedTab: Tab) => {
-    EventBus.inst.fire('tab', { label: selectedTab.id });
-    setCurrentTab(selectedTab);
+    if (selectedTab?.type === 'group') {
+      EventBus.inst.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
+      setCurrentTab(selectedTab);
+    }
   };
 
   return (
@@ -30,7 +39,7 @@ export const Tabs = JSX<TabsProps>((props) => {
       className={`mb-2 box-border flex gap-x-1 ${className}`}
       role="tablist"
     >
-      {tabs?.map(renderTab({ onClick: handleClick, currentTab, page, showCounter }))}
+      {tabs?.map(renderTab({ onClick: handleClick, currentTab, page, showCounter, context }))}
     </BlockWrapper>
   );
 });

package/src/components/Tabs/TabsContent.ts

@@ -1,13 +1,24 @@
-/**
- *  @title Таб
- */
-export interface Tab {
-  /** @title Tег */
-  id?: string;
+import type { LinkProps } from '../../model/LinkProps';
+
+export interface GroupTab {
+  /** @default group */
+  type: 'group';
+  /** @title Тег */
+  ref?: string;
   /** @title Название */
   title?: string;
 }
 
+export type LinkTab = LinkProps & {
+  /** @default link */
+  type: 'link';
+};
+
+/**
+ *  @title Таб
+ */
+export type Tab = GroupTab | LinkTab;
+
 /**
  * @title Вкладки
  */

package/src/components/Tabs/renderGroupTab.tsx

@@ -0,0 +1,51 @@
+import type { RenderTabProps } from './renderTab';
+import {
+  ACTIVE_LINK_CLASSES,
+  ACTIVE_TEXT_CLASSES,
+  INACTIVE_LINK_CLASSES,
+  INACTIVE_TEXT_CLASSES,
+  LINK_CLASSES,
+  TEXT_CLASSES,
+} from './tabItemClasses';
+import type { GroupTab } from './TabsContent';
+
+const BADGE_CLASSES = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2';
+const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
+const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover:text-primary-main';
+
+export const renderGroupTab =
+  ({ onClick, currentTab, showCounter, page }: RenderTabProps) =>
+  (tab: GroupTab, i: number) => {
+    const active = currentTab === tab;
+
+    const count = tab.ref
+      ? page?.blocks?.filter((block) => block?.labels?.includes(tab.ref as string)).length
+      : page?.blocks?.length;
+
+    return (
+      <div
+        key={String(i)}
+        className={`${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`}
+        role="tab"
+        aria-selected={active}
+        onClick={() => onClick(tab)}
+      >
+        <div className="flex flex-1 items-center justify-center">
+          {tab?.title ? renderTitle(tab.title, active) : null}
+          {showCounter && count ? renderCount(count, active) : null}
+        </div>
+      </div>
+    );
+  };
+
+const renderTitle = (title: string, active: boolean) => (
+  <h3 className={`${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`}>
+    {title}
+  </h3>
+);
+
+const renderCount = (count: number, active: boolean) => (
+  <div className={`${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`}>
+    {count}
+  </div>
+);