add highlights layout definition for container layout

guardian · May 28, 2024 · 7cfd5c2 · 7cfd5c2
1 parent 003b76f
commit 7cfd5c2
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git a/app/slices/FixedContainers.scala b/app/slices/FixedContainers.scala
@@ -15,7 +15,7 @@ class FixedContainers(val config: ApplicationConfiguration) {
 
  val showcase = slices(ShowcaseSingleStories)
  val thrasher = slices(Fluid).copy(customCssClasses = Set("fc-container--thrasher"))
- val highlights = slices(QuarterQuarterQuarterQuarter)
+ val highlights = slices(Highlights)
  val video = slices(TTT).copy(customCssClasses = Set("fc-container--video"))
 
  val all: Map[String, ContainerDefinition] = Map(

diff --git a/app/slices/Slice.scala b/app/slices/Slice.scala
@@ -903,3 +903,44 @@ case object ShowcaseSingleStories extends Slice {
  ),
  )
 }
+
+
+/*
+ * The Highlights layout is used to display select features above the title piece for apps and web
+ * 
+ * .___________.___________.___________.
+ * | | | |
+ * | | | |
+ * |_#########_|_#########_|_#########_|
+ * |_#########_|_#########_|_#########_|
+ * |_#########_|_#########_|_#########_|
+ * `-----------------------------------'
+ */
+case object Highlights extends Slice {
+ val layout = SliceLayout(
+ // cssClassName = "t-t-t",
+ columns = Seq(
+ SingleItem(
+ colSpan = 1,
+ ItemClasses(
+ mobile = Half,
+ tablet = Third
+ )
+ ),
+ SingleItem(
+ colSpan = 1,
+ ItemClasses(
+ mobile = Half,
+ tablet = Third
+ )
+ ),
+ SingleItem(
+ colSpan = 1,
+ ItemClasses(
+ mobile = Half,
+ tablet = Third
+ )
+ )
+ )
+ )
+}