@redneckz/wildless-cms-uni-blocks 0.5.13 → 0.5.15

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

@@ -1,40 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
-import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
-import { AccordionItem } from './AccordionItem';
 import { AccordionItemsList } from './AccordionItemsList';
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
-export const Accordion = JSX<AccordionProps>(
-  ({ title, description, accordionItems, context, className = '', bordered, ...rest }) => {
-    return (
-      <BlockWrapper
-        context={context}
-        className={`py-6 px-4 font-sans bg-white text-primary-text ${className}`}
-        {...rest}
-      >
-        {title ? <Heading headingType="h3" className="mb-2 text-center" title={title} /> : null}
-        {description ? <div className="mb-5 text-m-light text-center">{description}</div> : null}
-        {accordionItems?.length ? (
-          <AccordionItemsList>
-            {accordionItems.map((item, i) => (
-              <AccordionItem
-                key={`AccordionItem_${i}`}
-                context={context}
-                bordered={bordered}
-                hasContent={Boolean(item.blocks?.length)}
-                {...item}
-              >
-                {renderBlocksList({ blocks: item.blocks, context, className: '!p-0 mb-5' })}
-              </AccordionItem>
-            ))}
-          </AccordionItemsList>
-        ) : null}
-      </BlockWrapper>
-    );
-  },
+export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
+  ({ title, description, context, className = '', children, ...rest }) => (
+    <BlockWrapper
+      context={context}
+      className={`py-6 px-4 font-sans bg-white text-primary-text ${className}`}
+      {...rest}
+    >
+      {title ? <Heading headingType="h3" className="mb-2 text-center" title={title} /> : null}
+      {description ? <div className="mb-5 text-m-light text-center">{description}</div> : null}
+      <AccordionItemsList>{children}</AccordionItemsList>
+    </BlockWrapper>
+  ),
 );
+
+Accordion.childrenTypes = ['AccordionItem'];

package/src/components/Accordion/Accordion.tsx

@@ -1,11 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { AlignType } from '../../model/AlignType';
-import type { UniBlockProps } from '../../model/ContentPageDef';
-import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
+import type { AlignType } from '../../model/AlignType';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
-import { AccordionItem } from './AccordionItem';
 import { AccordionItemsList } from './AccordionItemsList';
 
 const ALIGN_TITLE: Record<AlignType, string> = {
@@ -16,46 +14,33 @@ const ALIGN_TITLE: Record<AlignType, string> = {
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
-export const Accordion = JSX<AccordionProps>(
+export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
   ({
-    title,
-    description,
-    accordionItems,
-    context,
     className = '',
+    context,
+    title,
     accordionAlignTitle = 'center',
+    description,
+    children,
     ...rest
-  }) => {
-    return (
-      <BlockWrapper
-        context={context}
-        className={`p-[50px] mb-1 last:mb-0 font-sans bg-white text-primary-text ${className}`}
-        {...rest}
-      >
-        {title ? (
-          <Heading
-            headingType="h3"
-            as="h2"
-            className={`mb-2.5 ${ALIGN_TITLE[accordionAlignTitle]}`}
-            title={title}
-          />
-        ) : null}
-        {description ? <div className="mb-2.5 text-l">{description}</div> : null}
-        {accordionItems?.length ? (
-          <AccordionItemsList>
-            {accordionItems.map((item, i) => (
-              <AccordionItem
-                key={`AccordionItem${i}`}
-                context={context}
-                hasContent={Boolean(item.blocks?.length)}
-                {...item}
-              >
-                {renderBlocksList({ blocks: item.blocks, context, className: '!p-0 mb-5' })}
-              </AccordionItem>
-            ))}
-          </AccordionItemsList>
-        ) : null}
-      </BlockWrapper>
-    );
-  },
+  }) => (
+    <BlockWrapper
+      context={context}
+      className={`p-[50px] mb-1 last:mb-0 font-sans bg-white text-primary-text ${className}`}
+      {...rest}
+    >
+      {title ? (
+        <Heading
+          headingType="h3"
+          as="h2"
+          className={`mb-2.5 ${ALIGN_TITLE[accordionAlignTitle]}`}
+          title={title}
+        />
+      ) : null}
+      {description ? <div className="mb-2.5 text-l">{description}</div> : null}
+      <AccordionItemsList>{children}</AccordionItemsList>
+    </BlockWrapper>
+  ),
 );
+
+Accordion.childrenTypes = ['AccordionItem'];

package/src/components/Accordion/Accordion.ui.json

