@financial-times/o-topper 5.3.1 → 5.4.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [5.4.0](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.3.1...o-topper-v5.4.0) (2022-11-15)
+
+
+### Features
+
+* Updates caption position for improved contrast. Adds additional demos to the registry which were previously missing. [pr 877](https://github.com/Financial-Times/origami/pull/877)
+
 ### [5.3.1](https://www.github.com/Financial-Times/origami/compare/o-topper-v5.3.0...o-topper-v5.3.1) (2022-09-01)
 
 

package/demos/src/demo-snappy.scss

@@ -0,0 +1,4 @@
+
+//next-article is using snappy mode ,remove it when it isn't
+$o-grid-mode: 'snappy';
+@import './demo';

package/demos/src/full-bleed-image-center.mustache

@@ -18,5 +18,6 @@
 			<source media="(min-width: 1220px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/0c368ecb-3d2d-4bf2-be88-2befb42c45f8.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
 			<img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/c41b7e70-fe88-4789-818e-3bacf0f65980.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
 		</picture>
+				<figcaption class="o-topper__image-credit">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo</figcaption>
 	</figure>
 </div>

package/demos/src/full-bleed-image-left.mustache

@@ -18,5 +18,6 @@
 			<source media="(min-width: 1220px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/0c368ecb-3d2d-4bf2-be88-2befb42c45f8.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
 			<img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/https://d1e00ek4ebabms.cloudfront.net/production/c41b7e70-fe88-4789-818e-3bacf0f65980.jpg?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
 		</picture>
+		<figcaption class="o-topper__image-credit">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo</figcaption>
 	</figure>
 </div>

package/demos/src/full-bleed-offset-right-rail.mustache

@@ -0,0 +1,28 @@
+<div class="o-topper o-topper--full-bleed-offset o-topper--right-rail o-topper--color-paper">
+	<div class="o-topper__content">
+		<div class="o-topper__tags">
+			<a href="https://www.ft.com/comment/the-big-read" class="o-topper__brand">
+				The Big Read
+			</a>
+			<a href="https://www.ft.com/topics/people/George_Soros" class="o-topper__topic">
+				George Soros
+			</a>
+		</div>
+		<h1 class="o-topper__headline o-topper__headline--large">
+			<span class="article-classifier__gap">George Soros fights back against populist foes</span>
+		</h1>
+		<div class="o-topper__standfirst">Once a symbol of the spread of democracy in Europe, the billionaire’s foundation is now the target of resurgent nationalism</div>
+	</div>
+
+	<div class="o-topper__background"></div>
+
+	<figure class="o-topper__visual">
+		<picture class="o-topper__picture">
+			<source media="(max-width: 490px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/42da357a-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=490 490w">
+			<source media="(max-width: 1220px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/05fff02c-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1220 1220w">
+			<source media="(min-width: 1220px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/402afdfa-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
+			<img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/05fff02c-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
+		</picture>
+		<figcaption class="o-topper__image-credit">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo © Bloomberg</figcaption>
+	</figure>
+</div>

package/demos/src/full-bleed-offset.mustache

@@ -23,6 +23,6 @@
 			<source media="(min-width: 1220px)" srcset="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/402afdfa-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440 1440w">
 			<img alt="" class="o-topper__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/http://prod-upp-image-read.ft.com/05fff02c-f78e-11e7-8715-e94187b3017e?source=origami-build-tools&amp;fit=scale-down&amp;quality=highest&amp;width=1440">
 		</picture>
-		<figcaption class="o-topper__image-credit">© Bloomberg</figcaption>
+		<figcaption class="o-topper__image-credit">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo © Bloomberg</figcaption>
 	</figure>
 </div>

package/origami.json

@@ -54,6 +54,28 @@
 			"template": "/demos/src/full-bleed-offset.mustache",
 			"description": "This is a theme that editorial can choose, which comes through the API"
 		},
