- added title

- added body - added section base
epam · Mar 12, 2024 · 51a0c02 · 51a0c02
1 parent 7768205
commit 51a0c02
Show file tree

Hide file tree

Showing 45 changed files with 360 additions and 507 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -203,7 +203,6 @@
     "no-void": "off",
     "no-continue": "off",
     "no-unused-vars": "off",
-    "no-case-declarations": "off",
     "no-restricted-imports": [
       "error",
       {

diff --git a/package.json b/package.json
@@ -30,11 +30,11 @@
     "@graphql-codegen/client-preset": "^4.2.4",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@types/graphql": "^14.5.0",
-    "@types/node": "^20.11.25",
-    "@types/react": "^18.2.64",
+    "@types/node": "^20.11.26",
+    "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.21",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
     "dotenv-cli": "^7.4.1",
     "eslint": "^8.57.0",
@@ -51,8 +51,8 @@
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
     "sass": "^1.71.1",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.5",
+    "typescript": "^5.4.0",
+    "vite": "^5.1.6",
     "vite-plugin-svgr": "^4.2.0"
   }
 }
diff --git a/src/components/action-link/action-link.scss b/src/components/action-link/action-link.scss
@@ -1,14 +1,13 @@
 @use "@/styles/responsive-mixins";
+@use "@/styles/mixins";
 
 .action-link {
   --_action-color: var(--action-color, var(--primary));
+  @include mixins.h5;
+  font-weight: 700;
   position: relative;
   display: inline-flex;
   align-items: center;
-  font-family: Lato, sans-serif;
-  font-size: 1rem;
-  font-weight: 700;
-  line-height: 1.5;
   color: var(--_action-color);
   text-decoration: none;
   width: fit-content;
@@ -42,6 +41,6 @@
   }
 
   @include responsive-mixins.lg {
-    font-size: 1.25rem;
+    @include mixins.h4;
   }
 }
diff --git a/src/components/error-boundary/error-boundary.tsx b/src/components/error-boundary/error-boundary.tsx
@@ -1,4 +1,6 @@
 import { Component, ErrorInfo, ReactNode } from "react";
