Merge pull request #11275 from guardian/clj/use-png-for-hands-logo

Use PNGs instead of SVGs for the Ad Block Ask logo
guardian · Apr 26, 2024 · 8d8070a · 8d8070a
2 parents 6aabde0 + 4777f4d
commit 8d8070a
Show file tree

Hide file tree

Showing 30 changed files with 378 additions and 476 deletions.
diff --git a/dotcom-rendering/.storybook/decorators/configContextDecorator.tsx b/dotcom-rendering/.storybook/decorators/configContextDecorator.tsx
@@ -6,6 +6,7 @@ import { Config } from '../../src/types/configContext';
 const defaultConfig = {
 	renderingTarget: 'Web',
 	darkModeAvailable: false,
+	assetOrigin: '/',
 } satisfies Config;
 
 export const ConfigContextDecorator: Decorator<{

diff --git a/dotcom-rendering/.storybook/main.ts b/dotcom-rendering/.storybook/main.ts
@@ -18,7 +18,10 @@ const config: StorybookConfig = {
 		'../stories/**/*.stories.@(tsx)',
 		'../stories/**/*.stories.@(jsx)',
 	],
-	staticDirs: ['../src/static'],
+	staticDirs: [
+		'../src/static',
+		{ from: '../src/static', to: '/static/frontend/' },
+	],
 	addons: [
 		'@storybook/addon-essentials',
 		'@storybook/addon-interactions',
@@ -60,7 +63,6 @@ const config: StorybookConfig = {
 		// Required as otherwise 'process' will not be defined when included on its own (without .env)
 		// e.g process?.env?.SOME_VAR
 		config.plugins?.push(
-			// @ts-expect-error -- we’ve got plugin mismatch
 			new webpack.DefinePlugin({
 				process: '{}',
 			}),

diff --git a/dotcom-rendering/src/components/AdBlockAsk.importable.tsx b/dotcom-rendering/src/components/AdBlockAsk.importable.tsx
@@ -5,8 +5,7 @@ import { palette } from '@guardian/source-foundations/cjs/source-foundations/src
 import { assertUnreachable } from '../lib/assert-unreachable';
 import { useAdblockAsk } from '../lib/useAdBlockAsk';
 import ArrowRightIcon from '../static/icons/arrow-right.svg';
-import HandsLogoSmall from '../static/logos/hands-small.svg';
-import HandsLogo from '../static/logos/hands.svg';
+import { useConfig } from './ConfigContext';
 
 type AdBlockAskSize = 'leaderboard' | 'mpu';
 
@@ -60,6 +59,12 @@ const adBlockAskTextStyles: Record<AdBlockAskSize, SerializedStyles> = {
 	`,
 };
 
+const HandsLogo = ({ styles }: { styles: SerializedStyles }) => {
+	const { assetOrigin } = useConfig();
+	const src = `${assetOrigin}static/frontend/logos/hands.png`;
+	return <img src={src} alt="Guardian logo held up by hands" css={styles} />;
+};
+
 const SupportButton = ({ href }: { href: string }) => (
 	<a css={linkStyles} href={href}>
 		Support us <ArrowRightIcon />
@@ -97,8 +102,8 @@ export const AdBlockAskLeaderboard = ({
 				margin: 0 auto;
 			`}
 		>
-			<HandsLogoSmall
-				css={css`
+			<HandsLogo
+				styles={css`
 					flex: 0 0 auto;
 					margin: auto 8px -6px 8px;
 					width: 81px;
@@ -153,17 +158,17 @@ export const AdBlockAskMPU = ({
 			>
 				<SupportButton href={supportButtonHref} />
 			</div>
-			<div
-				css={css`
-					width: 128px;
-					height: 68px;
-					background-position: right bottom;
-					position: absolute;
-					bottom: 0;
-					right: 0;
-				`}
-			>
-				<HandsLogo />
+			<div>
+				<HandsLogo
+					styles={css`
+						width: 128px;
+						height: 68px;
+						background-position: right bottom;
+						position: absolute;
+						bottom: 0;
+						right: 0;
+					`}
+				/>
 			</div>
 		</div>
 	);

diff --git a/dotcom-rendering/src/components/ArticleMeta.test.tsx b/dotcom-rendering/src/components/ArticleMeta.test.tsx
@@ -16,7 +16,11 @@ describe('ArticleMeta', () => {
 
 		const { container } = render(
 			<ConfigProvider
-				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
+				value={{
+					renderingTarget: 'Web',
+					darkModeAvailable: false,
+					assetOrigin: '/',
+				}}
 			>
 				<ArticleMeta
 					format={format}
@@ -59,7 +63,11 @@ describe('ArticleMeta', () => {
 
 		const { container } = render(
 			<ConfigProvider
-				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
+				value={{
+					renderingTarget: 'Web',
+					darkModeAvailable: false,
+					assetOrigin: '/',
+				}}
 			>
 				<ArticleMeta
 					format={format}

diff --git a/dotcom-rendering/src/components/BylineLink.test.tsx b/dotcom-rendering/src/components/BylineLink.test.tsx
@@ -105,7 +105,11 @@ describe('BylineLink', () => {
 
 		const { container } = render(
 			<ConfigProvider
-				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
+				value={{
+					renderingTarget: 'Web',
+					darkModeAvailable: false,
+					assetOrigin: '/',
+				}}
 			>
 				<BylineLink
 					byline={byline}
@@ -143,7 +147,11 @@ describe('BylineLink', () => {
 		];
 		const { container } = render(
 			<ConfigProvider
-				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
+				value={{
+					renderingTarget: 'Web',
+					darkModeAvailable: false,
+					assetOrigin: '/',
+				}}
 			>
 				<BylineLink
 					byline={byline}
@@ -183,7 +191,11 @@ describe('BylineLink', () => {
 
 		const { container } = render(
 			<ConfigProvider
-				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
+				value={{
+					renderingTarget: 'Web',
+					darkModeAvailable: false,
+					assetOrigin: '/',
+				}}
 			>
 				<BylineLink
 					byline={byline}

diff --git a/dotcom-rendering/src/components/ConfigContext.test.tsx b/dotcom-rendering/src/components/ConfigContext.test.tsx
@@ -21,9 +21,21 @@ describe('ConfigContext', () => {
 
 	describe('with ConfigProvider', () => {
 		it.each([
-			{ renderingTarget: 'Web', darkModeAvailable: false },
-			{ renderingTarget: 'Apps', darkModeAvailable: true },
-			{ renderingTarget: 'Apps', darkModeAvailable: false },
+			{
+				renderingTarget: 'Web',
+				darkModeAvailable: false,
+				assetOrigin: '/',
+			},
+			{
+				renderingTarget: 'Apps',
+				darkModeAvailable: true,
+				assetOrigin: '/',
+			},
+			{
+				renderingTarget: 'Apps',
+				darkModeAvailable: false,
+				assetOrigin: '/',
+			},
 		] as const satisfies ReadonlyArray<Config>)(
 			'useConfig hook provides correct config: "%o"',
 			(config) => {

diff --git a/dotcom-rendering/src/components/Contributor.test.tsx b/dotcom-rendering/src/components/Contributor.test.tsx
@@ -16,7 +16,11 @@ describe('Contributor', () => {
 
 		const { container } = render(
 			<ConfigProvider
-				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
+				value={{
+					renderingTarget: 'Web',
+					darkModeAvailable: false,
+					assetOrigin: '/',
+				}}
 			>
 				<Contributor
 					format={format}
@@ -46,7 +50,11 @@ describe('Contributor', () => {
 
 		const { container } = render(
 			<ConfigProvider
-				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
+				value={{
+					renderingTarget: 'Web',
+					darkModeAvailable: false,
+					assetOrigin: '/',
+				}}
 			>
 				<Contributor
 					format={format}

diff --git a/dotcom-rendering/src/components/Discussion/Discussion.test.tsx b/dotcom-rendering/src/components/Discussion/Discussion.test.tsx
@@ -15,7 +15,11 @@ describe('App', () => {
 	it('should not render the comment form if user is logged out', async () => {
 		render(
 			<ConfigProvider
-				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
+				value={{
+					renderingTarget: 'Web',
+					darkModeAvailable: false,
+					assetOrigin: '/',
+				}}
 			>
 				<Discussion
 					user={undefined}

diff --git a/dotcom-rendering/src/components/Dropdown.test.tsx b/dotcom-rendering/src/components/Dropdown.test.tsx
@@ -42,7 +42,11 @@ describe('Dropdown', () => {
 	it('should display the given label', () => {
 		const { getByText } = render(
 			<ConfigProvider
-				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
+				value={{
+					renderingTarget: 'Web',
+					darkModeAvailable: false,
+					assetOrigin: '/',
+				}}
 			>
 				<Dropdown
 					id="abc"
@@ -59,7 +63,11 @@ describe('Dropdown', () => {
 	it('should display link titles', () => {
 		const { getByText } = render(
 			<ConfigProvider
-				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
+				value={{
+					renderingTarget: 'Web',
+					darkModeAvailable: false,
+					assetOrigin: '/',
+				}}
 			>
 				<Dropdown
 					id="abc"
@@ -79,7 +87,11 @@ describe('Dropdown', () => {
 	it('should render the correct number of link items', () => {
 		const { container } = render(
 			<ConfigProvider
-				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
+				value={{
+					renderingTarget: 'Web',
+					darkModeAvailable: false,
+					assetOrigin: '/',
+				}}
 			>
 				<Dropdown
 					id="abc"
@@ -98,7 +110,11 @@ describe('Dropdown', () => {
 	it('should expand the menu when clicked upon', () => {
 		const { container, getByRole } = render(
 			<ConfigProvider
-				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
+				value={{
+					renderingTarget: 'Web',
+					darkModeAvailable: false,
+					assetOrigin: '/',
+				}}
 			>
 				<Dropdown
 					id="abc"
@@ -119,7 +135,11 @@ describe('Dropdown', () => {
 	it('should close the expanded menu when they click away', () => {
 		const { container, getByRole } = render(
 			<ConfigProvider
-				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
+				value={{
+					renderingTarget: 'Web',
+					darkModeAvailable: false,
+					assetOrigin: '/',
+				}}
 			>
 				<Dropdown
 					id="abc"
@@ -141,7 +161,11 @@ describe('Dropdown', () => {
 	it('should close the expanded menu when blurred', () => {
 		const { container, getByRole } = render(
 			<ConfigProvider
-				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
+				value={{
+					renderingTarget: 'Web',
+					darkModeAvailable: false,
+					assetOrigin: '/',
+				}}
 			>
 				<Dropdown
 					id="abc"

diff --git a/dotcom-rendering/src/components/GuideAtom/GuideAtom.test.tsx b/dotcom-rendering/src/components/GuideAtom/GuideAtom.test.tsx
@@ -8,7 +8,11 @@ describe('GuideAtom', () => {
 	it('should render', () => {
 		const { getByText, queryByText } = render(
 			<ConfigProvider
-				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
+				value={{
+					renderingTarget: 'Web',
+					darkModeAvailable: false,
+					assetOrigin: '/',
+				}}
 			>
 				<GuideAtom {...defaultStory} />
 			</ConfigProvider>,
@@ -29,7 +33,11 @@ describe('GuideAtom', () => {
 	it('Show feedback on like', () => {
 		const { getByText, queryByText, queryByTestId } = render(
 			<ConfigProvider
-				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
+				value={{
+					renderingTarget: 'Web',
+					darkModeAvailable: false,
+					assetOrigin: '/',
+				}}
 			>
 				<GuideAtom {...defaultStory} />
 			</ConfigProvider>,
@@ -51,7 +59,11 @@ describe('GuideAtom', () => {
 	it('Show feedback on dislike', () => {
 		const { getByText, queryByText, queryByTestId } = render(
 			<ConfigProvider
-				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
+				value={{
+					renderingTarget: 'Web',
+					darkModeAvailable: false,
+					assetOrigin: '/',
+				}}
 			>
 				<GuideAtom {...defaultStory} />
 			</ConfigProvider>,