Simplified live grid layout for stories

Author: jamesmockett

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

@@ -1,26 +1,49 @@
 import { css } from '@emotion/react';
-import { palette, space } from '@guardian/source/foundations';
+import { breakpoints, from, palette } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FootballMiniMatchStats } from './FootballMiniMatchStats';
 
+const gridCss = css`
+	background-color: ${palette.neutral[97]};
+	/**
+	 * Extremely simplified live blog grid layout as we're only interested in
+	 * the 240px wide left column added at the desktop breakpoint.
+	 * dotcom-rendering/src/layouts/LiveLayout.tsx
+	 */
+	${from.desktop} {
+		display: grid;
+		grid-column-gap: 20px;
+		grid-template-columns: 240px 1fr;
+	}
+`;
+
+const containerCss = css`
+	padding: 10px;
+	${from.desktop} {
+		padding-left: 20px;
+		padding-right: 0;
+	}
+`;
+
 const meta = {
 	title: 'Components/Football Mini Match Stats',
 	component: FootballMiniMatchStats,
 	decorators: [
 		(Story) => (
-			<div
-				css={css`
-					padding: ${space[4]}px;
-					background-color: ${palette.neutral[97]};
-				`}
-			>
-				<Story />
+			<div css={gridCss}>
+				<div css={containerCss}>
+					<Story />
+				</div>
 			</div>
 		),
 	],
 	parameters: {
-		viewport: {
-			defaultViewport: 'mobileMedium',
+		chromatic: {
+			viewports: [
+				breakpoints.mobileMedium,
+				breakpoints.tablet,
+				breakpoints.wide,
+			],
 		},
 	},
 } satisfies Meta<typeof FootballMiniMatchStats>;

dotcom-rendering/src/components/FootballMiniMatchStats.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { palette } from '@guardian/source/foundations';
+import { from, palette } from '@guardian/source/foundations';
 import {
 	LinkButton,
 	SvgArrowRightStraight,
@@ -12,6 +12,19 @@ const containerCss = css`
 	gap: 10px;
 `;
 
+const buttonTextCss = css`
+	${from.desktop} {
+		display: none;
+	}
+`;
+
+const buttonTextShortCss = css`
+	display: none;
+	${from.desktop} {
+		display: inline;
+	}
+`;
+
 type FootballTeam = {
 	name: string;
 	colour: string;
@@ -62,7 +75,8 @@ export const FootballMiniMatchStats = ({
 				iconSide="right"
 				theme={{ backgroundPrimary: palette.sport[400] }}
 			>
-				More stats, line-ups and tables
+				<span css={buttonTextCss}>More stats, line-ups and tables</span>
+				<span css={buttonTextShortCss}>Stats and line ups</span>
 			</LinkButton>
 		</div>
 	);