CHEMH-77: A fullpill banner

chem_h_subtheme.react_behaviors.yml

@@ -36,6 +36,7 @@ banner_variant_info:  # part of the key after the :
 #      default_value: chemh-wrapper--banner-default
       options:
         chemh-wrapper--banner-default: Default variant
+        chemh-wrapper--banner-fullpill: Fullpill variant
         chemh-wrapper--banner-halfpill: Halfpill variant
         chemh-wrapper--banner-homepage: Homepage variant
 

chem_h_subtheme.theme

@@ -136,13 +136,6 @@ function chem_h_subtheme_preprocess_card(&$variables) {
   // 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'];
-
-  $imageCount = $paragraph->get('su_card_media')->count();
-
-  // Check for media in a card then set classes.
-  if (!$imageCount) {
-    return;
-  }
 }
 
 /**

src/scss/components/banner/_banner--fullpill.scss

@@ -0,0 +1,143 @@
+@charset "UTF-8";
+
+$banner-circle--image-width: 200px;
+$banner-circle--sm-image-width: 150px;
+
+
+.chemh-wrapper--banner-fullpill {
+  max-width: calc(100vw - 200px);
+  margin: 0 auto;
+
+  .su-hero {
+    background: $su-color-black url("../../assets/svg/fullpill-bg.svg") no-repeat 100% / 200%;
+    border-radius: 300px;
+    color: $su-color-white;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    min-height: 400px;
+
+    @include grid-media-max('md') {
+      background: $su-color-black url("../../assets/svg/fullpill-bg.svg") no-repeat 100% / 205%;
+
+      @include modular-spacing('padding', 3);
+    }
+
+    @include grid-media-max('sm') {
+      background-size: cover;
+    }
+
+    @include modular-spacing('padding-top', 3);
+    @include modular-spacing('padding-bottom', 3);
+
+
+
+    .su-hero__media {
+      background: transparent;
+      margin-left: 5%;
+      min-height: unset;
+      position: unset;
+      height: unset;
+      width: unset;
+
+      img { // Image display has been set to media image style - Medium (220)
+        @include modular-spacing('margin-bottom', -2);
+
+        border-radius: 50%;
+        width: $banner-circle--image-width;
+        height: $banner-circle--image-width;
+        margin-left: auto;
+        margin-right: auto;
+        object-fit: cover;
+        padding: 0;
+
+        @include grid-media-max('sm') {
+          width: $banner-circle--sm-image-width;
+          height: $banner-circle--sm-image-width;
+        }
+      }
+    }
+
+    .su-card {
+      &.su-hero__card {
+        background: transparent;
+        border: none;
+        bottom: unset;
+        box-shadow: none;
+        left: unset;
+        margin-top: unset;
+        margin-bottom: unset;
+        max-width: unset;
+        top: unset;
+
+        & > .image {
+          @include grid-media-min('sm') {
+            max-width: $banner-circle--image-width;
+            min-width: $banner-circle--image-width;
+
+            margin-left: 50px;
+
+            img {
+              border-radius: 50%;
+            }
+          }
+
+        }
+
+        .su-card__contents {
+
+          h2 {
+            @include responsive-spacing('margin-bottom', -1);
+            @include chemh-heading--badge;
+            @include type-a;
+
+            color: $su-color-white;
+            font-family: $su-font-sans;
+
+          }
+
+          .su-card__link,
+          .su-card__button {
+            @include responsive-spacing('margin-top', 3);
+          }
+        }
+      }
+
+    }
+  }
+
+  // Link colors.
+  div {
+    .su-button,
+    .su-card__button {
+      a {
+        background-color: $su-color-black;
+        color: $su-color-white;
+      }
+    }
+  }
+
+  .su-button:not(.su-link--external):after,
+  .su-button:not(.su-link--external):after {
+    background: url(../../assets/svg/icon_east_white.svg) no-repeat 0 0;
+  }
+}
+
+
+// when on a page with a sidebar nav, needs adjustments:
+.jumpstart-ui--two-column.centered-container {
+  .flex-lg-9-of-12.main-region {
+    .su-hero {
+      // when on a sidebar-nav page, needs less bottom spacing
+      @include modular-spacing('padding-bottom', 5);
+
+      .su-card__contents {
+        // @apply mx-auto;
+        max-width: 90%;
+        @include grid-media-min('lg') {
+          max-width: 80%;
+        }
+      }
+    }
+  }
+}

src/scss/components/banner/_banner--general.scss

@@ -0,0 +1,3 @@
+@charset "UTF-8";
+
+

src/scss/components/banner/index.scss

@@ -2,5 +2,7 @@
 
 // Banner Roll Up
 
-@import 'halfpill';
-@import 'homepage';
+@import 'banner--halfpill';
+@import 'banner--fullpill';
+@import 'banner--general';
+@import 'banner--homepage';

src/scss/components/card/index.scss

@@ -1,5 +1,4 @@
 @charset "UTF-8";
 
 // Card Roll Up
-
 @import 'minimal-border';

src/scss/utilities/variables/_sizes.scss

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+// Max-width variables for _banner-in-page--no-image.scss
+$banner-b--lg: 864px;
+$banner-b--xl: 1024px;

src/scss/utilities/variables/index.scss

@@ -8,3 +8,4 @@
 
 @import 'colors';
 @import 'magic-numbers';
+@import 'sizes';