Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Alter layout and copy of Feedback component in Footer #3542

Merged
merged 8 commits into from
Aug 22, 2024
Merged

refactor: Alter layout and copy of Feedback component in Footer #3542

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0a6a867
alter feedback title and message order and copy
RODO94 Aug 21, 2024
013809b
adjust comp to fit new feedback form structure
RODO94 Aug 21, 2024
42d5491
simplify feedbackDisclaimer file and comp
RODO94 Aug 21, 2024
7c7fae3
alter feedback header title
RODO94 Aug 21, 2024
c8b3ac8
update getbyText in index.test
RODO94 Aug 21, 2024
b677496
alter component structure from daf's comment
RODO94 Aug 22, 2024
47d62da
update from daf recent comments
RODO94 Aug 22, 2024
0695cc5
alter materialui import
RODO94 Aug 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions editor.planx.uk/src/components/Feedback/FeedbackForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ import { styled } from "@mui/material/styles";
import { contentFlowSpacing } from "@planx/components/shared/Preview/Card";
import { Form, Formik, useFormikContext } from "formik";
import React from "react";
import FeedbackDisclaimer from "ui/public/FeedbackDisclaimer";
import {
FeedbackDataDisclaimer,
FeedbackMonitoringDisclaimer,
} from "ui/public/FeedbackDisclaimer";
import InputLabel from "ui/public/InputLabel";
import ErrorWrapper from "ui/shared/ErrorWrapper";
import Input from "ui/shared/Input";

import { FeedbackFormInput, FormProps, UserFeedback } from ".";

const StyledForm = styled(Form)(({ theme }) => ({
Expand Down Expand Up @@ -52,8 +54,9 @@ const FeedbackForm: React.FC<FormProps> = ({ inputs, handleSubmit }) => {
return (
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
<StyledForm>
<FeedbackDataDisclaimer />
Copy link
Contributor Author

@RODO94 RODO94 Aug 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Split this <FeedbackDisclaimer> into two imports for each disclaimer, one focused on personal / financial data as <FeedbackDataDisclaimer> and one focused on the monitoring of the feedback <FeedbackMonitoringDisclaimer>.

Situated them in the same file as they both serve similar functions and contextually relevant, but seperate enough in structure to have as separate components.

Be good to have thoughts on this pattern...

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Generally, if we have a shared content/structure it can make sense to make a component that handles structure/style, and passed in content via a prop (or in this case, I think children would be more appropriate).

This would mean that we wouldn't have to repeat this structure / style markdown -

<Box>
  <Typography variant="body2">
  ...
  </Typography>
</Box>

We could instead use a pattern like this -

// FeedbackDisclaimer.tsx
<Box>
  <Typography variant="body2">
  {children}
  </Typography>
</Box>
// FeedbackFrom.tsx
<Disclaimer>
  Some content here!
</Disclaimer>

<Disclaimer>
  Some other content here!
</Disclaimer>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@DafyddLlyr thanks! Switched it to this. It felt interesting cause the text was contextually linked but had a different structure, with a link in the text. Just passed it now as it is. Hope this is cleaner

<FormInputs inputs={inputs} />
<FeedbackDisclaimer />
<FeedbackMonitoringDisclaimer />
<Button
type="submit"
variant="contained"
Expand Down
12 changes: 7 additions & 5 deletions editor.planx.uk/src/components/Feedback/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ describe("Feedback component triage journey", () => {

await user.type(
getByTestId("userCommentTextarea"),
"This information is wrong",
"This information is wrong"
);

await user.click(getByText("Send feedback"));
Expand All @@ -207,7 +207,9 @@ describe("Feedback component 'Report an issue with this page journey'", () => {
expect(scrollIntoViewMock).toBeCalledTimes(1);

await waitFor(() => {
expect(getByText("Report an issue")).toBeInTheDocument();
expect(
getByText("Report an issue with this service")
).toBeInTheDocument();
expect(getByLabelText("What were you doing?")).toBeInTheDocument();
expect(getByLabelText("What went wrong?")).toBeInTheDocument();
});
Expand Down Expand Up @@ -321,7 +323,7 @@ describe("Feedback component accessibility", () => {

test("Issue form via triage should have no accessibility violations", async () => {
const { container, getByText, getByLabelText, getByRole, user } = setup(
<Feedback />,
<Feedback />
);

await user.click(getByText("feedback"));
Expand Down Expand Up @@ -385,11 +387,11 @@ describe("Feedback component accessibility", () => {

await user.type(
getByLabelText("What were you doing?"),
"Answering a question",
"Answering a question"
);
await user.type(
getByLabelText("What went wrong?"),
"I couldn't select Continue",
"I couldn't select Continue"
);

await user.click(getByText("Send feedback"));
Expand Down
4 changes: 2 additions & 2 deletions editor.planx.uk/src/components/Feedback/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ const Feedback: React.FC = () => {
return (
<TitleAndCloseFeedbackHeader
Icon={WarningIcon}
title="Report an issue"
title="Report an issue with this service"
/>
);
} else
Expand All @@ -207,7 +207,7 @@ const Feedback: React.FC = () => {
<FeedbackTitle>
<WarningIcon />
<Typography variant="h3" component="h2">
Report an issue
Report an issue with this service
</Typography>
</FeedbackTitle>
</>
Expand Down
17 changes: 15 additions & 2 deletions editor.planx.uk/src/ui/public/FeedbackDisclaimer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,22 @@
import Box from "@mui/material/Box";
import Link from "@mui/material/Link";
import Box from "@mui/material/Box";
RODO94 marked this conversation as resolved.
Show resolved Hide resolved
import Typography from "@mui/material/Typography";
import React from "react";

export default function FeedbackDisclaimer(): FCReturn {
export function FeedbackMonitoringDisclaimer(): FCReturn {
return (
<Box>
<Typography variant="body2">
This information is not monitored frequently by planning officers, do
not use it to provide extra information or queries with regard to your
application or project. Any information of this nature will be
disregarded.
</Typography>
</Box>
);
}

export function FeedbackDataDisclaimer(): FCReturn {
return (
<Box>
<Typography variant="body2">
Expand Down
Loading