Merge pull request #97 from niaid/staging

NDS 1.1.13 Release
niaid · May 11, 2023 · 4801e04 · 4801e04
2 parents 6aaa3d1 + 03652fd
commit 4801e04
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 84 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # NIAID Design System (NDS)
 
-VERSION 1.1.12
+VERSION 1.1.13
 
 The [NIAID Design System](https://designsystem.niaid.nih.gov/) was developed within the Office of Communications and Government Relations (OCGR) at the National Institute of Allergy and Infectious Diseases (NIAID) by Booz Allen Hamilton. The design system is designed to aid users with the process of creating policy-compliant websites that conform to design standards and guidance set by NIAID, NIH, HHS, and USWDS.
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "niaid-design-system",
-    "version": "1.1.12",
+    "version": "1.1.13",
     "description": "NIAID Design System",
     "main": "public/index.html",
     "dependencies": {

diff --git a/src/_patterns/00-nds/02-molecules/blocks/block-hero/_block-hero-main.twig b/src/_patterns/00-nds/02-molecules/blocks/block-hero/_block-hero-main.twig
@@ -22,19 +22,15 @@
         block_hero_id: Hero ID.
         block_hero_overlay_color: An optional class used to apply a color to the hero overlay. This class must contain a background color with an opacity less than 1.
 
-    Last Updated: August 11, 2021
+    Last Updated: May 4, 2023
 #}
 
 {% set block_hero_classes = block_hero_classes|default() %}
 {% set block_hero_id = block_hero_id|default() %}
 {% set block_hero_overlay_color = block_hero_overlay_color|default() %}
 
 <div id="block--hero" class="block-nds block--hero {{ block_hero_classes }}"{% if block_hero_id is not empty %} id="{{ block_hero_id }}"{% endif %}>
-    <div class="block--hero__content">
-        <div class="parallax-container {{ block_hero_overlay_color }}">
-            <div class="parallax">
-                {% block block_hero_image %}{% endblock %}
-            </div>
-        </div>
+    <div class="block--hero__content {{ block_hero_overlay_color }}">
+        {% block block_hero_image %}{% endblock %}
     </div>
 </div>
diff --git a/src/_patterns/00-nds/02-molecules/blocks/block-hero/block-hero.js b/src/_patterns/00-nds/02-molecules/blocks/block-hero/block-hero.js
@@ -3,21 +3,6 @@
 
 var moduleNDS_hero = (function() {
     'use strict';
-
-    /* =================== PRIVATE METHODS ================= */
-    // initParallax - Initializes Materialize parallax functionality.
-    function initParallax() {
-        if (document.querySelectorAll('.parallax').length) {
-            var elems = document.querySelectorAll('.parallax');
-            var instances = M.Parallax.init(elems);
-        }
-    }
-
-    /* =================== PUBLIC METHODS ================== */
-    function init() {
-        initParallax();
-    }
-
     // addHeroClassToBody - Adds the 'style--hero' class to the body if there is a hero present. This is separate from the initialization because users may have a custom hero without wanting the layout offset (or other styling) provided with the style--hero body class.
     function addHeroClassToBody() {
         if (document.querySelectorAll('.block--hero').length > 0) {
@@ -27,7 +12,6 @@ var moduleNDS_hero = (function() {
 
     /* =============== EXPORT PUBLIC METHODS =============== */
     return {
-      init: init,
       addHeroClassToBody: addHeroClassToBody
     };
 }());
diff --git a/src/_patterns/00-nds/02-molecules/blocks/block-hero/block-hero.scss b/src/_patterns/00-nds/02-molecules/blocks/block-hero/block-hero.scss
@@ -5,65 +5,58 @@
     border: 0;
     padding: 0;
     z-index: $z-index-baseline;
-    .parallax-container {
-        position: relative;
-        overflow: hidden;
-        min-height: 12rem;
-        .parallax {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            z-index: $z-index-below-baseline;
-            div,
-            article {
-                height: 100%;
-            }
-            img {
-                opacity: 0;
-                position: absolute;
-                left: 50%;
-                bottom: 0;
-                min-width: 100%;
-                min-height: 100%;
-                max-width: 100%;
-                object-fit: cover;
-                transform: translate3d(0,0,0);
-                transform: translateX(-50%);
-            }
+
+    .row {
+        max-width: 900px;
+        margin: 0 auto;
+        @include media-breakpoint-up(sm) {
+            margin: 0 $s-1;
         }
-        .row {
-            max-width: 900px;
+        @include media-breakpoint-up(md) {
+            margin: 0 $s-2;
+        }
+        @include media-breakpoint-up(lg) {
+            margin: 0 $s-3;
+        }
+        @include media-breakpoint-up(xl) {
             margin: 0 auto;
-            @include media-breakpoint-up(sm) {
-                margin: 0 $s-1;
-            }
-            @include media-breakpoint-up(md) {
-                margin: 0 $s-2;
-            }
-            @include media-breakpoint-up(lg) {
-                margin: 0 $s-3;
-            }
-            @include media-breakpoint-up(xl) {
-                margin: 0 auto;
-            }
-            .block--hero__content__main__content {
-                margin: 0 auto;
-            }
         }
-        .block--hero__content {
-            &__breadcrumbs {
-                .col-xl-12 {
-                    padding: $s-0-50 $s-3;
-                    a, i {
-                        color: $white;
-                    }
-                    a {
-                        border-bottom: $s-1px solid $white;
-                    }
-                }
-            }
+
+        .block--hero__content__main__content {
+            margin: 0 auto;
+        }
+    }
+}
+
+.block--hero__content {
+    min-height: 12rem;
+    overflow: hidden;
+    position: relative;
+
+    img {
+        left: 50%;
+        width: auto;
+        height: auto;
+        max-width: 100%;
+        min-height: 100%;
+        min-width: 100%;
+        object-fit: cover;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
+
+.block--hero__content__breadcrumbs {
+    .col-xl-12 {
+        padding: $s-0-50 $s-3;
+
+        a, i {
+            color: $white;
+        }
+
+        a {
+            border-bottom: $s-1px solid $white;
         }
     }
-}
+}
diff --git a/src/_patterns/00-nds/02-molecules/blocks/block-hero/demo/block-hero.twig b/src/_patterns/00-nds/02-molecules/blocks/block-hero/demo/block-hero.twig
@@ -6,7 +6,7 @@
     {% block block_hero_image %}
         {% include "@nds/01-atoms/images/image-default/_image-default-main.twig" with
             {
-                "image_default_src": 'global/sample/hero.jpg',
+                "image_default_src": 'global/sample/banner--image.jpg',
                 "image_default_alt": ""
             }
         %}

diff --git a/src/images/global/sample/banner--image.jpg b/src/images/global/sample/banner--image.jpg
diff --git a/src/images/global/sample/hero.jpg b/src/images/global/sample/hero.jpg
diff --git a/src/js/global/init.js b/src/js/global/init.js
@@ -5,7 +5,6 @@ document.addEventListener("DOMContentLoaded", function(e) {
     moduleNDS_drawer.init();
     moduleNDS_dropdown.init();
     moduleNDS_featuredContentCards.init();
-    moduleNDS_hero.init();
     moduleNDS_input.init();
     moduleNDS_links.init();
     moduleNDS_media.init();