From 55a532012fbf1a928fd83fdcf66e75c0aa62957a Mon Sep 17 00:00:00 2001 From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com> Date: Wed, 23 Oct 2024 16:44:44 +0100 Subject: [PATCH 01/11] First pass at feedback component in storybook --- .../components/Feedback/Feedback.stories.tsx | 20 +++ .../components/Feedback/Public.test.tsx | 35 ++++ .../src/@planx/components/Feedback/Public.tsx | 167 ++++++++++++++++++ .../src/ui/images/feedback_filled-01.svg | 9 + .../src/ui/images/feedback_filled-02.svg | 9 + .../src/ui/images/feedback_filled-03.svg | 9 + .../src/ui/images/feedback_filled-04.svg | 9 + .../src/ui/images/feedback_filled-05.svg | 9 + .../src/ui/images/feedback_stroke-01.svg | 9 + .../src/ui/images/feedback_stroke-02.svg | 9 + .../src/ui/images/feedback_stroke-03.svg | 9 + .../src/ui/images/feedback_stroke-04.svg | 9 + .../src/ui/images/feedback_stroke-05.svg | 9 + 13 files changed, 312 insertions(+) create mode 100644 editor.planx.uk/src/@planx/components/Feedback/Feedback.stories.tsx create mode 100644 editor.planx.uk/src/@planx/components/Feedback/Public.test.tsx create mode 100644 editor.planx.uk/src/@planx/components/Feedback/Public.tsx create mode 100644 editor.planx.uk/src/ui/images/feedback_filled-01.svg create mode 100644 editor.planx.uk/src/ui/images/feedback_filled-02.svg create mode 100644 editor.planx.uk/src/ui/images/feedback_filled-03.svg create mode 100644 editor.planx.uk/src/ui/images/feedback_filled-04.svg create mode 100644 editor.planx.uk/src/ui/images/feedback_filled-05.svg create mode 100644 editor.planx.uk/src/ui/images/feedback_stroke-01.svg create mode 100644 editor.planx.uk/src/ui/images/feedback_stroke-02.svg create mode 100644 editor.planx.uk/src/ui/images/feedback_stroke-03.svg create mode 100644 editor.planx.uk/src/ui/images/feedback_stroke-04.svg create mode 100644 editor.planx.uk/src/ui/images/feedback_stroke-05.svg diff --git a/editor.planx.uk/src/@planx/components/Feedback/Feedback.stories.tsx b/editor.planx.uk/src/@planx/components/Feedback/Feedback.stories.tsx new file mode 100644 index 0000000000..a745e5b40a --- /dev/null +++ b/editor.planx.uk/src/@planx/components/Feedback/Feedback.stories.tsx @@ -0,0 +1,20 @@ +import { Meta, StoryObj } from "@storybook/react"; + +import Public from "./Public"; + +const meta = { + title: "PlanX Components/Feedback", + component: Public, +} satisfies Meta; + +type Story = StoryObj; + +export default meta; + +export const Basic = { + args: { + title: "Tell us what you think", + description: + "This service is a work in progress, any feedback you share about your experience will help us to improve it.", + }, +} satisfies Story; diff --git a/editor.planx.uk/src/@planx/components/Feedback/Public.test.tsx b/editor.planx.uk/src/@planx/components/Feedback/Public.test.tsx new file mode 100644 index 0000000000..ce1c8ea9ed --- /dev/null +++ b/editor.planx.uk/src/@planx/components/Feedback/Public.test.tsx @@ -0,0 +1,35 @@ +import { screen } from "@testing-library/react"; +import React from "react"; +import { setup } from "testUtils"; +import { vi } from "vitest"; +import { axe } from "vitest-axe"; + +import FeedbackComponent from "./Public"; + +const handleSubmit = vi.fn(); +describe("when the Feedback component is rendered", async () => { + beforeEach(() => { + // TODO + }); + it("should not have any accessibility violations", async () => { + const { container } = setup( + , + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); + }); + it("should call handleSubmit when the continue button is pressed", async () => { + const { user } = setup( + , + ); + + await user.click(screen.getByTestId("feedback-button-terrible")); + await user.click(screen.getByTestId("continue-button")); + + expect(handleSubmit).toHaveBeenCalled(); + }); +}); diff --git a/editor.planx.uk/src/@planx/components/Feedback/Public.tsx b/editor.planx.uk/src/@planx/components/Feedback/Public.tsx new file mode 100644 index 0000000000..42e669e360 --- /dev/null +++ b/editor.planx.uk/src/@planx/components/Feedback/Public.tsx @@ -0,0 +1,167 @@ +// @ts-ignore +import Box from "@mui/material/Box"; +import { styled } from "@mui/material/styles"; +import ToggleButton from "@mui/material/ToggleButton"; +import ToggleButtonGroup, { + toggleButtonGroupClasses, +} from "@mui/material/ToggleButtonGroup"; +import Typography from "@mui/material/Typography"; +import Card from "@planx/components/shared/Preview/Card"; +import CardHeader from "@planx/components/shared/Preview/CardHeader/CardHeader"; +import type { PublicProps } from "@planx/components/ui"; +import { useFormik } from "formik"; +import React from "react"; +import Face from "ui/images/feedback_filled-01.svg"; +import InputLabel from "ui/public/InputLabel"; + +// import * as Yup from "yup"; +import { BaseNodeData } from "../shared"; +import { getPreviouslySubmittedData, makeData } from "../shared/utils"; + +export interface FeedbackComponentProps extends BaseNodeData { + title: string; + description?: string; + fn?: string; +} + +interface FormProps { + feedbackScore: string; +} + +const StyledToggleButtonGroup = styled(ToggleButtonGroup)(() => ({ + [`& .${toggleButtonGroupClasses.grouped}`]: { + border: 0, + }, +})); + +const FeedbackComponent = ( + props: PublicProps, +): FCReturn => { + const formik = useFormik({ + initialValues: getPreviouslySubmittedData(props) ?? { + feedbackScore: "", + }, + onSubmit: (values) => { + props.handleSubmit?.(makeData(props, values)); + }, + // TODO: make mandatory feedback toggleable + // validateOnBlur: false, + // validateOnChange: false, + // validationSchema: Yup.object().shape({ + // feedbackButtonGroup: Yup.string().required( + // "A feedback option is required" + // ), + // }), + }); + + const handleFeedbackChange = ( + event: React.MouseEvent, + newValue: string | null, + ) => { + if (newValue !== null) { + formik.setFieldValue("feedbackScore", newValue); + } + }; + + return ( + + + + + + + smiley face + + Terrible + + + + + + smiley face + + Poor + + + + + + smiley face + + Neutral + + + + + + smiley face + + Good + + + + + + smiley face + + Excellent + + + + + + + ); +}; + +export default FeedbackComponent; diff --git a/editor.planx.uk/src/ui/images/feedback_filled-01.svg b/editor.planx.uk/src/ui/images/feedback_filled-01.svg new file mode 100644 index 0000000000..bd3307e0ac --- /dev/null +++ b/editor.planx.uk/src/ui/images/feedback_filled-01.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/editor.planx.uk/src/ui/images/feedback_filled-02.svg b/editor.planx.uk/src/ui/images/feedback_filled-02.svg new file mode 100644 index 0000000000..95c5609458 --- /dev/null +++ b/editor.planx.uk/src/ui/images/feedback_filled-02.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/editor.planx.uk/src/ui/images/feedback_filled-03.svg b/editor.planx.uk/src/ui/images/feedback_filled-03.svg new file mode 100644 index 0000000000..7912058369 --- /dev/null +++ b/editor.planx.uk/src/ui/images/feedback_filled-03.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/editor.planx.uk/src/ui/images/feedback_filled-04.svg b/editor.planx.uk/src/ui/images/feedback_filled-04.svg new file mode 100644 index 0000000000..7062cc9287 --- /dev/null +++ b/editor.planx.uk/src/ui/images/feedback_filled-04.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/editor.planx.uk/src/ui/images/feedback_filled-05.svg b/editor.planx.uk/src/ui/images/feedback_filled-05.svg new file mode 100644 index 0000000000..db58d2375d --- /dev/null +++ b/editor.planx.uk/src/ui/images/feedback_filled-05.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/editor.planx.uk/src/ui/images/feedback_stroke-01.svg b/editor.planx.uk/src/ui/images/feedback_stroke-01.svg new file mode 100644 index 0000000000..0a9c8261e6 --- /dev/null +++ b/editor.planx.uk/src/ui/images/feedback_stroke-01.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/editor.planx.uk/src/ui/images/feedback_stroke-02.svg b/editor.planx.uk/src/ui/images/feedback_stroke-02.svg new file mode 100644 index 0000000000..2d0f2e3441 --- /dev/null +++ b/editor.planx.uk/src/ui/images/feedback_stroke-02.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/editor.planx.uk/src/ui/images/feedback_stroke-03.svg b/editor.planx.uk/src/ui/images/feedback_stroke-03.svg new file mode 100644 index 0000000000..a6714c098f --- /dev/null +++ b/editor.planx.uk/src/ui/images/feedback_stroke-03.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/editor.planx.uk/src/ui/images/feedback_stroke-04.svg b/editor.planx.uk/src/ui/images/feedback_stroke-04.svg new file mode 100644 index 0000000000..0c23e56845 --- /dev/null +++ b/editor.planx.uk/src/ui/images/feedback_stroke-04.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/editor.planx.uk/src/ui/images/feedback_stroke-05.svg b/editor.planx.uk/src/ui/images/feedback_stroke-05.svg new file mode 100644 index 0000000000..6a0063a8e8 --- /dev/null +++ b/editor.planx.uk/src/ui/images/feedback_stroke-05.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file From 012c6a4b5d9812a68491c078b339b99fe9d24922 Mon Sep 17 00:00:00 2001 From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com> Date: Wed, 23 Oct 2024 16:58:39 +0100 Subject: [PATCH 02/11] fix: import --- editor.planx.uk/src/@planx/components/Feedback/Public.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor.planx.uk/src/@planx/components/Feedback/Public.tsx b/editor.planx.uk/src/@planx/components/Feedback/Public.tsx index 42e669e360..87f4598b55 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/Public.tsx +++ b/editor.planx.uk/src/@planx/components/Feedback/Public.tsx @@ -7,7 +7,7 @@ import ToggleButtonGroup, { } from "@mui/material/ToggleButtonGroup"; import Typography from "@mui/material/Typography"; import Card from "@planx/components/shared/Preview/Card"; -import CardHeader from "@planx/components/shared/Preview/CardHeader/CardHeader"; +import CardHeader from "@planx/components/shared/Preview/CardHeader"; import type { PublicProps } from "@planx/components/ui"; import { useFormik } from "formik"; import React from "react"; From f58d29ae64cf993ed2cded923f2ddf8c8bbb6736 Mon Sep 17 00:00:00 2001 From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com> Date: Thu, 24 Oct 2024 12:18:51 +0100 Subject: [PATCH 03/11] Extract FaceBox component --- .../components/Feedback/Public.test.tsx | 7 +- .../src/@planx/components/Feedback/Public.tsx | 124 +++++------------- .../Feedback/components/FaceBox.tsx | 39 ++++++ 3 files changed, 77 insertions(+), 93 deletions(-) create mode 100644 editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx diff --git a/editor.planx.uk/src/@planx/components/Feedback/Public.test.tsx b/editor.planx.uk/src/@planx/components/Feedback/Public.test.tsx index ce1c8ea9ed..a8757cf193 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/Public.test.tsx +++ b/editor.planx.uk/src/@planx/components/Feedback/Public.test.tsx @@ -8,9 +8,6 @@ import FeedbackComponent from "./Public"; const handleSubmit = vi.fn(); describe("when the Feedback component is rendered", async () => { - beforeEach(() => { - // TODO - }); it("should not have any accessibility violations", async () => { const { container } = setup( , @@ -21,8 +18,8 @@ describe("when the Feedback component is rendered", async () => { it("should call handleSubmit when the continue button is pressed", async () => { const { user } = setup( , ); diff --git a/editor.planx.uk/src/@planx/components/Feedback/Public.tsx b/editor.planx.uk/src/@planx/components/Feedback/Public.tsx index 87f4598b55..48ef9619e5 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/Public.tsx +++ b/editor.planx.uk/src/@planx/components/Feedback/Public.tsx @@ -1,22 +1,23 @@ -// @ts-ignore -import Box from "@mui/material/Box"; import { styled } from "@mui/material/styles"; -import ToggleButton from "@mui/material/ToggleButton"; import ToggleButtonGroup, { toggleButtonGroupClasses, } from "@mui/material/ToggleButtonGroup"; -import Typography from "@mui/material/Typography"; import Card from "@planx/components/shared/Preview/Card"; import CardHeader from "@planx/components/shared/Preview/CardHeader"; import type { PublicProps } from "@planx/components/ui"; import { useFormik } from "formik"; import React from "react"; -import Face from "ui/images/feedback_filled-01.svg"; +import TerribleFace from "ui/images/feedback_filled-01.svg"; +import PoorFace from "ui/images/feedback_filled-02.svg"; +import NeutralFace from "ui/images/feedback_filled-03.svg"; +import GoodFace from "ui/images/feedback_filled-04.svg"; +import ExcellentFace from "ui/images/feedback_filled-05.svg"; import InputLabel from "ui/public/InputLabel"; // import * as Yup from "yup"; import { BaseNodeData } from "../shared"; import { getPreviouslySubmittedData, makeData } from "../shared/utils"; +import { FaceBox } from "./components/FaceBox"; export interface FeedbackComponentProps extends BaseNodeData { title: string; @@ -74,90 +75,37 @@ const FeedbackComponent = ( onChange={handleFeedbackChange} aria-label="text alignment" > - - - smiley face - - Terrible - - - - - - smiley face - - Poor - - - - - - smiley face - - Neutral - - - - - - smiley face - - Good - - - - - - smiley face - - Excellent - - - + testId="feedback-button-terrible" + icon={TerribleFace} + label="Terrible" + altText="very unhappy face" + /> + + + + diff --git a/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx b/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx new file mode 100644 index 0000000000..fa73c22b81 --- /dev/null +++ b/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx @@ -0,0 +1,39 @@ +import Box from "@mui/material/Box"; +import ToggleButton from "@mui/material/ToggleButton"; +import Typography from "@mui/material/Typography"; +import React, { ReactElement } from "react"; + +interface FaceBoxProps { + icon: string; + label: string; + altText: string; + testId?: string; + value: string; +} + +export const FaceBox = ({ + icon, + label, + altText, + testId, + value, +}: FaceBoxProps): ReactElement => { + return ( + + + {altText} + + {label} + + + + ); +}; From c9c23f0995e2e7c4471ac2089b1e4d6482fb7b54 Mon Sep 17 00:00:00 2001 From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com> Date: Thu, 24 Oct 2024 16:53:29 +0100 Subject: [PATCH 04/11] Style a bit better --- .../src/@planx/components/Feedback/Public.tsx | 67 ++++++++++--------- .../Feedback/components/FaceBox.tsx | 34 +++++----- 2 files changed, 53 insertions(+), 48 deletions(-) diff --git a/editor.planx.uk/src/@planx/components/Feedback/Public.tsx b/editor.planx.uk/src/@planx/components/Feedback/Public.tsx index 48ef9619e5..7cb2625718 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/Public.tsx +++ b/editor.planx.uk/src/@planx/components/Feedback/Public.tsx @@ -1,3 +1,4 @@ +import Grid from "@mui/material/Grid"; import { styled } from "@mui/material/styles"; import ToggleButtonGroup, { toggleButtonGroupClasses, @@ -73,39 +74,41 @@ const FeedbackComponent = ( exclusive id="feedbackButtonGroup" onChange={handleFeedbackChange} - aria-label="text alignment" + aria-label="feedback score" > - - - - - + + + + + + + diff --git a/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx b/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx index fa73c22b81..9d5f128efe 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx +++ b/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx @@ -1,4 +1,5 @@ import Box from "@mui/material/Box"; +import Grid from "@mui/material/Grid"; import ToggleButton from "@mui/material/ToggleButton"; import Typography from "@mui/material/Typography"; import React, { ReactElement } from "react"; @@ -19,21 +20,22 @@ export const FaceBox = ({ value, }: FaceBoxProps): ReactElement => { return ( - - - {altText} - - {label} - - - + + + + {altText} + + {label} + + + + ); }; From 744aefc5aeec67c6d6ea12c06872f7e961fbc822 Mon Sep 17 00:00:00 2001 From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com> Date: Thu, 24 Oct 2024 17:16:03 +0100 Subject: [PATCH 05/11] Add rich text input --- .../components/Feedback/Public.test.tsx | 1 + .../src/@planx/components/Feedback/Public.tsx | 108 +++++++++--------- .../Feedback/components/FaceBox.tsx | 2 +- 3 files changed, 59 insertions(+), 52 deletions(-) diff --git a/editor.planx.uk/src/@planx/components/Feedback/Public.test.tsx b/editor.planx.uk/src/@planx/components/Feedback/Public.test.tsx index a8757cf193..f38adba32b 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/Public.test.tsx +++ b/editor.planx.uk/src/@planx/components/Feedback/Public.test.tsx @@ -7,6 +7,7 @@ import { axe } from "vitest-axe"; import FeedbackComponent from "./Public"; const handleSubmit = vi.fn(); + describe("when the Feedback component is rendered", async () => { it("should not have any accessibility violations", async () => { const { container } = setup( diff --git a/editor.planx.uk/src/@planx/components/Feedback/Public.tsx b/editor.planx.uk/src/@planx/components/Feedback/Public.tsx index 7cb2625718..dc89e9046b 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/Public.tsx +++ b/editor.planx.uk/src/@planx/components/Feedback/Public.tsx @@ -1,3 +1,4 @@ +import Box from "@mui/material/Box"; import Grid from "@mui/material/Grid"; import { styled } from "@mui/material/styles"; import ToggleButtonGroup, { @@ -8,6 +9,7 @@ import CardHeader from "@planx/components/shared/Preview/CardHeader"; import type { PublicProps } from "@planx/components/ui"; import { useFormik } from "formik"; import React from "react"; +import RichTextInput from "ui/editor/RichTextInput"; import TerribleFace from "ui/images/feedback_filled-01.svg"; import PoorFace from "ui/images/feedback_filled-02.svg"; import NeutralFace from "ui/images/feedback_filled-03.svg"; @@ -28,12 +30,14 @@ export interface FeedbackComponentProps extends BaseNodeData { interface FormProps { feedbackScore: string; + feedback: string; } const StyledToggleButtonGroup = styled(ToggleButtonGroup)(() => ({ [`& .${toggleButtonGroupClasses.grouped}`]: { border: 0, }, + paddingBottom: 32, })); const FeedbackComponent = ( @@ -42,18 +46,11 @@ const FeedbackComponent = ( const formik = useFormik({ initialValues: getPreviouslySubmittedData(props) ?? { feedbackScore: "", + feedback: "", }, onSubmit: (values) => { props.handleSubmit?.(makeData(props, values)); }, - // TODO: make mandatory feedback toggleable - // validateOnBlur: false, - // validateOnChange: false, - // validationSchema: Yup.object().shape({ - // feedbackButtonGroup: Yup.string().required( - // "A feedback option is required" - // ), - // }), }); const handleFeedbackChange = ( @@ -68,49 +65,58 @@ const FeedbackComponent = ( return ( - - - - - - - - - - - + + + + + + + + + + + + + + + + ); }; diff --git a/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx b/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx index 9d5f128efe..6f4919f247 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx +++ b/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx @@ -21,7 +21,7 @@ export const FaceBox = ({ }: FaceBoxProps): ReactElement => { return ( - + Date: Thu, 24 Oct 2024 17:20:51 +0100 Subject: [PATCH 06/11] Extract types and styled components --- .../src/@planx/components/Feedback/Public.tsx | 26 ++----------------- .../src/@planx/components/Feedback/styled.ts | 11 ++++++++ .../src/@planx/components/Feedback/types.ts | 11 ++++++++ 3 files changed, 24 insertions(+), 24 deletions(-) create mode 100644 editor.planx.uk/src/@planx/components/Feedback/styled.ts create mode 100644 editor.planx.uk/src/@planx/components/Feedback/types.ts diff --git a/editor.planx.uk/src/@planx/components/Feedback/Public.tsx b/editor.planx.uk/src/@planx/components/Feedback/Public.tsx index dc89e9046b..58269ff196 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/Public.tsx +++ b/editor.planx.uk/src/@planx/components/Feedback/Public.tsx @@ -1,9 +1,5 @@ import Box from "@mui/material/Box"; import Grid from "@mui/material/Grid"; -import { styled } from "@mui/material/styles"; -import ToggleButtonGroup, { - toggleButtonGroupClasses, -} from "@mui/material/ToggleButtonGroup"; import Card from "@planx/components/shared/Preview/Card"; import CardHeader from "@planx/components/shared/Preview/CardHeader"; import type { PublicProps } from "@planx/components/ui"; @@ -17,28 +13,10 @@ import GoodFace from "ui/images/feedback_filled-04.svg"; import ExcellentFace from "ui/images/feedback_filled-05.svg"; import InputLabel from "ui/public/InputLabel"; -// import * as Yup from "yup"; -import { BaseNodeData } from "../shared"; import { getPreviouslySubmittedData, makeData } from "../shared/utils"; import { FaceBox } from "./components/FaceBox"; - -export interface FeedbackComponentProps extends BaseNodeData { - title: string; - description?: string; - fn?: string; -} - -interface FormProps { - feedbackScore: string; - feedback: string; -} - -const StyledToggleButtonGroup = styled(ToggleButtonGroup)(() => ({ - [`& .${toggleButtonGroupClasses.grouped}`]: { - border: 0, - }, - paddingBottom: 32, -})); +import { StyledToggleButtonGroup } from "./styled"; +import { FeedbackComponentProps, FormProps } from "./types"; const FeedbackComponent = ( props: PublicProps, diff --git a/editor.planx.uk/src/@planx/components/Feedback/styled.ts b/editor.planx.uk/src/@planx/components/Feedback/styled.ts new file mode 100644 index 0000000000..87339ea0e9 --- /dev/null +++ b/editor.planx.uk/src/@planx/components/Feedback/styled.ts @@ -0,0 +1,11 @@ +import { styled } from "@mui/material/styles"; +import ToggleButtonGroup, { + toggleButtonGroupClasses, +} from "@mui/material/ToggleButtonGroup"; + +export const StyledToggleButtonGroup = styled(ToggleButtonGroup)(() => ({ + [`& .${toggleButtonGroupClasses.grouped}`]: { + border: 0, + }, + paddingBottom: 32, +})); diff --git a/editor.planx.uk/src/@planx/components/Feedback/types.ts b/editor.planx.uk/src/@planx/components/Feedback/types.ts new file mode 100644 index 0000000000..f9c1e6513a --- /dev/null +++ b/editor.planx.uk/src/@planx/components/Feedback/types.ts @@ -0,0 +1,11 @@ +import { BaseNodeData } from "../shared"; + +export interface FeedbackComponentProps extends BaseNodeData { + title: string; + description?: string; + fn?: string; +} +export interface FormProps { + feedbackScore: string; + feedback: string; +} From ddbbb857f8b9623311159b876e28d58693e1899a Mon Sep 17 00:00:00 2001 From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com> Date: Thu, 24 Oct 2024 17:41:27 +0100 Subject: [PATCH 07/11] Add in typography --- .../components/Feedback/Public.test.tsx | 3 +-- .../src/@planx/components/Feedback/Public.tsx | 21 +++++++++++++++++-- .../src/@planx/components/Feedback/types.ts | 2 +- 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/editor.planx.uk/src/@planx/components/Feedback/Public.test.tsx b/editor.planx.uk/src/@planx/components/Feedback/Public.test.tsx index f38adba32b..0b18fd6151 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/Public.test.tsx +++ b/editor.planx.uk/src/@planx/components/Feedback/Public.test.tsx @@ -11,7 +11,7 @@ const handleSubmit = vi.fn(); describe("when the Feedback component is rendered", async () => { it("should not have any accessibility violations", async () => { const { container } = setup( - , + , ); const results = await axe(container); expect(results).toHaveNoViolations(); @@ -20,7 +20,6 @@ describe("when the Feedback component is rendered", async () => { const { user } = setup( , ); diff --git a/editor.planx.uk/src/@planx/components/Feedback/Public.tsx b/editor.planx.uk/src/@planx/components/Feedback/Public.tsx index 58269ff196..9120b97318 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/Public.tsx +++ b/editor.planx.uk/src/@planx/components/Feedback/Public.tsx @@ -1,5 +1,7 @@ import Box from "@mui/material/Box"; import Grid from "@mui/material/Grid"; +import Link from "@mui/material/Link"; +import Typography from "@mui/material/Typography"; import Card from "@planx/components/shared/Preview/Card"; import CardHeader from "@planx/components/shared/Preview/CardHeader"; import type { PublicProps } from "@planx/components/ui"; @@ -42,8 +44,18 @@ const FeedbackComponent = ( return ( - - + + + This service is a work in progress, any feedback you share about your + experience will help us to improve it. + + + Don't share any personal or financial information in your feedback. If + you do we will act according to our{" "} + privacy policy. + + + + + The information collected here isn't monitored by planning officers. + Don't use it to give extra information about your project or submission. + If you do, it cannot be used to assess your project. + ); }; diff --git a/editor.planx.uk/src/@planx/components/Feedback/types.ts b/editor.planx.uk/src/@planx/components/Feedback/types.ts index f9c1e6513a..d39b88080a 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/types.ts +++ b/editor.planx.uk/src/@planx/components/Feedback/types.ts @@ -2,7 +2,7 @@ import { BaseNodeData } from "../shared"; export interface FeedbackComponentProps extends BaseNodeData { title: string; - description?: string; + privacyPolicyLink?: string; fn?: string; } export interface FormProps { From b75a0751cd9ff275a6159b68d6790973573a2020 Mon Sep 17 00:00:00 2001 From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com> Date: Mon, 28 Oct 2024 12:14:40 +0000 Subject: [PATCH 08/11] Fix some styling niggles --- .../components/Feedback/Feedback.stories.tsx | 3 +-- .../src/@planx/components/Feedback/Public.tsx | 4 ++-- .../components/Feedback/components/FaceBox.tsx | 15 ++++++++++----- .../src/@planx/components/Feedback/styled.ts | 14 ++++++++------ 4 files changed, 21 insertions(+), 15 deletions(-) diff --git a/editor.planx.uk/src/@planx/components/Feedback/Feedback.stories.tsx b/editor.planx.uk/src/@planx/components/Feedback/Feedback.stories.tsx index a745e5b40a..c976a46c5f 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/Feedback.stories.tsx +++ b/editor.planx.uk/src/@planx/components/Feedback/Feedback.stories.tsx @@ -14,7 +14,6 @@ export default meta; export const Basic = { args: { title: "Tell us what you think", - description: - "This service is a work in progress, any feedback you share about your experience will help us to improve it.", + privacyPolicyLink: "https://www.planx.uk/", }, } satisfies Story; diff --git a/editor.planx.uk/src/@planx/components/Feedback/Public.tsx b/editor.planx.uk/src/@planx/components/Feedback/Public.tsx index 9120b97318..4f20e4e583 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/Public.tsx +++ b/editor.planx.uk/src/@planx/components/Feedback/Public.tsx @@ -3,11 +3,11 @@ import Grid from "@mui/material/Grid"; import Link from "@mui/material/Link"; import Typography from "@mui/material/Typography"; import Card from "@planx/components/shared/Preview/Card"; -import CardHeader from "@planx/components/shared/Preview/CardHeader"; +import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader"; import type { PublicProps } from "@planx/components/ui"; import { useFormik } from "formik"; import React from "react"; -import RichTextInput from "ui/editor/RichTextInput"; +import RichTextInput from "ui/editor/RichTextInput/RichTextInput"; import TerribleFace from "ui/images/feedback_filled-01.svg"; import PoorFace from "ui/images/feedback_filled-02.svg"; import NeutralFace from "ui/images/feedback_filled-03.svg"; diff --git a/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx b/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx index 6f4919f247..b059750639 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx +++ b/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx @@ -21,14 +21,19 @@ export const FaceBox = ({ }: FaceBoxProps): ReactElement => { return ( - + ({ + p: theme.spacing(2), + border: `2px solid ${theme.palette.border.main} `, width: "120px", maxHeight: "120px", - }} + })} > {altText} diff --git a/editor.planx.uk/src/@planx/components/Feedback/styled.ts b/editor.planx.uk/src/@planx/components/Feedback/styled.ts index 87339ea0e9..2a04528ac8 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/styled.ts +++ b/editor.planx.uk/src/@planx/components/Feedback/styled.ts @@ -3,9 +3,11 @@ import ToggleButtonGroup, { toggleButtonGroupClasses, } from "@mui/material/ToggleButtonGroup"; -export const StyledToggleButtonGroup = styled(ToggleButtonGroup)(() => ({ - [`& .${toggleButtonGroupClasses.grouped}`]: { - border: 0, - }, - paddingBottom: 32, -})); +export const StyledToggleButtonGroup = styled(ToggleButtonGroup)( + ({ theme }) => ({ + [`& .${toggleButtonGroupClasses.grouped}`]: { + border: 0, + }, + paddingBottom: theme.spacing(3.2), + }), +); From 9458594345e7b3ceb8767aba4a39d57ff5c981e7 Mon Sep 17 00:00:00 2001 From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com> Date: Mon, 28 Oct 2024 12:29:33 +0000 Subject: [PATCH 09/11] Fix hover padding --- editor.planx.uk/src/@planx/components/Feedback/styled.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/editor.planx.uk/src/@planx/components/Feedback/styled.ts b/editor.planx.uk/src/@planx/components/Feedback/styled.ts index 2a04528ac8..5439945726 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/styled.ts +++ b/editor.planx.uk/src/@planx/components/Feedback/styled.ts @@ -7,7 +7,9 @@ export const StyledToggleButtonGroup = styled(ToggleButtonGroup)( ({ theme }) => ({ [`& .${toggleButtonGroupClasses.grouped}`]: { border: 0, + padding: 0, + marginTop: theme.spacing(1), }, - paddingBottom: theme.spacing(3.2), + paddingBottom: theme.spacing(3.5), }), ); From c823e8120e9a39540869a473e9acb9357b4d6d90 Mon Sep 17 00:00:00 2001 From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com> Date: Mon, 28 Oct 2024 15:12:01 +0000 Subject: [PATCH 10/11] Fix hover issue --- .../src/@planx/components/Feedback/Public.tsx | 86 +++++++++---------- .../Feedback/components/FaceBox.tsx | 4 +- editor.planx.uk/src/ui/public/InputLabel.tsx | 2 +- 3 files changed, 47 insertions(+), 45 deletions(-) diff --git a/editor.planx.uk/src/@planx/components/Feedback/Public.tsx b/editor.planx.uk/src/@planx/components/Feedback/Public.tsx index 4f20e4e583..a26a2d7fe5 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/Public.tsx +++ b/editor.planx.uk/src/@planx/components/Feedback/Public.tsx @@ -56,49 +56,49 @@ const FeedbackComponent = ( - - - - - - - - - - - + + + + + + + + + + + {/* */} ({ export default function InputLabel(props: { label: string; - children: ReactNode; + children?: ReactNode; hidden?: boolean; htmlFor?: string; id?: string; From d599915cd97b277026388fc9be332a432af5cb5f Mon Sep 17 00:00:00 2001 From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com> Date: Mon, 28 Oct 2024 15:22:28 +0000 Subject: [PATCH 11/11] Fix facebox text centering issue --- .../src/@planx/components/Feedback/components/FaceBox.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx b/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx index 6fb19d9413..a12a1186a9 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx +++ b/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx @@ -35,6 +35,10 @@ export const FaceBox = ({ border: `2px solid ${theme.palette.border.main} `, width: "120px", maxHeight: "120px", + display: "flex", + flexDirection: "column", + justifyContent: "center", + alignItems: "center", })} > {altText}