- added title

- added body - added section base
epam · Mar 12, 2024 · fc93e1a · fc93e1a
1 parent a00fed4
commit fc93e1a
Show file tree

Hide file tree

Showing 40 changed files with 343 additions and 473 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 { Typography } from "@/components/text/typography.tsx";
+import { Title } from "@/components/title/title.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 { Typography } from "@/components/text/typography.tsx";
+import { Title } from "@/components/title/title.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 { Typography } from "@/components/text/typography.tsx";
+import { Title } from "@/components/title/title.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 { Typography } from "@/components/text/typography.tsx";
+import { Title } from "@/components/title/title.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/section-base/section-base.scss b/src/components/section-base/section-base.scss
@@ -0,0 +1,23 @@
+@use "@/styles/responsive-mixins";
+@use "@/styles/mixins";
+
+.section-base {
+  padding: 56px 16px;
+
+  &-title {
+    @include mixins.partial-underline;
+    @include mixins.h4;
+  }
+
+  @include responsive-mixins.md {
+    padding: 56px 24px;
+  }
+
+  @include responsive-mixins.lg {
+    padding: 64px 0;
+
+    &-title {
+      @include mixins.h2;
+    }
+  }
+}
diff --git a/src/components/section-base/section-base.tsx b/src/components/section-base/section-base.tsx
@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+import cc from "classcat";
+import { Title, TitleProps } from "@/components/title/title.tsx";
+import "./section-base.scss";
+
+export interface SectionBaseProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const SectionBaseComponent = ({ children, className }: SectionBaseProps) => (
+  <section className={cc(["section-base", className])}>{children}</section>
+);
+
+SectionBaseComponent.Title = function ({
+  className,
+  children,
+  ...delegatedProps
+}: TitleProps) {
+  return (
+    <Title
+      {...delegatedProps}
+      className={cc(["section-base-title", className])}
+    >
+      {children}
+    </Title>
+  );
+};
+
+export const SectionBase = SectionBaseComponent;