From bdf4873355a13dc8cf3f62760487aae971f5f9cb Mon Sep 17 00:00:00 2001 From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com> Date: Mon, 28 Oct 2024 10:22:35 +0000 Subject: [PATCH] refactor: reorganise feedback component folder (#3837) --- .../components/shared/Preview/MoreInfo.tsx | 2 +- .../FeedbackForm.stories.tsx | 0 .../{ => FeedbackForm}/FeedbackForm.test.tsx | 2 +- .../{ => FeedbackForm}/FeedbackForm.tsx | 2 +- .../MoreInfoFeedback.stories.tsx | 0 .../MoreInfoFeedback.test.tsx | 0 .../MoreInfoFeedback.tsx | 4 +- .../src/components/Feedback/index.tsx | 87 ++++--------------- .../src/components/Feedback/styled.ts | 43 +++++++++ .../src/components/Feedback/types.ts | 25 ++++++ editor.planx.uk/src/routes/feedback.tsx | 4 +- 11 files changed, 91 insertions(+), 78 deletions(-) rename editor.planx.uk/src/components/Feedback/{ => FeedbackForm}/FeedbackForm.stories.tsx (100%) rename editor.planx.uk/src/components/Feedback/{ => FeedbackForm}/FeedbackForm.test.tsx (97%) rename editor.planx.uk/src/components/Feedback/{ => FeedbackForm}/FeedbackForm.tsx (97%) rename editor.planx.uk/src/components/Feedback/{ => MoreInfoFeedback}/MoreInfoFeedback.stories.tsx (100%) rename editor.planx.uk/src/components/Feedback/{ => MoreInfoFeedback}/MoreInfoFeedback.test.tsx (100%) rename editor.planx.uk/src/components/Feedback/{ => MoreInfoFeedback}/MoreInfoFeedback.tsx (97%) create mode 100644 editor.planx.uk/src/components/Feedback/styled.ts create mode 100644 editor.planx.uk/src/components/Feedback/types.ts diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/MoreInfo.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/MoreInfo.tsx index 45c8768c11..6bf538e3d5 100644 --- a/editor.planx.uk/src/@planx/components/shared/Preview/MoreInfo.tsx +++ b/editor.planx.uk/src/@planx/components/shared/Preview/MoreInfo.tsx @@ -4,7 +4,7 @@ import Container from "@mui/material/Container"; import Drawer, { DrawerProps } from "@mui/material/Drawer"; import IconButton from "@mui/material/IconButton"; import { styled } from "@mui/material/styles"; -import MoreInfoFeedbackComponent from "components/Feedback/MoreInfoFeedback"; +import MoreInfoFeedbackComponent from "components/Feedback/MoreInfoFeedback/MoreInfoFeedback"; import React from "react"; const PREFIX = "MoreInfo"; diff --git a/editor.planx.uk/src/components/Feedback/FeedbackForm.stories.tsx b/editor.planx.uk/src/components/Feedback/FeedbackForm/FeedbackForm.stories.tsx similarity index 100% rename from editor.planx.uk/src/components/Feedback/FeedbackForm.stories.tsx rename to editor.planx.uk/src/components/Feedback/FeedbackForm/FeedbackForm.stories.tsx diff --git a/editor.planx.uk/src/components/Feedback/FeedbackForm.test.tsx b/editor.planx.uk/src/components/Feedback/FeedbackForm/FeedbackForm.test.tsx similarity index 97% rename from editor.planx.uk/src/components/Feedback/FeedbackForm.test.tsx rename to editor.planx.uk/src/components/Feedback/FeedbackForm/FeedbackForm.test.tsx index 2cf9be519c..3d73243b9e 100644 --- a/editor.planx.uk/src/components/Feedback/FeedbackForm.test.tsx +++ b/editor.planx.uk/src/components/Feedback/FeedbackForm/FeedbackForm.test.tsx @@ -3,7 +3,7 @@ import { setup } from "testUtils"; import { vi } from "vitest"; import { axe } from "vitest-axe"; -import { FeedbackFormInput } from "."; +import { FeedbackFormInput } from "../types"; import FeedbackForm from "./FeedbackForm"; const mockHandleSubmit = vi.fn(); diff --git a/editor.planx.uk/src/components/Feedback/FeedbackForm.tsx b/editor.planx.uk/src/components/Feedback/FeedbackForm/FeedbackForm.tsx similarity index 97% rename from editor.planx.uk/src/components/Feedback/FeedbackForm.tsx rename to editor.planx.uk/src/components/Feedback/FeedbackForm/FeedbackForm.tsx index 34bb1edab2..878d2b1ef5 100644 --- a/editor.planx.uk/src/components/Feedback/FeedbackForm.tsx +++ b/editor.planx.uk/src/components/Feedback/FeedbackForm/FeedbackForm.tsx @@ -9,7 +9,7 @@ import InputLabel from "ui/public/InputLabel"; import ErrorWrapper from "ui/shared/ErrorWrapper"; import Input from "ui/shared/Input"; -import { FeedbackFormInput, FormProps, UserFeedback } from "."; +import { FeedbackFormInput, FormProps, UserFeedback } from "../types"; const StyledForm = styled(Form)(({ theme }) => ({ "& > *": contentFlowSpacing(theme), diff --git a/editor.planx.uk/src/components/Feedback/MoreInfoFeedback.stories.tsx b/editor.planx.uk/src/components/Feedback/MoreInfoFeedback/MoreInfoFeedback.stories.tsx similarity index 100% rename from editor.planx.uk/src/components/Feedback/MoreInfoFeedback.stories.tsx rename to editor.planx.uk/src/components/Feedback/MoreInfoFeedback/MoreInfoFeedback.stories.tsx diff --git a/editor.planx.uk/src/components/Feedback/MoreInfoFeedback.test.tsx b/editor.planx.uk/src/components/Feedback/MoreInfoFeedback/MoreInfoFeedback.test.tsx similarity index 100% rename from editor.planx.uk/src/components/Feedback/MoreInfoFeedback.test.tsx rename to editor.planx.uk/src/components/Feedback/MoreInfoFeedback/MoreInfoFeedback.test.tsx diff --git a/editor.planx.uk/src/components/Feedback/MoreInfoFeedback.tsx b/editor.planx.uk/src/components/Feedback/MoreInfoFeedback/MoreInfoFeedback.tsx similarity index 97% rename from editor.planx.uk/src/components/Feedback/MoreInfoFeedback.tsx rename to editor.planx.uk/src/components/Feedback/MoreInfoFeedback/MoreInfoFeedback.tsx index b20401f812..e8f961b5ef 100644 --- a/editor.planx.uk/src/components/Feedback/MoreInfoFeedback.tsx +++ b/editor.planx.uk/src/components/Feedback/MoreInfoFeedback/MoreInfoFeedback.tsx @@ -12,8 +12,8 @@ import { useAnalyticsTracking } from "pages/FlowEditor/lib/analytics/provider"; import React, { useEffect, useRef, useState } from "react"; import FeedbackOption from "ui/public/FeedbackOption"; -import { FeedbackFormInput, UserFeedback } from "."; -import FeedbackForm from "./FeedbackForm"; +import FeedbackForm from "../FeedbackForm/FeedbackForm"; +import { FeedbackFormInput, UserFeedback } from "../types"; const MoreInfoFeedback = styled(Box)(({ theme }) => ({ borderTop: `2px solid ${theme.palette.border.main}`, diff --git a/editor.planx.uk/src/components/Feedback/index.tsx b/editor.planx.uk/src/components/Feedback/index.tsx index 2a0c01bba0..8262fa1f56 100644 --- a/editor.planx.uk/src/components/Feedback/index.tsx +++ b/editor.planx.uk/src/components/Feedback/index.tsx @@ -7,8 +7,6 @@ import WarningIcon from "@mui/icons-material/Warning"; import Box from "@mui/material/Box"; import Container from "@mui/material/Container"; import IconButton from "@mui/material/IconButton"; -import { styled } from "@mui/material/styles"; -import SvgIcon from "@mui/material/SvgIcon"; import Typography from "@mui/material/Typography"; import { getInternalFeedbackMetadata, @@ -20,73 +18,25 @@ import React, { useEffect, useRef, useState } from "react"; import { usePrevious } from "react-use"; import FeedbackOption from "ui/public/FeedbackOption"; -import FeedbackForm from "./FeedbackForm"; +import FeedbackForm from "./FeedbackForm/FeedbackForm"; import FeedbackPhaseBanner from "./FeedbackPhaseBanner"; - -const FeedbackWrapper = styled(Box)(({ theme }) => ({ - backgroundColor: theme.palette.background.paper, - borderTop: `1px solid ${theme.palette.border.main}`, -})); - -const FeedbackRow = styled(Box)(({ theme }) => ({ - maxWidth: theme.breakpoints.values.formWrap, - padding: theme.spacing(2, 0, 4), -})); - -const FeedbackHeader = styled(Box)(({ theme }) => ({ - padding: theme.spacing(1, 0), - position: "relative", - display: "flex", - justifyContent: "space-between", - alignItems: "center", -})); - -const FeedbackTitle = styled(Box)(({ theme }) => ({ - position: "relative", - display: "flex", - alignItems: "center", - "& svg": { - width: "28px", - height: "auto", - color: theme.palette.primary.dark, - marginRight: theme.spacing(1), - }, -})); - -const CloseButton = styled("div")(({ theme }) => ({ - display: "flex", - alignItems: "center", - justifyContent: "flex-end", - color: theme.palette.text.primary, -})); - -const FeedbackBody = styled(Box)(({ theme }) => ({ - maxWidth: theme.breakpoints.values.formWrap, -})); - -export type UserFeedback = { - userContext?: string; - userComment: string; -}; - -export interface FormProps { - inputs: FeedbackFormInput[]; - handleSubmit: (values: UserFeedback) => void; -} - -export type FeedbackFormInput = { - name: keyof UserFeedback; - label: string; - id: string; -}; - -export type FeedbackCategory = "issue" | "idea" | "comment" | "inaccuracy"; +import { + CloseButton, + FeedbackBody, + FeedbackHeader, + FeedbackRow, + FeedbackTitle, + FeedbackWrapper, +} from "./styled"; +import { + ClickEvents, + FeedbackFormInput, + TitleAndCloseProps, + UserFeedback, + View, +} from "./types"; const Feedback: React.FC = () => { - type View = "banner" | "triage" | FeedbackCategory | "thanks"; - - type ClickEvents = "close" | "back" | "triage" | FeedbackCategory; - const [currentFeedbackView, setCurrentFeedbackView] = useState("banner"); const previousFeedbackView = usePrevious(currentFeedbackView); @@ -163,11 +113,6 @@ const Feedback: React.FC = () => { ); } - interface TitleAndCloseProps { - title: string; - Icon?: typeof SvgIcon; - } - function TitleAndCloseFeedbackHeader(props: TitleAndCloseProps): FCReturn { return ( diff --git a/editor.planx.uk/src/components/Feedback/styled.ts b/editor.planx.uk/src/components/Feedback/styled.ts new file mode 100644 index 0000000000..90671e5dfc --- /dev/null +++ b/editor.planx.uk/src/components/Feedback/styled.ts @@ -0,0 +1,43 @@ +import Box from "@mui/material/Box"; +import { styled } from "@mui/material/styles"; + +export const FeedbackWrapper = styled(Box)(({ theme }) => ({ + backgroundColor: theme.palette.background.paper, + borderTop: `1px solid ${theme.palette.border.main}`, +})); + +export const FeedbackRow = styled(Box)(({ theme }) => ({ + maxWidth: theme.breakpoints.values.formWrap, + padding: theme.spacing(2, 0, 4), +})); + +export const FeedbackHeader = styled(Box)(({ theme }) => ({ + padding: theme.spacing(1, 0), + position: "relative", + display: "flex", + justifyContent: "space-between", + alignItems: "center", +})); + +export const FeedbackTitle = styled(Box)(({ theme }) => ({ + position: "relative", + display: "flex", + alignItems: "center", + "& svg": { + width: "28px", + height: "auto", + color: theme.palette.primary.dark, + marginRight: theme.spacing(1), + }, +})); + +export const CloseButton = styled("div")(({ theme }) => ({ + display: "flex", + alignItems: "center", + justifyContent: "flex-end", + color: theme.palette.text.primary, +})); + +export const FeedbackBody = styled(Box)(({ theme }) => ({ + maxWidth: theme.breakpoints.values.formWrap, +})); diff --git a/editor.planx.uk/src/components/Feedback/types.ts b/editor.planx.uk/src/components/Feedback/types.ts new file mode 100644 index 0000000000..1983db838d --- /dev/null +++ b/editor.planx.uk/src/components/Feedback/types.ts @@ -0,0 +1,25 @@ +import SvgIcon from "@mui/material/SvgIcon"; + +export type UserFeedback = { + userContext?: string; + userComment: string; +}; + +export interface FormProps { + inputs: FeedbackFormInput[]; + handleSubmit: (values: UserFeedback) => void; +} + +export type FeedbackFormInput = { + name: keyof UserFeedback; + label: string; + id: string; +}; +export type FeedbackCategory = "issue" | "idea" | "comment" | "inaccuracy"; +export type View = "banner" | "triage" | FeedbackCategory | "thanks"; +export type ClickEvents = "close" | "back" | "triage" | FeedbackCategory; + +export interface TitleAndCloseProps { + title: string; + Icon?: typeof SvgIcon; +} diff --git a/editor.planx.uk/src/routes/feedback.tsx b/editor.planx.uk/src/routes/feedback.tsx index 1cd9dd382f..36d4453738 100644 --- a/editor.planx.uk/src/routes/feedback.tsx +++ b/editor.planx.uk/src/routes/feedback.tsx @@ -1,6 +1,6 @@ import { ComponentType } from "@opensystemslab/planx-core/types"; -import { FeedbackCategory } from "components/Feedback"; -import { Sentiment } from "components/Feedback/MoreInfoFeedback"; +import { Sentiment } from "components/Feedback/MoreInfoFeedback/MoreInfoFeedback"; +import { FeedbackCategory } from "components/Feedback/types"; import gql from "graphql-tag"; import { compose, mount, NotFoundError, route, withData } from "navi"; import { FeedbackPage } from "pages/FlowEditor/components/Flow/FeedbackPage";