+import { Title } from "@/components/title/title.tsx";
+import { Typography } from "@/components/typography/typography.tsx";
 
 interface Props {
   children?: ReactNode;
@@ -33,8 +35,8 @@ export class ErrorBoundary extends Component<Props, State> {
       return (
         // TODO: Ask designer about component
         <section>
-          <h1>Oops, something went wrong</h1>
-          <p>There are some issues while loading the page</p>
+          <Title as="h1">Oops, something went wrong</Title>
+          <Typography>There are some issues while loading the page</Typography>
         </section>
       );
     }

diff --git a/src/components/footer/footer.scss b/src/components/footer/footer.scss
@@ -1,4 +1,5 @@
 @use "@/styles/responsive-mixins";
+@use "@/styles/mixins";
 
 .footer {
   display: flex;
@@ -26,9 +27,8 @@
   }
 
   .social-title {
-    font-size: 1.25rem;
+    @include mixins.h4;
     font-weight: 600;
-    line-height: 1.5;
   }
 
   .social-links {
@@ -52,7 +52,6 @@
     font-family: "Open Sans", sans-serif;
     font-size: 0.75rem;
     font-weight: 600;
-    line-height: 1.5;
     gap: 12px;
   }
 

diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
@@ -1,4 +1,5 @@
 import { Link } from "react-router-dom";
+import { Title } from "@/components/title/title.tsx";
 import {
   ComponentSharedSocialIcon,
   PageEntity,
@@ -19,7 +20,11 @@ export const Footer = ({ socialLinks, heading, navigation }: FooterProps) => {
     <footer className="footer">
       {socialLinks && (
         <div className="social-info">
-          {heading && <h3 className="social-title">{heading}</h3>}
+          {heading && (
+            <Title as="h3" className="social-title">
+              {heading}
+            </Title>
+          )}
           <div className="social-links">
             {socialLinks.map(({ title, newTab, url, icon }) => {
               const iconData = icon?.data?.attributes;

diff --git a/src/components/image-banner/image-banner.scss b/src/components/image-banner/image-banner.scss
@@ -1,4 +1,5 @@
 @use "@/styles/responsive-mixins";
+@use "@/styles/mixins";
 
 .image-banner {
   position: relative;
@@ -33,17 +34,10 @@
   }
 
   &-title {
-    font-family: Lato, sans-serif;
-    font-size: 1.25rem;
-    font-weight: 500;
-    line-height: 1.5;
+    @include mixins.h4;
   }
 
   &-body {
-    font-family: "Open Sans", sans-serif;
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.5;
     margin-top: 8px;
   }
 
@@ -75,11 +69,7 @@
     }
 
     &-title {
-      font-size: 1.5rem;
-    }
-
-    &-body {
-      font-size: 1rem;
+      @include mixins.h3;
     }
   }
 }
diff --git a/src/components/image-banner/image-banner.tsx b/src/components/image-banner/image-banner.tsx
@@ -1,4 +1,6 @@
 import { ActionLink } from "@/components/action-link/action-link.tsx";
+import { Title } from "@/components/title/title.tsx";
+import { Typography } from "@/components/typography/typography.tsx";
 import "./image-banner.scss";
 
 export interface ImageBannerProps {
@@ -26,8 +28,8 @@ export const ImageBanner = ({
       </div>
       <div className="image-banner-content">
         <div className="image-banner-card">
-          <h2 className="image-banner-title">{title}</h2>
-          <p className="image-banner-body">{body}</p>
+          <Title className="image-banner-title">{title}</Title>
+          <Typography className="image-banner-body">{body}</Typography>
           <ActionLink href="/" className="image-banner-action">
             {action}
           </ActionLink>

diff --git a/src/components/information-card/information-card.scss b/src/components/information-card/information-card.scss
@@ -1,4 +1,5 @@
 @use "@/styles/responsive-mixins";
+@use "@/styles/mixins";
 
 .information-card {
   padding: 24px;
@@ -18,17 +19,7 @@
   }
 
   &-title {
-    font-family: Lato, sans-serif;
-    font-size: 1.25rem;
-    font-weight: 400;
-    line-height: 1.5;
-  }
-
-  &-body {
-    font-family: "Open Sans", sans-serif;
-    font-size: 0.875rem;
-    font-weight: 300;
-    line-height: 1.2;
+    @include mixins.h4;
   }
 
   &-image-wrapper {
@@ -46,7 +37,7 @@
 
     &-title {
       text-align: center;
-      font-size: 1rem;
+      @include mixins.h5;
     }
 
     &-image-wrapper {
@@ -72,11 +63,7 @@
     }
 
     &-title {
-      font-size: 1.5rem;
-    }
-
-    &-body {
-      font-size: 1rem;
+      @include mixins.h3;
     }
 
     &-image-wrapper {

diff --git a/src/components/information-card/information-card.tsx b/src/components/information-card/information-card.tsx
@@ -1,4 +1,6 @@
 import { Button } from "@/components/button/button.tsx";
+import { Title } from "@/components/title/title.tsx";
+import { Typography } from "@/components/typography/typography.tsx";
 import "./information-card.scss";
 
 export interface DescriptionCardProps {
@@ -19,8 +21,10 @@ export const InformationCard = ({
       <img className="" src={image} role="presentation" alt="" />
     </div>
     <div className="information-card-info">
-      <span className="information-card-title">{title}</span>
-      <p className="information-card-body">{body}</p>
+      <Title as="h4" className="information-card-title">
+        {title}
+      </Title>
+      <Typography className="information-card-body">{body}</Typography>
     </div>
     {action && (
       <Button className="information-card-action" variant="outline">

diff --git a/src/components/news-card/news-card.scss b/src/components/news-card/news-card.scss
@@ -1,4 +1,5 @@
 @use "@/styles/responsive-mixins";
+@use "@/styles/mixins";
 
 .news-card {
   --_text-color: var(--text-color, var(--black));
@@ -44,26 +45,17 @@
 
   &-title {
     flex-shrink: 0;
-    font-family: Lato, sans-serif;
-    font-size: 1rem;
-    font-weight: 500;
-    line-height: 1.5;
+    @include mixins.h5;
   }
 
   &-body {
     flex-grow: 1;
-    font-family: "Open Sans", sans-serif;
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.5;
   }
 
   &-action {
-    flex-shrink: 0;
-    font-family: Lato, sans-serif;
-    font-size: 1rem;
+    @include mixins.h5;
     font-weight: 600;
-    line-height: 1.5;
+    flex-shrink: 0;
     margin-top: 16px;
     text-decoration: none;
     color: var(--_action-color);
@@ -87,14 +79,6 @@
       padding: 16px 24px 24px;
     }
 
-    &-title {
-      font-weight: 600;
-    }
-
-    &-body {
-      font-size: 0.75rem;
-    }
-
     &-action {
       font-size: 0.875rem;
     }
@@ -110,12 +94,7 @@
     }
 
     &-title {
-      font-weight: 500;
-      font-size: 1.25rem;
-    }
-
-    &-body {
-      font-size: 1rem;
+      @include mixins.h4;
     }
 
     &-action {

diff --git a/src/components/news-card/news-card.tsx b/src/components/news-card/news-card.tsx
@@ -1,4 +1,6 @@
 import { ElementType, HTMLAttributes } from "react";
+import { Title } from "@/components/title/title.tsx";
+import { Typography } from "@/components/typography/typography.tsx";
 import "./news-card.scss";
 
 export type NewsCardTheme = "primary" | "secondary";
@@ -25,8 +27,10 @@ export const NewsCard = ({
       <img className="news-card-image" role="presentation" alt="" src={cover} />
     </div>
     <div className="news-card-content">
-      <span className="news-card-title">{title}</span>
-      <p className="news-card-body">{body}</p>
+      <Title as="h4" className="news-card-title">
+        {title}
+      </Title>
+      <Typography className="news-card-body">{body}</Typography>
       <a href="/" className="news-card-action">
         {action}
       </a>

diff --git a/src/components/secondary-card/secondary-card.scss b/src/components/secondary-card/secondary-card.scss
@@ -25,17 +25,11 @@
   }
 
   &-title {
-    font-family: Lato, sans-serif;
-    font-size: 1.25rem;
-    font-weight: 500;
+    @include mixins.h4;
     line-height: 1.75;
   }
 
   &-body {
-    font-family: "Open Sans", sans-serif;
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.5;
     flex-grow: 1;
   }
 
@@ -70,11 +64,7 @@
     grid-template-columns: 5fr minmax(auto, 3fr);
 
     &-title {
-      font-size: 1.5rem;
-    }
-
-    &-body {
-      font-size: 1rem;
+      @include mixins.h3;
     }
 
     &-actions {

diff --git a/src/components/secondary-card/secondary-card.tsx b/src/components/secondary-card/secondary-card.tsx
@@ -1,4 +1,6 @@
 import { Button } from "@/components/button/button.tsx";
+import { Title } from "@/components/title/title.tsx";
+import { Typography } from "@/components/typography/typography.tsx";
 import coverImage from "@/assets/images/secondary.png";
 import "./secondary-card.scss";
 
@@ -10,14 +12,14 @@ export const SecondaryCard = ({ theme = "primary" }: SecondaryCardProps) => {
   return (
     <div className="secondary-card" data-theme={theme}>
       <div className="secondary-card-info">
-        <h2 className="secondary-card-title">Through equipment</h2>
-        <p className="secondary-card-body">
+        <Title className="secondary-card-title">Through equipment</Title>
+        <Typography className="secondary-card-body">
           Connect-ed plays a crucial role in leveling the educational playing
           field by providing underprivileged students with donated electronic
           equipment, such as laptops. This support enables students to access
           essential educational resources, facilitating their learning and
           empowering them for a brighter future.
-        </p>
+        </Typography>
         <div className="secondary-card-actions">
           <Button variant="inverted" theme={theme}>
             Find out more