@@ -1,79 +1 @@
-{
-  "content": {
-    "accordionItems": {
-      "items": {
-        "blocks": {
-          "items": {
-            "blockListType": {
-              "ui:widget": "hidden"
-            },
-            "image": {
-              "ui:field": "picture"
-            },
-            "benefitList": {
-              "items": {
-                "description": {
-                  "benefitType": {
-                    "ui:widget": "hidden"
-                  }
-                },
-                "icon": {
-                  "ui:field": "icon"
-                }
-              }
-            },
-            "style": {
-              "ui:field": "style"
-            },
-            "benefits": {
-              "items": {
-                "icon": {
-                  "ui:field": "icon"
-                }
-              }
-            },
-            "buttons": {
-              "items": {
-                "icon": {
-                  "ui:field": "icon"
-                },
-                "iconRight": {
-                  "ui:field": "icon"
-                }
-              }
-            },
-            "icon": {
-              "ui:field": "icon"
-            },
-            "backwardButton": {
-              "icon": {
-                "ui:field": "icon"
-              },
-              "iconRight": {
-                "ui:field": "icon"
-              }
-            },
-            "cards": {
-              "items": {
-                "image": {
-                  "ui:field": "picture"
-                },
-                "button": {
-                  "icon": {
-                    "ui:field": "icon"
-                  },
-                  "iconRight": {
-                    "ui:field": "icon"
-                  }
-                }
-              }
-            }
-          }
-        },
-        "labelIcon": {
-          "ui:field": "icon"
-        }
-      }
-    }
-  }
-}
+{}

package/src/components/Accordion/AccordionContent.ts

@@ -1,32 +1,6 @@
 import type { AlignType } from '../../model/AlignType';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
-import type { Picture } from '../../model/Picture';
-import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
-
-export interface AccordionItemCommonProps {
-  /**
-   * @title Название
-   * @default Список
-   */
-  label?: string;
-  /** @title Отображать в раскрытом виде */
-  isExpanded?: boolean;
-  /**
-   * @title Отображать/скрывать обводку элемента
-   * @default false
-   */
-  bordered?: boolean; // TODO: только для мобильной версии
-  labelIcon?: Picture; // TODO: только для мобильной версии
-}
-
-/**
- * @title Элемент списка
- */
-export interface AccordionItem extends AccordionItemCommonProps {
-  /** @title Блоки */
-  blocks?: BlockDef[];
-}
 
 /**
  * @title Аккордеон
@@ -37,9 +11,9 @@ export type AccordionContent = HeadlineCommonProps & {
    * @default center
    */
   accordionAlignTitle?: AlignType;
+
   version?: BlockVersion;
