-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #131 from niaid/staging
NDS 1.5.0 Release
- Loading branch information
Showing
29 changed files
with
825 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
115 changes: 115 additions & 0 deletions
115
src/_patterns/00-nds/01-atoms/images/image-responsive/_image-responsive-main.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| {# | ||
| --- | ||
| title: Image Responsive | ||
| --- | ||
| Type: Atoms -> Images | ||
| Description: | ||
| Responsive images are intended to improve display and performance for images on devices with widely differing screen sizes and resolutions. | ||
| Parameters: | ||
| image_responsive_classes: Additional pattern classes | ||
| image_responsive_src: The path to the image. | ||
| image_responsive_alt: Alt text to describe the image. | ||
| image_responsive_src_{sizes}: The path to the corresponding image styles. | ||
| image_responsive_src_{sizes}_2x: The path to the corresponding image styles for retina support. | ||
| Last Updated: May 8, 2024 | ||
| #} | ||
|
|
||
| {% set image_responsive_classes = image_responsive_classes|default() %} | ||
| {% set image_responsive_alt = image_responsive_alt|default() %} | ||
| {% set image_responsive_src = image_responsive_src|default() %} | ||
| {% set image_responsive_src_xxl = image_responsive_src_xxl|default() %} | ||
| {% set image_responsive_src_xl = image_responsive_src_xl|default() %} | ||
| {% set image_responsive_src_lg = image_responsive_src_lg|default() %} | ||
| {% set image_responsive_src_md = image_responsive_src_md|default() %} | ||
| {% set image_responsive_src_sm = image_responsive_src_sm|default() %} | ||
| {% set image_responsive_src_xs = image_responsive_src_xs|default() %} | ||
| {% set image_responsive_src_xxl_2x = image_responsive_src_xxl_2x|default() %} | ||
| {% set image_responsive_src_xl_2x = image_responsive_src_xl_2x|default() %} | ||
| {% set image_responsive_src_lg_2x = image_responsive_src_lg_2x|default() %} | ||
| {% set image_responsive_src_md_2x = image_responsive_src_md_2x|default() %} | ||
| {% set image_responsive_src_sm_2x = image_responsive_src_sm_2x|default() %} | ||
| {% set image_responsive_src_xs_2x = image_responsive_src_xs_2x|default() %} | ||
|
|
||
| <picture class="image-nds image--responsive{% if image_responsive_classes is not empty %} {{ image_responsive_classes }}{% endif %}"> | ||
| {% if image_responsive_src_xxl is not empty %} | ||
| {% if "https:" not in image_respimage_responsive_src_xxlonsive_src and "http:" not in image_responsive_src_xxl %} | ||
| {% set image_responsive_src_xxl = imagePath ~ image_responsive_src_xxl %} | ||
| {% set image_responsive_src_xxl_2x = imagePath ~ image_responsive_src_xxl_2x %} | ||
| {% endif %} | ||
| <source | ||
| srcset="{{ image_responsive_src_xxl }} 1x{% if image_responsive_src_xxl_2x is not empty %}, {{ image_responsive_src_xxl_2x }} 2x{% endif %}" | ||
| media="(min-width: 1900px)" | ||
| type="image/jpeg" | ||
| > | ||
| {% endif %} | ||
| {% if image_responsive_src_xl is not empty %} | ||
| {% if "https:" not in image_responsive_src_xl and "http:" not in image_responsive_src_xl %} | ||
| {% set image_responsive_src_xl = imagePath ~ image_responsive_src_xl %} | ||
| {% set image_responsive_src_xl_2x = imagePath ~ image_responsive_src_xl_2x %} | ||
| {% endif %} | ||
| <source | ||
| srcset="{{ image_responsive_src_xl }} 1x{% if image_responsive_src_xl_2x is not empty %}, {{ image_responsive_src_xl_2x }} 2x{% endif %}" | ||
| media="(min-width: 1200px)" | ||
| type="image/jpeg" | ||
| > | ||
| {% endif %} | ||
| {% if image_responsive_src_lg is not empty %} | ||
| {% if "https:" not in image_responsive_src_lg and "http:" not in image_responsive_src_lg %} | ||
| {% set image_responsive_src_lg = imagePath ~ image_responsive_src_lg %} | ||
| {% set image_responsive_src_lg_2x = imagePath ~ image_responsive_src_lg_2x %} | ||
| {% endif %} | ||
| <source | ||
| srcset="{{ image_responsive_src_lg }} 1x{% if image_responsive_src_lg_2x is not empty %}, {{ image_responsive_src_lg_2x }} 2x{% endif %}" | ||
| media="(min-width: 992px)" | ||
| type="image/jpeg" | ||
| > | ||
| {% endif %} | ||
| {% if image_responsive_src_md is not empty %} | ||
| {% if "https:" not in image_responsive_src_md and "http:" not in image_responsive_src_md %} | ||
| {% set image_responsive_src_md = imagePath ~ image_responsive_src_md %} | ||
| {% set image_responsive_src_md_2x = imagePath ~ image_responsive_src_md_2x %} | ||
| {% endif %} | ||
| <source | ||
| srcset="{{ image_responsive_src_md }} 1x{% if image_responsive_src_md_2x is not empty %}, {{ image_responsive_src_md_2x }} 2x{% endif %}" | ||
| media="(min-width: 768px)" | ||
| type="image/jpeg" | ||
| > | ||
| {% endif %} | ||
| {% if image_responsive_src_sm is not empty %} | ||
| {% if "https:" not in image_responsive_src_sm and "http:" not in image_responsive_src_sm %} | ||
| {% set image_responsive_src_sm = imagePath ~ image_responsive_src_sm %} | ||
| {% set image_responsive_src_sm_2x = imagePath ~ image_responsive_src_sm_2x %} | ||
| {% endif %} | ||
| <source | ||
| srcset="{{ image_responsive_src_sm }} 1x{% if image_responsive_src_sm_2x is not empty %}, {{ image_responsive_src_sm_2x }} 2x{% endif %}" | ||
| media="(min-width: 576px)" | ||
| type="image/jpeg" | ||
| > | ||
| {% endif %} | ||
| {% if image_responsive_src_xs is not empty %} | ||
| {% if "https:" not in image_responsive_src_xs and "http:" not in image_responsive_src_xs %} | ||
| {% set image_responsive_src_xs = imagePath ~ image_responsive_src_xs %} | ||
| {% set image_responsive_src_xs_2x = imagePath ~ image_responsive_src_xs_2x %} | ||
| {% endif %} | ||
| <source | ||
| srcset="{{ image_responsive_src_xs }} 1x{% if image_responsive_src_xs_2x is not empty %}, {{ image_responsive_src_xs_2x }} 2x{% endif %}" | ||
| media="(min-width: 375px)" | ||
| type="image/jpeg" | ||
| > | ||
| {% endif %} | ||
| <img | ||
| {% if image_responsive_src is not empty %} | ||
| {% if "https:" not in image_responsive_src and "http:" not in image_responsive_src %} | ||
| {% set image_responsive_src = imagePath ~ image_responsive_src %} | ||
| {% endif %} | ||
| src="{{ image_responsive_src }}" | ||
| {% endif %} | ||
| {% if image_responsive_alt is not empty %} | ||
| alt="{{ image_responsive_alt }}" | ||
| {% endif %} | ||
| /> | ||
| </picture> |
19 changes: 19 additions & 0 deletions
19
src/_patterns/00-nds/01-atoms/images/image-responsive/demo/image-responsive.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| {% include "@nds/01-atoms/images/image-responsive/_image-responsive-main.twig" with | ||
| { | ||
| "image_responsive_classes": 'image--image-responsive__classes', | ||
| "image_responsive_alt": 'Test image alternative text.', | ||
| "image_responsive_src": 'global/styles/aspect_ratio_4_3_sm/sample.jpg', | ||
| "image_responsive_src_xs": 'global/styles/aspect_ratio_16_9_sm/sample.jpg', | ||
| "image_responsive_src_sm": 'global/styles/aspect_ratio_4_3_sm/sample.jpg', | ||
| "image_responsive_src_md": 'global/styles/aspect_ratio_16_9_md/sample.jpg', | ||
| "image_responsive_src_lg": 'global/styles/aspect_ratio_4_3_sm/sample.jpg', | ||
| "image_responsive_src_xl": 'global/styles/aspect_ratio_4_3_sm/sample.jpg', | ||
| "image_responsive_src_xxl": 'global/styles/aspect_ratio_4_3_sm/sample.jpg', | ||
| "image_responsive_src_xs_2x": 'global/styles/aspect_ratio_16_9_sm_2x/sample.jpg', | ||
| "image_responsive_src_sm_2x": 'global/styles/aspect_ratio_4_3_sm_2x/sample.jpg', | ||
| "image_responsive_src_md_2x": 'global/styles/aspect_ratio_16_9_md_2x/sample.jpg', | ||
| "image_responsive_src_lg_2x": 'global/styles/aspect_ratio_4_3_sm_2x/sample.jpg', | ||
| "image_responsive_src_xl_2x": 'global/styles/aspect_ratio_4_3_sm_2x/sample.jpg', | ||
| "image_responsive_src_xxl_2x": 'global/styles/aspect_ratio_4_3_sm_2x/sample.jpg' | ||
| } | ||
| %} |
3 changes: 3 additions & 0 deletions
3
src/_patterns/00-nds/01-atoms/images/image-responsive/image-responsive.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .image--responsive { | ||
| display: block; | ||
| } |
40 changes: 40 additions & 0 deletions
40
src/_patterns/00-nds/01-atoms/layouts/layouts-grid/_layouts-grid-main.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| {# | ||
| --- | ||
| title: Grid Layout | ||
| --- | ||
| Type: Atoms -> Layouts | ||
| Description: | ||
| The Grid Layout component defines the horizontal and vertical sections of a page. The component provides four equal column options: 2, 3, 4, and 5 columns. | ||
| Blocks: | ||
| {% block layouts_grid %}: The Grid Layout content. | ||
| {% block layouts_grid_item %}: The Grid Layout item content. | ||
| Parameters: | ||
| layouts_grid_id: Additional Grid Layout id. | ||
| layouts_grid_classes: Additional Grid Layout classes. | ||
| layouts_grid_count: Determines how many columns will display in a given row. Options: '2' (Default), '3', '4', '5'. | ||
| layouts_grid_spacing: Determines the amount of spacing between columns and rows in a Grid Layout. Options: 'none', 'tight', 'default' (Default). | ||
| layouts_grid_data: The variable used to identify a list of objects in a Grid Layout. | ||
| Last Updated: May 21, 2024 | ||
| #} | ||
|
|
||
| {% set layouts_grid_id = layouts_grid_id|default() %} | ||
| {% set layouts_grid_classes = layouts_grid_classes|default() %} | ||
| {% set layouts_grid_columns = layouts_grid_columns|default('2') %} | ||
| {% set layouts_grid_spacing = layouts_grid_spacing|default('default') %} | ||
| {% set layouts_grid_item_classes = layouts_grid_item_classes|default() %} | ||
| {% set layouts_grid_data = layouts_grid_data|default() %} | ||
|
|
||
| <div class="layouts-nds layouts--grid layouts--grid__col-{{ layouts_grid_columns }} layouts--grid__spacing--{{ layouts_grid_spacing }} {{ layouts_grid_classes }}"{% if layouts_grid_id is not empty %} id="{{ layouts_grid_id }}"{% endif %}> | ||
| {% block layouts_grid %} | ||
| {% for grid_item in layouts_grid_data %} | ||
| <div class="layouts--grid__item{% if layouts_grid_item_classes is not empty %} {{ layouts_grid_item_classes }}{% endif %}"> | ||
| {% block layouts_grid_item %}{% endblock %} | ||
| </div> | ||
| {% endfor %} | ||
| {% endblock %} | ||
| </div> |
27 changes: 27 additions & 0 deletions
27
src/_patterns/00-nds/01-atoms/layouts/layouts-grid/demo/layouts-grid.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| .layouts--grid__demo { | ||
| .layouts--grid__item { | ||
| > * { | ||
| margin-top: 0; | ||
| } | ||
| } | ||
|
|
||
| .button--icon { | ||
| display: block; | ||
| text-align: center; | ||
| width: 100%; | ||
| white-space: normal; | ||
| } | ||
|
|
||
| .button--icon__text { | ||
| padding: 0; | ||
| margin-top: $s-1; | ||
| } | ||
|
|
||
| .icon--default { | ||
| width: 100%; | ||
| padding: 0 $s-1 $s-1; | ||
| &:before { | ||
| font-size: $s-1-50; | ||
| } | ||
| } | ||
| } |
119 changes: 119 additions & 0 deletions
119
src/_patterns/00-nds/01-atoms/layouts/layouts-grid/demo/layouts-grid.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| {% embed '@nds/01-atoms/layouts/layouts-grid/_layouts-grid-main.twig' with | ||
| { | ||
| 'layouts_grid_classes': 'layouts--grid__gallery layouts--grid__demo mb-4', | ||
| 'layouts_grid_columns': '2', | ||
| 'layouts_grid_spacing': 'tight', | ||
| 'layouts_grid_item_classes': 'block-nds', | ||
| 'layouts_grid_data': [ | ||
| { | ||
| 'header': 'NIAID HIV Language Guide', | ||
| 'description': 'NIAID is making every effort to eliminate the use of stigmatizing terminology and advance the use of person-first.', | ||
| 'nested_data': [ | ||
| { | ||
| 'class': 'button--secondary', | ||
| 'icon': '1', | ||
| 'weight': 's', | ||
| 'href': '/', | ||
| 'text': 'First Button Example' | ||
| }, | ||
| { | ||
| 'class': 'button--secondary', | ||
| 'icon': '2', | ||
| 'weight': 's', | ||
| 'href': '/', | ||
| 'text': 'Second Button Example' | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| 'header': 'Volunteer for Mpox Clinical Study', | ||
| 'description': 'STOMP is an NIAID-funded clinical trial to evaluate the efficacy of the antiviral tecovirimat, also know as TPOXX.', | ||
| 'nested_data': [ | ||
| { | ||
| 'class': 'button--secondary', | ||
| 'icon': '3', | ||
| 'weight': 's', | ||
| 'href': '/', | ||
| 'text': 'Third Button Example' | ||
| }, | ||
| { | ||
| 'class': 'button--secondary', | ||
| 'icon': '4', | ||
| 'weight': 's', | ||
| 'href': '/', | ||
| 'text': 'Fourth Button Example' | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| 'header': 'Find Your Place at NIAID', | ||
| 'description': 'Whether you are passionate about science, administration, or innovation, there is a place for you at NIAID.', | ||
| 'nested_data': [ | ||
| { | ||
| 'class': 'button--secondary', | ||
| 'icon': '5', | ||
| 'weight': 's', | ||
| 'href': '/', | ||
| 'text': 'Fifth Button Example' | ||
| }, | ||
| { | ||
| 'class': 'button--secondary', | ||
| 'icon': '6', | ||
| 'weight': 's', | ||
| 'href': '/', | ||
| 'text': 'Sixth Button Example' | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| 'header': 'Volunteer for COVID-19 Clinical Trials', | ||
| 'description': 'NIAID conducts and supports clinical trials evaluating therapies and vaccine candidates against SARS.', | ||
| 'nested_data': [ | ||
| { | ||
| 'class': 'button--secondary', | ||
| 'icon': '7', | ||
| 'weight': 's', | ||
| 'href': '/', | ||
| 'text': 'Seventh Button Example' | ||
| }, | ||
| { | ||
| 'class': 'button--secondary', | ||
| 'icon': '8', | ||
| 'weight': 's', | ||
| 'href': '/', | ||
| 'text': 'Eighth Button Example' | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| %} | ||
| {% block layouts_grid_item %} | ||
| <h3>{{ grid_item.header }}</h3> | ||
| <p>{{ grid_item.description }}</p> | ||
| {% embed '@nds/01-atoms/layouts/layouts-grid/_layouts-grid-main.twig' with | ||
| { | ||
| 'layouts_grid_classes': 'layouts--grid__gallery layouts--grid__nested mt-4', | ||
| 'layouts_grid_item_classes': '', | ||
| 'layouts_grid_columns': '2', | ||
| 'layouts_grid_data': grid_item.nested_data | ||
| } | ||
| %} | ||
| {% block layouts_grid %} | ||
| {% for grid_nested_item in grid_item.nested_data %} | ||
| <div class='layouts--grid__item{% if layouts_grid_item_classes is not empty %} {{ layouts_grid_item_classes }}{% endif %}'> | ||
| {% include '@nds/01-atoms/buttons/button-icon/_button-icon-main.twig' with | ||
| { | ||
| 'button_icon_classes': grid_nested_item.class, | ||
| 'button_icon_icon': grid_nested_item.icon, | ||
| 'button_icon_icon_weight': grid_nested_item.weight, | ||
| 'button_icon_href': grid_nested_item.href, | ||
| 'button_icon_text': grid_nested_item.text | ||
| } | ||
| %} | ||
| </div> | ||
| {% endfor %} | ||
| {% endblock %} | ||
| {% endembed %} | ||
| {% endblock %} | ||
| {% endembed %} |
Oops, something went wrong.