merging out standing pull request for demo

Author: rmfay1

package-lock.json

@@ -8,9 +8,9 @@ import SingleStudentOverview from '../SingleStudentOverview/SingleStudentOvervie
 import SingleStudentMasteryOverview from '../SingleStudentMasteryOverview/SingleStudentMasteryOverview';
 import CourseHome from '../CourseHome/CourseHome';
 import SingleTargetOverview from '../SingleTargetOverview/SingleTargetOverview';
-
-import './Content.css';
 import TaskView from '../../Screens/TaskView/TaskView';
+import ClassMastery from '../../Screens/ClassMastery/ClassMastery';
+import './Content.css';
 
 export default function Content() {
    return (
@@ -43,6 +43,9 @@ export default function Content() {
             <Route path="/viewTask">
                <TaskView taskId="90e0c730e56" />
             </Route>
+            <Route path="/classMastery">
+               <ClassMastery />
+            </Route>
             <Route path="/">
                <Dashboard />
             </Route>

src/Components/Content/Content.tsx

@@ -93,7 +93,7 @@ export interface LearningTarget {
    learningObjectives: Objective[];
 }
 
-export default function SingleStudentMasteryOveriew() {
+export default function SingleStudentMasteryOverview() {
    const classes = useStyles();
    const history = useHistory();
    const test: any = history.location.state;

src/Components/SingleStudentMasteryOverview/SingleStudentMasteryOverview.tsx

@@ -0,0 +1,10 @@
+{
+   "color": {
+      "red": "#EA6868",
+      "yellow": "#F2C94C",
+      "green": "#30CC30",
+      "bgGrey": "#C4C4C4",
+      "textBlack": "#000000",
+      "textBlue": "#2F80ED"
+   }
+}

src/Components/constants.json

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+import { color } from '../../Components/constants.json';
+
+import StudentMasteryRow, { StudentMasteryHeader } from './StudentMasteryRow/StudentMasteryRow';
+
+const Page = styled.div`
+   margin: 33px 90px;
+`;
+const Header = styled.div`
+   color: ${color.textBlue};
+   font-size: 36px;
+   font-weight: 550;
+   margin-bottom: 32px;
+`;
+
+const Content = styled.div``;
+
+const MOCK_LOBJ_NAMES = ['Objective 1', 'Objective 2'];
+
+const MOCK_DATA = [
+   {
+      name: 'Ryan Fay',
+      learningObjectives: [
+         {
+            objectiveName: 'Objective 1',
+            percentage: 1,
+         },
+         {
+            objectiveName: 'Objective 2',
+            percentage: 0.9,
+         },
+      ],
+   },
+   {
+      name: 'Robert Middleton',
+      learningObjectives: [
+         {
+            objectiveName: 'Objective 1',
+            percentage: 0.6,
+         },
+         {
+            objectiveName: 'Objective 2',
+            percentage: 0.7,
+         },
+      ],
+   },
+   {
+      name: 'Darian Nguyen',
+      learningObjectives: [
+         {
+            objectiveName: 'Objective 1',
+            percentage: 0.24,
+         },
+         {
+            objectiveName: 'Objective 2',
+            percentage: 0.14,
+         },
+      ],
+   },
+];
+
+function ClassMastery() {
+   //TODO Get real data
+   return (
+      <Page>
+         <Header>Class Mastery</Header>
+         <Content>
+            <StudentMasteryHeader learningObjectiveNames={MOCK_LOBJ_NAMES} />
+            {MOCK_DATA.map(({ name, learningObjectives }) => (
+               <StudentMasteryRow name={name} learningObjectives={learningObjectives} />
+            ))}
+         </Content>
+      </Page>
+   );
+}
+
+export default ClassMastery;

src/Screens/ClassMastery/ClassMastery.tsx

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+import { color } from '../../../Components/constants.json';
+
+type MasteryBarProps = { percentage: number };
+
+const MasteryBar = styled.div`
+   position: relative;
+   border-radius: 11px;
+   background-color: ${color.bgGrey};
+   overflow: hidden;
+`;
+
+const InnerBar = styled.div<MasteryBarProps>`
+   position: absolute;
+   top: 0;
+   left: 0;
+   bottom: 0;
+   background-color: ${({ percentage }) =>
+      percentage > 0.66 ? color.green : percentage > 0.33 ? color.yellow : color.red};
+   right: ${({ percentage }) => 100 - percentage * 100 + '%'};
+   > span {
+      position: absolute;
+      color: white;
+      top: 4px;
+      font-size: 14px;
+      right: ${({ percentage }) => (percentage > 0.25 ? '5px' : '-33px')};
+   }
+`;
+
+function Mastery({ percentage }: MasteryBarProps) {
+   return (
+      <MasteryBar>
+         <InnerBar percentage={percentage}>
+            <span>{Math.floor(percentage * 100)}%</span>
+         </InnerBar>
+      </MasteryBar>
+   );
+}
+
+const Container = styled.div`
+   display: flex;
+   align-items: center;
+   width: 100%;
+   margin-bottom: 6px;
+`;
+
+const Header = styled.div`
+   display: flex;
+   align-items: center;
+   color: black;
+   font-size: 16px;
+   font-weight: 700;
+   min-width: 150px;
+   margin-right: 16px;
+`;
+
+const Dot = styled.div`
+   background-color: ${color.green};
+   border-radius: 999px;
+   width: 8px;
+   height: 8px;
+   margin-right: 6px;
+`;
+
+const Content = styled.div`
+   display: flex;
+   align-items: center;
+   overflow: horizontal;
+   > :not(last-child) {
+      margin-right: 21px;
+      height: 32px;
+      min-width: 100px;
+   }
+`;
+
+function StudentMasteryRow({ name, learningObjectives }: any) {
+   return (
+      <Container>
+         <Header>
+            <Dot />
+            {name}
+         </Header>
+         <Content>
+            {learningObjectives.map(({ percentage }: any) => (
+               <Mastery percentage={percentage} />
+            ))}
+         </Content>
+      </Container>
+   );
+}
+
+const LearningObjectiveName = styled.span`
+   text-align: center;
+`;
+
+function StudentMasteryHeader({ learningObjectiveNames }: { learningObjectiveNames: string[] }) {
+   return (
+      <Container style={{ marginBottom: 24 }}>
+         <Header>Student</Header>
+         <Content>
+            {learningObjectiveNames.map((name) => (
+               <LearningObjectiveName>{name}</LearningObjectiveName>
+            ))}
+         </Content>
+      </Container>
+   );
+}
+
+export default StudentMasteryRow;
+export { StudentMasteryHeader };