@redneckz/wildless-cms-uni-blocks 0.12.4 → 0.12.6

package/mobile/src/components/ProductGallery/ProductGallery.tsx

@@ -8,20 +8,22 @@ import type { ProductGalleryContent } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
-export const ProductGallery = JSX<ProductGalleryProps>(({ className, slides = [], ...rest }) => (
-  <BlockWrapper
-    className={style('overflow-hidden relative', className)}
-    defaultPadding="p-m"
-    {...rest}
-  >
-    <SwipeListControl gap={0} padding={0}>
-      {slides
-        .map((s) => s.productBlock)
-        .map((_, i) => (
-          <div key={String(i)} className="box-border h-full" role="listitem">
-            <BaseProductTile className="px-5 h-full" headlineVersion="L" {..._} {...rest} />
-          </div>
-        ))}
-    </SwipeListControl>
-  </BlockWrapper>
-));
+export const ProductGallery = JSX<ProductGalleryProps>(
+  ({ className, padding, slides = [], ...rest }) => (
+    <BlockWrapper
+      className={style('overflow-hidden relative', className)}
+      padding={padding}
+      {...rest}
+    >
+      <SwipeListControl gap={0} padding={0}>
+        {slides
+          .map((s) => s.productBlock)
+          .map((_, i) => (
+            <div key={String(i)} className="box-border h-full" role="listitem">
+              <BaseProductTile className="px-5 h-full" headlineVersion="L" {..._} {...rest} />
+            </div>
+          ))}
+      </SwipeListControl>
+    </BlockWrapper>
+  ),
+);

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

@@ -7,19 +7,10 @@
       "format": "webp",
       "size": {
         "width": 242
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 145
-          },
-          "format": "webp",
-          "alignment": "southeast"
-        }
-      ]
+      }
     },
     "version": "primary",
+    "isTabularBenefits": true,
     "benefits": [
       {
         "type": "default",
@@ -43,6 +34,10 @@
         "version": "primary"
       }
     ],
-    "isImageOnRightSide": true
+    "imageOptions": {
+      "directionRight": true,
+      "imageAlign": "end",
+      "isBackground": true
+    }
   }
 }

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -1,73 +1,38 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
+import { BaseProductTile } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { style } from '../../utils/style';
-import { Headline } from '../Headline/Headline';
-import type { Benefit, ProductTileContent } from './ProductTileContent';
-import { renderAdditionalDescription } from './renderAdditionalDescription';
-import { renderBenefit } from './renderBenefit';
-import { renderImage } from './renderImage';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import type { ProductTileContent } from './ProductTileContent';
 
 export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 
 export const ProductTile = JSX<ProductTileProps>(
   ({
-    className = '',
-    title,
+    className,
+    padding,
     headlineVersion = 'S',
-    description,
+    isTabularBenefits = true,
     additionalDescription,
-    benefits = [],
-    buttons,
-    image,
-    directionRight = true,
+    imageOptions,
     ...rest
   }) => (
-    <BlockWrapper
-      className={style(
-        'overflow-hidden box-border relative min-h-[364px] flex flex-col justify-between',
-        className,
-      )}
-      {...rest}
-    >
-      <div className={style('flex flex-col', directionRight ? '' : 'items-end')}>
-        <Headline
-          className={style('!p-0 !bg-transparent z-10', title || description ? 'mb-3.5' : '')}
-          title={title}
-          description={description}
-          headlineVersion={headlineVersion}
-          as="h2"
-          align="text-left"
-        />
-        {renderBenefits(benefits, image)}
-        {renderAdditionalDescription(additionalDescription, image)}
-      </div>
-      {renderButtonsSection(buttons, {
-        className: style('mt-5 text-l', directionRight ? '' : 'justify-end'),
-      })}
-      {renderImage(image, directionRight)}
+    <BlockWrapper className={className} padding="p-0" {...rest}>
+      <BaseProductTile
+        className="h-full"
+        defaultPadding="p-m"
+        padding={padding}
+        headlineVersion={headlineVersion}
+        isTabularBenefits={isTabularBenefits}
+        imageOptions={{ isBackground: true, ...imageOptions }}
+        {...rest}
+      >
+        {additionalDescription ? (
+          <Paragraph size="text-m" font="font-light" color="group-data-primary:text-secondary-text">
+            {additionalDescription}
+          </Paragraph>
+        ) : null}
+      </BaseProductTile>
     </BlockWrapper>
   ),
 );
