@redneckz/wildless-cms-uni-blocks 0.3.83 → 0.3.85

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -1,10 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useExchangeRates } from '../../hooks/useExchangeRates';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { BaseTile } from '../BaseTile/BaseTile';
-import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { Currency } from './CurrencyProps';
 import { CurrencyTable } from './CurrencyTable';
 import { CurrentLocation } from './CurrentLocation';
@@ -19,7 +18,7 @@ const DEFAULT_LOCATION = {
 export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlockProps {}
 
 export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
-  ({ className = '', context, title = 'Курсы обмена валют', ...rest }) => {
+  ({ className = '', context, title = 'Курсы обмена валют', button, ...rest }) => {
     const currencyRates = useExchangeRates(context.useAsyncData);
 
     const currencyRatesBuy = currencyRates.filter((_) => _.buy);
@@ -36,18 +35,12 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
       >
         <BaseTile
           context={context}
-          title={
-            <Heading
-              headingType={getTileHeadingType(className)}
-              title={title}
-              className="whitespace-pre-wrap"
-            />
-          }
+          title={<Heading headingType="h4" title={title} className="whitespace-pre-wrap text-h4" />}
         >
           <div className="flex">
-            <div className="mr-[43px] pt-4">
+            <div className="mr-14 pt-4">
               {currencyRates ? (
-                <CurrencyTable className="mb-[31px]" exchangeCurrencyItems={currencyRates} />
+                <CurrencyTable className="mb-[30px]" exchangeCurrencyItems={currencyRates} />
               ) : null}
               <CurrentLocation {...DEFAULT_LOCATION} />
             </div>
@@ -57,6 +50,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
                 context={context}
                 currencyRatesBuy={currencyRatesBuy}
                 currencyRatesSell={currencyRatesSell}
+                button={button}
               />
             ) : null}
           </div>

package/src/components/ExchangeRateTile/ExchangeRateTileContent.ts

@@ -1,7 +1,10 @@
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
 /**
  * @title Курсы обмена валют
  */
 export interface ExchangeRateTileContent {
   /** @title Заголовок */
   title?: string;
+  button?: ButtonProps;
 }

package/src/components/ExchangeRateTile/renderButton.tsx

@@ -1,14 +1,9 @@
 import { Button } from '../../ui-kit/Button/Button';
 
-export function renderButton() {
+export function renderButton(button) {
   return (
-    <Button
-      className="box-border mt-3.5 py-3 h-12 w-full"
-      version="primary"
-      href="https://coins.rshb.ru/exchange"
-      target="_blank"
-    >
-      Купить валюту
+    <Button className="py-4 mr-1" version={button?.version} href={button?.href} target="_blank">
+      {button?.text}
     </Button>
   );
 }

package/src/components/ExchangeRateTile/renderInput.tsx

@@ -19,7 +19,7 @@ export function renderInput(props: InputProps) {
   return (
     <div className="relative flex items-center">
       <Input
-        className="h-10 border pl-4 pt-[7px] pb-[7px] rounded-md text-m-sm w-full appearance-none -mr-12"
+        className="h-13 border pl-4 pt-4 pb-4 rounded-md text-l w-full appearance-none -mr-12"
         placeholder={placeholder}
         type="text"
         value={value}
@@ -27,7 +27,7 @@ export function renderInput(props: InputProps) {
       />
       {rates.length ? (
         <Select
-          className="h-9 -translate-x-4"
+          className="h-9 -translate-x-4 bg-transparent"
           value={selected}
           onChange={(_) => setSelected(_ as Currency)}
         >

package/src/components/Footer/HorizontalNavigation.mobile.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
 import type { FooterLink } from './FooterLink';
+import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 
 export interface HorizontalNavigationProps extends FooterLink, UniBlockProps {
   title?: string;
@@ -22,6 +22,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
               <HorizontalNavigationLink
                 key={String(i)}
                 index={i}
+                className="font-normal text-sm"
                 {...useLink({ router, handlerDecorator }, _)}
               />
             ))}
@@ -31,22 +32,3 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
     );
   },
 );
-
-interface HorizontalNavigationLinkProps extends LinkProps {
-  className: string;
-  index: number;
-  onClick: (ev: MouseEvent) => any;
-}
-
-const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(
-  ({ className = '', index, text, href, target, onClick }) => (
-    <a
-      className={`font-sans font-normal text-sm text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
-      href={href}
-      target={target}
-      onClick={onClick}
-    >
-      {text || `Документ ${index}`}
-    </a>
-  ),
-);

package/src/components/Footer/HorizontalNavigation.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
 import type { FooterLink } from './FooterLink';
+import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 
 export interface HorizontalNavigationProps extends FooterLink, UniBlockProps {
   title?: string;
@@ -21,6 +21,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
               <HorizontalNavigationLink
                 key={String(i)}
                 index={i}
+                className="font-light max-w-[292px]"
                 {...useLink({ router, handlerDecorator }, _)}
               />
             ))}
@@ -30,22 +31,3 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
     );
   },
 );
-
-interface HorizontalNavigationLinkProps extends LinkProps {
-  className: string;
-  index: number;
-  onClick: (ev: MouseEvent) => any;
-}
-
-const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(
-  ({ className = '', index, text, href, target, onClick }) => (
-    <a
-      className={`font-sans font-light text-secondary-text hover:text-primary-main inline-block no-underline  max-w-[292px] ${className}`}
-      href={href}
-      target={target}
-      onClick={onClick}
-    >
-      {text || `Документ ${index}`}
-    </a>
-  ),
-);

package/src/components/Footer/HorizontalNavigationLink.tsx

@@ -0,0 +1,21 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+
+interface HorizontalNavigationLinkProps extends LinkProps {
+  className: string;
+  index: number;
+  onClick: (ev: MouseEvent) => any;
+}
+
+export const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(
+  ({ className = '', index, text, href, target, onClick }) => (
+    <a
+      className={`font-sans text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
+      href={href}
+      target={target}
+      onClick={onClick}
+    >
+      {text || `Документ ${index}`}
+    </a>
+  ),
+);

package/src/components/Footer/MediaButton.tsx

@@ -54,6 +54,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
       : 'border-main-divider border-solid border-[1px] hover:bg-primary-main';
 
   const isPrimary = version === 'primary';
+  const imageClassName = isPrimary ? 'group-hover:text-white' : '';
 
   return (
     <a
@@ -66,13 +67,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
       rel="noopener noreferrer"
     >
       {icon ? (
-        <Img
-          image={icon}
-          imageClassName={isPrimary ? 'group-hover:text-white' : ''}
-          width="24"
-          height="24"
-          asSVG
-        />
+        <Img image={icon} imageClassName={imageClassName} width="24" height="24" asSVG />
       ) : null}
     </a>
   );

package/src/components/Footer/TextInformation.mobile.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { LinkProps } from '../../model/LinkProps';
 import type { FooterLink } from './FooterLink';
+import { TextInformationLink } from './TextInformationLink';
 
 export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
   const router = context.useRouter();
@@ -20,6 +20,7 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
             <TextInformationLink
               key={String(i)}
               index={i}
+              className="font-normal"
               {...useLink({ router, handlerDecorator }, _)}
             />
           ))}
