Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

trial using context for renderingTarget #8704

Merged
merged 25 commits into from
Sep 8, 2023
Merged

trial using context for renderingTarget #8704

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
8342952
trial using context for renderingTarget
cemms1 Aug 30, 2023
a2a5b54
refactor: one context to rule them all
cemms1 Aug 31, 2023
cac99e7
Merge branch 'main' into cemms1/use-context-for-rendering-target
cemms1 Aug 31, 2023
91cfa08
ensure rendering target is reflected in layout stories context
cemms1 Sep 1, 2023
1f24871
Merge branch 'main' into cemms1/use-context-for-rendering-target
cemms1 Sep 4, 2023
fbe778c
docs: add new react context proposal adr and rename adr sub dirs
cemms1 Sep 4, 2023
8414c5f
docs: add storybook docs to help explain context and/or decorators
cemms1 Sep 4, 2023
d92d8da
add context hook to improve ease of use of context object
cemms1 Sep 4, 2023
c3bfe7a
Merge branch 'main' into cemms1/use-context-for-rendering-target
cemms1 Sep 5, 2023
174def7
ensure useContext hook cannot be used outside of relevant provider
cemms1 Sep 6, 2023
9d41ac0
move provider down tree and prevent direct context use
cemms1 Sep 6, 2023
6ac0184
remove console.log
cemms1 Sep 6, 2023
095689e
rename context to config, simplify implementation, add islands support
cemms1 Sep 6, 2023
4bf6dec
test: add test for config context and mock for other tests
cemms1 Sep 6, 2023
9d34771
ignore linting issue for context with comment
cemms1 Sep 6, 2023
9162e02
copy lint config from AR to detect react version
cemms1 Sep 6, 2023
7006f21
Merge branch 'main' into cemms1/use-context-for-rendering-target
cemms1 Sep 6, 2023
7ae529d
docs: update react context ADR to remove ban on use within islands, s…
cemms1 Sep 6, 2023
55a5b21
improve docs, and readability by renaming config type
cemms1 Sep 6, 2023
40af5aa
move provider higher up the tree and include other pages
cemms1 Sep 7, 2023
06b26df
test: fix tests
cemms1 Sep 7, 2023
52f5edf
Merge branch 'main' into cemms1/use-context-for-rendering-target
cemms1 Sep 7, 2023
2a0d92a
docs: update jsdoc descriptions for page components
cemms1 Sep 7, 2023
5cd1902
docs: clarify context docs and update status, moving existing doc to …
cemms1 Sep 7, 2023
0b278e5
docs: spelling
cemms1 Sep 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions dotcom-rendering/.storybook/decorators/renderingContextDecorator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { RenderingContext } from '../../src/components/RenderingContext';

const defaultContext = { target: 'Web' };

export const RenderingContextDecorator = (
Story,
{ args: { renderingContext } },
) => {
const context = { ...defaultContext, ...renderingContext };

// For easy debugging
console.log('Storybook rendering context: \n', context);

return (
<RenderingContext.Provider value={context}>
<Story />
</RenderingContext.Provider>
);
};
Copy link
Contributor Author

@cemms1 cemms1 Aug 31, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This Storybook decorator wraps all stories in a <RenderingContext.Provider> component, with the default value of the context provided which can be overridden at component level

2 changes: 2 additions & 0 deletions dotcom-rendering/.storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { Lazy } from '../src/components/Lazy';
import { Picture } from '../src/components/Picture';
import { mockRESTCalls } from '../src/lib/mockRESTCalls';
import { setABTests } from '../src/lib/useAB';
import { RenderingContextDecorator } from './decorators/renderingContextDecorator';

