Merge pull request #27444 from guardian/ei/test-gallery-interscroller…

…s-beta Enable interscroller ads on galleries
guardian · Aug 29, 2024 · a386a37 · a386a37
2 parents 92ce68d + f996a25
commit a386a37
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
 		"@emotion/react": "11.11.1",
 		"@emotion/styled": "^10.0.27",
 		"@guardian/ab-core": "8.0.0",
-		"@guardian/commercial": "20.6.4",
+		"@guardian/commercial": "20.7.0",
 		"@guardian/core-web-vitals": "6.0.0",
 		"@guardian/eslint-config-typescript": "9.0.1",
 		"@guardian/identity-auth": "3.0.0",

diff --git a/static/src/stylesheets/module/_adslot.scss b/static/src/stylesheets/module/_adslot.scss
@@ -631,14 +631,14 @@
     font-family: 'Guardian Text Sans Web', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
 }
 
-.ad-slot--dark[data-label-show='true']::before {
+.ad-slot--dark[data-label-show='true']:not(.ad-slot--interscroller)::before {
     @include font-size(12, 20);
     content: attr(ad-label-text);
     display: block;
     visibility: visible;
     position: relative;
     height: $mpu-ad-label-height;
-    background-color: transparent;
+    background-color: $brightness-7;
     border-top: 1px solid $brightness-20;
     color: $brightness-86;
     text-align: center;
@@ -647,6 +647,7 @@
 }
 
 .ad-slot--interscroller[data-label-show='true']::before {
+    @include font-size(12, 20);
     content: 'Advertisement';
     display: block;
     visibility: visible;
@@ -664,6 +665,12 @@
     right: 0px;
 }
 
+.ad-slot--interscroller[data-label-show='true'].ad-slot--dark::before {
+    background-color: $brightness-7;
+    border-top: 1px solid $brightness-20;
+    color: $brightness-86;
+}
+
 .ad-slot__adtest-cookie-clear-link {
     @include font-size(12, 20);
     font-family: 'Guardian Text Sans Web', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;

diff --git a/static/src/stylesheets/module/commercial/_creatives.scss b/static/src/stylesheets/module/commercial/_creatives.scss
@@ -732,7 +732,7 @@
     padding: 0 math.div($gs-baseline, 3)*2;
     border-top: 1px solid $brightness-86;
     color: $brightness-46;
-    text-align: left;
+    text-align: center;
     box-sizing: border-box;
     font-family: $f-sans-serif-text;
     display: block;
@@ -741,3 +741,8 @@
     width: 100%;
 }
 
+.ad-slot__scroll.ad-slot--dark {
+    background-color: $brightness-7;
+    border-top: 1px solid $brightness-20;
+    color: $brightness-86;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -4039,9 +4039,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@guardian/commercial@npm:20.6.4":
-  version: 20.6.4
-  resolution: "@guardian/commercial@npm:20.6.4"
+"@guardian/commercial@npm:20.7.0":
+  version: 20.7.0
+  resolution: "@guardian/commercial@npm:20.7.0"
   dependencies:
     "@changesets/cli": "npm:^2.26.2"
     "@guardian/prebid.js": "npm:8.52.0-1"
@@ -4061,7 +4061,7 @@ __metadata:
     "@guardian/libs": ^18.0.0
     "@guardian/source": ^6.0.0
     typescript: ~5.5.3
-  checksum: 10c0/0d427a94cb7718fcc610fd2f9ceb7f61684d0c9e21a4721741aa0a17bbd90e509591bf277393911c3c249ac41447b4e5af4ef55cf37d314fb792f330162f7f20
+  checksum: 10c0/8853101713dfdc7c7a7e5f4d9b86cd8a0dc494b3b8975ca764414aa93d21e74b1993e90aae845aaaf519b2b54eb67e4ef0628e91c28c2dbba584f28411868c19
   languageName: node
   linkType: hard
 
@@ -4134,7 +4134,7 @@ __metadata:
     "@emotion/react": "npm:11.11.1"
     "@emotion/styled": "npm:^10.0.27"
     "@guardian/ab-core": "npm:8.0.0"
-    "@guardian/commercial": "npm:20.6.4"
+    "@guardian/commercial": "npm:20.7.0"
     "@guardian/core-web-vitals": "npm:6.0.0"
     "@guardian/eslint-config-typescript": "npm:9.0.1"
     "@guardian/identity-auth": "npm:3.0.0"