Home Page Prep

app/components/ui/Cards/CategoryCard.tsx

@@ -3,16 +3,20 @@ import styles from "./CategoryCard.module.scss";
 
 interface CategoryCardProps {
   label: string;
-  icon: string;
+  slug: string;
+  icon: {
+    name: string;
+    provider: string;
+  };
 }
+
 export const CategoryCard = (props: CategoryCardProps) => {
-  const { label, icon } = props;
-  const searchQuery =
-    label === "See all services" ? "" : encodeURIComponent(label);
+  const { label, icon, slug } = props;
+  const iconName = `${icon.provider} ${icon.name}`;
 
   return (
-    <a href={`/service-finder${searchQuery}`} className={styles.categoryCard}>
-      <span className={`fas ${icon} ${styles.icon}`} />
+    <a href={`/service-finder${slug}`} className={styles.categoryCard}>
+      <span className={`${iconName} ${styles.icon}`} />
       <p className={styles.categoryTitle}>{label}</p>
     </a>
   );

app/components/ui/Cards/OppEventCard.module.scss

@@ -10,6 +10,10 @@
   position: relative;
   cursor: pointer;
 
+  &:focus-within {
+    outline: 3px solid $color-secondary;
+  }
+
   &.opportunity {
     flex-direction: column;
   }
@@ -36,18 +40,28 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    align-items: flex-start;
     gap: $general-spacing-md;
     padding: $general-spacing-lg;
     height: 100%;
     width: 100%;
 
     @media screen and (max-width: $break-tablet-p) {
       padding: $general-spacing-md;
+
+      button {
+        justify-content: flex-start;
+      }
     }
 
     .contentTitle {
       line-height: 125%;
       margin-bottom: $general-spacing-md;
+
+      &:active,
+      :focus {
+        outline: none;
+      }
     }
 
     .contentTitle a {

app/components/ui/Cards/OppEventCard.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Button } from "components/ui/inline/Button/Button";
 import styles from "./OppEventCard.module.scss";
 import { OppEventDate } from "./OppEventDate";
 
@@ -32,7 +33,9 @@ export const OppEventCard = (props: OppEventCardProps) => {
           </div>
         </div>
 
-        <p className={styles.contentSubtext}>View more</p>
+        <Button arrowVariant="after" variant="linkBlue" size="lg">
+          View more
+        </Button>
       </div>
     </div>
   );

app/components/ui/Section/CategorySection.module.scss

@@ -2,16 +2,11 @@
 
 .categorySection {
   background-color: $color-secondary;
-  padding: $spacing-24 $spacing-32;
 
   h2 {
     margin-bottom: $general-spacing-s;
   }
 
-  @media screen and (max-width: $break-tablet-p) {
-    padding: $general-spacing-xl $general-spacing-md;
-  }
-
   .categoryCards {
     display: grid;
     grid-template-columns: repeat(4, 1fr);

app/components/ui/Section/CategorySection.tsx

@@ -1,67 +1,71 @@
+import { HomePageSection } from "pages/HomePage/components/Section";
 import React from "react";
 import { CategoryCard } from "../Cards/CategoryCard";
 import styles from "./CategorySection.module.scss";
 
-const categories = [
-  {
-    label: "Arts, Culture, & Identity",
-    icon: "fa-palette",
-  },
-  {
-    label: "Childcare",
-    icon: "fa-baby",
-  },
-  {
-    label: "Education",
-    icon: "fa-school",
-  },
-  {
-    label: "Family Support",
-    icon: "fa-people-roof",
-  },
-  {
-    label: "Health & Wellness",
-    icon: "fa-heart-pulse",
-  },
-  {
-    label: "Sports & Recreation",
-    icon: "fa-running",
-  },
-  {
-    label: "Youth Workforce & Life Skills",
-    icon: "fa-briefcase",
-  },
-  {
-    label: "See all services",
-    icon: "fa-arrow-right",
-  },
-];
+interface Category {
+  icon: {
+    name: string;
+    provider: string;
+  };
+  label: string;
+  slug: string;
+  name: string;
+}
 
-/*
-TODO: future PR
-- Pull in title and description data 
-- Remove hardcoded category data
-- add in background color field in sanity schema
-*/
+interface FeaturedCategoriesSection {
+  category: Category[];
+  name: string;
+}
+
+export interface FeaturedCategoriesData {
+  header: string;
+  subheader: string;
+  backgroundColor: string;
+  featuredCategoriesSection: FeaturedCategoriesSection[];
+}
+
+interface CategorySectionProps {
+  sectionData: FeaturedCategoriesData;
+}
+
+export const CategorySection = (props: CategorySectionProps) => {
+  const { sectionData } = props;
+
+  if (!sectionData) {
+    return <div>Loading...</div>;
+  }
+
+  const { header, subheader, backgroundColor, featuredCategoriesSection } =
+    sectionData;
+  const featuredCategories = featuredCategoriesSection[0].category;
 
-export const CategorySection = () => {
-  // const {sectionData} = props;
-  // const {header, subheader, backgroundColor} = sectionData
   return (
-    // <HomePageSection title={header} description={subheader} backgroundColor={backgroundColor}>
-    <div className={styles.categorySection}>
-      <div className={styles.categoryCards}>
-        {categories.map((category) => {
-          return (
-            <CategoryCard
-              key={category.label}
-              label={category.label}
-              icon={category.icon}
-            />
-          );
-        })}
+    <HomePageSection
+      title={header}
+      description={subheader}
+      backgroundColor={backgroundColor}
+    >
+      <div className={styles.categorySection}>
+        <div className={styles.categoryCards}>
+          {featuredCategories.map((category) => {
+            return (
+              <CategoryCard
+                key={category.label}
+                label={category.label}
+                slug={category.slug}
+                icon={category.icon}
+              />
+            );
+          })}
+          <CategoryCard
+            key="See all services"
+            label="See all services"
+            slug=""
+            icon={{ provider: "fas", name: "fa-arrow-right" }}
+          />
+        </div>
       </div>
-    </div>
-    // </HomePageSection>
+    </HomePageSection>
   );
 };

app/components/ui/Section/OppEventCardSection.module.scss

@@ -1,69 +1,29 @@
 @import "../../../styles/utils/_helpers.scss";
 
-.oppEventSection {
+.cardsContainer {
   display: flex;
-  flex-direction: column;
-  gap: $general-spacing-xl;
-  overflow: hidden;
+  gap: $general-spacing-lg;
   width: 100%;
-  padding: $spacing-24 $spacing-32;
+  height: 100%;
 
   &.event {
-    background: $color-brand-dark;
-  }
-
-  @media screen and (max-width: $break-tablet-s) {
-    padding: $general-spacing-xl $general-spacing-md;
-  }
-
-  .oppEvent__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    h2 {
-      margin-bottom: $general-spacing-s;
-    }
-
-    &.event {
-      h2,
-      p {
-        color: $white;
-      }
-    }
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
 
     @media screen and (max-width: $break-tablet-p) {
-      gap: $general-spacing-s;
+      display: flex;
       flex-direction: column;
-      align-items: stretch;
     }
   }
 
-  .cardsContainer {
-    display: flex;
-    gap: $general-spacing-lg;
-    width: 100%;
-    height: 100%;
-
-    &.event {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      grid-template-rows: repeat(2, 1fr);
-
-      @media screen and (max-width: $break-tablet-p) {
-        display: flex;
-        flex-direction: column;
-      }
-    }
-
-    @media screen and (max-width: 1336px) {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-    }
+  @media screen and (max-width: 1336px) {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
 
-    @media screen and (max-width: $break-tablet-p) {
-      display: flex;
-      flex-direction: column;
-    }
+  @media screen and (max-width: $break-tablet-p) {
+    display: flex;
+    flex-direction: column;
   }
 }