NJWE-2499 - Training Details frontend update

next.config.mjs

@@ -7,10 +7,12 @@ const nextConfig = {
     REACT_APP_ENVIRONMENT: process.env.REACT_APP_ENVIRONMENT,
     REACT_APP_PREVIEW_API: process.env.REACT_APP_PREVIEW_API,
     REACT_APP_SPACE_ID: process.env.REACT_APP_SPACE_ID,
-    REACT_APP_FEATURE_CAREER_PATHWAYS: process.env.REACT_APP_FEATURE_CAREER_PATHWAYS,
+    REACT_APP_FEATURE_CAREER_PATHWAYS:
+      process.env.REACT_APP_FEATURE_CAREER_PATHWAYS,
     REACT_APP_FEATURE_MULTILANG: process.env.REACT_APP_FEATURE_MULTILANG,
     REACT_APP_FEATURE_PINPOINT: process.env.REACT_APP_FEATURE_PINPOINT,
-    REACT_APP_FEATURE_SHOW_PINPOINT_SEGMENTS: process.env.REACT_APP_FEATURE_SHOW_PINPOINT_SEGMENTS,
+    REACT_APP_FEATURE_SHOW_PINPOINT_SEGMENTS:
+      process.env.REACT_APP_FEATURE_SHOW_PINPOINT_SEGMENTS,
     REACT_APP_SITE_NAME: process.env.REACT_APP_SITE_NAME,
     REACT_APP_SITE_URL: process.env.REACT_APP_SITE_URL,
   },
@@ -20,11 +22,15 @@ const nextConfig = {
   async rewrites() {
     return [
       {
-        source: '/api/:path*',
-        destination: 'http://localhost:8080/:path*', // Proxy all API calls to backend
+        source: "/api/:path*",
+        destination: "http://localhost:8080/:path*", // Proxy all API calls to backend
       },
     ];
   },
+  sassOptions: {
+    // Silences the 'legacy-js-api' deprecation warning
+    silenceDeprecations: ["legacy-js-api"],
+  },
 };
 
 export default nextConfig;

package.json

@@ -43,8 +43,8 @@
     "react-paginate": "^8.2.0",
     "react-to-print": "^3.0.2",
     "run": "^1.5.0",
-    "sass": "^1.81.0",
-    "sass-loader": "^16.0.3"
+    "sass": "^1.82.0",
+    "sass-loader": "^16.0.4"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",

src/app/training/[code]/CipDrawer.tsx

@@ -0,0 +1,74 @@
+import { Drawer } from "@components/modules/Drawer";
+import { Heading } from "@components/modules/Heading";
+
+export const CipDrawer = ({
+  cipDrawerOpen,
+  setCipDrawerOpen,
+}: {
+  cipDrawerOpen: boolean;
+  setCipDrawerOpen: (value: boolean) => void;
+}) => {
+  return (
+    <Drawer open={cipDrawerOpen} setOpen={setCipDrawerOpen}>
+      <Heading level={3}>
+        Classification of Instructional Programs (CIP) codes
+      </Heading>
+      <p>
+        Classification of Instructional Programs (CIP) codes, are standardized
+        codes used to categorize academic programs and courses. Each program or
+        course is assigned a CIP code based on its content and subject matter.
+        <sup>1.</sup> <sup>2.</sup>
+      </p>
+      <p>
+        You can find a list of CIP codes{" "}
+        <a
+          href="https://nces.ed.gov/ipeds/cipcode/browse.aspx?y=56"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          here.
+        </a>
+      </p>
+      <br />
+      <div className="small sources">
+        <span>
+          <sup>1.</sup> Sources
+          <ul>
+            <li>
+              National Center for Education Statistics (NCES):
+              <br />
+              <a
+                href="https://nces.ed.gov/ipeds/cipcode/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                https://nces.ed.gov/ipeds/cipcode/
+              </a>
+            </li>
+            <li>
+              U.S. Department of Education:
+              <br />
+              <a
+                href="https://www.ed.gov/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                https://www.ed.gov/
+              </a>
+            </li>
+          </ul>
+        </span>
+        <p>
+          <sup>2.</sup> This definition was generated with the help of{" "}
+          <a
+            href="https://chat.openai.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            chatGPT(3.5)
+          </a>
+        </p>
+      </div>
+    </Drawer>
+  );
+};