@redneckz/wildless-cms-uni-blocks 0.14.244 → 0.14.246

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,8 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { defaultEventBus } from '../../EventBus/defaultEventBus';
+import { type Slot } from '../../model/ContentPageDef';
 import { type VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { type FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
@@ -27,6 +29,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     button,
     visibleCellsCount = 1,
     cardCells = [],
+    options,
     ...rest
   }) => {
     const cellsNode = cardCells.map(renderCardInfo);
@@ -35,6 +38,17 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
       visibleCellsCount > 0
         ? [cellsNode.slice(0, visibleCellsCount), cellsNode.slice(visibleCellsCount)]
         : [cellsNode, []];
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(
+      () =>
+        defaultEventBus.subscribe('fold', (event) => {
+          if (options?.parent !== undefined && event.parent === options?.parent) {
+            setIsVisible(event.isUnfolded);
+          }
+        }),
+      [],
+    );
 
     return (
       <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-2xl" {...rest}>
@@ -49,13 +63,15 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
         {button?.text ? <LinkButton className="w-full mt-m mb-lg" {...button} /> : null}
         {hiddenCells.length ? (
           <Foldable
-            renderFoldableSection={({ isUnfolded }) => (
+            renderFoldableSection={() => (
               <div>
                 {visibleCells}
-                <FoldableSection isUnfolded={isUnfolded}>{hiddenCells}</FoldableSection>
+                <FoldableSection isUnfolded={isVisible}>{hiddenCells}</FoldableSection>
               </div>
             )}
-            renderFoldButton={cardCells.length > 1 ? renderFoldButton : null}
+            renderFoldButton={
+              cardCells.length > 1 ? renderFoldButton(isVisible, options?.parent) : null
+            }
           />
         ) : (
           <div>{visibleCells}</div>
@@ -65,18 +81,23 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
   },
 );
 
-const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
-  <button
-    className="w-full cursor-pointer text-primary-main pt-lg flex justify-between items-center"
-    onClick={onToggle}
-    type="button"
-  >
-    <div>{isUnfolded ? 'Скрыть' : 'Подробнее о тарифе'}</div>
-    <Icon
-      className="text-primary-text"
-      name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
-      width="16"
-      height="16"
-    />
-  </button>
-);
+const renderFoldButton = (isUnfolded?: boolean, parent?: Slot) => (): VNode =>
+  (
+    <button
+      className="w-full cursor-pointer text-primary-main pt-lg flex justify-between items-center"
+      onClick={() => {
+        if (parent !== undefined) {
+          defaultEventBus.fire('fold', { type: 'fold', isUnfolded: !isUnfolded, parent });
+        }
+      }}
+      type="button"
+    >
+      <div>{isUnfolded ? 'Скрыть' : 'Подробнее о тарифе'}</div>
+      <Icon
+        className="text-primary-text"
+        name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+        width="16"
+        height="16"
+      />
+    </button>
+  );

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCardAction.ts

@@ -0,0 +1,6 @@
+import { type Slot } from './../../model/ContentPageDef';
+export type CarouselTariffsCardAction = {
+  type: 'fold';
+  isUnfolded: boolean;
+  parent: Slot;
+};

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

@@ -1,8 +1,6 @@
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type TopMenuItemProps } from '../../data/SitemapData';
-import { type LinkProps } from '../../model/LinkProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { Text } from '../../ui-kit/Text/Text';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { appendSlash } from '../../utils/appendSlash';
@@ -10,7 +8,6 @@ import { mapCookie } from '../../utils/mapCookie';
 import { RollupItem } from '../RollupItem/RollupItem';
 import { Contacts } from './Contacts';
 import { COOKIE_REPLACE } from './cookieReplaceData';
-import { findIconByHref } from './findIconByHref';
 import { type FooterProps } from './FooterProps';
 import { HorizontalNavigation } from './HorizontalNavigation';
 import { HorizontalNavigationLink } from './HorizontalNavigationLink';
@@ -45,7 +42,12 @@ export const Footer = UniBlock<FooterProps>(({ className, footer, ...rest }) =>
           Соцсети
         </SocialMedia>
         <div className="mb-xl">
-          <div className="flex flex-col gap-4 mb-xs">{mobileApps?.map(renderButton)}</div>
+          <SocialMedia
+            className="mb-m"
+            media={mobileApps}
+            stretched={true}
+            showButtonText={false}
+          />
           <Text size="text-s" font="font-light" color="text-secondary-text">
             Мобильное приложение
           </Text>
@@ -83,18 +85,3 @@ const renderTopItems = (topItems: TopMenuItemProps[] | undefined) =>
         <LinkList items={item.items} basePath={appendSlash(item.href)} />
       </RollupItem>
     ));
-
-const renderButton = ({ href = '/', text }: LinkProps, i: number) => {
-  const { label } = findIconByHref(href);
-
-  return (
-    <LinkButton
-      key={String(i)}
-      className="w-full"
-      text={text || label}
-      version="secondary"
-      href={href}
-      target="_blank"
-    />
-  );
-};

package/package.json

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

package/src/EventBus/defaultEventBus.ts

@@ -1,3 +1,4 @@
+import { type CarouselTariffsCardAction } from '../components/CarouselTariffsCard/CarouselTariffsCardAction';
 import { type TabActivationEvent } from '../components/Tabs/TabActivationEvent';
 import { type Region } from '../hooks/useRegions';
 import { type DialogAction } from '../ui-kit/DialogManager/DialogAction';
@@ -9,6 +10,7 @@ interface GlobalEventMap {
   dialog: DialogAction;
   popup: PopupAction;
   tab: TabActivationEvent;
+  fold: CarouselTariffsCardAction;
 }
 
 export const defaultEventBus = new EventBus<GlobalEventMap>();

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,8 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { defaultEventBus } from '../../EventBus/defaultEventBus';
+import { type Slot } from '../../model/ContentPageDef';
 import { type VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { type FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
@@ -27,6 +29,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     button,
     visibleCellsCount = 1,
     cardCells = [],
+    options,
     ...rest
   }) => {
     const cellsNode = cardCells.map(renderCardInfo);
@@ -35,6 +38,17 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
       visibleCellsCount > 0
         ? [cellsNode.slice(0, visibleCellsCount), cellsNode.slice(visibleCellsCount)]
         : [cellsNode, []];
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(
+      () =>
+        defaultEventBus.subscribe('fold', (event) => {
+          if (options?.parent !== undefined && event.parent === options?.parent) {
+            setIsVisible(event.isUnfolded);
+          }
+        }),
+      [],
+    );
 
     return (
       <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-2xl" {...rest}>
@@ -49,13 +63,15 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
         {button?.text ? <LinkButton className="w-full mt-m mb-lg" {...button} /> : null}
         {hiddenCells.length ? (
           <Foldable
-            renderFoldableSection={({ isUnfolded }) => (
+            renderFoldableSection={() => (
               <div>
                 {visibleCells}
-                <FoldableSection isUnfolded={isUnfolded}>{hiddenCells}</FoldableSection>
+                <FoldableSection isUnfolded={isVisible}>{hiddenCells}</FoldableSection>
               </div>
             )}
-            renderFoldButton={cardCells.length > 1 ? renderFoldButton : null}
+            renderFoldButton={
+              cardCells.length > 1 ? renderFoldButton(isVisible, options?.parent) : null
+            }
           />
         ) : (
           <div>{visibleCells}</div>
@@ -65,18 +81,23 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
   },
 );
 
-const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
-  <button
-    className="w-full cursor-pointer text-primary-main pt-lg flex justify-between items-center"
-    onClick={onToggle}
-    type="button"
-  >
-    <div>{isUnfolded ? 'Скрыть' : 'Подробнее о тарифе'}</div>
-    <Icon
-      className="text-primary-text"
-      name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
-      width="16"
-      height="16"
-    />
-  </button>
-);
+const renderFoldButton = (isUnfolded?: boolean, parent?: Slot) => (): VNode =>
+  (
+    <button
+      className="w-full cursor-pointer text-primary-main pt-lg flex justify-between items-center"
+      onClick={() => {
+        if (parent !== undefined) {
+          defaultEventBus.fire('fold', { type: 'fold', isUnfolded: !isUnfolded, parent });
+        }
+      }}
+      type="button"
+    >
+      <div>{isUnfolded ? 'Скрыть' : 'Подробнее о тарифе'}</div>
+      <Icon
+        className="text-primary-text"
+        name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+        width="16"
+        height="16"
+      />
+    </button>
+  );

package/src/components/CarouselTariffsCard/CarouselTariffsCardAction.ts

@@ -0,0 +1,6 @@
+import { type Slot } from './../../model/ContentPageDef';
+export type CarouselTariffsCardAction = {
+  type: 'fold';
+  isUnfolded: boolean;
+  parent: Slot;
+};

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

@@ -1,8 +1,6 @@
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type TopMenuItemProps } from '../../data/SitemapData';
-import { type LinkProps } from '../../model/LinkProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { Text } from '../../ui-kit/Text/Text';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { appendSlash } from '../../utils/appendSlash';
@@ -10,7 +8,6 @@ import { mapCookie } from '../../utils/mapCookie';
 import { RollupItem } from '../RollupItem/RollupItem';
 import { Contacts } from './Contacts';
 import { COOKIE_REPLACE } from './cookieReplaceData';
-import { findIconByHref } from './findIconByHref';
 import { type FooterProps } from './FooterProps';
 import { HorizontalNavigation } from './HorizontalNavigation';
 import { HorizontalNavigationLink } from './HorizontalNavigationLink';
@@ -45,7 +42,12 @@ export const Footer = UniBlock<FooterProps>(({ className, footer, ...rest }) =>
           Соцсети
         </SocialMedia>
         <div className="mb-xl">
-          <div className="flex flex-col gap-4 mb-xs">{mobileApps?.map(renderButton)}</div>
+          <SocialMedia
+            className="mb-m"
+            media={mobileApps}
+            stretched={true}
+            showButtonText={false}
+          />
           <Text size="text-s" font="font-light" color="text-secondary-text">
             Мобильное приложение
           </Text>
@@ -83,18 +85,3 @@ const renderTopItems = (topItems: TopMenuItemProps[] | undefined) =>
         <LinkList items={item.items} basePath={appendSlash(item.href)} />
       </RollupItem>
     ));
-
-const renderButton = ({ href = '/', text }: LinkProps, i: number) => {
-  const { label } = findIconByHref(href);
-
-  return (
-    <LinkButton
-      key={String(i)}
-      className="w-full"
-      text={text || label}
-      version="secondary"
-      href={href}
-      target="_blank"
-    />
-  );
-};