@redneckz/wildless-cms-uni-blocks 0.7.4 → 0.7.6

package/src/components/Calculator/constants.ts

@@ -1,4 +1,5 @@
 import { BonusCalculatorSourceBookParams } from './useBonusCalculatorParams';
+import { BusinessDepositCalculatorSourceBookParams } from './useBusinessDepositCalculatorParams';
 import { CreditCalculatorSourceBookParams } from './useCreditCalculatorParams';
 import { DepositCalculatorSourceBookParams } from './useDepositCalculatorParams';
 
@@ -8,7 +9,13 @@ export const DEFAULT_SUM = (DEFAULT_MAX_SUM - DEFAULT_MIN_SUM) / 2;
 export const DEFAULT_MIN_MONTHS = 13;
 export const DEFAULT_MAX_MONTHS = 60;
 export const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS - DEFAULT_MIN_MONTHS) / 2);
-
+export const BUSINESS_DEFAULT_SUM = 100000;
+export const BUSINESS_MIN_DAYS = 1;
+export const BUSINESS_MAX_DAYS = 1095;
+export const BUSINESS_RATE_MIN_DAYS = 30; // порог количества дней, при которых ставка не доступна
+export const BUSINESS_OPERATING_MIN_DAYS = 90;
+export const BUSINESS_OPERATING_MAX_DAYS = 730;
+export const BUSINESS_DEFAULT_DAYS = 90;
 export const MONTHS_IN_YEAR = 12;
 
 export const MONTHLY_INTEREST_RATE = MONTHS_IN_YEAR * 100;
@@ -51,6 +58,21 @@ export const DEFAULT_DEPOSIT_CALCULATOR_PARAMS: DepositCalculatorSourceBookParam
   isMonthlyInterestPayment: true,
 };
 
+export const DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS: BusinessDepositCalculatorSourceBookParams =
+  {
+    minSum: 1000,
+    maxSum: 500000,
+    minDays: BUSINESS_MIN_DAYS,
+    maxDays: BUSINESS_MAX_DAYS,
+    rate: 5.9,
+    isMonthlyInterestPayment: true,
+    isReplenished: false,
+    isPartialWithdrawal: false,
+    isSmallBusiness: false,
+    depositeName: "Депозит 'Стабильный'",
+  };
+
 export const CREDIT_CALC_DEFAULT_DIR = 'credit-calculator-data';
 export const BONUS_CALC_DEFAULT_DIR = 'bonus-calculator-data';
 export const DEPOSIT_CALC_DEFAULT_DIR = 'deposit-calculator-data';
+export const BUSINESS_DEPOSIT_CALC_DEFAULT_DIR = 'business-calculator-data';

package/src/components/Calculator/renderCalculatorBlock.tsx

@@ -17,7 +17,7 @@ export const renderCalculatorBlock = (block: CalculatorBlockDef, i: number) => {
     >
       <div className="box-border p-9 w-full">
         {block?.title ? <Heading className="text-center mb-6" title={block.title} /> : null}
-        <EmbeddedBlock {...block} className="flex justify-between" />
+        <EmbeddedBlock {...block} />
       </div>
     </section>
   );

package/src/components/Calculator/renderDaysInput.tsx

@@ -0,0 +1,36 @@
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { clamp } from '../../utils/clamp';
+
+const STEP_DAYS = 1;
+
+interface RenderDaysInputParams {
+  minDays: number;
+  maxDays: number;
+  daysValue: number;
+}
+
+export function renderDaysInput(
+  title: string,
+  params: RenderDaysInputParams,
+  callback?: (value: number) => void,
+) {
+  const { minDays, maxDays, daysValue } = params;
+  const daysText = (days: number) => {
+    const text = Number(days) % 10 === 1 ? 'дня' : 'дней';
+
+    return `${days} ${text}`;
+  };
+
+  return (
+    <InputRange
+      className="mt-7"
+      title={title}
+      items={[`От ${daysText(minDays)}`, `До ${daysText(maxDays)}`]}
+      min={minDays}
+      max={maxDays}
+      step={STEP_DAYS}
+      value={clamp(daysValue, minDays, maxDays)}
+      onChange={callback}
+    />
+  );
+}