-
-function renderBenefits(benefits: Benefit[], image?: Picture) {
-  if (!benefits.length) {
-    return null;
-  }
-
-  // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
-  const benefitsWidth = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
-
-  return (
-    <div
-      className={style(
-        'z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline',
-        benefitsWidth,
-      )}
-    >
-      {benefits.length ? benefits.map(renderBenefit) : null}
-    </div>
-  );
-}

package/mobile/src/components/ProductTile/ProductTileContent.ts

@@ -1,41 +1,10 @@
-import type { DefaultListItemType } from '../../model/DefaultListItemType';
-import type {
-  AdditionalDescriptionProps,
-  DescriptionProps,
-  HeadlineProps,
-  LabelProps,
-} from '../../model/HeadlineType';
+import type { AdditionalDescriptionProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { RichTextItem } from '../../model/RichTextItem';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-
-/**
- * @title Стандартный
- */
-type TextBenefit = DescriptionProps & LabelProps & DefaultListItemType;
-
-/**
- * @title Преимущество
- * @default{
- *  "type": "default"
- * }
- */
-export type Benefit = TextBenefit | RichTextItem;
+import { BaseProductTileContent } from '../../ui-kit/BaseProductTile/BaseProductTileContent';
 
 /**
  * @title Продуктовая плитка
  */
 export type ProductTileContent = UniBlockContent &
-  HeadlineProps &
-  AdditionalDescriptionProps &
-  ButtonContent &
-  ImageContent & {
-    /**
-     * @title Преимущества
-     * @maxItems 7
-     */
-    benefits?: Benefit[];
-    /** @title Картинка справа/текст слева */
-    directionRight?: boolean;
-  };
+  BaseProductTileContent &
+  AdditionalDescriptionProps;

package/mobile/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -30,9 +30,9 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
     ...rest
   }) => (
     <BlockWrapper className={style('box-border text-left', className)} version={version} {...rest}>
-      <div className="w-full flex justify-between">
-        {title ? <Heading headingType="h4" as="h3" className="mb-6" title={title} /> : null}
+      <div className="w-full sm:flex sm:justify-between sm:flex-row-reverse">
         {renderIconBlock(icon)}
+        {title ? <Heading headingType="h4" as="h3" className="mb-3 sm:mb-6" title={title} /> : null}
       </div>
       <div className="w-full">
         {__html ? renderDescriptionBlock(__html) : null}
@@ -50,7 +50,7 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
 );
 
 const renderIconBlock = (icon?: Picture) => (
-  <div className="self-end">
+  <div className={'w-10 h-7 sm:w-24 sm:h-16 mb-3 sm:mb-0 sm:mt-3'}>
     {icon?.src ? <Img image={icon} /> : null}
     {icon?.icon ? <Img image={icon} /> : null}
   </div>

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import type { SizeVersion } from '../../model/SizeVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -8,63 +7,71 @@ import { Img } from '../../ui-kit/Img/Img';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 import { checkCanRenderIcon } from './checkCanRenderIcon';
-import type { DefaultStep, Step, StepsBlockContent } from './StepsBlockContent';
+import type { DefaultStep, Step } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
+import { style } from '../../utils/style';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { StepsBlockContent } from './StepsBlockContent';
+import { UniBlockProps } from '../../model/JSXBlock';
 
-export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
+type StepIconVersion = Record<'icon' | 'image', string>;
 
-const STEPS_SIZE_MAP: Record<SizeVersion, string> = {
-  normal: 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]',
-  small: 'h-12 w-12 min-w-12 min-h-12',
+const STEPS_SIZE_MAP: Record<SizeVersion, StepIconVersion> = {
+  normal: { icon: 'h-11 w-11', image: 'h-14 w-14' },
+  small: { icon: 'h-12 w-12', image: 'h-14 w-14' },
 };
 
 const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
-  normal: 'min-h-[70px]',
+  normal: '',
   small: 'min-h-12',
 };
 
 const styleMap = STEPS_BLOCK_STYLE;
 
