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),