Crosswords: improved print layout (#13632)

* Ensure clue list gradient hidden when printed

* Update Section to support hiding from print layout

* Hide scroll depth marker elements in print layout

* Add explanatory comment to print scroll depth marker style

Author: jamesmockett

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

@@ -181,6 +181,12 @@ const Layout: CrosswordProps['Layout'] = ({
 							background-image: none;
 						}
 					}
+					@media print {
+						max-height: none;
+						::after {
+							background-image: none;
+						}
+					}
 				`}
 			>
 				<div

dotcom-rendering/src/components/ElementContainer.tsx

@@ -57,6 +57,7 @@ type Props = {
 	containerName?: string;
 	hasPageSkin?: boolean;
 	hasPageSkinContentSelfConstrain?: boolean;
+	hideFromPrintLayout?: boolean;
 };
 
 /**
@@ -83,12 +84,14 @@ export const ElementContainer = ({
 	containerName,
 	hasPageSkin = false,
 	hasPageSkinContentSelfConstrain = false,
+	hideFromPrintLayout = false,
 }: Props) =>
 	jsx(element, {
 		id: ophanComponentName,
 		'data-link-name': ophanComponentLink,
 		'data-component': ophanComponentName,
 		'data-container-name': containerName,
+		'data-print-layout': hideFromPrintLayout ? 'hide' : undefined,
 		style: {
 			backgroundColor: backgroundColour,
 		},

dotcom-rendering/src/components/Section.tsx

@@ -107,6 +107,8 @@ type Props = {
 	/** When there is a page skin in some special cases we still want the container to take full
 	 * width but the content to constrain itself e.g. Header */
 	hasPageSkinContentSelfConstrain?: boolean;
+	/** Defaults to `false`. Indicates section should be hidden when printed */
+	hideFromPrintLayout?: boolean;
 	/**
 	 * @deprecated Do not use
 	 *
@@ -254,6 +256,7 @@ export const Section = ({
 	shouldCenter,
 	hasPageSkin = false,
 	hasPageSkinContentSelfConstrain = false,
+	hideFromPrintLayout = false,
 	className,
 }: Props) => {
 	if (fullWidth) {
@@ -279,6 +282,7 @@ export const Section = ({
 				hasPageSkinContentSelfConstrain={
 					hasPageSkinContentSelfConstrain
 				}
+				hideFromPrintLayout={hideFromPrintLayout}
 			>
 				{children}
 			</ElementContainer>
@@ -302,6 +306,7 @@ export const Section = ({
 			innerBackgroundColour={innerBackgroundColour}
 			hasPageSkin={hasPageSkin}
 			hasPageSkinContentSelfConstrain={hasPageSkinContentSelfConstrain}
+			hideFromPrintLayout={hideFromPrintLayout}
 		>
 			<Flex>
 				<LeftColumn

dotcom-rendering/src/layouts/CrosswordLayout.tsx

@@ -165,7 +165,6 @@ export const CrosswordLayout = (props: Props) => {
 			<main data-layout="InteractiveLayout">
 				<Section
 					fullWidth={true}
-					data-print-layout="hide"
 					showTopBorder={false}
 					backgroundColour={themePalette('--article-background')}
 					borderColour={themePalette('--article-border')}
@@ -359,6 +358,7 @@ export const CrosswordLayout = (props: Props) => {
 					showTopBorder={false}
 					padSides={false}
 					backgroundColour={themePalette('--article-background')}
+					hideFromPrintLayout={true}
 				>
 					<StraightLines
 						count={4}
@@ -407,13 +407,13 @@ export const CrosswordLayout = (props: Props) => {
 					<Section
 						fullWidth={true}
 						sectionId="comments"
-						data-print-layout="hide"
 						element="section"
 						backgroundColour={themePalette(
 							'--discussion-section-background',
 						)}
 						borderColour={themePalette('--article-border')}
 						fontColour={themePalette('--discussion-text')}
+						hideFromPrintLayout={true}
 					>
 						<DiscussionLayout
 							discussionApiUrl={article.config.discussionApiUrl}
@@ -436,7 +436,6 @@ export const CrosswordLayout = (props: Props) => {
 				{renderAds && (
 					<Section
 						fullWidth={true}
-						data-print-layout="hide"
 						padSides={false}
 						showTopBorder={false}
 						showSideBorders={false}
@@ -452,12 +451,7 @@ export const CrosswordLayout = (props: Props) => {
 			</main>
 
 			{props.NAV.subNavSections && (
-				<Section
-					fullWidth={true}
-					data-print-layout="hide"
-					padSides={false}
-					element="aside"
-				>
+				<Section fullWidth={true} padSides={false} element="aside">
 					<Island priority="enhancement" defer={{ until: 'visible' }}>
 						<SubNav
 							subNavSections={props.NAV.subNavSections}
@@ -470,7 +464,6 @@ export const CrosswordLayout = (props: Props) => {
 
 			<Section
 				fullWidth={true}
-				data-print-layout="hide"
 				padSides={false}
 				backgroundColour={sourcePalette.brand[400]}
 				borderColour={sourcePalette.brand[600]}

dotcom-rendering/src/static/css/print.css

@@ -2,3 +2,12 @@
 	display: none !important;
 	color: #000000;
 }
+
+/**
+ * Hide scroll depth markers when printing as these are absolutely positioned
+ * based on the initial content height and are still present when content has
+ * been hidden in the print layout, causing blank pages to be printed.
+ */
+.scroll-depth-marker {
+	display: none;
+}