diff --git a/src/containers/PageBuilder/Field/Field.js b/src/containers/PageBuilder/Field/Field.js index 8792976dde..c16d68bc89 100644 --- a/src/containers/PageBuilder/Field/Field.js +++ b/src/containers/PageBuilder/Field/Field.js @@ -61,6 +61,8 @@ const defaultFieldComponents = { heading5: { component: H5, pickValidProps: exposeContentAsChildren, omitInvalidPropsWarning }, heading6: { component: H6, pickValidProps: exposeContentAsChildren, omitInvalidPropsWarning }, paragraph: { + // By default, page asset schema uses 'paragraph' field type only in the context of + // lead paragraph aka ingress component: Ingress, pickValidProps: exposeContentAsChildren, omitInvalidPropsWarning, diff --git a/src/containers/PageBuilder/Markdown.example.js b/src/containers/PageBuilder/Markdown.example.js index e8b7304278..4de065c454 100644 --- a/src/containers/PageBuilder/Markdown.example.js +++ b/src/containers/PageBuilder/Markdown.example.js @@ -32,7 +32,7 @@ const SectionHeadings = { sectionId: 'cms-section-1', numColumns: 2, title: { fieldType: 'heading2', content: 'Headings' }, - ingress: { + description: { fieldType: 'heading2', content: 'Lorem ipsum dolor sit amet consectetur adepisci elit...', }, diff --git a/src/containers/PageBuilder/PageBuilder.example.js b/src/containers/PageBuilder/PageBuilder.example.js index 21093067d3..d6c5ade16d 100644 --- a/src/containers/PageBuilder/PageBuilder.example.js +++ b/src/containers/PageBuilder/PageBuilder.example.js @@ -147,7 +147,7 @@ export const PageWithBuildInSectionColumns = { sectionId: 'page-builder-columns-section-0', numColumns: 1, title: { fieldType: 'heading2', content: 'One Column' }, - ingress: { + description: { fieldType: 'paragraph', content: 'Lorem ipsum dolor sit amet consectetur adepisci elit...', }, @@ -169,7 +169,7 @@ export const PageWithBuildInSectionColumns = { numColumns: 2, appearance: { fieldType: 'customAppearance', backgroundColor: hexYellow }, title: { fieldType: 'heading2', content: '2 Columns' }, - ingress: { + description: { fieldType: 'paragraph', content: 'Lorem ipsum dolor sit amet consectetur adepisci elit...', }, @@ -199,7 +199,7 @@ export const PageWithBuildInSectionColumns = { sectionId: 'page-builder-columns-section-2', numColumns: 2, title: { fieldType: 'heading2', content: '2 Columns' }, - ingress: { + description: { fieldType: 'paragraph', content: 'Lorem ipsum dolor sit amet consectetur adepisci elit...', }, @@ -238,7 +238,7 @@ export const PageWithBuildInSectionColumns = { textColor: 'white', }, title: { fieldType: 'heading2', content: '3 Columns' }, - ingress: { + description: { fieldType: 'paragraph', content: 'Lorem ipsum dolor sit amet consectetur adepisci elit...', }, @@ -280,7 +280,7 @@ export const PageWithBuildInSectionColumns = { sectionId: 'page-builder-columns2-section-4', numColumns: 4, title: { fieldType: 'heading2', content: '4 Columns' }, - ingress: { + description: { fieldType: 'paragraph', content: 'Lorem ipsum dolor sit amet consectetur adepisci elit...', }, diff --git a/src/containers/PageBuilder/Primitives/Ingress/Ingress.js b/src/containers/PageBuilder/Primitives/Ingress/Ingress.js index 0e90600c24..da7951e5f7 100644 --- a/src/containers/PageBuilder/Primitives/Ingress/Ingress.js +++ b/src/containers/PageBuilder/Primitives/Ingress/Ingress.js @@ -4,6 +4,8 @@ import classNames from 'classnames'; import css from './Ingress.module.css'; +// Ingress: a lead paragraph or an opening paragraph +// It's usually between a headline and the article export const Ingress = React.forwardRef((props, ref) => { const { className, rootClassName, ...otherProps } = props; const classes = classNames(rootClassName || css.ingress, className); diff --git a/src/containers/PageBuilder/SectionBuilder/SectionArticle/SectionArticle.js b/src/containers/PageBuilder/SectionBuilder/SectionArticle/SectionArticle.js index 2f31f7577b..7ed58e6637 100644 --- a/src/containers/PageBuilder/SectionBuilder/SectionArticle/SectionArticle.js +++ b/src/containers/PageBuilder/SectionBuilder/SectionArticle/SectionArticle.js @@ -17,7 +17,7 @@ const SectionArticle = props => { rootClassName, defaultClasses, title, - ingress, + description, appearance, callToAction, blocks, @@ -30,7 +30,7 @@ const SectionArticle = props => { const fieldComponents = options?.fieldComponents; const fieldOptions = { fieldComponents }; - const hasHeaderFields = hasDataInFields([title, ingress, callToAction], fieldOptions); + const hasHeaderFields = hasDataInFields([title, description, callToAction], fieldOptions); const hasBlocks = blocks?.length > 0; return ( @@ -44,7 +44,7 @@ const SectionArticle = props => { {hasHeaderFields ? (
- +
) : null} @@ -71,7 +71,7 @@ SectionArticle.defaultProps = { defaultClasses: null, textClassName: null, title: null, - ingress: null, + description: null, appearance: null, callToAction: null, blocks: [], @@ -86,11 +86,11 @@ SectionArticle.propTypes = { defaultClasses: shape({ sectionDetails: string, title: string, - ingress: string, + description: string, ctaButton: string, }), title: object, - ingress: object, + description: object, appearance: object, callToAction: object, blocks: arrayOf(object), diff --git a/src/containers/PageBuilder/SectionBuilder/SectionBuilder.example.js b/src/containers/PageBuilder/SectionBuilder/SectionBuilder.example.js index 5ae875363f..bfc5a2c4b4 100644 --- a/src/containers/PageBuilder/SectionBuilder/SectionBuilder.example.js +++ b/src/containers/PageBuilder/SectionBuilder/SectionBuilder.example.js @@ -38,7 +38,7 @@ export const SectionArticle = { fieldType: 'heading1', content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.', }, - ingress: { + description: { fieldType: 'paragraph', content: 'Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.', @@ -105,7 +105,7 @@ export const SectionFeatures = { fieldType: 'heading1', content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.', }, - ingress: { + description: { fieldType: 'paragraph', content: 'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit.', @@ -189,7 +189,7 @@ export const SectionCarousel = { fieldType: 'heading2', content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.', }, - ingress: { + description: { fieldType: 'paragraph', content: 'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit.', @@ -409,7 +409,7 @@ export const SectionCarousel = { fieldType: 'heading2', content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.', }, - ingress: { + description: { fieldType: 'paragraph', content: 'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit.', @@ -635,7 +635,7 @@ export const SectionColumns = { numColumns: 1, appearance: { fieldType: 'customAppearance', backgroundColor: hexYellow }, title: { fieldType: 'heading2', content: 'One Column, No Blocks' }, - ingress: { + description: { fieldType: 'paragraph', content: 'Lorem ipsum dolor sit amet consectetur adepisci elit...', }, @@ -650,7 +650,7 @@ export const SectionColumns = { textColor: 'light', }, title: { fieldType: 'heading2', content: 'One Column, No Blocks' }, - ingress: { + description: { fieldType: 'paragraph', content: 'Lorem ipsum dolor sit amet consectetur adepisci elit...', }, @@ -672,7 +672,7 @@ export const SectionColumns = { textColor: 'white', }, title: { fieldType: 'heading2', content: 'One Column, No Blocks, Bg Image' }, - ingress: { + description: { fieldType: 'paragraph', content: 'Lorem ipsum dolor sit amet consectetur adepisci elit...', }, @@ -687,7 +687,7 @@ export const SectionColumns = { sectionId: 'cms-column-section-1', numColumns: 1, title: { fieldType: 'heading2', content: 'One Column' }, - ingress: { + description: { fieldType: 'paragraph', content: 'Lorem ipsum dolor sit amet consectetur adepisci elit...', }, @@ -717,7 +717,7 @@ export const SectionColumns = { sectionId: 'cms-column-section-2', numColumns: 2, title: { fieldType: 'heading2', content: '2 Columns' }, - ingress: { + description: { fieldType: 'paragraph', content: 'Lorem ipsum dolor sit amet consectetur adepisci elit...', }, @@ -762,7 +762,7 @@ export const SectionColumns = { textColor: 'light', }, title: { fieldType: 'heading2', content: '2 Columns, Dark' }, - ingress: { + description: { fieldType: 'paragraph', content: 'Lorem ipsum dolor sit amet consectetur adepisci elit...', }, @@ -802,7 +802,7 @@ export const SectionColumns = { sectionId: 'cms-column-section-3', numColumns: 3, title: { fieldType: 'heading2', content: '3 Columns' }, - ingress: { + description: { fieldType: 'paragraph', content: 'Lorem ipsum dolor sit amet consectetur adepisci elit...', }, @@ -832,7 +832,7 @@ export const SectionColumns = { sectionId: 'cms-column-section-4', numColumns: 4, title: { fieldType: 'heading2', content: '4 Columns' }, - ingress: { + description: { fieldType: 'paragraph', content: 'Lorem ipsum dolor sit amet consectetur adepisci elit...', }, @@ -868,7 +868,7 @@ export const SectionColumns = { sectionId: 'cms-column-section-5', numColumns: 4, title: { fieldType: 'heading2', content: '4 Columns 5 blocks' }, - ingress: { fieldType: 'paragraph', content: 'Portrait images (400x500)' }, + description: { fieldType: 'paragraph', content: 'Portrait images (400x500)' }, blocks: [ { blockType: 'defaultBlock', @@ -907,7 +907,7 @@ export const SectionColumns = { sectionId: 'cms-column-section-6', numColumns: 4, title: { fieldType: 'heading2', content: '4 Columns 3 blocks' }, - ingress: { fieldType: 'paragraph', content: 'Landscape images (400x300)' }, + description: { fieldType: 'paragraph', content: 'Landscape images (400x300)' }, blocks: [ { blockType: 'defaultBlock', diff --git a/src/containers/PageBuilder/SectionBuilder/SectionBuilder.js b/src/containers/PageBuilder/SectionBuilder/SectionBuilder.js index d12458f8b9..be66835334 100644 --- a/src/containers/PageBuilder/SectionBuilder/SectionBuilder.js +++ b/src/containers/PageBuilder/SectionBuilder/SectionBuilder.js @@ -21,7 +21,7 @@ import css from './SectionBuilder.module.css'; const DEFAULT_CLASSES = { sectionDetails: css.sectionDetails, title: css.title, - ingress: css.ingress, + description: css.description, ctaButton: css.ctaButton, blockContainer: css.blockContainer, }; diff --git a/src/containers/PageBuilder/SectionBuilder/SectionBuilder.module.css b/src/containers/PageBuilder/SectionBuilder/SectionBuilder.module.css index 84e1e3d94f..5e990a6fc4 100644 --- a/src/containers/PageBuilder/SectionBuilder/SectionBuilder.module.css +++ b/src/containers/PageBuilder/SectionBuilder/SectionBuilder.module.css @@ -127,7 +127,7 @@ max-width: 30ch; } -.ingress { +.description { composes: align; max-width: 65ch; } diff --git a/src/containers/PageBuilder/SectionBuilder/SectionCarousel/SectionCarousel.js b/src/containers/PageBuilder/SectionBuilder/SectionCarousel/SectionCarousel.js index 8424e1f6d3..80f81a4626 100644 --- a/src/containers/PageBuilder/SectionBuilder/SectionCarousel/SectionCarousel.js +++ b/src/containers/PageBuilder/SectionBuilder/SectionCarousel/SectionCarousel.js @@ -38,7 +38,7 @@ const SectionCarousel = props => { defaultClasses, numColumns, title, - ingress, + description, appearance, callToAction, blocks, @@ -69,7 +69,7 @@ const SectionCarousel = props => { const fieldComponents = options?.fieldComponents; const fieldOptions = { fieldComponents }; - const hasHeaderFields = hasDataInFields([title, ingress, callToAction], fieldOptions); + const hasHeaderFields = hasDataInFields([title, description, callToAction], fieldOptions); const onSlideLeft = e => { var slider = window.document.getElementById(sliderId); @@ -110,7 +110,7 @@ const SectionCarousel = props => { {hasHeaderFields ? (
- +
) : null} @@ -154,7 +154,7 @@ SectionCarousel.defaultProps = { textClassName: null, numColumns: 1, title: null, - ingress: null, + description: null, appearance: null, callToAction: null, blocks: [], @@ -168,12 +168,12 @@ SectionCarousel.propTypes = { defaultClasses: shape({ sectionDetails: string, title: string, - ingress: string, + description: string, ctaButton: string, }), numColumns: number, title: object, - ingress: object, + description: object, appearance: object, callToAction: object, blocks: arrayOf(object), diff --git a/src/containers/PageBuilder/SectionBuilder/SectionColumns/SectionColumns.js b/src/containers/PageBuilder/SectionBuilder/SectionColumns/SectionColumns.js index 80884697e1..250bc37daa 100644 --- a/src/containers/PageBuilder/SectionBuilder/SectionColumns/SectionColumns.js +++ b/src/containers/PageBuilder/SectionBuilder/SectionColumns/SectionColumns.js @@ -34,7 +34,7 @@ const SectionColumns = props => { defaultClasses, numColumns, title, - ingress, + description, appearance, callToAction, blocks, @@ -47,7 +47,7 @@ const SectionColumns = props => { const fieldComponents = options?.fieldComponents; const fieldOptions = { fieldComponents }; - const hasHeaderFields = hasDataInFields([title, ingress, callToAction], fieldOptions); + const hasHeaderFields = hasDataInFields([title, description, callToAction], fieldOptions); const hasBlocks = blocks?.length > 0; return ( @@ -61,7 +61,7 @@ const SectionColumns = props => { {hasHeaderFields ? (
- +
) : null} @@ -94,7 +94,7 @@ SectionColumns.defaultProps = { textClassName: null, numColumns: 1, title: null, - ingress: null, + description: null, appearance: null, callToAction: null, blocks: [], @@ -109,12 +109,12 @@ SectionColumns.propTypes = { defaultClasses: shape({ sectionDetails: string, title: string, - ingress: string, + description: string, ctaButton: string, }), numColumns: number, title: object, - ingress: object, + description: object, appearance: object, callToAction: object, blocks: arrayOf(object), diff --git a/src/containers/PageBuilder/SectionBuilder/SectionFeatures/SectionFeatures.js b/src/containers/PageBuilder/SectionBuilder/SectionFeatures/SectionFeatures.js index bd7c702e64..0b879737f8 100644 --- a/src/containers/PageBuilder/SectionBuilder/SectionFeatures/SectionFeatures.js +++ b/src/containers/PageBuilder/SectionBuilder/SectionFeatures/SectionFeatures.js @@ -21,7 +21,7 @@ const SectionFeatures = props => { rootClassName, defaultClasses, title, - ingress, + description, appearance, callToAction, blocks, @@ -34,7 +34,7 @@ const SectionFeatures = props => { const fieldComponents = options?.fieldComponents; const fieldOptions = { fieldComponents }; - const hasHeaderFields = hasDataInFields([title, ingress, callToAction], fieldOptions); + const hasHeaderFields = hasDataInFields([title, description, callToAction], fieldOptions); const hasBlocks = blocks?.length > 0; return ( @@ -48,7 +48,7 @@ const SectionFeatures = props => { {hasHeaderFields ? (
- +
) : null} @@ -80,7 +80,7 @@ SectionFeatures.defaultProps = { defaultClasses: null, textClassName: null, title: null, - ingress: null, + description: null, appearance: null, callToAction: null, blocks: [], @@ -95,11 +95,11 @@ SectionFeatures.propTypes = { defaultClasses: shape({ sectionDetails: string, title: string, - ingress: string, + description: string, ctaButton: string, }), title: object, - ingress: object, + description: object, appearance: object, callToAction: object, blocks: arrayOf(object),