From b8022b99fb08e9684b8c5bf28ac0cf47c6983bd7 Mon Sep 17 00:00:00 2001 From: ben Date: Thu, 16 May 2024 16:27:45 +0100 Subject: [PATCH 1/4] feat(optionality): create optionality component --- .../OakCardWithHandDrawnBorder.stories.tsx | 48 ++ .../OakCardWithHandDrawnBorder.test.tsx | 22 + .../OakCardWithHandDrawnBorder.tsx | 51 ++ .../OakCardWithHandDrawnBorder.test.tsx.snap | 68 +++ .../OakCardWithHandDrawnBorder/index.ts | 1 + src/components/molecules/index.ts | 1 + .../OakPupilJourneyListItem.tsx | 6 +- ...kPupilJourneyOptionalityButton.stories.tsx | 72 +++ .../OakPupilJourneyOptionalityButton.test.tsx | 66 +++ .../OakPupilJourneyOptionalityButton.tsx | 140 +++++ ...upilJourneyOptionalityButton.test.tsx.snap | 267 +++++++++ .../OakPupilJourneyOptionalityButton/index.ts | 1 + ...OakPupilJourneyOptionalityItem.stories.tsx | 58 ++ .../OakPupilJourneyOptionalityItem.test.tsx | 62 +++ .../OakPupilJourneyOptionalityItem.tsx | 54 ++ ...kPupilJourneyOptionalityItem.test.tsx.snap | 509 ++++++++++++++++++ .../OakPupilJourneyOptionalityItem/index.ts | 1 + src/components/organisms/pupil/index.ts | 2 + 18 files changed, 1426 insertions(+), 3 deletions(-) create mode 100644 src/components/molecules/OakCardWithHandDrawnBorder/OakCardWithHandDrawnBorder.stories.tsx create mode 100644 src/components/molecules/OakCardWithHandDrawnBorder/OakCardWithHandDrawnBorder.test.tsx create mode 100644 src/components/molecules/OakCardWithHandDrawnBorder/OakCardWithHandDrawnBorder.tsx create mode 100644 src/components/molecules/OakCardWithHandDrawnBorder/__snapshots__/OakCardWithHandDrawnBorder.test.tsx.snap create mode 100644 src/components/molecules/OakCardWithHandDrawnBorder/index.ts create mode 100644 src/components/organisms/pupil/OakPupilJourneyOptionalityButton/OakPupilJourneyOptionalityButton.stories.tsx create mode 100644 src/components/organisms/pupil/OakPupilJourneyOptionalityButton/OakPupilJourneyOptionalityButton.test.tsx create mode 100644 src/components/organisms/pupil/OakPupilJourneyOptionalityButton/OakPupilJourneyOptionalityButton.tsx create mode 100644 src/components/organisms/pupil/OakPupilJourneyOptionalityButton/__snapshots__/OakPupilJourneyOptionalityButton.test.tsx.snap create mode 100644 src/components/organisms/pupil/OakPupilJourneyOptionalityButton/index.ts create mode 100644 src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.stories.tsx create mode 100644 src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.test.tsx create mode 100644 src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.tsx create mode 100644 src/components/organisms/pupil/OakPupilJourneyOptionalityItem/__snapshots__/OakPupilJourneyOptionalityItem.test.tsx.snap create mode 100644 src/components/organisms/pupil/OakPupilJourneyOptionalityItem/index.ts diff --git a/src/components/molecules/OakCardWithHandDrawnBorder/OakCardWithHandDrawnBorder.stories.tsx b/src/components/molecules/OakCardWithHandDrawnBorder/OakCardWithHandDrawnBorder.stories.tsx new file mode 100644 index 00000000..242c300d --- /dev/null +++ b/src/components/molecules/OakCardWithHandDrawnBorder/OakCardWithHandDrawnBorder.stories.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import { Meta, StoryObj } from "@storybook/react"; + +import { OakCardWithHandDrawnBorder } from "./OakCardWithHandDrawnBorder"; + +import { OakSpan } from "@/components/atoms"; +import { spacingArgTypes } from "@/storybook-helpers/spacingStyleHelpers"; +import { drawingArgTypes } from "@/storybook-helpers/drawingStyleHelpers"; +import { colorArgTypes } from "@/storybook-helpers/colorStyleHelpers"; + +const meta: Meta = { + component: OakCardWithHandDrawnBorder, + tags: ["autodocs"], + title: "components/molecules/OakCardWithHandDrawnBorder", + argTypes: { + fill: drawingArgTypes["$fill"], + stroke: drawingArgTypes["$stroke"], + children: { type: "string" }, + ...spacingArgTypes, + ...colorArgTypes, + }, + parameters: { + controls: { + include: [ + "children", + "fill", + "stroke", + ...Object.keys(colorArgTypes), + ...Object.keys(spacingArgTypes), + ], + sort: "none", + }, + }, + args: { + children: "Card content goes here", + }, +}; +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: (args) => ( + + Keep going, you're doing great! + + ), +}; diff --git a/src/components/molecules/OakCardWithHandDrawnBorder/OakCardWithHandDrawnBorder.test.tsx b/src/components/molecules/OakCardWithHandDrawnBorder/OakCardWithHandDrawnBorder.test.tsx new file mode 100644 index 00000000..47552fb2 --- /dev/null +++ b/src/components/molecules/OakCardWithHandDrawnBorder/OakCardWithHandDrawnBorder.test.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import "@testing-library/jest-dom"; +import { create } from "react-test-renderer"; +import { ThemeProvider } from "styled-components"; + +import { OakCardWithHandDrawnBorder } from "./OakCardWithHandDrawnBorder"; + +import { oakDefaultTheme } from "@/styles"; + +describe(OakCardWithHandDrawnBorder, () => { + it("matches snapshot", () => { + const tree = create( + + + Content goes here + + , + ).toJSON(); + + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/components/molecules/OakCardWithHandDrawnBorder/OakCardWithHandDrawnBorder.tsx b/src/components/molecules/OakCardWithHandDrawnBorder/OakCardWithHandDrawnBorder.tsx new file mode 100644 index 00000000..a387d725 --- /dev/null +++ b/src/components/molecules/OakCardWithHandDrawnBorder/OakCardWithHandDrawnBorder.tsx @@ -0,0 +1,51 @@ +import React from "react"; + +import { + InternalCardWithBackgroundElement, + InternalCardWithBackgroundElementProps, +} from "@/components/atoms/InternalCardWithBackgroundElement/InternalCardWithBackgroundElement"; +import { + InternalStyledSvg, + InternalStyledSvgProps, +} from "@/components/atoms/InternalStyledSvg"; + +export type OakCardWithHandDrawnBorderProps = Omit< + InternalCardWithBackgroundElementProps, + "backgroundElement" +> & { + fill?: InternalStyledSvgProps["$fill"]; + stroke?: InternalStyledSvgProps["$stroke"]; + strokeWidth?: InternalStyledSvgProps["$strokeWidth"]; +}; + +/** + * A flexed card with a hand-drawn border + * + * An optional `stroke` and `fill` can be applied to change the color of the border + */ +export const OakCardWithHandDrawnBorder = ({ + $pa = "inner-padding-xl", + fill = "black", + stroke, + $width = "fit-content", + ...props +}: OakCardWithHandDrawnBorderProps) => { + return ( + + + + } + {...props} + /> + ); +}; diff --git a/src/components/molecules/OakCardWithHandDrawnBorder/__snapshots__/OakCardWithHandDrawnBorder.test.tsx.snap b/src/components/molecules/OakCardWithHandDrawnBorder/__snapshots__/OakCardWithHandDrawnBorder.test.tsx.snap new file mode 100644 index 00000000..b2a20adb --- /dev/null +++ b/src/components/molecules/OakCardWithHandDrawnBorder/__snapshots__/OakCardWithHandDrawnBorder.test.tsx.snap @@ -0,0 +1,68 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`OakCardWithHandDrawnBorder matches snapshot 1`] = ` +.c0 { + position: relative; + padding: 1.5rem; + font-family: Lexend,sans-serif; +} + +.c2 { + position: absolute; + inset: 0rem; + font-family: Lexend,sans-serif; +} + +.c5 { + position: relative; + 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-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c3 > * { + width: 100%; + height: 100%; +} + +.c4 { + fill: #222222; +} + +
+
+ + + +
+
+ Content goes here +
+
+`; diff --git a/src/components/molecules/OakCardWithHandDrawnBorder/index.ts b/src/components/molecules/OakCardWithHandDrawnBorder/index.ts new file mode 100644 index 00000000..fed53f7f --- /dev/null +++ b/src/components/molecules/OakCardWithHandDrawnBorder/index.ts @@ -0,0 +1 @@ +export * from "./OakCardWithHandDrawnBorder"; diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts index 3581ad74..dfe33364 100644 --- a/src/components/molecules/index.ts +++ b/src/components/molecules/index.ts @@ -26,3 +26,4 @@ export * from "./OakDroppable"; export * from "./OakDraggableFeedback"; export * from "./OakAccordion"; export * from "./OakModal"; +export * from "./OakCardWithHandDrawnBorder"; diff --git a/src/components/organisms/pupil/OakPupilJourneyListItem/OakPupilJourneyListItem.tsx b/src/components/organisms/pupil/OakPupilJourneyListItem/OakPupilJourneyListItem.tsx index 9fde1d8e..bc45c1ae 100644 --- a/src/components/organisms/pupil/OakPupilJourneyListItem/OakPupilJourneyListItem.tsx +++ b/src/components/organisms/pupil/OakPupilJourneyListItem/OakPupilJourneyListItem.tsx @@ -57,7 +57,7 @@ const hoverIconStyles = css` } `; -const StyledLessonNavItem = styled(OakFlex)<{ $disabled?: boolean }>` +const StyledPupilJourneyItem = styled(OakFlex)<{ $disabled?: boolean }>` outline: none; text-align: initial; @@ -117,7 +117,7 @@ export const OakPupilJourneyListItem = ( const disabledOrUnavailable = disabled || unavailable; return ( - ( /> )} - + ); }; diff --git a/src/components/organisms/pupil/OakPupilJourneyOptionalityButton/OakPupilJourneyOptionalityButton.stories.tsx b/src/components/organisms/pupil/OakPupilJourneyOptionalityButton/OakPupilJourneyOptionalityButton.stories.tsx new file mode 100644 index 00000000..d7c54448 --- /dev/null +++ b/src/components/organisms/pupil/OakPupilJourneyOptionalityButton/OakPupilJourneyOptionalityButton.stories.tsx @@ -0,0 +1,72 @@ +import React from "react"; +import { Meta, StoryObj } from "@storybook/react"; + +import { OakPupilJourneyOptionalityButton } from "./OakPupilJourneyOptionalityButton"; + +import { OakFlex } from "@/components/atoms"; + +const meta: Meta = { + component: OakPupilJourneyOptionalityButton, + tags: ["autodocs"], + title: "components/organisms/pupil/OakPupilJourneyOptionalityButton", + args: { + title: "Lesson 1", + numberOfLessons: 7, + href: "#", + }, + argTypes: { + title: { control: { type: "text" } }, // type: "text" is the default + numberOfLessons: { control: { type: "number" } }, + disabled: { control: { type: "boolean" } }, + unavailable: { control: { type: "boolean" } }, + }, + decorators: [ + (Story) => { + return ( + + {Story()} + + ); + }, + ], + parameters: { + controls: { + include: ["title", "numberOfLessons", "disabled", "unavailable"], + }, + }, +}; +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: (args) => , +}; + +export const ReallyLongTitle: Story = { + render: (args) => , + args: { + title: + "This is a really long title that should wrap around to the next line", + numberOfLessons: 6, + }, +}; + +export const Disabled: Story = { + render: (args) => , + args: { + disabled: true, + }, +}; + +export const Unavailable: Story = { + render: (args) => , + args: { + disabled: true, + unavailable: true, + }, +}; diff --git a/src/components/organisms/pupil/OakPupilJourneyOptionalityButton/OakPupilJourneyOptionalityButton.test.tsx b/src/components/organisms/pupil/OakPupilJourneyOptionalityButton/OakPupilJourneyOptionalityButton.test.tsx new file mode 100644 index 00000000..b890f9a4 --- /dev/null +++ b/src/components/organisms/pupil/OakPupilJourneyOptionalityButton/OakPupilJourneyOptionalityButton.test.tsx @@ -0,0 +1,66 @@ +import React from "react"; +import "@testing-library/jest-dom"; +import { create } from "react-test-renderer"; + +import { OakPupilJourneyOptionalityButton } from "./OakPupilJourneyOptionalityButton"; + +import { OakThemeProvider } from "@/components/atoms"; +import { oakDefaultTheme } from "@/styles"; +import renderWithTheme from "@/test-helpers/renderWithTheme"; + +describe(OakPupilJourneyOptionalityButton, () => { + it("matches snapshot", () => { + const tree = create( + + + , + , + ).toJSON(); + + expect(tree).toMatchSnapshot(); + }); + + it("renders a div when the item is disabled", () => { + const { getByTestId } = renderWithTheme( + <> + + , + ); + + expect(getByTestId("intro").tagName).toBe("DIV"); + }); + it("renders a button when the item is not disabled", () => { + const { getByTestId } = renderWithTheme( + <> + + , + ); + + expect(getByTestId("intro").tagName).toBe("A"); + }); + it("renders the number of lessons when provided", () => { + const { getByTestId } = renderWithTheme( + <> + + , + ); + + expect(getByTestId("intro").textContent).toContain("6"); + }); +}); diff --git a/src/components/organisms/pupil/OakPupilJourneyOptionalityButton/OakPupilJourneyOptionalityButton.tsx b/src/components/organisms/pupil/OakPupilJourneyOptionalityButton/OakPupilJourneyOptionalityButton.tsx new file mode 100644 index 00000000..b7a3cfc4 --- /dev/null +++ b/src/components/organisms/pupil/OakPupilJourneyOptionalityButton/OakPupilJourneyOptionalityButton.tsx @@ -0,0 +1,140 @@ +import React, { ComponentPropsWithoutRef, ElementType } from "react"; +import styled, { css } from "styled-components"; + +import { OakBox, OakFlex } from "@/components/atoms"; +import { parseColor } from "@/styles/helpers/parseColor"; +import { + OakCardWithHandDrawnBorder, + OakRoundIcon, +} from "@/components/molecules"; +import { parseDropShadow } from "@/styles/helpers/parseDropShadow"; + +type OakPupilJourneyOptionalityButtonProps = { + /** + * Disable the section preventing navigation to it. + */ + disabled?: boolean; + /** + * shows that a section is unavailable + */ + unavailable?: boolean; + title: string; + numberOfLessons: number; +} & ComponentPropsWithoutRef; + +const StyledLabel = styled(OakBox)``; + +const StyledPupilOptionalityListButton = styled(OakFlex)<{ + $disabled?: boolean; +}>` + outline: none; + text-align: initial; + + &:focus-visible { + box-shadow: ${parseDropShadow("drop-shadow-centered-lemon")}, + ${parseDropShadow("drop-shadow-centered-grey")}; + } + + ${(props) => props.$disabled && "cursor: not-allowed"} + + ${(props) => + !props.$disabled && + css` + cursor: pointer; + + /* Don't apply hover styles on touch devices */ + @media (hover: hover) { + &:hover { + background: ${parseColor("bg-decorative1-subdued")}; + ${StyledLabel} { + text-decoration: underline; + } + } + } + + &:active { + box-shadow: ${parseDropShadow("drop-shadow-lemon")}, + ${parseDropShadow("drop-shadow-grey")}; + } + `} +`; + +/** + * Button for units with optionality it is only used as the child of the PupilJourneyOptionailityitem component + */ + +export const OakPupilJourneyOptionalityButton = ( + props: OakPupilJourneyOptionalityButtonProps, +) => { + const { + lessonSectionName, + progress, + disabled, + href, + unavailable, + onClick, + numberOfLessons, + ...rest + } = props; + + const disabledOrUnavailable = disabled || unavailable; + return ( + + + + + {props.title} + + + + {!props.unavailable && ( + <> + + {numberOfLessons} lessons + + + + )} + {props.unavailable && ( + + Unavailable + + )} + + + + + ); +}; diff --git a/src/components/organisms/pupil/OakPupilJourneyOptionalityButton/__snapshots__/OakPupilJourneyOptionalityButton.test.tsx.snap b/src/components/organisms/pupil/OakPupilJourneyOptionalityButton/__snapshots__/OakPupilJourneyOptionalityButton.test.tsx.snap new file mode 100644 index 00000000..1e162905 --- /dev/null +++ b/src/components/organisms/pupil/OakPupilJourneyOptionalityButton/__snapshots__/OakPupilJourneyOptionalityButton.test.tsx.snap @@ -0,0 +1,267 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`OakPupilJourneyOptionalityButton matches snapshot 1`] = ` +[ + .c0 { + color: #222222; + background: #ffffff; + font-family: Lexend,sans-serif; +} + +.c3 { + position: relative; + padding: 1.5rem; + font-family: Lexend,sans-serif; +} + +.c5 { + position: absolute; + inset: 0rem; + font-family: Lexend,sans-serif; +} + +.c8 { + position: relative; + font-family: Lexend,sans-serif; +} + +.c9 { + font-family: Lexend,sans-serif; +} + +.c11 { + color: #222222; + font-family: Lexend,sans-serif; + font-weight: 600; + font-size: 1rem; + line-height: 1.25rem; + -webkit-letter-spacing: 0.0115rem; + -moz-letter-spacing: 0.0115rem; + -ms-letter-spacing: 0.0115rem; + letter-spacing: 0.0115rem; +} + +.c13 { + color: #222222; + font-family: Lexend,sans-serif; + font-weight: 400; + font-size: 1rem; + line-height: 1.25rem; + -webkit-letter-spacing: 0.0115rem; + -moz-letter-spacing: 0.0115rem; + -ms-letter-spacing: 0.0115rem; + letter-spacing: 0.0115rem; +} + +.c14 { + width: 2rem; + height: 2rem; + padding: 0.25rem; + background: transparent; + border-radius: 6.25rem; + font-family: Lexend,sans-serif; +} + +.c15 { + position: relative; + width: 100%; + min-width: 100%; + height: 100%; + min-height: 100%; + font-family: Lexend,sans-serif; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + gap: 0.5rem; +} + +.c12 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 0.25rem; +} + +.c16 { + -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%); + filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%); + object-fit: contain; +} + +.c6 > * { + width: 100%; + height: 100%; +} + +.c7 { + fill: #222222; + stroke: #222222; +} + +.c2 { + outline: none; + text-align: initial; + cursor: pointer; +} + +.c2:focus-visible { + box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%); +} + +.c2:active { + box-shadow: 0.125rem 0.125rem 0 rgba(255,229,85,100%), 0.25rem 0.25rem 0 rgba(87,87,87,100%); +} + +@media (min-width:750px) { + .c11 { + font-weight: 600; + } +} + +@media (min-width:750px) { + .c11 { + font-size: 1.25rem; + } +} + +@media (min-width:750px) { + .c11 { + line-height: 1.5rem; + } +} + +@media (min-width:750px) { + .c11 { + -webkit-letter-spacing: 0.0115rem; + -moz-letter-spacing: 0.0115rem; + -ms-letter-spacing: 0.0115rem; + letter-spacing: 0.0115rem; + } +} + +@media (hover:hover) { + .c2:hover { + background: #dff9de; + } +} + + +
+
+ + + +
+
+
+
+ Lesson 1 +
+
+
+ 6 + lessons +
+
+
+ chevron-right +
+
+
+
+
+
+ , + ",", +] +`; diff --git a/src/components/organisms/pupil/OakPupilJourneyOptionalityButton/index.ts b/src/components/organisms/pupil/OakPupilJourneyOptionalityButton/index.ts new file mode 100644 index 00000000..0655b981 --- /dev/null +++ b/src/components/organisms/pupil/OakPupilJourneyOptionalityButton/index.ts @@ -0,0 +1 @@ +export * from "./OakPupilJourneyOptionalityButton"; diff --git a/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.stories.tsx b/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.stories.tsx new file mode 100644 index 00000000..4ebde339 --- /dev/null +++ b/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.stories.tsx @@ -0,0 +1,58 @@ +import React from "react"; +import { Meta, StoryObj } from "@storybook/react"; + +import { OakPupilJourneyOptionalityItem } from "./OakPupilJourneyOptionalityItem"; + +import { OakFlex } from "@/components/atoms"; +import { OakPupilJourneyOptionalityButton } from "@/components/organisms/pupil/OakPupilJourneyOptionalityButton"; + +const meta: Meta = { + component: OakPupilJourneyOptionalityItem, + tags: ["autodocs"], + title: "components/organisms/pupil/OakPupilJourneyOptionalityItem", + args: { + title: "Lesson 1", + index: 1, + }, + argTypes: { + title: { control: { type: "text" } }, // type: "text" is the default + index: { control: { type: "number" } }, + disabled: { control: { type: "boolean" } }, + unavailable: { control: { type: "boolean" } }, + }, + decorators: [ + (Story) => ( + + + + ), + ], +}; +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: (args) => ( + + + + + ), +}; diff --git a/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.test.tsx b/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.test.tsx new file mode 100644 index 00000000..23b4c2e5 --- /dev/null +++ b/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.test.tsx @@ -0,0 +1,62 @@ +import React from "react"; +import "@testing-library/jest-dom"; +import { render } from "@testing-library/react"; +import { create } from "react-test-renderer"; + +import { OakPupilJourneyOptionalityButton } from "../OakPupilJourneyOptionalityButton"; + +import { OakPupilJourneyOptionalityItem } from "./OakPupilJourneyOptionalityItem"; + +import { OakThemeProvider } from "@/components/atoms"; +import { oakDefaultTheme } from "@/styles"; + +describe("OakPupilJourneyOptionalityItem component test", () => { + it("renders", () => { + const { getByTestId } = render( + + {" "} + + + + + , + ); + expect(getByTestId("test")).toBeInTheDocument(); + }); + + it("matches snapshot", () => { + const tree = create( + + + + + + , + ).toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.tsx b/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.tsx new file mode 100644 index 00000000..4dcf7140 --- /dev/null +++ b/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.tsx @@ -0,0 +1,54 @@ +import React from "react"; + +import { OakBox, OakFlex } from "@/components/atoms"; + +export type OakPupilJourneyOptionalityItemProps = { + children: React.ReactNode; + index: number; + title: string; + unavailable?: boolean; + disabled?: boolean; +}; + +/** + * + * OakPupilJourneyOptionalityItem is a styled container to be used for units with optionality, OakPupilJourneyOptionalityButton should be used as children + * + */ +export const OakPupilJourneyOptionalityItem = ( + props: OakPupilJourneyOptionalityItemProps, +) => { + const { children, index, title, unavailable, disabled, ...rest } = props; + const disabledOrUnavailable = props.disabled || props.unavailable; + return ( + + + + + {props.index} + + + + {props.title} + + + + {children} + + + ); +}; diff --git a/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/__snapshots__/OakPupilJourneyOptionalityItem.test.tsx.snap b/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/__snapshots__/OakPupilJourneyOptionalityItem.test.tsx.snap new file mode 100644 index 00000000..f531d05d --- /dev/null +++ b/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/__snapshots__/OakPupilJourneyOptionalityItem.test.tsx.snap @@ -0,0 +1,509 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`OakPupilJourneyOptionalityItem component test matches snapshot 1`] = ` +.c0 { + padding: 1.5rem; + background: #ffffff; + border-radius: 0.375rem; + font-family: Lexend,sans-serif; +} + +.c2 { + font-family: Lexend,sans-serif; +} + +.c5 { + color: #222222; + font-family: Lexend,sans-serif; + font-weight: 600; + font-size: 1.5rem; + line-height: 2rem; + -webkit-letter-spacing: 0.0115rem; + -moz-letter-spacing: 0.0115rem; + -ms-letter-spacing: 0.0115rem; + letter-spacing: 0.0115rem; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c6 { + color: #222222; + 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; +} + +.c8 { + color: #222222; + background: #ffffff; + font-family: Lexend,sans-serif; +} + +.c11 { + position: relative; + padding: 1.5rem; + font-family: Lexend,sans-serif; +} + +.c13 { + position: absolute; + inset: 0rem; + font-family: Lexend,sans-serif; +} + +.c16 { + position: relative; + font-family: Lexend,sans-serif; +} + +.c18 { + color: #222222; + font-family: Lexend,sans-serif; + font-weight: 600; + font-size: 1rem; + line-height: 1.25rem; + -webkit-letter-spacing: 0.0115rem; + -moz-letter-spacing: 0.0115rem; + -ms-letter-spacing: 0.0115rem; + letter-spacing: 0.0115rem; +} + +.c20 { + color: #222222; + font-family: Lexend,sans-serif; + font-weight: 400; + font-size: 1rem; + line-height: 1.25rem; + -webkit-letter-spacing: 0.0115rem; + -moz-letter-spacing: 0.0115rem; + -ms-letter-spacing: 0.0115rem; + letter-spacing: 0.0115rem; +} + +.c21 { + width: 2rem; + height: 2rem; + padding: 0.25rem; + background: transparent; + border-radius: 6.25rem; + font-family: Lexend,sans-serif; +} + +.c22 { + position: relative; + width: 100%; + min-width: 100%; + height: 100%; + min-height: 100%; + 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; + gap: 1.5rem; +} + +.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 2rem; +} + +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + gap: 0.75rem; +} + +.c9 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c12 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} + +.c17 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + gap: 0.5rem; +} + +.c19 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 0.25rem; +} + +.c23 { + -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%); + filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%); + object-fit: contain; +} + +.c14 > * { + width: 100%; + height: 100%; +} + +.c15 { + fill: #222222; + stroke: #222222; +} + +.c10 { + outline: none; + text-align: initial; + cursor: pointer; +} + +.c10:focus-visible { + box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%); +} + +.c10:active { + box-shadow: 0.125rem 0.125rem 0 rgba(255,229,85,100%), 0.25rem 0.25rem 0 rgba(87,87,87,100%); +} + +@media (min-width:750px) { + .c5 { + font-weight: 600; + } +} + +@media (min-width:750px) { + .c5 { + font-size: 2rem; + } +} + +@media (min-width:750px) { + .c5 { + line-height: 2.5rem; + } +} + +@media (min-width:750px) { + .c5 { + -webkit-letter-spacing: 0.0115rem; + -moz-letter-spacing: 0.0115rem; + -ms-letter-spacing: 0.0115rem; + letter-spacing: 0.0115rem; + } +} + +@media (min-width:750px) { + .c6 { + font-weight: 600; + } +} + +@media (min-width:750px) { + .c6 { + font-size: 1.5rem; + } +} + +@media (min-width:750px) { + .c6 { + line-height: 2rem; + } +} + +@media (min-width:750px) { + .c6 { + -webkit-letter-spacing: 0.0115rem; + -moz-letter-spacing: 0.0115rem; + -ms-letter-spacing: 0.0115rem; + letter-spacing: 0.0115rem; + } +} + +@media (min-width:750px) { + .c18 { + font-weight: 600; + } +} + +@media (min-width:750px) { + .c18 { + font-size: 1.25rem; + } +} + +@media (min-width:750px) { + .c18 { + line-height: 1.5rem; + } +} + +@media (min-width:750px) { + .c18 { + -webkit-letter-spacing: 0.0115rem; + -moz-letter-spacing: 0.0115rem; + -ms-letter-spacing: 0.0115rem; + letter-spacing: 0.0115rem; + } +} + +@media (min-width:750px) { + .c7 { + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } +} + +@media (hover:hover) { + .c10:hover { + background: #dff9de; + } +} + + +`; diff --git a/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/index.ts b/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/index.ts new file mode 100644 index 00000000..f7a2b9ea --- /dev/null +++ b/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/index.ts @@ -0,0 +1 @@ +export * from "./OakPupilJourneyOptionalityItem"; diff --git a/src/components/organisms/pupil/index.ts b/src/components/organisms/pupil/index.ts index 58425169..bacde885 100644 --- a/src/components/organisms/pupil/index.ts +++ b/src/components/organisms/pupil/index.ts @@ -24,3 +24,5 @@ export * from "./OakPupilJourneyList"; export * from "./OakPupilJourneyHeader"; export * from "./OakPupilJourneyListCounter"; export * from "./OakPupilJourneyProgrammeOptions"; +export * from "./OakPupilJourneyOptionalityItem"; +export * from "./OakPupilJourneyOptionalityButton"; From db250f7ade2692aa639bd8a963dab072c0b17067 Mon Sep 17 00:00:00 2001 From: ben Date: Thu, 16 May 2024 16:28:59 +0100 Subject: [PATCH 2/4] feat(optionality): create optionality component --- .../__snapshots__/OakCardWithHandDrawnBorder.test.tsx.snap | 3 +++ .../OakPupilJourneyOptionalityButton.test.tsx.snap | 3 +++ .../__snapshots__/OakPupilJourneyOptionalityItem.test.tsx.snap | 3 +++ 3 files changed, 9 insertions(+) diff --git a/src/components/molecules/OakCardWithHandDrawnBorder/__snapshots__/OakCardWithHandDrawnBorder.test.tsx.snap b/src/components/molecules/OakCardWithHandDrawnBorder/__snapshots__/OakCardWithHandDrawnBorder.test.tsx.snap index b2a20adb..b9fa9273 100644 --- a/src/components/molecules/OakCardWithHandDrawnBorder/__snapshots__/OakCardWithHandDrawnBorder.test.tsx.snap +++ b/src/components/molecules/OakCardWithHandDrawnBorder/__snapshots__/OakCardWithHandDrawnBorder.test.tsx.snap @@ -3,6 +3,9 @@ exports[`OakCardWithHandDrawnBorder matches snapshot 1`] = ` .c0 { position: relative; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; padding: 1.5rem; font-family: Lexend,sans-serif; } diff --git a/src/components/organisms/pupil/OakPupilJourneyOptionalityButton/__snapshots__/OakPupilJourneyOptionalityButton.test.tsx.snap b/src/components/organisms/pupil/OakPupilJourneyOptionalityButton/__snapshots__/OakPupilJourneyOptionalityButton.test.tsx.snap index 1e162905..f97b59d0 100644 --- a/src/components/organisms/pupil/OakPupilJourneyOptionalityButton/__snapshots__/OakPupilJourneyOptionalityButton.test.tsx.snap +++ b/src/components/organisms/pupil/OakPupilJourneyOptionalityButton/__snapshots__/OakPupilJourneyOptionalityButton.test.tsx.snap @@ -10,6 +10,9 @@ exports[`OakPupilJourneyOptionalityButton matches snapshot 1`] = ` .c3 { position: relative; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; padding: 1.5rem; font-family: Lexend,sans-serif; } diff --git a/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/__snapshots__/OakPupilJourneyOptionalityItem.test.tsx.snap b/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/__snapshots__/OakPupilJourneyOptionalityItem.test.tsx.snap index f531d05d..8b809fb0 100644 --- a/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/__snapshots__/OakPupilJourneyOptionalityItem.test.tsx.snap +++ b/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/__snapshots__/OakPupilJourneyOptionalityItem.test.tsx.snap @@ -46,6 +46,9 @@ exports[`OakPupilJourneyOptionalityItem component test matches snapshot 1`] = ` .c11 { position: relative; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; padding: 1.5rem; font-family: Lexend,sans-serif; } From 631ce6541208737b6626703c130a0340cf670222 Mon Sep 17 00:00:00 2001 From: ben Date: Thu, 16 May 2024 16:50:44 +0100 Subject: [PATCH 3/4] feat(optionality): 5 options for optionality --- ...OakPupilJourneyOptionalityItem.stories.tsx | 44 +++++++++++++++++++ .../OakPupilJourneyOptionalityItem.tsx | 6 ++- 2 files changed, 49 insertions(+), 1 deletion(-) diff --git a/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.stories.tsx b/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.stories.tsx index 4ebde339..9d2b2e7c 100644 --- a/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.stories.tsx +++ b/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.stories.tsx @@ -56,3 +56,47 @@ export const Default: Story = { ), }; + +export const FiveOptions: Story = { + render: (args) => ( + + + + + + + + ), +}; + +FiveOptions.args = {}; diff --git a/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.tsx b/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.tsx index 4dcf7140..3ce27ffe 100644 --- a/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.tsx +++ b/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.tsx @@ -46,7 +46,11 @@ export const OakPupilJourneyOptionalityItem = ( {props.title} - + {children} From 73b6bcad5c7553756f147de1f346ede788ca6d1a Mon Sep 17 00:00:00 2001 From: ben Date: Thu, 16 May 2024 16:51:55 +0100 Subject: [PATCH 4/4] feat(optionality): 5 options for optionality --- .../__snapshots__/OakPupilJourneyOptionalityItem.test.tsx.snap | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/__snapshots__/OakPupilJourneyOptionalityItem.test.tsx.snap b/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/__snapshots__/OakPupilJourneyOptionalityItem.test.tsx.snap index 8b809fb0..c1bdca77 100644 --- a/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/__snapshots__/OakPupilJourneyOptionalityItem.test.tsx.snap +++ b/src/components/organisms/pupil/OakPupilJourneyOptionalityItem/__snapshots__/OakPupilJourneyOptionalityItem.test.tsx.snap @@ -144,6 +144,9 @@ exports[`OakPupilJourneyOptionalityItem component test matches snapshot 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; gap: 0.75rem; }