-
Notifications
You must be signed in to change notification settings - Fork 2
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.
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
feat: Boilerplate next steps component #1909
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
import { TYPES } from "@planx/components/types"; | ||
import { | ||
EditorProps, | ||
ICONS, | ||
InternalNotes, | ||
MoreInformation, | ||
} from "@planx/components/ui"; | ||
import { useFormik } from "formik"; | ||
import React from "react"; | ||
import Input from "ui/Input"; | ||
import InputRow from "ui/InputRow"; | ||
import ModalSection from "ui/ModalSection"; | ||
import ModalSectionContent from "ui/ModalSectionContent"; | ||
import RichTextInput from "ui/RichTextInput"; | ||
|
||
import { NextSteps, parseContent } from "./model"; | ||
|
||
type Props = EditorProps<TYPES.NextSteps, NextSteps>; | ||
|
||
export default NextSteps; | ||
|
||
function NextSteps(props: Props) { | ||
const formik = useFormik({ | ||
initialValues: parseContent(props.node?.data), | ||
onSubmit: (newValues) => { | ||
props.handleSubmit?.({ | ||
type: TYPES.NextSteps, | ||
data: newValues, | ||
}); | ||
}, | ||
}); | ||
|
||
return ( | ||
<form onSubmit={formik.handleSubmit} id="modal"> | ||
<ModalSection> | ||
<ModalSectionContent title="Next steps" Icon={ICONS[TYPES.NextSteps]}> | ||
<InputRow> | ||
<Input | ||
format="large" | ||
name="title" | ||
placeholder={formik.values.title} | ||
value={formik.values.title} | ||
onChange={formik.handleChange} | ||
/> | ||
</InputRow> | ||
<InputRow> | ||
<RichTextInput | ||
name="description" | ||
placeholder="Description" | ||
value={formik.values.description} | ||
onChange={formik.handleChange} | ||
/> | ||
</InputRow> | ||
</ModalSectionContent> | ||
</ModalSection> | ||
<MoreInformation | ||
changeField={formik.handleChange} | ||
definitionImg={formik.values.definitionImg} | ||
howMeasured={formik.values.howMeasured} | ||
policyRef={formik.values.policyRef} | ||
info={formik.values.info} | ||
/> | ||
<InternalNotes | ||
name="notes" | ||
value={formik.values.notes} | ||
onChange={formik.handleChange} | ||
/> | ||
</form> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import Box from "@mui/material/Box"; | ||
import Typography from "@mui/material/Typography"; | ||
import { PublicProps } from "@planx/components/ui"; | ||
import React from "react"; | ||
|
||
import Card from "../shared/Preview/Card"; | ||
import QuestionHeader from "../shared/Preview/QuestionHeader"; | ||
import { NextSteps } from "./model"; | ||
|
||
type Props = PublicProps<NextSteps>; | ||
|
||
export default Component; | ||
|
||
function Component(props: Props) { | ||
return ( | ||
<Card handleSubmit={props.handleSubmit} isValid> | ||
<QuestionHeader title={props.title} description={props.description} /> | ||
<Box> | ||
<Typography variant="h2" style={{ color: "orangered" }}> | ||
UNDER DEVELOPMENT | ||
</Typography> | ||
</Box> | ||
</Card> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import { MoreInformation, parseMoreInformation } from "../shared"; | ||
|
||
export interface NextSteps extends MoreInformation { | ||
title: string; | ||
description: string; | ||
fn: string; | ||
} | ||
|
||
export const parseContent = ( | ||
data: Record<string, any> | undefined | ||
): NextSteps => ({ | ||
title: data?.title || DEFAULT_TITLE, | ||
description: data?.description || "", | ||
fn: data?.fn || "", | ||
...parseMoreInformation(data), | ||
}); | ||
|
||
const DEFAULT_TITLE = "What would you like to do next?"; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -29,4 +29,5 @@ export enum TYPES { | |
Send = 650, | ||
Calculate = 700, | ||
Confirmation = 725, | ||
NextSteps = 730, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This works ➕ There's no obvious method here, but as long as it's a new unique number it'll be good to go! One new thing the original docs don't cover I think is that this list of Component types is now also maintained in planx-core and will need to be updated here as well: https://github.com/theopensystemslab/planx-core/blob/main/src/types/component.ts There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks, I've added as a new PR to planx-core: |
||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -46,6 +46,7 @@ const NodeTypeSelect: React.FC<{ | |
<optgroup label="Question"> | ||
<option value={TYPES.Statement}>Question</option> | ||
<option value={TYPES.Checklist}>Checklist</option> | ||
{/* <option value={TYPES.NextSteps}>Next steps</option> */} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This grouping makes sense to me too ➕ As long as the Public display shows "Under development", I'd actually be in favor of this not being commented out in this list so we can easily test/preview on the pizza! And that should be enough of a signal to Editors to not use it yet There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks, I've updated so this is unhidden, also updated the description with a pizza preview link for the component. |
||
</optgroup> | ||
<optgroup label="Inputs"> | ||
<option value={TYPES.TextInput}>Text Input</option> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A more flexible option is to use
<QuestionHeader {...props} />
here which will then also automatically pick up help text if it's defined.Otherwise, as-is:
howMeasured={props.howMeasured}
and so onThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, updated.