Merge branch 'jm/feat-focus-designable-banner-when-visible' of github.com:guardian/dotcom-rendering into jm/feat-focus-designable-banner-when-visible

Author: Juarez Mota

dotcom-rendering/package.json

@@ -28,7 +28,7 @@
 		"@emotion/server": "11.11.0",
 		"@guardian/ab-core": "8.0.0",
 		"@guardian/braze-components": "22.2.0",
-		"@guardian/bridget": "8.5.1",
+		"@guardian/bridget": "8.6.0",
 		"@guardian/browserslist-config": "6.1.0",
 		"@guardian/cdk": "61.4.0",
 		"@guardian/commercial-core": "27.1.0",

dotcom-rendering/src/components/ArticleMeta.apps.tsx

@@ -244,6 +244,7 @@ export const ArticleMetaApps = ({
 	const isAnalysis = format.design === ArticleDesign.Analysis;
 	const isLiveBlog = format.design === ArticleDesign.LiveBlog;
 	const isGallery = format.design === ArticleDesign.Gallery;
+	const isVideo = format.design === ArticleDesign.Video;
 
 	const shouldShowFollowButtons = (layoutOrDesignType: boolean) =>
 		layoutOrDesignType && !!byline && !isUndefined(soleContributor);
@@ -254,6 +255,9 @@ export const ArticleMetaApps = ({
 	const isImmersiveOrAnalysisWithMultipleAuthors =
 		(isAnalysis || isImmersive) && !!byline && isUndefined(soleContributor);
 
+	const shouldShowListenToArticleButton =
+		!!pageId && !(isLiveBlog || isPicture || isGallery || isVideo);
+
 	return (
 		<div
 			className={
@@ -365,7 +369,7 @@ export const ArticleMetaApps = ({
 					</MetaGridBranding>
 				)}
 			</div>
-			{pageId !== undefined && (
+			{shouldShowListenToArticleButton && (
 				<Island priority="feature" defer={{ until: 'visible' }}>
 					<ListenToArticle articleId={pageId} />
 				</Island>

dotcom-rendering/src/components/ListenToArticle.importable.tsx

@@ -7,26 +7,53 @@ import { ListenToArticleButton } from './ListenToArticleButton';
 type Props = {
 	articleId: string;
 };
+
+export const formatAudioDuration = (
+	durationInSeconds: number,
+): string | undefined => {
+	if (durationInSeconds >= 3600 || durationInSeconds <= 0) {
+		return undefined;
+	}
+	const minutes = Math.floor((durationInSeconds % 3600) / 60);
+	const seconds = durationInSeconds % 60;
+
+	const formattedDuration = `${minutes.toString()}:${seconds
+		.toString()
+		.padStart(2, '0')}`;
+
+	return formattedDuration;
+};
+
 export const ListenToArticle = ({ articleId }: Props) => {
 	const [showButton, setShowButton] = useState<boolean>(false);
+	const [audioDurationSeconds, setAudioDurationSeconds] = useState<
+		number | undefined
+	>(undefined);
 
-	const isBridgetCompatible = useIsBridgetCompatible('8.5.1');
-
+	const isBridgetCompatible = useIsBridgetCompatible('8.6.0');
 	useEffect(() => {
 		if (isBridgetCompatible) {
 			Promise.all([
 				getListenToArticleClient().isAvailable(articleId),
 				getListenToArticleClient().isPlaying(articleId),
+				getListenToArticleClient().getAudioDurationSeconds(articleId),
 			])
-				.then(() =>
-					// setShowButton(isAvailable && !isPlaying),
-					setShowButton(false),
-				)
+				.then(() => {
+					// TODO pending design implementation and AB test set up.
+					// .then(({ isAvailable, isPlaying, audioDurationSeconds }) => {
+					// setAudioDuration(
+					// 	audioDurationSeconds ? audioDurationSeconds : undefined,
+					// );
+					// setShowButton(isAvailable && !isPlaying);
+					setAudioDurationSeconds(undefined);
+					setShowButton(false);
+				})
 				.catch((error) => {
 					console.error(
 						'Error fetching article audio status: ',
 						error,
 					);
+
 					setShowButton(false);
 				});
 		}
@@ -54,7 +81,14 @@ export const ListenToArticle = ({ articleId }: Props) => {
 	};
 	return (
 		showButton && (
-			<ListenToArticleButton onClickHandler={listenToArticleHandler} />
+			<ListenToArticleButton
+				onClickHandler={listenToArticleHandler}
+				audioDuration={
+					audioDurationSeconds !== undefined
+						? formatAudioDuration(audioDurationSeconds)
+						: undefined
+				}
+			/>
 		)
 	);
 };

dotcom-rendering/src/components/ListenToArticle.test.tsx

@@ -0,0 +1,20 @@
+import { formatAudioDuration } from './ListenToArticle.importable';
+
+describe('format Audio Duration correctly', () => {
+	const testCases = [
+		{ input: -60, expected: undefined },
+		{ input: 0, expected: undefined },
+		{ input: 1, expected: '0:01' },
+		{ input: 59, expected: '0:59' },
+		{ input: 60, expected: '1:00' },
+		{ input: 61, expected: '1:01' },
+		{ input: 3599, expected: '59:59' },
+		{ input: 3600, expected: undefined },
+	];
+
+	for (const { input, expected } of testCases) {
+		it(`correctly formats ${input} as ${expected}`, () => {
+			expect(formatAudioDuration(input)).toEqual(expected);
+		});
+	}
+});

dotcom-rendering/src/components/ListenToArticleButton.stories.tsx

@@ -10,8 +10,16 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const ListenToArticleButton = {
+export const ListenToArticleWithDurationButton = {
 	args: {
 		onClickHandler: () => undefined,
+		audioDuration: '3:02',
+	},
+} satisfies Story;
+
+export const ListenToArticleNoDurationButton = {
+	args: {
+		onClickHandler: () => undefined,
+		audioDuration: undefined,
 	},
 } satisfies Story;

dotcom-rendering/src/components/ListenToArticleButton.tsx

@@ -1,32 +1,73 @@
 import { css } from '@emotion/react';
-import { space } from '@guardian/source/foundations';
+import { height, space } from '@guardian/source/foundations';
 import {
 	Button,
 	SvgMediaControlsPlay,
 } from '@guardian/source/react-components';
 import { palette } from '../palette';
 
-const button = css`
+const buttonCss = (audioDuration: string | undefined) => css`
+	display: flex;
+	align-items: center;
 	background-color: ${palette('--follow-icon-fill')};
+	color: ${palette('--follow-icon-background')};
 	&:active,
 	&:focus,
 	&:hover {
 		background-color: ${palette('--follow-icon-fill')};
 	}
-	color: ${palette('--follow-icon-background')};
 	margin-bottom: ${space[4]}px;
 	margin-left: ${space[2]}px;
+	padding-left: ${space[2]}px;
+	padding-right: ${audioDuration === undefined ? space[4] : space[3]}px;
+	padding-bottom: 0px;
+	font-size: 15px;
+	height: ${height.ctaSmall}px;
+	min-height: ${height.ctaSmall}px;
+
+	.src-button-space {
+		width: 0px;
+	}
+`;
+
+const dividerCss = css`
+	width: 0.5px;
+	height: 100%;
+	opacity: 0.5;
+	border-left: 1px solid ${palette('--follow-icon-background')};
+	margin-left: ${space[2]}px;
+	margin-right: ${space[2]}px;
+`;
+
+const durationCss = css`
+	font-weight: 300;
 `;
+
+const baselineCss = css`
+	padding-bottom: 2px;
+`;
+
 type ButtonProps = {
 	onClickHandler: () => void;
+	audioDuration?: string;
 };
-export const ListenToArticleButton = ({ onClickHandler }: ButtonProps) => (
+export const ListenToArticleButton = ({
+	onClickHandler,
+	audioDuration,
+}: ButtonProps) => (
 	<Button
 		onClick={onClickHandler}
-		size="small"
-		cssOverrides={button}
+		size="default"
+		iconSide="left"
+		cssOverrides={buttonCss(audioDuration)}
 		icon={<SvgMediaControlsPlay />}
 	>
-		Listen to article
+		{audioDuration === undefined || audioDuration === '' ? null : (
+			<>
+				<span css={[durationCss, baselineCss]}>{audioDuration}</span>
+				<span css={dividerCss}></span>
+			</>
+		)}
+		<span css={baselineCss}>Listen to this article</span>
 	</Button>
 );

dotcom-rendering/src/devServer/docs/article.tsx

@@ -1,3 +1,9 @@
+import {
+	ArticleDesign,
+	ArticleDisplay,
+	ArticleSpecial,
+	Pillar,
+} from '../../lib/articleFormat';
 import { Available } from './available';
 import { descriptionLinks } from './styles';
 
@@ -89,6 +95,28 @@ const Examples = () => (
 	</>
 );
 
+/**
+ * Joins all the `string` values of an enum into a single, comma-separated
+ * `string`.
+ *
+ * `ArticleDesign`, `ArticleDisplay` and the two variants of `ArticleTheme` are
+ * TypeScript enums. Their values contain both the `string` and `number`
+ * representations of the enum, but here we just want the `string`s, so we
+ * filter out the `number`s.
+ *
+ * https://www.typescriptlang.org/docs/handbook/enums.html#reverse-mappings
+ */
+const formatValues = (
+	a:
+		| typeof ArticleDesign
+		| typeof ArticleDisplay
+		| typeof Pillar
+		| typeof ArticleSpecial,
+): string =>
+	Object.values(a)
+		.filter((v) => typeof v !== 'number')
+		.join(', ');
+
 const Format = () => (
 	<>
 		<h2>Format</h2>
@@ -103,23 +131,21 @@ const Format = () => (
 			<dd>
 				Primarily influences the content, structure and features of an
 				article. It's the most important of the three, and is often used
-				as a shorthand to describe the "kind" of article. Examples
-				include <code>Liveblog</code>, <code>Feature</code> and{' '}
-				<code>Gallery</code>.
+				as a shorthand to describe the "kind" of article. The values
+				are: {formatValues(ArticleDesign)}.
 			</dd>
 			<dt>Display</dt>
 			<dd>
-				Primarily influences the layout of an article. Examples include{' '}
-				<code>Immersive</code>, <code>Showcase</code> and{' '}
-				<code>NumberedList</code>.
+				Primarily influences the layout of an article. The values are:{' '}
+				{formatValues(ArticleDisplay)}.
 			</dd>
 			<dt>Theme</dt>
 			<dd>
 				Primarily influences the fonts and colours of an article. It can
 				can be thought of as a superset of "pillar", i.e. all the
 				pillars are considered themes, but there are some additional
-				themes that are not pillars. Examples include <code>News</code>,{' '}
-				<code>Sport</code> and <code>Labs</code>.
+				themes that are not pillars. The values are:{' '}
+				{formatValues(Pillar)}, {formatValues(ArticleSpecial)}.
 			</dd>
 		</dl>
 		<p>

dotcom-rendering/src/devServer/routers/amp.ts renamed to dotcom-rendering/src/devServer/routers/amp.tsx

@@ -6,8 +6,8 @@ import { sendReact } from '../send';
 
 const amp = express.Router();
 
-amp.get('/', sendReact('AMP', Amp));
-amp.get('/article', sendReact('Article', Article));
-amp.get('/interactive', sendReact('Interactive', Interactive));
+amp.get('/', sendReact('AMP', <Amp />));
+amp.get('/article', sendReact('Article', <Article />));
+amp.get('/interactive', sendReact('Interactive', <Interactive />));
 
 export { amp };

dotcom-rendering/src/devServer/routers/dotcom.ts renamed to dotcom-rendering/src/devServer/routers/dotcom.tsx

@@ -15,26 +15,32 @@ import { sendReact } from '../send';
 
 const dotcom = Router();
 
-dotcom.get('/', sendReact('Dotcom', Dotcom));
-dotcom.get('/article', sendReact('Article', Article));
-dotcom.get('/front', sendReact('Front', Front));
-dotcom.get('/tag-page', sendReact('Tag Page', TagPage));
-dotcom.get('/interactive', sendReact('Interactive', Interactive));
-dotcom.get('/newsletters', sendReact('All Newsletters', Newsletters));
-dotcom.get('/football-live', sendReact('Football Live', FootballLive));
+dotcom.get('/', sendReact('Dotcom', <Dotcom />));
+dotcom.get('/article', sendReact('Article', <Article />));
+dotcom.get('/front', sendReact('Front', <Front />));
+dotcom.get('/tag-page', sendReact('Tag Page', <TagPage />));
+dotcom.get('/interactive', sendReact('Interactive', <Interactive />));
+dotcom.get('/newsletters', sendReact('All Newsletters', <Newsletters />));
+dotcom.get('/football-live', sendReact('Football Live', <FootballLive />));
 dotcom.get(
 	'/football-fixtures',
-	sendReact('Football Fixtures', FootballFixtures),
+	sendReact('Football Fixtures', <FootballFixtures />),
+);
+dotcom.get(
+	'/football-results',
+	sendReact('Football Results', <FootballResults />),
+);
+dotcom.get(
+	'/football-tables',
+	sendReact('Football Tables', <FootballTables />),
 );
-dotcom.get('/football-results', sendReact('Football Results', FootballResults));
-dotcom.get('/football-tables', sendReact('Football Tables', FootballTables));
 dotcom.get(
 	'/football-match-summary',
-	sendReact('Football Match Summary', FootballMatchSummary),
+	sendReact('Football Match Summary', <FootballMatchSummary />),
 );
 dotcom.get(
 	'/cricket-scorecard',
-	sendReact('Cricket Scorecard', CricketScorecard),
+	sendReact('Cricket Scorecard', <CricketScorecard />),
 );
 
 export { dotcom };

dotcom-rendering/src/devServer/routers/editionsApp.ts renamed to dotcom-rendering/src/devServer/routers/editionsApp.tsx

@@ -5,10 +5,10 @@ import { sendReact } from '../send';
 
 const editionsApp = express.Router();
 
-editionsApp.get('/', sendReact('Editions App', EditionsApp));
+editionsApp.get('/', sendReact('Editions App', <EditionsApp />));
 editionsApp.get(
 	'/crosswords',
-	sendReact('Editions Crosswords', EditionsCrosswords),
+	sendReact('Editions Crosswords', <EditionsCrosswords />),
 );
 
 export { editionsApp };