@@ -28,24 +29,3 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
     </div>
   );
 });
-
-interface TextInformationLinkProps extends LinkProps {
-  className: string;
-  index: number;
-  onClick: (ev: MouseEvent) => any;
-}
-
-const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
-  ({ className, index, text, href, target, onClick }) => (
-    <a
-      className={`font-sans font-normal text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${
-        className || ''
-      }`}
-      href={href}
-      target={target}
-      onClick={onClick}
-    >
-      {text || `Документ ${index}`}
-    </a>
-  ),
-);

package/src/components/Footer/TextInformation.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { LinkProps } from '../../model/LinkProps';
 import type { FooterLink } from './FooterLink';
+import { TextInformationLink } from './TextInformationLink';
 
 export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
   const router = context.useRouter();
@@ -20,6 +20,7 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
             <TextInformationLink
               key={String(i)}
               index={i}
+              className="font-light"
               {...useLink({ router, handlerDecorator }, _)}
             />
           ))}
@@ -28,24 +29,3 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
     </div>
   );
 });
-
-interface TextInformationLinkProps extends LinkProps {
-  className: string;
-  index: number;
-  onClick: (ev: MouseEvent) => any;
-}
-
-const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
-  ({ className, index, text, href, target, onClick }) => (
-    <a
-      className={`font-sans font-light text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${
-        className || ''
-      }`}
-      href={href}
-      target={target}
-      onClick={onClick}
-    >
-      {text || `Документ ${index}`}
-    </a>
-  ),
-);

package/src/components/Footer/TextInformationLink.tsx

