Skip to content

Commit 37541cb

Browse files
shtukasshtukas
committed
merge from main
2 parents bfd9044 + 7228fa5 commit 37541cb

File tree

5 files changed

+131
-188
lines changed

5 files changed

+131
-188
lines changed

‎dotcom-rendering/.storybook/modes.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ export const allModes = {
2525
globalColourScheme: 'horizontal',
2626
viewport: breakpoints.tablet,
2727
},
28+
'horizontal leftCol': {
29+
globalColourScheme: 'horizontal',
30+
viewport: breakpoints.leftCol,
31+
},
2832
'vertical mobile': {
2933
globalColourScheme: 'vertical',
3034
viewport: breakpoints.mobile,

‎dotcom-rendering/cdk/bin/cdk.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ new RenderingCDKStack(cdkApp, 'ArticleRendering-PROD', {
2828
stage: 'PROD',
2929
domainName: 'article-rendering.guardianapis.com',
3030
scaling: {
31-
minimumInstances: 30,
32-
maximumInstances: 300,
31+
minimumInstances: 27,
32+
maximumInstances: 270,
3333
policies: {
3434
step: {
3535
cpu: cpuScalingSteps,

‎dotcom-rendering/src/components/CaptionBlockComponent.stories.tsx

Lines changed: 107 additions & 172 deletions
Original file line numberDiff line numberDiff line change
@@ -1,185 +1,120 @@
1-
import { css } from '@emotion/react';
2-
import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators';
3+
import { allModes } from '../../.storybook/modes';
34
import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
45
import { CaptionBlockComponent } from './CaptionBlockComponent';
5-
import { Flex } from './Flex';
6-
import { LeftColumn } from './LeftColumn';
7-
import { RightColumn } from './RightColumn';
8-
import { Section } from './Section';
96

10-
export default {
7+
const meta = {
118
component: CaptionBlockComponent,
12-
title: 'Components/CaptionBlockComponent',
13-
};
9+
title: 'Components/Caption Block Component',
10+
decorators: [centreColumnDecorator],
11+
parameters: {
12+
chromatic: {
13+
modes: {
14+
'vertical mobileMedium': allModes['vertical mobileMedium'],
15+
},
16+
},
17+
},
18+
} satisfies Meta<typeof CaptionBlockComponent>;
1419

15-
/*
16-
type Props = {
17-
display: Display;
18-
design: Design;
19-
captionText?: string;
20-
pillar: Theme;
21-
padCaption?: boolean;
22-
credit?: string;
23-
displayCredit?: boolean;
24-
shouldLimitWidth?: boolean;
25-
isOverlaid?: boolean;
26-
};
27-
*/
20+
export default meta;
2821

29-
const Wrapper = ({ children }: { children: React.ReactNode }) => (
30-
<Section fullWidth={true} showTopBorder={false}>
31-
<Flex>
32-
<LeftColumn borderType="full">
33-
<></>
34-
</LeftColumn>
35-
<div
36-
css={css`
37-
width: 620px;
38-
padding: 20px;
39-
flex-grow: 1;
40-
`}
41-
>
42-
{children}
43-
</div>
44-
<RightColumn>
45-
<></>
46-
</RightColumn>
47-
</Flex>
48-
</Section>
49-
);
22+
type Story = StoryObj<typeof meta>;
5023

51-
const standardFormat = {
52-
display: ArticleDisplay.Standard,
53-
design: ArticleDesign.Standard,
54-
theme: Pillar.News,
55-
};
56-
export const StandardArticle = () => {
57-
return (
58-
<Wrapper>
59-
<CaptionBlockComponent
60-
captionText="Caption text"
61-
format={standardFormat}
62-
/>
63-
</Wrapper>
64-
);
65-
};
66-
StandardArticle.storyName = 'with defaults';
67-
StandardArticle.decorators = [splitTheme([standardFormat])];
24+
export const Default = {
25+
args: {
26+
captionText: 'Caption text',
27+
format: {
28+
display: ArticleDisplay.Standard,
29+
design: ArticleDesign.Standard,
30+
theme: Pillar.News,
31+
},
32+
padCaption: false,
33+
credit: 'Credit text',
34+
displayCredit: false,
35+
shouldLimitWidth: false,
36+
isOverlaid: false,
37+
},
38+
} satisfies Story;
6839

69-
const photoEssayFormat = {
70-
display: ArticleDisplay.Immersive,
71-
design: ArticleDesign.PhotoEssay,
72-
theme: Pillar.Lifestyle,
73-
};
74-
export const PhotoEssay = () => {
75-
return (
76-
<Wrapper>
77-
<CaptionBlockComponent
78-
captionText="Caption text"
79-
format={photoEssayFormat}
80-
padCaption={false}
81-
credit="Credit text"
82-
displayCredit={false}
83-
shouldLimitWidth={false}
84-
isOverlaid={false}
85-
/>
86-
</Wrapper>
87-
);
88-
};
89-
PhotoEssay.storyName = 'PhotoEssay';
90-
PhotoEssay.decorators = [splitTheme([photoEssayFormat])];
40+
export const WithDefaults = {
41+
args: {
42+
...Default.args,
43+
padCaption: undefined,
44+
credit: undefined,
45+
displayCredit: undefined,
46+
shouldLimitWidth: undefined,
47+
isOverlaid: undefined,
48+
},
49+
} satisfies Story;
9150

92-
export const PhotoEssayHTML = () => {
93-
return (
94-
<Wrapper>
95-
<CaptionBlockComponent
96-
captionText="<ul><li>Line 1 text</li><li>Line 2 text</li><li>Line 3 text</li></ul>"
97-
format={photoEssayFormat}
98-
padCaption={false}
99-
credit="Credit text"
100-
displayCredit={false}
101-
shouldLimitWidth={false}
102-
isOverlaid={false}
103-
/>
104-
</Wrapper>
105-
);
106-
};
107-
PhotoEssayHTML.storyName = 'PhotoEssay using html';
108-
PhotoEssayHTML.decorators = [splitTheme([photoEssayFormat])];
51+
export const PhotoEssay = {
52+
args: {
53+
...Default.args,
54+
format: {
55+
display: ArticleDisplay.Immersive,
56+
design: ArticleDesign.PhotoEssay,
57+
theme: Pillar.Lifestyle,
58+
},
59+
},
60+
} satisfies Story;
10961

110-
export const Padded = () => {
111-
return (
112-
<Wrapper>
113-
<CaptionBlockComponent
114-
captionText="Caption text"
115-
format={standardFormat}
116-
padCaption={true}
117-
credit="Credit text"
118-
displayCredit={false}
119-
shouldLimitWidth={false}
120-
isOverlaid={false}
121-
/>
122-
</Wrapper>
123-
);
124-
};
125-
Padded.storyName = 'when padded';
126-
Padded.decorators = [splitTheme([standardFormat])];
62+
export const PhotoEssayUsingHTML = {
63+
args: {
64+
...PhotoEssay.args,
65+
captionText:
66+
'<ul><li>Line 1 text</li><li>Line 2 text</li><li>Line 3 text</li></ul>',
67+
},
68+
} satisfies Story;
12769

128-
export const WidthLimited = () => {
129-
return (
130-
<Wrapper>
131-
<CaptionBlockComponent
132-
captionText="Caption textQuas repellat sapiente nobis vel. Expedita veniam ut officiis. Omnis tempore natus est distinctio sapiente aliquid dolores soluta. Vel facere vitae velit et non. Eveniet omnis impedit mollitia voluptas omnis sit"
133-
format={standardFormat}
134-
padCaption={false}
135-
credit="Credit text"
136-
displayCredit={false}
137-
shouldLimitWidth={true}
138-
isOverlaid={false}
139-
/>
140-
</Wrapper>
141-
);
142-
};
143-
WidthLimited.storyName = 'with width limited';
144-
WidthLimited.decorators = [splitTheme([standardFormat])];
70+
export const WhenPadded = {
71+
args: {
72+
...Default.args,
73+
padCaption: true,
74+
},
75+
} satisfies Story;
14576

146-
export const Credited = () => {
147-
return (
148-
<Wrapper>
149-
<CaptionBlockComponent
150-
captionText="Caption textQuas repellat sapiente nobis vel. Expedita veniam ut officiis. Omnis tempore natus est distinctio sapiente aliquid dolores soluta. Vel facere vitae velit et non. Eveniet omnis impedit mollitia voluptas omnis sit"
151-
format={standardFormat}
152-
padCaption={false}
153-
credit="Credit text"
154-
displayCredit={true}
155-
shouldLimitWidth={false}
156-
isOverlaid={false}
157-
/>
158-
</Wrapper>
159-
);
160-
};
161-
Credited.storyName = 'with credit';
162-
Credited.decorators = [splitTheme([standardFormat])];
77+
export const WithWidthLimited = {
78+
args: {
79+
...Default.args,
80+
captionText:
81+
'Caption textQuas repellat sapiente nobis vel. Expedita veniam ut officiis. Omnis tempore natus est distinctio sapiente aliquid dolores soluta. Vel facere vitae velit et non. Eveniet omnis impedit mollitia voluptas omnis sit',
82+
shouldLimitWidth: true,
83+
},
84+
parameters: {
85+
chromatic: {
86+
modes: {
87+
'vertical mobileMedium': { disable: true },
88+
'horizontal leftCol': allModes['horizontal leftCol'],
89+
},
90+
},
91+
},
92+
} satisfies Story;
16393

164-
const showcaseFormat = {
165-
display: ArticleDisplay.Showcase,
166-
design: ArticleDesign.Comment,
167-
theme: Pillar.Sport,
168-
};
169-
export const Overlaid = () => {
170-
return (
171-
<Wrapper>
172-
<CaptionBlockComponent
173-
captionText="Caption textQuas repellat sapiente nobis vel. Expedita veniam ut officiis. Omnis tempore natus est distinctio sapiente aliquid dolores soluta. Vel facere vitae velit et non. Eveniet omnis impedit mollitia voluptas omnis sit"
174-
format={showcaseFormat}
175-
padCaption={false}
176-
credit="Credit text"
177-
displayCredit={false}
178-
shouldLimitWidth={false}
179-
isOverlaid={true}
180-
/>
181-
</Wrapper>
182-
);
183-
};
184-
Overlaid.storyName = 'when overlaid';
185-
Overlaid.decorators = [splitTheme([showcaseFormat])];
94+
export const WithCredit = {
95+
args: {
96+
...Default.args,
97+
displayCredit: true,
98+
},
99+
} satisfies Story;
100+
101+
export const WhenOverlaid = {
102+
args: {
103+
...Default.args,
104+
captionText: WithWidthLimited.args.captionText,
105+
isOverlaid: true,
106+
format: {
107+
display: ArticleDisplay.Showcase,
108+
design: ArticleDesign.Comment,
109+
theme: Pillar.Sport,
110+
},
111+
},
112+
parameters: {
113+
chromatic: {
114+
modes: {
115+
'vertical mobileMedium': { disable: true },
116+
'light mobileMedium': allModes['light mobileMedium'],
117+
},
118+
},
119+
},
120+
} satisfies Story;

‎dotcom-rendering/src/components/MultiByline.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ const Byline = ({
203203
allowedAttributes: {
204204
...defaults.allowedAttributes,
205205
span: ['data-contributor-rel'],
206-
a: ['data-ignore'],
206+
a: ['data-ignore', 'data-contributor-rel', 'href'],
207207
},
208208
});
209209

‎dotcom-rendering/src/components/SignInGateSelector.importable.tsx

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -760,17 +760,21 @@ const ShowSignInGateAuxia = ({
760760
});
761761
}, [componentId]);
762762

763-
return SignInGateAuxia({
764-
guUrl: host,
765-
signInUrl,
766-
dismissGate: () => {
767-
setShowGate(false);
768-
},
769-
abTest,
770-
ophanComponentId: componentId,
771-
checkoutCompleteCookieData,
772-
personaliseSignInGateAfterCheckoutSwitch,
773-
userTreatment,
774-
logTreatmentInteractionCall,
775-
});
763+
return (
764+
<SignInGateAuxia
765+
guUrl={host}
766+
signInUrl={signInUrl}
767+
dismissGate={() => {
768+
setShowGate(false);
769+
}}
770+
abTest={abTest}
771+
ophanComponentId={componentId}
772+
checkoutCompleteCookieData={checkoutCompleteCookieData}
773+
personaliseSignInGateAfterCheckoutSwitch={
774+
personaliseSignInGateAfterCheckoutSwitch
775+
}
776+
userTreatment={userTreatment}
777+
logTreatmentInteractionCall={logTreatmentInteractionCall}
778+
/>
779+
);
776780
};

0 commit comments

Comments
 (0)