Skip to content
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.

Sign up for GitHub

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

refactor: Editor forms tidy up and unify #3324

Merged
merged 6 commits into from
Jun 28, 2024
Merged

refactor: Editor forms tidy up and unify #3324

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a824766
wip: Editor forms tidy up and refactor
ianjon3s Jun 26, 2024
e046cad
feat: Set up snackbar alert for global settings
ianjon3s Jun 27, 2024
9192409
feat: Set up snackbar alert for global settings
ianjon3s Jun 27, 2024
b350e5d
feat: Set up global settings page
ianjon3s Jun 27, 2024
dfab82a
refactor: Rename <SettingsRow> to <SettingsSection>
ianjon3s Jun 27, 2024
4e49888
fix: Updates from QA
ianjon3s Jun 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 24 additions & 28 deletions editor.planx.uk/src/@planx/components/ui.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import type { handleSubmit } from "pages/Preview/Node";
import React, { ChangeEvent } from "react";
import ImgInput from "ui/editor/ImgInput";
import InputGroup from "ui/editor/InputGroup";
import InputLabel from "ui/editor/InputLabel";
import ModalSection from "ui/editor/ModalSection";
import ModalSectionContent from "ui/editor/ModalSectionContent";
import RichTextInput from "ui/editor/RichTextInput";
Expand Down Expand Up @@ -109,46 +110,41 @@ export const MoreInformation = ({
return (
<ModalSection>
<ModalSectionContent title="More Information" Icon={InfoOutlined}>
<InputGroup label="Why it matters">
<InputRow>
<InputGroup flowSpacing>
<InputLabel label="Why it matters">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to remove the placeholder values now if we're adding labels here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good shout, the label + placeholder combo is already in place but it makes sense to have one or the other.

<RichTextInput
multiline
name="info"
value={info}
onChange={changeField}
placeholder="Why it matters"
/>
</InputRow>
</InputGroup>
<InputGroup label="Policy source">
<InputRow>
</InputLabel>
<InputLabel label="Policy source">
<RichTextInput
multiline
name="policyRef"
value={policyRef}
onChange={changeField}
placeholder="Policy source"
/>
</InputRow>
</InputGroup>
<InputGroup label="How it is defined?">
<InputRow>
<RichTextInput
multiline
name="howMeasured"
value={howMeasured}
onChange={changeField}
placeholder="How it is defined?"
/>
<ImgInput
img={definitionImg}
onChange={(newUrl) => {
changeField({
target: { name: "definitionImg", value: newUrl },
});
}}
/>
</InputRow>
</InputLabel>
<InputLabel label="How it is defined?">
<InputRow>
<RichTextInput
multiline
name="howMeasured"
value={howMeasured}
onChange={changeField}
/>
<ImgInput
img={definitionImg}
onChange={(newUrl) => {
changeField({
target: { name: "definitionImg", value: newUrl },
});
}}
/>
</InputRow>
</InputLabel>
</InputGroup>
</ModalSectionContent>
</ModalSection>
Expand Down
10 changes: 5 additions & 5 deletions editor.planx.uk/src/pages/FlowEditor/components/Flow/FeedbackPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import gql from "graphql-tag";
import { client } from "lib/graphql";
import React, { useState } from "react";
import { Feedback } from "routes/feedback";
import EditorRow from "ui/editor/EditorRow";
import SettingsSection from "ui/editor/SettingsSection";
import ErrorSummary from "ui/shared/ErrorSummary";
import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml";

Expand Down Expand Up @@ -156,15 +156,15 @@ export const FeedbackPage: React.FC<Props> = ({ feedback }) => {
return (
<Container maxWidth="contentWrap">
<Box py={4}>
<EditorRow>
<SettingsSection>
<Typography variant="h2" component="h3" gutterBottom>
Feedback log
</Typography>
<Typography variant="body1">
Feedback from users about this service.
</Typography>
</EditorRow>
<EditorRow>
</SettingsSection>
<SettingsSection>
{feedback.length === 0 ? (
<ErrorSummary
format="info"
Expand Down Expand Up @@ -202,7 +202,7 @@ export const FeedbackPage: React.FC<Props> = ({ feedback }) => {
</Table>
</Feed>
)}
</EditorRow>
</SettingsSection>
</Box>
</Container>
);
Expand Down
10 changes: 5 additions & 5 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/DataManagerSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import React from "react";
import EditorRow from "ui/editor/EditorRow";
import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";
import SettingsSection from "ui/editor/SettingsSection";

const DataManagerSettings: React.FC = () => {
return (
<Box maxWidth="formWrap" mx="auto">
<EditorRow>
<SettingsSection>
<Typography variant="h2" component="h3" gutterBottom>
Data Manager
</Typography>
<Typography variant="body1">
Manage the data that your service uses and makes available via its
API.
</Typography>
</EditorRow>
<EditorRow>
</SettingsSection>
<SettingsSection>
<FeaturePlaceholder title="Feature in development" />
</EditorRow>
</SettingsSection>
</Box>
);
};
Expand Down
9 changes: 4 additions & 5 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ButtonForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { useStore } from "pages/FlowEditor/lib/store";
import React from "react";
import { getContrastTextColor } from "styleUtils";
import ColorPicker from "ui/editor/ColorPicker";
import InputDescription from "ui/editor/InputDescription";
import InputRow from "ui/shared/InputRow";
import InputRowItem from "ui/shared/InputRowItem";

Expand Down Expand Up @@ -39,20 +38,20 @@ export const ButtonForm: React.FC<FormProps> = ({
legend="Button colour"
description={
<>
<InputDescription>
<p>
The button background colour should be either a dark or light
colour. The text will be programmatically selected to contrast with
the selected colour (being either black or white).
</InputDescription>
<InputDescription>
</p>
<p>
<Link
href="https://opensystemslab.notion.site/10-Customise-the-appearance-of-your-services-3811fe9707534f6cbc0921fc44a2b193"
target="_blank"
rel="noopener noreferrer"
>
See our guide for setting button colours
</Link>
</InputDescription>
</p>
</>
}
input={
Expand Down
9 changes: 4 additions & 5 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/FaviconForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { useFormik } from "formik";
import { useStore } from "pages/FlowEditor/lib/store";
import React from "react";
import ImgInput from "ui/editor/ImgInput";
import InputDescription from "ui/editor/InputDescription";
import InputRow from "ui/shared/InputRow";
import InputRowItem from "ui/shared/InputRowItem";
import InputRowLabel from "ui/shared/InputRowLabel";
Expand Down Expand Up @@ -42,19 +41,19 @@ export const FaviconForm: React.FC<FormProps> = ({
legend="Favicon"
description={
<>
<InputDescription>
<p>
Set the favicon to be used in the browser tab. The favicon should be
32x32px and in .ico or .png format.
</InputDescription>
<InputDescription>
</p>
<p>
<Link
href="https://opensystemslab.notion.site/10-Customise-the-appearance-of-your-services-3811fe9707534f6cbc0921fc44a2b193"
target="_blank"
rel="noopener noreferrer"
>
See our guide for favicons
</Link>
</InputDescription>
</p>
</>
}
input={
Expand Down
9 changes: 4 additions & 5 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/TextLinkForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { useFormik } from "formik";
import { useStore } from "pages/FlowEditor/lib/store";
import React from "react";
import ColorPicker from "ui/editor/ColorPicker";
import InputDescription from "ui/editor/InputDescription";
import InputRow from "ui/shared/InputRow";
import InputRowItem from "ui/shared/InputRowItem";

Expand Down Expand Up @@ -49,19 +48,19 @@ export const TextLinkForm: React.FC<FormProps> = ({
legend="Text link colour"
description={
<>
<InputDescription>
<p>
The text link colour should be a dark colour that contrasts with
white ("#ffffff").
</InputDescription>
<InputDescription>
</p>
<p>
<Link
href="https://opensystemslab.notion.site/10-Customise-the-appearance-of-your-services-3811fe9707534f6cbc0921fc44a2b193"
target="_blank"
rel="noopener noreferrer"
>
See our guide for setting text link colours
</Link>
</InputDescription>
</p>
</>
}
input={
Expand Down
9 changes: 4 additions & 5 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/ThemeAndLogoForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { useStore } from "pages/FlowEditor/lib/store";
import React from "react";
import ColorPicker from "ui/editor/ColorPicker";
import ImgInput from "ui/editor/ImgInput";
import InputDescription from "ui/editor/InputDescription";
import InputRow from "ui/shared/InputRow";
import InputRowItem from "ui/shared/InputRowItem";
import InputRowLabel from "ui/shared/InputRowLabel";
Expand Down Expand Up @@ -60,21 +59,21 @@ export const ThemeAndLogoForm: React.FC<FormProps> = ({
legend="Theme colour & logo"
description={
<>
<InputDescription>
<p>
The theme colour and logo, are used in the header of the service.
The theme colour should be a dark colour that contrasts with white
("#ffffff"). The logo should contrast with a dark background colour
(your theme colour) and have a transparent background.
</InputDescription>
<InputDescription>
</p>
<p>
<Link
href="https://opensystemslab.notion.site/10-Customise-the-appearance-of-your-services-3811fe9707534f6cbc0921fc44a2b193"
target="_blank"
rel="noopener noreferrer"
>
See our guide for setting theme colours and logos
</Link>
</InputDescription>
</p>
</>
}
input={
Expand Down
6 changes: 3 additions & 3 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { TeamTheme } from "@opensystemslab/planx-core/types";
import { FormikConfig } from "formik";
import { useStore } from "pages/FlowEditor/lib/store";
import React, { useEffect, useState } from "react";
import EditorRow from "ui/editor/EditorRow";
import SettingsSection from "ui/editor/SettingsSection";

import { ButtonForm } from "./ButtonForm";
import { FaviconForm } from "./FaviconForm";
Expand Down Expand Up @@ -76,14 +76,14 @@ const DesignSettings: React.FC = () => {

return (
<Box maxWidth="formWrap" mx="auto">
<EditorRow>
<SettingsSection>
<Typography variant="h2" component="h3" gutterBottom>
Design
</Typography>
<Typography variant="body1">
How your service appears to public users.
</Typography>
</EditorRow>
</SettingsSection>
{formikConfig && (
<>
<ThemeAndLogoForm formikConfig={formikConfig} onSuccess={onSuccess} />
Expand Down
60 changes: 28 additions & 32 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/GeneralSettings/BoundaryForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import { useFormik } from "formik";
import React, { ChangeEvent } from "react";
import InputDescription from "ui/editor/InputDescription";
import InputLabel from "ui/editor/InputLabel";
import Input from "ui/shared/Input";
import InputRow from "ui/shared/InputRow";
import InputRowLabel from "ui/shared/InputRowLabel";

import { SettingsForm } from "../shared/SettingsForm";
import { FormProps } from ".";
Expand All @@ -22,38 +20,36 @@ export default function BoundaryForm({ formikConfig, onSuccess }: FormProps) {
formik={formik}
legend="Boundary"
description={
<InputDescription>
The boundary URL is used to retrieve the outer boundary of your
council area. This can then help users define whether they are within
your council area.
<br />
<br />
The boundary should be given as a link from:{" "}
<a
href="https://www.planning.data.gov.uk/"
target="_blank"
rel="noopener noreferrer"
>
https://www.planning.data.gov.uk/
</a>
</InputDescription>
}
input={
<>
<InputRow>
<InputRowLabel>
Boundary URL
<Input
name="boundary"
value={formik.values.boundaryUrl}
onChange={(ev: ChangeEvent<HTMLInputElement>) => {
formik.setFieldValue("boundaryUrl", ev.target.value);
}}
/>
</InputRowLabel>
</InputRow>
<p>
The boundary URL is used to retrieve the outer boundary of your
council area. This can then help users define whether they are
within your council area.
</p>
<p>
The boundary should be given as a link from:{" "}
<a
href="https://www.planning.data.gov.uk/"
target="_blank"
rel="noopener noreferrer"
>
https://www.planning.data.gov.uk/
</a>
</p>
</>
}
input={
<InputLabel label="Boundary URL" htmlFor="boundaryUrl">
<Input
name="boundary"
value={formik.values.boundaryUrl}
onChange={(ev: ChangeEvent<HTMLInputElement>) => {
formik.setFieldValue("boundaryUrl", ev.target.value);
}}
id="boundaryUrl"
/>
</InputLabel>
}
/>
);
}
Loading
Loading