diff --git a/editor.planx.uk/src/@planx/components/NextSteps/Editor.tsx b/editor.planx.uk/src/@planx/components/NextSteps/Editor.tsx index 3e422057fd..59f5ee26ec 100644 --- a/editor.planx.uk/src/@planx/components/NextSteps/Editor.tsx +++ b/editor.planx.uk/src/@planx/components/NextSteps/Editor.tsx @@ -59,7 +59,6 @@ const TaskEditor: React.FC> = (props) => { = (props) => { policyRef={props.policyRef} howMeasured={props.howMeasured} /> - + ); }; diff --git a/editor.planx.uk/src/@planx/components/NextSteps/model.ts b/editor.planx.uk/src/@planx/components/NextSteps/model.ts index eb08027537..7693b4f4e1 100644 --- a/editor.planx.uk/src/@planx/components/NextSteps/model.ts +++ b/editor.planx.uk/src/@planx/components/NextSteps/model.ts @@ -9,7 +9,7 @@ export interface NextSteps extends MoreInformation { export interface Step { title: string; description: string; - url: string; + url?: string; } export const parseNextSteps = ( diff --git a/editor.planx.uk/src/ui/NextStepsList.tsx b/editor.planx.uk/src/ui/NextStepsList.tsx index 901586f04a..8abcad797f 100644 --- a/editor.planx.uk/src/ui/NextStepsList.tsx +++ b/editor.planx.uk/src/ui/NextStepsList.tsx @@ -1,24 +1,35 @@ import EastIcon from "@mui/icons-material/East"; import Box from "@mui/material/Box"; +import ButtonBase from "@mui/material/ButtonBase"; import Link from "@mui/material/Link"; -import { styled } from "@mui/material/styles"; +import { styled, Theme } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; -import type { Step } from "@planx/components/NextSteps/model"; +import type { Step as StyledListItem } from "@planx/components/NextSteps/model"; +import { handleSubmit } from "pages/Preview/Node"; import React from "react"; -const List = styled("ul")(({ theme }) => ({ +interface NextStepsListProps { + steps: StyledListItem[]; + handleSubmit?: handleSubmit; +} + +interface ListItemProps extends StyledListItem { + handleSubmit?: handleSubmit +} + +const Root = styled("ul")(({ theme }) => ({ listStyle: "none", margin: theme.spacing(3, 0, 0, 0), padding: 0, })); -const Step = styled("li")(({ theme }) => ({ +const StyledListItem = styled("li")(({ theme }) => ({ position: "relative", display: "flex", borderBottom: `1px solid ${theme.palette.border.main}`, })); -const Inner = styled(Link)(({ theme }) => ({ +const innerStyle = (theme: Theme) => ({ width: "100%", display: "flex", justifyContent: "space-between", @@ -26,22 +37,29 @@ const Inner = styled(Link)(({ theme }) => ({ padding: theme.spacing(2, 0), textDecoration: "none", borderBottom: `1px solid theme.palette.text.secondary`, - // Manually set hover and focus behaviours as we are doing something outside of the usual button style - "&:hover > span": { + "&:hover > .arrowButton": { backgroundColor: theme.palette.primary.dark, }, + "&:focus > .arrowButton": { + backgroundColor: theme.palette.text.primary, + } +}); + +const InnerLink = styled(Link)(({ theme }) => ({ + ...innerStyle(theme), + // Manually set hover and focus behaviours as we are doing something outside of the usual button style "&:hover h2": { textDecorationThickness: "3px", }, - "&:focus > span": { - backgroundColor: theme.palette.text.primary, - }, "&:focus h2": { textDecoration: "none", }, })); -const Description = styled(Typography)(() => ({})); +const InnerButton = styled(ButtonBase)(({ theme }) => ({ + ...innerStyle(theme), + textAlign: "left", +})); const ArrowButton = styled("span")(({ theme }) => ({ display: "flex", @@ -54,34 +72,48 @@ const ArrowButton = styled("span")(({ theme }) => ({ flexShrink: "0", })); -function ListItem(props: Step) { - return ( - - - - - {props.title} - - - {props.description} - - - - - - - - ); -} +const LinkStep = (props: ListItemProps) => ( + + + +); + +const ContinueStep = (props: ListItemProps) => ( + props.handleSubmit && props.handleSubmit()}> + + +); + +const Step = ({ title, description, url }: ListItemProps) => ( + <> + + + {title} + + + {description} + + + + + + +) -function NextStepsList(props: { items: Step[] }) { +function NextStepsList(props: NextStepsListProps) { return ( - {props.items?.map((item, i) => )} + {props.steps?.map((step, i) => + + { step.url + ? + : } + + )} ); }