Fix/text cards design (#1535)

* fix: preview changes * fix: validator changes * fix: panel changes * fix: initialise text cards section with 3 cards * fix: additional padding fixes
isomerpages · Oct 3, 2023 · a38017e · a38017e
1 parent b5eb87f
commit a38017e
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 39 deletions.
diff --git a/src/layouts/EditHomepage/EditHomepage.jsx b/src/layouts/EditHomepage/EditHomepage.jsx
@@ -773,6 +773,22 @@ const EditHomepage = ({ match }) => {
               })
             )
             setDisplayAnnouncementItems(_.fill(Array(1), false))
+          } else if (val.textcards) {
+            // Create 3 text cards by default
+            const parentId =
+              updatedHomepageState.frontMatter.sections.length - 1
+            let intermediateHomepageState = updatedHomepageState
+            for (let i = 0; i < 3; i += 1) {
+              const cardVal = TEXTCARDS_ITEM_SECTION
+              const cardErr = getErrorValues(TEXTCARDS_ITEM_SECTION)
+              intermediateHomepageState = onCreate(
+                intermediateHomepageState,
+                `textCardItem-${parentId}`,
+                cardVal,
+                cardErr
+              )
+            }
+            setHomepageState(intermediateHomepageState)
           }
           break
         }

diff --git a/src/layouts/components/Homepage/AnnouncementBody.tsx b/src/layouts/components/Homepage/AnnouncementBody.tsx
@@ -72,7 +72,7 @@ export const AnnouncementBody = ({
     <Box w="full">
       <DragDropContext onDragEnd={onDragEnd}>
         <Editable.Droppable editableId="announcement">
-          <Text textStyle="h6">Announcements</Text>
+          <Text textStyle="h5">Announcements</Text>
           <Text mt="0.5rem" textStyle="body-2" textColor="base.content.medium">
             {`You can display up to ${MAX_ANNOUNCEMENTS} announcements at a time. Newly added
             announcements are shown on the top of the list`}

diff --git a/src/layouts/components/Homepage/AnnouncementSection.tsx b/src/layouts/components/Homepage/AnnouncementSection.tsx
@@ -51,7 +51,7 @@ export const AnnouncementSection = ({
         />
         <FormErrorMessage>{errors.title}</FormErrorMessage>
       </FormControl>
-      <Divider />
+      <Divider py="0.5rem" />
 
       {children}
       <Button

diff --git a/src/layouts/components/Homepage/TextCardsBody.tsx b/src/layouts/components/Homepage/TextCardsBody.tsx
@@ -1,10 +1,11 @@
-import { FormControl, VStack, Text } from "@chakra-ui/react"
+import { FormControl, VStack, Text, Divider } from "@chakra-ui/react"
 import { DragDropContext } from "@hello-pangea/dnd"
 import {
   Button,
   FormErrorMessage,
   FormLabel,
   Input,
+  Textarea,
 } from "@opengovsg/design-system-react"
 import _ from "lodash"
 import { BiPlus } from "react-icons/bi"
@@ -48,7 +49,7 @@ export const TextCardsSectionBody = ({
   return (
     // NOTE: Setting negative margin so that the gap is correct.
     // This is because there is inbuilt padding onto the `AccordionPanels`.
-    <Editable.Section mt="-0.5rem">
+    <Editable.Section>
       <FormControl isInvalid={!!errors.subtitle}>
         <FormLabel>Subtitle</FormLabel>
         <Input
@@ -71,20 +72,22 @@ export const TextCardsSectionBody = ({
       </FormControl>
       <FormControl isInvalid={!!errors.description}>
         <FormLabel>Description</FormLabel>
-        <Input
+        <Textarea
           placeholder="This description appears below your title. We recommend keeping it as short and succinct as possible."
           id={`section-${index}-textcards-description`}
           value={description}
           onChange={onChange}
         />
         <FormErrorMessage>{errors.description}</FormErrorMessage>
       </FormControl>
-      <FormControl isRequired pt="0.5rem">
-        <FormLabel mb="0.5rem" textStyle="h6">
+      <Divider py="0.5rem" />
+      <FormControl isRequired>
+        <Text mb="0.5rem" textStyle="h5">
           Cards
-        </FormLabel>
+        </Text>
         <Text textStyle="body-2" mb="1.5rem">
-          Cards are displayed side by side on a desktop screens
+          Cards are displayed side by side on a desktop screen. You can add up
+          to 4 cards
         </Text>
         <DragDropContext onDragEnd={onDragEnd}>
           <Editable.Droppable width="100%" editableId={`textCardItem-${index}`}>
@@ -103,14 +106,14 @@ export const TextCardsSectionBody = ({
                       isInvalid={_.some(cardErrors[cardIndex])}
                       isNested
                     >
-                      <Editable.Section mt="-0.5rem">
+                      <Editable.Section>
                         <FormControl
                           isRequired
                           isInvalid={!!cardErrors[cardIndex].title}
                         >
                           <FormLabel>Title</FormLabel>
                           <Input
-                            placeholder="This is a title for the card"
+                            placeholder="New card"
                             id={`textCardItem-${index}-${cardIndex}-title`}
                             value={card.title}
                             onChange={onChange}
@@ -120,11 +123,10 @@ export const TextCardsSectionBody = ({
                           </FormErrorMessage>
                         </FormControl>
                         <FormControl
-                          isRequired
                           isInvalid={!!cardErrors[cardIndex].description}
                         >
                           <FormLabel>Description</FormLabel>
-                          <Input
+                          <Textarea
                             placeholder="This is a description for the card. We recommend keeping it short and succinct."
                             id={`textCardItem-${index}-${cardIndex}-description`}
                             value={card.description}
@@ -153,9 +155,16 @@ export const TextCardsSectionBody = ({
                           isRequired
                           isInvalid={!!cardErrors[cardIndex].url}
                         >
-                          <FormLabel>Link URL</FormLabel>
+                          <FormLabel mb="0">Link URL</FormLabel>
+                          <Text
+                            mb="0.75rem"
+                            textStyle="body-2"
+                            textColor="base.content.medium"
+                          >
+                            Clicking on the card will open this URL
+                          </Text>
                           <Input
-                            placeholder="Enter a /page-url or link for this menu item"
+                            placeholder="Insert /page-url or https://"
                             id={`textCardItem-${index}-${cardIndex}-url`}
                             value={card.url}
                             onChange={onChange}

diff --git a/src/layouts/components/NavBar/GroupMenuBody.tsx b/src/layouts/components/NavBar/GroupMenuBody.tsx
@@ -64,7 +64,7 @@ export const GroupMenuBody = ({
           Submenus
         </FormLabel>
         <Text textStyle="body-2" mb="1.5rem">
-          Cards are displayed side by side on a desktop screens
+          Cards are displayed side by side on a desktop screen
         </Text>
         <DragDropContext onDragEnd={onDragEnd}>
           <Editable.Droppable width="100%" editableId={`sublink-${index}`}>

diff --git a/src/styles/isomer-template/components/homepage/_text-cards.scss b/src/styles/isomer-template/components/homepage/_text-cards.scss
@@ -47,14 +47,6 @@
       flex: 0 0 calc(50% - 24px);
     }
 
-    &:hover {
-      background-color: $interaction-hover;
-      cursor: pointer;
-      > .link {
-        color: var(--site-secondary-color-hover);
-      }
-    }
-
     .textcards-card-description {
       flex-grow: 1;
     }

diff --git a/src/templates/homepage/TextCardsSection.tsx b/src/templates/homepage/TextCardsSection.tsx
@@ -44,7 +44,14 @@ const TemplateTextCardsSection = forwardRef<
           <p className={getClassNames(editorStyles, ["subtitle-2", "pb-4"])}>
             {subtitle}
           </p>
-          <h1 className="h1 has-text-secondary has-text-centered pb-4">
+          <h1
+            className={getClassNames(editorStyles, [
+              "h1",
+              "has-text-secondary",
+              "has-text-centered",
+              "pb-4",
+            ])}
+          >
             {title}
           </h1>
           <p
@@ -66,13 +73,12 @@ const TemplateTextCardsSection = forwardRef<
             {!!cards &&
               cards.map((card) => (
                 <>
-                  <a
+                  <div
                     className={getClassNames(editorStyles, [
                       "textcards-card-body",
                       "is-flex",
                       "p-6",
                     ])}
-                    href="{{ card.url }}"
                   >
                     <h3 className={editorStyles.h3}>{card.title}</h3>
                     <p
@@ -84,7 +90,7 @@ const TemplateTextCardsSection = forwardRef<
                       {card.description}
                     </p>
                     <p className={editorStyles.link}>{card.linktext}</p>
-                  </a>
+                  </div>
                 </>
               ))}
           </div>

diff --git a/src/utils/validators.js b/src/utils/validators.js
@@ -615,11 +615,11 @@ const validateTextcardsSection = (sectionError, sectionType, field, value) => {
   switch (field) {
     case "title": {
       // Title is too short
-      if (value.length <= TEXTCARDS_CARD_TITLE_MIN_LENGTH) {
-        errorMessage = `Title should be longer than ${TEXTCARDS_BLOCK_TITLE_MIN_LENGTH} characters.`
+      if (value.length <= TEXTCARDS_BLOCK_TITLE_MIN_LENGTH) {
+        errorMessage = `Title cannot be empty.`
       }
       // Title is too long
-      if (value.length >= TEXTCARDS_CARD_TITLE_MAX_LENGTH) {
+      if (value.length >= TEXTCARDS_BLOCK_TITLE_MAX_LENGTH) {
         errorMessage = `Title should be shorter than ${TEXTCARDS_BLOCK_TITLE_MAX_LENGTH} characters.`
       }
       break
@@ -632,9 +632,9 @@ const validateTextcardsSection = (sectionError, sectionType, field, value) => {
       break
     }
     case "description": {
-      // Button text is too long
+      // Description is too long
       if (value.length >= TEXTCARDS_BLOCK_DESCRIPTION_MAX_LENGTH) {
-        errorMessage = `Button text should be shorter than ${TEXTCARDS_BLOCK_DESCRIPTION_MAX_LENGTH} characters.`
+        errorMessage = `Description should be shorter than ${TEXTCARDS_BLOCK_DESCRIPTION_MAX_LENGTH} characters (${value.length}/${TEXTCARDS_BLOCK_DESCRIPTION_MAX_LENGTH} characters)`
       }
       break
     }
@@ -652,36 +652,36 @@ const validateTextcard = (cardError, field, value) => {
     case "title": {
       // Title is too short
       if (value.length <= TEXTCARDS_CARD_TITLE_MIN_LENGTH) {
-        errorMessage = `The title should be longer than ${TEXTCARDS_CARD_TITLE_MIN_LENGTH} characters.`
+        errorMessage = `Title cannot be empty`
       }
       // Title is too long
       if (value.length >= TEXTCARDS_CARD_TITLE_MAX_LENGTH) {
-        errorMessage = `The title should be shorter than ${TEXTCARDS_CARD_TITLE_MAX_LENGTH} characters.`
+        errorMessage = `Title should be shorter than ${TEXTCARDS_CARD_TITLE_MAX_LENGTH} characters`
       }
       break
     }
     case "description": {
       // Description is too long
       if (value.length >= TEXTCARDS_CARD_DESCRIPTION_MAX_LENGTH) {
-        errorMessage = `The description should be shorter than ${TEXTCARDS_CARD_DESCRIPTION_MAX_LENGTH} characters.`
+        errorMessage = `The description should be shorter than ${TEXTCARDS_CARD_DESCRIPTION_MAX_LENGTH} characters (${value.length}/${TEXTCARDS_CARD_DESCRIPTION_MAX_LENGTH})`
       }
       break
     }
     case "linktext": {
       // Link text is too short
       if (value.length <= TEXTCARDS_CARD_LINKTEXT_MIN_LENGTH) {
-        errorMessage = `The description should be longer than ${TEXTCARDS_CARD_LINKTEXT_MIN_LENGTH} characters.`
+        errorMessage = `Link text cannot be empty`
       }
       // Link text is too long
       if (value.length >= TEXTCARDS_CARD_LINKTEXT_MAX_LENGTH) {
-        errorMessage = `The description should be shorter than ${TEXTCARDS_CARD_LINKTEXT_MAX_LENGTH} characters.`
+        errorMessage = `Text should be shorter than ${TEXTCARDS_CARD_LINKTEXT_MAX_LENGTH} characters.`
       }
       break
     }
     case "url": {
       // Url is too short
       if (value.length <= TEXTCARDS_CARD_URL_MIN_LENGTH) {
-        errorMessage = `The description should be longer than ${TEXTCARDS_CARD_URL_MIN_LENGTH} characters.`
+        errorMessage = `Please specify a URL for your card.`
       }
       break
     }