From 15c6cadcac3b76cf6a5974cb519b31adf785c454 Mon Sep 17 00:00:00 2001 From: Adam Brauer <400763+ambrauer@users.noreply.github.com> Date: Thu, 25 Jul 2024 17:19:08 -0500 Subject: [PATCH 1/2] Add 'The component is hidden' text to HiddenRendering component --- .../hidden-rendering.component.spec.ts | 3 ++- .../components/hidden-rendering.component.ts | 4 ++-- .../src/components/HiddenRendering.test.tsx | 8 +++++-- .../src/components/HiddenRendering.tsx | 8 +++++-- .../src/components/HiddenRendering.ts | 22 +++++++++++++------ .../HiddenRendering.test.ts.snap | 3 ++- 6 files changed, 33 insertions(+), 15 deletions(-) diff --git a/packages/sitecore-jss-angular/src/components/hidden-rendering.component.spec.ts b/packages/sitecore-jss-angular/src/components/hidden-rendering.component.spec.ts index 93a682e628..1997b9b857 100644 --- a/packages/sitecore-jss-angular/src/components/hidden-rendering.component.spec.ts +++ b/packages/sitecore-jss-angular/src/components/hidden-rendering.component.spec.ts @@ -43,7 +43,8 @@ describe('', () => { 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'); }); }); diff --git a/packages/sitecore-jss-angular/src/components/hidden-rendering.component.ts b/packages/sitecore-jss-angular/src/components/hidden-rendering.component.ts index facecfa9d1..c65842f796 100644 --- a/packages/sitecore-jss-angular/src/components/hidden-rendering.component.ts +++ b/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;'; } } diff --git a/packages/sitecore-jss-react/src/components/HiddenRendering.test.tsx b/packages/sitecore-jss-react/src/components/HiddenRendering.test.tsx index 0649f45d28..231235b076 100644 --- a/packages/sitecore-jss-react/src/components/HiddenRendering.test.tsx +++ b/packages/sitecore-jss-react/src/components/HiddenRendering.test.tsx @@ -9,13 +9,17 @@ describe('', () => { const rendered = mount(); 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( - '
' + '
The component is hidden
' ); }); }); diff --git a/packages/sitecore-jss-react/src/components/HiddenRendering.tsx b/packages/sitecore-jss-react/src/components/HiddenRendering.tsx index 66e5632f8f..03389cca08 100644 --- a/packages/sitecore-jss-react/src/components/HiddenRendering.tsx +++ b/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 = () =>
; +export const HiddenRendering = () =>
The component is hidden
; diff --git a/packages/sitecore-jss-vue/src/components/HiddenRendering.ts b/packages/sitecore-jss-vue/src/components/HiddenRendering.ts index 1f0c7ce9b9..2cac2e0f8c 100644 --- a/packages/sitecore-jss-vue/src/components/HiddenRendering.ts +++ b/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' + ); }, }); diff --git a/packages/sitecore-jss-vue/src/components/__snapshots__/HiddenRendering.test.ts.snap b/packages/sitecore-jss-vue/src/components/__snapshots__/HiddenRendering.test.ts.snap index fc72e1d153..2751da409f 100644 --- a/packages/sitecore-jss-vue/src/components/__snapshots__/HiddenRendering.test.ts.snap +++ b/packages/sitecore-jss-vue/src/components/__snapshots__/HiddenRendering.test.ts.snap @@ -1,6 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` should render 1`] = ` -
+
+ The component is hidden
`; From 48b890384e027e58f2023b114a37041d1739a088 Mon Sep 17 00:00:00 2001 From: Adam Brauer <400763+ambrauer@users.noreply.github.com> Date: Thu, 25 Jul 2024 17:25:10 -0500 Subject: [PATCH 2/2] CHANGELOG update --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 25f8a47f76..b1bbd8e8f1 100644 --- a/CHANGELOG.md +++ b/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.