SDSS-1157: Circle backgrounds on News Spotlight. (#344)

* SDSS-1157: stashing work in progress.

* SDSS-1157: adding circles to a spotlight.

* SDSS-1157: fix to circle alignment

* needs design approval

docroot/profiles/sdss/sdss_profile/modules/sdss_layout_paragraphs/src/Plugin/Layout/SdssLayoutParagraphBase.php

@@ -22,6 +22,7 @@ public function defaultConfiguration() {
     $configuration = parent::defaultConfiguration();
     return $configuration + [
       'bg_color' => $this->getDefaultBgColor(),
+      'bg_image' => $this->getDefaultBgImage(),
     ];
   }
 
@@ -36,6 +37,13 @@ public function buildConfigurationForm(array $form, FormStateInterface $form_sta
       '#options' => $this->getBgColorOptions(),
       '#description' => $this->t('Choose the background color for this layout.'),
     ];
+    $form['bg_image'] = [
+      '#type' => 'select',
+      '#title' => $this->t('Background image'),
+      '#default_value' => $this->configuration['bg_image'],
+      '#options' => $this->getBgImageOptions(),
+      '#description' => $this->t('Choose the background image for this layout.'),
+    ];
     return parent::buildConfigurationForm($form, $form_state);
   }
 
@@ -45,6 +53,7 @@ public function buildConfigurationForm(array $form, FormStateInterface $form_sta
   public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {
     parent::submitConfigurationForm($form, $form_state);
     $this->configuration['bg_color'] = $form_state->getValue('bg_color');
+    $this->configuration['bg_image'] = $form_state->getValue('bg_image');
   }
 
   /**
@@ -56,6 +65,10 @@ public function build(array $regions) {
       $build['#attributes']['class'][] = 'layout-paragraphs-sdss-bgcolor';
       $build['#attributes']['class'][] = 'layout-paragraphs-sdss-bgcolor--' . $this->configuration['bg_color'];
     }
+    if($this->configuration['bg_image'] !== 'none') {
+      $build['#attributes']['class'][] = 'layout-paragraphs-sdss-bgimage';
+      $build['#attributes']['class'][] = 'layout-paragraphs-sdss-bgimage--' . $this->configuration['bg_image'];
+    }
     return $build;
   }
 
@@ -80,6 +93,13 @@ protected function getBgColorOptions() {
     ];
   }
 
+  protected function getBgImageOptions() {
+    return $array = [
+      'none' => '- None -',
+      'circles' => 'Circles',
+    ];
+  }
+
   /**
    * Provides a default value for the background color options.
    *
@@ -91,4 +111,10 @@ protected function getDefaultBgColor() {
     $bg_color_classes = array_keys($this->getBgColorOptions());
     return array_shift($bg_color_classes);
   }
+
+  protected function getDefaultBgImage() {
+    // Return the first available key from the list of options.
+    $bg_image_classes = array_keys($this->getBgImageOptions());
+    return array_shift($bg_image_classes);
+  }
 }

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/components/newsroom/_spotlight.scss

@@ -75,3 +75,68 @@
     }
   }
 }
+
+// Circle backgrounds for spotlight only on XL and up.
+@include grid-media-min('xl') {
+  .layout--layout-paragraphs-one-column {
+    &.layout-paragraphs-sdss-bgimage--circles {
+      .sdss-spotlight {
+        background: url("../../assets/svg/spotlight-circle-background--D5D5D4.svg") no-repeat;
+        background-position: bottom;
+        padding-top: 50px;
+      }
+    }
+
+    &.layout-paragraphs-sdss-bgcolor--green,
+    &.layout-paragraphs-sdss-bgcolor--blue,
+    &.layout-paragraphs-sdss-bgcolor--grey {
+      .sdss-spotlight {
+        background: url("../../assets/svg/spotlight-circle-background--fff.svg") no-repeat;
+        background-position: bottom;
+      }
+    }
+  }
+
+  // On the Newsroom landing page. The title is hidden with .sr-only
+  // and the margin-top needs to be removed. A class is added to the layout: .newsroom-title-hidden
+  // It need to only happen, when the cirlces appear.
+
+  .jumpstart-ui--one-column {
+    &.newsroom-title-hidden {
+      &.centered-content {
+        .node-stanford-page-title {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+}
+
+// Making sure text is visible on green
+.layout--layout-paragraphs-one-column {
+  &.layout-paragraphs-sdss-bgcolor--green {
+    .sdss-spotlight {
+      .news-vertical-teaser__pub-date,
+      h2 {
+        color: $su-color-white;
+      }
+
+      a h2 {
+        &:active,
+        &:hover,
+        &:focus {
+          color: $sdss-color-blue-bright;
+        }
+      }
+
+      .su-news-vertical-teaser.su-card {
+        .news-vertical-teaser__topics {
+          a {
+            color: $su-color-white;
+          }
+        }
+      }
+    }
+  }
+}
+