@redneckz/wildless-cms-uni-blocks 0.7.1 → 0.7.3

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -1,12 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { VersionAdditionalStyleMap, VersionStyleMap } from '../../model/BlockVersion';
-import { BorderVersionStyleMap } from '../../model/BorderVersion';
 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 { Text } from '../../ui-kit/Text/Text';
-import type { TextColor } from '../../ui-kit/Text/TextProps';
 import { BaseTile } from '../BaseTile/BaseTile';
 import type {
   CardColumnsMode,
@@ -19,8 +16,8 @@ export interface CarouselInvestmentCardProps extends CarouselInvestmentCardConte
 const getItemListFontSize = (colValue?: number) => (colValue === 1 ? 'text-h6' : 'text-l');
 
 const cardColumnsModeStyleMap: Record<CardColumnsMode, string> = {
-  1: 'flex gap-y-2 flex-col',
-  2: 'flex gap-y-2 gap-x-10 flex-wrap',
+  1: 'flex-col',
+  2: 'gap-x-10 flex-wrap',
 };
 
 export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
@@ -32,7 +29,6 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
     description,
     image,
     title,
-    version = 'primary',
     ...rest
   }) => {
     const tileTitle = title ? (
@@ -46,9 +42,8 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
     return (
       <BlockWrapper
         className={[
-          'relative text-left border border-solid box-border p-9 w-[697px]',
-          VersionStyleMap[version],
-          BorderVersionStyleMap[version],
+          'relative box-border text-left p-9 w-[697px]',
+          'border border-solid border-gray group-data-secondary:border-white/50',
           className,
         ].join(' ')}
         {...rest}
@@ -61,17 +56,15 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
               </div>
             ) : null}
             {additionalDescription ? (
-              <Text
-                size="text-m"
-                font="font-light"
-                color={VersionAdditionalStyleMap[version] as TextColor}
-              >
+              <Text size="text-m" font="font-light" color="group-data-primary:text-secondary-text">
                 {additionalDescription}
               </Text>
             ) : null}
           </div>
           {cardsList.length ? (
-            <ul className={`list-none m-0 p-0 ${cardColumnsModeStyleMap[columnsMode]}`}>
+            <ul
+              className={`list-none m-0 p-0 flex gap-y-2 ${cardColumnsModeStyleMap[columnsMode]}`}
+            >
               {renderCardList(cardsList, columnsMode)}
             </ul>
           ) : null}

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -13,20 +13,28 @@ export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps
 const MAX_LINKS_COUNT = 12;
 
 export const CarouselLinks = JSX<CarouselLinksProps>(
-  ({ className = '', additionalDescription, description, links, title, ...rest }) => {
+  ({
+    className = '',
+    additionalDescription,
+    description,
+    links,
+    title,
+    version = 'secondary',
+    ...rest
+  }) => {
     return (
       <BlockWrapper
-        className={`bg-primary-main flex w-full p-10 overflow-hidden justify-between font-sans ${className}`}
+        className={`flex w-full p-10 overflow-hidden justify-between ${className}`}
+        version={version}
         {...rest}
       >
         <div className="flex flex-col max-w-96 pr-9 text-white text-xl-light">
           <Headline
+            className="p-0"
             title={title}
-            as="h1"
             description={description}
+            as="h1"
             align="text-left"
-            className="p-0"
-            bgColorHeadline="secondary"
           />
           {additionalDescription ? (
             <div className="pt-6">
@@ -45,6 +53,7 @@ const renderLinks = (links: LinkProps[]) => {
 
   return (
     <Carousel
+      version=""
       className="min-w-[832px] w-[832px]"
       isBlur={false}
       isCyclic={true}

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -1,29 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { AlignText } from '../../model/AlignText';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
-import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import { style } from '../../utils/style';
 import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
 import type { CarouselProductCardContent, ListProps } from './CarouselProductCardContent';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}
 
-const descriptionStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-secondary-text',
-  secondary: 'text-white/80',
-};
-
-const BORDER_STYLE = 'box-border border-solid border border-gray ';
-
 export const CarouselProductCard = JSX<CarouselProductCardProps>(
   ({
+    className = '',
     title,
     headlineSmallVersion = 'H6',
     description,
@@ -33,40 +26,39 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
     button = {},
     version = 'primary',
     isDotted = true,
-    align = 'center',
+    align = 'text-center',
+    ...rest
   }) => {
     return (
-      <section
-        className={[
+      <BlockWrapper
+        className={style(
           'flex flex-col justify-between items-stretch min-w-[260px] h-full w-full p-6',
-          BORDER_STYLE,
-          AlignText[align],
-          VersionStyleMap[version],
-        ].join(' ')}
+          'box-border border-solid border border-gray',
+          align,
+          className,
+        )}
         role="listitem"
+        version={version}
+        {...rest}
       >
         <div className="flex flex-col h-full">
-          {renderImage(icon, version)}
+          {renderImage(icon)}
           {renderCardTitle(headlineSmallVersion, title)}
           {renderDescription(description, title)}
           {renderItems(items, isDotted, version)}
-          {renderAdditionalDescription(additionalDescription, version)}
+          {renderAdditionalDescription(additionalDescription)}
         </div>
-        {renderButton({ button, buttonClassName: 'mt-6' })}
-      </section>
+        {renderButtonsSection([button], { buttonClassName: 'mt-6 w-full' })}
+      </BlockWrapper>
     );
   },
 );
 
-const renderImage = (image?: Picture, version?: BlockVersion) => (
+const renderImage = (image?: Picture) => (
   <div className="flex justify-center">
     {image?.src ? <Img className="mb-5" image={image} /> : null}
     {image?.icon ? (
-      <Img
-        className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`}
-        image={getIconWithVersion(image, version)}
-        asSVG
-      />
+      <Img className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`} image={image} asSVG />
     ) : null}
   </div>
 );
@@ -81,10 +73,14 @@ const renderDescription = (description?: string, title?: string) =>
     </div>
   ) : null;
 
-const renderAdditionalDescription = (additionalDescription?: string, version = 'primary') =>
+const renderAdditionalDescription = (additionalDescription?: string) =>
   additionalDescription ? (
     <div className="mt-auto">
-      <Text size="text-m" font="font-light" color={descriptionStyleMap[version]}>
+      <Text
+        size="text-m"
+        font="font-light"
+        color="text-secondary-text group-data-secondary:text-white/80"
+      >
         {additionalDescription}
       </Text>
     </div>
@@ -97,6 +93,5 @@ const renderItems = (items: ListProps[], isDotted: boolean, version: BlockVersio
       itemClassName="text-left"
       items={items.filter((item) => item?.text).map((item) => item.text as string)}
       isDotted={isDotted}
-      version={version}
     />
   ) : null;

package/src/components/CarouselProductCard/CarouselProductCardContent.ts

@@ -1,8 +1,8 @@
-import type { AlignType } from '../../model/AlignType';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineSmallProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 /**
  * @title Элемент списка
@@ -45,7 +45,7 @@ export type CarouselProductCardContent = HeadlineSmallProps & {
   version?: BlockVersion;
   /**
    * @title Выравнивание
-   * @default center
+   * @default text-center
    */
-  align?: AlignType;
+  align?: TextAlign;
 };

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -11,11 +10,8 @@ import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent'
 export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, UniBlockProps {}
 
 export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
-  ({ className = '', title, icon, list = [], version = 'primary', ...rest }) => (
-    <BlockWrapper
-      className={`font-sans border border-gray flex min-w-[536px] ${VersionStyleMap[version]} ${className}`}
-      {...rest}
-    >
+  ({ className = '', title, icon, list = [], ...rest }) => (
+    <BlockWrapper className={`border border-gray flex min-w-[536px] ${className}`} {...rest}>
       <div className="w-[200px] min-w-[200px] self-center">
         {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
         {icon?.src ? <Img image={icon} /> : null}

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -1,17 +1,14 @@
-import { BaseTile } from '../BaseTile/BaseTile';
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { BorderVersionStyleMap } from '../../model/BorderVersion';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { JSX } from '@redneckz/uni-jsx';
 import { List } from '../../ui-kit/List/List';
-import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { BaseTile } from '../BaseTile/BaseTile';
 import { SocialMedia } from '../Footer/SocialMedia';
-import type { BlockVersion, BlockVersionWithGray } from '../../model/BlockVersion';
-import { VersionWithGrayStyleMap } from '../../model/BlockVersion';
-
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
-import type { UniBlockProps } from '../../model/JSXBlock';
+import { style } from '../../utils/style';
 
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
 
@@ -24,7 +21,6 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     items = [],
     socialMedia = [],
     title,
-    version = 'primary',
     ...rest
   }) => {
     const tileTitle = title ? (
@@ -33,13 +29,16 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     const tileImage = image?.src ? (
       <Img className="absolute bottom-0 right-0 m-0" image={image} />
     ) : null;
+    const BORDER_STYLE =
+      'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
 
     return (
       <BlockWrapper
-        className={`relative text-left border border-solid box-border p-7 min-w-[524px]
-        ${BorderVersionStyleMap[getOmitVersion(version)]}
-        ${VersionWithGrayStyleMap[version]}
-        ${className}`}
+        className={style(
+          'relative p-7 min-w-[524px] text-left box-border group-data-gray:bg-main-divider/50',
+          BORDER_STYLE,
+          className,
+        )}
         {...rest}
       >
         <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
@@ -49,23 +48,13 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
               <List
                 className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
                 items={items}
-                version={version}
               />
             ) : null}
-            {socialMedia.length ? (
-              <SocialMedia
-                className="pt-10 pb-0"
-                media={socialMedia}
-                version={getOmitVersion(version)}
-              />
-            ) : null}
-            {button?.text ? <div className="pt-2 mt-16">{renderButton({ button })}</div> : null}
+            {socialMedia.length ? <SocialMedia className="pt-10 pb-0" media={socialMedia} /> : null}
+            {renderButtonsSection([button], { className: 'pt-2 mt-16' })}
           </div>
         </BaseTile>
       </BlockWrapper>
     );
   },
 );
-
-const getOmitVersion = (version: BlockVersionWithGray): BlockVersion =>
-  version === 'gray' ? 'primary' : version;

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -1,4 +1,3 @@
-import type { BlockVersionWithGray } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
@@ -41,5 +40,4 @@ export interface CarouselRecommendationCardContent extends HeadlineCommonProps,
    * }
    */
   button?: ButtonProps;
-  version?: BlockVersionWithGray;
 }

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,19 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
+import type { VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
+import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import { style } from '../../utils/style';
 import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
-import type { Picture } from '../../model/Picture';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { VNode } from '../../model/VNode';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
@@ -27,16 +28,16 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 
     return (
       <BlockWrapper
-        className={`font-sans relative bg-white border border-gray min-w-[322px] p-8 flex flex-col
-        ${getHitStyle(isHighlighting)}
-        ${className}`}
+        className={style(
+          'relative border border-gray min-w-[322px] p-8 flex flex-col',
+          getHitStyle(isHighlighting),
+          className,
+        )}
         {...rest}
       >
         {isHighlighting ? renderHitIcon() : null}
         {renderIconBlock(icon)}
-        {title ? (
-          <Heading className="text-primary-text text-center pt-2" headingType="h5" title={title} />
-        ) : null}
+        {title ? <Heading className="text-center pt-2" headingType="h5" title={title} /> : null}
         {button ? <Button className="w-full mt-4" {...button} /> : null}
         {cardCells.length ? (
           <Foldable

package/src/components/Catalog/Catalog.tsx

@@ -21,10 +21,7 @@ export const Catalog = JSX<CatalogProps>(
     });
 
     return (
-      <BlockWrapper
-        className={`bg-white relative font-sans p-12 overflow-hidden text-center ${className}`}
-        {...rest}
-      >
+      <BlockWrapper className={`p-12 overflow-hidden text-center ${className}`} {...rest}>
         <Headline
           className="!p-0"
           title={title}

package/src/components/Catalog/CatalogCard.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
-import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { CatalogCardType } from './CatalogContent';
@@ -34,7 +34,7 @@ export const CatalogCard = JSX<CatalogCardProps>(
         </div>
       ) : null}
       {price ? <div className="text-h3 text-left">{price}&nbsp;₽</div> : null}
-      {button ? renderButton({ button, buttonClassName: 'mt-5 w-full' }) : null}
+      {renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })}
     </section>
   ),
 );

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -23,10 +23,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     const handleToggle = useCallback(() => setIsShowAllRow((_) => !_), []);
 
     return (
-      <BlockWrapper
-        className={`bg-white font-sans py-12 pl-12 overflow-hidden text-primary-text relative ${className}`}
-        {...rest}
-      >
+      <BlockWrapper className={`py-12 pl-12 overflow-hidden relative ${className}`} {...rest}>
         <Heading
           headingType="h2"
           className="max-w-[47rem] text-center mb-9 mx-auto"

package/src/components/ContactsBlock/ContactsBlock.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
@@ -18,20 +17,20 @@ interface RenderContactsColumnProps {
 
 export const ContactsBlock = JSX<ContactsBlockProps>(
   ({ className = '', contacts, info, version = 'secondary', ...rest }) => (
-    <BlockWrapper className={`${VersionStyleMap[version]} flex p-12 ${className}`} {...rest}>
-      {info?.length ? renderBlocks(info, version) : null}
-      {contacts?.length ? renderBlocks(contacts, version) : null}
+    <BlockWrapper className={`flex p-12 ${className}`} version={version} {...rest}>
+      {info?.length ? renderBlocks(info) : null}
+      {contacts?.length ? renderBlocks(contacts) : null}
     </BlockWrapper>
   ),
 );
 
-const renderBlocks = (info: ContactBlockProps[][], version?: BlockVersion) => (
+const renderBlocks = (info: ContactBlockProps[][]) => (
   <div className="flex grow basis-0">
-    {info.map((column, index) => renderBlocksColumn({ column, index, version }))}
+    {info.map((column, index) => renderBlocksColumn({ column, index }))}
   </div>
 );
 
-const renderBlocksColumn = ({ column, index, version }: RenderContactsColumnProps) =>
+const renderBlocksColumn = ({ column, index }: RenderContactsColumnProps) =>
   column ? (
     <div className="flex flex-col grow basis-0 pr-11 last:pr-0" key={`col-${String(index)}`}>
       {column.map(({ title = '', description, additionalDescription, button }, key) => (
@@ -42,11 +41,12 @@ const renderBlocksColumn = ({ column, index, version }: RenderContactsColumnProp
             description={description}
             headlineVersion="XS"
             align="text-left"
-            bgColorHeadline={version}
           />
           {additionalDescription ? (
             <div className="mt-1.5 opacity-80">
-              <Paragraph size="text-m-light">{additionalDescription}</Paragraph>
+              <Paragraph size="text-m" font="font-light">
+                {additionalDescription}
+              </Paragraph>
             </div>
           ) : null}
           {button ? <Button className="mt-6" {...button} /> : null}

package/src/components/ContentPage/ContentPage.tsx

@@ -6,7 +6,7 @@ import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { ContentPageDef } from '../../model/ContentPageDef';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { useBlockRouterProvider } from '../../services/BlockRouter/useBlockRouterProvider';
-import { style2className } from '../../utils/style2className';
+import { style } from '../../utils/style';
 import { LikeControl } from '../LikeControl/LikeControl';
 
 interface ContentPageProps extends UniBlockProps {
@@ -31,10 +31,7 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>((pr
   useBlockRouterProvider();
 
   return (
-    <section
-      className={`relative ${style2className(pageStyle)} ${className}`}
-      data-theme={colorPalette}
-    >
+    <section className={style('relative', pageStyle, className)} data-theme={colorPalette}>
       {slots?.header ? (
         <div className="mb-5 shadow-[0_8px_32px_0px_#00000014]">
           {renderBlocksList(slots?.header, {

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -25,10 +25,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
     currencyRatesSell.push({ currency: { currency: Currency.RUB } });
 
     return (
-      <BlockWrapper
-        className={`bg-white text-primary-text font-sans p-9 box-border min-h-80 ${className}`}
-        {...rest}
-      >
+      <BlockWrapper className={`p-9 box-border min-h-80 ${className}`} {...rest}>
         <BaseTile
           title={
             <Heading headingType="h4" title={title} className="whitespace-pre-wrap text-h4 mb-5" />

package/src/components/Footer/Footer.tsx

@@ -17,14 +17,14 @@ const LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
 
 export interface FooterProps extends FooterContent, UniBlockProps {}
 
-export const Footer = JSX<FooterProps>(({ className, ...rest }) => {
+export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
   const fallback = rest.options?.page?.fallback;
 
   const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems, logo } =
     useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
 
   return (
-    <BlockWrapper tag="footer" className={`p-9 bg-white font-sans ${className || ''}`} {...rest}>
+    <BlockWrapper tag="footer" className={`p-9 ${className}`} {...rest}>
       <div className="flex items-stretch gap-[54px] pb-[30px] xl:gap-8">
         <Logo className={LEFT_COL_WIDTH_FULL_HD} logo={logo} />
         <SearchBar className="grow" />

package/src/components/Footer/MediaButton.tsx

@@ -1,9 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { BlockVersion } from '../../model/BlockVersion';
-import type { Picture } from '../../model/Picture';
 import { Img } from '../../ui-kit/Img/Img';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import { style } from '../../utils/style';
+import type { Picture } from '../../model/Picture';
+import type { IconVersion } from '../../model/IconVersion';
 
 const ICONS_MAP: Array<{
   origins: string[];
@@ -35,61 +36,62 @@ const ICONS_MAP: Array<{
     icon: { icon: 'PlayMarketIcon' },
     label: 'Google Play',
   },
+  {
+    origins: ['youtube.com'],
+    icon: { icon: 'YoutubeIcon' },
+    label: 'Youtube',
+  },
 ];
 
 export type ButtonSize = 'default' | 'small';
 
 interface MediaButtonProps {
   href?: string;
-  version?: BlockVersion;
   isRounded?: boolean;
   buttonSize?: ButtonSize;
+  iconVersion?: IconVersion;
 }
 
-const BUTTON_SIZE = {
-  default: ' w-14 h-14',
-  small: ' w-12 h-12',
+const buttonSizeStyles = {
+  default: 'w-14 h-14',
+  small: 'w-12 h-12',
 };
 
 export const MediaButton = JSX<MediaButtonProps>(
-  ({ version = 'primary', isRounded = false, buttonSize = 'default', ...rest }) => {
+  ({ isRounded = false, buttonSize = 'default', iconVersion = 'color', ...rest }) => {
     const link = useLink();
     const { href, onClick } = link(rest);
 
     const { icon, label } =
       ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
+    const iconWithVersion = icon ? { ...getIconWithVersion(icon), iconVersion } : null;
 
-    if (!icon) {
-      return null;
-    }
-
-    const classes =
-      version === 'secondary'
-        ? 'bg-white hover:bg-secondary-hover'
-        : 'border-solid border border-main-divider hover:border-transparent hover:bg-primary-main';
-
-    const isPrimary = version === 'primary' ? 'hover:text-black' : '';
-    const rounded = isRounded ? 'rounded-full' : 'rounded-md';
-
-    return (
+    return icon ? (
       <a
-        className={`flex items-center justify-center group box-border ${classes} ${rounded} ${isPrimary} ${BUTTON_SIZE[buttonSize]}`}
+        className={style(
+          'group/media flex items-center justify-center box-border',
+          buttonSizeStyles[buttonSize],
+          isRounded ? 'rounded-full' : 'rounded-md',
+          'border-solid border border-main-divider hover:border-transparent',
+          'hover:bg-primary-main hover:text-black',
+          'group-data-secondary:bg-white group-data-secondary:hover:bg-secondary-hover',
+        )}
         href={href}
         aria-label={label}
         target="_blank"
         rel="noopener noreferrer"
         onClick={onClick}
       >
-        {icon ? (
+        {iconWithVersion ? (
           <Img
-            image={getIconWithVersion(icon)}
-            imageClassName="group-hover:text-white"
+            image={iconWithVersion}
+            imageClassName="group-hover/media:text-white"
             width="24"
             height="24"
             asSVG
           />
         ) : null}
       </a>
-    );
+    ) : null;
   },
 );