From 198831a9bd3b41ec75189a84f5d85eebe9d07856 Mon Sep 17 00:00:00 2001 From: Simon Katan Date: Wed, 17 Jul 2024 11:02:13 +0100 Subject: [PATCH 1/4] feat: added visual indicator to oak-quiz-counter --- .../pupil/OakQuizCounter/OakQuizCounter.tsx | 38 +++++- .../OakQuizCounter.test.tsx.snap | 115 ++++++++++++++++-- 2 files changed, 138 insertions(+), 15 deletions(-) diff --git a/src/components/organisms/pupil/OakQuizCounter/OakQuizCounter.tsx b/src/components/organisms/pupil/OakQuizCounter/OakQuizCounter.tsx index 057d79f4..e55d2b21 100644 --- a/src/components/organisms/pupil/OakQuizCounter/OakQuizCounter.tsx +++ b/src/components/organisms/pupil/OakQuizCounter/OakQuizCounter.tsx @@ -1,23 +1,49 @@ import React from "react"; -import { OakSpan } from "@/components/atoms"; +import { OakFlex, OakSpan } from "@/components/atoms"; +import { InternalStyledSvg } from "@/components/atoms/InternalStyledSvg"; export type OakQuizCounterProps = { counter: number; total: number; }; +/** + * + * The visual counter + * + */ +const Pill = ({ isFilled }: { isFilled: boolean }) => { + const fill = isFilled ? "black" : "border-decorative2"; + + return ( + + + + ); +}; + /** * A counter representing progress through the questions in a quiz */ export const OakQuizCounter = (props: OakQuizCounterProps) => { const { counter, total } = props; + const pills = Array.from({ length: props.total }, (_, i) => ( + + )); return ( - - - {counter}{" "} + + + + {counter}{" "} + + of {total} - of {total} - + {pills} + ); }; diff --git a/src/components/organisms/pupil/OakQuizCounter/__snapshots__/OakQuizCounter.test.tsx.snap b/src/components/organisms/pupil/OakQuizCounter/__snapshots__/OakQuizCounter.test.tsx.snap index 5de8f0b0..50cb3775 100644 --- a/src/components/organisms/pupil/OakQuizCounter/__snapshots__/OakQuizCounter.test.tsx.snap +++ b/src/components/organisms/pupil/OakQuizCounter/__snapshots__/OakQuizCounter.test.tsx.snap @@ -2,6 +2,33 @@ exports[`OakQuizCounter matches snapshot 1`] = ` .c0 { + font-family: Lexend,sans-serif; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: end; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: end; + gap: 0.75rem; +} + +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + gap: 0.5rem; +} + +.c2 { color: #808080; font-family: Lexend,sans-serif; font-weight: 400; @@ -13,7 +40,7 @@ exports[`OakQuizCounter matches snapshot 1`] = ` letter-spacing: 0.0115rem; } -.c1 { +.c3 { color: #222222; font-family: Lexend,sans-serif; font-weight: 600; @@ -25,16 +52,86 @@ exports[`OakQuizCounter matches snapshot 1`] = ` letter-spacing: 0.0115rem; } - - 5 - + + 5 + + + of + 6 - of - 6 - +
+ + + + + + + + + + + + + + + + + + +
+ `; From f3ee838c5bccdc6b0ddbf095a65cd9af86ed42a8 Mon Sep 17 00:00:00 2001 From: Simon Katan Date: Wed, 17 Jul 2024 11:21:25 +0100 Subject: [PATCH 2/4] feat: added max questions story --- .../pupil/OakQuizCounter/OakQuizCounter.stories.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/organisms/pupil/OakQuizCounter/OakQuizCounter.stories.tsx b/src/components/organisms/pupil/OakQuizCounter/OakQuizCounter.stories.tsx index 53a0a37c..d1794fa1 100644 --- a/src/components/organisms/pupil/OakQuizCounter/OakQuizCounter.stories.tsx +++ b/src/components/organisms/pupil/OakQuizCounter/OakQuizCounter.stories.tsx @@ -35,3 +35,11 @@ type Story = StoryObj; export const Default: Story = { render: (args) => , }; + +export const MaxQuestions: Story = { + render: (args) => , + args: { + counter: 3, + total: 12, + }, +}; From 27eb7ae63e0f5b2967e2c79c65a4edf8e33d2d0d Mon Sep 17 00:00:00 2001 From: Simon Katan Date: Wed, 17 Jul 2024 11:38:09 +0100 Subject: [PATCH 3/4] fix: adding flex wrap to the visual display --- .../organisms/pupil/OakQuizCounter/OakQuizCounter.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/organisms/pupil/OakQuizCounter/OakQuizCounter.tsx b/src/components/organisms/pupil/OakQuizCounter/OakQuizCounter.tsx index e55d2b21..5f9bba1d 100644 --- a/src/components/organisms/pupil/OakQuizCounter/OakQuizCounter.tsx +++ b/src/components/organisms/pupil/OakQuizCounter/OakQuizCounter.tsx @@ -43,7 +43,9 @@ export const OakQuizCounter = (props: OakQuizCounterProps) => { of {total} - {pills} + + {pills} + ); }; From 06ad72d9fc3d2661328b045e598204886978253a Mon Sep 17 00:00:00 2001 From: Simon Katan Date: Wed, 17 Jul 2024 11:39:16 +0100 Subject: [PATCH 4/4] test: snapshot --- .../OakQuizCounter/__snapshots__/OakQuizCounter.test.tsx.snap | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/organisms/pupil/OakQuizCounter/__snapshots__/OakQuizCounter.test.tsx.snap b/src/components/organisms/pupil/OakQuizCounter/__snapshots__/OakQuizCounter.test.tsx.snap index 50cb3775..34353820 100644 --- a/src/components/organisms/pupil/OakQuizCounter/__snapshots__/OakQuizCounter.test.tsx.snap +++ b/src/components/organisms/pupil/OakQuizCounter/__snapshots__/OakQuizCounter.test.tsx.snap @@ -25,6 +25,9 @@ exports[`OakQuizCounter matches snapshot 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; gap: 0.5rem; }