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

package/src/components/InvestmentInfo/InvestmentInfo.fixture.tsx

@@ -0,0 +1,107 @@
+import { context } from '../../react/setup-fixture';
+import { InvestmentInfo } from './InvestmentInfo';
+import type { InvestmentInfoContent } from './InvestmentInfoContent';
+
+export const INVESTMENT_INFO: InvestmentInfoContent = {
+  items: [
+    'Качественные фермерские продукты напрямую от производителей',
+    'Самая большая база сельских туров по России',
+    'Площадки для создания комфортной жизни за городом',
+    'Подробная база вакансий для жителей сельской местности',
+  ],
+  investmentZeroColumn: {
+    title: 'Открытие ИИС',
+  },
+  investmentColumns: [
+    {
+      title: '1 января года, следующего за годом открытия ИИС',
+      cells: [
+        {
+          text: 'Потенциальный доход инвестиций',
+          cellColor: 'green-light',
+        },
+        {
+          text: 'Первый взнос 400 000 ₽',
+          cellColor: 'green-dark',
+          cellSize: 'S',
+        },
+      ],
+    },
+    {
+      title: '1 января второго года после открытия ИИС',
+      cells: [
+        {
+          text: 'Налоговый вычет за 1 год 52 000 ₽',
+          cellColor: 'yellow',
+        },
+        {
+          text: 'Потенциальный доход инвестиций за 2 года',
+          cellColor: 'green-light',
+          cellSize: 'S',
+        },
+        {
+          text: 'Второй взнос 400 000 ₽',
+          cellColor: 'green',
+          cellSize: 'S',
+        },
+        {
+          text: 'Первый взнос 400 000 ₽',
+          cellColor: 'green-dark',
+          cellSize: 'S',
+        },
+      ],
+    },
+    {
+      title: '1 января третьего года после открытия ИИС',
+      cells: [
+        {
+          text: 'Налоговый вычет за 2 год 52 000 ₽',
+          cellColor: 'yellow',
+        },
+        {
+          text: 'Потенциальный доход инвестиций за 3 года',
+          cellColor: 'green-light',
+          cellSize: 'M',
+        },
+        {
+          text: 'Третий взнос — 0 ₽',
+          cellColor: 'green',
+          cellSize: 'S',
+        },
+        {
+          text: 'Первый и второй взносы 800 000 ₽',
+          cellColor: 'green-dark',
+          cellSize: 'L',
+        },
+      ],
+    },
+    {
+      title: 'Возможный вывод средств, закрытие ИИС',
+      cells: [
+        {
+          text: 'Налоговый вычет за 3 года 156 000 ₽',
+          cellColor: 'yellow',
+          cellSize: 'S',
+        },
+        {
+          text: 'Потенциальный доход инвестиций за 3 года',
+          cellColor: 'green-light',
+          cellSize: 'M',
+        },
+        {
+          text: 'Сумма инвестиций за 3 года 1 200 000 ₽',
+          cellColor: 'green-dark',
+          cellSize: 'XL',
+        },
+      ],
+    },
+  ],
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <InvestmentInfo className="col-span-12" context={context} {...INVESTMENT_INFO} />
+    </div>
+  ),
+};

