Skip to content

Commit decc7a7

Browse files
rcrphillipsrcrphillips
authored
Merge branch 'main' into rp-add-product-block-element-to-index
2 parents 8c4f13a + 99058b3 commit decc7a7

5 files changed

Lines changed: 32 additions & 128 deletions

File tree

dotcom-rendering/src/components/FollowButtons.stories.tsx renamed to dotcom-rendering/src/components/FollowTagButton.stories.tsx

Lines changed: 8 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,22 @@
11
import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
22
import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
3-
import { FollowNotificationsButton, FollowTagButton } from './FollowButtons';
3+
import { FollowTagButton } from './FollowTagButton';
44

55
export default {
6-
component: [FollowNotificationsButton, FollowTagButton],
7-
title: 'Components/FollowStatus',
6+
component: FollowTagButton,
7+
title: 'Components/FollowTagButton',
88
args: {
99
isFollowing: false,
1010
},
1111
};
1212

1313
export const Default = ({ isFollowing }: { isFollowing: boolean }) => {
1414
return (
15-
<>
16-
<FollowTagButton
17-
isFollowing={isFollowing}
18-
displayName={'John Doe'}
19-
onClickHandler={() => undefined}
20-
/>
21-
<FollowNotificationsButton
22-
isFollowing={isFollowing}
23-
onClickHandler={() => undefined}
24-
/>
25-
</>
15+
<FollowTagButton
16+
isFollowing={isFollowing}
17+
displayName={'John Doe'}
18+
onClickHandler={() => undefined}
19+
/>
2620
);
2721
};
2822

@@ -37,22 +31,6 @@ Default.decorators = [
3731
]),
3832
];
3933