+		{
+			"name": "Full Bleed Offset Right Rail",
+			"title": "Offset Full-Bleed Image Topper",
+			"template": "/demos/src/full-bleed-offset-right-rail.mustache",
+			"description": "This is a theme that editorial can choose, which comes through the API"
+		},
+		{
+			"name": "Full Bleed Offset Snappy Grid",
+			"title": "Offset Full-Bleed Image Topper",
+			"template": "/demos/src/full-bleed-offset.mustache",
+			"description": "This is a theme that editorial can choose, which comes through the API",
+			"sass":"demos/src/demo-snappy.scss",
+			"hidden": true
+		},
+		{
+			"name": "Full Bleed Offset Right Rail Snappy Grid",
+			"title": "Offset Full-Bleed Image Topper",
+			"template": "/demos/src/full-bleed-offset-right-rail.mustache",
+			"description": "This is a theme that editorial can choose, which comes through the API",
+			"sass":"demos/src/demo-snappy.scss",
+			"hidden": true
+		},
 		{
 			"name": "Split Text Left",
 			"title": "Left-Aligned Split Text Topper",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/o-topper",
-  "version": "5.3.1",
+  "version": "5.4.0",
   "description": "Article header styling",
   "keywords": [
     "topper",

package/src/scss/_elements.scss

@@ -41,12 +41,11 @@
 }
 
 @mixin _oTopperImageCredit {
-	@include oTypographySans(-2);
-	color: oColorsByName('white');
-	position: absolute;
-	right: 12px;
-	bottom: 2px;
-	text-shadow: 1px 1px 1px oColorsByName('slate');
+	@include oTypographySans(-1);
+	padding: 10px 11px 0px;
+	@include oGridRespondTo(L) {
+		padding-left: 18px;
+	}
 }
 
 //IE9 support

package/src/scss/_layout.scss

@@ -2,7 +2,6 @@
 	//Basic topper uses the same grid columns as an article, so things can line up.
 	@include _oTopperArticleGrid();
 	margin-bottom: oSpacingByIncrement(5);
-
 	@include oGridRespondTo(L) {
 		grid-template-rows: 20px min-content 60px min-content 20px;
 	}

package/src/scss/_mixins.scss

@@ -237,11 +237,11 @@
 	$foreground: oColorsGetTextColor($background, $opacity: 100);
 	$link-text-color: oColorsByUsecase('link', 'text');
 	$link-contrasts-with-background: oColorsGetContrastRatio($background, $link-text-color) > 4.5;
-
 	// include oTopperColor on a parent then extend this placeholder on a
 	// descendent to lend that descendent the color you specified in the mixin
 	.o-topper__background,
-	.o-topper__content {
+	.o-topper__content,
+	.o-topper__image-credit {
 		background-color: $background;
 	}
 
@@ -293,6 +293,10 @@
 			color: oColorsMix($foreground, $color-name, 73);
 		}
 	}
