From 52afac049253f51fcf9b5fc310597b4bdf259756 Mon Sep 17 00:00:00 2001 From: Bryan Jennings Date: Sun, 11 Sep 2022 12:41:07 -0700 Subject: [PATCH 1/6] Add exercise preview cards to DOJO exercises page --- components/ExercisePreviewCard.tsx | 43 +++++++++++++++++++ pages/exercises/[lessonSlug].tsx | 30 ++++++++++++- scss/exercisePreviewCard.module.scss | 35 +++++++++++++++ .../ExercisePreviewCard.stories.tsx | 31 +++++++++++++ 4 files changed, 138 insertions(+), 1 deletion(-) create mode 100644 components/ExercisePreviewCard.tsx create mode 100644 scss/exercisePreviewCard.module.scss create mode 100644 stories/components/ExercisePreviewCard.stories.tsx diff --git a/components/ExercisePreviewCard.tsx b/components/ExercisePreviewCard.tsx new file mode 100644 index 000000000..75834c037 --- /dev/null +++ b/components/ExercisePreviewCard.tsx @@ -0,0 +1,43 @@ +import React from 'react' +import styles from '../scss/exercisePreviewCard.module.scss' + +export type ExercisePreviewCardProps = { + topic: string + state: 'NOT ANSWERED' | 'ANSWERED' + problem: string + className?: string +} + +const ExercisePreviewCard = ({ + topic, + state, + problem, + className = '' +}: ExercisePreviewCardProps) => { + const [topBorderStyle, topMessageStyle] = + state === 'ANSWERED' + ? [ + styles.exercisePreviewCard__topBorder__success, + styles.exercisePreviewCard__topMessage__success + ] + : [ + styles.exercisePreviewCard__topBorder__danger, + styles.exercisePreviewCard__topMessage__danger + ] + + return ( +
+
+
+

{topic.toUpperCase()}

+
{state}
+
+
Problem
+ 
{problem}
+
+ ) +} + +export default ExercisePreviewCard diff --git a/pages/exercises/[lessonSlug].tsx b/pages/exercises/[lessonSlug].tsx index df79c6f19..99c3e6489 100644 --- a/pages/exercises/[lessonSlug].tsx +++ b/pages/exercises/[lessonSlug].tsx @@ -10,6 +10,19 @@ import LoadingSpinner from '../../components/LoadingSpinner' import GET_APP from '../../graphql/queries/getApp' import AlertsDisplay from '../../components/AlertsDisplay' import NavCard from '../../components/NavCard' +import ExercisePreviewCard, { + ExercisePreviewCardProps +} from '../../components/ExercisePreviewCard' + +const exampleProblem = `const a = 5 +a = a + 10 +// what is a?` + +const mockExercisePreviews: ExercisePreviewCardProps[] = [ + { topic: 'Variables', state: 'ANSWERED', problem: exampleProblem }, + { topic: 'Variables', state: 'NOT ANSWERED', problem: exampleProblem }, + { topic: 'Variables', state: 'ANSWERED', problem: exampleProblem } +] const Exercises: React.FC> = ({ queryData }) => { const { lessons, alerts } = queryData @@ -38,8 +51,23 @@ const Exercises: React.FC> = ({ queryData }) => { tabSelected={tabs.findIndex(tab => tab.text === 'exercises')} tabs={tabs} /> -

{currentLesson.title}

+

{currentLesson.title}

{alerts && } +
+
+ {mockExercisePreviews.map((exercisePreview, i) => ( + + ))} +
+
) } diff --git a/scss/exercisePreviewCard.module.scss b/scss/exercisePreviewCard.module.scss new file mode 100644 index 000000000..d9dd7c0a6 --- /dev/null +++ b/scss/exercisePreviewCard.module.scss @@ -0,0 +1,35 @@ +@use './_variables.module'; + +%exercisePreviewCard__topBorder { + height: 5px; + width: 100%; + position: absolute; + top: 0; + left: 0; +} + +.exercisePreviewCard__topBorder__success { + @extend %exercisePreviewCard__topBorder; + background-color: variables.$success; +} + +.exercisePreviewCard__topBorder__danger { + @extend %exercisePreviewCard__topBorder; + background-color: variables.$danger; +} + +%exercisePreviewCard__topMessage { + font-size: 14px; +} + +.exercisePreviewCard__topMessage__success { + @extend %exercisePreviewCard__topMessage; + color: variables.$success; + border: 1px solid variables.$success; +} + +.exercisePreviewCard__topMessage__danger { + @extend %exercisePreviewCard__topMessage; + color: variables.$danger; + border: 1px solid variables.$danger; +} diff --git a/stories/components/ExercisePreviewCard.stories.tsx b/stories/components/ExercisePreviewCard.stories.tsx new file mode 100644 index 000000000..2eea29031 --- /dev/null +++ b/stories/components/ExercisePreviewCard.stories.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import ExercisePreviewCard from '../../components/ExercisePreviewCard' + +export default { + component: ExercisePreviewCard, + title: 'Components/ExercisePreviewCard' +} + +const exampleProblem = `const a = 5 +a = a + 10 +// what is a?` + +export const Answered = () => { + return ( + + ) +} + +export const NotAnswered = () => { + return ( + + ) +} From a6d1f7b1d08f286630bdef9adc08476b8a863d29 Mon Sep 17 00:00:00 2001 From: Bryan Jennings Date: Sun, 11 Sep 2022 13:41:03 -0700 Subject: [PATCH 2/6] Add ExercisePreviewCard storybook snapshot --- .../__snapshots__/storyshots.test.js.snap | 72 +++++++++++++++++++ 1 file changed, 72 insertions(+) diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap index 58fd80063..90ad1daaf 100644 --- a/__tests__/__snapshots__/storyshots.test.js.snap +++ b/__tests__/__snapshots__/storyshots.test.js.snap @@ -5271,6 +5271,78 @@ a = b; `; +exports[`Storyshots Components/ExercisePreviewCard Answered 1`] = ` +
+
+
+