40-
export const NotificationsButtonBothStates = () => {
41-
return (
42-
<>
43-
<FollowNotificationsButton
44-
isFollowing={false}
45-
onClickHandler={() => undefined}
46-
/>
47-
<FollowNotificationsButton
48-
isFollowing={true}
49-
onClickHandler={() => undefined}
50-
/>
51-
</>
52-
);
53-
};
54-
NotificationsButtonBothStates.decorators = [splitTheme()];
55-
5634
export const FollowContributorBothStates = () => {
5735
return (
5836
<>

dotcom-rendering/src/components/FollowButtons.test.tsx renamed to dotcom-rendering/src/components/FollowTagButton.test.tsx

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,5 @@
11
import { render, waitFor } from '@testing-library/react';
2-
import { FollowNotificationsButton, FollowTagButton } from './FollowButtons';
3-
4-
it('should show a Notifications Off button for a single contributor when rendering for apps', () => {
5-
const { getByText } = render(
6-
<FollowNotificationsButton
7-
isFollowing={false}
8-
onClickHandler={() => undefined}
9-
/>,
10-
);
11-
expect(getByText('Notifications off')).toBeInTheDocument();
12-
});
13-
14-
it('should show a Notifications On button for a single contributor when rendering for apps', async () => {
15-
const { getByText } = render(
16-
<FollowNotificationsButton
17-
onClickHandler={() => undefined}
18-
isFollowing={true}
19-
/>,
20-
);
21-
await waitFor(() =>
22-
expect(getByText('Notifications on')).toBeInTheDocument(),
23-
);
24-
});
2+
import { FollowTagButton } from './FollowTagButton';
253

264
it('should show a follow contributor button for a single contributor when rendering for apps', () => {
275
const { getByText } = render(

dotcom-rendering/src/components/FollowButtons.tsx renamed to dotcom-rendering/src/components/FollowTagButton.tsx

Lines changed: 1 addition & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
import { css } from '@emotion/react';
22
import { space, textSans15 } from '@guardian/source/foundations';
3-
import {
4-
SvgCheckmark,
5-
SvgNotificationsOff,
6-
SvgNotificationsOn,
7-
SvgPlus,
8-
} from '@guardian/source/react-components';
3+
import { SvgCheckmark, SvgPlus } from '@guardian/source/react-components';
94
import type { ReactNode } from 'react';
105
import { palette } from '../palette';
116

@@ -65,12 +60,6 @@ const containerStyles = css`
6560
column-gap: 0.2em;
6661
`;
6762

68-
const notificationsTextSpan = ({
69-
isFollowing,
70-
}: Pick<ButtonProps, 'isFollowing'>) => (
71-
<span>Notifications {isFollowing ? 'on' : 'off'}</span>
72-
);
73-
7463
const tagTextSpan = ({
7564
isFollowing,
7665
displayName,
@@ -90,29 +79,6 @@ type ButtonProps = {
9079
onClickHandler: () => void;
9180
};
9281

93-
export const FollowNotificationsButton = ({
94-
isFollowing,
95-
onClickHandler,
96-
withExtraBottomMargin = false,
97-
}: ButtonProps & { withExtraBottomMargin?: boolean }) => {
98-
return (
99-
<button
100-
onClick={onClickHandler}
101-
type="button"
102-
css={[buttonStyles(withExtraBottomMargin)]}
103-
>
104-
<span css={containerStyles}>
105-
<FollowIcon
106-
isFollowing={isFollowing}
107-
iconIsFollowing={<SvgNotificationsOn size="xsmall" />}
108-
iconIsNotFollowing={<SvgNotificationsOff size="xsmall" />}
109-
/>
110-
{notificationsTextSpan({ isFollowing })}
111-
</span>
112-
</button>
113-
);
114-
};
115-
11682
export const FollowTagButton = ({
11783
isFollowing,
11884
displayName = '',

‎dotcom-rendering/src/components/FollowWrapper.island.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { getNotificationsClient, getTagClient } from '../lib/bridgetApi';
1111
import { useIsBridgetCompatible } from '../lib/useIsBridgetCompatible';
1212
import { useIsMyGuardianEnabled } from '../lib/useIsMyGuardianEnabled';
1313
import { palette as schemedPalette } from '../palette';
14-
import { FollowTagButton } from './FollowButtons';
14+
import { FollowTagButton } from './FollowTagButton';
1515

1616
type Props = {
1717
id: string;

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

Lines changed: 21 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { css } from '@emotion/react';
22
import {
3-
between,
43
from,
54
headlineBold17,
65
headlineBold20,
@@ -83,23 +82,18 @@ const marginRight = css`
8382
}
8483
`;
8584

86-
const invertedStyle = (design: ArticleDesign) => {
87-
if (design === ArticleDesign.Gallery) {
88-
return '';
89-
}
90-
return css`
91-
/* Handle text wrapping onto a new line */
92-
white-space: pre-wrap;
93-
box-decoration-break: clone;
85+
const invertedStyle = css`
86+
/* Handle text wrapping onto a new line */
87+
white-space: pre-wrap;
88+
box-decoration-break: clone;
89+
line-height: 28px;
90+
padding-right: ${space[1]}px;
91+
padding-top: ${space[1]}px;
92+
padding-bottom: ${space[2]}px;
93+
${from.wide} {
9494
line-height: 28px;
95-
${from.leftCol} {
96-
line-height: 28px;
97-
}
98-
padding-right: ${space[1]}px;
99-
padding-top: ${space[1]}px;
100-
padding-bottom: ${space[3]}px;
101-
`;
102-
};
95+
}
96+
`;
10397

10498
const fontStyles = (format: ArticleFormat) => {
10599
switch (format.design) {
@@ -184,26 +178,15 @@ const breakWord = css`
184178
word-break: break-word;
185179
`;
186180

187-
const sectionPadding = (design: ArticleDesign) => {
188-
if (design === ArticleDesign.Gallery) {
189-
return css`
190-
padding: 0 ${space[2]}px 0 ${space[3]}px;
191-
192-
${between.mobileLandscape.and.tablet} {
193-
padding-left: ${space[5]}px;
194-
}
195-
`;
181+
const sectionPadding = css`
182+
padding-left: 10px;
183+
${from.mobileLandscape} {
184+
padding-left: 18px;
196185
}
197-
return css`
198-
padding-left: 10px;
199-
${from.mobileLandscape} {
200-
padding-left: 18px;
201-
}
202-
${from.tablet} {
203-
padding-left: ${space[1]}px;
204-
}
205-
`;
206-
};
186+
${from.tablet} {
187+
padding-left: ${space[1]}px;
188+
}
189+
`;
207190

208191
export const SeriesSectionLink = ({
209192
format,
@@ -358,9 +341,9 @@ export const SeriesSectionLink = ({
358341
css={[
359342
sectionLabelLink,
360343
fontStyles(format),
361-
invertedStyle(format.design),
344+
invertedStyle,
362345
breakWord,
363-
sectionPadding(format.design),
346+
sectionPadding,
364347
css`
365348
color: ${titleColour};
366349
background-color: ${themePalette(
@@ -369,7 +352,6 @@ export const SeriesSectionLink = ({
369352
`,
370353
format.design === ArticleDesign.Gallery &&
371354
css`
372-
display: inline-block;
373355
position: relative;
374356
`,
375357
format.display === ArticleDisplay.Immersive &&

0 commit comments

Comments
 (0)