package/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -0,0 +1,149 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/ContentPageDef';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { List } from '../../ui-kit/List/List';
+import { joinList } from '../../utils/joinList';
+import type {
+  InvestmentCell,
+  InvestmentCellColor,
+  InvestmentCellSize,
+  InvestmentColumn,
+  InvestmentInfoContent,
+  InvestmentZeroColumn,
+} from './InvestmentInfoContent';
+
+const investmentCellColorMap: Record<InvestmentCellColor, string> = {
+  yellow: 'bg-yellow',
+  green: 'bg-green',
+  'green-light': 'bg-green-light',
+  'green-dark': 'bg-green-dark',
+};
+
+const investmentCellSizeMap: Record<InvestmentCellSize, string> = {
+  XS: 'h-[40px]',
+  S: 'h-[68px]',
+  M: 'h-[102px]',
+  L: 'h-[136px]',
+  XL: 'h-[204px]',
+};
+
+export interface InvestmentInfoProps extends InvestmentInfoContent, UniBlockProps {}
+
+export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
+  const {
+    context,
+    className = '',
+    items,
+    isDotted,
+    investmentZeroColumn,
+    investmentColumns,
+    ...rest
+  } = props;
+  const colums = investmentColumns ? [...investmentColumns] : [];
+  if (investmentZeroColumn) {
+    colums.unshift(investmentZeroColumn);
+  }
+
+  return (
+    <BlockWrapper
+      className={`font-sans bg-white p-9 pb-9 ${className}`}
+      context={context}
+      {...rest}
+    >
+      <div className="container text-m-light">
+        {colums?.length ? (
+          <div>
+            <div className="flex items-end px-9 text-white">
+              {joinList(<div className="w-px h-4 bg-main-stroke" />)(
+                colums.map(renderInvestmentColumn),
+              )}
+              <div className="w-px h-4 bg-main-stroke" />
+            </div>
+            <div className="border-t border-main-stroke -mt-2 mx-9" />
+            <div className="flex justify-between mt-3 -mx-10">
+              {colums.map(renderInvestmentColumnTitle)}
+            </div>
+          </div>
+        ) : null}
+
+        {items?.length ? (
+          <List
+            className="mt-9 text-h6"
+            items={items}
+            itemClassName="mb-[7px]"
+            isDotted={isDotted}
+          />
+        ) : null}
+      </div>
+    </BlockWrapper>
+  );
+});
+
+const renderInvestmentColumn = (
+  column: InvestmentColumn | InvestmentZeroColumn,
+  i: number,
+  arr: Array<InvestmentColumn>,
+) => {
+  const isSecondColumn = i === 1;
+  const isLastColumn = i === arr.length - 1;
+
+  return (
+    <div
+      key={`column_${i}`}
+      className={`${getColumnClasses(isSecondColumn, isLastColumn, column.cells)}`}
+    >
+      {column.cells?.length ? (
+        <div className={`w-full ${isLastColumn ? 'border-4 border-green-more-dark p-1' : ''}`}>
+          {column.cells.map(renderInvestmentCell)}
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+const getColumnClasses = (
+  isSecondColumn: boolean,
+  isLastColumn: boolean,
+  cells: InvestmentCell[] = [],
+): string =>
+  [
+    cells.length ? 'flex-1' : 'flex-0',
+    cells.length && !isSecondColumn && !isLastColumn ? 'pl-2.5' : '',
+    cells.length && !isLastColumn ? 'pr-2.5 pb-8' : 'pb-6',
+  ].join(' ');
+
+const renderInvestmentCell = (cell: InvestmentCell, i: number) => {
+  const cellSize = cell.cellSize || 'XS';
+  const cellColor = cell.cellColor || 'green';
+
+  return cell.text ? (
+    <div
+      key={`cell_${i}`}
+      className={`flex-1 flex items-center justify-center relative py-2 ${
+        investmentCellSizeMap[cellSize]
+      } ${investmentCellColorMap[cellColor]} ${cellSize === 'XS' ? 'px-3' : 'px-11'}`}
+    >
+      <div className="text-center">{cell.text}</div>
+    </div>
+  ) : null;
+};
+
+const renderInvestmentColumnTitle = (
+  column: InvestmentColumn | InvestmentZeroColumn,
+  i: number,
+  arr: Array<InvestmentColumn>,
+) => {
+  const isFirstColumn = i === 0;
+  const isLastColumn = i === arr.length - 1;
+
+  return (
+    <div
+      key={`title_${i}`}
+      className={`flex-1 max-w-[180px] text-center px-2 ${isFirstColumn ? 'pl-9' : ''} ${
+        isLastColumn ? 'pr-9' : ' '
+      }`}
+    >
+      {column.title}
+    </div>
+  );
+};

package/src/components/InvestmentInfo/InvestmentInfo.ui.json

@@ -0,0 +1,16 @@
+{
+  "content": {
+    "bonusItems": {
+      "items": {
+        "bonusItemContent": {
+          "bonusType": {
+            "ui:widget": "hidden"
+          },
+          "image": {
+            "ui:field": "icon"
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/InvestmentInfo/InvestmentInfoContent.ts

@@ -0,0 +1,55 @@
+import type { ListContent } from '../../ui-kit/List/ListContent';
+
+/**
+ * @title Цвет
+ * @enumNames ["Желтый", "Светло-зеленый", "Зеленый", "Тёмно-зеленый"]
+ */
+export type InvestmentCellColor = 'yellow' | 'green-light' | 'green' | 'green-dark';
+
+/**
+ * @title Высота
+ * @enumNames ["Очень большой", "Большой", "Средний", "Маленький", "Очень маленький"]
+ */
+export type InvestmentCellSize = 'XL' | 'L' | 'M' | 'S' | 'XS';
+
+/**
+ * @title Ячейка
+ */
+export type InvestmentCell = {
+  /** @title Текст */
+  text?: string;
+  cellColor?: InvestmentCellColor;
+  cellSize?: InvestmentCellSize;
+};
+
+/**
+ * @title Элемент данных 1
+ */
+export type InvestmentZeroColumn = {
+  /** @title Название */
+  title?: string;
+  /** @hidden */
+  cells?: InvestmentCell[];
+};
+
+/**
+ * @title Элемент данных
+ */
+export type InvestmentColumn = {
+  /** @title Название */
+  title?: string;
+  /** @title Ячейки */
+  cells?: InvestmentCell[];
+};
+
+/**
+ * @title Блок инвестиций
+ */
+export type InvestmentInfoContent = ListContent & {
+  /** @title Буллиты */
+  isDotted?: boolean;
+  /** @title Элемент данных 1 */
+  investmentZeroColumn?: InvestmentZeroColumn;
+  /** @title Остальные элементы данных */
+  investmentColumns?: InvestmentColumn[];
+};

package/src/components/OtherProducts/OtherProductsItem.tsx

@@ -2,8 +2,9 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { ColorPalette, UniBlockProps } from '../../model/ContentPageDef';
 import type { VNode } from '../../model/VNode';
 import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
-import { DefaultButton } from '../../ui-kit/Foldable/DefaultButton';
+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 { BlockItemCommonProps } from './OtherProductsContent';
 
@@ -14,7 +15,7 @@ export interface BlockItemProps extends BlockItemCommonProps, UniBlockProps {
 const icons: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
 
 export const OtherProductsItem = JSX<BlockItemProps>(
-  ({ label = '', blocks, context, dataTheme, isUnfolded }) => {
+  ({ label = '', blocks, context, dataTheme, isUnfolded: unfoldedByDefault }) => {
     const foldableBlocks = renderBlocksList({
       context,
       blocks,
@@ -24,17 +25,23 @@ export const OtherProductsItem = JSX<BlockItemProps>(
       <div className="˝border-0 border-b border-solid border-main-divider">
         {blocks?.length ? (
           <Foldable
-            blocks={foldableBlocks}
-            hiddenBlocksNum={blocks?.length}
-            unfoldedByDefault={isUnfolded}
-            containerClassName="grid grid-cols-12 gap-1 border-box"
-            blockWrapper={(children) => <Wrapper>{children}</Wrapper>}
-            renderFoldButton={(props) => (
-              <DefaultButton
-                icon={icons[Number(props.isUnfolded)]}
+            unfoldedByDefault={unfoldedByDefault}
+            renderFoldableSection={({ isUnfolded }) => (
+              <div className="box-border">
+                <FoldableSection
+                  className="grid grid-cols-12 gap-1 border-box"
+                  isUnfolded={isUnfolded}
+                >
+                  {foldableBlocks}
+                </FoldableSection>
+              </div>
+            )}
+            renderFoldButton={({ isUnfolded, onToggle }) => (
+              <DefaultFoldButton
                 label={label}
+                icon={icons[Number(isUnfolded)]}
                 dataTheme={dataTheme}
-                onClick={props.onToggle}
+                onClick={onToggle}
               />
             )}
           />
@@ -43,7 +50,3 @@ export const OtherProductsItem = JSX<BlockItemProps>(
     );
   },
 );
-
-const Wrapper = JSX(({ children }) => {
-  return <div className="box-border">{children}</div>;
-});

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;
+};