From 87dc2cde7190e2411ea9250e1698b64880fbfff6 Mon Sep 17 00:00:00 2001
From: Angelique Weger <angelique@lumenlearning.com>
Date: Wed, 3 Feb 2021 21:43:53 -0500
Subject: [PATCH 1/4] Creates SummaryStats component

---
 src/components/SummaryStats.vue | 80 +++++++++++++++++++++++++++++++++
 src/views/Summary.vue           | 26 ++---------
 2 files changed, 84 insertions(+), 22 deletions(-)
 create mode 100644 src/components/SummaryStats.vue

diff --git a/src/components/SummaryStats.vue b/src/components/SummaryStats.vue
new file mode 100644
index 0000000..31959bb
--- /dev/null
+++ b/src/components/SummaryStats.vue
@@ -0,0 +1,80 @@
+<template>
+  <h2>Summary</h2>
+  <div class="summary u-padding-horizontal-sm u-padding-vertical u-margin-bottom-lg">
+    <h3 class="u-margin-top-none u-margin-bottom-sm">Your Score</h3>
+    <h4 class="u-margin-top-none u-margin-bottom-lg u-margin-left">{{ getScore }}</h4>
+    <span class="meta meta--duration">Time Spent: {{ formattedDuration }}</span>
+    <span class="meta meta--time">Finished: {{ formattedDate }}</span>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters({
+      listQuestions: 'quiz/listQuestions',
+      countQuestions: 'quiz/countQuestions',
+      countCorrect: 'quiz/countCorrect',
+      getScore: 'quiz/calcScore',
+    }),
+    formattedDuration() {
+      const durationArray = this.data.timeSpent.split(':');
+      const duration = [];
+      const labels = ['hrs', 'mins', 'secs'];
+      durationArray.forEach((time, i) => {
+        time = time.toString();
+        duration.push(time + ' ' + labels[i]);
+      });
+      return duration.join(' ');
+    },
+    formattedDate() {
+      const timeCompleted = new Date(this.data.completed);
+      const dateTimeOptions = {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+      };
+      return new Intl.DateTimeFormat('en-US', dateTimeOptions).format(timeCompleted);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$border-style: 1px solid $color-loblolly;
+
+h2 {
+  font: {
+    size: $text-size-up-3;
+    weight: 400;
+  }
+}
+.summary {
+  border: $border-style;
+  border-radius: 4px;
+  width: 96%;
+}
+h3 {
+  font: {
+    size: $text-size-up-1;
+    weight: 400;
+  }
+}
+ 
+.meta {
+  font: {
+    size: $text-size-down-1;
+    weight: 400;
+  }
+  margin-top: $spacing-unit-xs;
+}
+</style>
diff --git a/src/views/Summary.vue b/src/views/Summary.vue
index a986e25..a1db414 100644
--- a/src/views/Summary.vue
+++ b/src/views/Summary.vue
@@ -1,14 +1,14 @@
 <template>
-  <h2>Your Score</h2>
-  <h3 class="u-margin-top-none u-margin-bottom-lg u-margin-left">{{ getScore }}</h3>
+  <SummaryStats :data="quizData" />
   <QuestionList :data="quizData" />
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import SummaryStats from '@/components/SummaryStats.vue';
 import QuestionList from '@/components/QuestionList.vue';
 export default {
   components: {
+    SummaryStats,
     QuestionList,
   },
   data() {
@@ -16,25 +16,7 @@ export default {
       quizData: this.$store.state.quiz.quizData,
     };
   },
-  computed: {
-    ...mapGetters({
-      listQuestions: 'quiz/listQuestions',
-      countQuestions: 'quiz/countQuestions',
-      countCorrect: 'quiz/countCorrect',
-      getScore: 'quiz/calcScore',
-    }),
-  },
 };
 </script>
 
-<style lang="scss" scoped>
-h2 {
-  font: {
-    size: $text-size-up-3;
-    weight: 400;
-  }
-}
-h3 {
-  font-size: $text-size-up-4;
-}
-</style>
+<style lang="scss" scoped></style>

From 9a93a2caebf8a93424d9ce5e68f82bcce070489a Mon Sep 17 00:00:00 2001
From: Angelique Weger <angelique@lumenlearning.com>
Date: Wed, 3 Feb 2021 21:47:41 -0500
Subject: [PATCH 2/4] Adds message and icon that score has been recorded as
 higest grade

---
 src/components/SummaryStats.vue        | 17 ++++++++++++++++-
 src/components/icons/IconCheckmark.vue |  6 ++++++
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 src/components/icons/IconCheckmark.vue

diff --git a/src/components/SummaryStats.vue b/src/components/SummaryStats.vue
index 31959bb..b31f668 100644
--- a/src/components/SummaryStats.vue
+++ b/src/components/SummaryStats.vue
@@ -4,13 +4,26 @@
     <h3 class="u-margin-top-none u-margin-bottom-sm">Your Score</h3>
     <h4 class="u-margin-top-none u-margin-bottom-lg u-margin-left">{{ getScore }}</h4>
     <span class="meta meta--duration">Time Spent: {{ formattedDuration }}</span>
+    <SvgIconContainer width="24" height="24" icon-name="Success" aria-hidden>
+      <IconCheckmark />
+    </SvgIconContainer>
+    <span class="grade-details is-graded">
+      Score recorded as grade
+    </span>
     <span class="meta meta--time">Finished: {{ formattedDate }}</span>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+import SvgIconContainer from './SvgIconContainer.vue';
+import IconCheckmark from './icons/IconCheckmark.vue';
+
 export default {
+  components: {
+    SvgIconContainer,
+    IconCheckmark,
+  },
   props: {
     data: {
       type: Object,
@@ -69,7 +82,9 @@ h3 {
     weight: 400;
   }
 }
- 
+svg {
+  color: $color-salem;
+}
 .meta {
   font: {
     size: $text-size-down-1;
diff --git a/src/components/icons/IconCheckmark.vue b/src/components/icons/IconCheckmark.vue
new file mode 100644
index 0000000..5c0d63f
--- /dev/null
+++ b/src/components/icons/IconCheckmark.vue
@@ -0,0 +1,6 @@
+<template>
+  <path
+    fill-rule="evenodd"
+    d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2m2.293 7.293L11 12.586l-1.293-1.293a.999.999 0 10-1.414 1.414l2 2a.997.997 0 001.414 0l4-4a.999.999 0 10-1.414-1.414"
+  />
+</template>

From 811905d8f915d2375c74b7b2320af3a1ca907141 Mon Sep 17 00:00:00 2001
From: Angelique Weger <angelique@lumenlearning.com>
Date: Wed, 3 Feb 2021 21:49:15 -0500
Subject: [PATCH 3/4] Adds grid layout to stats

---
 src/components/SummaryStats.vue | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/components/SummaryStats.vue b/src/components/SummaryStats.vue
index b31f668..06b5df8 100644
--- a/src/components/SummaryStats.vue
+++ b/src/components/SummaryStats.vue
@@ -72,8 +72,15 @@ h2 {
   }
 }
 .summary {
+  align-items: center;
   border: $border-style;
   border-radius: 4px;
+  display: grid;
+  grid-template-areas:
+    'title title title title'
+    'progressBar stats icon grade'
+    'durationMeta . . timeMeta';
+  grid-template-columns: 1fr 80px 28px 1fr;
   width: 96%;
 }
 h3 {
@@ -81,15 +88,28 @@ h3 {
     size: $text-size-up-1;
     weight: 400;
   }
+  grid-area: title;
+}
+.grade-details {
+  font-size: $text-size-up-1;
 }
 svg {
   color: $color-salem;
 }
+.is-graded {
+  grid-area: grade;
+}
 .meta {
   font: {
     size: $text-size-down-1;
     weight: 400;
   }
   margin-top: $spacing-unit-xs;
+  &--duration {
+    grid-area: durationMeta;
+  }
+  &--time {
+    grid-area: timeMeta;
+  }
 }
 </style>

From 3e2b7e53e67d3a4ce8b3873f0175c3175481fffb Mon Sep 17 00:00:00 2001
From: Angelique Weger <angelique@lumenlearning.com>
Date: Wed, 3 Feb 2021 21:53:51 -0500
Subject: [PATCH 4/4] Adds ProgressBar component

calcScore getter needed to be updated to return a number to make it more usable

displayScoreAsPercent added to replicate original use of calcScore
---
 src/components/ProgressBar.vue  | 91 +++++++++++++++++++++++++++++++++
 src/components/SummaryStats.vue | 14 ++++-
 src/store/modules/quiz.ts       |  4 +-
 3 files changed, 105 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ProgressBar.vue

diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
new file mode 100644
index 0000000..9def89e
--- /dev/null
+++ b/src/components/ProgressBar.vue
@@ -0,0 +1,91 @@
+<template>
+  <progress
+    :max="max"
+    :aria-valuemax="max"
+    :aria-valuemin="min"
+    :value="value"
+    :aria-valuenow="value"
+    :aria-labelledby="label"
+  >
+    <div
+      class="progress-bar"
+      :aria-valuemax="max"
+      :aria-valuemin="min"
+      :aria-valuenow="value"
+      :aria-labelledby="label"
+    >
+      <div :style="styleObject"></div>
+    </div>
+  </progress>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Number,
+      required: true,
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      default: 100,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      styleObject: {
+        width: this.value + '%',
+      },
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@mixin default-bar-styles {
+  background-color: $color-mystic;
+  box-shadow: inset 0 1px 2px 0 $color-regent-gray;
+  width: 100%;
+}
+$bar-color: $color-salem;
+
+progress {
+  @include default-bar-styles();
+  appearance: none;
+  border: none;
+  color: $bar-color;
+}
+
+progress::-webkit-progress-bar {
+  @include default-bar-styles();
+}
+
+progress::-webkit-progress-value {
+  background-color: $bar-color;
+}
+
+progress::-moz-progress-bar {
+  background-color: $bar-color;
+}
+
+.progress-bar {
+  @include default-bar-styles();
+  > div {
+    background-color: $bar-color;
+    height: 100%;
+  }
+}
+
+progress,
+.progress-bar {
+  height: 24px;
+}
+</style>
diff --git a/src/components/SummaryStats.vue b/src/components/SummaryStats.vue
index 06b5df8..652c7d3 100644
--- a/src/components/SummaryStats.vue
+++ b/src/components/SummaryStats.vue
@@ -2,7 +2,10 @@
   <h2>Summary</h2>
   <div class="summary u-padding-horizontal-sm u-padding-vertical u-margin-bottom-lg">
     <h3 class="u-margin-top-none u-margin-bottom-sm">Your Score</h3>
-    <h4 class="u-margin-top-none u-margin-bottom-lg u-margin-left">{{ getScore }}</h4>
+    <ProgressBar :value="getScore" label="quiz-score" />
+    <span id="quiz-score" class="grade-details progress-bar-label u-margin-left-xs">{{
+      displayScoreAsPercent
+    }}</span>
     <span class="meta meta--duration">Time Spent: {{ formattedDuration }}</span>
     <SvgIconContainer width="24" height="24" icon-name="Success" aria-hidden>
       <IconCheckmark />
@@ -18,11 +21,12 @@
 import { mapGetters } from 'vuex';
 import SvgIconContainer from './SvgIconContainer.vue';
 import IconCheckmark from './icons/IconCheckmark.vue';
-
+import ProgressBar from './ProgressBar';
 export default {
   components: {
     SvgIconContainer,
     IconCheckmark,
+    ProgressBar,
   },
   props: {
     data: {
@@ -37,6 +41,9 @@ export default {
       countCorrect: 'quiz/countCorrect',
       getScore: 'quiz/calcScore',
     }),
+    displayScoreAsPercent() {
+      return this.getScore + '%';
+    },
     formattedDuration() {
       const durationArray = this.data.timeSpent.split(':');
       const duration = [];
@@ -93,6 +100,9 @@ h3 {
 .grade-details {
   font-size: $text-size-up-1;
 }
+.progress-bar-label {
+  letter-spacing: 1px;
+}
 svg {
   color: $color-salem;
 }
diff --git a/src/store/modules/quiz.ts b/src/store/modules/quiz.ts
index 928c66e..15a30ab 100644
--- a/src/store/modules/quiz.ts
+++ b/src/store/modules/quiz.ts
@@ -23,7 +23,7 @@ type Getters = {
   listQuestions(state: QuizStateInterface): Quiz['questions'];
   countQuestions(state: QuizStateInterface): number;
   countCorrect(state: QuizStateInterface): number;
-  calcScore(state: QuizStateInterface): string;
+  calcScore(state: QuizStateInterface): number;
 };
 
 const getters: GetterTree<QuizStateInterface, StateInterface> & Getters = {
@@ -53,7 +53,7 @@ const getters: GetterTree<QuizStateInterface, StateInterface> & Getters = {
     const totalQ = getters.countQuestions(state);
     const correctQ = getters.countCorrect(state);
     const score = (correctQ / totalQ) * 100;
-    return Math.floor(score) + '%';
+    return Math.floor(score);
   },
 };