diff --git a/src/layouts/EditHomepage.jsx b/src/layouts/EditHomepage.jsx index 8c0508780..8815d9302 100644 --- a/src/layouts/EditHomepage.jsx +++ b/src/layouts/EditHomepage.jsx @@ -7,6 +7,7 @@ import { VStack, Divider, } from "@chakra-ui/react" +import { DragDropContext } from "@hello-pangea/dnd" import { Button, Tag } from "@opengovsg/design-system-react" import update from "immutability-helper" import _ from "lodash" @@ -1021,88 +1022,99 @@ const EditHomepage = ({ match }) => { ) })} - - } - // NOTE: It's empty if there is only 1 section and it's a hero section - // as the hero section displays above the custom sections - // and has a fixed display - isEmpty={ - frontMatter.sections.length === 1 && - heroSection.length === 1 - } + + - - {frontMatter.sections.map((section, sectionIndex) => ( - <> - {section.resources && ( - Resources} - title="New resource widget" - isInvalid={_.some( - errors.sections[sectionIndex].resources + } + // NOTE: It's empty if there is only 1 section and it's a hero section + // as the hero section displays above the custom sections + // and has a fixed display + isEmpty={ + frontMatter.sections.length === 1 && + heroSection.length === 1 + } + > + + {frontMatter.sections.map( + (section, sectionIndex) => ( + <> + {section.resources && ( + Resources + } + title="New resource widget" + isInvalid={_.some( + errors.sections[sectionIndex].resources + )} + > + + )} - > - - - )} - - {section.infobar && ( - Infobar} - title={section.infobar.title || "New infobar"} - isInvalid={_.some( - errors.sections[sectionIndex].infobar + + {section.infobar && ( + Infobar} + title={ + section.infobar.title || "New infobar" + } + isInvalid={_.some( + errors.sections[sectionIndex].infobar + )} + > + + )} - > - - - )} - - {section.infopic && ( - Infopic} - title={section.infopic.title || "New infopic"} - isInvalid={_.some( - errors.sections[sectionIndex].infopic + + {section.infopic && ( + Infopic} + title={ + section.infopic.title || "New infopic" + } + isInvalid={_.some( + errors.sections[sectionIndex].infopic + )} + > + + )} - > - - - )} - - ))} - - - + + ) + )} + + + + {/* NOTE: Set the padding here - diff --git a/src/layouts/components/Editable/Editable.tsx b/src/layouts/components/Editable/Editable.tsx index 6438f371a..3ee3eda5c 100644 --- a/src/layouts/components/Editable/Editable.tsx +++ b/src/layouts/components/Editable/Editable.tsx @@ -16,12 +16,7 @@ import { Box, FlexProps, } from "@chakra-ui/react" -import { - OnDragEndResponder, - Droppable, - DragDropContext, - Draggable, -} from "@hello-pangea/dnd" +import { Droppable, Draggable } from "@hello-pangea/dnd" import { IconButton } from "@opengovsg/design-system-react" import { PropsWithChildren } from "react" import { v4 as uuid } from "uuid" @@ -130,8 +125,7 @@ const getDroppableInfo = (editableId: HomepageDroppableZone): DropInfo => { } } -export interface EditableDraggableProps extends Omit { - onDragEnd: OnDragEndResponder +export interface EditableDraggableProps extends BoxProps { editableId: HomepageDroppableZone } /** @@ -145,29 +139,23 @@ export interface EditableDraggableProps extends Omit { * @param editableId this determines the zone that the child draggables will be in. */ export const EditableDroppable = ({ - onDragEnd, - children, editableId, + children, ...rest }: PropsWithChildren) => { return ( - // NOTE: According to the dnd docs, - // there CANNOT be more than 1 - // `DragDropContext` in the component tree. - - - {(droppableProvided) => ( - - {children} - {droppableProvided.placeholder} - - )} - - + + {(droppableProvided) => ( + + {children} + {droppableProvided.placeholder} + + )} + ) } diff --git a/src/layouts/components/Homepage/HeroDropdownSection.tsx b/src/layouts/components/Homepage/HeroDropdownSection.tsx index 3785b907d..bbd5a1e2d 100644 --- a/src/layouts/components/Homepage/HeroDropdownSection.tsx +++ b/src/layouts/components/Homepage/HeroDropdownSection.tsx @@ -1,4 +1,5 @@ import { Text, Box, FormControl } from "@chakra-ui/react" +import { DragDropContext } from "@hello-pangea/dnd" import { FormLabel, Input, @@ -44,103 +45,105 @@ export const HeroDropdownSection = ({ return ( - - - Title - - {errors.dropdown} - - - Dropdown Options - - - Drag and drop dropdown options to rearrange them - - {/* TODO: Add `displayHandler` */} - onDisplay("dropdownelem")}> - - - {state.dropdown.options.map( - ( - { title: optionTitle, url: optionUrl }, - dropdownOptionIndex - ) => { - return ( - - - - Title - - - {errors.dropdownElems[dropdownOptionIndex].title} - - - - URL - - - {errors.dropdownElems[dropdownOptionIndex].url} - - - - - - ) - } - )} - - - - + + + + Title + + {errors.dropdown} + + + Dropdown Options + + + Drag and drop dropdown options to rearrange them + + {/* TODO: Add `displayHandler` */} + onDisplay("dropdownelem")}> + + + {state.dropdown.options.map( + ( + { title: optionTitle, url: optionUrl }, + dropdownOptionIndex + ) => { + return ( + + + + Title + + + {errors.dropdownElems[dropdownOptionIndex].title} + + + + URL + + + {errors.dropdownElems[dropdownOptionIndex].url} + + + + + + ) + } + )} + + + + + - - - ) - } - )} - - - - + {errors.button} + + + Button URL + + {errors.url} + + + + Highlights + + + Drag and drop highlights to rearrange them. On a desktop screen, + highlights are shown side-by-side + + {/* TODO: Add `displayHandler` */} + onDisplay("highlight")}> + + + {highlights.map( + ( + { + title: highlightTitle, + url: highlightUrl, + description: highlightDescription, + }, + highlightIndex + ) => { + return ( + + + + Title + + + {errors.highlights[highlightIndex].title} + + + + Description + + + {errors.highlights[highlightIndex].description} + + + + URL + + + {errors.highlights[highlightIndex].url} + + + + + + ) + } + )} + + + + +