375-refactor: Subtitle component refactor

dev-data/training-program.data.tsx

@@ -52,7 +52,9 @@ export const contentMap: ContentMap = {
         Be well-prepared to pass the "AWS Certified Developer - Associate" certification
         and confidently apply your skills in real-world projects by the end of the course.
       </Paragraph>,
-      <Subtitle key="aws cloud dev 03" text="Course highlights:" />,
+      <Subtitle key="aws cloud dev 03">
+        Course highlights:
+      </Subtitle>,
       <List
         key="aws cloud dev 04"
         data={[
@@ -197,7 +199,9 @@ export const contentMap: ContentMap = {
       <Paragraph key="js / front-end pre-school ru 01">
         <span>Введение в RS School:</span>
         <List
-          data={['Знакомство со школой, профессией JS/Front-end разработчика и системой контроля версий Git.']}
+          data={[
+            'Знакомство со школой, профессией JS/Front-end разработчика и системой контроля версий Git.',
+          ]}
           marked={false}
         />
       </Paragraph>,
@@ -230,7 +234,10 @@ export const contentMap: ContentMap = {
       </Paragraph>,
       <Paragraph key="js / front-end pre-school ru 05">
         <span>Итоговая аттестация:</span>
-        <List data={['Кросс-чек проектов, тесты и ревью кода. Выдача сертификата.']} marked={false} />
+        <List
+          data={['Кросс-чек проектов, тесты и ревью кода. Выдача сертификата.']}
+          marked={false}
+        />
       </Paragraph>,
     ],
     image: jsImg,
@@ -254,10 +261,10 @@ export const contentMap: ContentMap = {
           'Understanding of the REST',
         ]}
       />,
-      <Subtitle
-        key="react 03"
-        text="Attention! Mentors on this course will be first assigned to the graduates of the RS School Stage #2."
-      />,
+      <Subtitle key="react 03">
+        Attention! Mentors on this course will be first assigned to the graduates of the RS School
+        Stage #2.
+      </Subtitle>,
     ],
     image: reactEnImg,
   },
@@ -289,13 +296,12 @@ export const contentMap: ContentMap = {
     title: 'Details',
     content: [
       <Paragraph key="aws devops 01">
-        If you are looking for an entry point to kickstart your IT career as a DevOps engineer,
-        then this AWS course challenge is what you need.
+        If you are looking for an entry point to kickstart your IT career as a DevOps engineer, then
+        this AWS course challenge is what you need.
       </Paragraph>,
-      <Subtitle
-        key="aws devops 02"
-        text="Showcase your level of expertise and join this expert-led program to:"
-      />,
+      <Subtitle key="aws devops 02">
+        Showcase your level of expertise and join this expert-led program to:
+      </Subtitle>,
       <List
         key="aws devops 03"
         data={[
@@ -308,10 +314,9 @@ export const contentMap: ContentMap = {
           'Become a DevOps engineer who is ready to face engineering challenges',
         ]}
       />,
-      <Subtitle
-        key="aws devops 04"
-        text="What do we offer?"
-      />,
+      <Subtitle key="aws devops 04">
+        What do we offer?
+      </Subtitle>,
       <List
         key="aws devops 05"
         data={[

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

@@ -0,0 +1,62 @@
+.subtitle {
+  margin: 0;
+  font-weight: $font-weight-medium;
+
+  &.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: 20px;
+      line-height: 28px;
+    }
+  }
+
+  &.medium-font-size {
+    font-size: 28px;
+    line-height: 36px;
+
+    @include media-tablet {
+      font-size: 24px;
+      line-height: 32px;
+    }
+  }
+
+  &.large-font-size {
+    font-size: 32px;
+    line-height: 40px;
+
+    @include media-tablet {
+      font-size: 28px;
+      line-height: 36px;
+    }
+  }
+
+  &.extra-large-font-size {
+    font-size: 36px;
+    line-height: 44px;
+
+    @include media-tablet {
+      font-size: 32px;
+      line-height: 36px;
+    }
+  }
+
+  &.gray-600 {
+    color: $color-gray-600;
+  }
+
+  &.black {
+    color: $color-black;
+  }
+}

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

@@ -1,19 +1,86 @@
-import { render, screen } from '@testing-library/react';
+import { cleanup, render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
-import { Subtitle } from './subtitle';
+import { Subtitle, cx } from './subtitle';
 
 describe('Subtitle component', () => {
   it('renders without crashing', () => {
-    render(<Subtitle text="Test Subtitle" />);
-    const subtitle = screen.getByText('Test Subtitle');
+    render(<Subtitle>Test Subtitle</Subtitle>);
+    const subtitle = screen.getByTestId('subtitle');
 
     expect(subtitle).toBeInTheDocument();
   });
 
   it('displays correct text', () => {
-    render(<Subtitle text="Another Test Subtitle" />);
-    const text = screen.getByText('Another Test Subtitle');
+    const testText = 'Another Test Subtitle';
 
-    expect(text).toBeInTheDocument();
+    render(<Subtitle>{testText}</Subtitle>);
+    const subtitle = screen.getByTestId('subtitle');
+
+    expect(subtitle).toHaveTextContent(testText);
+  });
+
+  it('applies medium font size class by default', () => {
+    render(<Subtitle>Default Font Size</Subtitle>);
+    const subtitle = screen.getByTestId('subtitle');
+
+    expect(subtitle).toHaveClass(cx('medium-font-size'));
+  });
+
+  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}>
+          {size}
+          Font Size
+        </Subtitle>,
+      );
+      const subtitle = getByTestId('subtitle');
+
+      expect(subtitle).toHaveClass(cx(`${size}-font-size`));
+      cleanup();
+    });
+  });
+
+  it('applies gray color class by default', () => {
+    render(<Subtitle>Default Color</Subtitle>);
+    const subtitle = screen.getByTestId('subtitle');
+
+    expect(subtitle).toHaveClass(cx('gray-600'));
+  });
+
+  it('applies black color class when specified', () => {
+    render(<Subtitle color="black">Black Color</Subtitle>);
+    const subtitle = screen.getByTestId('subtitle');
+
+    expect(subtitle).toHaveClass(cx('black'));
+  });
+
+  it('applies custom className when provided', () => {
+    render(<Subtitle className="custom-class">Custom Class</Subtitle>);
+    const subtitle = screen.getByTestId('subtitle');
+
+    expect(subtitle).toHaveClass('custom-class');
+  });
+
+  it('applies multiple variant classes correctly', () => {
+    render(
+      <Subtitle fontSize="large" color="black" className="custom-class">
+        Multiple Variants
+      </Subtitle>,
+    );
+    const subtitle = screen.getByTestId('subtitle');
+
+    expect(subtitle).toHaveClass(cx('large-font-size'));
+    expect(subtitle).toHaveClass(cx('black'));
+    expect(subtitle).toHaveClass('custom-class');
+  });
+
+  it('renders as h3 element', () => {
+    render(<Subtitle>H3 Element</Subtitle>);
+    const subtitle = screen.getByTestId('subtitle');
+
+    expect(subtitle.tagName).toBe('H3');
   });
 });

