Merge pull request #119 from niaid/staging

NDS 1.3.0 Release

README.md

@@ -1,6 +1,6 @@
 # NIAID Design System (NDS)
 
-VERSION 1.2.0
+VERSION 1.3.0
 
 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.
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "niaid-design-system",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "description": "NIAID Design System",
     "main": "public/index.html",
     "dependencies": {

src/_patterns/00-nds/01-atoms/media/media-video-stream/_media-video-stream-main.twig

@@ -0,0 +1,35 @@
+{#
+    ---
+    title: Media Stream Video
+    ---
+
+    Type: Atoms -> Media
+
+    Description:
+        The Media YouTube Video component makes it easy to embed YouTube videos on your website.
+
+        The "media_video_stream_src" parameter requires a specific embed URL from YouTube (not to be confused with the regular URL to the video page). To get this embed link, go to the YouTube video you would like to embed. Select "Share" below the video, then "Embed". The needed URL is found as the value for the "src" attribute in the displayed embed code.
+
+    Parameters:
+        media_video_stream_classes: Additional media element classes.
+        media_video_stream_id: ID for the video wrapper.
+        media_video_stream_title: The title attribute for the video.
+        media_video_stream_src: The embed URL from YouTube.
+        media_video_stream_height: Desired height of the video.
+        media_video_stream_width: Desired width of the video.
+        media_video_stream_attributes: Additional attributes on the <iframe>.
+
+    Last Updated: October 23, 2023
+#}
+
+{% set media_video_stream_classes = media_video_stream_classes|default() %}
+{% set media_video_stream_id = media_video_stream_id|default() %}
+{% set media_video_stream_title = media_video_stream_title|default() %}
+{% set media_video_stream_src = media_video_stream_src|default() %}
+{% set media_video_stream_width = media_video_stream_width|default('800') %}
+{% set media_video_stream_height = media_video_stream_height|default('450') %}
+{% set media_video_stream_attributes = media_video_stream_attributes|default() %}
+
+<div class="media-nds media--video-stream {{ media_video_stream_classes }}"{% if media_video_stream_id is not empty %} id="{{ media_video_stream_id }}"{% endif %}>
+    <iframe class="media--video-stream__iframe" allowfullscreen="" frameborder="0" height="{{ media_video_stream_height }}" width="{{ media_video_stream_width }}" src="{{ media_video_stream_src }}" title="{{ media_video_stream_title }}" {{ media_video_stream_attributes|raw }}></iframe>
+</div>

src/_patterns/00-nds/01-atoms/media/media-video-stream/demo/media-video-stream.twig

@@ -0,0 +1,6 @@
+{% include "@nds/01-atoms/media/media-video-stream/_media-video-stream-main.twig" with
+    {
+        "media_video_stream_title": "Video: Helping Kids with Severe Eczema",
+        "media_video_stream_src": "https://www.youtube.com/embed/p-NVeGnK71w?rel=0",
+    }
+%}

src/_patterns/00-nds/01-atoms/media/media-video-stream/media-video-stream.scss

@@ -0,0 +1,14 @@
+.media--video-stream {
+    position: relative;
+	padding-bottom: 51.44%; /* 16:9 */
+	padding-top: 20px;
+	height: 0;
+}
+
+.media--video-stream__iframe {
+    position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;     
+}

src/_patterns/00-nds/02-molecules/components/component-video/_component-video-main.twig

@@ -0,0 +1,60 @@
+{#
+    ---
+    title: Video Component
+    ---
+
+    Type: Molecules -> Components
+
+    Description:
+        The Video component makes it easy to include videos of either type (YouTube or Microsoft). Additionally, you can control the float (left or right placement) of your images.
+
+    Blocks:
+        {% block component_video %}: The media to be presented.
+
+    Parameters:
+        component_video_classes: Additional media component classes.
+        component_video_float: The direction to float the component (optional). Options: "left", "right", "full" (100% width of body content).
+        component_video_title: Title of the video.
+        component_video_src: Path to the video.
+        component_video_attributes: Sets attributes for the video.
+        component_video_width: Sets the pixel width of the video.
+        component_video_height: Sets the pixel height of the video.
+
+    Includes:
+        Atoms -> Media -> media-video-stream
+
+    Last Updated: October 23, 2023
+#}
+{% set component_video_classes = component_video_classes|default() %}
+{% set component_video_float = component_video_float|default() %}
+{% set component_video_id = component_video_id|default() %}
+{% set component_video_title = component_video_title|default() %}
+{% set component_video_src = component_video_src|default() %}
+{% set component_video_attributes = component_video_attributes|default() %}
+{% set component_video_width = component_video_width|default() %}
+{% set component_video_height = component_video_stream_height|default() %}
+
+{% if component_video_float == "left" or component_video_float == "align-left" %}
+    {% set component_video_classes = component_video_classes ~ " component--video__left" %}
+{% endif %}
+{% if component_video_float == "right" or component_video_float == "align-right" %}
+    {% set component_video_classes = component_video_classes ~ " component--video__right" %}
+{% endif %}
+{% if component_video_float == "full" or component_video_float == "align-center" %}
+    {% set component_video_classes = component_video_classes ~ " component--video__full" %}
+{% endif %}
+
+<div class="component-nds component--video {{ component_video_classes }}">
+    {% block component_video %}
+        {% include "@nds/01-atoms/media/media-video-stream/_media-video-stream-main.twig" with
+            {
+                "media_video_stream_id": component_video_id,
+                "media_video_stream_title": component_video_title,
+                "media_video_stream_src": component_video_src,
+                "media_video_stream_width": component_video_width,
+                "media_video_stream_height": component_video_height,
+                "media_video_stream_attributes": component_video_attributes
+            }
+        %}
+    {% endblock %}
+</div>

src/_patterns/00-nds/02-molecules/components/component-video/component-video.scss

@@ -0,0 +1,96 @@
+.component--video {
+    margin: $s-1-50 0;
+    max-width: 100%;
+    width: 100%;
+}
+
+.component--video__full {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.component--video__left,
+.component--video__right {
+    clear: both;
+    @include media-breakpoint-up(md) {
+        max-width: 50%;
+    }
+}
+
+.component--video__left {
+    @include media-breakpoint-up(md) {
+        float: left;
+        margin-right: $s-3;
+    }
+}
+
+.component--video__right {
+    @include media-breakpoint-up(md) {
+        float: right;
+        margin-left: $s-3;
+    }
+}
+
+@include media-breakpoint-up(md) {
+    .component--video__25-width {
+        max-width: 25%;
+        width: 25%;
+    }
+
+    .component--video__33-width {
+            max-width: 33%;
+            width: 33%;
+    }
+
+    .component--video__50-width {
+            max-width: 50%;
+            width: 50%;
+    }
+
+    .component--video__75-width {
+            max-width: 75%;
+            width: 75%;
+    }
+}
+
+
+.component--video__100-width {
+    width: 100%;
+}
+
+/* Drupal Overrides */
+[data-entity-embed-display="view_mode:media.25_width"] {
+    @include media-breakpoint-up(lg) {
+        max-width: 25%;
+        width: 25%;
+    }
+}
+
+[data-entity-embed-display="view_mode:media.33_width"] {
+    @include media-breakpoint-up(lg) {
+        max-width: 33%;
+        width: 33%;
+    }
+}
+
+[data-entity-embed-display="view_mode:media.50_width"] {
+    @include media-breakpoint-up(lg) {
+        max-width: 50%;
+        width: 50%;
+    }
+}
+
+[data-entity-embed-display="view_mode:media.75_width"] {
+    @include media-breakpoint-up(lg) {
+        max-width: 75%;
+        width: 75%;
+    }
+}
+
+[data-entity-embed-display="view_mode:media.100_width"] {
+    width: 100%;
+    @include media-breakpoint-up(lg) {
+        max-width: 100%;
+    }
+}
+/* End Drupal Overrides */

src/_patterns/00-nds/02-molecules/components/component-video/demo/component-video.twig

@@ -0,0 +1,6 @@
+{% include "@nds/02-molecules/components/component-video/_component-video-main.twig" with
+    {
+        "component_video_title": "Video: Helping Kids with Severe Eczema",
+        "component_video_src": "https://www.youtube.com/embed/p-NVeGnK71w?rel=0",
+    }
+%}