From 7219917bb8d8029f6b1b033920848ad616ea3318 Mon Sep 17 00:00:00 2001 From: ben Date: Thu, 2 May 2024 14:46:29 +0100 Subject: [PATCH 1/7] feat(oakprevlessontitles): create oak prev lesson title --- .../OakPreviousLessonsHeading.stories.tsx | 37 ++++++ .../OakPreviousLessonsHeading.test.tsx | 41 ++++++ .../OakPreviousLessonsHeading.tsx | 46 +++++++ .../OakPreviousLessonsHeading.test.tsx.snap | 117 ++++++++++++++++++ .../pupil/OakPreviousLessonsHeading/index.ts | 1 + 5 files changed, 242 insertions(+) create mode 100644 src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.stories.tsx create mode 100644 src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.test.tsx create mode 100644 src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.tsx create mode 100644 src/components/organisms/pupil/OakPreviousLessonsHeading/__snapshots__/OakPreviousLessonsHeading.test.tsx.snap create mode 100644 src/components/organisms/pupil/OakPreviousLessonsHeading/index.ts diff --git a/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.stories.tsx b/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.stories.tsx new file mode 100644 index 00000000..5aae4cfb --- /dev/null +++ b/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.stories.tsx @@ -0,0 +1,37 @@ +import React from "react"; +import { StoryObj, Meta } from "@storybook/react"; + +import { OakPreviousLessonsHeading } from "./OakPreviousLessonsHeading"; + +const meta: Meta = { + title: "Components/organisms/pupil/OakPreviousLessonsHeading", + component: OakPreviousLessonsHeading, + tags: ["autodocs"], + argTypes: {}, + parameters: { + controls: { + include: [ + "numberOfLessons", + "yearDescription", + "subjectTitle", + "tierDescription", + "examBoardDescription", + ], + }, + }, + args: { + numberOfLessons: 5, + yearDescription: "Year 7", + subjectTitle: "Maths", + tierDescription: "Higher", + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: (args) => , + args: {}, +}; diff --git a/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.test.tsx b/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.test.tsx new file mode 100644 index 00000000..4ee461a2 --- /dev/null +++ b/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.test.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import "@testing-library/jest-dom"; +import { create } from "react-test-renderer"; +import { ThemeProvider } from "styled-components"; + +import { OakPreviousLessonsHeading } from "./OakPreviousLessonsHeading"; + +import renderWithTheme from "@/test-helpers/renderWithTheme"; +import { oakDefaultTheme } from "@/styles"; + +describe("OakPreviousLessonsHeading", () => { + it("renders", () => { + const { getByText } = renderWithTheme( + + + , + ); + expect(getByText(`Previously released lessons (5)`)).toBeInTheDocument(); + }); + + it("matches snapshot", () => { + const tree = create( + + {" "} + + , + ).toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.tsx b/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.tsx new file mode 100644 index 00000000..ab1f3609 --- /dev/null +++ b/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.tsx @@ -0,0 +1,46 @@ +import React from "react"; + +import { OakBulletList } from "@/components/molecules"; +import { OakFlex, OakHeading } from "@/components/atoms"; + +export type OakPreviousLessonsHeadingProps = { + numberOfLessons: number; + yearDescription: string; + subjectTitle: string; + tierDescription?: string; + examBoardDescription?: string; +}; + +/** + * This component is the header for the pupil journey; + * + * the icon, title and list of items are passed as props and change change depending on which page it is called + * + * + */ +export const OakPreviousLessonsHeading = ( + props: OakPreviousLessonsHeadingProps, +) => { + const { + numberOfLessons, + yearDescription, + subjectTitle, + tierDescription, + examBoardDescription, + } = props; + const listItems = [yearDescription, subjectTitle]; + if (tierDescription) { + listItems.push(tierDescription); + } + if (examBoardDescription) { + listItems.push(examBoardDescription); + } + return ( + + + {`Previously released lessons (${numberOfLessons})`} + + + + ); +}; diff --git a/src/components/organisms/pupil/OakPreviousLessonsHeading/__snapshots__/OakPreviousLessonsHeading.test.tsx.snap b/src/components/organisms/pupil/OakPreviousLessonsHeading/__snapshots__/OakPreviousLessonsHeading.test.tsx.snap new file mode 100644 index 00000000..ac526e43 --- /dev/null +++ b/src/components/organisms/pupil/OakPreviousLessonsHeading/__snapshots__/OakPreviousLessonsHeading.test.tsx.snap @@ -0,0 +1,117 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`OakPreviousLessonsHeading matches snapshot 1`] = ` +[ + " ", + .c0 { + font-family: Lexend,sans-serif; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c3 { + font-family: Lexend,sans-serif; +} + +.c2 { + font-family: Lexend,sans-serif; + font-weight: 600; + font-size: 1.25rem; + line-height: 1.5rem; + -webkit-letter-spacing: 0.0115rem; + -moz-letter-spacing: 0.0115rem; + -ms-letter-spacing: 0.0115rem; + letter-spacing: 0.0115rem; +} + +@media (min-width:750px) { + .c2 { + font-weight: 600; + } +} + +@media (min-width:750px) { + .c2 { + font-size: 1.25rem; + } +} + +@media (min-width:750px) { + .c2 { + line-height: 1.5rem; + } +} + +@media (min-width:750px) { + .c2 { + -webkit-letter-spacing: 0.0115rem; + -moz-letter-spacing: 0.0115rem; + -ms-letter-spacing: 0.0115rem; + letter-spacing: 0.0115rem; + } +} + +
+

+ Previously released lessons (5) +

+ + + + Year 7 + + + + + • + + + Maths + + + + + • + + + Higher + + + +
, +] +`; diff --git a/src/components/organisms/pupil/OakPreviousLessonsHeading/index.ts b/src/components/organisms/pupil/OakPreviousLessonsHeading/index.ts new file mode 100644 index 00000000..df059fb6 --- /dev/null +++ b/src/components/organisms/pupil/OakPreviousLessonsHeading/index.ts @@ -0,0 +1 @@ +export * from "./OakPreviousLessonsHeading"; From 584c8de2d1322dccf61fbe2f31c69b9a890df433 Mon Sep 17 00:00:00 2001 From: ben Date: Tue, 7 May 2024 13:39:23 +0100 Subject: [PATCH 2/7] feat(oakprevbutton): style fixes --- .../OakPreviousLessonsHeading.stories.tsx | 12 +---- .../OakPreviousLessonsHeading.test.tsx | 8 +--- .../OakPreviousLessonsHeading.tsx | 48 +++++++++---------- 3 files changed, 28 insertions(+), 40 deletions(-) diff --git a/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.stories.tsx b/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.stories.tsx index 5aae4cfb..ed3fda11 100644 --- a/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.stories.tsx +++ b/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.stories.tsx @@ -10,20 +10,12 @@ const meta: Meta = { argTypes: {}, parameters: { controls: { - include: [ - "numberOfLessons", - "yearDescription", - "subjectTitle", - "tierDescription", - "examBoardDescription", - ], + include: ["numberOfLessons", "listItems"], }, }, args: { numberOfLessons: 5, - yearDescription: "Year 7", - subjectTitle: "Maths", - tierDescription: "Higher", + listItems: ["Year 7", "Maths", "Higher"], }, }; diff --git a/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.test.tsx b/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.test.tsx index 4ee461a2..9991018b 100644 --- a/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.test.tsx +++ b/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.test.tsx @@ -14,9 +14,7 @@ describe("OakPreviousLessonsHeading", () => { , @@ -30,9 +28,7 @@ describe("OakPreviousLessonsHeading", () => { {" "} , ).toJSON(); diff --git a/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.tsx b/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.tsx index ab1f3609..6f8b1b53 100644 --- a/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.tsx +++ b/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.tsx @@ -1,46 +1,46 @@ import React from "react"; -import { OakBulletList } from "@/components/molecules"; +import { OakBulletList, OakBulletListProps } from "@/components/molecules"; import { OakFlex, OakHeading } from "@/components/atoms"; export type OakPreviousLessonsHeadingProps = { numberOfLessons: number; - yearDescription: string; - subjectTitle: string; - tierDescription?: string; - examBoardDescription?: string; -}; +} & OakBulletListProps; /** - * This component is the header for the pupil journey; + * This component displays a heading for the previous lessons + * + * numberOfLessons - The number of lessons that have been released * - * the icon, title and list of items are passed as props and change change depending on which page it is called + * listItems - add the a list of descriptions to be displayed * * */ export const OakPreviousLessonsHeading = ( props: OakPreviousLessonsHeadingProps, ) => { - const { - numberOfLessons, - yearDescription, - subjectTitle, - tierDescription, - examBoardDescription, - } = props; - const listItems = [yearDescription, subjectTitle]; - if (tierDescription) { - listItems.push(tierDescription); - } - if (examBoardDescription) { - listItems.push(examBoardDescription); - } + const { numberOfLessons, listItems } = props; + return ( - + {`Previously released lessons (${numberOfLessons})`} - + ); }; From d86ee47a667c77be477b0b5626e485e2ba28b5a4 Mon Sep 17 00:00:00 2001 From: ben Date: Tue, 7 May 2024 13:42:54 +0100 Subject: [PATCH 3/7] feat(oakprevbutton): style fixes --- .../OakPreviousLessonsHeading/OakPreviousLessonsHeading.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.tsx b/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.tsx index 6f8b1b53..051bedd8 100644 --- a/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.tsx +++ b/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.tsx @@ -1,7 +1,7 @@ import React from "react"; import { OakBulletList, OakBulletListProps } from "@/components/molecules"; -import { OakFlex, OakHeading } from "@/components/atoms"; +import { OakFlex, OakHeading, OakSpan } from "@/components/atoms"; export type OakPreviousLessonsHeadingProps = { numberOfLessons: number; @@ -30,7 +30,8 @@ export const OakPreviousLessonsHeading = ( $gap={"space-between-m"} > - {`Previously released lessons (${numberOfLessons})`} + Previously released lessons + {` (${numberOfLessons})`} Date: Tue, 7 May 2024 13:44:50 +0100 Subject: [PATCH 4/7] feat(oakprevbutton): trest fixes --- .../OakPreviousLessonsHeading.test.tsx | 2 +- .../OakPreviousLessonsHeading.test.tsx.snap | 70 +++++++++++++++---- 2 files changed, 58 insertions(+), 14 deletions(-) diff --git a/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.test.tsx b/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.test.tsx index 9991018b..0c22988b 100644 --- a/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.test.tsx +++ b/src/components/organisms/pupil/OakPreviousLessonsHeading/OakPreviousLessonsHeading.test.tsx @@ -19,7 +19,7 @@ describe("OakPreviousLessonsHeading", () => { /> , ); - expect(getByText(`Previously released lessons (5)`)).toBeInTheDocument(); + expect(getByText(`Previously released lessons`)).toBeInTheDocument(); }); it("matches snapshot", () => { diff --git a/src/components/organisms/pupil/OakPreviousLessonsHeading/__snapshots__/OakPreviousLessonsHeading.test.tsx.snap b/src/components/organisms/pupil/OakPreviousLessonsHeading/__snapshots__/OakPreviousLessonsHeading.test.tsx.snap index ac526e43..b82cc402 100644 --- a/src/components/organisms/pupil/OakPreviousLessonsHeading/__snapshots__/OakPreviousLessonsHeading.test.tsx.snap +++ b/src/components/organisms/pupil/OakPreviousLessonsHeading/__snapshots__/OakPreviousLessonsHeading.test.tsx.snap @@ -12,17 +12,48 @@ exports[`OakPreviousLessonsHeading matches snapshot 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; + gap: 1.5rem; } .c3 { font-family: Lexend,sans-serif; + font-weight: 400; + font-size: 1.25rem; + line-height: 1.5rem; + -webkit-letter-spacing: 0.0115rem; + -moz-letter-spacing: 0.0115rem; + -ms-letter-spacing: 0.0115rem; + letter-spacing: 0.0115rem; +} + +.c4 { + background: #fff7cc; + padding-left: 0.5rem; + padding-right: 0.5rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + border: 0.063rem solid; + border-color: #ffe555; + border-radius: 0.25rem; + font-family: Lexend,sans-serif; +} + +.c5 { + font-family: Lexend,sans-serif; } .c2 { @@ -36,6 +67,14 @@ exports[`OakPreviousLessonsHeading matches snapshot 1`] = ` letter-spacing: 0.0115rem; } +@media (min-width:750px) { + .c1 { + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } +} + @media (min-width:750px) { .c2 { font-weight: 600; @@ -69,44 +108,49 @@ exports[`OakPreviousLessonsHeading matches snapshot 1`] = `

- Previously released lessons (5) + Previously released lessons + + (5) +

Year 7 • Maths • Higher From d9094469055611cf3605e1b2c7ccedc918142cde Mon Sep 17 00:00:00 2001 From: ben Date: Tue, 7 May 2024 14:07:44 +0100 Subject: [PATCH 5/7] feat(oakprevbutton): export component --- src/components/organisms/pupil/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/organisms/pupil/index.ts b/src/components/organisms/pupil/index.ts index 98a96af0..82f2a424 100644 --- a/src/components/organisms/pupil/index.ts +++ b/src/components/organisms/pupil/index.ts @@ -14,7 +14,9 @@ export * from "./OakLessonVideoTranscript"; export * from "./OakQuizOrder"; export * from "./OakQuizMatch"; export * from "./OakPupilJourneyLayout"; +export * from "./OakPupilJourneyHeader"; export * from "./Oakinfo"; export * from "./OakinfoButton"; export * from "./OakPupilJourneyYearButton"; export * from "./OakPupilJourneySubjectButton"; +export * from "./OakPreviousLessonsHeading"; From 32ae33cc36175102795c5b6e27d1dbff6cfb615a Mon Sep 17 00:00:00 2001 From: ben Date: Tue, 7 May 2024 15:02:03 +0100 Subject: [PATCH 6/7] feat(oakprevbutton): export component --- src/components/organisms/pupil/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/organisms/pupil/index.ts b/src/components/organisms/pupil/index.ts index 82f2a424..db24e158 100644 --- a/src/components/organisms/pupil/index.ts +++ b/src/components/organisms/pupil/index.ts @@ -17,6 +17,7 @@ export * from "./OakPupilJourneyLayout"; export * from "./OakPupilJourneyHeader"; export * from "./Oakinfo"; export * from "./OakinfoButton"; +export * from "./OakPupilJourneyListItem"; export * from "./OakPupilJourneyYearButton"; export * from "./OakPupilJourneySubjectButton"; export * from "./OakPreviousLessonsHeading"; From 5351d2426b8ee75a8a61b1b7f6e1ff95d0bc7491 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Tue, 7 May 2024 14:44:50 +0000 Subject: [PATCH 7/7] build(release): 0.24.0 [skip ci] --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 54b52f84..04ba835b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@oaknational/oak-components", - "version": "0.23.0", + "version": "0.24.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@oaknational/oak-components", - "version": "0.23.0", + "version": "0.24.0", "devDependencies": { "@commitlint/cli": "^18.4.4", "@commitlint/config-conventional": "^18.4.4", diff --git a/package.json b/package.json index ab7cf574..93607d5b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@oaknational/oak-components", - "version": "0.23.0", + "version": "0.24.0", "licence": "MIT", "description": "Shared components for Oak applications", "main": "dist/cjs/index.js",