Merge pull request #88 from tech-for-better/86-skills

86 skills

.eslintrc

@@ -35,7 +35,7 @@
     "object-curly-newline": "off",
     "arrow-body-style": ["error", "always"],
     "camelcase": "off",
-    "@typescript-eslint/camelcase": ["error", {"allow": ["online_only", "career_paths", "soc_code", "total_price", "start_year", "end_year"]}]
+    "@typescript-eslint/camelcase": ["error", {"allow": ["online_only", "career_paths", "soc_code", "total_price", "career_progression", "start_year", "end_year"]}]
   },
   "overrides": [
     {

README.md

@@ -6,7 +6,6 @@
 
 - Career path data
   - Information to be uploaded to strapi admin site
-  - Supply a 70x70 .png image for the card/link
   - It should have a white forefront and a transparent background. We recommend getting images from https://www.flaticon.com/
 
 

src/components/careerPath/CareerPathDetail.tsx

@@ -14,6 +14,7 @@ interface CareerPath {
   name: string;
   strapiId: number;
   video_url: string;
+  career_progressioion: string;
 }
 
 const ReverseCardGroupStyle = styled(CardGroupStyle)`
@@ -31,7 +32,7 @@ const Video = styled.iframe`
 `;
 
 const CareerPathDetail: React.FC<CareerPath> = ({
-  path: { description, lmiCode, name, videoUrl },
+  path: { description, lmiCode, name, videoUrl, career_progression },
 }) => {
   return (
     <main>
@@ -41,14 +42,10 @@ const CareerPathDetail: React.FC<CareerPath> = ({
           <StyledCard>
             <Card.Body>
               <Card.Title className="mb-4">
-                <strong>Skills You will acquire:</strong>
+                <strong>Career progression</strong>
               </Card.Title>
               <Card.Text>
-                <li>User research</li>
-                <li>Finding the Colors in Nature</li>
-                <li>Time Managment</li>
-                <li>{lmiCode}</li>
-                <li>This section is hardcoded we need to update schema on the backend</li>
+                <ReactMarkdown source={career_progression} />
               </Card.Text>
             </Card.Body>
           </StyledCard>

src/pages/career-paths.tsx

@@ -15,6 +15,7 @@ const CareerPaths: React.FC<PageProps> = () => {
           node {
             color
             description
+            career_progression
             icon_url
             name
             strapiId

src/templates/CareerPath.tsx

@@ -13,6 +13,7 @@ const CareerPath: React.FC<PageProps> = ({ data }) => {
     name,
     video_url: videoUrl,
     lmi_code: lmiCode,
+    career_progression,
   } = data?.careers?.edges[0]?.node;
 
   const courses = (data?.careers?.edges[0]?.node.courses).map((a) => {
@@ -23,7 +24,7 @@ const CareerPath: React.FC<PageProps> = ({ data }) => {
 
   return (
     <main>
-      <CareerPathDetail path={{ name, videoUrl, lmiCode, description }} />
+      <CareerPathDetail path={{ name, videoUrl, lmiCode, description, career_progression }} />
       <div className="mb-5">
         <h2 className="mb-4">Career Path Courses:</h2>
         <CoursesWrapper courseData={courses} />
@@ -51,6 +52,7 @@ export const query = graphql`
             link
             description
           }
+          career_progression
         }
       }
     }