[templates/nextjs-sxa] SXA components has been reworked with supporting metadata approach

Author: Rmatkovsky

CHANGELOG.md

@@ -12,7 +12,8 @@ Our versioning strategy is as follows:
 ## Unreleased
 
 ### 🎉 New Features & Improvements
-* `[sitecore-jss-react]` `[sitecore-jss-nextjs]` Introduce FieldMetadata component and functionality to render it when metadata field property is provided in the field's layout data. In such case the field component is wrapped with metadata markup to enable chromes hydration when editing in pages. Ability to render metadata has been added to the field rendering components for react and nextjs. ([#1773](https://github.com/Sitecore/jss/pull/1773)) 
+* `[sitecore-jss-react]` `[sitecore-jss-nextjs]` Introduce FieldMetadata component and functionality to render it when metadata field property is provided in the field's layout data. In such case the field component is wrapped with metadata markup to enable chromes hydration when editing in pages. Ability to render metadata has been added to the field rendering components for react and nextjs. ([#1773](https://github.com/Sitecore/jss/pull/1773))
+* `[templates/nextjs-sxa]` A new approach `metadata` has been added in SXA components. ([#1788](https://github.com/Sitecore/jss/pull/1788))
 
 ### 🛠 Breaking Changes
 

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Image.tsx

@@ -10,7 +10,7 @@ import {
 } from '@sitecore-jss/sitecore-jss-nextjs';
 
 interface Fields {
-  Image: ImageField;
+  Image: ImageField & { metadata?: { [key: string]: unknown } };
   ImageCaption: Field<string>;
   TargetUrl: LinkField;
 }
@@ -31,19 +31,22 @@ const ImageDefault = (props: ImageProps): JSX.Element => (
 export const Banner = (props: ImageProps): JSX.Element => {
   const { sitecoreContext } = useSitecoreContext();
   const isPageEditing = sitecoreContext.pageEditing;
+  const isMetadataMode = sitecoreContext?.editMode === 'metadata';
   const classHeroBannerEmpty =
     isPageEditing && props.fields?.Image?.value?.class === 'scEmptyImage'
       ? 'hero-banner-empty'
       : '';
   const backgroundStyle = (props?.fields?.Image?.value?.src && {
     backgroundImage: `url('${props.fields.Image.value.src}')`,
   }) as CSSProperties;
-  const modifyImageProps = {
-    ...props.fields.Image,
-    editable: props?.fields?.Image?.editable
-      ?.replace(`width="${props?.fields?.Image?.value?.width}"`, 'width="100%"')
-      .replace(`height="${props?.fields?.Image?.value?.height}"`, 'height="100%"'),
-  };
+  const modifyImageProps = !isMetadataMode
+    ? {
+        ...props.fields.Image,
+        editable: props?.fields?.Image?.editable
+          ?.replace(`width="${props?.fields?.Image?.value?.width}"`, 'width="100%"')
+          .replace(`height="${props?.fields?.Image?.value?.height}"`, 'height="100%"'),
+      }
+    : { ...props.fields.Image };
   const id = props.params.RenderingIdentifier;
 
   return (

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Title.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
 import {
   Link,
-  Text,
-  useSitecoreContext,
   LinkField,
+  Text,
   TextField,
+  useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
+import React from 'react';
 
 interface Fields {
   data: {
@@ -17,7 +17,8 @@ interface Fields {
       field: {
         jsonValue: {
           value: string;
-          editable: string;
+          editable?: string;
+          metadata?: object;
         };
       };
     };
@@ -29,7 +30,8 @@ interface Fields {
       field: {
         jsonValue: {
           value: string;
-          editable: string;
+          editable?: string;
+          metadata?: object;
         };
       };
     };
@@ -61,17 +63,22 @@ const ComponentContent = (props: ComponentContentProps) => {
 export const Default = (props: TitleProps): JSX.Element => {
   const datasource = props.fields?.data?.datasource || props.fields?.data?.contextItem;
   const { sitecoreContext } = useSitecoreContext();
+  const isMetadataMode = sitecoreContext?.editMode === 'metadata';
 
   const text: TextField = {
     value: datasource?.field?.jsonValue?.value,
-    editable: datasource?.field?.jsonValue?.editable,
+    ...(isMetadataMode
+      ? { metadata: datasource?.field?.jsonValue?.metadata }
+      : { editable: datasource?.field?.jsonValue?.editable }),
   };
   const link: LinkField = {
     value: {
       href: datasource?.url?.path,
       title: datasource?.field?.jsonValue?.value,
-      editable: true,
     },
+    ...(isMetadataMode
+      ? { metadata: datasource?.field?.jsonValue?.metadata }
+      : { editable: datasource?.field?.jsonValue?.editable }),
   };
   if (sitecoreContext.pageState !== 'normal') {
     link.value.querystring = `sc_site=${datasource?.url?.siteName}`;
@@ -84,10 +91,10 @@ export const Default = (props: TitleProps): JSX.Element => {
   return (
     <ComponentContent styles={props.params.styles} id={props.params.RenderingIdentifier}>
       <>
-        {sitecoreContext.pageState === 'edit' ? (
+        {sitecoreContext.pageEditing ? (
           <Text field={text} />
         ) : (
-          <Link field={link}>
+          <Link field={link} editable={true}>
             <Text field={text} />
           </Link>
         )}