Merge branch 'main' into mob/inline-product-card

Author: emma-imber

.github/workflows/ar-chromatic.yml

@@ -39,7 +39,7 @@ jobs:
       - name: Chromatic - Apps Rendering
         env:
           NODE_OPTIONS: '--max_old_space_size=4096'
-        uses: chromaui/action@v11.27.0
+        uses: chromaui/action@v13.3.0
 
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN__APPS_RENDERING }}

.github/workflows/dcr-chromatic.yml

@@ -35,7 +35,7 @@ jobs:
       - name: Chromatic - DCR
         env:
           NODE_OPTIONS: '--max_old_space_size=4096'
-        uses: chromaui/action@v11.27.0
+        uses: chromaui/action@v13.3.0
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN__DOTCOM_RENDERING }}
           token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/stale.yml

@@ -11,7 +11,7 @@ jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@v9
+      - uses: actions/stale@v10
         id: stale
         # Read about options here: https://github.com/actions/stale#all-options
         with:

dotcom-rendering/.storybook/decorators/splitThemeDecorator.tsx

@@ -21,6 +21,11 @@ interface Orientation {
 	orientation?: 'horizontal' | 'vertical';
 }
 
+type SplitThemeOptions = Orientation & {
+	/** Allows the format heading to be omitted on the split theme decorator */
+	hideFormatHeading?: boolean;
+};
+
 /**
  * The `splitTheme` decorator displays a story simultaneously in both light and
  * dark mode.
@@ -226,6 +231,11 @@ type ThemeProps = {
 	Story: Parameters<Decorator>[0];
 	context: Context;
 	colourScheme: ColourScheme;
+	/**
+	 * For stories without article theming where we fallback to the default theme,
+	 * we can choose to omit the format heading as it's not relevant
+	 */
+	hideFormatHeading?: boolean;
 };
 
 /**
@@ -242,7 +252,13 @@ type ThemeProps = {
  * `colourSchemeBackground` and `colourSchemeTextColour` parameters from the
  * story, or provides defaults when these are not supplied.
  */
