Change in page asset schema: ingress -> description

sharetribe · Feb 7, 2023 · c3587d9 · c3587d9
1 parent 3f771f3
commit c3587d9
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 46 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 ? (
         <header className={defaultClasses.sectionDetails}>
           <Field data={title} className={defaultClasses.title} options={fieldOptions} />
-          <Field data={ingress} className={defaultClasses.ingress} options={fieldOptions} />
+          <Field data={description} className={defaultClasses.description} options={fieldOptions} />
           <Field data={callToAction} className={defaultClasses.ctaButton} options={fieldOptions} />
         </header>
       ) : 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
@@ -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
@@ -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
@@ -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
@@ -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 ? (
         <header className={defaultClasses.sectionDetails}>
           <Field data={title} className={defaultClasses.title} options={fieldOptions} />
-          <Field data={ingress} className={defaultClasses.ingress} options={fieldOptions} />
+          <Field data={description} className={defaultClasses.description} options={fieldOptions} />
           <Field data={callToAction} className={defaultClasses.ctaButton} options={fieldOptions} />
         </header>
       ) : 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
@@ -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 ? (
         <header className={defaultClasses.sectionDetails}>
           <Field data={title} className={defaultClasses.title} options={fieldOptions} />
-          <Field data={ingress} className={defaultClasses.ingress} options={fieldOptions} />
+          <Field data={description} className={defaultClasses.description} options={fieldOptions} />
           <Field data={callToAction} className={defaultClasses.ctaButton} options={fieldOptions} />
         </header>
       ) : 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),