@redneckz/wildless-cms-uni-blocks 0.12.3 → 0.12.5

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json

@@ -5,18 +5,7 @@
       "size": {
         "width": 290,
         "height": 290
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 174,
-            "height": 174
-          },
-          "format": "webp",
-          "alignment": "southeast"
-        }
-      ]
+      }
     },
     "title": "Заголовок 1",
     "description": "Описание 1",

package/mobile/src/components/ErrorBlock/ErrorBlock.example.json

@@ -9,17 +9,7 @@
         "format": "webp",
         "size": {
           "width": 460
-        },
-        "sources": [
-          {
-            "media": 1279,
-            "size": {
-              "width": 276
-            },
-            "format": "webp",
-            "alignment": "center"
-          }
-        ]
+        }
       }
     },
     "button": {

package/mobile/src/components/MobileAppTile/MobileAppTile.example.json

@@ -6,17 +6,7 @@
       "size": {
         "width": 529,
         "height": 345
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 360
-          },
-          "format": "webp",
-          "alignment": "center"
-        }
-      ]
+      }
     },
     "alignTitle": "left",
     "qr": null,

package/mobile/src/components/PictureText/PictureText.example.json

@@ -7,17 +7,7 @@
       "size": {
         "width": 400,
         "height": 300
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 240
-          },
-          "format": "webp",
-          "alignment": "center"
-        }
-      ]
+      }
     },
     "version": "primary",
     "directionRight": false,

package/mobile/src/components/ProductBlock/ProductBlock.example.json

@@ -12,17 +12,7 @@
       "size": {
         "width": 234,
         "height": 234
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 164
-          },
-          "format": "webp",
-          "alignment": "northeast"
-        }
-      ]
+      }
     },
     "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
     "isDotted": true,

package/mobile/src/components/ProductTile/ProductTile.example.json

@@ -7,17 +7,7 @@
       "format": "webp",
       "size": {
         "width": 242
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 145
-          },
-          "format": "webp",
-          "alignment": "southeast"
-        }
-      ]
+      }
     },
     "version": "primary",
     "benefits": [
@@ -43,6 +33,8 @@
         "version": "primary"
       }
     ],
-    "isImageOnRightSide": true
+    "imageOptions": {
+      "directionRight": true
+    }
   }
 }

package/mobile/src/components/Tabs/LinkTab.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import { getLinkTabClassName } from './tabItemClasses';
+import { style } from '../../utils/style';
+import { getTabClassName } from './tabItemClasses';
 import type { LinkTabData, TabData, TabsMode } from './TabsContent';
 
 interface LinkTabProps {
@@ -23,14 +24,24 @@ export const LinkTab = JSX<LinkTabProps>((props) => {
   };
 
   return (
-    <a
+    <div
+      className={getTabClassName('block', active, tabsMode)}
       role="tab"
-      className={getLinkTabClassName('link', active, tabsMode)}
-      target={tab.target}
-      href={adjustedProps.href}
-      onClick={handleClick}
+      aria-selected={active}
+      onClick={() => onClick(tab)}
     >
-      <span className={getLinkTabClassName('text', active, tabsMode)}>{tab.text}</span>
-    </a>
+      <a
+        role="tab"
+        className={style(
+          'flex flex-1 items-center justify-center h-full',
+          getTabClassName('text', active, tabsMode),
+        )}
+        target={tab.target}
+        href={adjustedProps.href}
+        onClick={handleClick}
+      >
+        <span>{tab.text}</span>
+      </a>
+    </div>
   );
 });

package/mobile/src/components/Tabs/Tabs.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { defaultEventBus } from '../../EventBus/defaultEventBus';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
 import { CenteredTabs } from './CenteredTabs';
 import { renderTab } from './renderTab';
 import { ScrollableTabs } from './ScrollableTabs';
