From bb9412a369b713a5359aaae72742e0a49a2c3723 Mon Sep 17 00:00:00 2001 From: Nick Iafelice Date: Mon, 27 Mar 2023 16:27:33 -0600 Subject: [PATCH 1/3] NDS-146: Image Style Correction & Addition of 75% --- .../_component-media-main.twig | 45 ++--- .../component-media/component-media.scss | 167 ++++++++++++++---- 2 files changed, 155 insertions(+), 57 deletions(-) diff --git a/src/_patterns/00-nds/02-molecules/components/component-media/_component-media-main.twig b/src/_patterns/00-nds/02-molecules/components/component-media/_component-media-main.twig index 3bb7b55f..1a1406b6 100644 --- a/src/_patterns/00-nds/02-molecules/components/component-media/_component-media-main.twig +++ b/src/_patterns/00-nds/02-molecules/components/component-media/_component-media-main.twig @@ -31,10 +31,11 @@ Atoms -> Images -> image-default Atoms -> Text -> text-image-credit-caption - Last Updated: October 12, 2021 + Last Updated: March 24, 2023 #} {% set component_media_classes = component_media_classes|default() %} +{% set component_media_responsive = component_media_responsive|default() %} {% set component_media_src = component_media_src|default() %} {% set component_media_alt = component_media_alt|default() %} {% set component_media_caption = component_media_caption|default() %} @@ -47,19 +48,19 @@ {% set component_media_image_classes = "materialboxed" %} {% endif %} -{% if component_media_float == "left" %} +{% if component_media_float == "left" or component_media_float == "align-left" %} {% set component_media_classes = component_media_classes ~ " component--media--left" %} {% endif %} -{% if component_media_float == "right" %} +{% if component_media_float == "right" or component_media_float == "align-right" %} {% set component_media_classes = component_media_classes ~ " component--media--right" %} {% endif %} -{% if component_media_float == "full" %} +{% if component_media_float == "full" or component_media_float == "align-center" %} {% set component_media_classes = component_media_classes ~ " component--media--full" %} {% endif %}
-
- {% block component_media %} + {% block component_media %} + {% if component_media_src is not empty %} {% include "@nds/01-atoms/images/image-default/_image-default-main.twig" with { "image_default_classes": component_media_image_classes, @@ -67,19 +68,21 @@ "image_default_alt": component_media_alt } %} - {% endblock %} -
- {% if component_media_caption is not empty or component_media_credit is not empty %} - -
- {% include "@nds/01-atoms/text/text-image-credit-caption/_text-image-credit-caption-main.twig" with - { - "text_image_credit_caption_caption": component_media_caption, - "text_image_credit_caption_credit": component_media_credit, - "text_image_credit_caption_credit_label": component_media_credit_label - } - %} -
- - {% endif %} + {% elseif component_media_responsive is not empty %} + {{ component_media_responsive }} + {% endif %} + {% if component_media_caption is not empty or component_media_credit is not empty %} + +
+ {% include "@nds/01-atoms/text/text-image-credit-caption/_text-image-credit-caption-main.twig" with + { + "text_image_credit_caption_caption": component_media_caption, + "text_image_credit_caption_credit": component_media_credit, + "text_image_credit_caption_credit_label": component_media_credit_label + } + %} +
+ + {% endif %} + {% endblock %}
diff --git a/src/_patterns/00-nds/02-molecules/components/component-media/component-media.scss b/src/_patterns/00-nds/02-molecules/components/component-media/component-media.scss index 9bc6fb61..7a9ba902 100644 --- a/src/_patterns/00-nds/02-molecules/components/component-media/component-media.scss +++ b/src/_patterns/00-nds/02-molecules/components/component-media/component-media.scss @@ -4,53 +4,148 @@ margin: $s-1-50 0; max-width: 100%; width: auto; + .image--default, img { max-width: 100%; } + .component--media__text { display: flex; - &__content-wrapper { - flex-grow: 1; - width: 0; - .text--image-credit-caption { - &__credit { - br { - display: none; - } - } - } - } - } - &--full { - .image--default, - img { - width: 100%; - height: auto; - } - } - &--left, - &--right { - clear: both; - @include media-breakpoint-up(md) { - max-width: 50%; - } } - &--left { - @include media-breakpoint-up(md) { - float: left; - margin-right: $component-media-indent; - } - } - &--right { - @include media-breakpoint-up(md) { - float: right; - margin-left: $component-media-indent; + + .component--media__text__content-wrapper { + flex-grow: 1; + width: 0; + } + + .text--image-credit-caption__credit { + br { + display: none; } } + /* Drupal Overrides */ .field--name-field-media-caption, .field--name-field-media-credit { display: none; } -} \ No newline at end of file + /* End Drupal Overrides */ +} + +.component--media--full { + margin-left: auto; + margin-right: auto; + + .image--default, + img { + width: 100%; + height: auto; + } +} + +.component--media--left, +.component--media--right { + clear: both; + @include media-breakpoint-up(md) { + max-width: 50%; + } +} + +.component--media--left { + @include media-breakpoint-up(md) { + float: left; + margin-right: $component-media-indent; + } +} + +.component--media--right { + @include media-breakpoint-up(md) { + float: right; + margin-left: $component-media-indent; + } +} + +.component--media__25-width { + @include media-breakpoint-up(lg) { + max-width: 25%; + } +} + +.component--media__33-width { + @include media-breakpoint-up(lg) { + max-width: 33%; + } +} + +.component--media__50-width { + @include media-breakpoint-up(lg) { + max-width: 50%; + } +} + +.component--media__75-width { + @include media-breakpoint-up(lg) { + max-width: 75%; + } +} + +.component--media__100-width { + width: 100%; + @include media-breakpoint-up(lg) { + max-width: 100%; + } +} + +/* Drupal Overrides */ +[data-entity-embed-display="view_mode:media.25_width"] { + @include media-breakpoint-up(lg) { + max-width: 25%; + } + + .component--media__25-width { + max-width: 100%; + } +} + +[data-entity-embed-display="view_mode:media.33_width"] { + @include media-breakpoint-up(lg) { + max-width: 33%; + } + + .component--media__33-width { + max-width: 100%; + } +} + +[data-entity-embed-display="view_mode:media.50_width"] { + @include media-breakpoint-up(lg) { + max-width: 50%; + } + + .component--media__50-width { + max-width: 100%; + } +} + +[data-entity-embed-display="view_mode:media.75_width"] { + @include media-breakpoint-up(lg) { + max-width: 75%; + } + + .component--media__75-width { + max-width: 100%; + } +} + +[data-entity-embed-display="view_mode:media.100_width"] { + width: 100%; + @include media-breakpoint-up(lg) { + max-width: 100%; + } + + .component--media__100-width { + max-width: 100%; + } +} +/* End Drupal Overrides */ \ No newline at end of file From bf998518dcefb768faa182b1a2f27d6dcf80e4e3 Mon Sep 17 00:00:00 2001 From: Nick Iafelice Date: Mon, 27 Mar 2023 16:31:16 -0600 Subject: [PATCH 2/3] NDS 1.1.11 Release --- README.md | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 31f7d0a7..d8bfa1d9 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # NIAID Design System (NDS) -VERSION 1.1.10 +VERSION 1.1.11 The [NIAID Design System](http://nds.niaid.nih.gov.s3-website-us-east-1.amazonaws.com/) 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 index 90b23cc1..ac62627c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "niaid-design-system", - "version": "1.1.10", + "version": "1.1.11", "description": "NIAID Design System", "main": "public/index.html", "dependencies": { From 96a3a014956441beb76982c8085ef2abdf498261 Mon Sep 17 00:00:00 2001 From: Nick Iafelice Date: Mon, 27 Mar 2023 17:00:20 -0600 Subject: [PATCH 3/3] NDS-146: Remove unnecessary -media-indent variable --- .../components/component-media/component-media.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/_patterns/00-nds/02-molecules/components/component-media/component-media.scss b/src/_patterns/00-nds/02-molecules/components/component-media/component-media.scss index 7a9ba902..474963e3 100644 --- a/src/_patterns/00-nds/02-molecules/components/component-media/component-media.scss +++ b/src/_patterns/00-nds/02-molecules/components/component-media/component-media.scss @@ -1,5 +1,4 @@ .component--media { - $component-media-indent: $s-3; display: table; margin: $s-1-50 0; max-width: 100%; @@ -55,14 +54,14 @@ .component--media--left { @include media-breakpoint-up(md) { float: left; - margin-right: $component-media-indent; + margin-right: $s-3; } } .component--media--right { @include media-breakpoint-up(md) { float: right; - margin-left: $component-media-indent; + margin-left: $s-3; } }