Field: rename background key as appearance

sharetribe · Feb 7, 2023 · f69694b · f69694b
1 parent 0173a51
commit f69694b
Show file tree

Hide file tree

Showing 14 changed files with 61 additions and 67 deletions.
diff --git a/src/containers/PageBuilder/Field/Field.helpers.js b/src/containers/PageBuilder/Field/Field.helpers.js
@@ -109,14 +109,14 @@ const exposeColorValue = color => {
 };
 
 /**
- * Exposes background props like "backgroundImage", "color" property,
+ * Exposes appearance props like "backgroundImage", "color" property,
  * if backgroundImage contains imageAsset entity and
  * color contains hexadecimal string like "#FF0000" or "#F00".
  *
  * @param {Object} data E.g. "{ fieldType: 'customAppearance', backgroundImage: imageAssetRef, color: '#000000', textColor: '#FFFFFF' }"
  * @returns object containing valid data.
  */
-export const exposeCustomBackgroundProps = data => {
+export const exposeCustomAppearanceProps = data => {
   const { backgroundImage, color, textColor, alt } = data;
   const { id, type, attributes } = backgroundImage || {};
 

diff --git a/src/containers/PageBuilder/Field/Field.helpers.test.js b/src/containers/PageBuilder/Field/Field.helpers.test.js
@@ -3,7 +3,7 @@ import {
   exposeContentString,
   exposeLinkProps,
   exposeImageProps,
-  exposeCustomBackgroundProps,
+  exposeCustomAppearanceProps,
   exposeYoutubeProps,
 } from './Field.helpers';
 
@@ -152,32 +152,32 @@ describe('Field helpers', () => {
     });
   });
 
