Skip to content

Commit

Permalink
Merge pull request #1086 from oaknational/feat/create-subject-listing…
Browse files Browse the repository at this point in the history 
…-page

Feat/create subject listing page
  • Loading branch information
@benprotheroe
benprotheroe authored Dec 1, 2022
2 parents 76885e4 + 9185f82 commit 3c0036a
Show file tree
Hide file tree
Showing 6 changed files with 321 additions and 68 deletions.
16 changes: 12 additions & 4 deletions src/__tests__/pages/beta/key-stages/[keyStageSlug].test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import { screen, waitFor } from "@testing-library/react";

import {
subjectListData,
unavailableSubjectListData,
} from "../../../../browser-lib/fixtures/subjectListing";
import KeyStageListPage, {
KeyStageProps,
} from "../../../../pages/beta/key-stages/[keyStageSlug]";
Expand All @@ -12,14 +16,16 @@ describe("pages/key-stages/[keyStageSlug].tsx", () => {
renderWithProviders(
<KeyStageListPage
keyStageData={{
data: "key-stage-1",
url: "key-stage-1",
subjectListData,
unavailableSubjectListData,
}}
/>
);

await waitFor(() => {
expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
"Key stage key-stage-1"
"Key stage 1"
);
});
});
Expand All @@ -29,7 +35,9 @@ describe("pages/key-stages/[keyStageSlug].tsx", () => {
const { seo } = renderWithSeo(
<KeyStageListPage
keyStageData={{
data: "key-stage-1",
url: "key-stage-1",
subjectListData,
unavailableSubjectListData,
}}
/>
);
Expand Down Expand Up @@ -75,7 +83,7 @@ describe("pages/key-stages/[keyStageSlug].tsx", () => {
props: KeyStageProps;
};

expect(propsResult.props.keyStageData.data).toEqual("key-stage-1");
expect(propsResult.props.keyStageData.url).toEqual("key-stage-1");
});
});
});
199 changes: 199 additions & 0 deletions src/browser-lib/fixtures/subjectListing.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,199 @@
import { SubjectCardLinkProps } from "../../components/Card/SubjectCardLink";

export const subjectListData: SubjectCardLinkProps[] = [
{
titleTag: "h3",
subjectTitle: "Art and Design",
imageBackground: "teachersPastelYellow",
background: "white",
svgName: "SubjectArtAndDesign",
totalLessons: 130,
totalUnits: 14,
available: true,
keyStageSlug: "key-stage-3",
subjectSlug: "art-and-design",
},
{
titleTag: "h3",
subjectTitle: "Art and Design and another name",
imageBackground: "teachersPastelYellow",
background: "white",
svgName: "SubjectArtAndDesign",
totalLessons: 130,
totalUnits: 14,
available: true,
keyStageSlug: "key-stage-3",
subjectSlug: "art-and-design",
},
{
titleTag: "h3",
subjectTitle: "Art and Design",
imageBackground: "teachersPastelYellow",
background: "white",
svgName: "SubjectArtAndDesign",
totalLessons: 130,
totalUnits: 14,
available: true,
keyStageSlug: "key-stage-3",
subjectSlug: "art-and-design",
},
{
titleTag: "h3",
subjectTitle: "Art and Design",
imageBackground: "teachersPastelYellow",
background: "white",
svgName: "SubjectArtAndDesign",
totalLessons: 130,
totalUnits: 14,
available: true,
keyStageSlug: "key-stage-3",
subjectSlug: "art-and-design",
},
{
titleTag: "h3",
subjectTitle: "Art and Design",
imageBackground: "teachersPastelYellow",
background: "white",
svgName: "SubjectArtAndDesign",
totalLessons: 130,
totalUnits: 14,
available: true,
keyStageSlug: "key-stage-3",
subjectSlug: "art-and-design",
},
{
titleTag: "h3",
subjectTitle: "Art and Design",
imageBackground: "teachersPastelYellow",
background: "white",
svgName: "SubjectArtAndDesign",
totalLessons: 130,
totalUnits: 14,
available: true,
keyStageSlug: "key-stage-3",
subjectSlug: "art-and-design",
},
{
titleTag: "h3",
subjectTitle: "Art and Design",
imageBackground: "teachersPastelYellow",
background: "white",
svgName: "SubjectArtAndDesign",
totalLessons: 130,
totalUnits: 14,
available: true,
keyStageSlug: "key-stage-3",
subjectSlug: "art-and-design",
},
{
titleTag: "h3",
subjectTitle: "Art and Design",
imageBackground: "teachersPastelYellow",
background: "white",
svgName: "SubjectArtAndDesign",
totalLessons: 130,
totalUnits: 14,
available: true,
keyStageSlug: "key-stage-3",
subjectSlug: "art-and-design",
},
{
titleTag: "h3",
subjectTitle: "Art and Design",
imageBackground: "teachersPastelYellow",
background: "white",
svgName: "SubjectArtAndDesign",
totalLessons: 130,
totalUnits: 14,
available: true,
keyStageSlug: "key-stage-3",
subjectSlug: "art-and-design",
},
{
titleTag: "h3",
subjectTitle: "Art and Design",
imageBackground: "teachersPastelYellow",
background: "white",
svgName: "SubjectArtAndDesign",
totalLessons: 130,
totalUnits: 14,
available: true,
keyStageSlug: "key-stage-3",
subjectSlug: "art-and-design",
},
{
titleTag: "h3",
subjectTitle: "Art and Design",
imageBackground: "teachersPastelYellow",
background: "white",
svgName: "SubjectArtAndDesign",
totalLessons: 130,
totalUnits: 14,
available: true,
keyStageSlug: "key-stage-3",
subjectSlug: "art-and-design",
},
];

