@redneckz/wildless-cms-uni-blocks 0.3.62 → 0.3.64

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/types.ts

@@ -50,6 +50,7 @@ export interface ContentPageDef extends ContentPageMeta {
   slots?: SlotsMap;
   likeControl?: boolean;
   colorPalette?: ColorPalette;
+  _customPageType?: string;
 }
 
 export interface UniBlockProps {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.62",
+  "version": "0.3.64",
   "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/Headline/HeadlineContent.ts

@@ -2,7 +2,7 @@ import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { AlignType } from '../BaseTile/BaseTileProps';
+import type { AlignType } from '../../model/AlignType';
 
 /**
  * @title Заголовок

package/src/components/Headline/constants.ts

@@ -1,4 +1,4 @@
-import type { AlignType } from '../BaseTile/BaseTileProps';
+import type { AlignType } from '../../model/AlignType';
 import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 
 export const ALIGN_TEXT: Record<AlignType, string> = {

package/src/components/LinkDocs/LinkDocs.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import type { AlignType } from '../BaseTile/BaseTileProps';
+import type { AlignType } from '../../model/AlignType';
 import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
 import { LinkDocsList } from './LinkDocsList';
 

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -1,5 +1,5 @@
 import type { LinkProps } from '../../model/LinkProps';
-import type { AlignType } from '../BaseTile/BaseTileProps';
+import type { AlignType } from '../../model/AlignType';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
 

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -13,7 +13,7 @@ export interface BlockItemCommonProps {
   /**
    * @title Отображать в раскрытом виде
    */
-  isExpanded?: boolean;
+  isUnfolded?: boolean;
   /**
    * @title Блоки
    * @maxItems 10

package/src/components/OtherProducts/OtherProductsItem.tsx

@@ -1,42 +1,52 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
-import { Icon } from '../../ui-kit/Icon/Icon';
+import type { VNode } from '../../model/VNode';
+import type { ColorPalette, UniBlockProps } from '../../types';
+import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { BlockItemCommonProps } from './OtherProductsContent';
-import { OtherProductsItemInner } from './OtherProductsItemInner';
-import { useActiveHandler } from './useActiveHandler';
-import { ColorPalette } from '../../types';
 
 export interface BlockItemProps extends BlockItemCommonProps, UniBlockProps {
   dataTheme?: ColorPalette;
 }
 
 export const OtherProductsItem = JSX<BlockItemProps>(
-  ({ label, isExpanded, blocks, columns, dataTheme = null, context }) => {
-    const { hasContent, icon, handleToggle, isActive } = useActiveHandler({
+  ({ label, blocks, columns = 1, context, dataTheme, isUnfolded }) => {
+    const foldableBlocks = renderBlocksList({
       context,
+      className: 'box-border p-5',
+      columns,
       blocks,
-      initialState: isExpanded,
-    });
-
+    }) as VNode[];
     return (
       <div className="border-0 border-b border-solid border-main-divider">
-        {hasContent ? (
-          <OtherProductsItemInner
-            isExpanded={isActive}
-            columns={columns}
-            blocks={blocks}
+        {blocks?.length ? (
+          <Foldable
+            foldButtonDataTheme={dataTheme}
+            hiddenBlocksNum={blocks?.length}
+            blocks={foldableBlocks}
+            isUnfolded={isUnfolded}
             context={context}
+            foldButtonLabel={label}
+            render={(children, isActive) => (
+              <Wrapper columns={columns} isActive={isActive}>
+                {children}
+              </Wrapper>
+            )}
           />
         ) : null}
-        <button
-          className="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={dataTheme}
-          onClick={handleToggle}
-        >
-          <span className="pr-3">{isActive ? 'Скрыть' : label}</span>
-          {hasContent ? <Icon name={icon} width="20" height="20" asSVG /> : null}
-        </button>
       </div>
     );
   },
 );
+
+const Wrapper = JSX<{ columns: number; isActive: boolean }>(({ columns, children, isActive }) => {
+  return (
+    <div
+      className={`box-border w-full ${isActive ? 'p-9' : ''} ${
+        columns > 1 ? 'flex flex-wrap' : ''
+      }`}
+    >
+      {children}
+    </div>
+  );
+});