@redneckz/wildless-cms-uni-blocks 0.3.18 → 0.3.19

package/src/components/ProductGalleryGreen/ProductGalleryGreen.fixture.tsx

@@ -0,0 +1,114 @@
+import { context } from '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
+import { ProductGalleryGreen } from './ProductGalleryGreen';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+const percentImage: Picture = {
+  src: '3-6-percent.png',
+  format: 'webp',
+  size: {
+    width: 338,
+    height: 420,
+  },
+  alt: 'Ставка от 3,6% годовых',
+};
+
+const worker: Picture = {
+  src: 'money-2.png',
+  format: 'webp',
+  size: {
+    width: 280,
+    height: 280,
+  },
+};
+
+const creditCard: Picture = {
+  src: 'credit-card-1.png',
+  format: 'webp',
+  size: {
+    width: 280,
+    height: 280,
+  },
+};
+
+const items = [
+  'Потребительский кредит по специальной процентной ставке',
+  'Получите деньги без залога и поручительства',
+  'Кредитный лимит до 5 млн рублей',
+];
+const buttons: ButtonWithIconProps[] = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'secondary',
+  },
+];
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ProductGalleryGreen
+        className="col-span-12"
+        context={context}
+        slides={[
+          {
+            nav: {
+              title: 'Кредит по одному документу',
+              description: 'Ставка от 5,5% годовых',
+            },
+            productBlock: {
+              title: 'Кредит по одному документу',
+              // description: 'Кредит наличными без залога и поручительства, только по паспорту',
+              headingType: 'h2',
+              items,
+              buttons,
+              image: percentImage,
+              backgroundText: '3,6',
+            },
+          },
+          {
+            nav: {
+              title: 'Для людей в возрасте',
+              description: 'Ставка до 7% годовых',
+            },
+            productBlock: {
+              title: 'Ставка от 12,5% годовых на срок до 3 лет!',
+              headingType: 'h2',
+              items,
+              buttons,
+              image: worker,
+            },
+          },
+          {
+            nav: {
+              title: 'Выгодно покупать',
+              description: 'Ставка от 5% годовых',
+            },
+            productBlock: {
+              title: 'Дополнительные бонусные баллы за покупки!',
+              headingType: 'h2',
+              items,
+              buttons,
+              image: creditCard,
+            },
+          },
+          {
+            nav: {
+              title: 'Карты Unionpay',
+              description: '120 дней льготный период',
+            },
+            productBlock: {
+              title: 'Карты Unionpay',
+              headingType: 'h2',
+              items,
+              buttons,
+              image: creditCard,
+            },
+          },
+        ]}
+      />
+    </div>
+  ),
+};

package/src/components/ProductGalleryGreen/ProductGalleryGreen.tsx

