348-refactor: Title component refactor

eslint.config.js

@@ -92,7 +92,7 @@ export default [
       'react/prop-types': 'off',
       'react/react-in-jsx-scope': 'off',
       'react-refresh/only-export-components': [
-        'warn',
+        'off',
         { allowConstantExport: true },
       ],
 

package.json

@@ -20,6 +20,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.11",
     "nextjs-toploader": "^1.6.12",

src/app/layouts/base-layout/components/partnered/partnered.tsx

@@ -1,11 +1,12 @@
 import { AwsLogo, EpamLogo, GithubLogo, JetBrainsLogo } from '@/shared/icons';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './partnered.scss';
 
 export const Partnered = () => (
   <div className="partnered container" data-testid="partnered">
     <div className="partnered content">
-      <div className="title">Partnered with</div>
+      <WidgetTitle size="small">Partnered with</WidgetTitle>
       <div className="partners">
         <EpamLogo />
         <JetBrainsLogo />

src/app/styles/index.scss

@@ -33,6 +33,10 @@ li {
   padding: 0;
 }
 
+h2 {
+  margin: 0;
+}
+
 figure {
   margin: 0;
   padding: 0;

src/app/styles/normalize.scss

@@ -35,10 +35,11 @@ main {
 /**
    * Correct the font size and margin on `h1` elements within `section` and
    * `article` contexts in Chrome, Firefox, and Safari.
+   * delete h1 margin
    */
 
 h1 {
-  margin: 0.67em 0;
+  margin: 0;
   font-size: 2em;
 }
 

src/entities/courses/ui/general/general.tsx

@@ -1,13 +1,13 @@
 import { Link } from 'react-router-dom';
-import { Title } from '@/shared/ui/title';
+import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './general.scss';
 
 export const General = () => {
   return (
     <section className="general container">
       <div className="general content">
-        <Title text="General" />
+        <WidgetTitle size="small">General</WidgetTitle>
         <div className="general-info">
           <div className="materials">
             <h2 className="title">Materials</h2>

src/entities/courses/ui/main/main.tsx

@@ -1,6 +1,6 @@
 import mentors from '@/shared/assets/mentor-with-his-students.webp';
 import Image from '@/shared/ui/image';
-import { Title, TitleType } from '@/shared/ui/title';
+import { MainTitle } from '@/shared/ui/main-title';
 
 import './main.scss';
 
@@ -10,7 +10,7 @@ export const Main = () => {
       <div className="courses-main content">
         <div className="left">
           <div className="title-container">
-            <Title text="Our Courses" type={TitleType.ExtraBig} />
+            <MainTitle>Our Courses</MainTitle>
           </div>
           <h2 className="description">Journey to full stack mastery</h2>
         </div>

src/shared/ui/main-title/index.ts

@@ -0,0 +1 @@
+export { MainTitle } from './main-title';

src/shared/ui/main-title/main-title.module.scss

@@ -0,0 +1,11 @@
+.title {
+  font-size: 96px;
+  font-weight: 700;
+  color: $color-black;
+  text-align: left;
+  letter-spacing: -0.04em;
+
+  @include media-tablet {
+    font-size: 60px;
+  }
+}

src/shared/ui/main-title/main-title.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { MainTitle, cx } from './main-title';
+
+describe('MainTitle component', () => {
+  it('renders without crashing', () => {
+    render(<MainTitle>TestTitle</MainTitle>);
+    const title = screen.getByText('TestTitle');
+
+    expect(title).toBeInTheDocument();
+  });
+
+  it('displays h1 tag', () => {
+    render(<MainTitle />);
+    const element = screen.getByRole('heading', { level: 1 });
+
+    expect(element).toBeInTheDocument();
+  });
+
+  it('displays styles correctly', () => {
+    render(<MainTitle />);
+    const element = screen.getByRole('heading', { level: 1 });
+
+    expect(element).toHaveClass(cx('title'));
+  });
+
+  it('renders children correctly', () => {
+    render(
+      <MainTitle>
+        <div>Child element</div>
+      </MainTitle>,
+    );
+
+    const child = screen.getByText('Child element');
+
+    expect(child).toBeInTheDocument();
+  });
+});

src/shared/ui/main-title/main-title.tsx

@@ -0,0 +1,22 @@
+import { HTMLAttributes } from 'react';
+import { VariantProps, cva } from 'class-variance-authority';
+import classNames from 'classnames/bind';
+
+import styles from './main-title.module.scss';
+
+type MainTitleProps = HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof mainTitleVariants>;
+
+export const cx = classNames.bind(styles);
+
+const mainTitleVariants = cva(cx('title'));
+
+export const MainTitle = ({ children, className, ...props }: MainTitleProps) => {
+  return (
+    <h1
+      {...props}
+      className={mainTitleVariants({ className })}
+    >
+      {children}
+    </h1>
+  );
+};

src/shared/ui/widget-title/index.ts

@@ -0,0 +1 @@
+export { WidgetTitle } from './widget-title';

src/shared/ui/widget-title/widget-title.module.scss

@@ -0,0 +1,43 @@
+.title {
+  font-weight: $font-weight-medium;
+  letter-spacing: -0.04em;
+
+  &::before {
+    margin-right: 8px;
+    color: $color-red;
+  }
+}
+
+.small {
+  font-size: 36px;
+  line-height: 44px;
+  letter-spacing: 0;
+}
+
+.medium {
+  font-size: 44px;
+  line-height: 52px;
+
+  @include media-tablet {
+    font-size: 36px;
+    line-height: 44px;
+  }
+}
+
+.large {
+  font-size: 52px;
+  line-height: 64px;
+
+  @include media-tablet {
+    font-size: 36px;
+    line-height: 44px;
+  }
+}
+
+.lines::before {
+  content: '‖';
+}
+
+.asterisk::before {
+  content: '*';
+}