feat: add font family section (#26)

# Type of Change

- [x] Feature (change that implements a new feature)
- [x] Refactor (change in moving or renaming files, directories etc...)

###

# Description

Added a new section specifically for font families

###

# Related Tickets

- Related Issue(s) #22 

###

# How Has This Been Tested?

1. Simply run the development server
2. Make some changes

**Test Configuration**:

- Browser: Google Chrome
- Browser version: 127.0.6533.100 (Official Build) (64-bit
- Text editor: Visual Studio Code

---------

Co-authored-by: MoonbamiOfficial <141120384+MoonbamiOfficial@users.noreply.github.com>

src/App.tsx

@@ -5,6 +5,7 @@ import ColorSection from "./components/sections/color/ColorSection";
 import GapSection from "./components/sections/gap/GapSection";
 import MarginSection from "./components/sections/margin/MarginSection";
 import PaddingSection from "./components/sections/padding/PaddingSection";
+import FontFamilySection from "./components/sections/font/family/FontFamilySection";
 
 const App = () => {
   return (
@@ -39,6 +40,13 @@ const App = () => {
         >
           <GapSection />
         </Section>
+        <Section
+          id="font family section"
+          title="font families"
+          desc="The appearance of texts that you see and read"
+        >
+          <FontFamilySection />
+        </Section>
       </main>
     </>
   );

src/components/sections/color/ColorSection.tsx

@@ -1,7 +1,7 @@
 import { colors } from "../../../lib/colors";
 import Grid from "../../common/grid/Grid";
 import ColorCard from "../../ui/colorcard/ColorCard";
-import colorStyles from "./color-section.module.scss";
+import Styles from "./color-section.module.scss";
 
 export type TextColorProps = {
   hex: string;
@@ -21,7 +21,7 @@ const ColorSection = () => {
         ));
   };
 
-  return <Grid className={`${colorStyles.color_grid}`}>{renderColors()}</Grid>;
+  return <Grid className={`${Styles.color_grid}`}>{renderColors()}</Grid>;
 };
 
 export default ColorSection;

src/components/sections/font/family/FontFamilySection.tsx

@@ -0,0 +1,24 @@
+import { fontFamilies } from "../../../../lib/fontFamiles";
+import { replaceSpacesToDash } from "../../../../utils/replaceSpacesToDash";
+import Styles from "./font-family.module.scss";
+import Card from "../../../ui/card/Card";
+import Grid from "../../../common/grid/Grid";
+
+const FontFamilySection = () => {
+  const renderFontFamilies = () => {
+    if (fontFamilies) {
+      return fontFamilies.map((fontFamily) => (
+        <Card
+          style={{
+            fontFamily: replaceSpacesToDash(fontFamily.name.toLowerCase()),
+          }}
+          details={fontFamily.name}
+        />
+      ));
+    }
+  };
+
+  return <Grid className={`${Styles.grid}`}>{renderFontFamilies()}</Grid>;
+};
+
+export default FontFamilySection;

src/components/sections/font/family/font-family.module.scss

@@ -0,0 +1,9 @@
+@import "../../../../styles/variables/colors";
+@import "../../../../styles/variables/border";
+@import "../../../../styles/variables/spacing";
+
+.grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: $lg;
+}
+

src/components/sections/gap/GapSection.tsx

@@ -1,10 +1,10 @@
-import styles from "./gap-section.module.scss";
+import Styles from "./gap-section.module.scss";
 import Grid from "../../common/grid/Grid";
 import Card from "../../ui/card/Card";
 
 const GapSection = () => {
   return (
-    <Grid className={`${styles.grid}`}>
+    <Grid className={`${Styles.grid}`}>
       <Card content={<MarginBox spacingSize="2" />} details="extra small" />
       <Card content={<MarginBox spacingSize="4" />} details="small" />
       <Card content={<MarginBox spacingSize="6" />} details="medium" />
@@ -21,10 +21,10 @@ type MarginBoxProps = {
 
 const MarginBox = ({ spacingSize }: MarginBoxProps) => {
   return (
-    <div className={`${styles.gap_wrapper}`}>
+    <div className={`${Styles.gap_wrapper}`}>
       <div>{spacingSize}</div>
       <div
-        className={`${styles.gap_content}`}
+        className={`${Styles.gap_content}`}
         style={{ width: spacingSize + "px " }}
       ></div>
       <p style={{ textTransform: "none" }}>px</p>

src/components/sections/margin/MarginSection.tsx

@@ -1,10 +1,10 @@
+import Styles from "./margin-section.module.scss";
 import Grid from "../../common/grid/Grid";
 import Card from "../../ui/card/Card";
-import styles from "./margin-section.module.scss";
 
 const MarginSection = () => {
   return (
-    <Grid className={`${styles.grid}`}>
+    <Grid className={`${Styles.grid}`}>
       <Card content={<MarginBox spacingSize="2px" />} details="extra small" />
       <Card content={<MarginBox spacingSize="4px" />} details="small" />
       <Card content={<MarginBox spacingSize="6px" />} details="medium" />
@@ -21,9 +21,9 @@ type MarginBoxProps = {
 
 const MarginBox = ({ spacingSize }: MarginBoxProps) => {
   return (
-    <div className={`${styles.margin_wrapper}`}>
+    <div className={`${Styles.margin_wrapper}`}>
       <div
-        className={`${styles.margin_content}`}
+        className={`${Styles.margin_content}`}
         style={{ margin: spacingSize }}
       >
         {spacingSize}

src/components/sections/padding/PaddingSection.tsx

@@ -1,10 +1,10 @@
+import Styles from "./padding-section.module.scss";
 import Grid from "../../common/grid/Grid";
 import Card from "../../ui/card/Card";
-import styles from "./padding-section.module.scss";
 
 const PaddingSection = () => {
   return (
-    <Grid className={`${styles.grid}`}>
+    <Grid className={`${Styles.grid}`}>
       <Card content={<PaddingBox spacingSize="2px" />} details="extra small" />
       <Card content={<PaddingBox spacingSize="4px" />} details="small" />
       <Card content={<PaddingBox spacingSize="6px" />} details="medium" />
@@ -21,7 +21,7 @@ type PaddingBoxProps = {
 
 const PaddingBox = ({ spacingSize }: PaddingBoxProps) => {
   return (
-    <div className={`${styles.padding_content}`} style={{ padding: spacingSize }}>
+    <div className={`${Styles.padding_content}`} style={{ padding: spacingSize }}>
       {spacingSize}
     </div>
   );

src/components/ui/card/Card.tsx

@@ -1,13 +1,15 @@
+import { CSSProperties } from "react";
 import styles from "./card.module.scss";
 
 type CardProps = {
-  content: React.ReactNode;
-  details: string;
+  content?: React.ReactNode;
+  details?: string;
+  style?: CSSProperties | undefined;
 };
 
-const Card = ({ content, details }: CardProps) => {
+const Card = ({ content, details, style }: CardProps) => {
   return (
-    <div className={`${styles.card}`}>
+    <div style={style} className={`${styles.card}`}>
       {content}
       <p className="">{details}</p>
     </div>

src/components/ui/card/card.module.scss

@@ -5,7 +5,7 @@
   max-width: 300px;
   min-width: 150px;
   box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  padding: 8px 16px;
+  padding: 12px 16px;
   // border: $regular solid rgb(121, 121, 121);
   border-radius: $sm;
   display: flex;

src/lib/fontFamiles.ts

@@ -0,0 +1,62 @@
+export const fontFamilies = [
+  {
+    name: "Poppins",
+  },
+  {
+    name: "Didot",
+  },
+  {
+    name: "Bodoni",
+  },
+  {
+    name: "Baskerville",
+  },
+  {
+    name: "Garamond",
+  },
+  {
+    name: "Times New Roman",
+  },
+  {
+    name: "New York",
+  },
+  {
+    name: "Gabriela Stencil",
+  },
+  {
+    name: "Minion",
+  },
+  {
+    name: "Georgia",
+  },
+  {
+    name: "Helvetica",
+  },
+  {
+    name: "Futura",
+  },
+  {
+    name: "Franklin Gothic",
+  },
+  {
+    name: "Avenir",
+  },
+  {
+    name: "Montserrat",
+  },
+  {
+    name: "Frutiger",
+  },
+  {
+    name: "News Gothic",
+  },
+  {
+    name: "Gotham",
+  },
+  {
+    name: "Gilroy",
+  },
+  {
+    name: "Univers",
+  },
+];

src/styles/globals.scss

@@ -8,7 +8,6 @@
   padding: 0;
   text-decoration: none;
   box-sizing: border-box;
-  font-family: "Poppins", sans-serif;
   transition: all 150ms ease-in-out;
 }
 
@@ -17,5 +16,6 @@ html {
 }
 
 body {
+  font-family: "Poppins", sans-serif;
   background-color: $background;
 }

src/utils/replaceSpacesToDash.ts

@@ -0,0 +1,5 @@
+export const replaceSpacesToDash = (text: string) => {
+  let newText = text.replace(/\s/g, "-");
+
+  return newText;
+};