@@ -0,0 +1,98 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
+import type { ProductGalleryGreenContent } from './ProductGalleryGreenContent';
+
+export interface ProductGalleryProps extends ProductGalleryGreenContent, UniBlockProps {}
+
+export const ProductGalleryGreen = JSX<ProductGalleryProps>(
+  ({ className = '', context, slides = [] }) => {
+    const galleryNav = slides.map((s) => s.nav);
+    const galleryBlocks = slides.map((s) => s.productBlock);
+    const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
+
+    return (
+      <section
+        className={`box-border pt-[70px] relative font-sans overflow-hidden bg-primary-main w-100 ${className}`}
+      >
+        <div
+          className="flex duration-1000 pb-14"
+          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
+          role="list"
+        >
+          {galleryBlocks.map((_, i) => renderProductBlock(_, i, context))}
+        </div>
+
+        <div className="flex items-center absolute bottom-6 left-0 right-0 px-9 box-border">
+          {galleryNav.map((slide, i) =>
+            renderNavButton({
+              slide,
+              i,
+              activeSlideIndex,
+              onClick: () => setActiveSlideIndex(i),
+            }),
+          )}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderProductBlock(block: ProductBlockInnerContent, i: number, context) {
+  return (
+    <section
+      key={String(i)}
+      className="box-border relative flex grow-0 shrink-0 basis-full px-9"
+      role="listitem"
+    >
+      <div className="flex grow">
+        {block.backgroundText ? (
+          <div className="absolute text-[454px] font-bold text-white tracking-[-10px] leading-[299px] opacity-[.1] right-12 top-20 z-0">
+            {block.backgroundText}
+          </div>
+        ) : null}
+        <ProductBlockInner
+          className="pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem] z-[1]"
+          context={context}
+          textBlockClassName="mb-[154px]"
+          version="secondary"
+          {...block}
+        />
+        <Icon
+          className="absolute right-[460px] top-[200px] z-0 mb-4"
+          name="ArrowsRewindRight"
+          width="230"
+          height="187"
+        />
+      </div>
+    </section>
+  );
+}
+
+function renderNavButton({ slide, i, activeSlideIndex, onClick }) {
+  const isActiveBtn = i === activeSlideIndex;
+  const btnClassName = isActiveBtn
+    ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] max-w-[354px] p-0'
+    : 'bg-white/10 min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300';
+  const btnTitleClassName = isActiveBtn ? 'text-primary-text' : 'text-white';
+  const btnDescClassName = isActiveBtn ? 'text-secondary-text' : 'text-white';
+
+  return (
+    <button
+      type="button"
+      key={String(i)}
+      onClick={onClick}
+      aria-label={slide?.title}
+      className={`box-border font-sans group relative overflow-hidden border-white/50 border-[1px] cursor-pointer text-left mb-6a mx-1 grow basis-0 backdrop-blur-sm
+        ${btnClassName}
+      `}
+    >
+      <div className="border-0 px-6">
+        <div className={`text-sm font-medium pb-[3px] ${btnTitleClassName}`}>{slide?.title}</div>
+        <div className={`text-xs text-secondary-text ${btnDescClassName}`}>{slide.description}</div>
+      </div>
+    </button>
+  );
+}

package/src/components/ProductGalleryGreen/ProductGalleryGreenContent.ts

@@ -0,0 +1,32 @@
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+
+/** @title Кнопка под слайдом */
+interface ProductGalleryNav {
+  /** @title Заголовок */
+  title: string;
+  /** @title Описание */
+  description: string;
+}
+
+/**
+ * @title Слайд
+ */
+export interface ProductSlide {
+  /** @title Превью содержимого слайда на навигации */
+  nav?: ProductGalleryNav;
+  /** @title Содержимое слайда */
+  productBlock: ProductBlockInnerContent;
+}
+
+/**
+ * @title Продуктовая галерея
+ */
+export interface ProductGalleryGreenContent {
+  /**
+   * @title Задержка
+   * @hidden //! temporary not used
+   */
+  duration?: number;
+  /** @title Слайды */
+  slides?: ProductSlide[];
+}

package/src/icons/ArrowsRewindRight.svg

@@ -0,0 +1,16 @@
+<svg viewBox="0 0 230 187" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_7050_138706)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.24 52.16L14 104.32V0L92.24 52.16ZM216.119 52.16L137.879 104.32V0L216.119 52.16Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_7050_138706" x="0.959999" y="0" width="228.199" height="186.907" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="69.5467"/>
+<feGaussianBlur stdDeviation="6.52"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0196078 0 0 0 0 0.0117647 0 0 0 0 0.0156863 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7050_138706"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7050_138706" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/icons/IconName.ts

@@ -1,8 +1,79 @@
-
 // Generated. Do not touch
 
 export enum IconMap {
-  ActualBalanceIcon = "ActualBalanceIcon", AppleIcon = "AppleIcon", AtmIcon = "AtmIcon", BankIcon = "BankIcon", BurgerIcon = "BurgerIcon", BurgerIconWhite = "BurgerIconWhite", Calendar2Icon = "Calendar2Icon", CalendarCircleIcon = "CalendarCircleIcon", CalendarIcon = "CalendarIcon", CalendarTickIcon = "CalendarTickIcon", CalendarWhiteIcon = "CalendarWhiteIcon", CardIcon = "CardIcon", CardPosIcon = "CardPosIcon", CardTickIcon = "CardTickIcon", CardWithGemIcon = "CardWithGemIcon", ChartSquareIcon = "ChartSquareIcon", ClockIcon = "ClockIcon", CloseIcon = "CloseIcon", ComfortableCompIcon = "ComfortableCompIcon", CreditCardsIcon = "CreditCardsIcon", DiscountShapeIcon = "DiscountShapeIcon", DocIcon = "DocIcon", DocIconMonoColor = "DocIconMonoColor", DocumentTextIcon = "DocumentTextIcon", DollarIcon = "DollarIcon", EarthIcon = "EarthIcon", EmptyWalletChangeIcon = "EmptyWalletChangeIcon", EmptyWalletIcon = "EmptyWalletIcon", EmptyWalletWhiteIcon = "EmptyWalletWhiteIcon", EuroIcon = "EuroIcon", GeolocationIcon = "GeolocationIcon", GlassIcon = "GlassIcon", GlobalIcon = "GlobalIcon", GpsIcon = "GpsIcon", GridIcon = "GridIcon", GridIconWhite = "GridIconWhite", InterestGrowthIcon = "InterestGrowthIcon", InterestIcon = "InterestIcon", JCBIcon = "JCBIcon", LoupeIcon = "LoupeIcon", MasterCardIcon = "MasterCardIcon", MinusIcon = "MinusIcon", MirIcon = "MirIcon", MoneyIcon = "MoneyIcon", MoneyInsuranceIcon = "MoneyInsuranceIcon", MonitorMobileIcon = "MonitorMobileIcon", NewDocIcon = "NewDocIcon", OfficeIcon = "OfficeIcon", OkIcon = "OkIcon", PassSendIcon = "PassSendIcon", PercentageRoundIcon = "PercentageRoundIcon", PercentageSquareIcon = "PercentageSquareIcon", PercentageSquareWhiteIcon = "PercentageSquareWhiteIcon", PersonalCardIcon = "PersonalCardIcon", PlayMarketIcon = "PlayMarketIcon", PlusIcon = "PlusIcon", Profile2UserIcon = "Profile2UserIcon", ProfileIcon = "ProfileIcon", RoundRubleIcon = "RoundRubleIcon", SafeIcon = "SafeIcon", ShieldTickIcon = "ShieldTickIcon", SignDocsIcon = "SignDocsIcon", SmallClockIcon = "SmallClockIcon", TelegramIcon = "TelegramIcon", UnionPayIcon = "UnionPayIcon", UserTickIcon = "UserTickIcon", VisaIcon = "VisaIcon", VKIcon = "VKIcon", WalletAdd2Icon = "WalletAdd2Icon", WalletAddIcon = "WalletAddIcon", WalletIcon = "WalletIcon", WalletWithMoneyIcon = "WalletWithMoneyIcon"
+  ActualBalanceIcon = 'ActualBalanceIcon',
+  AppleIcon = 'AppleIcon',
+  ArrowsRewindRight = 'ArrowsRewindRight',
+  AtmIcon = 'AtmIcon',
+  BankIcon = 'BankIcon',
+  BurgerIcon = 'BurgerIcon',
+  BurgerIconWhite = 'BurgerIconWhite',
+  Calendar2Icon = 'Calendar2Icon',
+  CalendarCircleIcon = 'CalendarCircleIcon',
+  CalendarIcon = 'CalendarIcon',
+  CalendarTickIcon = 'CalendarTickIcon',
+  CalendarWhiteIcon = 'CalendarWhiteIcon',
+  CardIcon = 'CardIcon',
+  CardPosIcon = 'CardPosIcon',
+  CardTickIcon = 'CardTickIcon',
+  CardWithGemIcon = 'CardWithGemIcon',
+  ChartSquareIcon = 'ChartSquareIcon',
+  ClockIcon = 'ClockIcon',
+  CloseIcon = 'CloseIcon',
+  ComfortableCompIcon = 'ComfortableCompIcon',
+  CreditCardsIcon = 'CreditCardsIcon',
+  DiscountShapeIcon = 'DiscountShapeIcon',
+  DocIcon = 'DocIcon',
+  DocIconMonoColor = 'DocIconMonoColor',
+  DocumentTextIcon = 'DocumentTextIcon',
+  DollarIcon = 'DollarIcon',
+  EarthIcon = 'EarthIcon',
+  EmptyWalletChangeIcon = 'EmptyWalletChangeIcon',
+  EmptyWalletIcon = 'EmptyWalletIcon',
+  EmptyWalletWhiteIcon = 'EmptyWalletWhiteIcon',
+  EuroIcon = 'EuroIcon',
+  GeolocationIcon = 'GeolocationIcon',
+  GlassIcon = 'GlassIcon',
+  GlobalIcon = 'GlobalIcon',
+  GpsIcon = 'GpsIcon',
+  GridIcon = 'GridIcon',
+  GridIconWhite = 'GridIconWhite',
+  InterestGrowthIcon = 'InterestGrowthIcon',
+  InterestIcon = 'InterestIcon',
+  JCBIcon = 'JCBIcon',
+  LoupeIcon = 'LoupeIcon',
+  MasterCardIcon = 'MasterCardIcon',
+  MinusIcon = 'MinusIcon',
+  MirIcon = 'MirIcon',
+  MoneyIcon = 'MoneyIcon',
+  MoneyInsuranceIcon = 'MoneyInsuranceIcon',
+  MonitorMobileIcon = 'MonitorMobileIcon',
+  NewDocIcon = 'NewDocIcon',
+  OfficeIcon = 'OfficeIcon',
+  OkIcon = 'OkIcon',
+  PassSendIcon = 'PassSendIcon',
+  PercentageRoundIcon = 'PercentageRoundIcon',
+  PercentageSquareIcon = 'PercentageSquareIcon',
+  PercentageSquareWhiteIcon = 'PercentageSquareWhiteIcon',
+  PersonalCardIcon = 'PersonalCardIcon',
+  PlayMarketIcon = 'PlayMarketIcon',
+  PlusIcon = 'PlusIcon',
+  Profile2UserIcon = 'Profile2UserIcon',
+  ProfileIcon = 'ProfileIcon',
+  RoundRubleIcon = 'RoundRubleIcon',
+  SafeIcon = 'SafeIcon',
+  ShieldTickIcon = 'ShieldTickIcon',
+  SignDocsIcon = 'SignDocsIcon',
+  SmallClockIcon = 'SmallClockIcon',
+  TelegramIcon = 'TelegramIcon',
+  UnionPayIcon = 'UnionPayIcon',
+  UserTickIcon = 'UserTickIcon',
+  VisaIcon = 'VisaIcon',
+  VKIcon = 'VKIcon',
+  WalletAdd2Icon = 'WalletAdd2Icon',
+  WalletAddIcon = 'WalletAddIcon',
+  WalletIcon = 'WalletIcon',
+  WalletWithMoneyIcon = 'WalletWithMoneyIcon',
 }
 
 /**
@@ -10,7 +81,81 @@ export enum IconMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   "Деньги", "Лого «Apple»", "Банкомат", "Банк", "Бургер", "Бургер (белый)", "Календарь 2", "Скруглённый календарь", "Календарь", "Календарь с галочкой", "Календарь белый", "Кред. карта", "Кред. карта под наклоном", "Кред. карта с галочкой", "Карта с драгоценностями", "Деньги внутри кошелька", "Часы", "Крестик", "Кресло", "Кредитные карты", "Скидка", "Документ", "Документ (одноцветный)", "Документ с текстом", "Доллар", "Земля", "Пустой кошелёк с возвратом", "Пустой кошелёк", "Пустой кошелёк (белый)", "Евро", "Геолокация", "Зеркало", "Глобус", "Gps", "Сетка", "Сетка (белая)", "Диаграмма роста", "Скидка", "JCB", "Лупа", "MasterCard", "Минус", "МИР", "Деньги", "Денежное страхование", "Монитор и мобильный", "Новый документ", "Офис", "Лого «Одноклассники»", "Бизнес", "Проценты (круг.)", "Проценты", "Проценты белые", "Персональная карта", "Лого «PlayMarket»", "Плюс", "Профиль, 2 персоны", "Профиль", "Рубль (круг.)", "Сейф", "Безопасность", "Подписанные документы", "Маленькие часы", "Лого «Telegram»", "UnionPay", "Пользователь", "Visa", "Лого «VK»", "Пополнение карты", "Кошелёк с плюсом", "Кошелёк", "Кошелёк с деньгами"
+ *   "Деньги", "Лого «Apple»", "ArrowsRewindRight", "Банкомат", "Банк", "Бургер", "Бургер (белый)", "Календарь 2", "Скруглённый календарь", "Календарь", "Календарь с галочкой", "Календарь белый", "Кред. карта", "Кред. карта под наклоном", "Кред. карта с галочкой", "Карта с драгоценностями", "Деньги внутри кошелька", "Часы", "Крестик", "Кресло", "Кредитные карты", "Скидка", "Документ", "Документ (одноцветный)", "Документ с текстом", "Доллар", "Земля", "Пустой кошелёк с возвратом", "Пустой кошелёк", "Пустой кошелёк (белый)", "Евро", "Геолокация", "Зеркало", "Глобус", "Gps", "Сетка", "Сетка (белая)", "Диаграмма роста", "Скидка", "JCB", "Лупа", "MasterCard", "Минус", "МИР", "Деньги", "Денежное страхование", "Монитор и мобильный", "Новый документ", "Офис", "Лого «Одноклассники»", "Бизнес", "Проценты (круг.)", "Проценты", "Проценты белые", "Персональная карта", "Лого «PlayMarket»", "Плюс", "Профиль, 2 персоны", "Профиль", "Рубль (круг.)", "Сейф", "Безопасность", "Подписанные документы", "Маленькие часы", "Лого «Telegram»", "UnionPay", "Пользователь", "Visa", "Лого «VK»", "Пополнение карты", "Кошелёк с плюсом", "Кошелёк", "Кошелёк с деньгами"
  * ]
  */
-export type IconName = "" | "ActualBalanceIcon" | "AppleIcon" | "AtmIcon" | "BankIcon" | "BurgerIcon" | "BurgerIconWhite" | "Calendar2Icon" | "CalendarCircleIcon" | "CalendarIcon" | "CalendarTickIcon" | "CalendarWhiteIcon" | "CardIcon" | "CardPosIcon" | "CardTickIcon" | "CardWithGemIcon" | "ChartSquareIcon" | "ClockIcon" | "CloseIcon" | "ComfortableCompIcon" | "CreditCardsIcon" | "DiscountShapeIcon" | "DocIcon" | "DocIconMonoColor" | "DocumentTextIcon" | "DollarIcon" | "EarthIcon" | "EmptyWalletChangeIcon" | "EmptyWalletIcon" | "EmptyWalletWhiteIcon" | "EuroIcon" | "GeolocationIcon" | "GlassIcon" | "GlobalIcon" | "GpsIcon" | "GridIcon" | "GridIconWhite" | "InterestGrowthIcon" | "InterestIcon" | "JCBIcon" | "LoupeIcon" | "MasterCardIcon" | "MinusIcon" | "MirIcon" | "MoneyIcon" | "MoneyInsuranceIcon" | "MonitorMobileIcon" | "NewDocIcon" | "OfficeIcon" | "OkIcon" | "PassSendIcon" | "PercentageRoundIcon" | "PercentageSquareIcon" | "PercentageSquareWhiteIcon" | "PersonalCardIcon" | "PlayMarketIcon" | "PlusIcon" | "Profile2UserIcon" | "ProfileIcon" | "RoundRubleIcon" | "SafeIcon" | "ShieldTickIcon" | "SignDocsIcon" | "SmallClockIcon" | "TelegramIcon" | "UnionPayIcon" | "UserTickIcon" | "VisaIcon" | "VKIcon" | "WalletAdd2Icon" | "WalletAddIcon" | "WalletIcon" | "WalletWithMoneyIcon";
+export type IconName =
+  | ''
+  | 'ActualBalanceIcon'
+  | 'AppleIcon'
+  | 'ArrowsRewindRight'
+  | 'AtmIcon'
+  | 'BankIcon'
+  | 'BurgerIcon'
+  | 'BurgerIconWhite'
+  | 'Calendar2Icon'
+  | 'CalendarCircleIcon'
+  | 'CalendarIcon'
+  | 'CalendarTickIcon'
+  | 'CalendarWhiteIcon'
+  | 'CardIcon'
+  | 'CardPosIcon'
+  | 'CardTickIcon'
+  | 'CardWithGemIcon'
+  | 'ChartSquareIcon'
+  | 'ClockIcon'
+  | 'CloseIcon'
+  | 'ComfortableCompIcon'
+  | 'CreditCardsIcon'
+  | 'DiscountShapeIcon'
+  | 'DocIcon'
+  | 'DocIconMonoColor'
+  | 'DocumentTextIcon'
+  | 'DollarIcon'
+  | 'EarthIcon'
+  | 'EmptyWalletChangeIcon'
+  | 'EmptyWalletIcon'
+  | 'EmptyWalletWhiteIcon'
+  | 'EuroIcon'
+  | 'GeolocationIcon'
+  | 'GlassIcon'
+  | 'GlobalIcon'
+  | 'GpsIcon'
+  | 'GridIcon'
+  | 'GridIconWhite'
+  | 'InterestGrowthIcon'
+  | 'InterestIcon'
+  | 'JCBIcon'
+  | 'LoupeIcon'
+  | 'MasterCardIcon'
+  | 'MinusIcon'
+  | 'MirIcon'
+  | 'MoneyIcon'
+  | 'MoneyInsuranceIcon'
+  | 'MonitorMobileIcon'
+  | 'NewDocIcon'
+  | 'OfficeIcon'
+  | 'OkIcon'
+  | 'PassSendIcon'
+  | 'PercentageRoundIcon'
+  | 'PercentageSquareIcon'
+  | 'PercentageSquareWhiteIcon'
+  | 'PersonalCardIcon'
+  | 'PlayMarketIcon'
+  | 'PlusIcon'
+  | 'Profile2UserIcon'
+  | 'ProfileIcon'
+  | 'RoundRubleIcon'
+  | 'SafeIcon'
+  | 'ShieldTickIcon'
+  | 'SignDocsIcon'
+  | 'SmallClockIcon'
+  | 'TelegramIcon'
+  | 'UnionPayIcon'
+  | 'UserTickIcon'
+  | 'VisaIcon'
+  | 'VKIcon'
+  | 'WalletAdd2Icon'
+  | 'WalletAddIcon'
+  | 'WalletIcon'
+  | 'WalletWithMoneyIcon';

package/src/ui-kit/Heading/Heading.tsx

@@ -15,7 +15,7 @@ const HEADING_STYLE_MAP: Record<HeadingType, string> = {
 };
 
 export const Heading = JSX<HeadingProps>((props) => {
-  const { className, headingType, title } = props;
+  const { className = '', headingType, title } = props;
   if (!headingType) {
     return;
   }
@@ -23,7 +23,7 @@ export const Heading = JSX<HeadingProps>((props) => {
 
   return (
     <Tag
-      className={`font-sans font-medium m-0 ${HEADING_STYLE_MAP[headingType]} ${className || ''}`}
+      className={`font-sans font-medium m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`}
     >
       {title}
     </Tag>