refactor: organise icons (freeCodeCamp#57498)

client/src/assets/chapter-icon.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { FsdChapters } from '../../../shared/config/chapters';
+import DatabaseIcon from './icons/database';
+import JavaScriptIcon from './icons/javascript';
+import ReactIcon from './icons/react';
+import ResponsiveDesign from './icons/responsive-design';
+import FreeCodeCampIcon from './icons/freecodecamp';
+import Html from './icons/html';
+import Css from './icons/css';
+
+const iconMap = {
+  [FsdChapters.Welcome]: FreeCodeCampIcon,
+  [FsdChapters.Html]: Html,
+  [FsdChapters.Css]: Css,
+  [FsdChapters.Javascript]: JavaScriptIcon,
+  [FsdChapters.FrontendLibraries]: ReactIcon,
+  [FsdChapters.RelationalDatabases]: DatabaseIcon,
+  [FsdChapters.Security]: ResponsiveDesign
+};
+
+type ChapterIconProps = {
+  chapter: FsdChapters;
+} & React.SVGProps<SVGSVGElement>;
+
+export function ChapterIcon(props: ChapterIconProps): JSX.Element {
+  const { chapter, ...iconProps } = props;
+  const Icon = iconMap[chapter] ?? ResponsiveDesign;
+
+  return <Icon {...iconProps} />;
+}

client/src/assets/icons/superblock-icon.tsx → client/src/assets/superblock-icon.tsx

@@ -1,25 +1,25 @@
 import React from 'react';
-import { SuperBlocks } from '../../../../shared/config/curriculum';
-import APIIcon from './api';
-import D3Icon from './d3';
-import DatabaseIcon from './database';
-import JavaScriptIcon from './javascript';
-import ReactIcon from './react';
-import TensorflowIcon from './tensorflow';
-import Algorithm from './algorithm';
-import Analytics from './analytics';
-import Clipboard from './clipboard';
-import PythonIcon from './python';
-import ResponsiveDesign from './responsive-design';
-import Shield from './shield';
-import VikingHelmet from './viking-helmet';
-import Graduation from './graduation';
-import CollegeAlgebra from './college-algebra';
-import CSharpLogo from './c-sharp-logo';
-import A2EnglishIcon from './a2-english';
-import B1EnglishIcon from './b1-english';
-import RosettaCodeIcon from './rosetta-code';
-import Code from './code';
+import { SuperBlocks } from '../../../shared/config/curriculum';
+import APIIcon from './icons/api';
+import D3Icon from './icons/d3';
+import DatabaseIcon from './icons/database';
+import JavaScriptIcon from './icons/javascript';
+import ReactIcon from './icons/react';
+import TensorflowIcon from './icons/tensorflow';
+import Algorithm from './icons/algorithm';
+import Analytics from './icons/analytics';
+import Clipboard from './icons/clipboard';
+import PythonIcon from './icons/python';
+import ResponsiveDesign from './icons/responsive-design';
+import Shield from './icons/shield';
+import VikingHelmet from './icons/viking-helmet';
+import Graduation from './icons/graduation';
+import CollegeAlgebra from './icons/college-algebra';
+import CSharpLogo from './icons/c-sharp-logo';
+import A2EnglishIcon from './icons/a2-english';
+import B1EnglishIcon from './icons/b1-english';
+import RosettaCodeIcon from './icons/rosetta-code';
+import Code from './icons/code';
 
 const iconMap = {
   [SuperBlocks.RespWebDesignNew]: ResponsiveDesign,
@@ -52,9 +52,8 @@ type SuperBlockIconProps = {
 } & React.SVGProps<SVGSVGElement>;
 
 export function SuperBlockIcon(props: SuperBlockIconProps): JSX.Element {
-  const { superBlock, className, ...iconProps } = props;
-  // fallback in case super block doesn't exist and for tests
+  const { superBlock, ...iconProps } = props;
   const Icon = iconMap[superBlock] ? iconMap[superBlock] : ResponsiveDesign;
 
-  return <Icon className={className} {...iconProps} />;
+  return <Icon {...iconProps} />;
 }

client/src/client-only-routes/show-certification.tsx

@@ -9,7 +9,7 @@ import { Container, Col, Row, Image, Button, Spacer } from '@freecodecamp/ui';
 
 import envData from '../../config/env.json';
 import { getLangCode } from '../../../shared/config/i18n';
-import FreeCodeCampLogo from '../assets/icons/freecodecamp';
+import FreeCodeCampLogo from '../assets/icons/freecodecamp-logo';
 import MicrosoftLogo from '../assets/icons/microsoft-logo';
 import { createFlashMessage } from '../components/Flash/redux';
 import { Loader } from '../components/helpers';

client/src/components/Header/components/exam-nav.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import FreeCodeCampLogo from '../../../assets/icons/freecodecamp';
+import FreeCodeCampLogo from '../../../assets/icons/freecodecamp-logo';
 import MicrosoftLogo from '../../../assets/icons/microsoft-logo';
 
 import './exam-nav.css';

client/src/components/Header/components/universal-nav.tsx

@@ -5,13 +5,14 @@ import { useMediaQuery } from 'react-responsive';
 import { isLanding } from '../../../utils/path-parsers';
 import { Link, SkeletonSprite } from '../../helpers';
 import { SEARCH_EXPOSED_WIDTH } from '../../../../config/misc';
+import FreeCodeCampLogo from '../../../assets/icons/freecodecamp-logo';
 import MenuButton from './menu-button';
 import NavLinks, { type NavLinksProps } from './nav-links';
-import NavLogo from './nav-logo';
-import './universal-nav.css';
 import AuthOrProfile from './auth-or-profile';
 import LanguageList from './language-list';
 
+import './universal-nav.css';
+
 const SearchBar = Loadable(() => import('../../search/searchBar/search-bar'));
 const SearchBarOptimized = Loadable(
   () => import('../../search/searchBar/search-bar-optimized')
@@ -62,7 +63,10 @@ const UniversalNav = ({
         to='/learn'
         data-playwright-test-label='header-universal-nav-logo'
       >
-        <NavLogo />
+        <FreeCodeCampLogo
+          aria-label={t('aria.fcc-curriculum')}
+          data-playwright-test-label='header-logo'
+        />
       </Link>
       <div className='universal-nav-right main-nav'>
         {pending ? (

client/src/components/Map/index.tsx

@@ -11,7 +11,7 @@ import {
   getStageOrder,
   superBlockStages
 } from '../../../../shared/config/curriculum';
-import { SuperBlockIcon } from '../../assets/icons/superblock-icon';
+import { SuperBlockIcon } from '../../assets/superblock-icon';
 import LinkButton from '../../assets/icons/link-button';
 import { ButtonLink } from '../helpers';
 import { getSuperBlockTitleForMap } from '../../utils/superblock-map-titles';

client/src/templates/Introduction/components/super-block-accordion.tsx

@@ -10,7 +10,7 @@ import DropDown from '../../../assets/icons/dropdown';
 // TODO: See if there's a nice way to incorporate the structure into data Gatsby
 // sources from the curriculum, rather than importing it directly.
 import superBlockStructure from '../../../../../curriculum/superblock-structure/full-stack.json';
-import { ChapterIcon } from '../../../assets/icons/chapter-icon';
+import { ChapterIcon } from '../../../assets/chapter-icon';
 import { FsdChapters } from '../../../../../shared/config/chapters';
 import Block from './block';
 

client/src/templates/Introduction/components/super-block-intro.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Alert, Spacer } from '@freecodecamp/ui';
 import { SuperBlocks } from '../../../../../shared/config/curriculum';
-import { SuperBlockIcon } from '../../../assets/icons/superblock-icon';
+import { SuperBlockIcon } from '../../../assets/superblock-icon';
 import { Link } from '../../../components/helpers';
 
 interface SuperBlockIntroProps {

shared/config/chapters.ts

@@ -4,6 +4,7 @@ export enum FsdChapters {
   Html = 'html',
   Css = 'css',
   Javascript = 'javascript',
+  FrontendLibraries = 'frontend-libraries',
   RelationalDatabases = 'relational-databases',
   Security = 'security-and-privacy'
 }