+export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
+
 export const StepsBlock = JSX<StepsBlockProps>(
   ({
     className = '',
     title,
     description,
-    showLines = true,
     steps,
+    buttons,
     size = 'normal',
     version = 'primary',
     ...rest
   }) => (
     <BlockWrapper
-      className={`box-border flex flex-col ${className}`}
-      defaultPadding="px-4 py-6"
+      className={style('box-border flex flex-col gap-2', className)}
+      defaultPadding="p-default"
       version={version}
       {...rest}
     >
-      {title ? <Heading headingType="h3" className="text-center" title={title} /> : null}
+      {title ? <Heading headingType="h3" className="text-left" title={title} /> : null}
       {description ? (
-        <p className={`text-m-light text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
-          {description}
-        </p>
+        <Paragraph size="text-xl" font="font-light">
+          <span className={styleMap.description}>{description}</span>
+        </Paragraph>
       ) : null}
       {steps?.length ? (
-        <div className={`box-border py-0.5 mb-0.5 mt-5`}>
-          <div className="flex flex-col justify-between gap-x-[101px]">
-            {steps.map(renderStep(size, version, showLines))}
+        <div className="box-border">
+          <div className="flex flex-col justify-between">
+            {steps.map(renderStep(size, version))}
           </div>
         </div>
       ) : null}
+      {renderButtonsSection(buttons, { className: 'mt-3', isVertical: true })}
     </BlockWrapper>
   ),
 );
 
 // TODO: Create universal function for this case
 const renderStep =
-  (size: SizeVersion, version: BlockVersion, showLines: boolean) =>
+  (size: SizeVersion, version: BlockVersion) =>
   // Linter doesn't understand that switch processes all cases
   // eslint-disable-next-line consistent-return
-  (step: Step, i: number, steps: Step[]) => {
+  (step: Step, i: number) => {
     const { type } = step;
 
     if (!(type === 'default' || type === 'rte')) {
@@ -73,7 +80,7 @@ const renderStep =
 
     switch (type) {
       case 'default':
-        return renderDefaultStep(size, version, showLines)(step, i, steps);
+        return renderDefaultStep(size, version)(step, i);
       case 'rte':
         return <RichText __html={step.__html} />;
       default:
@@ -82,52 +89,46 @@ const renderStep =
   };
 
 const renderDefaultStep =
-  (size: SizeVersion, version: BlockVersion, showLines: boolean) =>
-  (step: DefaultStep, i: number, steps: Step[]) => {
-    const isLastStep = steps.length - 1 === i;
-    const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
-
-    return (
-      <div key={String(i)}>
-        <div className="flex flex-row text-center relative">
-          <div className="overflow-hidden flex-shrink-0">
+  (size: SizeVersion, version: BlockVersion) => (step: DefaultStep, i: number) =>
+    (
+      <div key={String(i)} className="contents">
+        <div className="flex flex-row text-center relative py-3">
+          <div className="overflow-hidden flex flex-shrink-0 items-center">
             {renderIconArea(size, version)(step, i)}
-            {isLastStep ? null : (
-              <div
-                className={`min-h-8 h-full w-0.5 ${
-                  showLines ? styleMap.iconConnector : ''
-                } ${margin}`}
-              />
-            )}
           </div>
           <div
-            className={`flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`}
+            className={style(
+              'flex flex-col justify-center h-fit',
+              STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size],
+            )}
           >
-            {step.label ? (
-              <div className="text-m-title-xs font-medium m-0 text-left mb-1">{step.label}</div>
-            ) : null}
+            {step.label ? <div className="text-l m-0 text-left">{step.label}</div> : null}
             {step.description ? (
-              <div className={`text-s ${styleMap.description} text-left`}>{step.description}</div>
+              <div className={style('text-s font-light text-left', styleMap.description)}>
+                {step.description}
+              </div>
             ) : null}
           </div>
         </div>
       </div>
     );
-  };
 
 const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step, i: number) => {
-  const iconAreaSize = STEPS_SIZE_MAP[size];
-
-  const iconSize = size === 'normal' ? '38' : '27';
-  const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
-
+  const iconSize = size === 'normal' ? '38' : '24';
   const iconVersion = version === 'secondary' ? 'white' : 'color';
+  const isImg = Boolean(step?.icon?.src);
+  const iconAreaSize = STEPS_SIZE_MAP[size][isImg ? 'image' : 'icon'];
+  const containerStyle = isImg ? '' : `rounded-md ${styleMap.iconBackground}`;
 
   return (
     <div
-      className={`${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
+      className={style(
+        iconAreaSize,
+        containerStyle,
+        'z-10 mr-3 flex justify-center content-center',
+      )}
     >
-      <span className={`font-medium flex self-center ${iconTextSize}`}>
+      <span className="flex self-center text-h4 text-secondary-text group-data-secondary:text-white">
         {checkCanRenderIcon(step?.icon) ? (
           <Img
             image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}

package/mobile/src/components/Tabs/LinkTab.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import { getLinkTabClassName } from './tabItemClasses';
+import { style } from '../../utils/style';
+import { getTabClassName } from './tabItemClasses';
 import type { LinkTabData, TabData, TabsMode } from './TabsContent';
 
 interface LinkTabProps {
@@ -23,14 +24,24 @@ export const LinkTab = JSX<LinkTabProps>((props) => {
   };
 
   return (
-    <a
+    <div
+      className={getTabClassName('block', active, tabsMode)}
       role="tab"
-      className={getLinkTabClassName('link', active, tabsMode)}
-      target={tab.target}
-      href={adjustedProps.href}
-      onClick={handleClick}
+      aria-selected={active}
+      onClick={() => onClick(tab)}
     >
-      <span className={getLinkTabClassName('text', active, tabsMode)}>{tab.text}</span>
-    </a>
+      <a
+        role="tab"
+        className={style(
+          'flex flex-1 items-center justify-center h-full',
+          getTabClassName('text', active, tabsMode),
+        )}
+        target={tab.target}
+        href={adjustedProps.href}
+        onClick={handleClick}
+      >
+        <span>{tab.text}</span>
+      </a>
+    </div>
   );
 });

package/mobile/src/components/Tabs/Tabs.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { defaultEventBus } from '../../EventBus/defaultEventBus';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
 import { CenteredTabs } from './CenteredTabs';
 import { renderTab } from './renderTab';
 import { ScrollableTabs } from './ScrollableTabs';
@@ -16,7 +17,7 @@ interface RenderTabsProps extends TabsBlockProps {
 }
 
 export const Tabs = JSX<TabsBlockProps>((props) => {
-  const { className = '', tabs, isSticky, ...rest } = props;
+  const { className = '', isSticky, tabs, ...rest } = props;
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
@@ -41,9 +42,11 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
 
   return (
     <BlockWrapper
-      className={`relative box-border flex gap-x-1 w-full ${
-        isSticky ? 'sticky top-1 z-20' : ''
-      } ${className}`}
+      className={style(
+        'relative box-border flex gap-x-1 w-full overflow-x-auto no-scrollbar',
+        isSticky ? 'sticky top-1 z-20' : '',
+        className,
+      )}
       defaultPadding="p-0"
       role="tablist"
       {...rest}

package/mobile/src/components/Tabs/renderGroupTab.tsx

@@ -1,18 +1,12 @@
+import { style } from '../../utils/style';
 import type { RenderTabProps } from './renderTab';
-import {
-  ACTIVE_TEXT_CLASSES,
-  getGroupTabClassName,
-  INACTIVE_TEXT_CLASSES,
-  TEXT_CLASSES,
-  WHITE_ACTIVE_TEXT_CLASSES,
-} from './tabItemClasses';
+import { getTabClassName } from './tabItemClasses';
 import type { GroupTabData, TabsMode } from './TabsContent';
 
 const BADGE_CLASSES =
-  'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
-const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
-const INACTIVE_BADGE_CLASSES =
-  'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
+  'bg-main-divider min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
+const LIGHT_BADGE_CLASSES = 'bg-white/30 text-white';
+const DARK_BADGE_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
 
 export const renderGroupTab =
   ({ page, currentTab, showCounter, onClick, tabsMode }: RenderTabProps) =>
@@ -27,39 +21,33 @@ export const renderGroupTab =
     return (
       <div
         key={`group-${String(i)}`}
-        className={getGroupTabClassName('div', active, tabsMode)}
+        className={getTabClassName('block', active, tabsMode)}
         role="tab"
         aria-selected={active}
         onClick={() => onClick(tab)}
       >
         <div
-          className={`flex flex-1 items-center justify-center ${getGroupTabClassName(
-            'text',
-            active,
-            tabsMode,
-          )}`}
+          className={style(
+            'flex flex-1 items-center justify-center h-full',
+            getTabClassName('text', active, tabsMode),
+          )}
         >
-          {renderTitle(tab.title, active, tabsMode)}
-          {renderCount(showCounter, count, active)}
+          <span>{tab.title}</span>
+          {showCounter && count ? renderCount(tabsMode, count, active) : null}
         </div>
       </div>
     );
   };
 
-const renderTitle = (title: string | undefined, active: boolean, tabsMode?: TabsMode) => {
-  const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
-  const titleClassName =
-    tabsMode === 'scrollable'
-      ? `${TEXT_CLASSES} ${activeClassName}`
-      : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
-
-  return title ? <h3 className={titleClassName}>{title}</h3> : null;
-};
-
-const renderCount = (showCounter: boolean | undefined, count: number, active: boolean) => {
-  return showCounter && count ? (
-    <div className={`${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`}>
+const renderCount = (tabsMode: TabsMode | undefined, count: number, active: boolean) => {
+  return (
+    <div
+      className={style(
+        BADGE_CLASSES,
+        active && tabsMode !== 'scrollable' ? LIGHT_BADGE_CLASSES : DARK_BADGE_CLASSES,
+      )}
+    >
       {count}
     </div>
-  ) : null;
+  );
 };

package/mobile/src/components/Tabs/tabItemClasses.ts

@@ -9,12 +9,12 @@ export const WIDESCREEN_ACTIVE_LINK_CLASSES = 'bg-primary-main text-white';
 
 export const TEXT_CLASSES = 'font-sans text-m text-center';
 export const ACTIVE_TEXT_CLASSES = 'text-white';
-export const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
+export const INACTIVE_TEXT_CLASSES = 'text-secondary-text sm:group-hover/btn:text-primary-main';
 
 export const WHITE_ACTIVE_TEXT_CLASSES = 'text-primary-main';
 
-const GROUP_TAB_CLASSES = {
-  div: {
+const TAB_CLASSES = {
+  block: {
     scrollable: {
       active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
       default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
@@ -30,37 +30,7 @@ const GROUP_TAB_CLASSES = {
   },
   text: {
     scrollable: {
-      active: `h-full border-0 border-b-2`,
-      default: ``,
-    },
-    centered: {
-      active: '',
-      default: '',
-    },
-    wideScreen: {
-      active: '',
-      default: '',
-    },
-  },
-};
-const LINK_TAB_CLASSES = {
-  link: {
-    scrollable: {
-      active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
-      default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
-    },
-    centered: {
-      active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
-      default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
-    },
-    wideScreen: {
-      active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES}`,
-      default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
-    },
-  },
-  text: {
-    scrollable: {
-      active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${WHITE_ACTIVE_TEXT_CLASSES}`,
+      active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2`,
       default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
     },
     centered: {
@@ -68,22 +38,19 @@ const LINK_TAB_CLASSES = {
       default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
     },
     wideScreen: {
-      active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
-      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+      active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES} text-black px-2.5 bg-white sm:bg-primary-main sm:text-white`,
+      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES} px-2.5 bg-white`,
     },
   },
 };
 
-export const getGroupTabClassName = (type: string, active: boolean, tabsMode?: TabsMode) => {
-  const styleActive = active ? 'active' : 'default';
-  const mode = tabsMode || 'wideScreen';
-
-  return GROUP_TAB_CLASSES[type][mode][styleActive];
-};
-
-export const getLinkTabClassName = (type: string, active: boolean, tabsMode?: TabsMode) => {
+export const getTabClassName: (type: string, active: boolean, tabsMode?: TabsMode) => string = (
+  type,
+  active,
+  tabsMode,
+) => {
   const styleActive = active ? 'active' : 'default';
   const mode = tabsMode || 'wideScreen';
 
-  return LINK_TAB_CLASSES[type][mode][styleActive];
+  return TAB_CLASSES[type][mode][styleActive];
 };