+ VARIABLES +

+
+ ANSWERED +
+
+
+ Problem +
+ 
+    const a = 5
+a = a + 10
+// what is a?
+
+
+`; + +exports[`Storyshots Components/ExercisePreviewCard Not Answered 1`] = ` +
+
+
+

+ VARIABLES +

+
+ NOT ANSWERED +
+
+
+ Problem +
+ 
+    const a = 5
+a = a + 10
+// what is a?
+
+
+`; + exports[`Storyshots Components/FilterButtons Basic 1`] = `
Date: Sun, 11 Sep 2022 13:46:06 -0700 Subject: [PATCH 3/6] Make ExercisePreviewCard badge the same size as the admin badge --- components/ExercisePreviewCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/ExercisePreviewCard.tsx b/components/ExercisePreviewCard.tsx index 75834c037..81ba0f11c 100644 --- a/components/ExercisePreviewCard.tsx +++ b/components/ExercisePreviewCard.tsx @@ -32,7 +32,7 @@ const ExercisePreviewCard = ({

{topic.toUpperCase()}

-
{state}
+
{state}
Problem
{problem}
From b70a62c88ee6c42fd211cc66b24d977cb6d615b5 Mon Sep 17 00:00:00 2001 From: Bryan Jennings Date: Sun, 11 Sep 2022 13:53:35 -0700 Subject: [PATCH 4/6] Update snapshots --- __tests__/__snapshots__/storyshots.test.js.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap index 90ad1daaf..213829942 100644 --- a/__tests__/__snapshots__/storyshots.test.js.snap +++ b/__tests__/__snapshots__/storyshots.test.js.snap @@ -5287,7 +5287,7 @@ exports[`Storyshots Components/ExercisePreviewCard Answered 1`] = ` VARIABLES
ANSWERED
@@ -5323,7 +5323,7 @@ exports[`Storyshots Components/ExercisePreviewCard Not Answered 1`] = ` VARIABLES
NOT ANSWERED
From b6878dd9cd5da3d5de8ea020a01d757cb6f834f9 Mon Sep 17 00:00:00 2001 From: Bryan Jennings Date: Sun, 11 Sep 2022 15:35:34 -0700 Subject: [PATCH 5/6] Rename ExercisePreviewCard topic prop to moduleName --- components/ExercisePreviewCard.tsx | 6 +++--- pages/exercises/[lessonSlug].tsx | 8 ++++---- stories/components/ExercisePreviewCard.stories.tsx | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/components/ExercisePreviewCard.tsx b/components/ExercisePreviewCard.tsx index 81ba0f11c..a6fb8ed77 100644 --- a/components/ExercisePreviewCard.tsx +++ b/components/ExercisePreviewCard.tsx @@ -2,14 +2,14 @@ import React from 'react' import styles from '../scss/exercisePreviewCard.module.scss' export type ExercisePreviewCardProps = { - topic: string + moduleName: string state: 'NOT ANSWERED' | 'ANSWERED' problem: string className?: string } const ExercisePreviewCard = ({ - topic, + moduleName, state, problem, className = '' @@ -31,7 +31,7 @@ const ExercisePreviewCard = ({ >
-

{topic.toUpperCase()}

+

{moduleName.toUpperCase()}

{state}
Problem
diff --git a/pages/exercises/[lessonSlug].tsx b/pages/exercises/[lessonSlug].tsx index 99c3e6489..78fad17ce 100644 --- a/pages/exercises/[lessonSlug].tsx +++ b/pages/exercises/[lessonSlug].tsx @@ -19,9 +19,9 @@ a = a + 10 // what is a?` const mockExercisePreviews: ExercisePreviewCardProps[] = [ - { topic: 'Variables', state: 'ANSWERED', problem: exampleProblem }, - { topic: 'Variables', state: 'NOT ANSWERED', problem: exampleProblem }, - { topic: 'Variables', state: 'ANSWERED', problem: exampleProblem } + { moduleName: 'Variables', state: 'ANSWERED', problem: exampleProblem }, + { moduleName: 'Variables', state: 'NOT ANSWERED', problem: exampleProblem }, + { moduleName: 'Variables', state: 'ANSWERED', problem: exampleProblem } ] const Exercises: React.FC> = ({ queryData }) => { @@ -58,7 +58,7 @@ const Exercises: React.FC> = ({ queryData }) => { {mockExercisePreviews.map((exercisePreview, i) => ( { return ( @@ -23,7 +23,7 @@ export const Answered = () => { export const NotAnswered = () => { return ( From 786a27a4e9672054ceb96ca654334fd431e5888d Mon Sep 17 00:00:00 2001 From: Bryan Jennings Date: Sun, 11 Sep 2022 15:53:53 -0700 Subject: [PATCH 6/6] Move ExercisePreviewCard with styling into the same folder --- components/{ => ExercisePreviewCard}/ExercisePreviewCard.tsx | 2 +- .../ExercisePreviewCard}/exercisePreviewCard.module.scss | 2 +- components/ExercisePreviewCard/index.tsx | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) rename components/{ => ExercisePreviewCard}/ExercisePreviewCard.tsx (95%) rename {scss => components/ExercisePreviewCard}/exercisePreviewCard.module.scss (95%) create mode 100644 components/ExercisePreviewCard/index.tsx diff --git a/components/ExercisePreviewCard.tsx b/components/ExercisePreviewCard/ExercisePreviewCard.tsx similarity index 95% rename from components/ExercisePreviewCard.tsx rename to components/ExercisePreviewCard/ExercisePreviewCard.tsx index a6fb8ed77..186acda87 100644 --- a/components/ExercisePreviewCard.tsx +++ b/components/ExercisePreviewCard/ExercisePreviewCard.tsx @@ -1,5 +1,5 @@ import React from 'react' -import styles from '../scss/exercisePreviewCard.module.scss' +import styles from './exercisePreviewCard.module.scss' export type ExercisePreviewCardProps = { moduleName: string diff --git a/scss/exercisePreviewCard.module.scss b/components/ExercisePreviewCard/exercisePreviewCard.module.scss similarity index 95% rename from scss/exercisePreviewCard.module.scss rename to components/ExercisePreviewCard/exercisePreviewCard.module.scss index d9dd7c0a6..7f2c1ea18 100644 --- a/scss/exercisePreviewCard.module.scss +++ b/components/ExercisePreviewCard/exercisePreviewCard.module.scss @@ -1,4 +1,4 @@ -@use './_variables.module'; +@use '../../scss/_variables.module'; %exercisePreviewCard__topBorder { height: 5px; diff --git a/components/ExercisePreviewCard/index.tsx b/components/ExercisePreviewCard/index.tsx new file mode 100644 index 000000000..78b493ed5 --- /dev/null +++ b/components/ExercisePreviewCard/index.tsx @@ -0,0 +1 @@ +export { default, type ExercisePreviewCardProps } from './ExercisePreviewCard'