@@ -0,0 +1,23 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+
+interface TextInformationLinkProps extends LinkProps {
+  className: string;
+  index: number;
+  onClick: (ev: MouseEvent) => any;
+}
+
+export const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
+  ({ className = '', index, text, href, target, onClick }) => (
+    <a
+      className={`font-sans text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${
+        className
+      }`}
+      href={href}
+      target={target}
+      onClick={onClick}
+    >
+      {text || `Документ ${index}`}
+    </a>
+  ),
+);

package/src/components/Gallery/Gallery.mobile.tsx

@@ -17,17 +17,15 @@ const blockStyle: Record<BlockVersion, string> = {
 
 export const Gallery = JSX<GalleryProps>(
   ({ context, title, description, cards = [], className, orientation = 'horizontal' }) => {
+    const headingClassName = description ? 'mb-2' : 'mb-5';
+
     return (
       <section
         className={`relative font-sans text-primary-text bg-white px-4 py-6 overflow-hidden ${className}`}
       >
         <div className="flex flex-col items-center mb-5">
           {title ? (
-            <Heading
-              headingType="h3"
-              className={`text-center ${description ? 'mb-2' : 'mb-5'}`}
-              title={title}
-            />
+            <Heading headingType="h3" className={`text-center ${headingClassName}`} title={title} />
           ) : null}
           {description ? (
             <div className="font-normal text-m-md max-w-[600px] text-center mb-5">

package/src/components/GroupBlock/GroupBlockTabs.tsx

@@ -12,11 +12,11 @@ export interface GroupBlockTabsProps {
 }
 
 export const GroupBlockTabs = JSX<GroupBlockTabsProps>((props) => {
-  const { tabs, currentTag, onTabClick, className = '', isShowCounter } = props;
+  const { tabs, currentTag, onTabClick, className = '', isShowCounter = false } = props;
 
   return (
     <div className={`mb-2 box-border flex gap-x-1 ${className}`} role="tablist">
-      {tabs?.map(renderTab(onTabClick, isShowCounter, currentTag))}
+      {tabs?.map(renderTab(onTabClick, currentTag, isShowCounter))}
     </div>
   );
 });
@@ -24,12 +24,12 @@ export const GroupBlockTabs = JSX<GroupBlockTabsProps>((props) => {
 const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-m-sm';
 
 const renderTab =
-  (onTabClick: TabClickHandler, isShowCounter?: boolean, currentTag?: string) =>
+  (onTabClick: TabClickHandler, currentTag?: string, isShowCounter = false) =>
   (tab: TabsItemProps, i: number) => {
     const isActive = currentTag === tab.tag;
     const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
     const tabText = isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main';
-    const counterBlockStyle = `${badgeStyle} 
+    const counterBlockStyle = `${badgeStyle}
       ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-light text-secondary-text'}`;
 
     return (

package/src/components/GroupBlock/GroupBlocksItem.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { JSXBlock } from '../../components/ContentPage/ContentPage';
-import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+import type { JSXBlock } from '../ContentPage/ContentPage';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import type { UniBlockProps } from '../../types';
 import { style2className } from '../../utils/style2className';
 import type { GroupBlockDef } from './BlocksTypeProps';

package/src/components/GroupBlock/renderBlocksTypes.tsx

@@ -13,12 +13,15 @@ type EmbeddableBlocksProps = {
 export const renderBlock =
   ({ context, className }: EmbeddableBlocksProps) =>
   (block: GroupBlockDef, i: number) => {
-    const type = block?.blockType;
-    if (!type || !(type in EmbeddableGroupBlocks)) {
+    if (!block) {
       return null;
     }
 
-    const { style, ...rest } = block;
+    const { style, blockType: type, ...rest } = block;
+
+    if (!type || !(type in EmbeddableGroupBlocks)) {
+      return null;
+    }
 
     const classNameBlock = style2className(style);
     const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.example.json

@@ -1,9 +1,5 @@
 {
   "title": "Заголовок",
-  "button": {
-    "href": "https://rshb.ru",
-    "text": "Текст кнопки"
-  },
   "insuranceTabs": [
     {
       "title": "Описание 1",
@@ -11,12 +7,28 @@
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         },
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         }
       ]
     },
@@ -26,17 +38,41 @@
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         },
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         },
         {
           "sum": 200000,
           "fee": 2100,
-          "icon": { "icon": "ActualBalanceIcon" }
+          "icon": {
+            "format": "webp",
+            "size": {
+              "width": 70,
+              "height": 70
+            },
+            "icon": "ActualBalanceIcon"
+          },
+          "href": ""
         }
       ]
     }

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.fixture.tsx

@@ -8,7 +8,6 @@ export default {
         className="col-span-12"
         context={context}
         title="Выбор страховой суммы"
-        button={{ href: 'https://rshb.ru', text: 'Выбрать программу' }}
         insuranceTabs={[
           {
             title: 'Индивидуальный',
@@ -16,17 +15,22 @@ export default {
               {
                 sum: 200000,
                 fee: 2100,
-                icon: { icon: 'ActualBalanceIcon' },
+                icon: {
+                  icon: 'ActualBalanceIcon',
+                },
+                href: '',
               },
               {
                 sum: 200000,
                 fee: 2100,
                 icon: { icon: 'ActualBalanceIcon' },
+                href: '',
               },
               {
                 sum: 200000,
                 fee: 2100,
                 icon: { icon: 'ActualBalanceIcon' },
+                href: ']',
               },
             ],
           },
@@ -37,6 +41,7 @@ export default {
                 sum: 400000,
                 fee: 3600,
                 icon: { icon: 'ActualBalanceIcon' },
+                href: '',
               },
             ],
           },

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -1,15 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import type { InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import type { InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';
 import { InsuranceAmountBlockInner } from './InsuranceAmountBlockInner';
 
 export interface InsuranceAmountBlockProps extends InsuranceAmountBlockContent, UniBlockProps {}
 
 export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
-  ({ className = '', context, title, insuranceTabs = [], button, ...rest }) => {
+  ({ className = '', context, title, insuranceTabs = [], ...rest }) => {
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
 
     return (
@@ -19,16 +18,18 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
         {...rest}
       >
         {title ? <Heading className="text-center" title={title} headingType="h3" /> : null}
-        <div className="p-1.5 bg-secondary-light w-fit m-auto rounded-md mt-[34px]">
-          {insuranceTabs.map((item, i) =>
-            renderNavButton({
-              title: item?.title,
-              i,
-              activeSlideIndex,
-              onClick: () => setActiveSlideIndex(i),
-            }),
-          )}
-        </div>
+        {insuranceTabs?.length > 1 ? (
+          <div className="p-1.5 bg-secondary-light w-fit m-auto rounded-md mt-[34px]">
+            {insuranceTabs.map((item, i) =>
+              renderNavButton({
+                title: item?.title,
+                i,
+                activeSlideIndex,
+                onClick: () => setActiveSlideIndex(i),
+              }),
+            )}
+          </div>
+        ) : null}
         <div
           className="flex"
           style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
@@ -40,17 +41,6 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
             insuranceTabs,
           })}
         </div>
-        {button?.text ? (
-          <div className="flex justify-center">
-            <Button
-              className="box-border p-4 h-14 w-full max-w-[240px]"
-              version={button?.version || 'primary'}
-              href={button.href}
-            >
-              {button.text}
-            </Button>
-          </div>
-        ) : null}
       </BlockWrapper>
     );
   },
@@ -64,8 +54,13 @@ const renderInsuranceGalleries = ({
   const insuranceGalleries = insuranceTabs?.map((_) => _.cards);
 
   return insuranceGalleries?.length
-    ? insuranceGalleries.map((cards) => (
-        <InsuranceAmountBlockInner context={context} className={className} cards={cards} />
+    ? insuranceGalleries.map((cards, i) => (
+        <InsuranceAmountBlockInner
+          key={String(i)}
+          context={context}
+          className={className}
+          cards={cards}
+        />
       ))
     : null;
 };
@@ -83,7 +78,7 @@ function renderNavButton({ title, i, activeSlideIndex, onClick }) {
       key={String(i)}
       onClick={onClick}
       aria-label={title}
-      className={`box-border px-4 py-3 text-m-md ${btnClassName}`}
+      className={`box-border px-4 py-3 text-m ${btnClassName}`}
     >
       {title}
     </button>

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockContent.ts

@@ -1,5 +1,4 @@
 import type { Picture } from '../../model/Picture';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
  * @title Кнопка выбора программы
@@ -11,6 +10,8 @@ export type CardItem = {
   fee?: number;
   /** @title Страховая сумма */
   sum?: number;
+  /** @title Ссылка на программу*/
+  href?: string;
 };
 
 /**
@@ -31,5 +32,4 @@ export interface InsuranceAmountBlockContent {
   title?: string;
   /** @title Список вкладок */
   insuranceTabs?: InsuranceAmountBlockTabs[];
-  button?: ButtonProps;
 }