Incorporate showcase layout into standard

dotcom-rendering/src/grid.ts

@@ -1,9 +1,11 @@
 // ----- Imports ----- //
 
 import {
+	between as betweenBreakpoint,
 	breakpoints,
 	from as fromBreakpoint,
 } from '@guardian/source/foundations';
+import { palette as themePalette } from './palette';
 
 // ----- Columns & Lines ----- //
 
@@ -83,25 +85,82 @@ const paddedContainer = `
     }
 `;
 
-// ----- API ----- //
+// ----- Vertical Rules ----- //
+
+type VerticalRuleOptions = {
+	centre?: boolean;
+};
 
 /**
- * Ask the element to span all grid columns between two grid lines. The lines
- * can be specified either by `Line` name or by number.
- * @param from The grid line to start from, either a `Line` name or a number.
- * @param to The grid line to end at, either a `Line` name or a number.
- * @returns {string} CSS to place the element on the grid.
+ * Render Guardian grid vertical rules.
  *
- * @example <caption>Will place the element in the centre column.</caption>
- * const styles = css`
- *   ${grid.between('centre-column-start', 'centre-column-end')}
- * `;
+ * Left and right rules are always present.
+ * A centre rule can optionally be enabled.
  *
- * @example <caption>Will place the element between lines 3 and 5.</caption>
- * const styles = css`
- *   ${grid.between(3, 5)}
- * `;
+ * Usage:
+ * css([grid.container, grid.verticalRules()])
+ * css([grid.container, grid.verticalRules({ centre: true })])
  */
+const verticalRules = (options: VerticalRuleOptions = {}): string => `
+  ${fromBreakpoint.tablet} {
+    position: relative;
+
+    --centre-transform: translateX(-${columnGap});
+
+    ${fromBreakpoint.leftCol} {
+      --centre-transform: translateX(calc(${columnGap} / -2));
+    }
+
+    &::before,
+    &::after
+    ${options.centre ? ', & > *:first-child::before' : ''} {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 1px;
+      background-color: ${themePalette('--article-border')};
+      pointer-events: none;
+      content: '';
+    }
+
+    /* LEFT OUTER RULE */
+    &::before {
+      grid-column: centre-column-start;
+      justify-self: start;
+      transform: translateX(-${columnGap});
+
+      ${fromBreakpoint.leftCol} {
+        grid-column: left-column-start;
+      }
+    }
+
+    /* RIGHT OUTER RULE */
+    &::after {
+      grid-column: right-column-end;
+      justify-self: start;
+      transform: translateX(-1px);
+
+      ${betweenBreakpoint.tablet.and.desktop} {
+        grid-column: centre-column-end;
+      }
+    }
+
+    ${
+		options.centre
+			? `
+    /* CENTRE RULE */
+    & > *:first-child::before {
+      grid-column: centre-column-start;
+      justify-self: start;
+      transform: var(--centre-transform);
+    }`
+			: ''
+	}
+  }
+`;
+
+// ----- API ----- //
+
 const between = (from: Line | number, to: Line | number): string => `
     grid-column: ${from} / ${to};
 `;
@@ -182,6 +241,8 @@ const grid = {
 	 * breakpoint.
 	 */
 	mobileColumnGap,
+
+	verticalRules,
 } as const;
 
 // ----- Exports ----- //

dotcom-rendering/src/layouts/DecideLayout.tsx

@@ -14,7 +14,6 @@ import { InteractiveLayout } from './InteractiveLayout';
 import { LiveLayout } from './LiveLayout';
 import { NewsletterSignupLayout } from './NewsletterSignupLayout';
 import { PictureLayout } from './PictureLayout';
-import { ShowcaseLayout } from './ShowcaseLayout';
 import { StandardLayout } from './StandardLayout';
 
 interface BaseProps {
@@ -102,7 +101,7 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => {
 					);
 				default:
 					return (
-						<ShowcaseLayout
+						<StandardLayout
 							article={article.frontendData}
 							format={format}
 							renderingTarget={renderingTarget}
@@ -269,7 +268,7 @@ const DecideLayoutWeb = ({ article, NAV, renderingTarget }: WebProps) => {
 					);
 				default:
 					return (
-						<ShowcaseLayout
+						<StandardLayout
 							article={article.frontendData}
 							NAV={NAV}
 							format={format}