-  /** @title Список */
-  accordionItems?: AccordionItem[];
+
   /**
    * @title Отображать/скрывать обводку у элемента списка
    * @default false

package/src/components/AccordionItem/AccordionItem.example.json

@@ -0,0 +1,7 @@
+{
+  "label": "Аккордеон 1",
+  "isExpanded": true,
+  "labelIcon": {
+    "icon": "CardIcon"
+  }
+}

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

@@ -0,0 +1,6 @@
+import { ACCORDION_ITEM } from '../Accordion/Accordion.fixture.mobile';
+import { AccordionItemsList } from '../Accordion/AccordionItemsList';
+
+export default {
+  default: <AccordionItemsList>{ACCORDION_ITEM}</AccordionItemsList>,
+};

package/src/components/AccordionItem/AccordionItem.fixture.tsx

@@ -0,0 +1,6 @@
+import { ACCORDION_ITEM } from '../Accordion/Accordion.fixture';
+import { AccordionItemsList } from '../Accordion/AccordionItemsList';
+
+export default {
+  default: <AccordionItemsList>{ACCORDION_ITEM}</AccordionItemsList>,
+};

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

@@ -0,0 +1,73 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { getParentBlockContent } from '../../model/getParentBlockContent';
+import type { JSXBlock } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import { Img } from '../../ui-kit/Img/Img';
+import type { AccordionContent } from '../Accordion/AccordionContent';
+import type { AccordionItemProps } from './AccordionItemProps';
+
+const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
+
+export const AccordionItem: JSXBlock<AccordionItemProps> = JSX<AccordionItemProps>(
+  ({ className = '', ancestors, label = '', labelIcon, isExpanded, children }) => {
+    const { bordered } = getParentBlockContent(ancestors, {} as AccordionContent);
+
+    return (
+      <li
+        className={`${
+          bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0'
+        } border-solid border-main-divider ${className}`}
+      >
+        <Foldable
+          isFoldButtonOnTop={true}
+          unfoldedByDefault={isExpanded}
+          renderFoldableSection={({ isUnfolded }) => (
+            <FoldableSection
+              className="flex flex-wrap group-last:last:pb-0 gap-5 [&>*]:p-0"
+              isUnfolded={isUnfolded}
+            >
+              {children}
+            </FoldableSection>
+          )}
+          renderFoldButton={({ isUnfolded, onToggle }) => (
+            <FoldButton
+              className={bordered ? '' : 'py-[14px] px-0'}
+              label={label}
+              icon={icons[Number(isUnfolded)]}
+              primaryIcon={labelIcon}
+              onClick={onToggle}
+            />
+          )}
+        />
+      </li>
+    );
+  },
+);
+
+AccordionItem.childrenTypes = [];
+
+interface FoldButtonProps {
+  className?: string;
+  label: string;
+  icon: IconName;
+  primaryIcon?: Picture;
+  onClick?: () => void;
+}
+
+const FoldButton = JSX<FoldButtonProps>(({ className, icon, label, primaryIcon, onClick }) => (
+  <button
+    className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text group cursor-pointer ${className}`}
+    onClick={onClick}
+  >
+    <span className="text-m-title-xs font-medium pr-2.5 flex group-hover:text-primary-main">
+      {primaryIcon ? (
+        <Img image={primaryIcon} className="mr-3 flex-shrink-0" width="24" height="24" asSVG />
+      ) : null}
+      {label}
+    </span>
+    <Img className="flex-shrink-0" image={icon} width="24" height="24" asSVG />
+  </button>
+));

package/src/components/AccordionItem/AccordionItem.tsx

@@ -0,0 +1,48 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { JSXBlock } from '../../model/JSXBlock';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import { Img } from '../../ui-kit/Img/Img';
+import type { AccordionItemProps } from './AccordionItemProps';
+
+const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
+
+export const AccordionItem: JSXBlock<AccordionItemProps> = JSX<AccordionItemProps>(
+  ({ className = '', label = '', isExpanded, children }) => (
+    <li
+      className={`border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`}
+    >
+      <Foldable
+        isFoldButtonOnTop={true}
+        unfoldedByDefault={isExpanded}
+        renderFoldableSection={({ isUnfolded }) => (
+          <FoldableSection className="grid grid-cols-12 gap-5 [&>*]:p-0" isUnfolded={isUnfolded}>
+            {children}
+          </FoldableSection>
+        )}
+        renderFoldButton={({ isUnfolded, onToggle }) => (
+          <FoldButton label={label} icon={icons[Number(isUnfolded)]} onClick={onToggle} />
+        )}
+      />
+    </li>
+  ),
+);
+
+AccordionItem.childrenTypes = [];
+
+interface FoldButtonProps {
+  label: string;
+  icon: IconName;
+  onClick?: () => void;
+}
+
+const FoldButton = JSX<FoldButtonProps>(({ label, icon, onClick }) => (
+  <button
+    className="border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer"
+    onClick={onClick}
+  >
+    <span className="text-xl font-medium pr-2.5">{label}</span>
+    <Img image={icon} className="text-primary-main flex-shrink-0" width="24" height="24" asSVG />
+  </button>
+));

package/src/components/AccordionItem/AccordionItem.ui.json

@@ -0,0 +1,7 @@
+{
+  "content": {
+    "labelIcon": {
+      "ui:field": "icon"
+    }
+  }
+}

package/src/components/AccordionItem/AccordionItemContent.ts

@@ -0,0 +1,15 @@
+import type { Picture } from '../../model/Picture';
+
+/**
+ * @title Элемент аккордиона
+ */
+export interface AccordionItemContent {
+  /**
+   * @title Название
+   * @default Список
+   */
+  label?: string;
+  /** @title Отображать в раскрытом виде */
+  isExpanded?: boolean;
+  labelIcon?: Picture; // TODO: только для мобильной версии
+}

package/src/components/AccordionItem/AccordionItemProps.ts

@@ -0,0 +1,4 @@
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { AccordionItemContent } from './AccordionItemContent';
+
+export interface AccordionItemProps extends AccordionItemContent, UniBlockProps {}

package/src/components/BaseTile/BaseTile.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { BaseTileCommonProps } from './BaseTileProps';
 
 export interface BaseTileProps extends BaseTileCommonProps, UniBlockProps {}

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';

package/src/components/Blocks.mobile.ts

@@ -1,4 +1,5 @@
 import { Accordion } from './Accordion/Accordion';
+import { AccordionItem } from './AccordionItem/AccordionItem';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { Footer } from './Footer/Footer';
 import { Gallery } from './Gallery/Gallery';
