+
+
{links.map((link, linkIndex) => {
if (link.collection) {
return (
diff --git a/src/templates/homepage/HeroSection.jsx b/src/templates/homepage/HeroSection.jsx
index ddb5e2c8e..a44a98d52 100644
--- a/src/templates/homepage/HeroSection.jsx
+++ b/src/templates/homepage/HeroSection.jsx
@@ -8,6 +8,11 @@ import { forwardRef } from "react"
import { useFetchPreviewMedia } from "hooks/useFetchPreviewMedia"
+import {
+ DROPDOWN_ELEMENT_SECTION,
+ KEY_HIGHLIGHT_SECTION,
+} from "layouts/EditHomepage/constants"
+
import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
import { getClassNames } from "templates/utils/stylingUtils"
@@ -36,7 +41,7 @@ const HeroButton = ({ button }) => (
const HeroDropdownElem = ({ title }) => (
-
{title}
+ {title || DROPDOWN_ELEMENT_SECTION.title}
)
@@ -94,55 +99,41 @@ const HeroDropdown = ({ title, options, isActive, toggleDropdown }) => (
"is-centered",
])}
>
- {options
- ? options.map((option, index) =>
- option.title ? (
-
- ) : null
- )
- : null}
+ {options &&
+ options.map((option, index) => (
+
+ ))}
)
const KeyHighlightElem = ({ title, description }) => (
- <>
- {title || description ? (
-
-
- {/* Title */}
- {title ? (
-
- {title}
-
- ) : null}
- {/* Description */}
- {description ? (
-
- {description}
-
- ) : null}
-
-
- ) : null}
-
+
+
+ {/* Title */}
+
+ {title || KEY_HIGHLIGHT_SECTION.title}
+
+ {/* Description */}
+
+ {description || KEY_HIGHLIGHT_SECTION.description}
+
+
+
)
const KeyHighlights = ({ highlights }) => (
diff --git a/src/templates/homepage/InfobarSection.jsx b/src/templates/homepage/InfobarSection.jsx
index 9a582b292..a3b4d8f9f 100644
--- a/src/templates/homepage/InfobarSection.jsx
+++ b/src/templates/homepage/InfobarSection.jsx
@@ -104,10 +104,4 @@ TemplateInfobarSection.propTypes = {
sectionIndex: PropTypes.number.isRequired,
}
-TemplateInfobarSection.defaultProps = {
- title: undefined,
- subtitle: undefined,
- description: undefined,
-}
-
export default forwardRef(TemplateInfobarSection)
diff --git a/src/templates/homepage/InfopicLeftSection.jsx b/src/templates/homepage/InfopicLeftSection.jsx
index 7d1eb77ca..a85593cd1 100644
--- a/src/templates/homepage/InfopicLeftSection.jsx
+++ b/src/templates/homepage/InfopicLeftSection.jsx
@@ -12,7 +12,15 @@ import { getClassNames } from "templates/utils/stylingUtils"
*/
const TemplateInfopicLeftSection = (
- { title, subtitle, description, button, sectionIndex, imageUrl, imageAlt },
+ {
+ title,
+ subtitle,
+ description,
+ button,
+ sectionIndex,
+ image: imageUrl,
+ alt: imageAlt,
+ },
ref
) => {
const addDefaultSrc = (e) => {
@@ -243,13 +251,7 @@ TemplateInfopicLeftSection.propTypes = {
subtitle: PropTypes.string,
description: PropTypes.string,
button: PropTypes.string,
- imageUrl: PropTypes.string,
- imageAlt: PropTypes.string,
+ image: PropTypes.string,
+ alt: PropTypes.string,
sectionIndex: PropTypes.number.isRequired,
}
-
-TemplateInfopicLeftSection.defaultProps = {
- title: undefined,
- subtitle: undefined,
- description: undefined,
-}
diff --git a/src/templates/homepage/InfopicRightSection.jsx b/src/templates/homepage/InfopicRightSection.jsx
index b41dec6a0..ffa2cf54c 100644
--- a/src/templates/homepage/InfopicRightSection.jsx
+++ b/src/templates/homepage/InfopicRightSection.jsx
@@ -12,7 +12,15 @@ import { getClassNames } from "templates/utils/stylingUtils"
*/
const TemplateInfopicRightSection = (
- { title, subtitle, description, button, sectionIndex, imageUrl, imageAlt },
+ {
+ title,
+ subtitle,
+ description,
+ button,
+ sectionIndex,
+ image: imageUrl,
+ alt: imageAlt,
+ },
ref
) => {
const addDefaultSrc = (e) => {
@@ -243,13 +251,7 @@ TemplateInfopicRightSection.propTypes = {
subtitle: PropTypes.string,
description: PropTypes.string,
button: PropTypes.string,
- imageUrl: PropTypes.string,
- imageAlt: PropTypes.string,
+ image: PropTypes.string,
+ alt: PropTypes.string,
sectionIndex: PropTypes.number.isRequired,
}
-
-TemplateInfopicRightSection.defaultProps = {
- title: undefined,
- subtitle: undefined,
- description: undefined,
-}
diff --git a/src/types/homepage.ts b/src/types/homepage.ts
index 77c79f93a..d71d4e890 100644
--- a/src/types/homepage.ts
+++ b/src/types/homepage.ts
@@ -1,4 +1,4 @@
-import type { IterableElement } from "type-fest"
+import type { IterableElement, SetOptional } from "type-fest"
export type DropdownOption = {
title: string
@@ -49,7 +49,7 @@ export interface InfopicSection {
description?: string
button?: string
url?: string
- images?: string
+ image?: string
alt?: string
}
@@ -91,20 +91,14 @@ export type HomepageEditorHeroSection =
| EditorHeroHighlightsSection
export type HeroFrontmatterSection = { hero: HomepageEditorHeroSection }
-// TODO: add properties here instead of typing as `Record
`
-// we can find them in `HomepagePreview`
-export type ResourcesFrontmatterSection = { resources: Record }
+export type ResourcesFrontmatterSection = { resources: ResourcesSection }
-// TODO: add properties here instead of typing as `Record`
-// we can find them in `HomepagePreview`
export type InfopicFrontmatterSection = {
- infopic: Record
+ infopic: InfopicSection
}
-// TODO: add properties here instead of typing as `Record`
-// we can find them in `HomepagePreview`
export type InfobarFrontmatterSection = {
- infobar: Record
+ infobar: InfobarSection
}
export type EditorHomepageFrontmatterSection =
@@ -148,10 +142,22 @@ export interface EditorHomepageState {
export interface EditorHeroDropdownSection {
dropdown: {
- options: Partial[]
+ options: SetOptional[]
}
}
export interface EditorHeroHighlightsSection {
- key_highlights: []
+ key_highlights: SetOptional[]
+}
+
+export const isHighlightSection = (
+ heroSection: HomepageEditorHeroSection
+): heroSection is EditorHeroHighlightsSection => {
+ return !!(heroSection as EditorHeroHighlightsSection).key_highlights
+}
+
+export const isDropdownSection = (
+ heroSection: HomepageEditorHeroSection
+): heroSection is EditorHeroDropdownSection => {
+ return !!(heroSection as EditorHeroDropdownSection).dropdown
}
diff --git a/src/utils/validators.js b/src/utils/validators.js
index 127334f9d..e64819483 100644
--- a/src/utils/validators.js
+++ b/src/utils/validators.js
@@ -171,329 +171,304 @@ export const MEDIA_SETTINGS_TITLE_MIN_LENGTH = 6
export const MEDIA_SETTINGS_TITLE_MAX_LENGTH = 100
export const MEDIA_FILE_MAX_SIZE = 5242880 // 5MB -> 5242880B
+const validateAndSetSectionError = (validator) => (
+ sectionError,
+ sectionType,
+ field,
+ value
+) => {
+ const newSectionError = sectionError
+ const errorMessage = validator(field, value)
+ newSectionError[sectionType][field] = errorMessage
+ return newSectionError
+}
+
// Homepage Editor
// ==========
-// Returns new errors.highlights[index] object
-const validateHighlights = (highlightError, field, value) => {
- const newHighlightError = highlightError
- let errorMessage = ""
+const validateHighlight = (field, value) => {
switch (field) {
case "title": {
// Title is too short
- if (value.length < HIGHLIGHTS_TITLE_MIN_LENGTH) {
- errorMessage = `The title should be longer than ${HIGHLIGHTS_TITLE_MIN_LENGTH} characters.`
+ if (value.length <= HIGHLIGHTS_TITLE_MIN_LENGTH) {
+ return `The title should be longer than ${HIGHLIGHTS_TITLE_MIN_LENGTH} characters.`
}
// Title is too long
- if (value.length > HIGHLIGHTS_TITLE_MAX_LENGTH) {
- errorMessage = `The title should be shorter than ${HIGHLIGHTS_TITLE_MAX_LENGTH} characters.`
+ if (value.length >= HIGHLIGHTS_TITLE_MAX_LENGTH) {
+ return `The title should be shorter than ${HIGHLIGHTS_TITLE_MAX_LENGTH} characters.`
}
- break
+ return ""
}
case "description": {
// Description is too short
- if (value.length < HIGHLIGHTS_DESCRIPTION_MIN_LENGTH) {
- errorMessage = `The description should be longer than ${HIGHLIGHTS_DESCRIPTION_MIN_LENGTH} characters.`
+ if (value.length <= HIGHLIGHTS_DESCRIPTION_MIN_LENGTH) {
+ return `The description should be longer than ${HIGHLIGHTS_DESCRIPTION_MIN_LENGTH} characters.`
}
// Description is too long
- if (value.length > HIGHLIGHTS_DESCRIPTION_MAX_LENGTH) {
- errorMessage = `The description should be shorter than ${HIGHLIGHTS_DESCRIPTION_MAX_LENGTH} characters.`
+ if (value.length >= HIGHLIGHTS_DESCRIPTION_MAX_LENGTH) {
+ return `The description should be shorter than ${HIGHLIGHTS_DESCRIPTION_MAX_LENGTH} characters.`
}
- break
- }
- case "url": {
- // Permalink fails regex
- // if (!permalinkRegexTest.test(value)) {
- // errorMessage = `The url should start and end with slashes and contain
- // lowercase words separated by hyphens only.
- // `;
- // }
- // TO-DO: allow external links
- // TO-DO: Validate that link actually links to a page?
- break
+ return ""
}
default:
- break
+ return ""
}
+}
+
+// Returns new errors.highlights[index] object
+const validateHighlights = (highlightError, field, value) => {
+ const newHighlightError = highlightError
+ const errorMessage = validateHighlight(field, value)
newHighlightError[field] = errorMessage
return newHighlightError
}
-// Returns errors.dropdownElems[dropdownsIndex] object
-const validateDropdownElems = (dropdownElemError, field, value) => {
- const newDropdownElemError = dropdownElemError
- let errorMessage = ""
+const validateDropdownElem = (field, value) => {
switch (field) {
case "title": {
// Title is too short
- if (value.length < DROPDOWNELEM_TITLE_MIN_LENGTH) {
- errorMessage = `The title should be longer than ${DROPDOWNELEM_TITLE_MIN_LENGTH} characters.`
+ if (value.length <= DROPDOWNELEM_TITLE_MIN_LENGTH) {
+ return `The title should be longer than ${DROPDOWNELEM_TITLE_MIN_LENGTH} characters.`
}
// Title is too long
- if (value.length > DROPDOWNELEM_TITLE_MAX_LENGTH) {
- errorMessage = `The title should be shorter than ${DROPDOWNELEM_TITLE_MAX_LENGTH} characters.`
+ if (value.length >= DROPDOWNELEM_TITLE_MAX_LENGTH) {
+ return `The title should be shorter than ${DROPDOWNELEM_TITLE_MAX_LENGTH} characters.`
}
- break
- }
- case "url": {
- // Permalink fails regex
- // if (!permalinkRegexTest.test(value)) {
- // errorMessage = `The url should start and end with slashes and contain
- // lowercase words separated by hyphens only.
- // `;
- // }
- // TO-DO: allow external links
- // TO-DO: Validate that link actually links to a page?
- break
+ return ""
}
default:
- break
+ return ""
}
+}
+// Returns errors.dropdownElems[dropdownsIndex] object
+const validateDropdownElems = (dropdownElemError, field, value) => {
+ const newDropdownElemError = dropdownElemError
+ const errorMessage = validateDropdownElem(field, value)
newDropdownElemError[field] = errorMessage
return newDropdownElemError
}
-const validateHeroSection = (sectionError, sectionType, field, value) => {
- const newSectionError = sectionError
- let errorMessage = ""
+const validateHeroSectionFields = (field, value) => {
switch (field) {
case "title": {
// Title is too short
- if (value.length < HERO_TITLE_MIN_LENGTH) {
- errorMessage = `The title should be longer than ${HERO_TITLE_MIN_LENGTH} characters.`
+ if (value.length <= HERO_TITLE_MIN_LENGTH) {
+ return `The title should be longer than ${HERO_TITLE_MIN_LENGTH} characters.`
}
// Title is too long
- if (value.length > HERO_TITLE_MAX_LENGTH) {
- errorMessage = `The title should be shorter than ${HERO_TITLE_MAX_LENGTH} characters.`
+ if (value.length >= HERO_TITLE_MAX_LENGTH) {
+ return `The title should be shorter than ${HERO_TITLE_MAX_LENGTH} characters.`
}
- break
+ return ""
}
case "subtitle": {
// Subtitle is too short
- if (value.length < HERO_SUBTITLE_MIN_LENGTH) {
- errorMessage = `The subtitle should be longer than ${HERO_SUBTITLE_MIN_LENGTH} characters.`
+ if (value.length <= HERO_SUBTITLE_MIN_LENGTH) {
+ return `The subtitle should be longer than ${HERO_SUBTITLE_MIN_LENGTH} characters.`
}
// Subtitle is too long
- if (value.length > HERO_SUBTITLE_MAX_LENGTH) {
- errorMessage = `The subtitle should be shorter than ${HERO_SUBTITLE_MAX_LENGTH} characters.`
+ if (value.length >= HERO_SUBTITLE_MAX_LENGTH) {
+ return `The subtitle should be shorter than ${HERO_SUBTITLE_MAX_LENGTH} characters.`
}
- break
- }
- case "background": {
- errorMessage = ""
- break
- }
- case "button": {
- // // Button text is too short
- // if (value.length < HERO_BUTTON_TEXT_MIN_LENGTH) {
- // errorMessage = `The button text should be longer than ${HERO_BUTTON_TEXT_MIN_LENGTH} characters.`;
- // }
- // // Button text is too long
- // if (value.length > HERO_BUTTON_TEXT_MAX_LENGTH) {
- // errorMessage = `The button text should be shorter than ${HERO_BUTTON_TEXT_MAX_LENGTH} characters.`;
- // }
- break
+ return ""
}
case "dropdown": {
// Dropdown text is too short
- if (value.length < HERO_DROPDOWN_MIN_LENGTH) {
- errorMessage = `The dropdown text should be longer than ${HERO_DROPDOWN_MIN_LENGTH} characters.`
+ if (value.length <= HERO_DROPDOWN_MIN_LENGTH) {
+ return `The dropdown text should be longer than ${HERO_DROPDOWN_MIN_LENGTH} characters.`
}
// Dropdown text is too long
- if (value.length > HERO_DROPDOWN_MAX_LENGTH) {
- errorMessage = `The dropdown text should be shorter than ${HERO_DROPDOWN_MAX_LENGTH} characters.`
+ if (value.length >= HERO_DROPDOWN_MAX_LENGTH) {
+ return `The dropdown text should be shorter than ${HERO_DROPDOWN_MAX_LENGTH} characters.`
}
- break
- }
- case "url": {
- // if (!permalinkRegexTest.test(value)) {
- // errorMessage = `The url should start and end with slashes and contain
- // lowercase words separated by hyphens only.
- // `;
- // }
- // TO-DO: Allow external URLs
- break
+ return ""
}
default:
- break
+ return ""
}
- newSectionError[sectionType][field] = errorMessage
- return newSectionError
}
+const validateHeroSection = validateAndSetSectionError(
+ validateHeroSectionFields
+)
-const validateResourcesSection = (sectionError, sectionType, field, value) => {
- const newSectionError = sectionError
- let errorMessage = ""
+const validateResourcesSectionFields = (field, value) => {
switch (field) {
case "title": {
// Title is too short
- if (value.length < RESOURCES_TITLE_MIN_LENGTH) {
- errorMessage = `Title should be longer than ${RESOURCES_TITLE_MIN_LENGTH} characters.`
+ if (value.length <= RESOURCES_TITLE_MIN_LENGTH) {
+ return `Title should be longer than ${RESOURCES_TITLE_MIN_LENGTH} characters.`
}
// Title is too long
- if (value.length > RESOURCES_TITLE_MAX_LENGTH) {
- errorMessage = `Title should be shorter than ${RESOURCES_TITLE_MAX_LENGTH} characters.`
+ if (value.length >= RESOURCES_TITLE_MAX_LENGTH) {
+ return `Title should be shorter than ${RESOURCES_TITLE_MAX_LENGTH} characters.`
}
- break
+ return ""
}
case "subtitle": {
// Subtitle is too short
- if (value.length < RESOURCES_SUBTITLE_MIN_LENGTH) {
- errorMessage = `Subtitle should be longer than ${RESOURCES_SUBTITLE_MIN_LENGTH} characters.`
+ if (value.length <= RESOURCES_SUBTITLE_MIN_LENGTH) {
+ return `Subtitle should be longer than ${RESOURCES_SUBTITLE_MIN_LENGTH} characters.`
}
// Subtitle is too long
- if (value.length > RESOURCES_SUBTITLE_MAX_LENGTH) {
- errorMessage = `Subtitle should be shorter than ${RESOURCES_SUBTITLE_MAX_LENGTH} characters.`
+ if (value.length >= RESOURCES_SUBTITLE_MAX_LENGTH) {
+ return `Subtitle should be shorter than ${RESOURCES_SUBTITLE_MAX_LENGTH} characters.`
}
- break
+ return ""
}
case "button": {
// Button text is too short
- if (value.length < RESOURCES_BUTTON_TEXT_MIN_LENGTH) {
- errorMessage = `Button text should be longer than ${RESOURCES_BUTTON_TEXT_MIN_LENGTH} characters.`
+ if (value.length <= RESOURCES_BUTTON_TEXT_MIN_LENGTH) {
+ return `Button text should be longer than ${RESOURCES_BUTTON_TEXT_MIN_LENGTH} characters.`
}
// Button text is too long
- if (value.length > RESOURCES_BUTTON_TEXT_MAX_LENGTH) {
- errorMessage = `Button text should be shorter than ${RESOURCES_BUTTON_TEXT_MAX_LENGTH} characters.`
+ if (value.length >= RESOURCES_BUTTON_TEXT_MAX_LENGTH) {
+ return `Button text should be shorter than ${RESOURCES_BUTTON_TEXT_MAX_LENGTH} characters.`
}
- break
+ return ""
}
default:
- break
+ return ""
}
- newSectionError[sectionType][field] = errorMessage
- return newSectionError
}
-
-const validateInfobarSection = (sectionError, sectionType, field, value) => {
- const newSectionError = sectionError
- let errorMessage = ""
+const validateResourcesSection = validateAndSetSectionError(
+ validateResourcesSectionFields
+)
+const validateInfobarSectionFields = (field, value) => {
switch (field) {
case "title": {
// Title is too short
- if (value.length < INFOBAR_TITLE_MIN_LENGTH) {
- errorMessage = `Title should be longer than ${INFOBAR_TITLE_MIN_LENGTH} characters.`
+ if (value.length <= INFOBAR_TITLE_MIN_LENGTH) {
+ return `Title should be longer than ${INFOBAR_TITLE_MIN_LENGTH} characters.`
}
// Title is too long
- if (value.length > INFOBAR_TITLE_MAX_LENGTH) {
- errorMessage = `Title should be shorter than ${INFOBAR_TITLE_MAX_LENGTH} characters.`
+ if (value.length >= INFOBAR_TITLE_MAX_LENGTH) {
+ return `Title should be shorter than ${INFOBAR_TITLE_MAX_LENGTH} characters.`
}
- break
+ return ""
}
case "subtitle": {
// Subtitle is too short
- if (value.length < INFOBAR_SUBTITLE_MIN_LENGTH) {
- errorMessage = `Subtitle should be longer than ${INFOBAR_SUBTITLE_MIN_LENGTH} characters.`
+ if (value.length <= INFOBAR_SUBTITLE_MIN_LENGTH) {
+ return `Subtitle should be longer than ${INFOBAR_SUBTITLE_MIN_LENGTH} characters.`
}
// Subtitle is too long
- if (value.length > INFOBAR_SUBTITLE_MAX_LENGTH) {
- errorMessage = `Subtitle should be shorter than ${INFOBAR_SUBTITLE_MAX_LENGTH} characters.`
+ if (value.length >= INFOBAR_SUBTITLE_MAX_LENGTH) {
+ return `Subtitle should be shorter than ${INFOBAR_SUBTITLE_MAX_LENGTH} characters.`
}
- break
+ return ""
}
case "description": {
// Description is too short
- if (value.length < INFOBAR_DESCRIPTION_MIN_LENGTH) {
- errorMessage = `Ddescription should be longer than ${INFOBAR_DESCRIPTION_MIN_LENGTH} characters.`
+ if (value.length <= INFOBAR_DESCRIPTION_MIN_LENGTH) {
+ return `Description should be longer than ${INFOBAR_DESCRIPTION_MIN_LENGTH} characters.`
}
// Description is too long
- if (getLengthWithoutTags(value) > INFOBAR_DESCRIPTION_MAX_LENGTH) {
- errorMessage = `Description should be shorter than ${INFOBAR_DESCRIPTION_MAX_LENGTH} characters.`
+ if (getLengthWithoutTags(value) >= INFOBAR_DESCRIPTION_MAX_LENGTH) {
+ return `Description should be shorter than ${INFOBAR_DESCRIPTION_MAX_LENGTH} characters.`
}
- break
+ return ""
}
case "button": {
// Button text is too short
- if (value.length < INFOBAR_BUTTON_TEXT_MIN_LENGTH) {
- errorMessage = `Button text should be longer than ${INFOBAR_BUTTON_TEXT_MIN_LENGTH} characters.`
+ if (value.length <= INFOBAR_BUTTON_TEXT_MIN_LENGTH) {
+ return `Button text should be longer than ${INFOBAR_BUTTON_TEXT_MIN_LENGTH} characters.`
}
// Button text is too long
- if (value.length > INFOBAR_BUTTON_TEXT_MAX_LENGTH) {
- errorMessage = `Button text should be shorter than ${INFOBAR_BUTTON_TEXT_MAX_LENGTH} characters.`
+ if (value.length >= INFOBAR_BUTTON_TEXT_MAX_LENGTH) {
+ return `Button text should be shorter than ${INFOBAR_BUTTON_TEXT_MAX_LENGTH} characters.`
}
- break
- }
- case "url": {
- // if (!permalinkRegexTest.test(value)) {
- // errorMessage = `The url should start and end with slashes and contain
- // lowercase words separated by hyphens only.
- // `;
- // }
- // TO-DO: Allow external URLs
- break
+ return ""
}
default:
- break
+ return ""
}
- newSectionError[sectionType][field] = errorMessage
- return newSectionError
}
+const validateInfobarSection = validateAndSetSectionError(
+ validateInfobarSectionFields
+)
-const validateInfopicSection = (sectionError, sectionType, field, value) => {
- const newSectionError = sectionError
- let errorMessage = ""
+const validateInfopicSectionFields = (field, value) => {
switch (field) {
case "title": {
// Title is too short
- if (value.length < INFOPIC_TITLE_MIN_LENGTH) {
- errorMessage = `Title should be longer than ${INFOPIC_TITLE_MIN_LENGTH} characters.`
+ if (value.length <= INFOPIC_TITLE_MIN_LENGTH) {
+ return `Title should be longer than ${INFOPIC_TITLE_MIN_LENGTH} characters.`
}
// Title is too long
- if (value.length > INFOPIC_TITLE_MAX_LENGTH) {
- errorMessage = `Title should be shorter than ${INFOPIC_TITLE_MAX_LENGTH} characters.`
+ if (value.length >= INFOPIC_TITLE_MAX_LENGTH) {
+ return `Title should be shorter than ${INFOPIC_TITLE_MAX_LENGTH} characters.`
}
- break
+ return ""
}
case "subtitle": {
// Subtitle is too short
- if (value.length < INFOPIC_SUBTITLE_MIN_LENGTH) {
- errorMessage = `Subtitle should be longer than ${INFOPIC_SUBTITLE_MIN_LENGTH} characters.`
+ if (value.length <= INFOPIC_SUBTITLE_MIN_LENGTH) {
+ return `Subtitle should be longer than ${INFOPIC_SUBTITLE_MIN_LENGTH} characters.`
}
// Subtitle is too long
- if (value.length > INFOPIC_SUBTITLE_MAX_LENGTH) {
- errorMessage = `Subtitle should be shorter than ${INFOPIC_SUBTITLE_MAX_LENGTH} characters.`
+ if (value.length >= INFOPIC_SUBTITLE_MAX_LENGTH) {
+ return `Subtitle should be shorter than ${INFOPIC_SUBTITLE_MAX_LENGTH} characters.`
}
- break
+ return ""
}
case "description": {
// Description is too short
- if (value.length < INFOPIC_DESCRIPTION_MIN_LENGTH) {
- errorMessage = `Description should be longer than ${INFOPIC_DESCRIPTION_MIN_LENGTH} characters.`
+ if (value.length <= INFOPIC_DESCRIPTION_MIN_LENGTH) {
+ return `Description should be longer than ${INFOPIC_DESCRIPTION_MIN_LENGTH} characters.`
}
// Description is too long
- if (value.length > INFOPIC_DESCRIPTION_MAX_LENGTH) {
- errorMessage = `Description should be shorter than ${INFOPIC_DESCRIPTION_MAX_LENGTH} characters.`
+ if (value.length >= INFOPIC_DESCRIPTION_MAX_LENGTH) {
+ return `Description should be shorter than ${INFOPIC_DESCRIPTION_MAX_LENGTH} characters.`
}
- break
+ return ""
}
case "button": {
// Button text is too short
- if (value.length < INFOPIC_BUTTON_TEXT_MIN_LENGTH) {
- errorMessage = `Button text should be longer than ${INFOPIC_BUTTON_TEXT_MIN_LENGTH} characters.`
+ if (value.length <= INFOPIC_BUTTON_TEXT_MIN_LENGTH) {
+ return `Button text should be longer than ${INFOPIC_BUTTON_TEXT_MIN_LENGTH} characters.`
}
// Button text is too long
- if (value.length > INFOPIC_BUTTON_TEXT_MAX_LENGTH) {
- errorMessage = `Button text should be shorter than ${INFOPIC_BUTTON_TEXT_MAX_LENGTH} characters.`
+ if (value.length >= INFOPIC_BUTTON_TEXT_MAX_LENGTH) {
+ return `Button text should be shorter than ${INFOPIC_BUTTON_TEXT_MAX_LENGTH} characters.`
}
- break
+ return ""
}
case "alt": {
// Alt text is too short
- if (value.length < INFOPIC_ALT_TEXT_MIN_LENGTH) {
- errorMessage = `Image alt text should be longer than ${INFOPIC_ALT_TEXT_MIN_LENGTH} characters.`
+ if (value.length <= INFOPIC_ALT_TEXT_MIN_LENGTH) {
+ return `Image alt text should be longer than ${INFOPIC_ALT_TEXT_MIN_LENGTH} characters.`
}
// Alt text is too long
- if (value.length > INFOPIC_ALT_TEXT_MAX_LENGTH) {
- errorMessage = `Image alt text should be shorter than ${INFOPIC_ALT_TEXT_MAX_LENGTH} characters.`
+ if (value.length >= INFOPIC_ALT_TEXT_MAX_LENGTH) {
+ return `Image alt text should be shorter than ${INFOPIC_ALT_TEXT_MAX_LENGTH} characters.`
}
- break
+ return ""
}
default:
- break
+ return ""
}
- newSectionError[sectionType][field] = errorMessage
- return newSectionError
}
+const validateInfopicSection = validateAndSetSectionError(
+ validateInfopicSectionFields
+)
+const validateSection = (sectionType, field, value) => {
+ switch (sectionType) {
+ case "hero": {
+ return validateHeroSectionFields(field, value)
+ }
+ case "resources": {
+ return validateResourcesSectionFields(field, value)
+ }
+ case "infobar": {
+ return validateInfobarSectionFields(field, value)
+ }
+ case "infopic": {
+ return validateInfopicSectionFields(field, value)
+ }
+ default:
+ return ""
+ }
+}
const validateSections = (sectionError, sectionType, field, value) => {
let newSectionError = sectionError
switch (sectionType) {
@@ -677,15 +652,15 @@ const validateLink = (linkType, value) => {
switch (linkType) {
case "title":
if (value.length < LINK_TITLE_MIN_LENGTH) {
- errorMessage = `Title cannot be empty.`
+ errorMessage = `Name cannot be empty`
}
if (value.length > LINK_TITLE_MAX_LENGTH) {
- errorMessage = `Title should be shorter than ${LINK_TITLE_MAX_LENGTH} characters.`
+ errorMessage = `Name should be shorter than ${LINK_TITLE_MAX_LENGTH} characters`
}
break
case "url":
if (value.length < LINK_URL_MIN_LENGTH) {
- errorMessage = `Permalink cannot be empty.`
+ errorMessage = `Destination cannot be empty`
}
break
default:
@@ -963,8 +938,12 @@ export {
validateContactType,
validateLocationType,
validateLink,
+ validateHighlight,
validateHighlights,
+ validateHeroSectionFields,
+ validateDropdownElem,
validateDropdownElems,
+ validateSection,
validateSections,
validatePageSettings,
validateResourceSettings,
