742-refactor: Update subtitle to support heading tags

src/app/docs/components/docs-layout/docs-layout.module.scss

@@ -40,7 +40,7 @@
   .docs-content {
     display: flex;
     flex-direction: column;
-    gap: 40px;
+    gap: 50px;
 
     width: 100%;
     min-width: 0;

src/app/docs/components/search/search.tsx

@@ -7,6 +7,7 @@ import { createPortal } from 'react-dom';
 
 import MOCKED_SEARCH from '../../mocked-search';
 import { Language } from '@/shared/types';
+import { Subtitle } from '@/shared/ui/subtitle';
 
 import styles from './search.module.scss';
 
@@ -127,7 +128,7 @@ function Result({ result }: { result: PagefindSearchResult }) {
   return (
     <div>
       <Link href={removeHtmlExtension(data.url)}>
-        <h3>{data.meta.title}</h3>
+        <Subtitle size="extra-small" weight="bold">{data.meta.title}</Subtitle>
         <p dangerouslySetInnerHTML={{ __html: data.excerpt }} />
       </Link>
 

src/entities/course/ui/course-card/course-card.tsx

@@ -67,7 +67,7 @@ export const CourseCard = ({
     <article className={cx('course-card', classes)} data-testid="course-card">
       <div className={cx('card-header')} style={cardStyle} data-testid="card-header">
         <Image src={iconSrc} alt={title} />
-        <Subtitle className={cx('course-title')} fontSize={fontSize}>
+        <Subtitle className={cx('course-title')} size={fontSize}>
           {`${title}${mark}`}
         </Subtitle>
       </div>

src/entities/course/ui/course-item/course-item.tsx

@@ -30,7 +30,7 @@ export const CourseItem = ({
         />
       </figure>
       <article className={cx('course-info')}>
-        <Subtitle fontSize="extra-small">{title}</Subtitle>
+        <Subtitle size="extra-small">{title}</Subtitle>
         <ShortInfoPanel
           startDate={startDate}
           registrationEndDate={registrationEndDate}

src/entities/event/ui/event-card/event-card.module.scss

@@ -43,17 +43,10 @@
     }
 
     .about-organization {
-      margin-top: 32px;
-
-      .organized-by {
-        margin-bottom: 0;
-        font-weight: $font-weight-regular;
-      }
+      margin-top: 24px;
 
       .event-organization {
-        margin-top: 10px;
-        font-size: 20px;
-        font-weight: $font-weight-medium;
+        margin-bottom: 20px;
       }
     }
 
@@ -66,7 +59,6 @@
       .event-title {
         margin-top: 16px;
         margin-bottom: 0;
-        font-weight: $font-weight-medium;
         line-height: 32px;
 
         @include media-mobile {

src/entities/event/ui/event-card/event-card.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames/bind';
 
 import { Event } from '@/entities/event';
 import { LinkCustom } from '@/shared/ui/link-custom';
+import { Subtitle } from '@/shared/ui/subtitle';
 
 import styles from './event-card.module.scss';
 
@@ -30,12 +31,18 @@ export const EventCard = ({
       <div className={cx('card-header')} data-testid="card-header">
         <p className={cx('event-tag')}>{eventType}</p>
         <section className={cx('about-organization')} data-testid="organization-section">
-          <h4 className={cx('organized-by')}>{organizedBy}</h4>
-          <h3 className={cx('event-organization')}>{organization}</h3>
+          <Subtitle size="extra-small" weight="regular">
+            {organizedBy}
+          </Subtitle>
+          <Subtitle as="h4" className={cx('event-organization')} size="extra-small">
+            {organization}
+          </Subtitle>
         </section>
         <section className={cx('about-event')} data-testid="about-section">
-          <h2 className={cx('event-title')}>{title}</h2>
-          <p title={additionalInfo} className={cx('event-additional-info')}>{additionalInfo}</p>
+          <Subtitle className={cx('event-title')} size="small">{title}</Subtitle>
+          <p title={additionalInfo} className={cx('event-additional-info')}>
+            {additionalInfo}
+          </p>
         </section>
       </div>
 

src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss

@@ -45,14 +45,9 @@
   flex-direction: column;
   gap: 18px;
 
-  .card-title {
-    font-weight: $font-weight-bold;
-  }
-
   .card-subtitle {
     margin: 0;
-    font-size: 18px;
-    font-weight: $font-weight-medium;
+    line-height: 1.15;
   }
 }
 

src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.tsx

@@ -39,13 +39,25 @@ export const MentorFeedbackCard = ({ name, course, review, photo }: MentorFeedba
           data-testid="mentor-photo"
         />
         <header className={cx('card-header')}>
-          <Subtitle fontSize="small" className={cx('card-title')} data-testid="card-title">
+          <Subtitle
+            as="h3"
+            className={cx('card-title')}
+            size="small"
+            weight="bold"
+            data-testid="card-title"
+          >
             {name}
           </Subtitle>
-          <h4 className={cx('card-subtitle')} data-testid="card-subtitle">
+          <Subtitle
+            as="h4"
+            className={cx('card-subtitle')}
+            size="extra-small"
+            weight="medium"
+            data-testid="card-subtitle"
+          >
             <b>Course: </b>
             {course}
-          </h4>
+          </Subtitle>
         </header>
       </section>
       <div className={cx('card-content-wrapper')} data-testid="card-content-wrapper">

src/entities/trainer/ui/trainers-card/trainer-card.module.scss

@@ -27,24 +27,13 @@
 
   .card-title {
     margin: 0;
-    font-size: 24px;
-    font-weight: $font-weight-medium;
-    line-height: 32px;
-
-    @include media-tablet {
-      font-size: 20px;
-    }
   }
 
   .card-subtitle {
     margin: 0;
     font-size: 18px;
-    font-weight: $font-weight-medium;
+    line-height: 1.15;
     color: $color-gray-500;
-
-    @include media-tablet {
-      font-size: 18px;
-    }
   }
 
   .card-content {

src/entities/trainer/ui/trainers-card/trainer-card.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames/bind';
 import Image from 'next/image';
 
 import { Trainer } from '../../types';
+import { Subtitle } from '@/shared/ui/subtitle';
 
 import styles from './trainer-card.module.scss';
 
@@ -15,8 +16,12 @@ export const TrainerCard = ({ name, bio, role, photo }: Trainer) => {
       </div>
       <div className={cx('card-text')}>
         <header>
-          <h3 className={cx('card-title')}>{name}</h3>
-          <h4 className={cx('card-subtitle')}>{role}</h4>
+          <Subtitle className={cx('card-title')} size="small">
+            {name}
+          </Subtitle>
+          <Subtitle as="h4" className={cx('card-subtitle')} size="extra-small">
+            {role}
+          </Subtitle>
         </header>
         <p className={cx('card-content')}>{bio}</p>
       </div>

src/shared/ui/modal/modal.module.scss

@@ -98,10 +98,6 @@
   }
 }
 
-.modal-title {
-  font-size: 20px;
-}
-
 .modal-body {
   overflow-y: auto;
   padding-bottom: 32px;

src/shared/ui/modal/modal.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames/bind';
 import Image from 'next/image';
 import { createPortal } from 'react-dom';
 
+import { Subtitle } from '../subtitle';
 import closeIcon from '@/shared/assets/svg/close.svg';
 import { KEY_CODES } from '@/shared/constants';
 
@@ -101,9 +102,9 @@ export const Modal = ({ isOpen, onClose, children, title, className }: ModalProp
     >
       <div className={cx('modal-header', { 'no-title': !title })} data-testid="modal-header">
         {title && (
-          <h2 className={cx('modal-title')} data-testid="modal-title">
+          <Subtitle size="small" weight="bold" data-testid="modal-title">
             {title}
-          </h2>
+          </Subtitle>
         )}
         <button
           className={cx('modal-close-button')}

src/shared/ui/subtitle/subtitle.module.scss

@@ -2,61 +2,73 @@
   margin: 0;
   color: $color-gray-900;
 
-  &.extra-small-font-size {
-    font-size: 20px;
-    line-height: 28px;
-
-    @include media-tablet {
-      font-size: 18px;
-      line-height: 24px;
-    }
-  }
-
-  &.small-font-size {
-    font-size: 24px;
-    line-height: 32px;
-
-    @include media-tablet {
+  &.font-size {
+    &-extra-small {
       font-size: 20px;
       line-height: 28px;
-    }
-  }
 
-  &.medium-font-size {
-    font-size: 28px;
-    line-height: 36px;
+      @include media-tablet {
+        font-size: 18px;
+        line-height: 24px;
+      }
+    }
 
-    @include media-tablet {
+    &-small {
       font-size: 24px;
       line-height: 32px;
-    }
-  }
 
-  &.large-font-size {
-    font-size: 32px;
-    line-height: 40px;
+      @include media-tablet {
+        font-size: 20px;
+        line-height: 28px;
+      }
+    }
 
-    @include media-tablet {
+    &-medium {
       font-size: 28px;
       line-height: 36px;
-    }
-  }
 
-  &.extra-large-font-size {
-    font-size: 36px;
-    line-height: 44px;
+      @include media-tablet {
+        font-size: 24px;
+        line-height: 32px;
+      }
+    }
 
-    @include media-tablet {
+    &-large {
       font-size: 32px;
-      line-height: 36px;
+      line-height: 40px;
+
+      @include media-tablet {
+        font-size: 28px;
+        line-height: 36px;
+      }
     }
-  }
 
-  &.normal {
-    font-weight: $font-weight-medium;
+    &-extra-large {
+      font-size: 36px;
+      line-height: 44px;
+
+      @include media-tablet {
+        font-size: 32px;
+        line-height: 36px;
+      }
+    }
   }
 
-  &.bold {
-    font-weight: $font-weight-bold;
+  &.font-weight {
+    &-light {
+      font-weight: $font-weight-light;
+    }
+
+    &-regular {
+      font-weight: $font-weight-regular;
+    }
+
+    &-medium {
+      font-weight: $font-weight-medium;
+    }
+
+    &-bold {
+      font-weight: $font-weight-bold;
+    }
   }
 }

src/shared/ui/subtitle/subtitle.test.tsx

@@ -24,22 +24,22 @@ describe('Subtitle component', () => {
     render(<Subtitle>Default Font Size</Subtitle>);
     const subtitle = screen.getByTestId('subtitle');
 
-    expect(subtitle).toHaveClass(cx('medium-font-size'));
+    expect(subtitle).toHaveClass(cx('font-size-medium'));
   });
 
   it('applies correct font size classes when specified', () => {
     const sizes = ['extra-small', 'small', 'medium', 'large', 'extra-large'] as const;
 
     sizes.forEach((size) => {
       const { getByTestId } = render(
-        <Subtitle fontSize={size}>
+        <Subtitle size={size}>
           {size}
           Font Size
         </Subtitle>,
       );
       const subtitle = getByTestId('subtitle');
 
-      expect(subtitle).toHaveClass(cx(`${size}-font-size`));
+      expect(subtitle).toHaveClass(cx(`font-size-${size}`));
       cleanup();
     });
   });
@@ -53,20 +53,27 @@ describe('Subtitle component', () => {
 
   it('applies multiple variant classes correctly', () => {
     render(
-      <Subtitle fontSize="large" className="custom-class">
+      <Subtitle className="custom-class" size="large">
         Multiple Variants
       </Subtitle>,
     );
     const subtitle = screen.getByTestId('subtitle');
 
-    expect(subtitle).toHaveClass(cx('large-font-size'));
+    expect(subtitle).toHaveClass(cx('font-size-large'));
     expect(subtitle).toHaveClass('custom-class');
   });
 
-  it('renders as h3 element', () => {
-    render(<Subtitle>H3 Element</Subtitle>);
+  it('renders as h3 element by default', () => {
+    render(<Subtitle>h3</Subtitle>);
     const subtitle = screen.getByTestId('subtitle');
 
     expect(subtitle.tagName).toBe('H3');
   });
+
+  it.each(['h2', 'h3', 'h4'] as const)('renders as %s element', (tag) => {
+    render(<Subtitle as={tag}>{tag}</Subtitle>);
+    const subtitle = screen.getByTestId('subtitle');
+
+    expect(subtitle.tagName).toBe(tag.toUpperCase());
+  });
 });