@redneckz/wildless-cms-uni-blocks 0.13.23 → 0.14.0

package/src/components/ProductBlock/ProductBlock.tsx

@@ -32,7 +32,6 @@ export const ProductBlock = JSX<ProductBlockProps>(
               handleClick,
             )
           : null}
-
         <BaseProductTile className="grow h-full" {...rest} />
       </BlockWrapper>
     );

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -6,6 +6,6 @@ import type { BaseProductTileContent } from '../../ui-kit/BaseProductTile/BasePr
  */
 export type ProductBlockContent = UniBlockContent &
   BaseProductTileContent & {
-    /** @title Отображать кнопку возврата */
+    /** @title Отображать кнопку возврата (только для десктопной версии) */
     backwardButton?: boolean;
   };

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -9,7 +9,7 @@ export function renderBackwardButton(version: ButtonVersion, handleClick: () =>
   const text = 'Вернуться назад';
 
   return (
-    <div className="flex items-center gap-s">
+    <div className="hidden sm:flex items-center gap-s">
       <div
         className={getRegularButtonClasses({ className, version, rounded: true })}
         onClick={handleClick}

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.example.json

@@ -1,6 +1,8 @@
 {
   "title": "Заголовок",
+  "description": "Описание",
   "__html": "<p>Описание</p>",
+  "richVersion": "",
   "button": {
     "text": "Информация о регионе",
     "version": "link",

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.fixture.tsx

@@ -7,8 +7,8 @@ import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 const BUTTON: ButtonContent = {
   text: 'Информация о регионе',
   target: '_blank',
-  version: 'secondary',
-  icon: { icon: 'ArrowTopRightIcon', iconVersion: 'color' },
+  version: 'link',
+  iconRight: { icon: 'ArrowTopRightIcon', iconVersion: 'color' },
 };
 
 const ICON: Picture = {
@@ -32,7 +32,7 @@ export default {
   default: (
     <div className="container grid grid-cols-12">
       <RepresentativeOfficeInfo
-        className="col-span-12"
+        className="col-span-6"
         title="Представительство в Республике Беларусь"
         __html={DESCRIPTION}
         address="Республика Беларусь, 220004, г. Минск, ул. Немига, д. 40"

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -11,6 +11,7 @@ import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import type { RepresentativeOfficeInfoContent } from './RepresentativeOfficeInfoContent';
+import type { TextColor } from '../../ui-kit/Text/TextProps';
 
 export interface RepresentativeOfficeInfoProps
   extends RepresentativeOfficeInfoContent,
@@ -36,13 +37,22 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
     >
       <div className="w-full flex justify-between flex-row-reverse">
         {renderIconBlock(icon)}
-        {title ? <Heading headingType="h4" as="h3" title={title} /> : null}
+        {title ? <Heading headingType="h3" as="h3" title={title} /> : null}
       </div>
       <div className="w-full space-y-m">
         {__html ? renderDescriptionBlock(__html) : null}
-        {renderBlock('Адрес', address, 'GeolocationIcon')}
-        {renderBlock('Телефон', telephone, 'PhoneIcon')}
-        {renderBlock('E-mail', email, 'MailIcon')}
+        {renderBlock({
+          label: 'Адрес',
+          data: address,
+          iconName: 'GeolocationIcon',
+        })}
+        {renderBlock({ label: 'Телефон(факс)', data: telephone, iconName: 'PhoneIcon' })}
+        {renderBlock({
+          label: 'E-mail',
+          data: email,
+          iconName: 'MailIcon',
+          dataColor: 'text-primary-main',
+        })}
         {button?.text ? renderButtonsSection([button]) : null}
       </div>
     </BlockWrapper>
@@ -56,23 +66,29 @@ const renderIconBlock = (icon?: Picture) => (
 );
 
 const renderDescriptionBlock = (__html?: string) => (
-  <div className="border-b border-main-divider">
+  <div className="border-b border-main-divider pb-lg">
     <RichText __html={__html} />
   </div>
 );
 
-const renderBlock = (blockName: string, data?: string, iconName?: IconName | undefined) => (
-  <div className="flex gap-m">
-    <Icon iconVersion="black" name={iconName} width="24" height="24" />
-    <div className="flex flex-col">
-      <Text size="text-m" font="font-light">
-        {blockName}
-      </Text>
-      {data ? (
-        <Text size="text-h6" color="text-green">
+interface renderBlockProps {
+  label?: string;
+  data?: string;
+  iconName?: IconName | undefined;
+  dataColor?: TextColor;
+}
+
+const renderBlock = ({ label, data, iconName, dataColor = '' }: renderBlockProps) =>
+  data ? (
+    <div className="flex gap-s">
+      <Icon iconVersion="black" name={iconName} width="24" height="24" />
+      <div className="flex flex-col gap-2xs">
+        <Text size="text-m" font="font-light" color="text-secondary-text">
+          {label}
+        </Text>
+        <Text size="text-xl" color={dataColor}>
           {data}
         </Text>
-      ) : null}
+      </div>
     </div>
-  </div>
-);
+  ) : null;

package/src/components/RollupItem/PrimaryFoldButton.tsx

@@ -0,0 +1,44 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import type { IconName } from '../../icons/IconName';
+import type { Picture } from '../../model/Picture';
+import type { IconBgVersion } from '../../ui-kit/Icon/IconProps';
+import { renderRoundedIcon } from './renderRoundedIcon';
+import { Text } from '../../ui-kit/Text/Text';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { rollupIconVersion } from './rollupIconVersion';
+import { TextWithIcon } from '../../ui-kit/TextWithIcon/TextWithIcon';
+
+interface PrimaryFoldButtonProps {
+  label?: string;
+  labelIcon?: Picture;
+  labelIconBgVersion?: IconBgVersion;
+  icon?: IconName;
+  onToggle?: () => void;
+}
+
+export const PrimaryFoldButton = JSX<PrimaryFoldButtonProps>(
+  ({ label, labelIconBgVersion, icon, onToggle, labelIcon }) => (
+    <TextWithIcon
+      tag="button"
+      className={style(
+        'border-none bg-transparent items-center group/button',
+        labelIcon?.icon ? 'py-xs' : 'py-lg',
+      )}
+      onClick={onToggle}
+      textNode={
+        <div className="flex items-center text-start group-hover/button:text-primary-main gap-s">
+          {renderRoundedIcon(labelIcon, labelIconBgVersion)}
+          {label ? (
+            <Text size="text-h6" font="font-normal">
+              {label}
+            </Text>
+          ) : null}
+        </div>
+      }
+      iconNode={
+        icon ? <Icon name={icon} iconVersion={rollupIconVersion} width="24" height="24" /> : null
+      }
+    />
+  ),
+);

package/src/components/RollupItem/RollupItem.tsx

@@ -7,17 +7,14 @@ import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
-import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconName, IconBgVersion, IconProps } from '../../ui-kit/Icon/IconProps';
-import { Text } from '../../ui-kit/Text/Text';
+import type { IconBgVersion, IconProps } from '../../ui-kit/Icon/IconProps';
 import { style } from '../../utils/style';
 import { foldableSectionStyles } from './foldableSectionStyles';
 import { getIconName } from './getIconName';
-import { rollupIconVersion } from './rollupIconVersion';
 import type { RollupItemContent } from './RollupItemContent';
 import { rollupItemStyles } from './rollupItemStyles';
 import type { Picture } from '../../model/Picture';
-import { renderRoundedIcon } from './renderRoundedIcon';
+import { PrimaryFoldButton } from './PrimaryFoldButton';
 
 interface RollupItemProps extends RollupItemContent, UniBlockProps {
   labelIcon?: Picture;
@@ -92,15 +89,16 @@ const renderFoldButton = ({
   onToggle,
 }: FoldButtonProps) => {
   const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
+  const icon = getIconName(isUnfolded);
 
   return version === 'primary' ? (
-    renderPrimaryFoldButton({
-      label,
-      labelIcon,
-      labelIconBgVersion,
-      icon: getIconName(isUnfolded),
-      onToggle,
-    })
+    <PrimaryFoldButton
+      label={label}
+      labelIcon={labelIcon}
+      labelIconBgVersion={labelIconBgVersion}
+      icon={icon}
+      onToggle={onToggle}
+    />
   ) : (
     <DefaultFoldButton
       label={label}
@@ -109,39 +107,3 @@ const renderFoldButton = ({
     />
   );
 };
-
-interface PrimaryFoldButtonProps {
-  label?: string;
-  labelIcon?: Picture;
-  labelIconBgVersion?: IconBgVersion;
-  icon?: IconName;
-  onToggle?: () => void;
-}
-
-const renderPrimaryFoldButton = ({
-  label,
-  labelIconBgVersion,
-  icon,
-  onToggle,
-  labelIcon,
-}: PrimaryFoldButtonProps) => {
-  return (
-    <button
-      className={style(
-        'border-none bg-transparent flex justify-between items-center w-full group/button',
-        labelIcon?.icon ? 'py-xs' : 'py-lg',
-      )}
-      onClick={onToggle}
-    >
-      <div className="flex items-center text-start group-hover/button:text-primary-main gap-s">
-        {renderRoundedIcon(labelIcon, labelIconBgVersion)}
-        {label ? (
-          <Text size="text-h6" font="font-normal">
-            {label}
-          </Text>
-        ) : null}
-      </div>
-      {icon ? <Icon name={icon} iconVersion={rollupIconVersion} width="24" height="24" /> : null}
-    </button>
-  );
-};

package/src/components/SafeDepositRental/RegionsAndBranches.tsx

@@ -21,7 +21,7 @@ export const RegionsAndBranches = JSX<RegionsAndBranchesProps>(
     selectedBranch,
     onSelectedBranch,
   }) => (
-    <div className="flex flex-col sm:flex-row gap-m order-1">
+    <div className="flex flex-col @xl:flex-row gap-m order-1">
       <div className="flex-1 min-w-0">
         <WrapperSelect
           data={regions}

package/src/components/SafeDepositRental/SafeBoxCases.tsx

@@ -21,7 +21,7 @@ export const SafeBoxCases = JSX<SafeBoxCasesProps>(
     onSelectedBoxSize,
   }) => {
     return (
-      <div className="flex flex-col sm:flex-row gap-m order-1">
+      <div className="flex flex-col @xl:flex-row gap-m order-1">
         <div className="flex-1 min-w-0">
           <WrapperSelect
             data={caseVolumes}

package/src/components/SafeDepositRental/SafeDepositRentalFields.tsx

@@ -33,7 +33,7 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
     onClick,
   }) => {
     return (
-      <div className="contents sm:block flex-1 space-y-xl">
+      <div className="contents @xl:block flex-1 space-y-xl">
         <RegionsAndBranches
           regions={regions}
           selectedRegion={selectedRegion}
@@ -56,7 +56,7 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
             Тип договора
           </Text>
         </div>
-        <div className="contents sm:flex justify-between items-center gap-m">
+        <div className="contents @md:flex justify-between items-center gap-m">
           <RadioButtons />
           <Button text="Офисы на карте" version="primary" onClick={onClick} className="order-6" />
         </div>

package/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -37,7 +37,7 @@ export const SafeDepositRentalForm = JSX<SafeDepositRentalFormProps>((props) =>
   const tariffs = getTariffs(safeBoxCases, data.selectedBoxSize);
 
   return (
-    <div className="flex flex-col sm:flex-row gap-4xl align-top">
+    <div className="flex flex-col @4xl:flex-row gap-4xl align-top">
       <SafeDepositRentalFields
         {...data}
         regions={regions}

package/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -12,17 +12,17 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
   const imageDescription = 'На рисунке изображена пачка листов\nформата А4';
 
   return (
-    <div className="contents sm:flex flex-col justify-between order-2">
-      <div className="flex flex-col sm:flex-row gap-x-6xl gap-y-2xl order-5 sm:order-none py-2xl sm:py-0 border-t border-main-divider sm:border-none">
+    <div className="contents @xl:flex flex-col justify-between gap-xl order-2">
+      <div className="flex flex-col @xl:flex-row gap-x-6xl gap-y-2xl order-5 @xl:order-none py-2xl @xl:py-0 border-t border-main-divider @xl:border-none">
         {renderTotal('Аренда за', days)}
         {renderTotal('Цена', price + ' ₽')}
       </div>
-      <span className="sm:hidden order-3 mb-xs text-s font-light text-secondary-text">
+      <span className="@xl:hidden order-3 mb-xs text-s font-light text-secondary-text">
         {imageDescription}
       </span>
-      <div className="flex flex-col items-center gap-s order-3 sm:order-none mb-xl sm:mb-0 bg-primary-main py-s sm:p-3xl text-center">
-        <Img image={{ icon: 'PackA4Icon' }} className="sm:h-60" />
-        <span className="hidden sm:inline text-s font-light text-white opacity-80 whitespace-pre-line">
+      <div className="flex flex-col items-center gap-s order-3 @xl:order-none mb-xl @xl:mb-0 bg-primary-main py-s @xl:p-3xl text-center">
+        <Img image={{ icon: 'PackA4Icon' }} className="@xl:h-60" />
+        <span className="hidden @xl:inline text-s font-light text-white opacity-80 whitespace-pre-line">
           {imageDescription}
         </span>
       </div>
@@ -32,9 +32,9 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
 
 const renderTotal = (label: string, total: string | number) => {
   return (
-    <div className="flex justify-between items-center gap-y-xs sm:flex-col sm:items-start">
+    <div className="flex justify-between items-center gap-y-xs @xl:flex-col @xl:items-start">
       <div className="text-l font-light text-secondary-text">{label}</div>
-      <span className="text-l sm:text-h3 text-primary-text">{total}</span>
+      <span className="text-l @xl:text-h3 text-primary-text">{total}</span>
     </div>
   );
 };

package/src/components/SafeDepositRental/WrapperSelect.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Option, Select } from '../../ui-kit/Select/Select';
+import { Option } from '../../ui-kit/Select/Option';
+import { Select } from '../../ui-kit/Select/Select';
 import { Currency } from '../ExchangeRateTile/CurrencyProps';
 
 interface WrapperSelectProps {

package/src/components/StepsBlock/StepsBlock.mobile.tsx

@@ -128,10 +128,11 @@ const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step
         'z-10 mr-s flex justify-center content-center',
       )}
     >
-      <span className="flex self-center text-h4 text-secondary-text group-data-secondary:text-white">
+      <span className="flex max-w-full max-h-full self-center text-h4 text-secondary-text group-data-secondary:text-white">
         {checkCanRenderIcon(step?.icon) ? (
           <Img
             image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}
+            imageClassName="max-w-full max-h-full"
             width={iconSize}
             height={iconSize}
           />

package/src/components/StickyBottomMenu/RenderMenuItems.tsx

@@ -13,7 +13,10 @@ export const RenderMenuItems = JSX<RenderMenuItems>(({ menuItems, onClick }) =>
   const [activeIndex] = useActiveRoute(menuItems);
 
   return (
-    <BlockWrapper className="sticky bottom-0 left-0 right-0 bg-transparent z-[100]" padding="p-0">
+    <BlockWrapper
+      className="fixed bottom-0 left-0 right-0 my-0 mx-auto w-full bg-transparent z-[100]"
+      padding="p-0"
+    >
       <div className="ml-auto container bg-white flex justify-center shadow-blue-gray">
         {menuItems.map((_, i) => (
           <RenderItem key={String(i)} isActive={i === activeIndex} item={_} onClick={onClick} />

package/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -1,37 +1,44 @@
-import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import {
+  type InnerTableButtonProps,
   TableInnerButton,
-  type TableInnerButtonProps,
 } from '../../ui-kit/InnerTable/InnerTableButton';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import { List } from '../../ui-kit/List/List';
 import type { ListProps } from '../../ui-kit/List/ListProps';
 import type { LabelDescriptionCell } from './TariffsTableContent';
 import type { ButtonsSectionContent } from '../../ui-kit/Button/ButtonsSectionContent';
+import { Text } from '../../ui-kit/Text/Text';
 
 export type EmbeddableCellDataType =
   | LabelDescriptionCell
   | ButtonContent
   | ImageContent
   | ListProps
-  | TableInnerButtonProps;
+  | InnerTableButtonProps;
 
-interface TableCellDataProps extends TableInnerButtonProps {
+interface TableCellDataProps extends InnerTableButtonProps {
   isVisible?: boolean;
   displayTable: (props: TariffsTableInnerContent) => void;
 }
 
-const renderButtonsCellData = ({ buttons }: ButtonsSectionContent) => renderButtonsSection(buttons);
+const renderButtonsCellData = ({ buttons }: ButtonsSectionContent) =>
+  renderButtonsSection(buttons, {
+    buttonClassName: 'basis-0',
+  });
 
 const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => (
   <div className="space-y-2xs">
-    {label ? <div className="text-h6 m-0">{label}</div> : null}
+    {label ? <div>{label}</div> : null}
     {description ? (
-      <div className="text-secondary-text text-l font-light">{description}</div>
+      <div>
+        <Text size="text-s" color="text-secondary-text">
+          {description}
+        </Text>
+      </div>
     ) : null}
   </div>
 );
@@ -46,22 +53,26 @@ const renderListCellData = ({ isDotted, ...rest }: ListProps) => (
   />
 );
 
-const renderTableCellData = JSX<TableCellDataProps>(
-  ({ isVisible, displayTable, dataUrl, pdfUrl, isOpen }) =>
-    isVisible ? (
-      <TableInnerButton
-        isOpen={isOpen}
-        onClick={() => {
-          displayTable({ dataUrl, pdfUrl });
-        }}
-      />
-    ) : null,
-);
+const renderInnerTableCellData = ({
+  isVisible,
+  displayTable,
+  dataUrl,
+  pdfUrl,
+  isOpen,
+}: TableCellDataProps) =>
+  isVisible ? (
+    <TableInnerButton
+      isOpen={isOpen}
+      onClick={() => {
+        displayTable({ dataUrl, pdfUrl });
+      }}
+    />
+  ) : null;
 
 export const EmbeddableCellData = {
   Buttons: renderButtonsCellData,
   Img: renderImgCellData,
   List: renderListCellData,
   LabelDescription: renderLabelDescriptionCellData,
-  Table: renderTableCellData,
+  Table: renderInnerTableCellData,
 };

package/src/components/TariffsTable/TariffsTable.example.json

@@ -2,7 +2,6 @@
   "content": {
     "title": "Заголовок",
     "description": "Описание",
-    "orientation": "vertical",
     "rowHeaders": [
       {
         "title": "Параметр 1",

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

@@ -1,6 +1,10 @@
 import '../../setup-fixture';
 
-import { TARIFFS_TABLE_FIXTURE_EXAMPLE } from './dataFixture';
+import {
+  columnsTable,
+  TARIFFS_TABLE_FIXTURE_EXAMPLE,
+  TARIFFS_TABLE_INNER_TABLE_FIXTURE_EXAMPLE,
+} from './dataFixture';
 import { TariffsTable } from './TariffsTable';
 
 export default {
@@ -9,12 +13,12 @@ export default {
       <TariffsTable className="col-span-12" {...TARIFFS_TABLE_FIXTURE_EXAMPLE} />
     </div>
   ),
-  horizontal: (
+  '1 columns with inner table': (
     <div className="container grid grid-cols-12">
       <TariffsTable
         className="col-span-12"
-        {...TARIFFS_TABLE_FIXTURE_EXAMPLE}
-        orientation="horizontal"
+        {...TARIFFS_TABLE_INNER_TABLE_FIXTURE_EXAMPLE}
+        tariffsColumns={Array(1).fill(columnsTable).flat()}
       />
     </div>
   ),

package/src/components/TariffsTable/TariffsTable.fixture.tsx

@@ -14,47 +14,37 @@ export default {
       <TariffsTable
         className="col-span-12"
         {...TARIFFS_TABLE_FIXTURE_EXAMPLE}
-        tariffsColumns={Array(2).fill(columns).flat()}
+        tariffsColumns={columns.slice(0, 1)}
       />
     </div>
   ),
-  '1 column': (
+  '1 columns with inner table': (
     <div className="container grid grid-cols-12">
       <TariffsTable
         className="col-span-12"
-        {...TARIFFS_TABLE_FIXTURE_EXAMPLE}
-        tariffsColumns={columns.slice(0, 1)}
-        hiddenRowsNum={2}
+        {...TARIFFS_TABLE_INNER_TABLE_FIXTURE_EXAMPLE}
+        tariffsColumns={Array(1).fill(columnsTable).flat()}
       />
     </div>
   ),
-  '2 columns': (
+  '1 column': (
     <div className="container grid grid-cols-12">
       <TariffsTable
         className="col-span-12"
         {...TARIFFS_TABLE_FIXTURE_EXAMPLE}
-        tariffsColumns={Array(2).fill(columns).flat()}
+        tariffsColumns={Array(1).fill(columns).flat()}
         hiddenRowsNum={2}
       />
     </div>
   ),
-  '3 columns': (
+  '2 columns': (
     <div className="container grid grid-cols-12">
       <TariffsTable
         className="col-span-12"
         {...TARIFFS_TABLE_FIXTURE_EXAMPLE}
-        tariffsColumns={Array(3).fill(columns).flat()}
+        tariffsColumns={Array(2).fill(columns).flat()}
         hiddenRowsNum={2}
       />
     </div>
   ),
-  '1 columns with inner table': (
-    <div className="container grid grid-cols-12">
-      <TariffsTable
-        className="col-span-12"
-        {...TARIFFS_TABLE_INNER_TABLE_FIXTURE_EXAMPLE}
-        tariffsColumns={Array(1).fill(columnsTable).flat()}
-      />
-    </div>
-  ),
 };