375-refactor: Subtitle component refactor

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

@@ -0,0 +1,32 @@
+.subtitle {
+  margin: 0;
+  font-weight: $font-weight-medium;
+  line-height: 28px;
+  letter-spacing: 0;
+
+  &.medium {
+    font-size: 20px;
+
+    @include media-tablet {
+      font-size: 18px;
+      font-weight: $font-weight-regular;
+    }
+  }
+
+  &.large {
+    font-size: 24px;
+
+    @include media-tablet {
+      font-size: 18px;
+      font-weight: $font-weight-regular;
+    }
+  }
+
+  &.gray {
+    color: $color-gray-600;
+  }
+
+  &.black {
+    color: $color-black;
+  }
+}

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

@@ -4,14 +4,14 @@ import { Subtitle } from './subtitle';
 
 describe('Subtitle component', () => {
   it('renders without crashing', () => {
-    render(<Subtitle text="Test Subtitle" />);
+    render(<Subtitle>Test Subtitle</Subtitle>);
     const subtitle = screen.getByText('Test Subtitle');
 
     expect(subtitle).toBeInTheDocument();
   });
 
   it('displays correct text', () => {
-    render(<Subtitle text="Another Test Subtitle" />);
+    render(<Subtitle>Another Test Subtitle</Subtitle>);
     const text = screen.getByText('Another Test Subtitle');
 
     expect(text).toBeInTheDocument();

src/shared/ui/subtitle/subtitle.tsx

@@ -1,10 +1,41 @@
-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 = HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof subtitleVariants>;
+
+export const cx = classNames.bind(styles);
+
+const subtitleVariants = cva(cx('subtitle'), {
+  variants: {
+    size: {
+      medium: cx('medium'),
+      large: cx('large'),
+    },
+    color: {
+      gray: cx('gray'),
+      black: cx('black'),
+    },
+  },
+  defaultVariants: {
+    size: 'medium',
+    color: 'gray',
+  },
+});
+
+export const Subtitle = ({ children, size, color, ...props }: SubtitleProps) => {
+  return (
+    <h3
+      {...props}
+      className={subtitleVariants({
+        size,
+        color,
+        className: 'subtitle',
+      })}
+    >
+      {children}
+    </h3>
+  );
+};

src/widgets/about-home/ui/about.tsx

@@ -11,11 +11,13 @@ export const About = () => {
     <div className="about container" id="about">
       <div className="about content column-2">
         <div className="left">
-          <WidgetTitle size="medium" mods="asterisk">Who we are</WidgetTitle>
-          <Subtitle
-            text="Our mission is to provide free education in intriguing subjects, connect people, and grow
-          together."
-          />
+          <WidgetTitle size="medium" mods="asterisk">
+            Who we are
+          </WidgetTitle>
+          <Subtitle>
+            Our mission is to provide free education in intriguing subjects, connect people, and
+            grow together.
+          </Subtitle>
           <Paragraph>
             The Rolling Scopes was founded in 2013 in Minsk as a community of Front-end developers.
             It has since grown into an enormous international developers community.

src/widgets/about-school/ui/about.tsx

@@ -11,7 +11,7 @@ export const About = () => {
         <div className="column-2">
           <div className="info">
             <WidgetTitle size="medium" mods="asterisk">About RS School</WidgetTitle>
-            <Subtitle text="No matter your age, professional employment, or place of residence." />
+            <Subtitle>No matter your age, professional employment, or place of residence.</Subtitle>
             <Paragraph>
               RS School offers a unique learning experience as a free, community-based online
               education initiative. The RS School has been run by the Rolling Scopes community since

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>
               {localizedContent[lang].firstParagraphFirstHalf}{' '}
               <LinkCustom href={DISCORD_LINKS[courseName]} icon={<TextLinkIcon />} target="_blank">

src/widgets/community/ui/community.tsx

@@ -1,5 +1,11 @@
 import image from '@/shared/assets/welcome.webp';
-import { FacebookIcon, InstagramIcon, LinkedInIcon, TelegramIcon, YouTubeIcon } from '@/shared/icons';
+import {
+  FacebookIcon,
+  InstagramIcon,
+  LinkedInIcon,
+  TelegramIcon,
+  YouTubeIcon,
+} from '@/shared/icons';
 import Image from '@/shared/ui/image';
 import { SocialMedia, SocialMediaProps } from '@/shared/ui/social-media';
 import { Subtitle } from '@/shared/ui/subtitle';
@@ -59,8 +65,14 @@ export const Community = () => (
   <div id="community" className="community container">
     <div className="community content column-2">
       <div className="info">
-        <WidgetTitle size="large" mods="lines">Join RS Community</WidgetTitle>
-        <Subtitle text="If you want to learn coding or be a RS School mentor, speaking at developers meetups and conferences or taking part in RS clubs welcome to the Rolling Scopes community! Join us in social networks to be in touch!" />
+        <WidgetTitle size="large" mods="lines">
+          Join RS Community
+        </WidgetTitle>
+        <Subtitle>
+          If you want to learn coding or be a RS School mentor, speaking at developers meetups and
+          conferences or taking part in RS clubs welcome to the Rolling Scopes community! Join us in
+          social networks to be in touch!
+        </Subtitle>
         <div className="social-media-container">
           {communityGroups.map(({ title, href, icon }) => (
             <SocialMedia key={title} title={title} href={href} icon={icon} />

src/widgets/contribute/ui/contribute.tsx

@@ -29,8 +29,13 @@ export const Contribute = () => (
     <div className="contribute content">
       <div className="general">
         <div className="info">
-          <WidgetTitle size="medium" mods="asterisk">How to Contribute</WidgetTitle>
-          <Subtitle text="Contributing to The Rolling Scopes is not only a great way to give back to the community, but it's also an excellent way to enhance your own knowledge." />
+          <WidgetTitle size="medium" mods="asterisk">
+            How to Contribute
+          </WidgetTitle>
+          <Subtitle>
+            Contributing to The Rolling Scopes is not only a great way to give back to the
+            community, but it&apos;s also an excellent way to enhance your own knowledge.
+          </Subtitle>
           <Paragraph>
             Remember, teaching others is one of the best ways to learn - this is known as The
             Protégé Effect! There are several ways you can contribute, choose yours.

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

@@ -45,7 +45,11 @@ export const CourseMain = ({ courseName, lang = 'en', type }: CourseMainProps) =
         <div className={styles.info}>
           <SectionLabel label={status} />
           <WidgetTitle size="medium">{`${altTitle || title} Course`}</WidgetTitle>
-          {type && <Subtitle text={type} type="course-main" />}
+          {type && (
+            <Subtitle size="large" color="black">
+              {type}
+            </Subtitle>
+          )}
           <DateLang startDate={startDate} language={language} mode={mode} type="main" />
           <LinkCustom
             href={enroll}

src/widgets/events/ui/events.tsx

@@ -34,8 +34,14 @@ export const Events = () => {
       <div className={cn(cx('events', 'content'), 'content')}>
         <section className={cx('info')}>
           <SectionLabel label="events & meetups" />
-          <WidgetTitle size="medium" mods="asterisk">Meet us at events</WidgetTitle>
-          <Subtitle text="For years we have been organizing meetups and conferences, where you can always learn something new, share your knowledge, discover new technologies, meet old and find new friends." />
+          <WidgetTitle size="medium" mods="asterisk">
+            Meet us at events
+          </WidgetTitle>
+          <Subtitle>
+            For years we have been organizing meetups and conferences, where you can always learn
+            something new, share your knowledge, discover new technologies, meet old and find new
+            friends.
+          </Subtitle>
           <Paragraph>
             During
             {' '}

src/widgets/main/ui/main.tsx

@@ -10,7 +10,7 @@ export const Main = () => {
         <div className="left">
           <div className="title-container">
             <MainTitle>RS School</MainTitle>
-            <Subtitle text="Free courses. High motivation" />
+            <Subtitle color="black">Free courses. High motivation</Subtitle>
           </div>
           <h2 className="description">Connecting people, growing together, having fun</h2>
         </div>

src/widgets/mentors/ui/mentors.tsx

@@ -13,13 +13,15 @@ export const Mentors = () => {
     <section className="mentors container" id="mentors-wanted">
       <div className="mentors content column-2">
         <div className="mentors-info">
-          <WidgetTitle size="large" mods="lines">Mentors wanted!</WidgetTitle>
-          <Subtitle
-            text="The Rolling Scopes School is constantly looking for mentors from all over the world to
+          <WidgetTitle size="large" mods="lines">
+            Mentors wanted!
+          </WidgetTitle>
+          <Subtitle>
+            The Rolling Scopes School is constantly looking for mentors from all over the world to
             teach everyone who wants to learn the JavaScript language and the world of Front-end.
             Over the past few years, over 1500+ people have successfully completed our six month
-            training program."
-          />
+            training program.
+          </Subtitle>
           <LinkCustom
             href={LINKS.BECOME_MENTOR}
             icon={<ArrowIcon />}

src/widgets/merch/ui/merch.tsx

@@ -19,7 +19,7 @@ export const Merch = () => (
       <div className={cx('info')}>
         <SectionLabel label="merch" />
         <WidgetTitle size="medium" mods="asterisk">RS merch</WidgetTitle>
-        <Subtitle text="Are you an RS sloth fan and looking for RS merch?" />
+        <Subtitle>Are you an RS sloth fan and looking for RS merch?</Subtitle>
         <Paragraph>
           The wait is almost over as we&apos;re gearing up for the catalog of free web and print
           assets where you will find all merch collections and can print your own Rolling Scopes

src/widgets/numbers/ui/numbers.tsx

@@ -26,11 +26,13 @@ export const Numbers = () => {
       <div className="numbers content">
         <div className="text-container">
           <div>
-            <WidgetTitle size="medium" mods="asterisk">The Rolling Scopes in numbers</WidgetTitle>
-            <Subtitle
-              text="Everyone can discover our community, regardless of age, professional employment, or
-            place of residence."
-            />
+            <WidgetTitle size="medium" mods="asterisk">
+              The Rolling Scopes in numbers
+            </WidgetTitle>
+            <Subtitle>
+              Everyone can discover our community, regardless of age, professional employment, or
+              place of residence.
+            </Subtitle>
             <Paragraph>
               Developers from different companies and countries are connected to pass on your
               knowledge, enrich your network and just have fun.

src/widgets/required/ui/required.tsx

@@ -34,7 +34,7 @@ export const Required = ({ courseName, marked1, marked2 }: RequiredProps) => {
         <div className="column-2">
           {isKnowBeforeExist && (
             <article>
-              <Subtitle text={knowBefore.title} />
+              <Subtitle>{knowBefore.title}</Subtitle>
               <Actions actions={knowBefore.description} marked={marked1} />
             </article>
           )}
@@ -43,7 +43,7 @@ export const Required = ({ courseName, marked1, marked2 }: RequiredProps) => {
               ? willLearn.map((willLearn) => {
                 return (
                   <article key={willLearn.title}>
-                    <Subtitle text={willLearn.title} />
+                    <Subtitle>{willLearn.title}</Subtitle>
                     <Actions actions={willLearn.description} marked={marked2} />
                   </article>
                 );

src/widgets/speakers/ui/speakers.tsx

@@ -10,9 +10,14 @@ export const Speakers = () => (
   <div className="speakers container">
     <div className="speakers content">
       <div className="info">
-        <WidgetTitle size="large" mods="lines">Speakers wanted</WidgetTitle>
-        <Subtitle text="If you want to give a talk or conduct a workshop, present your open source project or share a success story, the Rolling Scopes welcomes all kinds of talk proposals." />
-        <Subtitle text="So don't hesitate to drop a short synopsis to RS Head " />
+        <WidgetTitle size="large" mods="lines">
+          Speakers wanted
+        </WidgetTitle>
+        <Subtitle>
+          If you want to give a talk or conduct a workshop, present your open source project or
+          share a success story, the Rolling Scopes welcomes all kinds of talk proposals.
+        </Subtitle>
+        <Subtitle>So don&apos;t hesitate to drop a short synopsis to RS Head</Subtitle>
 
         <div className="name" data-testid="contact-name">
           Dzmitry Varabei

src/widgets/study-with-us/study-with-us.test.tsx

@@ -23,7 +23,7 @@ describe('School Component', () => {
   it('renders the study options correctly', () => {
     const options = screen.getAllByRole('heading', { level: 3 });
 
-    expect(options.length).toBe(3);
+    expect(options.length).toBe(4);
   });
 
   it('renders the correct description for each study option', () => {

src/widgets/study-with-us/ui/study-with-us.tsx

@@ -15,8 +15,13 @@ export const StudyWithUs = () => (
       <div className="study">
         <div className="left">
           <SectionLabel label="education" />
-          <WidgetTitle size="medium" mods="asterisk">Study with RS School</WidgetTitle>
-          <Subtitle text="RS School is a free and community-based online education program conducted by The Rolling Scopes Community since 2013. " />
+          <WidgetTitle size="medium" mods="asterisk">
+            Study with RS School
+          </WidgetTitle>
+          <Subtitle>
+            RS School is a free and community-based online education program conducted by The
+            Rolling Scopes Community since 2013.
+          </Subtitle>
           <Paragraph>
             Currently 500+ developers from different countries and companies involve in the
             education process as mentors.

src/widgets/support/ui/support.tsx

@@ -12,9 +12,14 @@ export const Support = () => (
   <div className="support container">
     <div className="support content">
       <div className="info">
-        <WidgetTitle size="large" mods="lines">Support Us</WidgetTitle>
-        <Subtitle text="Your donations help us cover hosting, domains, licenses, and advertising for courses and events. Every donation, big or small, helps!" />
-        <Subtitle text="Thank you for your support!" />
+        <WidgetTitle size="large" mods="lines">
+          Support Us
+        </WidgetTitle>
+        <Subtitle>
+          Your donations help us cover hosting, domains, licenses, and advertising for courses and
+          events. Every donation, big or small, helps!
+        </Subtitle>
+        <Subtitle>Thank you for your support!</Subtitle>
         <LinkCustom
           href={LINKS.DONATE}
           icon={<ArrowIcon />}

src/widgets/training-program/training-program.data.tsx

@@ -50,7 +50,7 @@ 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>,
       <Actions
         key="aws cloud dev 04"
         actions={[
@@ -255,10 +255,10 @@ export const contentMap: ContentMap = {
         ]}
         marked
       />,
-      <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,
   },