Skip to content

Commit

Permalink
Merge pull request #89 from niaid/staging
Browse files Browse the repository at this point in the history 
NDS 1.1.11 Release
  • Loading branch information
@niafelice-nih
niafelice-nih authored Mar 30, 2023
2 parents a852e31 + d026bc3 commit a3d8377
Show file tree
Hide file tree
Showing 4 changed files with 157 additions and 60 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -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.

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
45 changes: 24 additions & 21 deletions src/_patterns/00-nds/02-molecules/components/component-media/_component-media-main.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() %}
Expand All @@ -47,39 +48,41 @@
{% 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 %}

<figure class="component-nds component--media {{ component_media_classes }}">
<div class="component--media__media">
{% 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,
"image_default_src": component_media_src,
"image_default_alt": component_media_alt
}
%}
{% endblock %}
</div>
{% if component_media_caption is not empty or component_media_credit is not empty %}
<figurecaption class="component--media__text">
<div class="component--media__text__content-wrapper">
{% 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
}
%}
</div>
</figurecaption>
{% 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 %}
<figurecaption class="component--media__text">
<div class="component--media__text__content-wrapper">
{% 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
}
%}
</div>
</figurecaption>
{% endif %}
{% endblock %}
</figure>
168 changes: 131 additions & 37 deletions src/_patterns/00-nds/02-molecules/components/component-media/component-media.scss
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,150 @@
.component--media {
$component-media-indent: $s-3;
display: table;
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;
}
}
/* 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: $s-3;
}
}

.component--media--right {
@include media-breakpoint-up(md) {
float: right;
margin-left: $s-3;
}
}

.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 */

0 comments on commit a3d8377

Please sign in to comment.