THUB-15: Banner variants (#13)

* THUB-15: initial commit

* THUB-15: setting up the variants

* THUB-15: removed the top banner as an option

* THUB-15: overlay banner

* THUB-15: banner fixup

src/scss/components/banner/_overlay-banner.scss

@@ -0,0 +1,124 @@
+@charset "UTF-8";
+
+.thub-wrapper--banner-overlay {
+    background: $su-color-black url("../assets/png/banner-bg.jpg") no-repeat 100% / cover;
+
+    // Border top.
+    &::before {
+        background: $thub-gradient-lagunita-to-ochre-to-red;
+        height: 3px;
+        border-radius: 1.5px;
+        display: block;
+        content: ' ';
+    }
+
+    .su-hero {
+        display: flex;
+        justify-content: flex-start;
+        flex-direction: column;
+
+        @include grid-media-min('lg') {
+            flex-direction: row;
+        }
+    }
+
+    .su-hero__card {
+        max-width: 500px;
+        background: transparent;
+        border: none;
+        box-shadow: none;
+
+        section.su-card__contents {
+            color: $su-color-white;
+
+            div.su-card__superhead {
+                @include slab;
+
+                font-weight: $su-font-regular;
+                font-size: 1.7rem;
+            }
+
+            h2,
+            h3 {
+                @include thub-type-b;
+            }
+
+            p {
+                font-size: 2.1rem;
+                line-height: 1.5;
+
+                a {
+                    @include thub-type-link;
+                }
+            }
+
+            a.su-link--action {
+                @include thub-type-link;
+            }
+        }
+    }
+
+    .su-hero__media {
+        right: 0;
+        width: fit-content;
+        min-height: 370px;
+        position: relative;
+        background: transparent;
+
+        @include grid-media-max('md') {
+            aspect-ratio: 11/11;
+        }
+
+        @include grid-media-min('lg') {
+            position: absolute;
+            width: 50%;
+        }
+    }
+
+    // Left text
+    .overlay-left {
+        .su-hero__card {
+            left: 3%;
+            max-width: 500px;
+
+            @include grid-media-max('lg') {
+                width: calc(50% - 70px);
+            }
+
+            @include grid-media-max('md') {
+                width: calc(100% - 70px);
+            }
+        }
+    }
+
+    // Right text
+    .overlay-right {
+        .su-hero__media {
+            right: unset;
+        }
+
+        @include grid-media-max('md') {
+            .su-hero__card {
+                left: 45px;
+                margin-left: inherit;
+                right: 45px;
+            }
+        }
+
+        .su-hero__card {
+            right: 3%;
+            max-width: 500px;
+
+            @include grid-media-max('lg') {
+                width: calc(50% - 70px);
+            }
+
+            @include grid-media-max('md') {
+                width: calc(100% - 70px);
+            }
+        }
+    }
+}
+
+
+

src/scss/components/banner/index.scss

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+// Banner rollup file.
+
+@import 'overlay-banner';

src/scss/components/index.scss

@@ -22,6 +22,7 @@
 // Components.
 // @import 'component-name/index';
 
+@import 'banner/index';
 @import 'brand-bar/index';
 @import 'card/index';
 @import 'hero-banner/index';

src/scss/components/local-footer/_local-footer.scss

@@ -16,6 +16,14 @@
     background: $thub-gradient-lagunita-to-ochre-to-red;
     height: 3px;
     border-radius: 1.5px;
+
+    @include grid-media-max('sm') {
+      width: calc(100% - 40px);
+    }
+
+    @include grid-media-max('md') {
+      width: calc(100% - 100px);
+    }
   }
 
 

src/scss/utilities/mixins/_links.scss

@@ -0,0 +1,22 @@
+@charset "UTF-8";
+
+
+@mixin thub-type-link {
+    color: $thub-color-ochre-light;
+    text-decoration: none;
+
+    &::after {
+      background-color: $thub-color-ochre-light;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+        color: $su-color-white;
+        text-decoration: underline;
+
+      &::after {
+        background-color: $su-color-white;
+      }
+    }
+  }

src/scss/utilities/mixins/index.scss

@@ -11,4 +11,5 @@
 @import 'cta';
 @import 'headings';
 @import 'link-icon';
+@import 'links';
 @import 'typography';

taiwan_hub_subtheme.react_behaviors.yml

@@ -0,0 +1,15 @@
+# Example react_behaviors plugin definitions.
+# Plugin property $defaults are defined in ReactBehaviorsPluginManager.
+banner_variant_info:  # part of the key after the :
+  id: banner_type
+  label: 'Banner Paragraphs Type'
+  bundles:
+    - paragraphs_type|stanford_banner
+  config:
+    banner_style:
+      type: select
+      title: 'Banner style'
+      description: Select the button color for displaying this banner.
+      options:
+        thub-wrapper--banner-default: Default variant
+        thub-wrapper--banner-overlay: Overlay variant

taiwan_hub_subtheme.theme

@@ -23,9 +23,9 @@ function taiwan_hub_subtheme_theme_suggestions_block_alter(array &$suggestions,
 
 function taiwan_hub_subtheme_preprocess_page(&$variables) {
   $variables['add_curved_background'] = TRUE;
-  
+
   if(
-    isset($variables['node']) && 
+    isset($variables['node']) &&
     $variables['node'] instanceof \Drupal\node\NodeInterface &&
     $variables['node']->hasField('su_page_banner') &&
     $variables['node']->get('su_page_banner')->count()
@@ -38,3 +38,54 @@ function taiwan_hub_subtheme_preprocess_page(&$variables) {
     }
   }
 }
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function taiwan_hub_subtheme_preprocess_ds_entity_view(&$variables) {
+  // if not running on a paragraph, exit out.
+  if (!isset($variables['content']['#paragraph'])) {
+    return;
+  }
+
+  $paragraph = $variables['content']['#paragraph'];
+
+  // Process Cards
+  if ($paragraph->bundle() == 'stanford_card') {
+    taiwan_hub_subtheme_preprocess_card($variables);
+  }
+
+  // Process Banners
+  if ($paragraph->bundle() == 'stanford_banner') {
+    taiwan_hub_subtheme_preprocess_banner($variables);
+  }
+}
+
+
+/**
+ * Implements hook_preprocess_card().
+ */
+function taiwan_hub_subtheme_preprocess_card(&$variables) {
+
+  $paragraph = $variables['content']['#paragraph'];
+
+  // Add border style class to card wrapper.
+  $variables['attributes']['class'][] = $paragraph->getBehaviorSetting('react_paragraphs:card_variant_info', 'card_border_style', 'su-card-wrapper--border-regular');
+
+  $card_info = [];
+
+  // Add card type class to card wrapper. 3rd variable provides the default card type.
+  $card_info['card_type'] = $paragraph->getBehaviorSetting('react_paragraphs:card_variant_info', 'card_type', 'su-card-wrapper--default');
+  $variables['attributes']['class'][] = $card_info['card_type'];
+}
+
+/**
+ * Implements hook_preprocess_banner().
+ */
+function taiwan_hub_subtheme_preprocess_banner(&$variables) {
+
+  $paragraph = $variables['content']['#paragraph'];
+
+  // Add button color style class to card wrapper.
+  $variables['attributes']['class'][] = $paragraph->getBehaviorSetting('react_paragraphs:banner_variant_info', 'banner_style', 'thub-wrapper--banner-default');
+}