WIP: Add special report alt card styles

guardian · Oct 19, 2022 · 67f0a14 · 67f0a14
1 parent 9a69dd4
commit 67f0a14
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 0 deletions.
diff --git a/common/app/model/CardStyle.scala b/common/app/model/CardStyle.scala
@@ -7,6 +7,9 @@ sealed trait CardStyle {
 }
 
 case object SpecialReport extends CardStyle { val toneString = fapiutils.CardStyle.specialReport }
+
+// TODO: Add specialReport in fapiutils.CardStyle
+//case object SpecialReportAlt extends CardStyle { val toneString = fapiutils.CardStyle.specialReportAlt }
 case object LiveBlog extends CardStyle { val toneString = fapiutils.CardStyle.live }
 case object DeadBlog extends CardStyle { val toneString = fapiutils.CardStyle.dead }
 case object Feature extends CardStyle { val toneString = fapiutils.CardStyle.feature }
@@ -23,6 +26,7 @@ object CardStyle {
   def make(cardStyle: fapiutils.CardStyle): CardStyle =
     cardStyle match {
       case fapiutils.SpecialReport    => SpecialReport
+//      case fapiutils.SpecialReportAlt => SpecialReportAlt
       case fapiutils.LiveBlog         => LiveBlog
       case fapiutils.DeadBlog         => DeadBlog
       case fapiutils.Feature          => Feature

diff --git a/common/app/views/fragments/containers/facia_cards/standardContainer.scala.html b/common/app/views/fragments/containers/facia_cards/standardContainer.scala.html
@@ -5,6 +5,8 @@
 @import views.support.RenderClasses
 @import conf.switches.Switches.AusRegionSelector
 
+@import views.html.fragments.containers.facia_cards.slice
+@import views.html.fragments.containers.facia_cards.showMoreButton
 @(containerDefinition: layout.FaciaContainer,
   frontProperties: model.FrontProperties,
   maybeContainerModel: Option[ContainerModel],

diff --git a/common/app/views/support/GetClasses.scala b/common/app/views/support/GetClasses.scala
@@ -46,6 +46,7 @@ object GetClasses {
         ("fc-item--pillar-" + item.pillar.nameOrDefault, true),
         ("fc-item--type-" + item.designType.nameOrDefault, true),
         ("fc-item--pillar-special-report", item.cardStyle == SpecialReport),
+//        ("fc-item--pillar-special-report-alt", item.cardStyle == SpecialReportAlt),
         ("fc-item--paid-content", item.branding.exists(_.isPaid)),
         ("fc-item--has-cutout", item.cutOut.isDefined),
         ("fc-item--has-no-image", !item.hasImage),

diff --git a/static/src/stylesheets/_vars.scss b/static/src/stylesheets/_vars.scss
@@ -139,6 +139,13 @@ $labs-main:              #69d1ca;
 // Special report ==============================================================
 $special-report-dark:    #3f464a;
 
+// Special report alt ==========================================================
+$special-report-alt-dark:         #2b2b2a;
+$special-report-alt-main:         #b9300a;
+$special-report-alt-bright:       #ff663d;
+$special-report-alt-pastel:       #ebe6e1;
+$special-report-alt-faded:        #f5f0eb;
+
 
 // Social icons ================================================================
 $social-facebook:        #3067a3;

diff --git a/static/src/stylesheets/module/facia-garnett/_pillars.scss b/static/src/stylesheets/module/facia-garnett/_pillars.scss
@@ -82,6 +82,20 @@ $pillars: (
         cutoutBackground: $highlight-main,
         invertedKicker: $highlight-main,
         liveColour: #ffffff
+    ),
+    special-report-alt: (
+        cardBackground: $special-report-alt-pastel,
+        lines: $special-report-alt-main,
+        kicker: $special-report-alt-bright,
+        headline: $special-report-alt-dark,
+        featureHeadline: $special-report-alt-dark,
+        byline: $special-report-alt-bright,
+        commentCount: $special-report-alt-dark,
+        headlineIcon: $special-report-alt-bright,
+        metaText: $special-report-alt-dark,
+        cutoutBackground: $special-report-alt-dark,
+        invertedKicker: $special-report-alt-bright,
+        liveColour: $special-report-alt-pastel
     )
 );