Field types: customBackground and defaultBackground are renamed as cu…

…stomAppearance and defaultAppearance
sharetribe · Feb 7, 2023 · 0173a51 · 0173a51
1 parent 1802ac3
commit 0173a51
Show file tree

Hide file tree

Showing 13 changed files with 27 additions and 27 deletions.
diff --git a/src/containers/PageBuilder/Field/Field.helpers.js b/src/containers/PageBuilder/Field/Field.helpers.js
@@ -113,7 +113,7 @@ const exposeColorValue = color => {
  * if backgroundImage contains imageAsset entity and
  * color contains hexadecimal string like "#FF0000" or "#F00".
  *
- * @param {Object} data E.g. "{ fieldType: 'customBackground', backgroundImage: imageAssetRef, color: '#000000', textColor: '#FFFFFF' }"
+ * @param {Object} data E.g. "{ fieldType: 'customAppearance', backgroundImage: imageAssetRef, color: '#000000', textColor: '#FFFFFF' }"
  * @returns object containing valid data.
  */
 export const exposeCustomBackgroundProps = data => {

diff --git a/src/containers/PageBuilder/Field/Field.js b/src/containers/PageBuilder/Field/Field.js
@@ -11,7 +11,7 @@ import { P } from '../Primitives/P';
 import { Code, CodeBlock } from '../Primitives/Code';
 import { Link } from '../Primitives/Link';
 import { MarkdownImage, FieldImage } from '../Primitives/Image';
-import { CustomBackground } from '../Primitives/CustomBackground';
+import { CustomAppearance } from '../Primitives/CustomAppearance';
 import { YoutubeEmbed } from '../Primitives/YoutubeEmbed';
 
 import renderMarkdown from '../markdownProcessor';
@@ -59,7 +59,7 @@ const defaultFieldComponents = {
   externalButtonLink: { component: Link, pickValidProps: exposeLinkProps },
   internalButtonLink: { component: Link, pickValidProps: exposeLinkProps },
   image: { component: FieldImage, pickValidProps: exposeImageProps },
-  customBackground: { component: CustomBackground, pickValidProps: exposeCustomBackgroundProps },
+  customAppearance: { component: CustomAppearance, pickValidProps: exposeCustomBackgroundProps },
   youtube: { component: YoutubeEmbed, pickValidProps: exposeYoutubeProps },
 
   // markdown content field is pretty complex component
@@ -210,8 +210,8 @@ const propTypeImage = shape({
   image: propTypeImageAsset.isRequired,
 });
 
-const propTypeCustomBackground = shape({
-  fieldType: oneOf(['customBackground']).isRequired,
+const propTypeCustomAppearance = shape({
+  fieldType: oneOf(['customAppearance']).isRequired,
   color: string,
   textColor: string,
   backgroundImage: propTypeImageAsset,
@@ -234,8 +234,8 @@ const propTypeEmptyObject = exact({});
 const propTypeTextEmptyObject = exact({
   fieldType: oneOf(TEXT_CONTENT).isRequired,
 });
-const propTypeDefaultBackground = shape({
-  fieldType: oneOf(['defaultBackground']).isRequired,
+const propTypeDefaultAppearance = shape({
+  fieldType: oneOf(['defaultAppearance']).isRequired,
 });
 const propTypeNone = shape({
   fieldType: oneOf(['none']).isRequired,
@@ -250,11 +250,11 @@ Field.propTypes = {
     propTypeTextContent,
     propTypeLink,
     propTypeImage,
-    propTypeCustomBackground,
+    propTypeCustomAppearance,
     propTypeYoutube,
     propTypeEmptyObject,
     propTypeTextEmptyObject,
-    propTypeDefaultBackground,
+    propTypeDefaultAppearance,
     propTypeNone,
   ]),
   options: propTypeOption,

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: 'customBackground', color: '#000000', textColor: 'white' },
+  background: { 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: 'customBackground', color: '#000000', textColor: 'white' },
+  background: { 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: 'customBackground', color: hexYellow },
+          background: { fieldType: 'customAppearance', color: hexYellow },
           title: { fieldType: 'heading2', content: '2 Columns' },
           ingress: {
             fieldType: 'paragraph',
@@ -231,7 +231,7 @@ export const PageWithBuildInSectionColumns = {
           sectionId: 'page-builder-columns2-section-3',
           numColumns: 3,
           background: {
-            fieldType: 'customBackground',
+            fieldType: 'customAppearance',
             backgroundImage: imagePlaceholder(1200, 800, '#b6f7f9'),
             alt: 'Background image',
             color: '#000000',

diff --git a/...ives/CustomBackground/CustomBackground.js → ...ives/CustomAppearance/CustomAppearance.js b/...ives/CustomBackground/CustomBackground.js → ...ives/CustomAppearance/CustomAppearance.js
@@ -4,10 +4,10 @@ import classNames from 'classnames';
 
 import { ResponsiveImage } from '../../../../components/index.js';
 
-import css from './CustomBackground.module.css';
+import css from './CustomAppearance.module.css';
 
 // BackgroundImage doesn't have enforcable aspectratio
-export const CustomBackground = React.forwardRef((props, ref) => {
+export const CustomAppearance = React.forwardRef((props, ref) => {
   const { className, rootClassName, color, alt, backgroundImage, sizes } = props;
 
   const getVariantNames = img => {
@@ -34,17 +34,17 @@ export const CustomBackground = React.forwardRef((props, ref) => {
   );
 });
 
-CustomBackground.displayName = 'CustomBackground';
+CustomAppearance.displayName = 'CustomAppearance';
 
-CustomBackground.defaultProps = {
+CustomAppearance.defaultProps = {
   rootClassName: null,
   className: null,
   alt: 'background image',
   sizes: null,
   backgroundImage: null,
 };
 
-CustomBackground.propTypes = {
+CustomAppearance.propTypes = {
   rootClassName: string,
   className: string,
   alt: string,

diff --git a/...tomBackground/CustomBackground.module.css → ...tomAppearance/CustomAppearance.module.css b/...tomBackground/CustomBackground.module.css → ...tomAppearance/CustomAppearance.module.css
diff --git a/src/containers/PageBuilder/Primitives/CustomAppearance/index.js b/src/containers/PageBuilder/Primitives/CustomAppearance/index.js
@@ -0,0 +1 @@
+export { CustomAppearance } from './CustomAppearance';
diff --git a/src/containers/PageBuilder/Primitives/CustomBackground/index.js b/src/containers/PageBuilder/Primitives/CustomBackground/index.js
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: 'customBackground', color: hexYellow },
+        background: { 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: 'customBackground', color: hexBlack, textColor: 'light' },
+        background: { fieldType: 'customAppearance', color: hexBlack, textColor: 'light' },
         title: { fieldType: 'heading2', content: 'One Column, No Blocks' },
         ingress: {
           fieldType: 'paragraph',
@@ -661,7 +661,7 @@ export const SectionColumns = {
         sectionId: 'cms-column-section-no-block-bg-img',
         numColumns: 1,
         background: {
-          fieldType: 'customBackground',
+          fieldType: 'customAppearance',
           backgroundImage: imagePlaceholder(400, 400),
           alt: 'Background image',
           color: '#000000',
@@ -752,7 +752,7 @@ export const SectionColumns = {
         sectionType: 'columns',
         sectionId: 'cms-column-section-2-dark',
         numColumns: 2,
-        background: { fieldType: 'customBackground', color: hexBlack, textColor: 'light' },
+        background: { 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
@@ -62,7 +62,7 @@ const SectionBuilder = props => {
       {sections.map((section, index) => {
         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 customBackground field
+        // By default, this information is stored to customAppearance field
         const isDarkTheme = section?.background?.textColor === 'white';
         const classes = classNames({ [css.darkTheme]: isDarkTheme });
 

diff --git a/src/containers/PageBuilder/SectionBuilder/SectionContainer/SectionContainer.js b/src/containers/PageBuilder/SectionBuilder/SectionContainer/SectionContainer.js
@@ -15,7 +15,7 @@ const SectionContainer = props => {
 
   return (
     <Tag className={classes} id={id} {...otherProps}>
-      {background?.fieldType === 'customBackground' ? (
+      {background?.fieldType === 'customAppearance' ? (
         <Field
           data={{ alt: `Background image for ${id}`, ...background }}
           className={className}

diff --git a/src/containers/PrivacyPolicyPage/FallbackPage.js b/src/containers/PrivacyPolicyPage/FallbackPage.js
@@ -18,7 +18,7 @@ export const fallbackSections = {
     {
       sectionType: 'article',
       sectionId: 'privacy',
-      background: { fieldType: 'customBackground', color: '#ffffff' },
+      background: { fieldType: 'customAppearance', color: '#ffffff' },
       title: { fieldType: 'heading1', content: 'Privacy Policy' },
       blocks: [
         {

diff --git a/src/containers/TermsOfServicePage/FallbackPage.js b/src/containers/TermsOfServicePage/FallbackPage.js
@@ -18,7 +18,7 @@ export const fallbackSections = {
     {
       sectionType: 'article',
       sectionId: 'terms',
-      background: { fieldType: 'customBackground', color: '#ffffff' },
+      background: { fieldType: 'customAppearance', color: '#ffffff' },
       title: { fieldType: 'heading1', content: 'Terms of Service' },
       blocks: [
         {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { CustomAppearance } from './CustomAppearance';