feat(learn): add catalog (freeCodeCamp#65596)

Co-authored-by: jdwilkin4 <jwilkin4@hotmail.com>

Author: ahmaxed

client/i18n/locales.test.ts

@@ -10,8 +10,9 @@ import {
   LangCodes
 } from '@freecodecamp/shared/config/i18n';
 import {
-  catalogSuperBlocks,
-  SuperBlocks
+  SuperBlocks,
+  superBlockStages,
+  SuperBlockStage
 } from '@freecodecamp/shared/config/curriculum';
 import intro from './locales/english/intro.json';
 
@@ -85,13 +86,14 @@ describe('Locale tests:', () => {
 describe('Intro file structure tests:', () => {
   const typedIntro = intro as unknown as Intro;
   const superblocks = Object.values(SuperBlocks);
+  const catalogSuperBlocks = superBlockStages[SuperBlockStage.Catalog];
   for (const superBlock of superblocks) {
     test(`superBlock ${superBlock} has required properties`, () => {
       expect(typeof typedIntro[superBlock].title).toBe('string');
 
       // catalog superblocks should have a summary
       if (catalogSuperBlocks.includes(superBlock)) {
-        expect(typedIntro[superBlock].intro).toBeInstanceOf(Array);
+        expect(typedIntro[superBlock].summary).toBeInstanceOf(Array);
       }
 
       expect(typedIntro[superBlock].intro).toBeInstanceOf(Array);

client/i18n/locales/english/intro.json

@@ -204,6 +204,10 @@
       ],
       "cta": "Start Learning Now (it's free)"
     },
+    "catalog": {
+      "heading": "Explore Course Catalog",
+      "seeAll": "See All Courses"
+    },
     "certification-heading": "Earn free verified certifications in:",
     "core-certs-heading": "Recommended curriculum:",
     "learn-english-heading": "Learn English for Developers:",
@@ -710,7 +714,8 @@
       "exam": "Exam",
       "warm-up": "Warm-up",
       "learn": "Learn",
-      "practice": "Practice"
+      "practice": "Practice",
+      "video": "Video"
     },
     "archive": {
       "title": "Archived Coursework",
@@ -1257,6 +1262,7 @@
       "college-algebra-with-python-v8-cert": "College Algebra with Python Certification",
       "foundational-c-sharp-with-microsoft": "Foundational C# with Microsoft",
       "foundational-c-sharp-with-microsoft-cert": "Foundational C# with Microsoft Certification",
+      "learn-python-for-beginners": "Learn Python for Beginners",
       "a2-english-for-developers": "A2 English for Developers",
       "a2-english-for-developers-cert": "A2 English for Developers Certification (Beta)",
       "b1-english-for-developers": "B1 English for Developers",
@@ -1429,6 +1435,21 @@
         "beginner": "Beginner",
         "intermediate": "Intermediate",
         "advanced": "Advanced"
+      },
+      "duration": "{{duration}} hours",
+      "no-results": "No courses found. Try adjusting your filters to see more results.",
+      "topic": {
+        "html": "HTML",
+        "css": "CSS",
+        "js": "JavaScript",
+        "react": "React",
+        "python": "Python",
+        "data-analysis": "Data Analysis",
+        "machine-learning": "Machine Learning",
+        "d3": "D3",
+        "api": "APIs",
+        "information-security": "Information Security",
+        "computer-fundamentals": "Computer Fundamentals"
       }
     }
   }

client/i18n/locales/english/translations.json

@@ -56,6 +56,31 @@ const iconMap = {
   [SuperBlocks.SemanticHtml]: Code,
   [SuperBlocks.FullStackOpen]: Code,
   [SuperBlocks.DevPlayground]: Code,
+  [SuperBlocks.HtmlFormsAndTables]: ResponsiveDesign,
+  [SuperBlocks.LabSurveyForm]: Code,
+  [SuperBlocks.HtmlAndAccessibility]: ResponsiveDesign,
+  [SuperBlocks.ComputerBasics]: Code,
+  [SuperBlocks.BasicCss]: Code,
+  [SuperBlocks.DesignForDevelopers]: Code,
+  [SuperBlocks.AbsoluteAndRelativeUnits]: Code,
+  [SuperBlocks.PseudoClassesAndElements]: Code,
+  [SuperBlocks.CssColors]: Code,
+  [SuperBlocks.StylingForms]: Code,
+  [SuperBlocks.CssBoxModel]: Code,
+  [SuperBlocks.CssFlexbox]: Code,
+  [SuperBlocks.LabPageOfPlayingCards]: Code,
+  [SuperBlocks.CssTypography]: Code,
+  [SuperBlocks.CssAndAccessibility]: ResponsiveDesign,
+  [SuperBlocks.CssPositioning]: Code,
+  [SuperBlocks.AttributeSelectors]: Code,
+  [SuperBlocks.LabBookInventoryApp]: Code,
+  [SuperBlocks.ResponsiveDesign]: ResponsiveDesign,
+  [SuperBlocks.LabTechnicalDocumentationPage]: Code,
+  [SuperBlocks.CssVariables]: Code,
+  [SuperBlocks.CssGrid]: Code,
+  [SuperBlocks.LabProductLandingPage]: Code,
+  [SuperBlocks.CssAnimations]: Code,
+  [SuperBlocks.LearnPythonForBeginners]: PythonIcon,
   [SuperBlocks.RespWebDesignV9]: ResponsiveDesign,
   [SuperBlocks.JsV9]: JavaScriptIcon,
   [SuperBlocks.FrontEndDevLibsV9]: ReactIcon,

client/src/assets/superblock-icon.tsx

@@ -94,7 +94,11 @@ function Map({ forLanding = false }: MapProps) {
         showUpcomingChanges
       })
         // remove legacy superblocks from main maps - shown in archive map only
-        .filter(stage => stage !== SuperBlockStage.Legacy)
+        .filter(
+          stage =>
+            stage !== SuperBlockStage.Legacy &&
+            stage !== SuperBlockStage.Catalog
+        )
         .map(stage => {
           const superblocks = superBlockStages[stage];
           if (superblocks.length === 0) {

client/src/components/Map/index.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faClock, faStairs } from '@fortawesome/free-solid-svg-icons';
+import { useTranslation } from 'react-i18next';
+import { Link } from './helpers';
+
+interface CatalogItemProps {
+  superBlock: string;
+  level: string;
+  hours: number;
+  topic: string;
+  showAllSummaries?: boolean;
+}
+
+const CatalogItem: React.FC<CatalogItemProps> = ({
+  superBlock,
+  level,
+  hours,
+  topic,
+  showAllSummaries = false
+}) => {
+  const { t } = useTranslation();
+
+  const { title, summary } = t(`intro:${superBlock}`, {
+    returnObjects: true
+  }) as {
+    title: string;
+    summary: string[];
+  };
+
+  return (
+    <Link to={`/learn/${superBlock}`} key={superBlock} className='catalog-item'>
+      <div className='catalog-item-top'>
+        <div className={`block-label block-label-${topic}`}>
+          {t(`curriculum.catalog.topic.${topic}`)}
+        </div>
+        <h3>{title}</h3>
+        {showAllSummaries ? (
+          summary.map((text, i) => <p key={i}>{text}</p>)
+        ) : summary && summary.length > 0 ? (
+          <p>{summary[0]}</p>
+        ) : null}
+      </div>
+      <div className='catalog-item-bottom'>
+        <div>
+          <FontAwesomeIcon icon={faStairs} />
+          &nbsp; {t(`curriculum.catalog.levels.${level}`)}
+        </div>
+        <div>
+          <FontAwesomeIcon icon={faClock} />
+          &nbsp;{' '}
+          {showAllSummaries
+            ? t('curriculum.catalog.duration', { duration: hours })
+            : `${hours} hours`}
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default CatalogItem;

client/src/components/catalog-item.tsx

@@ -22,6 +22,7 @@ const Faq = (): JSX.Element => {
       xs={12}
       className='faq-section'
     >
+      <Spacer size='l' />
       <h2 className='big-heading'>{t('landing.faq')}</h2>
       <Spacer size='xs' />
       {faqItems.map((faq, i) => (

client/src/components/landing/components/faq.tsx

@@ -0,0 +1,73 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Col, Row, Container } from '@freecodecamp/ui';
+import { Link } from '../../helpers';
+import { catalog } from '@freecodecamp/shared/config/catalog';
+import { SuperBlocks } from '@freecodecamp/shared/config/curriculum';
+import CatalogItem from '../../catalog-item';
+
+import '../landing.css';
+import LinkButton from '../../../assets/icons/link-button';
+
+const LandingCatalog = (): JSX.Element => {
+  const { t } = useTranslation();
+
+  const featuredCourses = useMemo(() => {
+    // Get featured courses: Learn Python for Beginners, Computer Basics, Basic HTML
+    const featuredSuperBlocks = [
+      SuperBlocks.LearnPythonForBeginners,
+      SuperBlocks.ComputerBasics,
+      SuperBlocks.BasicHtml
+    ];
+    const courses = catalog.filter(course =>
+      featuredSuperBlocks.includes(course.superBlock)
+    );
+    // Sort by the order in featuredSuperBlocks
+    return courses.sort(
+      (a, b) =>
+        featuredSuperBlocks.indexOf(a.superBlock) -
+        featuredSuperBlocks.indexOf(b.superBlock)
+    );
+  }, []);
+
+  return (
+    <div className='landing-catalog landing-catalog-container'>
+      <Container>
+        <Row>
+          <Col xs={12}>
+            <h2 className='big-heading text-center'>
+              {t('landing.catalog.heading')}
+            </h2>
+          </Col>
+        </Row>
+      </Container>
+      <Container fluid={true} className='landing-catalog-container'>
+        <Col md={10} mdOffset={1} sm={12} xs={12}>
+          <section className='landing-catalog-wrap'>
+            {featuredCourses.map(course => {
+              const { superBlock, level, hours, topic } = course;
+
+              return (
+                <CatalogItem
+                  key={superBlock}
+                  superBlock={superBlock}
+                  level={level}
+                  hours={hours}
+                  topic={topic}
+                  showAllSummaries={false}
+                />
+              );
+            })}
+            <Link to='/catalog' className='catalog-item catalog-item-see-all'>
+              <h3>{t('landing.catalog.seeAll')}</h3>
+              <LinkButton />
+            </Link>
+          </section>
+        </Col>
+      </Container>
+    </div>
+  );
+};
+
+LandingCatalog.displayName = 'LandingCatalog';
+export default LandingCatalog;

client/src/components/landing/components/landing-catalog.tsx

@@ -455,3 +455,28 @@ figcaption.caption {
   font-weight: normal;
   text-align: center;
 }
+
+/* Landing Catalog Styles */
+.landing-catalog-container {
+  background-color: var(--primary-background);
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.landing-catalog-wrap {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  width: 100%;
+  gap: 2rem;
+}
+
+.landing-catalog .catalog-item.catalog-item-see-all {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 280px;
+  text-align: center;
+  fill: var(--secondary-color);
+  flex-direction: row;
+  gap: 10px;
+}

client/src/components/landing/landing.css

@@ -1,22 +1,83 @@
 .catalog-wrap {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  width: 100%;
   gap: 2rem;
-  justify-content: space-evenly;
+}
+
+.catalog-filters {
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-start;
   flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+
+.catalog-filters .dropdown {
+  min-width: 250px;
+}
+
+.catalog-filters .dropdown-menu {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.catalog-filters .dropdown-item {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+}
+
+.catalog-filters button {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
+.catalog-filters .dropdown-menu .dropdown-item input[type='checkbox'] {
+  flex-shrink: 0;
+}
+
+.filter-checkbox {
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+  margin: 0 0.5rem 0 0;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
+.catalog-item-top {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .catalog-item {
+  text-decoration: none;
   padding: 1rem;
   background-color: var(--primary-background);
-  width: 400px;
-  min-height: 300px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  border: 1px solid var(--background-quaternary);
+  max-width: 400px;
+}
+
+.catalog-item h3 {
+  margin: 0;
 }
 
 .catalog-item-bottom {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
+  color: var(--quaternary-color);
+  font-size: 0.9rem;
+}
+
+.catalog-item p {
+  margin-bottom: 0.9rem;
 }