feat(client/UI): add icons for chapters (#57465)

client/src/assets/icons/chapter-icon.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FsdChapters } from '../../../../shared/config/chapters';
+import DatabaseIcon from './database';
+import JavaScriptIcon from './javascript';
+import ReactIcon from './react';
+import ResponsiveDesign from './responsive-design';
+import FreeCodeCampIcon from './freecodecamp-icon';
+import Html from './html';
+import Css from './css';
+
+const iconMap = {
+  freecodecamp: FreeCodeCampIcon,
+  html: Html,
+  css: Css,
+  javascript: JavaScriptIcon,
+  'frontend-libraries': ReactIcon,
+  'relational-databases': DatabaseIcon,
+  'security-and-privacy': ResponsiveDesign
+};
+
+type ChapterIconProps = {
+  chapter: FsdChapters;
+} & React.SVGProps<SVGSVGElement>;
+
+export function ChapterIcon(props: ChapterIconProps): JSX.Element {
+  const { chapter, ...iconProps } = props;
+  // fallback to RWD Icon
+  const Icon = iconMap[chapter] ?? ResponsiveDesign;
+
+  return <Icon {...iconProps} />;
+}

client/src/assets/icons/css.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+function Css(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' {...props}>
+      <path d='M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3 .1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2 .1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z' />
+    </svg>
+  );
+}
+
+Css.displayName = 'Css';
+
+export default Css;

client/src/assets/icons/freecodecamp-icon.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+function FreeCodeCampIcon(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' {...props}>
+      <path d='M97.2 96.2c10.4-10.7 16-17.1 16-21.9 0-2.8-1.9-5.5-3.8-7.4A14.8 14.8 0 0 0 101 64.1c-8.5 0-20.9 8.8-35.8 25.7C23.7 137 2.5 182.8 3.4 250.3s17.5 117 54.1 161.9C76.2 435.9 90.6 448 100.9 448a13.6 13.6 0 0 0 8.4-3.8c1.9-2.8 3.8-5.6 3.8-8.4 0-5.6-3.9-12.2-13.2-20.6-44.5-42.3-67.3-97-67.5-165C32.3 188.8 54 137.8 97.2 96.2zM239.5 420.1c.6 .4 .9 .6 .9 .6zm93.8 .6 .2-.1C333.2 420.6 333.2 420.7 333.3 420.6zm3.1-158.2c-16.2-4.2 50.4-82.9-68.1-177.2 0 0 15.5 49.4-62.8 159.6-74.3 104.4 23.5 168.7 34 175.2-6.7-4.4-47.4-35.7 9.6-128.6 11-18.3 25.5-34.9 43.5-72.2 0 0 15.9 22.5 7.6 71.1C287.7 364 354 342.9 355 343.9c22.8 26.8-17.7 73.5-21.6 76.6 5.5-3.7 117.7-78 33-188.1C360.4 238.4 352.6 266.6 336.4 262.4zM510.9 89.7C496 72.8 483.5 64 475 64a14.8 14.8 0 0 0 -8.4 2.8c-1.9 1.9-3.8 4.7-3.8 7.4 0 4.8 5.6 11.3 16 21.9 43.2 41.6 65 92.6 64.8 154.1-.2 68-23 122.6-67.5 165-9.3 8.4-13.2 14.9-13.2 20.6 0 2.8 1.9 5.6 3.8 8.4A13.6 13.6 0 0 0 475.1 448c10.3 0 24.7-12.1 43.5-35.8 36.6-44.9 53.1-94.4 54.1-161.9S552.3 137 510.9 89.7z' />
+    </svg>
+  );
+}
+
+FreeCodeCampIcon.displayName = 'FreeCodeCampIcon';
+
+export default FreeCodeCampIcon;

client/src/assets/icons/html.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+function Html(
+  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
+): JSX.Element {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' {...props}>
+      <path d='M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z' />
+    </svg>
+  );
+}
+
+Html.displayName = 'Html';
+
+export default Html;

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

@@ -27,18 +27,24 @@
   border: none;
   background-color: transparent;
   width: 100%;
-  text-align: start;
   padding: 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
+.super-block-accordion .chapter-button .chapter-icon-and-text {
+  display: flex;
+  align-items: center;
+  column-gap: 10px;
+  font-size: 1.5em;
+}
+
 .super-block-accordion .module-button {
   border: none;
   background-color: transparent;
   width: 100%;
-  text-align: start;
+  font-size: 1.25em;
   padding: 16px;
   display: flex;
   align-items: center;

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

@@ -10,6 +10,8 @@ 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 { FsdChapters } from '../../../../../shared/config/chapters';
 import Block from './block';
 
 import './super-block-accordion.css';
@@ -55,7 +57,13 @@ const Chapter = ({ dashedName, children, isExpanded }: ChapterProps) => {
   return (
     <Disclosure as='li' className='chapter' defaultOpen={isExpanded}>
       <Disclosure.Button className='chapter-button'>
-        {t(`intro:full-stack-developer.chapters.${dashedName}`)}
+        <div className='chapter-icon-and-text'>
+          <ChapterIcon
+            className='map-icon'
+            chapter={dashedName as FsdChapters}
+          />
+          {t(`intro:full-stack-developer.chapters.${dashedName}`)}
+        </div>
         <DropDown />
       </Disclosure.Button>
       <Disclosure.Panel as='ul' className='chapter-panel'>

shared/config/chapters.ts

@@ -0,0 +1,9 @@
+// TODO: Dynamically create these from intro.json or full-stack.json
+export enum FsdChapters {
+  Welcome = 'freecodecamp',
+  Html = 'html',
+  Css = 'css',
+  Javascript = 'javascript',
+  RelationalDatabases = 'relational-databases',
+  Security = 'security-and-privacy'
+}