@redneckz/wildless-cms-uni-blocks 0.3.61 → 0.3.63

package/mobile/src/model/AlignType.ts

@@ -0,0 +1,9 @@
+/**
+ * @title Выравнивание
+ * @enumNames [
+ *    "По левому краю",
+ *    "По центру",
+ *    "По правому краю"
+ * ]
+ */
+export type AlignType = 'left' | 'center' | 'right';

package/mobile/src/model/VNode.ts

@@ -0,0 +1 @@
+export type VNode = unknown;

package/mobile/src/ui-kit/Foldable/Foldable.tsx

@@ -0,0 +1,81 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+import type { VNode } from '../../model/VNode';
+import { ColorPalette } from '../../types';
+import { clamp } from '../../utils/clamp';
+import { Icon } from '../Icon/Icon';
+import { foldableBlockClassNames, useActiveHandler } from './useActiveHandler';
+
+export type FoldableBlocks = VNode[];
+export type Render = (_: VNode, isActive: boolean) => VNode;
+export interface FoldableProps {
+  context: ContentPageContext;
+  foldButtonLabel?: string;
+  hiddenBlocksNum?: number;
+  blocks?: FoldableBlocks;
+  foldButtonClasses?: string;
+  foldButtonDataTheme?: ColorPalette;
+  isUnfolded?: boolean;
+  render?: Render;
+}
+
+export interface RenderBlocksParams {
+  blocksToHide: number;
+  isActive: boolean;
+}
+
+export const Foldable = JSX<FoldableProps>(
+  ({
+    blocks = [],
+    context,
+    hiddenBlocksNum = 0,
+    foldButtonClasses,
+    foldButtonLabel,
+    foldButtonDataTheme,
+    isUnfolded,
+    render = (_) => _,
+  }) => {
+    const blocksToHide = clamp(hiddenBlocksNum, 0, blocks.length);
+
+    const { icon, handleToggle, isActive } = useActiveHandler({
+      context,
+      initialState: isUnfolded,
+    });
+
+    return blocks ? (
+      <div>
+        {renderBlocks(blocks, render, { blocksToHide, isActive })}
+        {hiddenBlocksNum ? (
+          <button
+            className={
+              foldButtonClasses ||
+              'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer'
+            }
+            data-theme={foldButtonDataTheme}
+            onClick={handleToggle}
+          >
+            <span className="pr-3">{isActive ? 'Скрыть' : foldButtonLabel}</span>
+            <Icon name={icon} width="20" height="20" asSVG />
+          </button>
+        ) : null}
+      </div>
+    ) : null;
+  },
+);
+
+const renderBlocks = (
+  blocks: FoldableBlocks,
+  render: Render,
+  { blocksToHide, isActive }: RenderBlocksParams,
+) => {
+  const visibleBlocks = blocks.slice(0, blocks.length - blocksToHide);
+  const hiddenBlocks = blocks.slice(-blocksToHide);
+
+  return render(
+    <div>
+      {visibleBlocks}
+      <div className={foldableBlockClassNames}>{hiddenBlocks}</div>
+    </div>,
+    isActive,
+  );
+};

package/mobile/src/ui-kit/Foldable/useActiveHandler.ts

