From fdbda5e7ff011316eced8b0e0c88a73e1cc868ff Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Wed, 3 Jan 2024 13:01:25 +0000 Subject: [PATCH 01/10] wip: UI setup for feedback component --- .../components/shared/Preview/MoreInfo.tsx | 83 +++++- editor.planx.uk/src/components/Feedback.tsx | 257 ++++++++++++++++++ .../src/components/PhaseBanner.tsx | 64 ++--- .../src/pages/Preview/Questions.tsx | 2 +- .../src/pages/layout/PublicLayout.tsx | 4 +- editor.planx.uk/src/theme.ts | 2 +- .../src/ui/public/FeedbackDisclaimer.tsx | 16 ++ .../src/ui/public/FeedbackOption.tsx | 79 ++++++ 8 files changed, 463 insertions(+), 44 deletions(-) create mode 100644 editor.planx.uk/src/components/Feedback.tsx create mode 100644 editor.planx.uk/src/ui/public/FeedbackDisclaimer.tsx create mode 100644 editor.planx.uk/src/ui/public/FeedbackOption.tsx 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 f2e135bec9..a7d2b6e29f 100644 --- a/editor.planx.uk/src/@planx/components/shared/Preview/MoreInfo.tsx +++ b/editor.planx.uk/src/@planx/components/shared/Preview/MoreInfo.tsx @@ -1,9 +1,18 @@ +import CancelIcon from "@mui/icons-material/Cancel"; +import CheckCircleIcon from "@mui/icons-material/CheckCircle"; import CloseIcon from "@mui/icons-material/Close"; +import Box from "@mui/material/Box"; +import Button from "@mui/material/Button"; 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 Typography from "@mui/material/Typography"; +import { contentFlowSpacing } from "@planx/components/shared/Preview/Card"; import React from "react"; +import FeedbackDisclaimer from "ui/public/FeedbackDisclaimer"; +import FeedbackOption from "ui/public/FeedbackOption"; +import Input from "ui/shared/Input"; const PREFIX = "MoreInfo"; @@ -34,22 +43,22 @@ const Root = styled(Drawer, { [`& .${classes.drawerPaper}`]: { width: "100%", maxWidth: drawerWidth, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, border: 0, boxShadow: "-4px 0 0 rgba(0,0,0,0.1)", }, })); -const DrawerContent = styled("div")(({ theme }) => ({ - padding: theme.spacing(2.5, 4, 6, 0), +const DrawerContent = styled(Box)(({ theme }) => ({ + padding: theme.spacing(2.5, 4, 2, 0), fontSize: "1rem", lineHeight: "1.5", [theme.breakpoints.up("sm")]: { - padding: theme.spacing(6, 4, 6, 1), + padding: theme.spacing(6, 4, 4, 1), }, })); -const CloseButton = styled("div")(({ theme }) => ({ +const CloseButton = styled(Box)(({ theme }) => ({ display: "flex", alignItems: "center", justifyContent: "flex-end", @@ -59,6 +68,21 @@ const CloseButton = styled("div")(({ theme }) => ({ color: theme.palette.text.primary, })); +const MoreInfoFeedback = styled(Box)(({ theme }) => ({ + borderTop: `2px solid ${theme.palette.border.main}`, + padding: theme.spacing(2.5, 4, 8, 0), + [theme.breakpoints.up("sm")]: { + padding: theme.spacing(3, 4, 8, 1), + }, +})); + +const FeedbackBody = styled(Box)(({ theme }) => ({ + padding: theme.spacing(1, 0), + "& form > * + *": { + ...contentFlowSpacing(theme), + }, +})); + interface IMoreInfo { open: boolean; children: (JSX.Element | string | undefined)[] | JSX.Element; @@ -90,9 +114,56 @@ const MoreInfo: React.FC = ({ open, children, handleClose }) => ( - + {children} + + + + + Did this help to answer your question? + + + + + + + + + + + + Please help us to improve this service by sharing feedback + + +
+ + + + +
+ + + + + + + Thank you for sharing feedback + + + + We appreciate it lorem ipsum dolor sit amet, consectetuer adipiscing + elit. Aenean commodo ligula eget dolor. + + + + ); diff --git a/editor.planx.uk/src/components/Feedback.tsx b/editor.planx.uk/src/components/Feedback.tsx new file mode 100644 index 0000000000..051babb882 --- /dev/null +++ b/editor.planx.uk/src/components/Feedback.tsx @@ -0,0 +1,257 @@ +import ArrowBackIcon from "@mui/icons-material/ArrowBack"; +import CloseIcon from "@mui/icons-material/Close"; +import LightbulbIcon from "@mui/icons-material/Lightbulb"; +import MoreHorizIcon from "@mui/icons-material/MoreHoriz"; +import WarningIcon from "@mui/icons-material/Warning"; +import Box from "@mui/material/Box"; +import Button from "@mui/material/Button"; +import Container from "@mui/material/Container"; +import IconButton from "@mui/material/IconButton"; +import { styled } from "@mui/material/styles"; +import Typography from "@mui/material/Typography"; +import { contentFlowSpacing } from "@planx/components/shared/Preview/Card"; +import PhaseBanner from "components/PhaseBanner"; +import { BackButton } from "pages/Preview/Questions"; +import React from "react"; +import FeedbackDisclaimer from "ui/public/FeedbackDisclaimer"; +import FeedbackOption from "ui/public/FeedbackOption"; +import InputLabel from "ui/public/InputLabel"; +import Input from "ui/shared/Input"; + +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, +})); + +const FeedbackForm = styled("form")(({ theme }) => ({ + "& > *": { + ...contentFlowSpacing(theme), + }, +})); + +const FeedbackComponent: React.FC = () => { + return ( + <> + + + + + + + + + + What would you like to share? + + + + + + + + + + + + + + + + + + + + + + + Back + + + + + + + + + + + Report an issue + + + + + + + + + + + + + + + + + + + + + + + + + Back + + + + + + + + + + + Share an idea + + + + + + + + + + + + + + + + + + + + Back + + + + + + + + + + + Share a comment + + + + + + + + + + + + + + + + + + + Thank you for sharing feedback + + + + + + + + + + We appreciate it lorem ipsum dolor sit amet, consectetuer + adipiscing elit. Aenean commodo ligula eget dolor. + + + + + + + ); +}; + +export default FeedbackComponent; diff --git a/editor.planx.uk/src/components/PhaseBanner.tsx b/editor.planx.uk/src/components/PhaseBanner.tsx index ef63a85eab..7e73a3e887 100644 --- a/editor.planx.uk/src/components/PhaseBanner.tsx +++ b/editor.planx.uk/src/components/PhaseBanner.tsx @@ -1,34 +1,41 @@ -import { FeedbackFish } from "@feedback-fish/react"; import Box from "@mui/material/Box"; -import ButtonBase from "@mui/material/ButtonBase"; +import Button from "@mui/material/Button"; import Container from "@mui/material/Container"; import Link from "@mui/material/Link"; import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; -import { getFeedbackMetadata } from "lib/feedback"; -import React, { useEffect, useState } from "react"; +import React from "react"; const Root = styled(Box)(({ theme }) => ({ width: "100%", - border: `solid ${theme.palette.grey[400]}`, - borderWidth: "1px 0", - backgroundColor: "#FFFFFF", + backgroundColor: theme.palette.background.paper, })); -const Inner = styled(ButtonBase)(({ theme }) => ({ +const ReportButton = styled(Button)(({ theme }) => ({ + backgroundColor: theme.palette.common.white, + color: theme.palette.primary.main, + padding: "0.7em 1em", +})); + +const Inner = styled(Box)(({ theme }) => ({ width: "100%", + display: "flex", + justifyContent: "space-between", + alignItems: "center", + flexWrap: "wrap", + padding: theme.spacing(0.75, 0), +})); + +const PhaseWrap = styled(Box)(({ theme }) => ({ display: "flex", justifyContent: "start", alignItems: "start", - padding: theme.spacing(1, 0), + padding: theme.spacing(0.5, 1, 0.5, 0), })); const BetaFlag = styled(Box)(({ theme }) => ({ betaIcon: { width: "100%", - "& > *": { - width: "100%", - }, [theme.breakpoints.up("sm")]: { width: "auto", marginRight: theme.spacing(2), @@ -37,24 +44,13 @@ const BetaFlag = styled(Box)(({ theme }) => ({ })); export default function PhaseBanner(): FCReturn { - const feedbackFishId = process.env.REACT_APP_FEEDBACK_FISH_ID || ""; - const [metadata, setMetadata] = useState>(); - - useEffect(() => { - const handleMessage = () => setMetadata(getFeedbackMetadata()); - window.addEventListener("message", handleMessage); - return () => { - window.removeEventListener("message", handleMessage); - }; - }, []); - return ( - - - - + + + + This is a new service. Your feedback will help us improve it. - - - - + + Report an issue with this page + + + ); } diff --git a/editor.planx.uk/src/pages/Preview/Questions.tsx b/editor.planx.uk/src/pages/Preview/Questions.tsx index 58b1dafaf7..0c9e9c290e 100644 --- a/editor.planx.uk/src/pages/Preview/Questions.tsx +++ b/editor.planx.uk/src/pages/Preview/Questions.tsx @@ -23,7 +23,7 @@ const BackBar = styled(Box)(() => ({ zIndex: "1000", })); -const BackButton = styled(ButtonBase)(({ theme, hidden }) => ({ +export const BackButton = styled(ButtonBase)(({ theme, hidden }) => ({ visibility: "visible", pointerEvents: "auto", display: "flex", diff --git a/editor.planx.uk/src/pages/layout/PublicLayout.tsx b/editor.planx.uk/src/pages/layout/PublicLayout.tsx index 9aa2c552b9..8ef3502abd 100644 --- a/editor.planx.uk/src/pages/layout/PublicLayout.tsx +++ b/editor.planx.uk/src/pages/layout/PublicLayout.tsx @@ -7,7 +7,7 @@ import { } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; import ErrorFallback from "components/ErrorFallback"; -import PhaseBanner from "components/PhaseBanner"; +import Feedback from "components/Feedback"; import { useStore } from "pages/FlowEditor/lib/store"; import React, { PropsWithChildren } from "react"; import { ErrorBoundary } from "react-error-boundary"; @@ -64,7 +64,7 @@ const PublicFooter: React.FC = () => { ); return ( - +