package/src/components/Calculator/renderFootnote.tsx

@@ -1,2 +1,8 @@
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+
 export const renderFootnote = (text?: string) =>
-  text ? <p className="text-s-light text-secondary-text mt-7">{text}</p> : null;
+  text ? (
+    <Paragraph size="text-s-light" color="text-secondary-text">
+      {text}
+    </Paragraph>
+  ) : null;

package/src/components/Calculator/renderInterestPayment.tsx

@@ -0,0 +1,40 @@
+import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
+import { Text } from '../../ui-kit/Text/Text';
+
+const EVERY_MONTH = 'everyMonth';
+const AT_END_TERM = 'atEndTerm';
+
+const depositTypeItems = [
+  {
+    id: EVERY_MONTH,
+    text: 'Ежемесячно',
+  },
+  {
+    id: AT_END_TERM,
+    text: 'В конце срока',
+  },
+];
+
+export function renderInterestPayment(
+  isMonthlyInterestPayment: boolean,
+  callback?: (value: boolean) => void,
+  title?: string,
+) {
+  return (
+    <div>
+      {title ? (
+        <Text color="text-secondary-text" font="font-light">
+          {title}
+        </Text>
+      ) : null}
+
+      <div className="mt-3">
+        <RadioButtonGroup
+          items={depositTypeItems}
+          checkedItem={isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM}
+          onChange={(text: string) => callback && callback(text === EVERY_MONTH)}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/Calculator/useBusinessDepositCalculatorParams.ts

@@ -0,0 +1,109 @@
+import {
+  BUSINESS_DEPOSIT_CALC_DEFAULT_DIR,
+  BUSINESS_OPERATING_MAX_DAYS,
+  BUSINESS_OPERATING_MIN_DAYS,
+  BUSINESS_RATE_MIN_DAYS,
+  DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS,
+} from './constants';
+import { useCalculatorParams } from './useCalculatorParams';
+import type { CommonDepositParams } from './useDepositCalculatorParams';
+
+export interface BusinessCommonDepositParams extends CommonDepositParams {
+  isReplenished: boolean;
+  isPartialWithdrawal: boolean;
+  isSmallBusiness: boolean;
+}
+export interface BusinessDepositCalculatorSourceBookParams extends BusinessCommonDepositParams {
+  minSum: number;
+  maxSum: number;
+  minDays: number;
+  maxDays: number;
+  depositeName: string;
+  rate: number;
+}
+
+export interface BusinessDepositCalculatorUserInputParams extends BusinessCommonDepositParams {
+  moneyValue: number;
+  daysValue: number;
+}
+
+export interface BusinessDepositCalculatorParams
+  extends BusinessDepositCalculatorSourceBookParams,
+    BusinessDepositCalculatorUserInputParams {
+  income?: number;
+  finalSum?: number;
+  isDisabledOperatingDeposit?: boolean;
+}
+
+export type BusinessDepositCalculatorData = {
+  rows: BusinessDepositCalculatorSourceBookParams[];
+};
+
+export const useBusinessDepositCalculatorParams = (
+  userInputParams: BusinessDepositCalculatorUserInputParams,
+  sourceBookDir?: string,
+): BusinessDepositCalculatorParams => {
+  const {
+    daysValue,
+    moneyValue,
+    isPartialWithdrawal,
+    isReplenished,
+    isSmallBusiness,
+    isMonthlyInterestPayment,
+  } = userInputParams;
+  const data = useCalculatorParams<BusinessDepositCalculatorData>(
+    sourceBookDir || BUSINESS_DEPOSIT_CALC_DEFAULT_DIR,
+  );
+
+  const isOperatingDeposit = isReplenished || isPartialWithdrawal;
+  const isDisabledOperatingDeposit =
+    daysValue < BUSINESS_OPERATING_MIN_DAYS || daysValue > BUSINESS_OPERATING_MAX_DAYS;
+
+  if (daysValue <= BUSINESS_RATE_MIN_DAYS) {
+    return {
+      ...DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS,
+      ...userInputParams,
+      isDisabledOperatingDeposit,
+      rate: 0,
+    };
+  }
+  const businessDepositCalculatorSourceBookParams =
+    data?.rows?.find((_) => {
+      return (
+        isMonthlyInterestPayment === _.isMonthlyInterestPayment &&
+        isSmallBusiness === _.isSmallBusiness &&
+        (isOperatingDeposit
+          ? _.isReplenished && _.isPartialWithdrawal
+          : !_.isReplenished && !_.isPartialWithdrawal)
+      );
+    }) || DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS;
+
+  const { rate } = businessDepositCalculatorSourceBookParams;
+
+  const income = getDepositIncome(rate, userInputParams);
+  const finalSum = moneyValue + income;
+
+  return {
+    ...businessDepositCalculatorSourceBookParams,
+    ...userInputParams,
+    isDisabledOperatingDeposit,
+    income,
+    finalSum,
+  };
+};
+
+const getDepositIncome = (
+  rate: number,
+  userInputParams: BusinessDepositCalculatorUserInputParams,
+) => {
+  const { isMonthlyInterestPayment, moneyValue, daysValue } = userInputParams;
+
+  /*
+  Приблизительный расчёт, не учитывающий разницу в количестве дней в месяцах. Месяц принят за 30 дней, год за 365 дней.
+  */
+  if (isMonthlyInterestPayment) {
+    return Math.round(moneyValue * Math.pow((1200 + rate) / 1200, daysValue / 30) - moneyValue);
+  } else {
+    return Math.round((moneyValue * rate * daysValue) / 365 / 100);
+  }
+};

package/src/components/Calculator/useDepositCalculatorParams.ts

@@ -39,7 +39,7 @@ export const useDepositCalculatorParams = (
   );
 
   const depositCalculatorSourceBookParams =
-    data?.rows.find((_) => isMonthlyInterestPayment === _.isMonthlyInterestPayment) ||
+    data?.rows?.find((_) => isMonthlyInterestPayment === _.isMonthlyInterestPayment) ||
     DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
 
   const { rate } = depositCalculatorSourceBookParams;

package/src/components/SwipeListControlBlock/SwipeListControlBlock.fixture.tsx

@@ -9,7 +9,7 @@ const options = {
 
 export default {
   default: (
-    <div className="container grid grid-cols-12">
+    <div className="container grid grid-cols-12 p-4">
       <SwipeListControlBlock
         className="col-span-12"
         block={{
@@ -24,4 +24,21 @@ export default {
       />
     </div>
   ),
+  secondary: (
+    <div className="container grid grid-cols-12 p-4">
+      <SwipeListControlBlock
+        className="col-span-12"
+        block={{
+          type: 'SwipeListControlBlock',
+          blocks: [
+            { type: 'ProductTile', content: { ...PRODUCT_TILE, version: '' } },
+            { type: 'ProductTile', content: { ...PRODUCT_TILE, version: '' } },
+          ],
+        }}
+        listType="vertical-list"
+        options={options}
+        version="secondary"
+      />
+    </div>
+  ),
 };

package/src/components/SwipeListControlBlock/SwipeListControlBlock.tsx

@@ -8,10 +8,10 @@ import type { SwipeListControlBlockContent } from './SwipeListControlBlockConten
 interface SwipeListControlBlockProps extends SwipeListControlBlockContent, UniBlockProps {}
 
 export const SwipeListControlBlock: JSXBlock<SwipeListControlBlockProps> =
-  JSX<SwipeListControlBlockProps>(({ gap, listType, padding, showDots, options, ...rest }) => {
+  JSX<SwipeListControlBlockProps>(({ listType, showDots, options, ...rest }) => {
     return (
       <BlockWrapper {...rest}>
-        <SwipeListControl gap={gap} listType={listType} padding={padding} showDots={showDots}>
+        <SwipeListControl listType={listType} showDots={showDots}>
           {renderChildren({ ...rest, options })}
         </SwipeListControl>
       </BlockWrapper>

package/src/components/SwipeListControlBlock/SwipeListControlBlockContent.ts

@@ -1,6 +1,3 @@
-import type { SwipeListControlProps } from '../../ui-kit/SwipeListControl/SwipeListControlProps';
+import type { SwipeListControlContent } from '../../ui-kit/SwipeListControl/SwipeListControlContent';
 
-/**
- * @title Swipe-контроллер
- */
-export type SwipeListControlBlockContent = SwipeListControlProps;
+export type SwipeListControlBlockContent = SwipeListControlContent;

package/src/components/Tabs/LinkTab.tsx

@@ -1,22 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import {
-  ACTIVE_LINK_CLASSES,
-  ACTIVE_TEXT_CLASSES,
-  INACTIVE_LINK_CLASSES,
-  INACTIVE_TEXT_CLASSES,
-  LINK_CLASSES,
-  TEXT_CLASSES,
-} from './tabItemClasses';
+import { getLinkTabClassName } from './tabItemClasses';
 import type { LinkTabData, TabData } from './TabsContent';
 
 interface LinkTabProps {
   tab: LinkTabData;
   currentTab?: TabData;
+  isScrollable?: boolean;
 }
 
 export const LinkTab = JSX<LinkTabProps>((props) => {
-  const { tab, currentTab } = props;
+  const { tab, currentTab, isScrollable = false } = props;
   const active = currentTab?.type === 'link' && currentTab.href === tab.href;
 
   const link = useLink();
@@ -25,14 +19,12 @@ export const LinkTab = JSX<LinkTabProps>((props) => {
   return (
     <a
       role="tab"
-      className={`${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`}
+      className={getLinkTabClassName('link', active, isScrollable)}
       target={tab.target}
       href={adjustedProps.href}
       onClick={adjustedProps.onClick}
     >
-      <span className={`${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`}>
-        {tab.text}
-      </span>
+      <span className={getLinkTabClassName('text', active, isScrollable)}>{tab.text}</span>
     </a>
   );
 });

package/src/components/Tabs/ScrollableTabs.tsx

@@ -0,0 +1,55 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { RenderTabProps } from './renderTab';
+import type { TabData } from './TabsContent';
+import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
+import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
+import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
+import { renderTab } from './renderTab';
+
+interface ScrollableTabsProps extends RenderTabProps {
+  tabs?: TabData[];
+}
+
+export type IsScrollButtonsShown = boolean[];
+
+const scrollButtonStyle = 'absolute z-50 top-0';
+
+export const ScrollableTabs = JSX<ScrollableTabsProps>((props) => {
+  const { tabs, onClick, currentTab, page, showCounter } = props;
+
+  const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
+    itemCount: tabs?.length || 0,
+    isCyclic: false,
+  });
+
+  return (
+    <div className="relative max-w-full m-auto">
+      <div className={`font-sans max-w-full w-full overflow-hidden relative bg-white`}>
+        <SwipeListContainer
+          containerRef={containerRef}
+          snapAlign="snap-start"
+          onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
+        >
+          {tabs?.map(
+            renderTab({
+              onClick,
+              currentTab,
+              showCounter,
+              page,
+              isScrollable: true,
+            }),
+          )}
+        </SwipeListContainer>
+      </div>
+      {scroll.canScrollLeft ? (
+        <ScrollLeftButton className={`${scrollButtonStyle} left-6`} onClick={scroll.scrollLeft} />
+      ) : null}
+      {scroll.canScrollRight ? (
+        <ScrollRightButton
+          className={`${scrollButtonStyle} rotate-180 right-6`}
+          onClick={scroll.scrollRight}
+        />
+      ) : null}
+    </div>
+  );
+});

package/src/components/Tabs/Tabs.fixture.tsx

@@ -10,8 +10,30 @@ export default {
           { type: 'group', ref: 'tab1', title: 'Вкладка 1' },
           { type: 'group', ref: 'tab2', title: 'Вкладка 2' },
           { type: 'link', href: 'https://google.com', text: 'Вкладка 3' },
+          { type: 'group', ref: 'tab3', title: 'Вкладка 4' },
         ]}
       />
     </div>
   ),
+  scrollable: (
+    <div className="container grid grid-cols-12">
+      <Tabs
+        className="col-span-12"
+        tabs={[
+          { type: 'group', ref: 'tab1', title: 'Вкладка 1' },
+          { type: 'group', ref: 'tab2', title: 'Вкладка 2' },
+          { type: 'link', href: 'https://google.com', text: 'Вкладка 3' },
+          { type: 'link', href: 'https://yandex.com', text: 'Вкладка 4' },
+          { type: 'link', href: 'https://ya.com', text: 'Вкладка 5' },
+          { type: 'link', href: 'https://habr.com', text: 'Вкладка за номером 6' },
+          { type: 'link', href: 'https://kremlin.com', text: 'Вкладка 7' },
+          { type: 'link', href: 'https://gov.com', text: 'Вкладка 8' },
+          { type: 'group', ref: 'tab3', title: 'Вкладка 9' },
+          { type: 'link', href: 'https://vc.com', text: 'Вкладка номер 10' },
+          { type: 'link', href: 'https://ria.com', text: 'Вкладка номер 11' },
+        ]}
+        tabsMode="scrollable"
+      />
+    </div>
+  ),
 };

package/src/components/Tabs/Tabs.tsx

@@ -2,9 +2,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { EventBus } from '../../EventBus/EventBus';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import type { TabData, TabsContent } from './TabsContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderTab } from './renderTab';
-import type { TabData, TabsContent } from './TabsContent';
+import { ScrollableTabs } from './ScrollableTabs';
 
 export interface TabActivationEvent {
   type?: TabData['type'];
@@ -14,7 +15,7 @@ export interface TabActivationEvent {
 export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
 export const Tabs = JSX<TabsBlockProps>((props) => {
-  const { className = '', tabs, showCounter, isSticky, ...rest } = props;
+  const { className = '', tabs, showCounter, isSticky, tabsMode, ...rest } = props;
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
@@ -25,6 +26,8 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
         if (event.type === 'link' && tab) {
           setCurrentTab(tab);
         }
+
+        return [];
       }),
     [tabs],
   );
@@ -46,11 +49,30 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
 
   return (
     <BlockWrapper
-      className={`${isSticky ? 'sticky top-1 z-20 ' : ''}box-border flex gap-x-1 ${className}`}
+      className={`relative box-border flex gap-x-1 w-full ${
+        isSticky ? 'sticky top-1 z-20 ' : ''
+      } ${className}`}
       role="tablist"
       {...rest}
     >
-      {tabs?.map(renderTab({ onClick: handleClick, currentTab, showCounter, ...rest }))}
+      {tabsMode === 'scrollable' ? (
+        <ScrollableTabs
+          tabs={tabs}
+          onClick={handleClick}
+          currentTab={currentTab}
+          showCounter={showCounter}
+          {...rest}
+        />
+      ) : (
+        tabs?.map(
+          renderTab({
+            onClick: handleClick,
+            currentTab,
+            showCounter,
+            ...rest,
+          }),
+        )
+      )}
     </BlockWrapper>
   );
 });

package/src/components/Tabs/TabsContent.ts

@@ -27,6 +27,14 @@ export type LinkTabData = LinkProps & {
  */
 export type TabData = GroupTabData | LinkTabData;
 
+/**
+ * @enumNames [
+ *   "По ширине экрана",
+ *   "С прокруткой"
+ * ]
+ */
+export type TabsMode = 'wideScreen' | 'scrollable';
+
 /**
  * @title Вкладки
  */
@@ -37,4 +45,9 @@ export interface TabsContent {
   isSticky?: boolean;
   /** @title Показывать счетчик блоков во вкладках */
   showCounter?: boolean;
+  /**
+   * @title Режим вкладок
+   * @default "wideScreen"
+   */
+  tabsMode?: TabsMode;
 }

package/src/components/Tabs/renderGroupTab.tsx

@@ -1,13 +1,12 @@
+import type { GroupTabData } from './TabsContent';
 import type { RenderTabProps } from './renderTab';
 import {
-  ACTIVE_LINK_CLASSES,
   ACTIVE_TEXT_CLASSES,
-  INACTIVE_LINK_CLASSES,
   INACTIVE_TEXT_CLASSES,
-  LINK_CLASSES,
   TEXT_CLASSES,
+  WHITE_ACTIVE_TEXT_CLASSES,
+  getGroupTabClassName,
 } from './tabItemClasses';
-import type { GroupTabData } from './TabsContent';
 
 const BADGE_CLASSES =
   'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
@@ -16,7 +15,7 @@ const INACTIVE_BADGE_CLASSES =
   'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
 
 export const renderGroupTab =
-  ({ page, currentTab, showCounter, onClick }: RenderTabProps) =>
+  ({ page, currentTab, showCounter, onClick, isScrollable = false }: RenderTabProps) =>
   (tab: GroupTabData, i: number) => {
     const active = currentTab === tab;
 
@@ -27,28 +26,39 @@ export const renderGroupTab =
 
     return (
       <div
-        key={String(i)}
-        className={`${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`}
+        key={`group-${String(i)}`}
+        className={getGroupTabClassName('div', active, isScrollable)}
         role="tab"
         aria-selected={active}
         onClick={() => onClick(tab)}
       >
-        <div className="flex flex-1 items-center justify-center">
-          {tab?.title ? renderTitle(tab.title, active) : null}
-          {showCounter && count ? renderCount(count, active) : null}
+        <div
+          className={`flex flex-1 items-center justify-center ${getGroupTabClassName(
+            'text',
+            active,
+            isScrollable,
+          )}`}
+        >
+          {renderTitle(tab.title, active, isScrollable)}
+          {renderCount(showCounter, count, active)}
         </div>
       </div>
     );
   };
 
-const renderTitle = (title: string, active: boolean) => (
-  <h3 className={`${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`}>
-    {title}
-  </h3>
-);
+const renderTitle = (title: string | undefined, active: boolean, isScrollable: boolean) => {
+  const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
+  const titleClassName = isScrollable
+    ? `${TEXT_CLASSES} ${activeClassName}`
+    : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
+
+  return title ? <h3 className={titleClassName}>{title}</h3> : null;
+};
 
-const renderCount = (count: number, active: boolean) => (
-  <div className={`${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`}>
-    {count}
-  </div>
-);
+const renderCount = (showCounter: boolean | undefined, count: number, active: boolean) => {
+  return showCounter && count ? (
+    <div className={`${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`}>
+      {count}
+    </div>
+  ) : null;
+};

package/src/components/Tabs/renderTab.tsx

@@ -9,12 +9,11 @@ export interface RenderTabProps {
   currentTab?: TabData;
   showCounter?: boolean;
   onClick: (tab: TabData) => void;
+  isScrollable?: boolean;
 }
 
 export const renderTab =
-  ({ page, currentTab, showCounter, onClick }: RenderTabProps) =>
-  // Linter doesn't understand that switch processes all cases
-  // eslint-disable-next-line consistent-return
+  ({ page, currentTab, showCounter, onClick, isScrollable = false }: RenderTabProps) =>
   (tab: TabData, i: number) => {
     const type = tab.type;
 
@@ -24,11 +23,15 @@ export const renderTab =
 
     switch (type) {
       case 'group':
-        return renderGroupTab({ page, currentTab, showCounter, onClick })(tab, i);
+        return renderGroupTab({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
       case 'link': {
-        return <LinkTab key={String(i)} tab={tab} currentTab={currentTab} />;
+        return (
+          <LinkTab key={String(i)} tab={tab} currentTab={currentTab} isScrollable={isScrollable} />
+        );
       }
       default:
         assertUnreachable(type);
     }
+
+    return null;
   };