@@ -16,6 +17,7 @@ import { TextBlock } from './TextBlock/TextBlock';
 
 export const Blocks = {
   Accordion,
+  AccordionItem,
   ComparisonTable,
   Footer,
   Gallery,

package/src/components/Blocks.ts

@@ -1,4 +1,5 @@
 import { Accordion } from './Accordion/Accordion';
+import { AccordionItem } from './AccordionItem/AccordionItem';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
@@ -18,8 +19,10 @@ import { InvestmentInfo } from './InvestmentInfo/InvestmentInfo';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
+import { OfficeMap } from './OfficeMap/OfficeMap';
 import { OfficeServicesBlock } from './OfficeServicesBlock/OfficeServicesBlock';
 import { OtherProducts } from './OtherProducts/OtherProducts';
+import { OtherProductsItem } from './OtherProductsItem/OtherProductsItem';
 import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
@@ -36,6 +39,7 @@ import { Tile } from './Tile/Tile';
 
 export const Blocks = {
   Accordion,
+  AccordionItem,
   BenefitsBlock,
   Bonus,
   CardTransfer,
@@ -58,7 +62,10 @@ export const Blocks = {
   ProductGallery,
   ProductTile,
   PromoTile,
+  OfficeMap,
+  OfficeServicesBlock,
   OtherProducts,
+  OtherProductsItem,
   Recommendation,
   StepsBlock,
   TariffsTable,
@@ -69,5 +76,4 @@ export const Blocks = {
   SafeDepositRental,
   Tabs,
   ErrorBlock,
-  OfficeServicesBlock,
 };

package/src/components/Bonus/Bonus.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';

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

@@ -1,6 +1,42 @@
 import { context } from '../../react/setup-fixture';
 
 import { BonusBenefitsBlock } from './BonusBenefitsBlock';
+import { BonusBenefit } from './BonusBenefitsBlockContent';
+
+const bonusBenefits: BonusBenefit[] = [
+  {
+    label: 'Более 5000 товаров',
+    icon: { icon: 'WateringCanIcon' },
+  },
+  {
+    label: '750 авиакомпаний, 1,2 млн отелей, билеты РЖД',
+    icon: { icon: 'AirPlaneIcon' },
+  },
+  {
+    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' },
+  },
+];
 
 export default {
   default: (
@@ -10,40 +46,19 @@ export default {
         className="col-span-12"
         title="Преимущества кредита"
         subtitle="Удобный каталог с большим ассортиментом товаров и сервисов"
-        bonusBenefits={[
-          {
-            label: 'Более 5000 товаров',
-            icon: { icon: 'WateringCanIcon' },
-          },
-          {
-            label: '750 авиакомпаний, 1,2 млн отелей, билеты РЖД',
-            icon: { icon: 'AirPlaneIcon' },
-          },
-          {
-            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' },
-          },
-        ]}
+        bonusBenefits={bonusBenefits}
+      />
+    </div>
+  ),
+  '5-cols': (
+    <div className="container grid grid-cols-12">
+      <BonusBenefitsBlock
+        context={context}
+        className="col-span-12"
+        title="Преимущества кредита"
+        subtitle="Удобный каталог с большим ассортиментом товаров и сервисов"
+        bonusBenefits={bonusBenefits}
+        columnsCount="5"
       />
     </div>
   ),

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -1,15 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { Headline } from '../Headline/Headline';
-import type { BonusBenefit, BonusBenefitsBlockContent } from './BonusBenefitsBlockContent';
-import { getElementsColsValue } from './getElementsColsValue';
+import type {
+  BonusBenefit,
+  BonusBenefitsBlockContent,
+  ColumnsCount,
+} from './BonusBenefitsBlockContent';
 
 export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockProps {}
 
 export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ context, className = '', title, subtitle, bonusBenefits, ...rest }) => (
+  ({ context, className = '', title, subtitle, bonusBenefits, columnsCount = '4', ...rest }) => (
     <BlockWrapper
       className={`font-sans text-primary-text bg-white p-[50px] flex flex-col text-center ${className}`}
       context={context}
@@ -24,7 +27,7 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
         align="center"
       />
       {bonusBenefits?.length ? (
-        <div className={`grid gap-1 mt-8 ${getElementsColsValue(className)}`}>
+        <div className={`grid gap-1 mt-8 ${getElementsColsValue(columnsCount)}`}>
           {bonusBenefits.map(renderBonusBenefit)}
         </div>
       ) : null}
@@ -49,3 +52,6 @@ const renderBonusBenefit = (bonusBenefit: BonusBenefit, i: number) => {
     </div>
   );
 };
+
+const getElementsColsValue = (colValue: ColumnsCount) =>
+  colValue === '4' ? 'grid-cols-4' : 'grid-cols-5';