+	
+	.o-topper__image-credit {
+		color: oColorsMix($foreground, $color-name, 73);
+	}
 
 	@if $color-name == 'paper' or $color-name == 'wheat' {
 		.o-topper__opinion-genre,

package/src/scss/themes/_full-bleed-image.scss

@@ -5,7 +5,12 @@
 	.o-topper__read-next {
 		display: none;
 	}
-
+	.o-topper__background {
+		grid-row: 1;
+	}
+	.o-topper__visual {
+		grid-row: 1 /span 2;
+	}
 	&.o-topper--full-bleed-image-center {
 		@include oGridRespondTo(S) {
 			@include _oTopperAlignText(center);
@@ -26,7 +31,7 @@
 	@include oGridRespondTo(M) {
 		display: grid;
 		grid-template-columns: 1fr 1fr;
-		grid-template-rows: 1fr;
+		grid-template-rows: minmax(auto, 480px) 1fr;
 
 		.o-topper__content {
 			grid-row: 1;
@@ -38,20 +43,31 @@
 			background: transparent;
 		}
 
-		.o-topper__visual {
-			grid-row: 1;
-		}
+		
+	}
+	@include oGridRespondTo(L) {
+		grid-template-rows: minmax(auto, 600px) 1fr;
 	}
 
 	@supports (object-fit: cover) {
 		.o-topper__visual {
 			height: auto;
-			max-height: 480px;
-
+			@include oGridRespondTo(M) {
+				.o-topper__image {
+					height: 480px;
+				}
+			}
 			@include oGridRespondTo(L) {
-				height: 600px;
-				max-height: 600px;
+				.o-topper__image {
+					height: 600px;
+				}
 			}
 		}
 	}
+
+	.o-topper__image-credit {
+		background-color: transparent;
+		color: oColorsByName("black-70");
+		margin-bottom: -20px;
+	}
 }

package/src/scss/themes/_full-bleed-offset.scss

@@ -1,12 +1,30 @@
 // sass-lint:disable mixins-before-declarations
 
 @mixin _oTopperThemeFullBleedOffset {
+	&.o-topper--right-rail {
+		.o-topper__image-credit {
+			@if $o-grid-mode != 'snappy' {
+				@include oGridRespondTo(L) {
+					width: calc(100vw - 720px);
+				}
+			}
+			@include oGridRespondTo(XL) {
+				width: calc(50vw - 110px);
+			}
+		}
+	}
+	
 	display: flex;
 	flex-direction: column;
-
+	
 	@include oGridRespondTo($until: L) {
 		margin: 0 auto;
 		padding: 0;
+
+		.o-topper__background {
+			position: absolute;
+			height: 100%;
+		}
 	}
 
 	.o-topper__read-next {
@@ -30,7 +48,7 @@
 	@include oGridRespondTo(M) {
 		display: grid;
 		grid-template-columns: auto;
-		grid-template-rows: 20px min-content 60px min-content;
+		grid-template-rows: 20px 520px 60px min-content;
 
 		.o-topper__content {
 			grid-column: 1;
@@ -39,15 +57,15 @@
 
 		.o-topper__visual {
 			grid-column: 1;
-			grid-row: 1 / span 3;
+			grid-row: 1 / span 4;
 		}
 	}
 
+
 	//Add extra 20px columns to get the space outside the content well
 	@include oGridRespondTo(L) {
 		grid-template-columns: 40px 0px 20px minmax(500px, 700px) 20px minmax(0, auto) 300px;
 
-		// .o-topper__content {
 		&.o-topper--centered {
 			grid-template-columns: 40px 1fr 0 minmax(500px, 700px) 40px 1fr 40px;
 		}
@@ -63,9 +81,21 @@
 
 		.o-topper__visual {
 			grid-column: 1 / span 7;
+			left: 0px;
+			margin-left: 0px;
+			width: inherit;
+			overflow: visible;
 		}
-	}
 
+		.o-topper__picture {
+			position: relative;
+			width: 100vw;
+			margin-left: -50vw;
+			left: 50%;
+			height: 600px;
+			display: block;
+		}
+	}
 	@include oGridRespondTo(XL) {
 		grid-template-columns: 40px 40px 20px minmax(500px, 700px) 40px minmax(0, auto) 300px;
 	}
@@ -73,19 +103,35 @@
 	@supports (object-fit: cover) {
 		.o-topper__visual {
 			height: auto;
-			max-height: 480px;
-
-			@include oGridRespondTo(L) {
-				height: 600px;
-				max-height: 600px;
-			}
 		}
 	}
+	
+	@include oGridRespondTo( $from: M , $until: L ) {
+		display: flex;
+	}
 
 	.o-topper__image-credit {
-		@include oGridRespondTo($from: M, $until: XL) {
-			bottom: auto;
-			top: 0;
+		text-align: left;
+		@include oGridRespondTo(L) { 
+			box-sizing: border-box;
+			padding-left: 0px;
+			min-width: 320px;
+			transform: translate(20px, 0);
+			width: calc(100vw - 800px);
+			float: right;
 		}
+		@include oGridRespondTo($from: XL) { 
+			transform: translate(calc(50vw - 590px), 0);
+			width: calc(50vw - 250px);
+		}
+		@if $o-grid-mode == 'snappy' {
+			@include oGridRespondTo($from: L, $until: XL) {
+				transform: translate(calc(50vw - 470px), 0);
+				width: calc(50vw - 170px);
+			}
+		}
+		
 	}
+
+	
 }

package/src/scss/themes/_split-text.scss

@@ -13,6 +13,7 @@
 
 	@include oGridRespondTo($until: M) {
 		padding: 0;
+
 		.o-topper__content {
 			display: flex;
 			flex-direction: column;
@@ -23,12 +24,19 @@
 		.o-topper__visual {
 			min-height: 350px;
 		}
+
+		.o-topper__picture {
+			position: relative;
+			width: 100%;
+			height: 350px;
+			float: right;
+		}
 	}
 
 	@include oGridRespondTo(M) {
 		display: grid;
 		grid-template-columns: 1fr 1fr;
-		grid-template-rows: 1fr;
+		grid-template-rows: minmax(0, 480px) 1fr;
 
 		.o-topper__content {
 			grid-column: 1 / span 2;
@@ -39,14 +47,18 @@
 			padding-right: 20px;
 		}
 
-		.o-topper__visual {
+		.o-topper__background {
 			grid-row: 1;
 		}
 
+		.o-topper__visual {
+			grid-row: 1/span 2;
+		}
+
 		.o-topper__picture {
 			width: 50%;
 			float: right;
-			height: 100%;
+			height: auto;
 			position: relative;
 		}
 
@@ -57,6 +69,10 @@
 		}
 	}
 
+	@include oGridRespondTo(L) {
+		grid-template-rows: minmax(0, 600px) 1fr;
+	}
+
 	@supports (object-fit: cover) {
 		.o-topper__image {
 			position: absolute;
@@ -64,12 +80,26 @@
 
 		.o-topper__visual {
 			@include oGridRespondTo(M) {
-				height: 480px;
+				.o-topper__picture {
+					height: 480px;
+				}
 			}
+
 			@include oGridRespondTo(L) {
-				height: 600px;
+				.o-topper__picture {
+					height: 600px;
+				}
 			}
 		}
 	}
 
+	.o-topper__image-credit {
+		background-color: transparent;
+		color: oColorsByName("black-70");
+		position: relative;
+		width: 100%;
+		float: right;
+		box-sizing: border-box;
+		margin-bottom: -20px;
+	}
 }