export const unavailableSubjectListData: SubjectCardLinkProps[] = [
{
titleTag: "h3",
subjectTitle: "Art and Design",
imageBackground: "teachersPastelYellow",
background: "white",
svgName: "SubjectArtAndDesign",
totalLessons: 130,
totalUnits: 14,
available: false,
keyStageSlug: "key-stage-3",
subjectSlug: "art-and-design",
},
{
titleTag: "h3",
subjectTitle: "Art and Design",
imageBackground: "teachersPastelYellow",
background: "white",
svgName: "SubjectArtAndDesign",
totalLessons: 130,
totalUnits: 14,
available: false,
keyStageSlug: "key-stage-3",
subjectSlug: "art-and-design",
},
{
titleTag: "h3",
subjectTitle: "Art and Design",
imageBackground: "teachersPastelYellow",
background: "white",
svgName: "SubjectArtAndDesign",
totalLessons: 130,
totalUnits: 14,
available: false,
keyStageSlug: "key-stage-3",
subjectSlug: "art-and-design",
},
{
titleTag: "h3",
subjectTitle: "Art and Design",
imageBackground: "teachersPastelYellow",
background: "white",
svgName: "SubjectArtAndDesign",
totalLessons: 130,
totalUnits: 14,
available: false,
keyStageSlug: "key-stage-3",
subjectSlug: "art-and-design",
},
{
titleTag: "h3",
subjectTitle: "Art and Design",
imageBackground: "teachersPastelYellow",
background: "white",
svgName: "SubjectArtAndDesign",
totalLessons: 130,
totalUnits: 14,
available: false,
keyStageSlug: "key-stage-3",
subjectSlug: "art-and-design",
},
];
84 changes: 26 additions & 58 deletions src/components/Card/SubjectCardLink.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ type TitleProps = {
titleTag: HeadingTag;
};

type SubjectCardLinkProps = Omit<CardProps, "children"> & {
export type SubjectCardLinkProps = Omit<CardProps, "children"> & {
totalLessons: number;
totalUnits: number;
svgName: SvgName;
Expand All @@ -27,53 +27,6 @@ type SubjectCardLinkProps = Omit<CardProps, "children"> & {
subjectSlug: string;
} & TitleProps;

type SummaryAvailableProps = Pick<
SubjectCardLinkProps,
"keyStageSlug" | "subjectSlug" | "totalLessons" | "totalUnits"
> &
TitleProps;

const SummaryAvailable: FC<SummaryAvailableProps> = ({
keyStageSlug,
subjectSlug,
titleTag,
subjectTitle,
totalUnits,
totalLessons,
}) => {
const { primaryTargetProps } = useClickableCard<HTMLAnchorElement>();
return (
<>
<Heading $font={["heading-7"]} tag={titleTag} $textAlign={"center"}>
<OakLink
{...primaryTargetProps}
page={"unit-index"}
keyStage={keyStageSlug}
subject={subjectSlug}
>
{subjectTitle}
</OakLink>
</Heading>
<Typography
$font={"body-2"}
$color={"grey4"}
>{`${totalUnits} units`}</Typography>
<Typography
$font={"body-2"}
$color={"grey4"}
>{`${totalLessons} lessons`}</Typography>
</>
);
};

const SummaryUnavailable: FC<TitleProps> = ({ titleTag, subjectTitle }) => {
return (
<Heading $font={["heading-7"]} tag={titleTag} $textAlign={"center"}>
{subjectTitle}
</Heading>
);
};

const SubjectCardLink: FC<SubjectCardLinkProps> = ({
subjectTitle,
titleTag,
Expand All @@ -86,7 +39,8 @@ const SubjectCardLink: FC<SubjectCardLinkProps> = ({
keyStageSlug,
subjectSlug,
}) => {
const { containerProps, isHovered } = useClickableCard<HTMLAnchorElement>();
const { containerProps, isHovered, primaryTargetProps } =
useClickableCard<HTMLAnchorElement>();
return (
<Card
{...(available && { ...containerProps })}
Expand Down Expand Up @@ -125,16 +79,30 @@ const SubjectCardLink: FC<SubjectCardLinkProps> = ({
$minHeight={110}
>
{available ? (
<SummaryAvailable
subjectTitle={subjectTitle}
subjectSlug={subjectSlug}
titleTag={titleTag}
keyStageSlug={keyStageSlug}
totalLessons={totalLessons}
totalUnits={totalUnits}
/>
<>
<Heading $font={["heading-7"]} tag={titleTag} $textAlign={"center"}>
<OakLink
{...primaryTargetProps}
page={"unit-index"}
keyStage={keyStageSlug}
subject={subjectSlug}
>
{subjectTitle}
</OakLink>
</Heading>
<Typography
$font={"body-2"}
$color={"oakGrey4"}
>{`${totalUnits} units`}</Typography>
<Typography
$font={"body-2"}
$color={"oakGrey4"}
>{`${totalLessons} lessons`}</Typography>
</>
) : (
<SummaryUnavailable subjectTitle={subjectTitle} titleTag={titleTag} />
<Heading $font={["heading-7"]} tag={titleTag} $textAlign={"center"}>
{subjectTitle}
</Heading>
)}
</Flex>
<BoxBorders gapPosition="rightTop" />
Expand Down
4 changes: 2 additions & 2 deletions src/components/SpriteSheet/IconSvgs/SubjectIconSvgs/ArtAndDesign.icon.tsx
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 3c0036a

Please sign in to comment.