Skip to content

Commit

Permalink
[Next.js][RAV] Add 'The component is hidden' text to Hidden Rendering…
Browse files Browse the repository at this point in the history
… component (#1857)

* Add 'The component is hidden' text to HiddenRendering component

* CHANGELOG update
  • Loading branch information
ambrauer authored Jul 26, 2024
1 parent 74010c4 commit c15461c
Show file tree
Hide file tree
Showing 7 changed files with 35 additions and 16 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});
Original file line number Diff line number Diff line change
@@ -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;';
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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>'
);
});
});
Original file line number Diff line number Diff line change
@@ -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>;
22 changes: 15 additions & 7 deletions packages/sitecore-jss-vue/src/components/HiddenRendering.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
);
},
});
Original file line number Diff line number Diff line change
@@ -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>
`;

0 comments on commit c15461c

Please sign in to comment.