-const Theme = ({ formats, Story, context, colourScheme }: ThemeProps) => (
+const Theme = ({
+	formats,
+	Story,
+	context,
+	colourScheme,
+	hideFormatHeading = false,
+}: ThemeProps) => (
 	<div
 		css={{
 			color:
@@ -258,7 +274,12 @@ const Theme = ({ formats, Story, context, colourScheme }: ThemeProps) => (
 		<ThemeHeading colourScheme={colourScheme} />
 		{formats.map((format) => (
 			<>
-				<FormatHeading format={format} colourScheme={colourScheme} />
+				{!hideFormatHeading && (
+					<FormatHeading
+						format={format}
+						colourScheme={colourScheme}
+					/>
+				)}
 				<Palette
 					colourScheme={colourScheme}
 					context={context}
@@ -302,7 +323,10 @@ const Theme = ({ formats, Story, context, colourScheme }: ThemeProps) => (
 export const splitTheme =
 	(
 		formats: ArticleFormat[] = [...defaultFormats],
-		{ orientation = 'horizontal' }: Orientation = {},
+		{
+			orientation = 'horizontal',
+			hideFormatHeading = false,
+		}: SplitThemeOptions = {},
 	): Decorator =>
 	(Story, context) => (
 		<div
@@ -318,12 +342,14 @@ export const splitTheme =
 				formats={formats}
 				Story={Story}
 				context={context}
+				hideFormatHeading={hideFormatHeading}
 			/>
 			<Theme
 				colourScheme="dark"
 				formats={formats}
 				Story={Story}
 				context={context}
+				hideFormatHeading={hideFormatHeading}
 			/>
 		</div>
 	);

dotcom-rendering/.storybook/preview.ts

@@ -56,7 +56,7 @@ style.appendChild(document.createTextNode(css));
 // Could this be better? Sure, we could investigate ways to really, truly server side
 // render in Storybook but for now this (and some of the other steps we take around
 // hydration) achieve what we need
-window.guardian = {
+(window as any).guardian = {
 	config: {
 		ophan: {
 			pageViewId: 'mockPageViewId',

dotcom-rendering/docs/architecture/030-amp-removal.md

@@ -0,0 +1,39 @@
+# AMP Removal
+
+## Context
+
+Google AMP is an open-source, website-publishing technology that enables you to create a website that loads almost instantly on mobile devices. AMP stands for “accelerated mobile pages.” Google created AMP so that publishers and businesses could avoid slow-loading web pages that frustrate users.
+
+The pages loaded more quickly for users on constrained devices, and Google’s search algorithm had a requirement that stories that appeared in the top stories carousel would have to be amp pages.
+
+In June 2021 an update to Google's Top Stories algorithm meant AMP was no longer needed to appear in top stories. In November 2021 Twitter phased out support for AMP.
+
+### Negatives
+
+-   Issues with maintaining and updating AMP as a separate platform from a technical perspective
+
+-   User experience impact of sign in & cookies for AMP
+
+-   Design opportunities are limited on AMP
+
+-   The website accessibility and performance improvements we make only affect web/apps
+
+-   Better user experience editorially to land on a Guardian page than an AMP page when coming via Google
+
+-   For contributions AMP is the worst performing platform between Apple News, Web and AMP
+
+More details in [Guardian and AMP](https://docs.google.com/document/d/1LLv_KFP5WVPis7KtWhJQNwZwWyJ_JuH2bDNxkAUymIU/edit?tab=t.0)
+
+## Decision
+
+We switched off AMP for a trial period between 12th August 2024 to 9th September 2024
+
+Following analysis of the trial period we switched off AMP completely on 7th January 2025.
+
+AMP code can now be deleted.
+
+More details in the [chat channel](https://mail.google.com/chat/u/0/#chat/space/AAAA5AQB80w)
+
+## Status
+
+Approved

…p/000-structure-for-initial-milestone.md …0-structure-for-initial-milestone-amp.mddotcom-rendering/docs/architecture/amp/000-structure-for-initial-milestone.md renamed to dotcom-rendering/docs/architecture/historic-adrs/000-structure-for-initial-milestone-amp.md dotcom-rendering/docs/architecture/amp/000-structure-for-initial-milestone.md renamed to dotcom-rendering/docs/architecture/historic-adrs/000-structure-for-initial-milestone-amp.md

@@ -22,15 +22,15 @@ In DCR, we use file suffixes to help provide some context & information around f
 
 **Rendering Target**
 
-DCR supports rendering for different targets - web, apps & amp.
+DCR supports rendering for different targets - web & apps.
 To mark code which is only to be used for specific rendering target, this should be added to the suffix of the file, e.g `MyComponent.apps.tsx`, `MyLib.amp.ts` or `MyLayout.web.tsx`.
 
 These files all still live in the directories, and the suffixes are used to determine which target that code is for.
 In the case that there's no suffix, it can generally be assumed this code can be shared across targets.
 
 > Note: When this was set up, most web code stayed without suffixes, which means there's a chance it's not compatible with other targets, so be vigilant when using shared code on a new target for the first time.
 
-> Note: Some un-suffixed code might be shared across apps & web, but not AMP, or some other combination, so keep an eye out to see if there's a platform specific version of the file you're working on!
+> Note: Some un-suffixed code might be shared across apps & web or some other combination, so keep an eye out to see if there's a platform specific version of the file you're working on!
 
 **Islands / Client side (P)react**
 

dotcom-rendering/docs/contributing/where-should-my-code-live.md

@@ -16,7 +16,3 @@ This is represented in frontend by [DisclaimerBlockElement](https://github.com/g
 ## CAPI HTML Output
 
 This is inserted raw into the document.
-
-## AMP Cleaned HTML
-
-This is run through the BodyCleaner and the AMP cleaners.

dotcom-rendering/docs/elements/Disclaimer.md

@@ -27,14 +27,4 @@ Appears raw.
 
 If an embed uses `<figure>` tag, then the `ShowAllArticleEmbedsSwitch` can be used with `InBodyElementCleaner` to render a reduced subset of embeds.
 
-## AMP Cleaned HTML
-
-The html included in a potential embed may not be permitted by the AMP specification. For each embed that is renedered in an article we can:
-
--   Transform the embed into something which is valid amp.
--   Remove the embed.
--   Fail to render the article in AMP.
-
-The field `isMandatory` should control whether an embed is removed or if the page is. Dotcom does not currently support this API, so currently a workaround is used by central production to force the page to fail amp validation.
-
 ## Salient Points