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

package/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/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/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/src/components/Carousel/Carousel.fixture.tsx

@@ -6,7 +6,6 @@ import { Blocks } from '../Blocks';
 import { BANK_HISTORY_CARD } from '../CarouselBankHistoryCard/CarouselBankHistoryCard.fixture';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
 import { CATALOG_CARD, CATALOG_CARD_NEW } from '../CarouselCatalogCard/CarouselCatalogCard.fixture';
-import { CAROUSEL_EVENT_CARD } from '../CarouselEventCard/CarouselEventCard.fixture';
 import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
 import {
   PRODUCT_CARD,
@@ -228,23 +227,6 @@ export default {
       />
     </div>
   ),
-
-  events: (
-    <div className="container grid grid-cols-12">
-      <Carousel
-        className="col-span-12"
-        visibleItemCount={0}
-        block={{
-          type: 'Carousel',
-          blocks: new Array(6).fill({
-            type: 'CarouselEventCard',
-            content: CAROUSEL_EVENT_CARD,
-          }),
-        }}
-        options={options}
-      />
-    </div>
-  ),
   'bank-history': (
     <div className="container grid grid-cols-12">
       <Carousel

package/src/components/Carousel/Carousel.tsx

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

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

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

package/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/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/src/components/CarouselProductCard/CarouselProductCard.fixture.mobile.tsx

@@ -0,0 +1,92 @@
+import '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
+import { CarouselProductCard } from './CarouselProductCard';
+import type { CarouselProductCardContent } from './CarouselProductCardContent';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
+
+const isDotted = false;
+
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+  size: {
+    width: 140,
+    height: 140,
+  },
+  title: 'money',
+};
+
+const buttonPrimary: ButtonContent = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'secondary',
+};
+
+const buttonPrimaryIcon: ButtonContent = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'secondary',
+  icon: { icon: 'BankIcon' },
+};
+
+const defaultItems = [
+  { text: 'Качественные фермерские продукты напрямую от производителей' },
+  { text: 'Самая большая база сельских туров по России' },
+  { text: 'Площадки для создания комфортной жизни за городом' },
+];
+
+export const PRODUCT_CARD: CarouselProductCardContent = {
+  title: 'Более 5000 товаров',
+  description: 'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+  icon: image,
+  button: buttonPrimary,
+  isDotted,
+  items: defaultItems,
+  isImageFullWidth: true,
+  additionalDescription: 'Дополнительное описание',
+};
+
+export const PRODUCT_CARD_SMALL: CarouselProductCardContent = {
+  title: 'Более 5000 товаров Более 5000 товаров Более 5000 товаров',
+  icon: image,
+  button: buttonPrimary,
+  isDotted,
+  isButtonFullWidth: true,
+};
+export const PRODUCT_CARD_EVENT: CarouselProductCardContent = {
+  title: 'Более 5000 товаров',
+  icon: image,
+  isDotted,
+  additionalDescription: 'Дополнительное описание',
+  isTopPosition: true,
+  isImageFullWidth: true,
+};
+
+const CAROUSEL_PRODUCT_CARD = <CarouselProductCard className="col-span-12" {...PRODUCT_CARD} />;
+const CAROUSEL_PRODUCT_CARD_SECONDARY = (
+  <CarouselProductCard
+    className="col-span-12"
+    {...PRODUCT_CARD}
+    version="secondary"
+    isDotted={true}
+    button={buttonPrimaryIcon}
+    isButtonFullWidth={true}
+  />
+);
+const CAROUSEL_PRODUCT_CARD_SMALL = (
+  <CarouselProductCard className="col-span-12" {...PRODUCT_CARD_SMALL} />
+);
+
+const CAROUSEL_PRODUCT_CARD_EVENT = (
+  <CarouselProductCard className="col-span-12" {...PRODUCT_CARD_EVENT} />
+);
+
+export default {
+  default: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD}</div>,
+  secondary: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD_SECONDARY}</div>,
+  small: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD_SMALL}</div>,
+  event: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD_EVENT}</div>,
+};

package/src/components/CarouselProductCard/CarouselProductCard.fixture.tsx

