@redneckz/wildless-cms-uni-blocks 0.14.4 → 0.14.6

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

@@ -4,6 +4,7 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
 import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
 import type {
   BenefitBlockItemProps,
   BenefitsBlockContent,
@@ -12,19 +13,19 @@ import type {
   TextBenefitDef,
 } from './BenefitsBlockContent';
 import { defaultIconSize } from './defaultIconSize';
-import { style } from '../../utils/style';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { AlignStyles } from '../../model/AlignStyles';
 
 interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
   ({ className = '', title, benefitList, ...rest }) => (
-    <BlockWrapper className={style('space-y-x', className)} defaultPadding="p-6xl" {...rest}>
-      {title ? (
-        <Heading headingType="h3" as="h2" className="text-left sm:text-center" title={title} />
-      ) : null}
+    <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
+      {title ? <Heading headingType="h3" as="h2" className={AlignStyles} title={title} /> : null}
       {benefitList?.length ? (
-        <div className="flex flex-wrap w-full sm:justify-center mt-xl gap-5xl" role="list">
+        <div
+          className="flex flex-col @md:flex-row flex-wrap w-full @md:justify-center mt-xl gap-5xl"
+          role="list"
+        >
           {benefitList.map(renderBenefit)}
         </div>
       ) : null}
@@ -35,7 +36,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(
 const renderBenefit = (benefit: BenefitBlockItemProps, i: number) => (
   <div
     key={String(i)}
-    className="flex gap-m items-center md:basis-1/2 md:max-w-[500px]"
+    className="flex gap-m items-center @md:basis-1/2 @md:max-w-[500px]"
     role="listitem"
   >
     {benefit?.icon?.icon ? (
@@ -48,7 +49,7 @@ const renderBenefit = (benefit: BenefitBlockItemProps, i: number) => (
     ) : null}
     {benefit?.icon?.src ? <Img className="shrink-0" image={benefit.icon} /> : null}
     {benefit?.label ? (
-      <div className="sm:h-full">
+      <div className="@sm:h-full">
         <Heading headingType="h6">{benefit.label}</Heading>
         {renderDescription(benefit.description)}
       </div>
@@ -60,7 +61,7 @@ const renderDescription = (description: DescriptionDef | undefined) => {
   const benefitType = description?.benefitType || null;
 
   return description && benefitType ? (
-    <div className="mt-2xs sm:mt-xs">
+    <div className="mt-xs text-l font-light text-secondary-text group-data-secondary:text-white/80">
       {benefitType === 'list'
         ? renderListBenefit(description as ListBenefitDef)
         : renderTextBenefit(description as TextBenefitDef)}
@@ -70,13 +71,13 @@ const renderDescription = (description: DescriptionDef | undefined) => {
 
 const renderTextBenefit = (description?: TextBenefitDef) =>
   description?.name ? (
-    <Paragraph
-      font="font-light"
+    <Text
       size="text-l"
-      color="text-secondary-text group-data-secondary:text-white"
+      color="text-secondary-text group-data-secondary:text-white/80"
+      font="font-light"
     >
       {description.name}
-    </Paragraph>
+    </Text>
   ) : null;
 
 const renderListBenefit = (description?: ListBenefitDef) => {
@@ -85,14 +86,15 @@ const renderListBenefit = (description?: ListBenefitDef) => {
   return description?.items && description.items.length > 0 ? (
     <ul className={listStyleType}>
       {description.items.map((_, i) => (
-        <Paragraph
-          key={`benefitListItem-${i}`}
-          font="font-light"
-          size="text-l"
-          color="text-secondary-text group-data-secondary:text-white"
-        >
-          {_}
-        </Paragraph>
+        <li key={`benefitListItem-${i}`}>
+          <Text
+            size="text-l"
+            color="text-secondary-text group-data-secondary:text-white/80"
+            font="font-light"
+          >
+            {_}
+          </Text>
+        </li>
       ))}
     </ul>
   ) : null;

package/mobile/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { FormFieldRegisterer, useForm } from '../../hooks/useForm';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import type { BusinessDepositCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
@@ -28,7 +29,6 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
       daysValue: BUSINESS_DEFAULT_DAYS,
       isReplenished: false,
       isPartialWithdrawal: false,
-      isSmallBusiness: false,
       isMonthlyInterestPayment: false,
     });
 
@@ -55,13 +55,15 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
             ...field('daysValue'),
             value: calculatorParams.daysValue,
           })}
-          {renderBusinessDepositParamsForm(calculatorParams, field)}
-          {renderInterestPayment({
-            title: 'Выплата процентов',
-            orientation: 'vertical',
-            ...field('isMonthlyInterestPayment'),
-            radioGroupClassName: 'sm:flex-col',
-          })}
+          <div className="flex flex-col sm:flex-row gap-y-4 gap-x-14">
+            {renderBusinessDepositParamsForm(calculatorParams, field)}
+            {renderInterestPayment({
+              title: 'Выплата процентов',
+              orientation: 'vertical',
+              ...field('isMonthlyInterestPayment'),
+              radioGroupClassName: 'sm:flex-col',
+            })}
+          </div>
         </div>
         <div className="border-b border-main-divider md:hidden"></div>
         {renderRate({
@@ -85,24 +87,24 @@ const renderBusinessDepositParamsForm = (
   calculatorParams: BusinessDepositCalculatorParams,
   field: FormFieldRegisterer<BusinessDepositCalculatorUserInputParams>,
 ) => (
-  <div className="flex flex-col gap-y-xl sm:gap-y-s">
-    <Checkbox
-      text="Пополнение"
-      disabled={calculatorParams.isDisabledOperatingDeposit}
-      {...field('isReplenished')}
-      value={calculatorParams.isReplenished}
-    />
-    <Checkbox
-      disabled={calculatorParams.isDisabledOperatingDeposit}
-      text="Частичное снятие"
-      {...field('isPartialWithdrawal')}
-      value={calculatorParams.isPartialWithdrawal}
-    />
-    <Checkbox
-      text="ИП / малое предприятие"
-      {...field('isSmallBusiness')}
-      value={calculatorParams.isSmallBusiness}
-    />
+  <div className="space-y-s">
+    <Text color="text-secondary-text" font="font-light">
+      Параметры
+    </Text>
+    <div className="flex flex-col gap-y-xl sm:gap-y-s">
+      <Checkbox
+        text="Пополнение"
+        disabled={calculatorParams.isDisabledOperatingDeposit}
+        {...field('isReplenished')}
+        value={calculatorParams.isReplenished}
+      />
+      <Checkbox
+        disabled={calculatorParams.isDisabledOperatingDeposit}
+        text="Частичное снятие"
+        {...field('isPartialWithdrawal')}
+        value={calculatorParams.isPartialWithdrawal}
+      />
+    </div>
   </div>
 );
 

package/mobile/src/components/Calculator/constants.ts

@@ -94,7 +94,6 @@ export const DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS: BusinessDepositCalculat
     isMonthlyInterestPayment: true,
     isReplenished: false,
     isPartialWithdrawal: false,
-    isSmallBusiness: false,
     depositeName: "Депозит 'Стабильный'",
   };
 

package/mobile/src/components/Calculator/useBusinessDepositCalculatorParams.ts

@@ -12,7 +12,6 @@ export interface BusinessCommonDepositParams {
   isMonthlyInterestPayment: boolean;
   isReplenished: boolean;
   isPartialWithdrawal: boolean;
-  isSmallBusiness: boolean;
 }
 export interface BusinessDepositCalculatorSourceBookParams extends BusinessCommonDepositParams {
   minSum: number;
@@ -45,14 +44,8 @@ export const useBusinessDepositCalculatorParams = (
   userInputParams: BusinessDepositCalculatorUserInputParams,
   sourceBookDir?: string,
 ): BusinessDepositCalculatorParams => {
-  const {
-    daysValue,
-    moneyValue,
-    isPartialWithdrawal,
-    isReplenished,
-    isSmallBusiness,
-    isMonthlyInterestPayment,
-  } = userInputParams;
+  const { daysValue, moneyValue, isPartialWithdrawal, isReplenished, isMonthlyInterestPayment } =
+    userInputParams;
   const data = useCalculatorParams<BusinessDepositCalculatorData>(
     sourceBookDir || BUSINESS_DEPOSIT_CALC_DEFAULT_DIR,
   );
@@ -73,7 +66,6 @@ export const useBusinessDepositCalculatorParams = (
     data?.rateRows?.find((_) => {
       return (
         isMonthlyInterestPayment === _.isMonthlyInterestPayment &&
-        isSmallBusiness === _.isSmallBusiness &&
         checkIsOperatingDeposit(isOperatingDeposit, _) &&
         checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], _) &&
         checkRangeByKeys(daysValue, ['minDays', 'maxDays'], _)

package/mobile/src/components/Carousel/Carousel.tsx

@@ -90,7 +90,6 @@ Carousel.childrenTypes = [
   'CarouselTariffsCard',
   'CarouselRichTextCard',
   'CarouselInvestmentCard',
-  'CarouselEventCard',
   'ProductBlock',
 ];
 

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

@@ -8,7 +8,7 @@
   "title": "Заголовок",
   "description": "Описание",
   "additionalDescription": "Описание 1-2",
-  "columnsMode": "1",
+  "columnsMode": 1,
   "cardsList": [
     {
       "parameter": "Параметр",

package/mobile/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -68,7 +68,11 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
 const renderCardList = (cardsList: CardsListItem[]) =>
   cardsList.map((item, i) => (
     <li key={String(i)}>
-      {item?.parameter ? <Text size="text-h6">{item.parameter}</Text> : null}
+      {item?.parameter ? (
+        <div className="inline pr-xs">
+          <Text size="text-h6">{item.parameter}</Text>
+        </div>
+      ) : null}
       {item?.parameterDescription ? (
         <Text size="text-m" font="font-light" color="text-secondary-text">
           {item.parameterDescription}

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

@@ -15,8 +15,6 @@
       { "text": "Элемент списка 1", "title": "Элемент заголовка 1" },
       { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
       { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
-    ],
-    "align": "text-center",
-    "isFullWidth": true
+    ]
   }
 }

package/mobile/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -14,6 +14,7 @@ import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
 import { AlignStyles } from '../../model/AlignStyles';
+import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}
 
@@ -39,16 +40,16 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
   }) => {
     return (
       <BlockWrapper
-        className={style('flex flex-col justify-between', align, className)}
+        className={style('flex flex-col justify-between', className)}
         defaultPadding="p-0"
         version={version}
         {...rest}
       >
         <LinkWrapper className="p-m flex flex-col gap-xs" href={href} target={target}>
-          {renderCardTitle(headlineSmallVersion, title)}
-          {renderDescription(description)}
+          {renderCardTitle(headlineSmallVersion, title, align)}
+          {renderDescription(description, align)}
           {renderItems(items, isDotted, version)}
-          {renderAdditionalDescription(additionalDescription)}
+          {renderAdditionalDescription(additionalDescription, align)}
           {renderImage(icon, isImageFullWidth, isTopPosition)}
         </LinkWrapper>
         {renderButtonsSection([button], {
@@ -63,33 +64,42 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
 const renderImage = (image?: Picture, isImageFullWidth?: boolean, isTopPosition?: boolean) => (
   <div
     className={style(
-      'flex gap-lg',
+      'flex gap-y-lg justify-center',
+      isImageFullWidth ? 'min-w-full h-full' : '',
       isTopPosition ? 'order-first' : 'order-last',
-      !isImageFullWidth ? 'justify-center' : '',
     )}
   >
-    {image?.src ? <Img className="shrink-0" image={image} /> : null}
+    {image?.src ? <Img image={image} /> : null}
     {image?.icon ? (
       <Img
-        className={style('shrink-0', !isImageFullWidth ? 'w-8 h-8 min-w-8' : '')}
+        className={style(!isImageFullWidth ? 'w-8 h-8 min-w-8' : 'w-full h-full')}
         image={image}
       />
     ) : null}
   </div>
 );
 
-const renderCardTitle = (headlineSmallVersion: string, title?: string) =>
-  title ? <Text size={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>{title}</Text> : null;
+const renderCardTitle = (headlineSmallVersion: string, title?: string, align?: TextAlign) =>
+  title ? (
+    <Text align={align} size={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>
+      {title}
+    </Text>
+  ) : null;
 
-const renderDescription = (description?: string) =>
-  description ? <Paragraph size="text-l">{description}</Paragraph> : null;
+const renderDescription = (description?: string, align?: TextAlign) =>
+  description ? (
+    <Paragraph align={align} size="text-l">
+      {description}
+    </Paragraph>
+  ) : null;
 
-const renderAdditionalDescription = (additionalDescription?: string) =>
+const renderAdditionalDescription = (additionalDescription?: string, align?: TextAlign) =>
   additionalDescription ? (
     <Text
       size="text-m"
       font="font-light"
       color="text-secondary-text group-data-secondary:text-white/80"
+      align={align}
     >
       {additionalDescription}
     </Text>

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

@@ -15,8 +15,7 @@
         "href": "https://t.me",
         "target": "_blank",
         "version": "gray",
-        "rounded": false,
-        "text": "Текст"
+        "rounded": false
       }
     ],
     "version": "primary",

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -43,7 +43,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
             <List className="flex flex-col gap-xs" items={items} listItemSize="XS" />
           ) : null}
           {renderIcon(icon)}
-          {socialMedia.length ? <SocialMedia media={socialMedia} /> : null}
+          {socialMedia.length ? <SocialMedia media={socialMedia} showButtonText={true} /> : null}
         </LinkWrapper>
       </BlockWrapper>
     );

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -2,8 +2,8 @@ import type { AlignProps, HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import type { ListContent } from '../../ui-kit/List/ListContent';
-import type { SocialMediaLink } from '../Footer/FooterContent';
 
 /**
  * @title Карточка рекомендаций
@@ -15,5 +15,5 @@ export type CarouselRecommendationCardContent = UniBlockContent &
   LinkCommonProps &
   AlignProps & {
     /** @title Соц сети */
-    socialMedia?: SocialMediaLink[];
+    socialMedia?: ButtonContent[];
   };

package/mobile/src/components/Depository/Depository.tsx

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Pagination } from '../../ui-kit/Pagination/Pagination';
+import { style } from '../../utils/style';
+import type { DepositoryContent } from './DepositoryContent';
+import { DepositoryItem } from './DepositoryItem';
+import { useDepository } from './useDepository';
+
+const DEFAULT_ITEMS_COUNT = 10;
+
+interface DepositoryProps extends DepositoryContent, UniBlockProps {}
+
+export const Depository: JSXBlock<DepositoryProps> = JSX<DepositoryProps>(
+  ({ className, ...rest }) => {
+    const [currentPage, setCurrentPage] = useState(0);
+    const [itemCount] = useState(DEFAULT_ITEMS_COUNT);
+
+    const { totalPages = 0, items } = useDepository(itemCount, currentPage);
+
+    const handleChangePage = useCallback((page) => setCurrentPage(page - 1), []);
+
+    return (
+      <BlockWrapper className={style(className, 'container p-4xl')} {...rest}>
+        <div className="flex flex-col">
+          <div className="grid grid-cols-12 pb-lg border-gray border-opacity-50 border-b">
+            <span className="col-span-2 text-gray text-m">Дата</span>
+            <span className="col-span-10 text-gray text-m">Тема</span>
+          </div>
+          {items?.map((params) => (
+            <DepositoryItem key={String(params.publicId)} {...params} />
+          ))}
+          <Pagination
+            currentPage={currentPage + 1}
+            onPageChange={handleChangePage}
+            totalPages={totalPages + 1}
+          />
+        </div>
+      </BlockWrapper>
+    );
+  },
+);

package/mobile/src/components/Depository/DepositoryContent.ts

@@ -0,0 +1,3 @@
+import type { UniBlockContent } from '../../model/JSXBlock';
+
+export type DepositoryContent = UniBlockContent;

package/mobile/src/components/Depository/DepositoryItem.tsx

@@ -0,0 +1,21 @@
+import { useLink } from '../../hooks/useLink';
+import { convertTimestampToDate } from '../../utils/convertTimestampToDate';
+import { DepositoryDataItem } from './useDepository';
+
+export const DepositoryItem = ({ title, timestamp = 0, publicId }: DepositoryDataItem) => {
+  const link = useLink();
+  const { href } = link({ href: `/api/v1/depository/${publicId}/file` });
+
+  return (
+    <div className="grid grid-cols-12 py-lg border-gray border-opacity-50 border-b" key={publicId}>
+      <div className="col-span-2 text-m">
+        <span>{convertTimestampToDate(timestamp)}</span>
+      </div>
+      <div className="col-span-10 text-h6 hover:text-primary-active">
+        <a href={href} download aria-label="Скачать">
+          {title}
+        </a>
+      </div>
+    </div>
+  );
+};

package/mobile/src/components/Depository/useDepository.ts

@@ -0,0 +1,23 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { fetchJSONUnsafe } from '../../utils/fetchJSON';
+
+export interface DepositoryDataItem {
+  publicId?: number;
+  timestamp?: number;
+  title?: number;
+}
+
+interface DepositoryData {
+  content?: DepositoryDataItem[];
+  totalPages?: number;
+  totalElements?: number;
+}
+
+export const useDepository = (size: number, page: number) => {
+  const { data } = useAsyncData<DepositoryData>(
+    `/api/v1/depository?page=${page}&size=${size}`,
+    fetchJSONUnsafe,
+  );
+
+  return { items: data?.content, totalPages: data?.totalPages };
+};

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

@@ -39,7 +39,7 @@ export const Footer = JSX<FooterProps>(({ className, ...rest }) => {
       </div>
       <Contacts className="overflow-hidden" items={contacts} />
       <div className="mt-xl">
-        <SocialMedia className="mb-xl" media={socialMedia} buttonSize="stretched">
+        <SocialMedia className="mb-xl" media={socialMedia} stretched={true}>
           Соцсети
         </SocialMedia>
         <Text size="text-s" font="font-light" color="text-secondary-text">

package/mobile/src/components/Footer/FooterContent.ts

@@ -1,11 +1,7 @@
 import type { DescriptionProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
-import type { IconProps, Picture } from '../../model/Picture';
-
-export interface SocialMediaLink extends LinkProps {
-  icon?: Picture;
-}
+import type { IconProps } from '../../model/Picture';
 
 /**
  * @title Тип контакта

package/mobile/src/components/Footer/FooterDataProps.ts

@@ -1,12 +1,13 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
-import type { ContactGroup, SocialMediaLink } from './FooterContent';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
+import type { ContactGroup } from './FooterContent';
 
 export interface FooterDataProps extends SitemapData {
   documents?: LinkProps[];
   relatedEnterprises?: LinkProps[];
   contacts?: ContactGroup[];
-  socialMedia?: SocialMediaLink[];
-  mobileApps?: SocialMediaLink[];
+  socialMedia?: ButtonContent[];
+  mobileApps?: ButtonContent[];
   horizontalNavigationTitle?: string; // TODO: для мобильной версии
 }

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

@@ -1,29 +1,61 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
-import type { ButtonSize } from './MediaButton';
-import { MediaButton } from './MediaButton';
+import { findIconByHref } from './findIconByHref';
 
 export interface SocialMediaProps {
   className?: string;
   media?: ButtonContent[];
-  buttonSize?: ButtonSize;
+  showButtonText?: boolean;
+  stretched?: boolean;
 }
 
 export const SocialMedia = JSX<SocialMediaProps>(
-  ({ className = '', media, children, buttonSize }) => (
-    <div className="flex flex-col sm:flex-col-reverse gap-xs">
-      {children ? (
-        <Text size="text-s" font="font-light" color="text-secondary-text">
-          {children}
-        </Text>
-      ) : null}
-      <div className={style('flex gap-xs', className)}>
-        {media?.map((_, index) => (
-          <MediaButton key={String(index)} buttonSize={buttonSize} {..._} />
-        ))}
+  ({ className = '', media, showButtonText, stretched, children }) => {
+    const [hasText, setHasText] = useState<boolean | undefined>();
+    const buttons: ButtonContent[] | undefined = media?.map((_) => {
+      const { href, icon, text } = _;
+      const { iconMapped } = findIconByHref(href);
+      const iconCustom = getFilteredIcon(icon) ?? iconMapped;
+      const buttonText = showButtonText ? { text } : {};
+
+      if (!hasText && text) {
+        setHasText(true);
+      }
+
+      return {
+        ...buttonText,
+        icon: { ...iconCustom, iconVersion: 'color' },
+        version: 'white',
+      };
+    });
+
+    const buttonClassName = style(
+      'border border-solid hover:border-transparent group-data-primary:border-main-divider border-main-divider group-data-gray:border-green group/media',
+      showButtonText && hasText ? '' : ' basis-auto',
+      stretched ? 'flex-1 justify-center' : '',
+    );
+
+    return (
+      <div className="flex flex-col sm:flex-col-reverse gap-xs">
+        {children ? (
+          <Text size="text-s" font="font-light" color="text-secondary-text">
+            {children}
+          </Text>
+        ) : null}
+        <div className={style('flex gap-xs', className)}>
+          {renderButtonsSection(buttons, {
+            className: stretched ? 'w-full' : '',
+            buttonClassName,
+          })}
+        </div>
       </div>
-    </div>
-  ),
+    );
+  },
 );
+
+const getFilteredIcon = (icon: Picture | undefined) => (icon?.src || icon?.icon ? icon : undefined);

package/mobile/src/components/Footer/iconsMap.ts

@@ -10,36 +10,29 @@ export const ICONS_MAP: Array<IconsMapItem> = [
   {
     origins: ['t.me', 'telegram.org'],
     iconMapped: { icon: 'TelegramIcon' },
-    label: 'Телеграм',
   },
   {
     origins: ['vk.com'],
     iconMapped: { icon: 'VKIcon' },
-    label: 'ВКонтакте',
   },
   {
     origins: ['ok.ru'],
     iconMapped: { icon: 'OkIcon' },
-    label: 'Одноклассники',
   },
   {
     origins: ['apps.apple.com'],
     iconMapped: { icon: 'AppleIcon' },
-    label: 'App Store',
   },
   {
     origins: ['play.google.com'],
     iconMapped: { icon: 'PlayMarketIcon' },
-    label: 'Google Play',
   },
   {
     origins: ['youtube.com'],
     iconMapped: { icon: 'YoutubeIcon' },
-    label: 'Youtube',
   },
   {
     origins: ['rutube.ru'],
     iconMapped: { icon: 'RutubeIcon' },
-    label: 'Rutube',
   },
 ];