@redneckz/wildless-cms-uni-blocks 0.5.12 → 0.5.14

package/src/components/OtherProducts/OtherProducts.ui.json

@@ -1,76 +1 @@
-{
-  "content": {
-    "blockItems": {
-      "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"
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+{}

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -1,27 +1,6 @@
-import type { ColorPalette } from '../../model/ContentPageDef';
 import type { TitleProps } from '../../model/HeadlineType';
-import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
-
-/**
- * @title Элемент списка
- */
-export interface BlockItemCommonProps {
-  /**
-   * @title Название
-   * @default Список
-   */
-  label?: string;
-  /** @title Отображать в раскрытом виде */
-  isUnfolded?: boolean;
-  /** @title Блоки */
-  blocks?: BlockDef[];
-}
 
 /**
  * @title Другие продукты
  */
-export type OtherProductsContent = TitleProps & {
-  /** @title Список */
-  blockItems?: BlockItemCommonProps[];
-  colorPalette?: ColorPalette;
-};
+export type OtherProductsContent = TitleProps;

package/src/components/OtherProductsItem/OtherProductsItem.example.json

@@ -0,0 +1,3 @@
+{
+  "label": "Другие продукты N"
+}

package/src/components/OtherProductsItem/OtherProductsItem.fixture.tsx

@@ -0,0 +1,5 @@
+import { OTHER_PRODUCTS_ITEM } from '../OtherProducts/OtherProducts.fixture';
+
+export default {
+  default: <div className="container">{OTHER_PRODUCTS_ITEM}</div>,
+};

package/src/components/OtherProductsItem/OtherProductsItem.tsx

@@ -0,0 +1,39 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { JSXBlock } from '../../model/BlocksRegistry';
+import type { UniBlockProps } from '../../model/ContentPageDef';
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { OtherProductsItemContent } from './OtherProductsItemContent';
+
+export interface OtherProductsItemProps extends OtherProductsItemContent, UniBlockProps {}
+
+const icons: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
+
+export const OtherProductsItem = JSX<OtherProductsItemProps>(
+  ({ className, label = '', colorPalette, isUnfolded: unfoldedByDefault, children }) => (
+    <div className={`border-0 border-b border-solid border-main-divider ${className}`}>
+      <Foldable
+        unfoldedByDefault={unfoldedByDefault}
+        renderFoldableSection={({ isUnfolded }) => (
+          <div className="box-border">
+            <FoldableSection className="grid grid-cols-12 gap-1 border-box" isUnfolded={isUnfolded}>
+              {children}
+            </FoldableSection>
+          </div>
+        )}
+        renderFoldButton={({ isUnfolded, onToggle }) => (
+          <DefaultFoldButton
+            label={label}
+            icon={icons[Number(isUnfolded)]}
+            dataTheme={colorPalette}
+            onClick={onToggle}
+          />
+        )}
+      />
+    </div>
+  ),
+) as JSXBlock<OtherProductsItemProps>;
+
+OtherProductsItem.childrenTypes = []; // All types of blocks are suitable

package/src/components/OtherProductsItem/OtherProductsItem.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/OtherProductsItem/OtherProductsItemContent.ts

@@ -0,0 +1,17 @@
+import type { ColorPalette } from '../../model/ContentPageDef';
+
+/**
+ * @title Элемент списка
+ */
+export interface OtherProductsItemContent {
+  /**
+   * @title Название
+   * @default Список
+   */
+  label?: string;
+
+  /** @title Отображать в раскрытом виде */
+  isUnfolded?: boolean;
+
+  colorPalette?: ColorPalette;
+}

package/src/components/SafeDepositRental/SafeDepositRental.ui.json

@@ -1 +1,8 @@
-{}
+{
+  "content": {},
+  "style": {
+    "ui:options": {
+      "minCols": 12
+    }
+  }
+}

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

@@ -1,8 +1,9 @@
 import { context } from '../../react/setup-fixture';
 import { StepsBlock } from './StepsBlock';
+import type { Step } from './StepsBlockContent';
 
-const items = ['item1', 'item2', 'item3', 'item4', 'item5'];
-const steps = [
+const ITEMS = ['item1', 'item2', 'item3', 'item4', 'item5'];
+const STEPS = [
   {
     label: 'Заявка на кредит',
     description: 'Оставьте онлайн-заявку на потребительский кредит',
@@ -21,6 +22,27 @@ const steps = [
   },
 ];
 
+const STEPS_WITH_LIST: Step[] = [
+  {
+    label: 'В мобильном приложении или интернет-банке',
+    description: 'Для всех клиентов Россельхозбанка',
+    icon: { icon: 'SignDocsIcon' },
+    items: ITEMS,
+  },
+  {
+    label: 'Через Госуслуги',
+    description: 'При наличии данных в Единой биометрической системе',
+    icon: { icon: 'ClockIcon' },
+    items: ITEMS,
+  },
+  {
+    label: 'В офисах Россельхозбанка',
+    description: 'Откройте вклад',
+    icon: { icon: 'ComfortableCompIcon' },
+    items: ITEMS,
+  },
+];
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -28,7 +50,7 @@ export default {
         className="col-span-12"
         context={context}
         title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-        steps={steps.slice(0, 3)}
+        steps={STEPS.slice(0, 3)}
         version="secondary"
       />
     </div>
@@ -101,37 +123,29 @@ export default {
         className="col-span-12"
         context={context}
         title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-        steps={steps}
+        steps={STEPS}
       />
     </div>
   ),
 
-  'width list': (
+  'with list': (
     <div className="container grid grid-cols-12">
       <StepsBlock
         className="col-span-12"
         context={context}
         title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-        steps={[
-          {
-            label: 'В мобильном приложении или интернет-банке',
-            description: 'Для всех клиентов Россельхозбанка',
-            icon: { icon: 'SignDocsIcon' },
-            items,
-          },
-          {
-            label: 'Через Госуслуги',
-            description: 'При наличии данных в Единой биометрической системе',
-            icon: { icon: 'ClockIcon' },
-            items,
-          },
-          {
-            label: 'В офисах Россельхозбанка',
-            description: 'Откройте вклад',
-            icon: { icon: 'ComfortableCompIcon' },
-            items,
-          },
-        ]}
+        steps={STEPS_WITH_LIST}
+      />
+    </div>
+  ),
+  'with list secondary': (
+    <div className="container grid grid-cols-12">
+      <StepsBlock
+        className="col-span-12"
+        context={context}
+        version="secondary"
+        title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+        steps={STEPS_WITH_LIST}
       />
     </div>
   ),

package/src/components/StepsBlock/StepsBlock.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
@@ -8,11 +7,10 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
 import { joinList } from '../../utils/joinList';
-import type { HandlerDecorator, Router } from '../ContentPage/ContentPageContext';
-import { renderItems } from './renderItems';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
 import type { StyleType } from './StepsBlockStyleMaps';
 import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
+import { renderStepContent } from './renderStepContent';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
@@ -54,7 +52,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
         {...rest}
       >
         {title ? (
-          <Heading headingType="h2" className="max-w-[752px] text-center" title={title} />
+          <Heading headingType="h3" className="max-w-[752px] text-center" title={title} />
         ) : null}
         {steps?.length ? (
           <div className={`box-border ${titleMargin}`}>
@@ -65,7 +63,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
             </div>
             <div className={`flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`}>
               {steps.map(
-                renderStepTitle({
+                renderStepContent({
                   styleMap,
                   isMainButton: Boolean(button?.text),
                   version,
@@ -106,47 +104,3 @@ const renderStepIcon =
       </div>
     );
   };
-
-const renderStepTitle =
-  ({
-    styleMap,
-    isMainButton,
-    version,
-    router,
-    handlerDecorator,
-  }: {
-    styleMap: StyleType;
-    isMainButton: boolean;
-    version: BlockVersion;
-    router: Router;
-    handlerDecorator?: HandlerDecorator;
-  }) =>
-  (step: Step, i: number, { length }: { length: number }) => {
-    const additionalMarginClass = step?.label ? 'mt-2' : 'mt-4';
-    const widthContainer = length < 5 ? 'w-[276px]' : 'w-[210px]';
-
-    return (
-      <div
-        key={String(i)}
-        className={`flex flex-col items-center text-center relative
-        whitespace-pre-line overflow-hidden ${widthContainer}`}
-      >
-        {step?.label ? <div className="text-xl m-0 mt-4">{step.label}</div> : null}
-        {step?.description ? (
-          <div className={`text-l-light ${styleMap.description} ${additionalMarginClass}`}>
-            {step.description}
-          </div>
-        ) : null}
-        {renderItems(step?.items, styleMap, step?.isDotted)}
-        {step.button?.text && !isMainButton ? (
-          <Button
-            className="box-border mt-8 py-3 h-12 w-full max-w-[240px]"
-            {...useLink({ router, handlerDecorator }, step.button)}
-            version={version}
-          >
-            {step.button.text}
-          </Button>
-        ) : null}
-      </div>
-    );
-  };

package/src/components/StepsBlock/StepsBlockStyleMaps.ts

@@ -14,7 +14,7 @@ export const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
   primary: {
     background: 'bg-white',
     title: 'text-primary-text',
-    description: 'text-secondary-text',
+    description: '!text-secondary-text text-l-light',
     iconText: 'text-secondary-text',
     iconBackground: 'bg-main-divider',
     iconConnector: 'bg-secondary-light',
@@ -23,7 +23,7 @@ export const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
   secondary: {
     background: 'bg-primary-main',
     title: 'text-white',
-    description: 'text-white/80',
+    description: '!text-white/80 text-l-light',
     iconText: 'text-white',
     iconBackground: 'bg-white/30',
     iconConnector: 'bg-white',

package/src/components/StepsBlock/renderItems.tsx

@@ -1,17 +1,26 @@
-import type { StyleType } from './StepsBlockStyleMaps';
+import { List } from '../../ui-kit/List/List';
+import type { BlockVersion } from '../../model/BlockVersion';
 
-export const renderItems = (items?: string[], styleMap?: StyleType, isDotted = true) =>
-  items ? (
-    <div className={`mt-4 ${styleMap?.description}`} role="list">
-      {items.map((_) => (
-        <div className="items-start mt-1 first:mt-0" role="listitem">
-          {isDotted ? (
-            <div
-              className={`rounded-full inline-block mr-3 mb-1 w-1.5 h-1.5 min-w-1.5 min-h-1.5 ${styleMap?.dot}`}
-            />
-          ) : null}
-          <span>{_}</span>
-        </div>
-      ))}
-    </div>
+export const renderItems = ({
+  items,
+  isDotted = true,
+  version = 'primary',
+  className = '',
+}: {
+  items?: string[];
+  isDotted?: boolean;
+  version?: BlockVersion;
+  className?: string;
+}) => {
+  const listVersion = version === 'primary' ? 'gray' : version;
+
+  return items ? (
+    <List
+      className={`mt-4 ${className}`}
+      version={listVersion}
+      items={items}
+      listItemSize="S"
+      isDotted={isDotted}
+    />
   ) : null;
+};

package/src/components/StepsBlock/renderStepContent.tsx

@@ -0,0 +1,63 @@
+import { Button } from '../../ui-kit/Button/Button';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { HandlerDecorator, Router } from '../ContentPage/ContentPageContext';
+import type { Step } from './StepsBlockContent';
+import type { StyleType } from './StepsBlockStyleMaps';
+import { renderItems } from './renderItems';
+import { useLink } from '../../hooks/useLink';
+
+export const renderStepContent =
+  ({
+    styleMap,
+    isMainButton,
+    version,
+    router,
+    handlerDecorator,
+  }: {
+    styleMap: StyleType;
+    isMainButton: boolean;
+    version: BlockVersion;
+    router: Router;
+    handlerDecorator?: HandlerDecorator;
+  }) =>
+  (step: Step, i: number, { length }: { length: number }) => {
+    const { label, description, button, items, isDotted } = step;
+
+    const additionalMarginClass = `${button?.text ? 'mb-8' : ''} ${step?.label ? 'mt-2' : 'mt-4'}`;
+    const widthContainer = length < 5 ? 'w-[276px]' : 'w-[210px]';
+
+    return (
+      <div
+        key={String(i)}
+        className={`flex flex-col items-center text-center relative
+        whitespace-pre-line overflow-hidden ${widthContainer}`}
+      >
+        {renderStepLabel(label)}
+        {renderStepDescription({
+          description,
+          className: `${styleMap.description} ${additionalMarginClass}`,
+        })}
+        {renderItems({ items, isDotted, version, className: styleMap.description })}
+        {button?.text && !isMainButton ? (
+          <Button
+            className="box-border py-3 h-12 w-full max-w-[240px] mt-auto"
+            {...useLink({ router, handlerDecorator }, button)}
+            version={version}
+          >
+            {button.text}
+          </Button>
+        ) : null}
+      </div>
+    );
+  };
+
+const renderStepLabel = (label?: string) =>
+  label ? <div className="text-x6 m-0 mt-4">{label}</div> : null;
+
+const renderStepDescription = ({
+  description,
+  className = '',
+}: {
+  description?: string;
+  className?: string;
+}) => (description ? <div className={className}>{description}</div> : null);

package/src/components/TariffsTable/TariffsTable.tsx

@@ -2,9 +2,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useTableArrowScrollControl } from '../../hooks/useTableArrowScrollControl';
 import type { UniBlockProps } from '../../model/ContentPageDef';
-import type { VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderDefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { TableArrowScrollControl } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControl';
 import type { TableArrowScrollControlProps } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControlProps';
@@ -42,7 +43,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
       setActiveCardIndex,
     });
 
-    const foldableBlocks = rowData?.map((row, i, { length }) => (
+    const rows = (rowData || []).map((row, i, { length }) => (
       <TariffsTableRow
         context={context}
         key={String(i)}
@@ -52,6 +53,8 @@ export const TariffsTable = JSX<TariffsTableProps>(
         rowIdx={i}
       />
     ));
+    const [visibleRows, hiddenRows] =
+      hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
 
     return (
       <BlockWrapper
@@ -61,37 +64,43 @@ export const TariffsTable = JSX<TariffsTableProps>(
         context={context}
         {...rest}
       >
-        {title ? (
-          <Heading
-            headingType="h3"
-            className={`text-center ${description ? 'mb-2.5' : 'mb-8'}`}
-            title={title}
-          />
-        ) : null}
-        {description ? <div className="mb-9 text-center text-l">{description}</div> : null}
-        {rowData?.length ? (
+        {renderTitle({ title, description })}
+        {renderDescription(description)}
+        {hiddenRowsNum > 0 ? (
           <Foldable
-            blocks={foldableBlocks}
-            hiddenBlocksNum={hiddenRowsNum}
-            blockWrapper={(children) => (
+            renderFoldableSection={({ isUnfolded }) => (
               <Wrapper tableArrowScrollControlProps={tableArrowScrollControlProps}>
-                {children}
+                {visibleRows}
+                <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
               </Wrapper>
             )}
+            renderFoldButton={renderDefaultFoldButton}
           />
-        ) : null}
+        ) : (
+          <Wrapper tableArrowScrollControlProps={tableArrowScrollControlProps}>{rows}</Wrapper>
+        )}
       </BlockWrapper>
     );
   },
 );
 
-const Wrapper = JSX<
-  {
-    tableArrowScrollControlProps: TableArrowScrollControlProps;
-  },
-  any,
-  VNode
->(({ children, tableArrowScrollControlProps }) => {
+function renderTitle({ title, description }: { title?: string; description?: string }) {
+  return title ? (
+    <Heading
+      headingType="h3"
+      className={`text-center ${description ? 'mb-2.5' : 'mb-8'}`}
+      title={title}
+    />
+  ) : null;
+}
+
+function renderDescription(description?: string) {
+  return description ? <div className="mb-9 text-center text-l">{description}</div> : null;
+}
+
+const Wrapper = JSX<{
+  tableArrowScrollControlProps: TableArrowScrollControlProps;
+}>(({ children, tableArrowScrollControlProps }) => {
   const { isScrollAvailable } = tableArrowScrollControlProps;
 
   return (

package/src/model/BlockDecorator.ts

@@ -4,6 +4,8 @@ export const DEFAULT_SLOT_NAME = null;
 
 export type BlockAncestors = [keyof SlotsMap | typeof DEFAULT_SLOT_NAME, ...Slot[]];
 
+export const DEFAULT_ANCESTORS: BlockAncestors = [DEFAULT_SLOT_NAME];
+
 interface BlockDecoratorProps<VNode> {
   blockClassName: string;
   block: BlockDef;

package/src/model/BlocksRegistry.ts

@@ -6,6 +6,9 @@ export type JSXBlock<BlockProps = Record<string, any>> = UNIComponent<
   BlockProps & UniBlockProps,
   any,
   VNode | VNode[]
->;
+> & {
+  childrenTypes?: string[];
+  renderChild?: (child: VNode, i: number) => VNode;
+};
 
 export type BlocksRegistry<BlockProps = Record<string, any>> = Record<string, JSXBlock<BlockProps>>;

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

@@ -0,0 +1,52 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ColorPalette } from '../../model/ContentPageDef';
+import type { IconName } from '../Icon/IconProps';
+import { Img } from '../Img/Img';
+import type { FoldablePartProps } from './FoldablePartProps';
+
+interface DefaultFoldButtonProps {
+  className?: string;
+  label: string;
+  icon: IconName;
+  dataTheme?: ColorPalette;
+  onClick?: () => void;
+}
+
+export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
+  ({ className, label, icon, dataTheme = '', onClick }) => (
+    <button
+      className={`border-none bg-primary-main hover:bg-primary-hover px-0 py-5 mb-[1px] w-full font-sans text-white flex justify-center cursor-pointer ${
+        className || ''
+      }`}
+      data-theme={dataTheme}
+      onClick={onClick}
+    >
+      <span className="text-h4 pr-3">{label}</span>
+      {icon ? (
+        <Img
+          image={{
+            icon,
+            iconVersion: 'white',
+          }}
+          className="flex-shrink-0 my-auto"
+          width="20"
+          height="20"
+          asSVG
+        />
+      ) : null}
+    </button>
+  ),
+);
+
+export const renderDefaultFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps) => {
+  const labels = ['Развернуть', 'Скрыть'];
+  const icons: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
+
+  return (
+    <DefaultFoldButton
+      icon={icons[Number(isUnfolded)]}
+      label={labels[Number(isUnfolded)]}
+      onClick={onToggle}
+    />
+  );
+};