src/shared/ui/subtitle/subtitle.tsx

@@ -1,10 +1,45 @@
-import './subtitle.scss';
+import { HTMLAttributes } from 'react';
+import { type VariantProps, cva } from 'class-variance-authority';
+import classNames from 'classnames/bind';
 
-interface SubtitleProps {
-  text: string;
-  type?: string;
-}
+import styles from './subtitle.module.scss';
 
-export const Subtitle = ({ text, type = '' }: SubtitleProps) => (
-  <div className={`subtitle ${type}`}>{text}</div>
-);
+type SubtitleProps = Pick<HTMLAttributes<HTMLHeadingElement>, 'className' | 'children'> &
+  VariantProps<typeof subtitleVariants>;
+
+export const cx = classNames.bind(styles);
+
+const subtitleVariants = cva(cx('subtitle'), {
+  variants: {
+    fontSize: {
+      'extra-small': cx('extra-small-font-size'),
+      small: cx('small-font-size'),
+      medium: cx('medium-font-size'),
+      large: cx('large-font-size'),
+      'extra-large': cx('extra-large-font-size'),
+    },
+    color: {
+      gray: cx('gray-600'),
+      black: cx('black'),
+    },
+  },
+  defaultVariants: {
+    fontSize: 'medium',
+    color: 'gray',
+  },
+});
+
+export const Subtitle = ({ children, fontSize, color, className }: SubtitleProps) => {
+  return (
+    <h3
+      className={subtitleVariants({
+        fontSize,
+        color,
+        className,
+      })}
+      data-testid="subtitle"
+    >
+      {children}
+    </h3>
+  );
+};

src/widgets/certification/ui/certification.module.scss

@@ -8,10 +8,6 @@
 
     font-size: 20px;
 
-    .subtitle {
-      font-size: 28px;
-    }
-
     @include media-tablet-large {
       flex-direction: column;
       gap: 40px;

src/widgets/communication/ui/communication.scss

@@ -16,10 +16,6 @@
           padding-top: 5px;
         }
 
-        .subtitle {
-          font-size: 28px;
-        }
-
         .disclogo-wrapper {
           flex-shrink: 0;
           align-self: center;

src/widgets/communication/ui/communication.tsx

@@ -61,7 +61,7 @@ export const Communication = ({ courseName, lang = 'en' }: RequiredProps) => {
             <DiscordLogo />
           </figure>
           <div>
-            <Subtitle text={localizedContent[lang].subTitle} />
+            <Subtitle>{localizedContent[lang].subTitle}</Subtitle>
             <Paragraph className="communication-paragraph">
               {localizedContent[lang].firstParagraphFirstHalf}{' '}
               <LinkCustom href={DISCORD_LINKS[courseName]} icon={<TextLinkIcon />} target="_blank">

src/widgets/community/ui/community.scss

@@ -16,10 +16,6 @@
       width: 640px;
       text-align: left;
 
-      & .subtitle {
-        margin-top: 8px;
-      }
-
       & .social-media-container {
         display: flex;
         flex-flow: row wrap;

src/widgets/course-main/course-main.tsx

@@ -48,7 +48,11 @@ export const CourseMain = ({ courseName, lang = 'en', type }: CourseMainProps) =
         <div className={styles.info}>
           <SectionLabel>{status}</SectionLabel>
           <WidgetTitle>{`${altTitle || title} Course`}</WidgetTitle>
-          {type && <Subtitle text={type} type="course-main" />}
+          {type && (
+            <Subtitle fontSize="small" color="black">
+              {type}
+            </Subtitle>
+          )}
           <DateLang startDate={date} language={language} mode={mode} withMargin />
           <LinkCustom href={enroll} icon={<ArrowIcon />} variant="secondary" target="_blank">
             {localizedContent[lang].linkLabel}