Merge pull request #1582 from guardian/add-highlights-container

Add new "highlights" container layout
guardian · May 30, 2024 · 4f11831 · 4f11831
2 parents 0f60691 + 91ab085
commit 4f11831
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 1 deletion.
diff --git a/app/slices/FixedContainers.scala b/app/slices/FixedContainers.scala
@@ -15,6 +15,7 @@ class FixedContainers(val config: ApplicationConfiguration) {
 
   val showcase = slices(ShowcaseSingleStories)
   val thrasher = slices(Fluid).copy(customCssClasses = Set("fc-container--thrasher"))
+  val highlights = slices(Highlights)
   val video = slices(TTT).copy(customCssClasses = Set("fc-container--video"))
 
   val all: Map[String, ContainerDefinition] = Map(
@@ -34,6 +35,7 @@ class FixedContainers(val config: ApplicationConfiguration) {
     ("fixed/video", video),
     ("fixed/video/vertical", video),
     ("fixed/thrasher", thrasher),
+    ("fixed/highlights", highlights),
     ("fixed/showcase", showcase)
   ) ++ (if (config.faciatool.showTestContainers) Map(
     ("all-items/not-for-production", slices(FullMedia100, FullMedia75, FullMedia50, HalfHalf, QuarterThreeQuarter, ThreeQuarterQuarter, Hl4Half, HalfQuarterQl2Ql4, TTTL4, Ql3Ql3Ql3Ql3))

diff --git a/app/slices/Slice.scala b/app/slices/Slice.scala
@@ -903,3 +903,52 @@ case object ShowcaseSingleStories extends Slice {
     ),
   )
 }
+
+
+/*
+ * The Highlights layout is used to display select features in the header for apps and web
+ * 
+ * Desktop:
+ * .____________.____________.____________.
+ * |       #####|       #####|       #####|
+ * |       #####|       #####|       #####|
+ * |       #####|       #####|       #####|
+ * '--------------------------------------'
+ * 
+ * Mobile:
+ * .___________.___________.___________.
+ * |           |           |           |
+ * |           |           |           |
+ * |_#########_|_#########_|_#########_|
+ * |_#########_|_#########_|_#########_|
+ * |_#########_|_#########_|_#########_|
+ * `-----------------------------------'
+ */
+case object Highlights extends Slice {
+  val layout = SliceLayout(
+    cssClassName = "t-t-t",
+    columns = Seq(
+      SingleItem(
+        colSpan = 1,
+        ItemClasses(
+          mobile = Standard,
+          tablet = MediaList
+        )
+      ),
+      SingleItem(
+        colSpan = 1,
+        ItemClasses(
+          mobile = Standard,
+          tablet = MediaList
+        )
+      ),
+      SingleItem(
+        colSpan = 1,
+        ItemClasses(
+          mobile = Standard,
+          tablet = MediaList
+        )
+      )
+    )
+  )
+}
diff --git a/public/src/js/constants/defaults.js b/public/src/js/constants/defaults.js
@@ -60,7 +60,8 @@ export default {
         { name: 'nav/media-list' },
         { name: 'news/most-popular' },
         { name: 'breaking-news/not-for-other-fronts', groups: ['minor', 'major'] },
-        { 'name': 'fixed/showcase' }
+        { 'name': 'fixed/showcase' },
+        { name: 'fixed/highlights' }
     ],
 
     emailTypes: [