// Prevent components being lazy rendered when we're taking Chromatic snapshots
Lazy.disabled = isChromatic();
Expand Down Expand Up @@ -139,6 +140,7 @@ const guardianViewports = {
/** @type {import('@storybook/react').Preview} */
export default {
decorators: [
RenderingContextDecorator,
(Story) => {
storage.local.clear();
return Story();
Expand Down
4 changes: 0 additions & 4 deletions dotcom-rendering/src/components/ArticleBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { revealStyles } from '../lib/revealStyles';
import type { ServerSideTests, Switches } from '../types/config';
import type { TableOfContentsItem } from '../types/frontend';
import type { Palette } from '../types/palette';
import type { RenderingTarget } from '../types/renderingTarget';
import type { TagType } from '../types/tag';
import { Island } from './Island';
import { RecipeMultiplier } from './RecipeMultiplier.importable';
Expand Down Expand Up @@ -47,7 +46,6 @@ type Props = {
tableOfContents?: TableOfContentsItem[];
lang?: string;
isRightToLeftLang?: boolean;
renderingTarget: RenderingTarget;
};

const globalH2Styles = (display: ArticleDisplay) => css`
Expand Down Expand Up @@ -139,7 +137,6 @@ export const ArticleBody = ({
tableOfContents,
lang,
isRightToLeftLang = false,
renderingTarget,
}: Props) => {
const isInteractive = format.design === ArticleDesign.Interactive;
const palette = decidePalette(format);
Expand Down Expand Up @@ -240,7 +237,6 @@ export const ArticleBody = ({
isAdFreeUser={isAdFreeUser}
isSensitive={isSensitive}
abTests={abTests}
renderingTarget={renderingTarget}
/>
</div>
</>
Expand Down
26 changes: 0 additions & 26 deletions dotcom-rendering/src/components/ArticleHeadline.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ export const ArticleStory = () => {
format={format}
tags={[]}
webPublicationDateDeprecated=""
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand All @@ -65,7 +64,6 @@ export const Feature = () => {
format={format}
tags={[]}
webPublicationDateDeprecated=""
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand Down Expand Up @@ -98,7 +96,6 @@ export const ShowcaseInterview = () => {
tags={[]}
webPublicationDateDeprecated=""
byline="Byline text"
renderingTarget="Web"
/>
</div>
<MainMedia
Expand Down Expand Up @@ -143,7 +140,6 @@ export const ShowcaseInterviewNobyline = () => {
tags={[]}
webPublicationDateDeprecated=""
byline=""
renderingTarget="Web"
/>
</div>
<MainMedia
Expand Down Expand Up @@ -183,7 +179,6 @@ export const Interview = () => {
tags={[]}
webPublicationDateDeprecated=""
byline="Byline text"
renderingTarget="Web"
/>
<Standfirst
format={format}
Expand Down Expand Up @@ -226,7 +221,6 @@ export const InterviewSpecialReport = () => {
tags={[]}
webPublicationDateDeprecated=""
byline="Byline text"
renderingTarget="Web"
/>
<Standfirst
format={format}
Expand Down Expand Up @@ -270,7 +264,6 @@ export const InterviewNoByline = () => {
tags={[]}
webPublicationDateDeprecated=""
byline=""
renderingTarget="Web"
/>
<Standfirst
format={format}
Expand Down Expand Up @@ -312,7 +305,6 @@ export const Comment = () => {
format={format}
tags={[]}
webPublicationDateDeprecated=""
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand Down Expand Up @@ -350,7 +342,6 @@ export const Analysis = () => {
format={format(theme)}
tags={[]}
webPublicationDateDeprecated=""
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand Down Expand Up @@ -381,7 +372,6 @@ export const Gallery = () => {
format={format}
tags={[]}
webPublicationDateDeprecated=""
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand All @@ -408,7 +398,6 @@ export const Review = () => {
format={format}
tags={[]}
webPublicationDateDeprecated=""
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand All @@ -435,7 +424,6 @@ export const PhotoEssay = () => {
format={format}
tags={[]}
webPublicationDateDeprecated=""
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand All @@ -462,7 +450,6 @@ export const Explainer = () => {
format={format}
tags={[]}
webPublicationDateDeprecated=""
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand All @@ -489,7 +476,6 @@ export const Quiz = () => {
format={format}
tags={[]}
webPublicationDateDeprecated=""
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand All @@ -516,7 +502,6 @@ export const Recipe = () => {
format={format}
tags={[]}
webPublicationDateDeprecated=""
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand All @@ -543,7 +528,6 @@ export const Immersive = () => {
format={format}
tags={[]}
webPublicationDateDeprecated=""
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand All @@ -570,7 +554,6 @@ export const ImmersiveNoMainMedia = () => {
format={format}
tags={[]}
webPublicationDateDeprecated=""
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand Down Expand Up @@ -602,7 +585,6 @@ export const ImmersiveComment = () => {
format={format}
tags={[]}
webPublicationDateDeprecated=""
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand All @@ -629,7 +611,6 @@ export const Editorial = () => {
format={format}
tags={[]}
webPublicationDateDeprecated=""
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand All @@ -656,7 +637,6 @@ export const MatchReport = () => {
format={format}
tags={[]}
webPublicationDateDeprecated=""
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand All @@ -683,7 +663,6 @@ export const SpecialReport = () => {
format={format}
tags={[]}
webPublicationDateDeprecated=""
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand All @@ -710,7 +689,6 @@ export const SpecialReportAlt = () => {
format={format}
tags={[]}
webPublicationDateDeprecated=""
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand All @@ -737,7 +715,6 @@ export const LiveBlog = () => {
format={format}
tags={[]}
webPublicationDateDeprecated=""
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand Down Expand Up @@ -777,7 +754,6 @@ export const DeadBlog = () => {
format={format}
tags={[]}
webPublicationDateDeprecated=""
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand Down Expand Up @@ -805,7 +781,6 @@ export const ReviewWithoutStars = () => {
tags={[]}
webPublicationDateDeprecated=""
byline="Byline text"
renderingTarget="Web"
/>
<Standfirst
format={format}
Expand Down Expand Up @@ -856,7 +831,6 @@ export const AgeWarning = () => {
},
]}
webPublicationDateDeprecated="2020-03-28T07:27:19.000Z"
renderingTarget="Web"
/>
</ArticleContainer>
</Flex>
Expand Down
7 changes: 0 additions & 7 deletions dotcom-rendering/src/components/ArticleHeadline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import { getAgeWarning } from '../lib/age-warning';
import { decidePalette } from '../lib/decidePalette';
import { getZIndex } from '../lib/getZIndex';
import type { Palette } from '../types/palette';
import type { RenderingTarget } from '../types/renderingTarget';
import type { TagType } from '../types/tag';
import { AgeWarning } from './AgeWarning';
import { DesignTag } from './DesignTag';
Expand All @@ -28,7 +27,6 @@ type Props = {
hasStarRating?: boolean;
hasAvatar?: boolean;
isMatch?: boolean;
renderingTarget: RenderingTarget;
};

const topPadding = css`
Expand Down Expand Up @@ -342,7 +340,6 @@ export const ArticleHeadline = ({
hasStarRating,
hasAvatar,
isMatch,
renderingTarget,
}: Props) => {
const palette = decidePalette(format);
switch (format.display) {
Expand Down Expand Up @@ -418,7 +415,6 @@ export const ArticleHeadline = ({
format={format}
byline={byline}
tags={tags}
renderingTarget={renderingTarget}
/>
)}
</div>
Expand Down Expand Up @@ -574,7 +570,6 @@ export const ArticleHeadline = ({
format={format}
byline={byline}
tags={tags}
renderingTarget={renderingTarget}
/>
)}
</div>
Expand Down Expand Up @@ -665,7 +660,6 @@ export const ArticleHeadline = ({
format={format}
byline={byline}
tags={tags}
renderingTarget={renderingTarget}
/>
)}
</div>
Expand Down Expand Up @@ -706,7 +700,6 @@ export const ArticleHeadline = ({
format={format}
byline={byline}
tags={tags}
renderingTarget={renderingTarget}
/>
)}
</div>
Expand Down
Loading