feat: Sticky help button (#2203)

* feat: max-width page containers * wip: sticky help button * wip: sticky help button * feat: sticky help button * feat: sticky help button * feat: custom border colours * feat: button height for a11y * feat: sticky help button no toolbar * feat: sticky help button fixed position * feat: sticky help button fixed solid * feat: styles for file upload help * feat: Stick help button position right * feat: Stick help button position right * feat: Stick help button position right * feat: notice component padding for help tab
theopensystemslab · Sep 19, 2023 · 7bdc025 · 7bdc025
1 parent 2642651
commit 7bdc025
Show file tree

Hide file tree

Showing 10 changed files with 195 additions and 114 deletions.
diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.test.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.test.tsx
@@ -50,7 +50,7 @@ describe("Basic state and setup", () => {
     expect(results).toHaveNoViolations();
   });
 
-  test("shows help icons for header and applicable file", async () => {
+  test("shows help buttons for header and applicable file", async () => {
     setup(
       <FileUploadAndLabelComponent
         title="Test title"
@@ -59,8 +59,8 @@ describe("Basic state and setup", () => {
       />,
     );
 
-    const helpIcons = screen.getAllByTestId("more-info-icon");
-    expect(helpIcons).toHaveLength(2);
+    const helpButtons = screen.getAllByTestId("more-info-button");
+    expect(helpButtons).toHaveLength(1);
   });
 
   it("does not show optional files if there are other types", () => {
@@ -135,7 +135,7 @@ describe("Info-only mode with hidden drop zone", () => {
     expect(results).toHaveNoViolations();
   });
 
-  test("shows help icons for header and applicable file", async () => {
+  test("shows help buttons for header and applicable file", async () => {
     setup(
       <FileUploadAndLabelComponent
         title="Test title"
@@ -145,8 +145,8 @@ describe("Info-only mode with hidden drop zone", () => {
       />,
     );
 
-    const helpIcons = screen.getAllByTestId("more-info-icon");
-    expect(helpIcons).toHaveLength(2);
+    const helpButtons = screen.getAllByTestId("more-info-button");
+    expect(helpButtons).toHaveLength(1);
   });
 
   it("shows optional files by default", () => {

diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx
@@ -1,5 +1,6 @@
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListSubheader from "@mui/material/ListSubheader";
@@ -16,7 +17,6 @@ import React, { useEffect, useState } from "react";
 import { usePrevious } from "react-use";
 import ErrorWrapper from "ui/ErrorWrapper";
 import FullWidthWrapper from "ui/FullWidthWrapper";
-import MoreInfoIcon from "ui/icons/MoreInfo";
 import ReactMarkdownOrHtml from "ui/ReactMarkdownOrHtml";
 import { emptyContent } from "ui/RichTextInput";
 
@@ -25,10 +25,7 @@ import { MoreInformation } from "../shared";
 import Card from "../shared/Preview/Card";
 import MoreInfo from "../shared/Preview/MoreInfo";
 import MoreInfoSection from "../shared/Preview/MoreInfoSection";
-import QuestionHeader, {
-  Image,
-  StyledIconButton,
-} from "../shared/Preview/QuestionHeader";
+import QuestionHeader, { Image } from "../shared/Preview/QuestionHeader";
 import { Dropzone } from "../shared/PrivateFileUpload/Dropzone";
 import { FileStatus } from "../shared/PrivateFileUpload/FileStatus";
 import { UploadedFileCard } from "../shared/PrivateFileUpload/UploadedFileCard";
@@ -57,6 +54,17 @@ const DropzoneContainer = styled(Box)(({ theme }) => ({
   },
 }));
 
+export const InfoButton = styled(Button)(({ theme }) => ({
+  minWidth: 0,
+  marginLeft: theme.spacing(1.5),
+  boxShadow: "none",
+  color: theme.palette.primary.main,
+  padding: "0.33em 0.5em",
+  minHeight: "44px",
+  textDecoration: "underline",
+  textUnderlineOffset: "0.15em",
+})) as typeof Button;
+
 function Component(props: Props) {
   const [fileList, setFileList] = useState<FileList>({
     required: [],
@@ -287,15 +295,15 @@ const InteractiveFileListItem = (props: FileListItemProps) => {
         <Typography variant="body1">{props.name}</Typography>
       </Box>
       {!!(info || policyRef || howMeasured) && (
-        <StyledIconButton
+        <InfoButton
           title={`More information`}
           aria-label={`See more information about "${props.name}"`}
           onClick={() => handleHelpClick({ [props.fn]: props.name })}
           aria-haspopup="dialog"
           size="small"
         >
-          <MoreInfoIcon />
-        </StyledIconButton>
+          <span>Help</span>
+        </InfoButton>
       )}
       <MoreInfo open={open} handleClose={() => setOpen(false)}>
         {info && info !== emptyContent ? (

diff --git a/editor.planx.uk/src/@planx/components/Notice/Public.tsx b/editor.planx.uk/src/@planx/components/Notice/Public.tsx
@@ -21,7 +21,8 @@ const Container = styled(Box, {
 })<BoxProps & { customColor?: string }>(
   ({ theme, customColor = "#F9F8F8" }) => ({
     position: "relative",
-    width: "100%",
+    width: theme.breakpoints.values.formWrap,
+    maxWidth: "100%",
     display: "flex",
     alignItems: "flex-start",
     justifyContent: "space-between",
@@ -82,7 +83,10 @@ const NoticeComponent: React.FC<Props> = (props) => {
           policyRef={props.policyRef}
           howMeasured={props.howMeasured}
         />
-        <Container customColor={props.color}>
+        <Container
+          customColor={props.color}
+          mt={{ xs: 9, sm: 10, md: 12, contentWrap: 6 }}
+        >
           <Content>
             <TitleWrap>
               <ErrorOutline sx={{ width: 34, height: 34 }} />

diff --git a/editor.planx.uk/src/@planx/components/PropertyInformation/Public.tsx b/editor.planx.uk/src/@planx/components/PropertyInformation/Public.tsx
@@ -80,6 +80,7 @@ export interface PresentationalProps {
 
 const MapContainer = styled(Box)(({ theme }) => ({
   padding: theme.spacing(1, 0),
+  width: "100%",
   maxWidth: "none",
   "& my-map": {
     width: "100%",

diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/Card.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/Card.tsx
@@ -29,6 +29,7 @@ const InnerContainer = styled(Box)(({ theme }) => ({
   },
   "& > *": {
     maxWidth: theme.breakpoints.values.formWrap,
+    width: "100%",
   },
 }));
 
@@ -59,27 +60,28 @@ const Card: React.FC<Props> = ({
       <Container maxWidth="contentWrap">
         <InnerContainer
           bgcolor="background.default"
-          py={{ xs: 2, md: 4 }}
-          mb={4}
+          mt={{ xs: 4, md: 6 }}
+          mb={{ xs: 4, md: 8 }}
           {...props}
         >
           {children}
 
-          {handleSubmit && (
-            <Button
-              variant="contained"
-              color="primary"
-              size="large"
-              type="submit"
-              disabled={!isValid}
-              onClick={async () => await handleSubmit()}
-              data-testid="continue-button"
-              sx={{ ...contentFlowSpacing(theme) }}
-            >
-              Continue
-            </Button>
-          )}
-          {showSaveResumeButton && <SaveResumeButton />}
+          <Box pt={2}>
+            {handleSubmit && (
+              <Button
+                variant="contained"
+                color="primary"
+                size="large"
+                type="submit"
+                disabled={!isValid}
+                onClick={async () => await handleSubmit()}
+                data-testid="continue-button"
+              >
+                Continue
+              </Button>
+            )}
+            {showSaveResumeButton && <SaveResumeButton />}
+          </Box>
         </InnerContainer>
       </Container>
     </Fade>