@@ -54,9 +54,21 @@ export const PRODUCT_CARD_SMALL: CarouselProductCardContent = {
   button: buttonPrimary,
   isDotted,
   isButtonFullWidth: false,
+  align: 'text-left',
+};
+
+export const PRODUCT_CARD_EVENT: CarouselProductCardContent = {
+  title: 'Более 5000 товаров',
+  icon: image,
+  isDotted,
+  additionalDescription: 'Дополнительное описание',
+  align: 'text-left',
+  isTopPosition: true,
+  isImageFullWidth: true,
 };
 
 const CAROUSEL_PRODUCT_CARD = <CarouselProductCard className="col-span-4" {...PRODUCT_CARD} />;
+
 const CAROUSEL_PRODUCT_CARD_SECONDARY = (
   <CarouselProductCard
     className="col-span-4"
@@ -67,12 +79,18 @@ const CAROUSEL_PRODUCT_CARD_SECONDARY = (
     isButtonFullWidth={false}
   />
 );
+
 const CAROUSEL_PRODUCT_CARD_SMALL = (
   <CarouselProductCard className="col-span-4" {...PRODUCT_CARD_SMALL} />
 );
 
+const CAROUSEL_PRODUCT_CARD_EVENT = (
+  <CarouselProductCard className="col-span-4" {...PRODUCT_CARD_EVENT} />
+);
+
 export default {
   default: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD}</div>,
   secondary: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD_SECONDARY}</div>,
   small: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD_SMALL}</div>,
+  event: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD_EVENT}</div>,
 };

package/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/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/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.mobile.tsx

@@ -1,9 +1,9 @@
 import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
-import type { SocialMediaLink } from '../Footer/FooterContent';
-import { CarouselRecommendationCard } from './CarouselRecommendationCard';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
+import { CarouselRecommendationCard } from './CarouselRecommendationCard';
 
 const icon: Picture = {
   src: 'product-basket.png',
@@ -15,7 +15,7 @@ const icon: Picture = {
   title: 'product-basket',
 };
 
-const socialMediaWithText: SocialMediaLink[] = [
+const socialMediaWithText: ButtonContent[] = [
   {
     href: 'https://t.me',
     text: 'Telegram',
@@ -30,7 +30,7 @@ const socialMediaWithText: SocialMediaLink[] = [
   },
 ];
 
-const socialMediaWithoutText: SocialMediaLink[] = [
+const socialMediaWithoutText: ButtonContent[] = [
   {
     href: 'https://t.me',
   },

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.tsx

@@ -1,9 +1,9 @@
 import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
-import type { SocialMediaLink } from '../Footer/FooterContent';
-import { CarouselRecommendationCard } from './CarouselRecommendationCard';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
+import { CarouselRecommendationCard } from './CarouselRecommendationCard';
 
 const icon: Picture = {
   src: 'product-basket.png',
@@ -15,22 +15,22 @@ const icon: Picture = {
   title: 'product-basket',
 };
 
-const socialMediaWithText: SocialMediaLink[] = [
+const socialMediaWithText: ButtonContent[] = [
   {
     href: 'https://t.me',
-    text: 'Telegram',
+    text: 'Телеграм',
   },
   {
     href: 'https://vk.com',
-    text: 'Telegram',
+    text: 'ВКонтакте',
   },
   {
     href: 'https://ok.ru',
-    text: 'Telegram',
+    text: 'Одноклассники',
   },
 ];
 
-const socialMediaWithoutText: SocialMediaLink[] = [
+const socialMediaWithoutText: ButtonContent[] = [
   {
     href: 'https://t.me',
   },

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.mobile.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/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -51,7 +51,9 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
               ) : null
             }
             backImage={icon?.icon || icon?.src ? <Img image={icon} /> : null}
-            buttons={socialMedia.length ? <SocialMedia media={socialMedia} /> : null}
+            buttons={
+              socialMedia.length ? <SocialMedia media={socialMedia} showButtonText={true} /> : null
+            }
           >
             {items.length ? <List items={items} listItemSize={listItemSize} /> : null}
           </BaseTile>

package/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/src/components/Footer/Footer.mobile.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/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/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/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);