Merge pull request #761 from springernature/update-nature-hero

Update nature hero
springernature · Jul 1, 2022 · f6f0f14 · f6f0f14
2 parents 32aec20 + 28b19c7
commit f6f0f14
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 9 deletions.
diff --git a/toolkits/nature/packages/nature-hero/HISTORY.md b/toolkits/nature/packages/nature-hero/HISTORY.md
@@ -1,5 +1,10 @@
 # History
 
+## 3.0.0 (2022-06-29)
+    * BREAKING: 
+        * Update brand-context (Node Sass to Dart Sass)
+        * Removes dependency on utility classnames
+
 ## 2.1.4 (2022-03-23)
     * BUG: Improve wording of template / demo links on README
 

diff --git a/toolkits/nature/packages/nature-hero/demo/dist/index.html b/toolkits/nature/packages/nature-hero/demo/dist/index.html
@@ -3,6 +3,7 @@
     		(function(e){var t=e.documentElement,n=e.implementation;t.className='js';})(document)
 		</script>
 		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title>@springernature/nature-hero</title>
 		<style>
 			@charset "UTF-8";
@@ -1257,6 +1258,7 @@
 .c-hero {
   position: relative;
   color: white;
+  margin-bottom: 16px;
 }
 @supports (display: flex) {
   @media only screen and (min-width: 768px) {
@@ -1278,6 +1280,14 @@
   display: block;
   color: inherit;
 }
+.c-hero__link::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
 .c-hero__link:hover, .c-hero__link:visited {
   color: inherit;
 }
@@ -1777,7 +1787,7 @@
 		</style>
 	</head>
 	<body style="padding:2%">
-		<div class="c-hero c-hero--flush-md-max u-mb-16 u-position-relative">
+		<div class="c-hero c-hero--flush-md-max">
 			<div class="c-hero__image">
 				<picture>
 					<source type="image/webp" srcset="../img/hero.webp 450w, ../img/hero.webp 735w" sizes="(max-width: 1024px) 450px, (max-width: 100vw) 735px 735px">
@@ -1786,11 +1796,12 @@
 			</div>
 			<div class="c-hero__copy">
 				<h2 class="c-hero__title">
-					<a class="c-hero__link u-link-faux-block" href="/" data-track="click" data-track-action="view announcement" data-track-label="link">Webb telescope reaches its final destination far from Earth</a>
+					<a class="c-hero__link" href="/" data-track="click" data-track-action="view announcement" data-track-label="link">Webb telescope reaches its final destination far from Earth</a>
 				</h2>
 				<p class="c-hero__summary">The ambitious observatory has arrived at its home — near a gravitationally stable spot called L2 — for a premier view of the Universe.</p>
 			</div>
-		</div>		<script>
+		</div>
+		<script>
 			// no JS found for package
 		</script>
 

diff --git a/toolkits/nature/packages/nature-hero/package.json b/toolkits/nature/packages/nature-hero/package.json
@@ -1,9 +1,9 @@
 {
     "name": "@springernature/nature-hero",
-    "version": "2.1.4",
+    "version": "3.0.0",
     "license": "MIT",
     "description": "The Nature Hero component appears at the top of the page on all Nature journal sites.",
     "keywords": [],
     "author": "Springer Nature",
-    "brandContext": "^18.0.0"
+    "brandContext": "^24.0.0"
 }
diff --git a/toolkits/nature/packages/nature-hero/scss/50-components/hero.scss b/toolkits/nature/packages/nature-hero/scss/50-components/hero.scss
@@ -1,6 +1,7 @@
 .c-hero {
 	position: relative;
 	color: $hero--color;
+	margin-bottom: spacing(16);
 
 	@supports (display: flex) {
 		@include media-query('md') {
@@ -18,7 +19,7 @@
 }
 
 .c-hero__link {
-	display: block;
+	@include u-link-faux-block;
 	color: inherit;
 
 	&:hover,

diff --git a/toolkits/nature/packages/nature-hero/view/hero.hbs b/toolkits/nature/packages/nature-hero/view/hero.hbs
@@ -1,4 +1,4 @@
-<div class="c-hero{{#if flushMdMax}} c-hero--flush-md-max{{/if}} u-mb-16 u-position-relative">
+<div class="c-hero{{#if flushMdMax}} c-hero--flush-md-max{{/if}}">
 	<div class="c-hero__image">
 		<picture>
 			<source type="{{picture.type}}" srcset="{{picture.srcset}}" sizes="{{picture.sizes}}">
@@ -7,8 +7,8 @@
 	</div>
 	<div class="c-hero__copy">
 		<h2 class="c-hero__title">
-			<a class="c-hero__link u-link-faux-block" href="{{title.uri}}" data-track="click" data-track-action="{{title.dataTrackAction}}" data-track-label="link">{{title.text}}</a>
+			<a class="c-hero__link" href="{{title.uri}}" data-track="click" data-track-action="{{title.dataTrackAction}}" data-track-label="link">{{title.text}}</a>
 		</h2>
 		<p class="c-hero__summary">{{summary}}</p>
 	</div>
-</div>
+</div>