@@ -16,7 +17,7 @@ interface RenderTabsProps extends TabsBlockProps {
 }
 
 export const Tabs = JSX<TabsBlockProps>((props) => {
-  const { className = '', tabs, isSticky, ...rest } = props;
+  const { className = '', isSticky, tabs, ...rest } = props;
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
@@ -41,9 +42,11 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
 
   return (
     <BlockWrapper
-      className={`relative box-border flex gap-x-1 w-full ${
-        isSticky ? 'sticky top-1 z-20' : ''
-      } ${className}`}
+      className={style(
+        'relative box-border flex gap-x-1 w-full overflow-x-auto no-scrollbar',
+        isSticky ? 'sticky top-1 z-20' : '',
+        className,
+      )}
       defaultPadding="p-0"
       role="tablist"
       {...rest}

package/mobile/src/components/Tabs/renderGroupTab.tsx

@@ -1,18 +1,12 @@
+import { style } from '../../utils/style';
 import type { RenderTabProps } from './renderTab';
-import {
-  ACTIVE_TEXT_CLASSES,
-  getGroupTabClassName,
-  INACTIVE_TEXT_CLASSES,
-  TEXT_CLASSES,
-  WHITE_ACTIVE_TEXT_CLASSES,
-} from './tabItemClasses';
+import { getTabClassName } from './tabItemClasses';
 import type { GroupTabData, TabsMode } from './TabsContent';
 
 const BADGE_CLASSES =
-  'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
-const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
-const INACTIVE_BADGE_CLASSES =
-  'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
+  'bg-main-divider min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
+const LIGHT_BADGE_CLASSES = 'bg-white/30 text-white';
+const DARK_BADGE_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
 
 export const renderGroupTab =
   ({ page, currentTab, showCounter, onClick, tabsMode }: RenderTabProps) =>
@@ -27,39 +21,33 @@ export const renderGroupTab =
     return (
       <div
         key={`group-${String(i)}`}
-        className={getGroupTabClassName('div', active, tabsMode)}
+        className={getTabClassName('block', active, tabsMode)}
         role="tab"
         aria-selected={active}
         onClick={() => onClick(tab)}
       >
         <div
-          className={`flex flex-1 items-center justify-center ${getGroupTabClassName(
-            'text',
-            active,
-            tabsMode,
-          )}`}
+          className={style(
+            'flex flex-1 items-center justify-center h-full',
+            getTabClassName('text', active, tabsMode),
+          )}
         >
-          {renderTitle(tab.title, active, tabsMode)}
-          {renderCount(showCounter, count, active)}
+          <span>{tab.title}</span>
+          {showCounter && count ? renderCount(tabsMode, count, active) : null}
         </div>
       </div>
     );
   };
 
-const renderTitle = (title: string | undefined, active: boolean, tabsMode?: TabsMode) => {
-  const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
-  const titleClassName =
-    tabsMode === 'scrollable'
-      ? `${TEXT_CLASSES} ${activeClassName}`
-      : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
-
-  return title ? <h3 className={titleClassName}>{title}</h3> : null;
-};
-
-const renderCount = (showCounter: boolean | undefined, count: number, active: boolean) => {
-  return showCounter && count ? (
-    <div className={`${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`}>
+const renderCount = (tabsMode: TabsMode | undefined, count: number, active: boolean) => {
+  return (
+    <div
+      className={style(
+        BADGE_CLASSES,
+        active && tabsMode !== 'scrollable' ? LIGHT_BADGE_CLASSES : DARK_BADGE_CLASSES,
+      )}
+    >
       {count}
     </div>
-  ) : null;
+  );
 };

package/mobile/src/components/Tabs/tabItemClasses.ts

@@ -9,12 +9,12 @@ export const WIDESCREEN_ACTIVE_LINK_CLASSES = 'bg-primary-main text-white';
 
 export const TEXT_CLASSES = 'font-sans text-m text-center';
 export const ACTIVE_TEXT_CLASSES = 'text-white';
-export const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
+export const INACTIVE_TEXT_CLASSES = 'text-secondary-text sm:group-hover/btn:text-primary-main';
 
 export const WHITE_ACTIVE_TEXT_CLASSES = 'text-primary-main';
 
-const GROUP_TAB_CLASSES = {
-  div: {
+const TAB_CLASSES = {
+  block: {
     scrollable: {
       active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
       default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
@@ -30,37 +30,7 @@ const GROUP_TAB_CLASSES = {
   },
   text: {
     scrollable: {
-      active: `h-full border-0 border-b-2`,
-      default: ``,
-    },
-    centered: {
-      active: '',
-      default: '',
-    },
-    wideScreen: {
-      active: '',
-      default: '',
-    },
-  },
-};
-const LINK_TAB_CLASSES = {
-  link: {
-    scrollable: {
-      active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
-      default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
-    },
-    centered: {
-      active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
-      default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
-    },
-    wideScreen: {
-      active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES}`,
-      default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
-    },
-  },
-  text: {
-    scrollable: {
-      active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${WHITE_ACTIVE_TEXT_CLASSES}`,
+      active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2`,
       default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
     },
     centered: {
@@ -68,22 +38,19 @@ const LINK_TAB_CLASSES = {
       default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
     },
     wideScreen: {
-      active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
-      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+      active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES} text-black px-2.5 bg-white sm:bg-primary-main sm:text-white`,
+      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES} px-2.5 bg-white`,
     },
   },
 };
 
-export const getGroupTabClassName = (type: string, active: boolean, tabsMode?: TabsMode) => {
-  const styleActive = active ? 'active' : 'default';
-  const mode = tabsMode || 'wideScreen';
-
-  return GROUP_TAB_CLASSES[type][mode][styleActive];
-};
-
-export const getLinkTabClassName = (type: string, active: boolean, tabsMode?: TabsMode) => {
+export const getTabClassName: (type: string, active: boolean, tabsMode?: TabsMode) => string = (
+  type,
+  active,
+  tabsMode,
+) => {
   const styleActive = active ? 'active' : 'default';
   const mode = tabsMode || 'wideScreen';
 
-  return LINK_TAB_CLASSES[type][mode][styleActive];
+  return TAB_CLASSES[type][mode][styleActive];
 };

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

@@ -24,7 +24,6 @@ export const TariffsTable = JSX<TariffsTableProps>(
   }) => {
     const colData = getColData(columns);
     const tiles = getTiles(rowHeaders, colData);
-    const headingMargin = description ? 'mb-2' : 'mb-8';
 
     return (
       <section

package/mobile/src/components/Tile/Tile.example.json

@@ -7,17 +7,7 @@
       "format": "webp",
       "size": {
         "width": 445
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 276
-          },
-          "format": "webp",
-          "alignment": "southeast"
-        }
-      ]
+      }
     },
     "isDotted": true,
     "listItemSize": "M",

package/mobile/src/ui-kit/PhoneInput/PhoneInput.tsx

@@ -11,7 +11,11 @@ export const PhoneInput = JSX<InputProps>(({ children, onChange, ...inputProps }
   );
 
   return (
-    <Input onChange={handleChange} onFocus={handleChange} {...inputProps}>
+    <Input
+      onChange={handleChange}
+      onFocus={(event) => handleChange((event?.target?.value as string) || '')}
+      {...inputProps}
+    >
       {children}
     </Input>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.12.3",
+  "version": "0.12.5",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/common.css

@@ -27,6 +27,7 @@ html {
   --color-gradient-from: 141, 189, 76;
   --color-gradient-to: 69, 172, 69;
 }
+
 /* Business clients | Light-Green */
 [data-theme='bc'] {
   --color-primary-main: var(--color-green-light);
@@ -37,6 +38,7 @@ html {
   --color-gradient-from: 141, 189, 76; /* TODO: change color to theme bc */
   --color-gradient-to: 69, 172, 69; /* TODO: change color to theme bc */
 }
+
 /* Ecosystem own | Yellow */
 [data-theme='eo'] {
   --color-primary-main: var(--color-yellow);
@@ -255,6 +257,7 @@ html {
     table-layout: fixed;
     text-align: left;
   }
+
   .striped.md-container table thead,
   .horizontal-separator.md-container table thead {
     color: rgb(var(--color-secondary-text));

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

@@ -0,0 +1,43 @@
+import '../../setup-fixture';
+import { BenefitsBlock } from './BenefitsBlock';
+import type { Picture } from '../../model/Picture';
+
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+  alt: 'Потребительский кредит наличными',
+  size: {
+    width: 70,
+    height: 70,
+  },
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <BenefitsBlock
+        className="col-span-12"
+        title="Оформите выгодный кредит для бизнеса"
+        benefitList={[
+          {
+            label: 'Гибкий подход к обеспечению',
+            icon: image,
+          },
+          {
+            label: 'Учет индивидуальных особенностей и потребностей бизнеса',
+            icon: image,
+          },
+          {
+            label: 'Льготная ставка до 5% годовых',
+            icon: image,
+          },
+          {
+            label: 'Возможность беззалогового кредитования',
+            icon: image,
+          },
+        ]}
+        version="primary"
+      />
+    </div>
+  ),
+};

package/src/components/BenefitsBlock/BenefitsBlock.fixture.tsx

@@ -1,5 +1,4 @@
 import '../../setup-fixture';
-
 import type { Picture } from '../../model/Picture';
 import { BenefitsBlock } from './BenefitsBlock';
 

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,9 +1,3 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img/Img';
-import { style } from '../../utils/style';
 import type {
   BenefitBlockItemProps,
   BenefitsBlockContent,
@@ -11,47 +5,56 @@ import type {
   ListBenefitDef,
   TextBenefitDef,
 } from './BenefitsBlockContent';
+import { benefitImageStyles } from './benefitImageStyles';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import type { UniBlockProps } from '../../model/JSXBlock';
 
 interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
   ({ className = '', title, benefitList, ...rest }) => (
-    <BlockWrapper
-      className={style('flex flex-col items-center', className)}
-      defaultPadding="p-default"
-      {...rest}
-    >
-      {title ? (
-        <Heading headingType="h3" as="h2" className="max-w-[47rem] text-center" title={title} />
-      ) : null}
+    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+      {title ? <Heading headingType="h3" as="h2" className="text-center" title={title} /> : null}
       {benefitList?.length ? (
-        <div className="flex flex-wrap w-full justify-center gap-x-20 mt-8">
-          {benefitList.map(renderStep)}
+        <div
+          className="sm:flex sm:flex-wrap w-full sm:justify-center sm:gap-x-m gap-y-lg sm:gap-y-0 mt-8"
+          role="list"
+        >
+          {benefitList.map(renderBenefit)}
         </div>
       ) : null}
     </BlockWrapper>
   ),
 );
 
-const renderStep = (benefit: BenefitBlockItemProps, i: number) => {
-  const description = benefit.description;
-
-  return (
-    <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
-      {benefit?.icon?.icon ? (
-        <Img
-          className="w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black"
-          image={benefit.icon}
-        />
-      ) : null}
-      {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
-      <div className="ml-5 h-full">
-        {benefit?.label ? <Heading headingType="h6">{benefit.label}</Heading> : null}
-        {renderDescription(description)}
+const renderBenefit = (benefit: BenefitBlockItemProps, i: number) => (
+  <div
+    key={String(i)}
+    className="flex items-center sm:basis-1/2 sm:max-w-[400px] mb-14"
+    role="listitem"
+  >
+    {benefit?.icon?.icon ? (
+      <Img
+        className={style(
+          'p-3 mr-5 shrink-0 bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black',
+          benefitImageStyles,
+        )}
+        image={benefit.icon}
+      />
+    ) : null}
+    {benefit?.icon?.src ? <Img className="mr-5 shrink-0" image={benefit.icon} /> : null}
+    {benefit?.label ? (
+      <div className="sm:h-full">
+        <Heading headingType="h6">{benefit.label}</Heading>
+        {renderDescription(benefit.description)}
       </div>
-    </div>
-  );
-};
+    ) : null}
+  </div>
+);
 
 const renderDescription = (description: DescriptionDef | undefined) => {
   const benefitType = description?.benefitType || null;

package/src/components/BenefitsBlock/benefitImageStyles.mobile.tsx

@@ -0,0 +1 @@
+export const benefitImageStyles = 'w-56 h-56 min-w-56';

package/src/components/BenefitsBlock/benefitImageStyles.tsx

@@ -0,0 +1 @@
+export const benefitImageStyles = 'w-12 h-12 min-w-12 rounded-full';

package/src/components/Blocks.mobile.ts

@@ -1,4 +1,5 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
+import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { ButtonsBlock } from './ButtonsBlock/ButtonsBlock';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
@@ -19,12 +20,15 @@ import { ProductGallery } from './ProductGallery/ProductGallery';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { StepsBlock } from './StepsBlock/StepsBlock';
+import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
+import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 
 export const Blocks: BlocksRegistry = {
   ButtonsBlock,
+  BonusBenefitsBlock,
   CardTransfer,
   Carousel,
   CarouselTariffsCard,
@@ -39,6 +43,7 @@ export const Blocks: BlocksRegistry = {
   Placeholder,
   ProductBlock,
   StepsBlock,
+  Tabs,
   TariffsTable,
   TextBlock,
   RichTextBlock,
@@ -47,4 +52,5 @@ export const Blocks: BlocksRegistry = {
   CarouselRecommendationCard,
   CarouselProgramsCard,
   ProductGallery,
+  BenefitsBlock,
 };