@@ -0,0 +1,34 @@
+import { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+import type { IconName } from '../../icons/IconName';
+
+export const foldableBlockClassNames = 'transition-all duration-300 max-h-0 overflow-hidden';
+
+export interface ActiveHandler {
+  context: ContentPageContext;
+  initialState?: boolean;
+}
+
+export const useActiveHandler = ({ context, initialState = false }: ActiveHandler) => {
+  const [isActive, setIsActive] = context.useState(initialState);
+  const icon: IconName = isActive ? 'ArrowUpIcon' : 'ArrowDownIcon';
+
+  const handleToggle = (e: MouseEvent) => {
+    const currentTarget = e.currentTarget as HTMLElement;
+
+    if (!currentTarget) {
+      return;
+    }
+
+    setIsActive(!isActive);
+    const wrapperBlock = currentTarget.previousSibling as HTMLElement;
+    const contentBlock = wrapperBlock.getElementsByClassName(
+      foldableBlockClassNames,
+    )[0] as HTMLElement;
+
+    contentBlock.style.maxHeight = contentBlock.style.maxHeight
+      ? ''
+      : `${contentBlock.scrollHeight}px`;
+  };
+
+  return { icon, handleToggle, isActive };
+};

package/mobile/src/ui-kit/Logo/Logo.tsx

@@ -40,7 +40,7 @@ export const Logo = JSX<Partial<LogoProps>>(
           viewBox="0 0 40 45"
           paths={LOGO_PATHS.map((d) => ({ d }))}
         />
-        {!hideTitle && (
+        {hideTitle ? null : (
           <span className={`${TEXT_COLOR[bgColor]} text-sm font-medium ml-2.5`}>
             {children || 'Россельхозбанк'}
           </span>

package/mobile/src/ui-kit/SearchBar/SearchBar.tsx

@@ -10,7 +10,7 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
         <div className="w-[20px] h-[20px]">
           <Img image="LoupeIcon" width="24" height="24" />
         </div>
-        {!term && (
+        {term ? null : (
           <label
             htmlFor="search-bar-input"
             className="font-sans font-normal text-sm text-secondary-text"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.61",
+  "version": "0.3.63",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Accordion/Accordion.fixture.tsx

@@ -61,7 +61,7 @@ const MINI_GALLERY_ACCORDION_BLOCK: MiniGalleryBlockListDef = {
   ...MINI_GALLERY,
 };
 
-const propsBlock: AccordionProps = {
+const propsDefaultBlock: AccordionProps = {
   context,
   title: 'Accordion title',
   description: 'Accordion description',
@@ -101,10 +101,32 @@ const propsBlock: AccordionProps = {
   ],
 };
 
+const propsRightAlignTitleBlock: AccordionProps = {
+  context,
+  title: 'Accordion title',
+  accordionAlignTitle: 'right',
+  description: 'Accordion description',
+  accordionItems: [
+    {
+      label: 'Accordion label 1',
+      blocks: [TEXT_BLOCK_ACCORDION_BLOCK, TEXT_BLOCK_ACCORDION_BLOCK],
+    },
+    {
+      label: 'Accordion label 2',
+      blocks: [PICTURE_TEXT_ACCORDION_BLOCK],
+    },
+  ],
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Accordion className="col-span-12" {...propsBlock} />
+      <Accordion className="col-span-12" {...propsDefaultBlock} />
+    </div>
+  ),
+  'right-align-title': (
+    <div className="container grid grid-cols-12">
+      <Accordion className="col-span-12" {...propsRightAlignTitleBlock} />
     </div>
   ),
 };

package/src/components/Accordion/Accordion.tsx

@@ -3,14 +3,35 @@ import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
 import { AccordionItem } from './AccordionItem';
+import { AlignType } from '../../model/AlignType';
+
+const ALIGN_TITLE: Record<AlignType, string> = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+};
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
 export const Accordion = JSX<AccordionProps>(
-  ({ title, description, accordionItems, context, className = '', anchor = null }) => {
+  ({
+    title,
+    description,
+    accordionItems,
+    context,
+    className = '',
+    anchor = null,
+    accordionAlignTitle = 'center',
+  }) => {
     return (
       <section className={`p-[50px] font-sans bg-white text-primary-text ${className}`} id={anchor}>
-        {title ? <Heading headingType="h4" className="mb-2.5" title={title} /> : null}
+        {title ? (
+          <Heading
+            headingType="h4"
+            className={`mb-2.5 ${ALIGN_TITLE[accordionAlignTitle]}`}
+            title={title}
+          />
+        ) : null}
         {description ? <div className="mb-2.5 text-base">{description}</div> : null}
         {accordionItems?.length ? (
           <ul className="list-none m-0 p-0">

package/src/components/Accordion/AccordionContent.ts

@@ -1,6 +1,7 @@
 import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
+import type { AlignType } from '../../model/AlignType';
 /**
  * @title Элемент списка
  */
@@ -30,6 +31,8 @@ export interface AccordionItemCommonProps {
 export interface AccordionContent {
   /** @title Заголовок */
   title?: string;
+  /** @title Выравнивание заголовка */
+  accordionAlignTitle?: AlignType;
   version?: BlockVersion;
   /** @title Список */
   accordionItems?: AccordionItemCommonProps[];

package/src/components/BaseTile/BaseTileProps.ts

@@ -2,16 +2,7 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { HeadingType } from '../../ui-kit/Heading/HeadingContent';
-
-/**
- * @title Выравнивание
- * @enumNames [
- *    "По левому краю",
- *    "По центру",
- *    "По правому краю"
- * ]
- */
-export type AlignType = 'left' | 'center' | 'right';
+import type { AlignType } from '../../model/AlignType';
 
 /**
  * @title Общий компонент плиток

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -7,12 +7,10 @@ import type { Benefit, BenefitsBlockContent } from './BenefitsBlockContent';
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ className, title, benefits, anchor = null }) => {
+  ({ className = '', title, benefits, anchor = null }) => {
     return (
       <section
-        className={`font-sans text-primary-text bg-white p-12 flex flex-col items-center ${
-          className || ''
-        }`}
+        className={`font-sans text-primary-text bg-white p-12 flex flex-col items-center ${className}`}
         id={anchor}
       >
         {title ? (
@@ -29,7 +27,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
 const renderStep = (benefit: Benefit, i: number) => {
   return (
     <div key={String(i)} className="flex items-center gap-5 max-w-[500px]">
-      {benefit.icon ? (
+      {benefit?.icon ? (
         <Img
           className="h-[70px] w-[70px] min-w-[70px] min-h-[70px]"
           image={benefit.icon}
@@ -38,10 +36,10 @@ const renderStep = (benefit: Benefit, i: number) => {
         />
       ) : null}
       <div>
-        <h3 className="font-medium text-xl m-0">{benefit.label}</h3>
-        {benefit.description && (
+        {benefit?.label ? <h3 className="font-medium text-xl m-0">{benefit.label}</h3> : null}
+        {benefit?.description ? (
           <div className="font-normal text-sm mt-2">{benefit.description}</div>
-        )}
+        ) : null}
       </div>
     </div>
   );

package/src/components/BlockContent.ts

@@ -22,6 +22,7 @@ import type { StepsBlockContent } from './StepsBlock/StepsBlockContent';
 import type { TariffsTableContent } from './TariffsTable/TariffsTableContent';
 import type { TextBlockContent } from './TextBlock/TextBlockContent';
 import type { TileContent } from './Tile/TileContent';
+import type { BonusBenefitsBlockContent } from './BonusBenefitsBlock/BonusBenefitsBlockContent';
 
 /**
  * @hidden
@@ -50,4 +51,5 @@ export type BlockContent =
   | TileContent
   | NavigationContent
   | LinkListContent
-  | GroupBlockContent;
+  | GroupBlockContent
+  | BonusBenefitsBlockContent;

package/src/components/Blocks.ts

@@ -29,6 +29,7 @@ import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
 import { GroupBlock } from './GroupBlock/GroupBlock';
+import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 
 export const Blocks = {
   Accordion,
@@ -62,4 +63,5 @@ export const Blocks = {
   Navigation,
   Placeholder,
   GroupBlock,
+  BonusBenefitsBlock,
 };

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.example.json

@@ -0,0 +1,54 @@
+{
+  "title": "Вы можете оплатить бонусными баллами",
+  "subtitle": "Удобный каталог с большим ассортиментом товаров и сервисов",
+  "bonusBenefits": [
+    {
+      "label": "Более 5000 товаров",
+      "icon": {
+        "icon": "WateringCan"
+      }
+    },
+    {
+      "label": "750 авиакомпаний, 1,2 млн отелей, билеты РЖД",
+      "icon": {
+        "icon": "SignDocsIcon"
+      }
+    },
+    {
+      "label": "Аренда автомобилей",
+      "icon": {
+        "icon": "SignDocsIcon"
+      }
+    },
+    {
+      "label": "Болеее 1000 развлечений",
+      "icon": {
+        "icon": "SignDocsIcon"
+      }
+    },
+    {
+      "label": "Платежные гаджеты Pay Ring",
+      "icon": {
+        "icon": "SignDocsIcon"
+      }
+    },
+    {
+      "label": "Цифровые сервисы",
+      "icon": {
+        "icon": "SignDocsIcon"
+      }
+    },
+    {
+      "label": "Фермерские продукты",
+      "icon": {
+        "icon": "SignDocsIcon"
+      }
+    },
+    {
+      "label": "Страхование",
+      "icon": {
+        "icon": "SignDocsIcon"
+      }
+    }
+  ]
+}

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.fixture.tsx

@@ -0,0 +1,50 @@
+import { context } from '../../setup-fixture';
+
+import { BonusBenefitsBlock } from './BonusBenefitsBlock';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <BonusBenefitsBlock
+        context={context}
+        className="col-span-12"
+        title="Преимущества кредита"
+        subtitle="Удобный каталог с большим ассортиментом товаров и сервисов"
+        bonusBenefits={[
+          {
+            label: 'Более 5000 товаров',
+            icon: { icon: 'WateringCan' },
+          },
+          {
+            label: '750 авиакомпаний, 1,2 млн отелей, билеты РЖД',
+            icon: { icon: 'AirPlane' },
+          },
+          {
+            label: 'Аренда автомобилей',
+            icon: { icon: 'CarIcon' },
+          },
+          {
+            label: 'Болеее 1000 развлечений',
+            icon: { icon: 'CinemaIcon' },
+          },
+          {
+            label: 'Платежные гаджеты Pay Ring',
+            icon: { icon: 'SoundIcon' },
+          },
+          {
+            label: 'Цифровые сервисы',
+            icon: { icon: 'DocsIcon' },
+          },
+          {
+            label: 'Фермерские продукты',
+            icon: { icon: 'PumpkinIcon' },
+          },
+          {
+            label: 'Страхование',
+            icon: { icon: 'PowerIcon' },
+          },
+        ]}
+      />
+    </div>
+  ),
+};

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -0,0 +1,49 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import type { BonusBenefit, BonusBenefitsBlockContent } from './BonusBenefitsBlockContent';
+import { getElementsColsValue } from './getElementsColsValue';
+
+export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockProps {}
+
+export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
+  ({ className = '', title, subtitle, bonusBenefits, anchor = null }) => {
+    return (
+      <section
+        className={`font-sans text-primary-text bg-white p-50 flex flex-col ${className}`}
+        id={anchor}
+      >
+        {title ? (
+          <Heading headingType="h3" className="text-center mb-[10px]" title={title} />
+        ) : null}
+        {subtitle ? <span className="text-md font-normal text-center">{subtitle}</span> : null}
+        {bonusBenefits?.length ? (
+          <div className={`grid gap-1 ${getElementsColsValue(className)}`}>
+            {bonusBenefits.map(renderBonusBenefit)}
+          </div>
+        ) : null}
+      </section>
+    );
+  },
+);
+
+const renderBonusBenefit = (bonusBenefit: BonusBenefit, i: number) => {
+  return (
+    <div key={String(i)} className="flex flex-col items-center max-w-[292px]">
+      {bonusBenefit?.icon ? (
+        <Img
+          className="h-[180px] w-[160px] min-w-[160px] min-h-[160px]"
+          image={bonusBenefit.icon}
+          width="160"
+          height="180"
+        />
+      ) : null}
+      <div>
+        {bonusBenefit?.label ? (
+          <span className="title-2xs text-center m-0">{bonusBenefit.label}</span>
+        ) : null}
+      </div>
+    </div>
+  );
+};

package/src/components/BonusBenefitsBlock/BonusBenefitsBlockContent.ts

@@ -0,0 +1,23 @@
+import type { Picture } from '../../model/Picture';
+
+export interface BonusBenefit {
+  /** @title Название */
+  label?: string;
+  /** @title Бонус и преимущество */
+  icon?: Picture;
+}
+
+/**
+ * @title Блок бонусов и преимуществ
+ */
+export interface BonusBenefitsBlockContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Подзаголовок */
+  subtitle?: string;
+  /**
+   * @title Список бонусов
+   * @maxItems 8
+   */
+  bonusBenefits?: BonusBenefit[];
+}

package/src/components/BonusBenefitsBlock/getElementsColsValue.ts

@@ -0,0 +1,12 @@
+import { getColSpan } from '../../utils/getColSpan';
+
+export function getElementsColsValue(className = '') {
+  const colSpan = getColSpan(className);
+  if (colSpan <= 6) {
+    return 'grid-cols-2';
+  } else if (colSpan <= 8) {
+    return 'grid-cols-3';
+  } else {
+    return 'grid-cols-4';
+  }
+}

package/src/components/ComparisonTable/ComparisonTable.mobile.tsx

@@ -39,9 +39,9 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
           className || ''
         }`}
       >
-        {title && (
+        {title ? (
           <Heading headingType="h3" className="font-medium text-center m-0 mb-5" title={title} />
-        )}
+        ) : null}
 
         {renderColumns({
           tableData,

package/src/components/ComparisonTable/HeaderCell.mobile.tsx

@@ -29,20 +29,20 @@ export const HeaderCell = JSX<HeaderCellProps>(
           <Img image={image} />
         </div>
       )}
-      {title && (
+      {title ? (
         <Heading
           headingType="h4"
           className={`${isFillGradient ? 'text-white' : ''}`}
           title={title}
         />
-      )}
-      {subtitle && (
+      ) : null}
+      {subtitle ? (
         <div
           className={`text-m-sm mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`}
         >
           {subtitle}
         </div>
-      )}
+      ) : null}
     </div>
   ),
 );

package/src/components/ComparisonTable/TableCell.mobile.tsx

@@ -31,16 +31,16 @@ const renderCellInner =
           {rowHeader}
         </div>
         <div className="basis-1/2">
-          {label && (
+          {label ? (
             <div className={`text-right ${isFillGradient ? 'text-white' : ''}`}>{label}</div>
-          )}
-          {description && (
+          ) : null}
+          {description ? (
             <div
               className={`text-right ${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}
             >
               {description}
             </div>
-          )}
+          ) : null}
         </div>
       </div>
     );

package/src/components/ComparisonTable/TableCell.tsx

@@ -30,15 +30,15 @@ export const TableCell = JSX<TableCellProps>(({ cell, isFirstRow, isLastRow, isF
 
 const renderCellInner = ({ label, description }: CellData, i: number, isFillGradient: boolean) => (
   <div key={String(i)} className="first:pt-7 pt-6 last:pb-7">
-    {label && (
+    {label ? (
       <h4 className={`text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`}>{label}</h4>
-    )}
-    {description && (
+    ) : null}
+    {description ? (
       <div
         className={`text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`}
       >
         {description}
       </div>
-    )}
+    ) : null}
   </div>
 );

package/src/components/ContentPage/ContentPage.tsx

@@ -85,7 +85,7 @@ export const ContentPage = JSX<ContentPageProps>(
           </div>
         ) : null}
 
-        {likeControl && (
+        {likeControl ? (
           <div className="flex items-end absolute bottom-0 right-0 h-full pointer-events-none">
             <LikeControl
               key="LikeControl"
@@ -93,7 +93,7 @@ export const ContentPage = JSX<ContentPageProps>(
               context={context}
             />
           </div>
-        )}
+        ) : null}
       </section>
     );
   },

package/src/components/Gallery/GalleryInner.tsx

@@ -37,22 +37,22 @@ export const GalleryInner = JSX<GalleryInnerProps>(
           activeCardIndex={activeCardIndex}
           {...rest}
         />
-        {showPrevButton && (
+        {showPrevButton ? (
           <ArrowButton
             className="absolute top-1/2 left-8 z-10 mt-[25px]"
             onClick={handlePrevClick}
             ariaLabel="Пролистать влево"
             data-block-control="scroll-left"
           />
-        )}
-        {showNextButton && (
+        ) : null}
+        {showNextButton ? (
           <ArrowButton
             className="absolute top-1/2 right-8 z-10 mt-[25px] rotate-180"
             onClick={handleNextClick}
             ariaLabel="Пролистать вправо"
             data-block-control="scroll-right"
           />
-        )}
+        ) : null}
         <div className="absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" />
         <div className="absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" />
       </section>