[Next.js][RAV] Add 'The component is hidden' text to Hidden Rendering component

CHANGELOG.md

@@ -31,11 +31,12 @@ Our versioning strategy is as follows:
 * `[templates/nextjs-xmcloud]` `[sitecore-jss]` A/B testing and component-level personalization support. ([#1844](https://github.com/Sitecore/jss/pull/1844))([#1847](https://github.com/Sitecore/jss/pull/1847))([#1848](https://github.com/Sitecore/jss/pull/1848))
 * `[sitecore-jss]` `[nextjs-xmcloud]` DictionaryService can now use a `site` GraphQL query instead of `search` one to improve performance. This is currently only available for XMCloud deployments and is enabled with `nextjs-xmcloud` add-on by default ([#1804](https://github.com/Sitecore/jss/pull/1804))([#1846](https://github.com/Sitecore/jss/pull/1846))([commit](https://github.com/Sitecore/jss/commit/5813a2df8ad6a9ee63dd74d5f206ed4b4f758753))([commit](https://github.com/Sitecore/jss/commit/d0ea3ac02c78343b5dd60277dbf7403410794a49))([commit](https://github.com/Sitecore/jss/commit/307b905ed60d7fff44b2dc799fd78c0842af6fbd))([commit](https://github.com/Sitecore/jss/commit/66164a42263aac8b55f0c5e47eda4bd4d7a72e87))
 * `[templates/nextjs-sxa]` SXA components now use the NextImage component instead of the Image component from JSS lib for image optimization ([#1843](https://github.com/Sitecore/jss/pull/1843))([#1850](https://github.com/Sitecore/jss/pull/1850))
+* `[sitecore-jss-react]` `[sitecore-jss-nextjs]` `[sitecore-jss-angular]` `[sitecore-jss-vue]` The default Hidden Rendering component now contains the text 'The component is hidden' ([#1857](https://github.com/Sitecore/jss/pull/1857))
 
 
 ### 🛠 Breaking Change
 
-* Editing Integration Support: ([#1776](https://github.com/Sitecore/jss/pull/1776))([#1792](https://github.com/Sitecore/jss/pull/1792))([#1773](https://github.com/Sitecore/jss/pull/1773))([#1797](https://github.com/Sitecore/jss/pull/1797))([#1800](https://github.com/Sitecore/jss/pull/1800))([#1803](https://github.com/Sitecore/jss/pull/1803))([#1806](https://github.com/Sitecore/jss/pull/1806))([#1809](https://github.com/Sitecore/jss/pull/1809))([#1814](https://github.com/Sitecore/jss/pull/1814))([#1816](https://github.com/Sitecore/jss/pull/1816))([#1819](https://github.com/Sitecore/jss/pull/1819))([#1828](https://github.com/Sitecore/jss/pull/1828))([#1835](https://github.com/Sitecore/jss/pull/1835))([#1849](https://github.com/Sitecore/jss/pull/1849))([#1831](https://github.com/Sitecore/jss/pull/1831))([#1853](https://github.com/Sitecore/jss/pull/1853))([#1854](https://github.com/Sitecore/jss/pull/1854))
+* Editing Integration Support: ([#1776](https://github.com/Sitecore/jss/pull/1776))([#1792](https://github.com/Sitecore/jss/pull/1792))([#1773](https://github.com/Sitecore/jss/pull/1773))([#1797](https://github.com/Sitecore/jss/pull/1797))([#1800](https://github.com/Sitecore/jss/pull/1800))([#1803](https://github.com/Sitecore/jss/pull/1803))([#1806](https://github.com/Sitecore/jss/pull/1806))([#1809](https://github.com/Sitecore/jss/pull/1809))([#1814](https://github.com/Sitecore/jss/pull/1814))([#1816](https://github.com/Sitecore/jss/pull/1816))([#1819](https://github.com/Sitecore/jss/pull/1819))([#1828](https://github.com/Sitecore/jss/pull/1828))([#1835](https://github.com/Sitecore/jss/pull/1835))([#1849](https://github.com/Sitecore/jss/pull/1849))([#1831](https://github.com/Sitecore/jss/pull/1831))([#1853](https://github.com/Sitecore/jss/pull/1853))([#1854](https://github.com/Sitecore/jss/pull/1854))([#1857](https://github.com/Sitecore/jss/pull/1857))
   * `[sitecore-jss-react]` Introduces `PlaceholderMetadata` component which supports the hydration of chromes on Pages by rendering  the components and placeholders with required metadata.
   * `[sitecore-jss]` Chromes are hydrated based on the basis of new `editMode` property derived from LayoutData, which is defined as an enum consisting of `metadata` and `chromes`.
   * `ComponentConsumerProps` is removed. You might need to reuse `WithSitecoreContextProps` type.

packages/sitecore-jss-angular/src/components/hidden-rendering.component.spec.ts

@@ -43,7 +43,8 @@ describe('<sc-hidden-rendering />', () => {
     const el = de.nativeElement.getElementsByTagName('sc-hidden-rendering')[0];
     expect(el).toBeDefined();
     expect(el.getAttribute('style')).toEqual(
-      'background-image: linear-gradient(45deg, rgb(255, 255, 255) 25%, rgb(220, 220, 220) 25%, rgb(220, 220, 220) 50%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 75%, rgb(220, 220, 220) 75%, rgb(220, 220, 220) 100%); background-size: 3px 3px; display: block; height: 100px;'
+      'align-items: center; background-image: linear-gradient(45deg, rgb(255, 255, 255) 25%, rgb(220, 220, 220) 25%, rgb(220, 220, 220) 50%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 75%, rgb(220, 220, 220) 75%, rgb(220, 220, 220) 100%); background-size: 3px 3px; color: rgb(170, 170, 170); display: flex; justify-content: center; padding: 30px;'
     );
+    expect(el.textContent).toEqual('The component is hidden');
   });
 });

packages/sitecore-jss-angular/src/components/hidden-rendering.component.ts

@@ -1,10 +1,10 @@
 import { Component, HostBinding } from '@angular/core';
 @Component({
   selector: 'sc-hidden-rendering',
-  template: '',
+  template: 'The component is hidden',
 })
 export class HiddenRenderingComponent {
   @HostBinding('style') get style() {
-    return 'background-image: linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%); background-size: 3px 3px; display: block; height: 100px;';
+    return 'background-image: linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%); background-size: 3px 3px; display: flex; justify-content: center; align-items: center; padding: 30px; color: #aaa;';
   }
 }

packages/sitecore-jss-react/src/components/HiddenRendering.test.tsx

@@ -9,13 +9,17 @@ describe('<HiddenRendering />', () => {
     const rendered = mount(<HiddenRendering />);
     expect(rendered).to.have.length(1);
     expect(rendered.find('div').prop('style')).to.deep.equal({
-      height: '100px',
       backgroundImage:
         'linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%)',
       backgroundSize: '3px 3px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: '30px',
+      color: '#aaa',
     });
     expect(rendered.html()).to.equal(
-      '<div style="height: 100px; background-size: 3px 3px;"></div>'
+      '<div style="background-size: 3px 3px; display: flex; justify-content: center; align-items: center; padding: 30px; color: rgb(170, 170, 170);">The component is hidden</div>'
     );
   });
 });

packages/sitecore-jss-react/src/components/HiddenRendering.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
 
 const styles = {
-  height: '100px',
   backgroundImage:
     'linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%)',
   backgroundSize: '3px 3px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '30px',
+  color: '#aaa',
 };
 
-export const HiddenRendering = () => <div style={styles} />;
+export const HiddenRendering = () => <div style={styles}>The component is hidden</div>;

packages/sitecore-jss-vue/src/components/HiddenRendering.ts

@@ -2,13 +2,21 @@ import { h, defineComponent } from 'vue';
 
 export const HiddenRendering = defineComponent({
   render() {
-    return h('div', {
-      style: {
-        height: '100px',
-        backgroundSize: '3px 3px',
-        backgroundImage:
-          'linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%)',
+    return h(
+      'div',
+      {
+        style: {
+          backgroundSize: '3px 3px',
+          backgroundImage:
+            'linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%)',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: '30px',
+          color: '#aaa',
+        },
       },
-    });
+      'The component is hidden'
+    );
   },
 });

packages/sitecore-jss-vue/src/components/__snapshots__/HiddenRendering.test.ts.snap

@@ -1,6 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<HiddenRendering /> should render 1`] = `
-<div style="height: 100px; background-size: 3px 3px;">
+<div style="background-size: 3px 3px; display: flex; justify-content: center; align-items: center; padding: 30px; color: rgb(170, 170, 170);">
+  The component is hidden
 </div>
 `;