Add SpecialReportAltPalette

guardian · Nov 2, 2022 · c3278a0 · c3278a0
1 parent 42d4e17
commit c3278a0
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 4 deletions.
diff --git a/dotcom-rendering/src/model/decideContainerPalette.ts b/dotcom-rendering/src/model/decideContainerPalette.ts
@@ -18,5 +18,7 @@ export const decideContainerPalette = (
 	if (palettes?.includes('LongRunningPalette')) return 'LongRunningPalette';
 	if (palettes?.includes('SombrePalette')) return 'SombrePalette';
 	if (palettes?.includes('BreakingPalette')) return 'BreakingPalette';
+	if (palettes?.includes('SpecialReportAltPalette'))
+		return 'SpecialReportAltPalette';
 	return undefined;
 };
diff --git a/dotcom-rendering/src/model/front-schema.json b/dotcom-rendering/src/model/front-schema.json
@@ -2700,7 +2700,8 @@
                 "Podcast",
                 "SombreAltPalette",
                 "SombrePalette",
-                "Special"
+                "Special",
+                "SpecialReportAltPalette"
             ],
             "type": "string"
         },

diff --git a/dotcom-rendering/src/types/front.ts b/dotcom-rendering/src/types/front.ts
@@ -81,11 +81,11 @@ export type FEContainerPalette =
 	| 'Dynamo'
 	| 'Special'
 	| 'DynamoLike'
-	| 'Special'
 	| 'Breaking'
 	| 'Podcast'
 	| 'Branded'
-	| 'BreakingPalette';
+	| 'BreakingPalette'
+	| 'SpecialReportAltPalette';
 
 export type DCRContainerPalette =
 	| 'EventPalette'
@@ -95,7 +95,8 @@ export type DCRContainerPalette =
 	| 'LongRunningAltPalette'
 	| 'LongRunningPalette'
 	| 'SombrePalette'
-	| 'BreakingPalette';
+	| 'BreakingPalette'
+	| 'SpecialReportAltPalette';
 
 // TODO: These may need to be declared differently than the front types in the future
 export type DCRContainerType = FEContainerType;

diff --git a/dotcom-rendering/src/web/components/Card/components/CardWrapper.tsx b/dotcom-rendering/src/web/components/Card/components/CardWrapper.tsx
@@ -67,6 +67,8 @@ const cardStyles = (
 				return `90%`;
 			case 'SombreAltPalette':
 				return `85%`;
+			case 'SpecialReportAltPalette':
+				return `95%`;
 			default:
 				return `90%`;
 		}

diff --git a/dotcom-rendering/src/web/components/Palettes.stories.tsx b/dotcom-rendering/src/web/components/Palettes.stories.tsx
@@ -156,3 +156,20 @@ export const InvestigationPalette = () => (
 		/>
 	</Section>
 );
+
+export const SpecialReportAltPalette = () => (
+	<Section
+		title="SpecialReportAltPalette"
+		padContent={false}
+		centralBorder="partial"
+		containerPalette="SpecialReportAltPalette"
+		showDateHeader={true}
+		editionId={'UK'}
+	>
+		<DynamicFast
+			groupedTrails={groupedTrails}
+			containerPalette="SpecialReportAltPalette"
+			showAge={true}
+		/>
+	</Section>
+);
diff --git a/dotcom-rendering/src/web/lib/decideContainerOverrides.ts b/dotcom-rendering/src/web/lib/decideContainerOverrides.ts
@@ -1,5 +1,7 @@
 import type { DCRContainerPalette } from '../../types/front';
 import type { ContainerOverrides } from '../../types/palette';
+import { transparentColour } from './transparentColour';
+import { neutral } from '@guardian/source-foundations';
 
 const textCardHeadline = (containerPalette: DCRContainerPalette): string => {
 	switch (containerPalette) {
@@ -19,6 +21,8 @@ const textCardHeadline = (containerPalette: DCRContainerPalette): string => {
 			return '#041F4A';
 		case 'EventAltPalette':
 			return '#041F4A';
+		case 'SpecialReportAltPalette':
+			return '#2b2b2a';
 	}
 };
 
@@ -43,6 +47,8 @@ const textCardKicker = (containerPalette: DCRContainerPalette): string => {
 			return '#c70000';
 		case 'EventAltPalette':
 			return '#e2352d';
+		case 'SpecialReportAltPalette':
+			return '#2b2b2a';
 	}
 };
 
@@ -66,6 +72,8 @@ const textContainerDate = (containerPalette: DCRContainerPalette): string => {
 			return '#c70000';
 		case 'EventAltPalette':
 			return '#c70000';
+		case 'SpecialReportAltPalette':
+			return '#2b2b2a';
 	}
 };
 
@@ -89,6 +97,8 @@ const textCardCommentCount = (
 			return '#707070';
 		case 'EventAltPalette':
 			return '#333333';
+		case 'SpecialReportAltPalette':
+			return '#2b2b2a';
 	}
 };
 
@@ -110,6 +120,8 @@ const textDynamoHeadline = (containerPalette: DCRContainerPalette): string => {
 			return '#041F4A';
 		case 'EventAltPalette':
 			return '#041F4A';
+		case 'SpecialReportAltPalette':
+			return '#2b2b2a';
 	}
 };
 
@@ -131,6 +143,8 @@ const textDynamoKicker = (containerPalette: DCRContainerPalette): string => {
 			return '#c70000';
 		case 'EventAltPalette':
 			return '#c70000';
+		case 'SpecialReportAltPalette':
+			return '#121212';
 	}
 };
 
@@ -154,6 +168,8 @@ const textDynamoSublinkKicker = (
 			return '#c70000';
 		case 'EventAltPalette':
 			return '#c70000';
+		case 'SpecialReportAltPalette':
+			return '#121212';
 	}
 };
 
@@ -175,6 +191,8 @@ const textDynamoMeta = (containerPalette: DCRContainerPalette): string => {
 			return '#ededed';
 		case 'EventAltPalette':
 			return '#ededed';
+		case 'SpecialReportAltPalette':
+			return '#f5f0eb';
 	}
 };
 
@@ -196,6 +214,8 @@ const textContainer = (containerPalette: DCRContainerPalette): string => {
 			return '#041F4A';
 		case 'EventAltPalette':
 			return '#041f4a';
+		case 'SpecialReportAltPalette':
+			return '#2b2b2a';
 	}
 };
 
@@ -217,6 +237,8 @@ const textContainerToggle = (containerPalette: DCRContainerPalette): string => {
 			return '#707070';
 		case 'EventAltPalette':
 			return '#707070';
+		case 'SpecialReportAltPalette':
+			return '#999999';
 	}
 };
 
@@ -238,6 +260,8 @@ const borderContainer = (containerPalette: DCRContainerPalette): string => {
 			return 'rgba(0,0,0, 0.2)';
 		case 'EventAltPalette':
 			return 'rgba(0,0,0, 0.2)';
+		case 'SpecialReportAltPalette':
+			return transparentColour(neutral[60], 0.3);
 	}
 };
 
@@ -261,6 +285,8 @@ const backgroundContainer = (containerPalette: DCRContainerPalette): string => {
 			return '#f1f8fc';
 		case 'EventAltPalette':
 			return '#fbf6ef';
+		case 'SpecialReportAltPalette':
+			return '#f5f0eb';
 	}
 };
 
@@ -282,6 +308,8 @@ const backgroundCard = (containerPalette: DCRContainerPalette): string => {
 			return '#ededed';
 		case 'EventAltPalette':
 			return '#efe8dd';
+		case 'SpecialReportAltPalette':
+			return '#ebe6e1';
 	}
 };