-  describe('exposeCustomBackgroundProps(data)', () => {
+  describe('exposeCustomAppearanceProps(data)', () => {
     it('should return "color" prop containing valid hexadecimal color code', () => {
-      expect(exposeCustomBackgroundProps({ color: '#FFAA00' })).toEqual({ color: '#FFAA00' });
-      expect(exposeCustomBackgroundProps({ color: '#FA0' })).toEqual({ color: '#FA0' });
-      expect(exposeCustomBackgroundProps({ color: '#000000', foo: 'bar' })).toEqual({
+      expect(exposeCustomAppearanceProps({ color: '#FFAA00' })).toEqual({ color: '#FFAA00' });
+      expect(exposeCustomAppearanceProps({ color: '#FA0' })).toEqual({ color: '#FA0' });
+      expect(exposeCustomAppearanceProps({ color: '#000000', foo: 'bar' })).toEqual({
         color: '#000000',
       });
     });
     it('should return empty "color" prop if invalid hexadecimal color code was detected', () => {
-      expect(exposeCustomBackgroundProps({ color: '#FFAA0000' })).toEqual({});
-      expect(exposeCustomBackgroundProps({ color: 'FA0' })).toEqual({});
-      expect(exposeCustomBackgroundProps({ color: '000000' })).toEqual({});
-      expect(exposeCustomBackgroundProps({ color: '#XX0000' })).toEqual({});
-      expect(exposeCustomBackgroundProps({ color: '#FFAA0' })).toEqual({});
-      expect(exposeCustomBackgroundProps({ color: 'rgb(100, 100, 100)' })).toEqual({});
-      expect(exposeCustomBackgroundProps({ color: 'hsl(60 100% 50%)' })).toEqual({});
-      expect(exposeCustomBackgroundProps({ color: 'hwb(90 10% 10%)' })).toEqual({});
-      expect(exposeCustomBackgroundProps({ color: 'tomato' })).toEqual({});
+      expect(exposeCustomAppearanceProps({ color: '#FFAA0000' })).toEqual({});
+      expect(exposeCustomAppearanceProps({ color: 'FA0' })).toEqual({});
+      expect(exposeCustomAppearanceProps({ color: '000000' })).toEqual({});
+      expect(exposeCustomAppearanceProps({ color: '#XX0000' })).toEqual({});
+      expect(exposeCustomAppearanceProps({ color: '#FFAA0' })).toEqual({});
+      expect(exposeCustomAppearanceProps({ color: 'rgb(100, 100, 100)' })).toEqual({});
+      expect(exposeCustomAppearanceProps({ color: 'hsl(60 100% 50%)' })).toEqual({});
+      expect(exposeCustomAppearanceProps({ color: 'hwb(90 10% 10%)' })).toEqual({});
+      expect(exposeCustomAppearanceProps({ color: 'tomato' })).toEqual({});
     });
 
     it('should return "textColor" prop containing valid value (light or dark)', () => {
-      expect(exposeCustomBackgroundProps({ textColor: 'light' })).toEqual({ textColor: 'light' });
-      expect(exposeCustomBackgroundProps({ textColor: 'dark' })).toEqual({ textColor: 'dark' });
+      expect(exposeCustomAppearanceProps({ textColor: 'light' })).toEqual({ textColor: 'light' });
+      expect(exposeCustomAppearanceProps({ textColor: 'dark' })).toEqual({ textColor: 'dark' });
     });
     it('should return empty "textColor" prop if invalid hexadecimal color code was detected', () => {
-      expect(exposeCustomBackgroundProps({ textColor: 'blaa' })).toEqual({});
+      expect(exposeCustomAppearanceProps({ textColor: 'blaa' })).toEqual({});
     });
 
     it('should return "backgroundImage" prop containing valid imageAsset', () => {
@@ -200,8 +200,8 @@ describe('Field helpers', () => {
         },
       };
       const alt = 'gb';
-      expect(exposeCustomBackgroundProps({ backgroundImage })).toEqual({ backgroundImage });
-      expect(exposeCustomBackgroundProps({ backgroundImage, alt })).toEqual({
+      expect(exposeCustomAppearanceProps({ backgroundImage })).toEqual({ backgroundImage });
+      expect(exposeCustomAppearanceProps({ backgroundImage, alt })).toEqual({
         backgroundImage,
         alt,
       });
@@ -236,10 +236,10 @@ describe('Field helpers', () => {
       };
       const alt = 'gb';
       const backgroundImage = backgroundImageWrongType;
-      expect(exposeCustomBackgroundProps({ backgroundImage })).toEqual({});
-      expect(exposeCustomBackgroundProps({ backgroundImage, alt })).toEqual({});
-      expect(exposeCustomBackgroundProps({ backgroundImage, color: '#FFAA00' })).toEqual({});
-      expect(exposeCustomBackgroundProps({ backgroundImage: backgroundImageNoHeight })).toEqual({});
+      expect(exposeCustomAppearanceProps({ backgroundImage })).toEqual({});
+      expect(exposeCustomAppearanceProps({ backgroundImage, alt })).toEqual({});
+      expect(exposeCustomAppearanceProps({ backgroundImage, color: '#FFAA00' })).toEqual({});
+      expect(exposeCustomAppearanceProps({ backgroundImage: backgroundImageNoHeight })).toEqual({});
     });
 
     it('should return partial prop if one of the props is invalid', () => {
@@ -270,14 +270,14 @@ describe('Field helpers', () => {
         },
       };
 
-      const testA = exposeCustomBackgroundProps({
+      const testA = exposeCustomAppearanceProps({
         backgroundImage: backgroundImageNoHeight,
         color: '#FFAA00',
       });
       expect(testA).toEqual({ color: '#FFAA00' });
 
       const alt = 'gb';
-      const testB = exposeCustomBackgroundProps({ backgroundImage, alt, color: 'tomato' });
+      const testB = exposeCustomAppearanceProps({ backgroundImage, alt, color: 'tomato' });
       expect(testB).toEqual({ backgroundImage, alt });
     });
   });

diff --git a/src/containers/PageBuilder/Field/Field.js b/src/containers/PageBuilder/Field/Field.js
@@ -20,7 +20,7 @@ import {
   exposeContentAsChildren,
   exposeContentString,
   exposeLinkProps,
-  exposeCustomBackgroundProps,
+  exposeCustomAppearanceProps,
   exposeImageProps,
   exposeYoutubeProps,
 } from './Field.helpers';
@@ -59,7 +59,7 @@ const defaultFieldComponents = {
   externalButtonLink: { component: Link, pickValidProps: exposeLinkProps },
   internalButtonLink: { component: Link, pickValidProps: exposeLinkProps },
   image: { component: FieldImage, pickValidProps: exposeImageProps },
-  customAppearance: { component: CustomAppearance, pickValidProps: exposeCustomBackgroundProps },
+  customAppearance: { component: CustomAppearance, pickValidProps: exposeCustomAppearanceProps },
   youtube: { component: YoutubeEmbed, pickValidProps: exposeYoutubeProps },
 
   // markdown content field is pretty complex component

diff --git a/src/containers/PageBuilder/Markdown.example.js b/src/containers/PageBuilder/Markdown.example.js
@@ -517,7 +517,7 @@ const SectionLinksOnDarkMode = {
   sectionType: 'columns',
   sectionId: 'cms-section-3-dark',
   numColumns: 2,
-  background: { fieldType: 'customAppearance', color: '#000000', textColor: 'white' },
+  appearance: { fieldType: 'customAppearance', color: '#000000', textColor: 'white' },
   title: { fieldType: 'heading2', content: 'Links on dark theme' },
   blocks: [
     {
@@ -539,7 +539,7 @@ const SectionCodeOnDarkMode = {
   sectionType: 'columns',
   sectionId: 'cms-section-8',
   numColumns: 2,
-  background: { fieldType: 'customAppearance', color: '#000000', textColor: 'white' },
+  appearance: { fieldType: 'customAppearance', color: '#000000', textColor: 'white' },
   title: { fieldType: 'heading2', content: 'Inline code and Code blocks' },
   blocks: [
     {

diff --git a/src/containers/PageBuilder/PageBuilder.example.js b/src/containers/PageBuilder/PageBuilder.example.js
@@ -167,7 +167,7 @@ export const PageWithBuildInSectionColumns = {
           sectionType: 'columns',
           sectionId: 'page-builder-columns-section-1',
           numColumns: 2,
-          background: { fieldType: 'customAppearance', color: hexYellow },
+          appearance: { fieldType: 'customAppearance', color: hexYellow },
           title: { fieldType: 'heading2', content: '2 Columns' },
           ingress: {
             fieldType: 'paragraph',
@@ -230,7 +230,7 @@ export const PageWithBuildInSectionColumns = {
           sectionType: 'columns',
           sectionId: 'page-builder-columns2-section-3',
           numColumns: 3,
-          background: {
+          appearance: {
             fieldType: 'customAppearance',
             backgroundImage: imagePlaceholder(1200, 800, '#b6f7f9'),
             alt: 'Background image',

diff --git a/src/containers/PageBuilder/SectionBuilder/SectionArticle/SectionArticle.js b/src/containers/PageBuilder/SectionBuilder/SectionArticle/SectionArticle.js
@@ -18,7 +18,7 @@ const SectionArticle = props => {
     defaultClasses,
     title,
     ingress,
-    background,
+    appearance,
     callToAction,
     blocks,
     isInsideContainer,
@@ -38,7 +38,7 @@ const SectionArticle = props => {
       id={sectionId}
       className={className}
       rootClassName={rootClassName}
-      background={background}
+      appearance={appearance}
       options={fieldOptions}
     >
       {hasHeaderFields ? (
@@ -72,7 +72,7 @@ SectionArticle.defaultProps = {
   textClassName: null,
   title: null,
   ingress: null,
-  background: null,
+  appearance: null,
   callToAction: null,
   blocks: [],
   isInsideContainer: false,
@@ -91,7 +91,7 @@ SectionArticle.propTypes = {
   }),
   title: object,
   ingress: object,
-  background: object,
+  appearance: object,
   callToAction: object,
   blocks: arrayOf(object),
   isInsideContainer: bool,

diff --git a/src/containers/PageBuilder/SectionBuilder/SectionBuilder.example.js b/src/containers/PageBuilder/SectionBuilder/SectionBuilder.example.js
@@ -633,7 +633,7 @@ export const SectionColumns = {
         sectionType: 'columns',
         sectionId: 'cms-column-section-no-block',
         numColumns: 1,
-        background: { fieldType: 'customAppearance', color: hexYellow },
+        appearance: { fieldType: 'customAppearance', color: hexYellow },
         title: { fieldType: 'heading2', content: 'One Column, No Blocks' },
         ingress: {
           fieldType: 'paragraph',
@@ -644,7 +644,7 @@ export const SectionColumns = {
         sectionType: 'columns',
         sectionId: 'cms-column-section-no-block-dark',
         numColumns: 1,
-        background: { fieldType: 'customAppearance', color: hexBlack, textColor: 'light' },
+        appearance: { fieldType: 'customAppearance', color: hexBlack, textColor: 'light' },
         title: { fieldType: 'heading2', content: 'One Column, No Blocks' },
         ingress: {
           fieldType: 'paragraph',
@@ -660,7 +660,7 @@ export const SectionColumns = {
         sectionType: 'columns',
         sectionId: 'cms-column-section-no-block-bg-img',
         numColumns: 1,
-        background: {
+        appearance: {
           fieldType: 'customAppearance',
           backgroundImage: imagePlaceholder(400, 400),
           alt: 'Background image',
@@ -752,7 +752,7 @@ export const SectionColumns = {
         sectionType: 'columns',
         sectionId: 'cms-column-section-2-dark',
         numColumns: 2,
-        background: { fieldType: 'customAppearance', color: hexBlack, textColor: 'light' },
+        appearance: { fieldType: 'customAppearance', color: hexBlack, textColor: 'light' },
         title: { fieldType: 'heading2', content: '2 Columns, Dark' },
         ingress: {
           fieldType: 'paragraph',

diff --git a/src/containers/PageBuilder/SectionBuilder/SectionBuilder.js b/src/containers/PageBuilder/SectionBuilder/SectionBuilder.js
@@ -63,7 +63,7 @@ const SectionBuilder = props => {
         const Section = getComponent(section.sectionType);
         // If the default "dark" theme should be applied (when text color is white).
         // By default, this information is stored to customAppearance field
-        const isDarkTheme = section?.background?.textColor === 'white';
+        const isDarkTheme = section?.appearance?.textColor === 'white';
         const classes = classNames({ [css.darkTheme]: isDarkTheme });
 
         if (Section) {

diff --git a/src/containers/PageBuilder/SectionBuilder/SectionCarousel/SectionCarousel.js b/src/containers/PageBuilder/SectionBuilder/SectionCarousel/SectionCarousel.js
@@ -39,7 +39,7 @@ const SectionCarousel = props => {
     numColumns,
     title,
     ingress,
-    background,
+    appearance,
     callToAction,
     blocks,
     options,
@@ -104,7 +104,7 @@ const SectionCarousel = props => {
       id={sectionId}
       className={className}
       rootClassName={rootClassName}
-      background={background}
+      appearance={appearance}
       options={fieldOptions}
     >
       {hasHeaderFields ? (
@@ -155,8 +155,7 @@ SectionCarousel.defaultProps = {
   numColumns: 1,
   title: null,
   ingress: null,
-  background: null,
-  backgroundImage: null,
+  appearance: null,
   callToAction: null,
   blocks: [],
   options: null,
@@ -175,8 +174,7 @@ SectionCarousel.propTypes = {
   numColumns: number,
   title: object,
   ingress: object,
-  background: object,
-  backgroundImage: object,
+  appearance: object,
   callToAction: object,
   blocks: arrayOf(object),
   options: propTypeOption,

diff --git a/src/containers/PageBuilder/SectionBuilder/SectionColumns/SectionColumns.js b/src/containers/PageBuilder/SectionBuilder/SectionColumns/SectionColumns.js
@@ -35,7 +35,7 @@ const SectionColumns = props => {
     numColumns,
     title,
     ingress,
-    background,
+    appearance,
     callToAction,
     blocks,
     isInsideContainer,
@@ -55,7 +55,7 @@ const SectionColumns = props => {
       id={sectionId}
       className={className}
       rootClassName={rootClassName}
-      background={background}
+      appearance={appearance}
       options={fieldOptions}
     >
       {hasHeaderFields ? (
@@ -95,8 +95,7 @@ SectionColumns.defaultProps = {
   numColumns: 1,
   title: null,
   ingress: null,
-  background: null,
-  backgroundImage: null,
+  appearance: null,
   callToAction: null,
   blocks: [],
   isInsideContainer: false,
@@ -116,8 +115,7 @@ SectionColumns.propTypes = {
   numColumns: number,
   title: object,
   ingress: object,
-  background: object,
-  backgroundImage: object,
+  appearance: object,
   callToAction: object,
   blocks: arrayOf(object),
   isInsideContainer: bool,

diff --git a/src/containers/PageBuilder/SectionBuilder/SectionContainer/SectionContainer.js b/src/containers/PageBuilder/SectionBuilder/SectionContainer/SectionContainer.js
@@ -9,15 +9,15 @@ import css from './SectionContainer.module.css';
 // This component can be used to wrap some common styles and features of Section-level components.
 // E.g: const SectionHero = props => (<SectionContainer><H1>Hello World!</H1></SectionContainer>);
 const SectionContainer = props => {
-  const { className, rootClassName, id, as, children, background, options, ...otherProps } = props;
+  const { className, rootClassName, id, as, children, appearance, options, ...otherProps } = props;
   const Tag = as || 'section';
   const classes = classNames(rootClassName || css.root, className);
 
   return (
     <Tag className={classes} id={id} {...otherProps}>
-      {background?.fieldType === 'customAppearance' ? (
+      {appearance?.fieldType === 'customAppearance' ? (
         <Field
-          data={{ alt: `Background image for ${id}`, ...background }}
+          data={{ alt: `Background image for ${id}`, ...appearance }}
           className={className}
           options={options}
         />
@@ -37,15 +37,15 @@ SectionContainer.defaultProps = {
   className: null,
   as: 'div',
   children: null,
-  background: null,
+  appearance: null,
 };
 
 SectionContainer.propTypes = {
   rootClassName: string,
   className: string,
   as: string,
   children: node,
-  background: object,
+  appearance: object,
   options: propTypeOption,
 };