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

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;
   },
 );

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

@@ -1,18 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { MediaButton } from './MediaButton';
 
 export interface SocialMediaProps {
   className?: string;
   media?: Omit<LinkProps, 'text'>[];
-  version?: BlockVersion;
 }
 
-export const SocialMedia = JSX<SocialMediaProps>(({ className = '', media, version }) => (
+export const SocialMedia = JSX<SocialMediaProps>(({ className = '', media }) => (
   <div className={`flex gap-2 items-start justify-start pt-6 pb-6 ${className}`}>
     {media?.map((_, index) => (
-      <MediaButton key={String(index)} version={version} {..._} />
+      <MediaButton key={String(index)} {..._} />
     ))}
   </div>
 ));

package/src/components/Footer/SocialMedia.tsx

@@ -1,28 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import { type ButtonSize, MediaButton } from './MediaButton';
+import { MediaButton, type ButtonSize } from './MediaButton';
 
 export interface SocialMediaProps {
   className?: string;
-  media?: Omit<LinkProps, 'text'>[];
-  version?: BlockVersion;
+  media?: LinkProps[];
   isRounded?: boolean;
   buttonSize?: ButtonSize;
 }
 
 export const SocialMedia = JSX<SocialMediaProps>(
-  ({ className = '', media, version, isRounded = false, buttonSize, children }) => (
+  ({ className = '', media, isRounded = false, buttonSize, children }) => (
     <div className="font-sans">
       <div className={`flex gap-2.5 ${className}`}>
         {media?.map((_, index) => (
-          <MediaButton
-            key={String(index)}
-            version={version}
-            isRounded={isRounded}
-            buttonSize={buttonSize}
-            {..._}
-          />
+          <MediaButton key={String(index)} isRounded={isRounded} buttonSize={buttonSize} {..._} />
         ))}
       </div>
       <span className="text-s-light text-secondary-text">{children}</span>

package/src/components/Gallery/Gallery.fixture.tsx

@@ -189,7 +189,7 @@ const onlyTitleProps: GalleryProps = {
     },
     {
       title: 'Фермерские продукты',
-      icon: { icon: 'WalletIcon' },
+      icon: { icon: 'WalletIcon', iconVersion: 'white' },
       version: 'secondary',
     },
   ],

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

@@ -1,37 +1,34 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
+import { blockStyles, BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { ListItemVersion } from '../../ui-kit/List/ListProps';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
 
 export const Gallery = JSX<GalleryProps>(
-  ({ 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 ${headingClassName}`} title={title} />
-          ) : null}
-          {description ? (
-            <div className="text-m max-w-[600px] text-center mb-5">{description}</div>
-          ) : null}
-        </div>
-        {renderCardsLayout(orientation, cards)}
-      </section>
-    );
-  },
+  ({ className = '', title, description, cards = [], orientation = 'horizontal', ...rest }) => (
+    <BlockWrapper className={`relative px-4 py-6 overflow-hidden ${className}`} {...rest}>
+      <div className="flex flex-col items-center mb-5">
+        {title ? (
+          <Heading
+            headingType="h3"
+            className={`text-center ${description ? 'mb-2' : 'mb-5'}`}
+            title={title}
+          />
+        ) : null}
+        {description ? (
+          <div className="text-m max-w-[600px] text-center mb-5">{description}</div>
+        ) : null}
+      </div>
+      {renderCardsLayout(orientation, cards)}
+    </BlockWrapper>
+  ),
 );
 
 function renderCardsLayout(orientation: ListOrientation, cards: GalleryCardProps[]) {
@@ -46,7 +43,7 @@ function renderCard(card: GalleryCardProps, key: number) {
   return (
     <div
       className={`w-full h-full flex flex-col justify-between shrink-0 box-border snap-start snap-always border-solid border rounded-md border-gray p-4
-      ${VersionStyleMap[card.version ?? 'primary']}`}
+      ${blockStyles[card.version ?? 'primary']}`}
       key={key}
     >
       <div>
@@ -83,10 +80,12 @@ function renderDescription(card: GalleryCardProps) {
   );
 }
 
-const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
+const LIST_DOT_STYLE_MAP: Record<BlockVersion, string> = {
   primary: 'bg-primary-text',
   secondary: 'bg-white',
-  gray: 'bg-secondary-text',
+  gray: 'bg-primary-text',
+  transparent: '',
+  '': '',
 };
 
 function renderItems(

package/src/components/Gallery/Gallery.tsx

@@ -2,4 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import { GalleryInner } from './GalleryInner';
 import type { GalleryProps } from './GalleryProps';
 
-export const Gallery = JSX<GalleryProps>((props) => <GalleryInner {...props} version="normal" />);
+export const Gallery = JSX<GalleryProps>((props) => (
+  <GalleryInner {...props} galleryVersion="normal" />
+));

package/src/components/Gallery/GalleryCardInner.tsx

@@ -1,9 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { AlignText } from '../../model/AlignText';
-import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionAdditionalStyleMap } from '../../model/BlockVersion';
 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 { getIconWithVersion } from '../../utils/getIconWithVersion';
@@ -19,36 +18,37 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
     icon,
     items,
     button,
-    version,
     isFullWidth = true,
     isDotted = true,
     align = 'center',
+    ...rest
   }) => (
-    <div className={`h-full flex flex-col justify-between ${AlignText[align]}`}>
+    <BlockWrapper
+      className={`h-full flex flex-col justify-between ${AlignText[align]}`}
+      tag="div"
+      {...rest}
+    >
       <div className="flex flex-col h-full">
-        {renderImage(icon, version)}
+        {renderImage(icon)}
         {renderCardTitle(headlineSmallVersion, title)}
         {renderDescription(description, title)}
-        {items?.length ? renderItems(items, isDotted, version) : null}
-        {renderAdditionalDescription(additionalDescription, version)}
+        {items?.length ? renderItems(items, isDotted) : null}
+        {renderAdditionalDescription(additionalDescription)}
       </div>
-      {button?.text
-        ? renderButton({
-            button,
-            buttonClassName: `mt-6 ${isFullWidth ? '' : 'self-center'}`,
-          })
-        : null}
-    </div>
+      {renderButtonsSection([button], {
+        buttonClassName: `mt-6 ${isFullWidth ? 'w-full' : 'self-center'}`,
+      })}
+    </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-8 h-8 min-w-8 mb-5 rounded-full`}
-        image={getIconWithVersion(image, version)}
+        image={getIconWithVersion(image)}
         asSVG
       />
     ) : null}
@@ -61,23 +61,18 @@ const renderCardTitle = (headlineSmallVersion: string, title?: string) =>
 const renderDescription = (description?: string, title?: string) =>
   description ? <div className={`text-l ${title ? 'mt-2' : ''}`}>{description}</div> : null;
 
-const renderAdditionalDescription = (additionalDescription?: string, version?: BlockVersion) =>
+const renderAdditionalDescription = (additionalDescription?: string) =>
   additionalDescription ? (
-    <div className={`text-m-light mt-auto ${VersionAdditionalStyleMap[version ?? 'primary']}`}>
+    <div className={`text-m-light mt-auto group-data-primary:text-secondary-text`}>
       {additionalDescription}
     </div>
   ) : null;
 
-const renderItems = (
-  items: GalleryItemProps[],
-  isDotted: boolean,
-  version: BlockVersion = 'primary',
-) => (
+const renderItems = (items: GalleryItemProps[], isDotted: boolean) => (
   <List
-    className={`max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`}
+    className="max-w-[308px] mt-2 text-s group-data-primary:text-secondary-text"
     itemClassName="text-left"
     items={items.filter((item) => item?.text).map((item) => item.text as string)}
     isDotted={isDotted}
-    version={version}
   />
 );