-
Notifications
You must be signed in to change notification settings - Fork 114
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 #8357 from cfpb/fix/feature-cards
Fix feature cards by swapping files around
- Loading branch information
Showing
2 changed files
with
105 additions
and
105 deletions.
There are no files selected for viewing
105 changes: 71 additions & 34 deletions
105
cfgov/v1/jinja2/v1/includes/molecules/feature-card.html
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 |
|---|---|---|
| @@ -1,48 +1,85 @@ | ||
| {# ========================================================================== | ||
|
|
||
| Featured Cards | ||
| Feature Card | ||
|
|
||
| ========================================================================== | ||
| ========================================================================== | ||
|
|
||
| Description: | ||
| Description: | ||
|
|
||
| Create a 50/50 set of featured cards organism when given: | ||
| Create a feature card molecule when given: | ||
|
|
||
| value: Object defined from a StreamField block. | ||
| value: Object defined from a StreamField block. | ||
|
|
||
| value.feature_cards: List of Feature Card molecules. See Info Unit | ||
| molecule template for details. | ||
| value.category: A set of values related to the card category | ||
| (title), including: | ||
|
|
||
| ========================================================================== #} | ||
| value.category.url: A string for the URL of the category page. | ||
|
|
||
| {%- from 'v1/includes/blocks/heading.html' import heading without context %} | ||
| {%- from 'v1/includes/molecules/feature-card.html' import feature_card with context %} | ||
| value.category.text: A string for the title of the category. | ||
|
|
||
| <section> | ||
| <h2 class="u-show-on-mobile u-mt45"> | ||
| Browse questions by category | ||
| </h2> | ||
| value.icon: A string corresponding to an SVG icon. | ||
|
|
||
| <ul class="u-show-on-mobile category__list m-list m-list--links u-mb0"> | ||
| {% for card in value.feature_cards %} | ||
| <li class="m-list__item"> | ||
| <a class="m-list__link a-link a-link--jump a-link--icon-after-text" href="{{ card.category.url }}"> | ||
| <span class="a-link__text">{{ card.category.text }}</span> | ||
| {{ svg_icon( card.icon ) }} | ||
| </a> | ||
| </li> | ||
| {% endfor %} | ||
| </ul> | ||
| value.footer_label: A tuple of items related to the card, including: | ||
|
|
||
| <div class="u-hide-on-mobile question-categories u-mb30"> | ||
| <div class="o-card-group o-card-group--column-2"> | ||
| <div class="o-card-group__cards"> | ||
| value.links: A tuple of items to create a list | ||
| of links, containing: | ||
|
|
||
| {% for card in value.feature_cards %} | ||
| {{- feature_card(card) }} | ||
| {% endfor %} | ||
| value.links[i].url: A string for the URL of the link. | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| value.links[i].text: A string for the text of the link. | ||
|
|
||
| value.links[i].aria_label: (Optional) An aria-label for the link. | ||
|
|
||
| ========================================================================== #} | ||
|
|
||
| {%- from 'v1/includes/blocks/heading.html' import heading without context %} | ||
|
|
||
| {%- macro feature_card(value) -%} | ||
|
|
||
| <article class="m-card"> | ||
| <h2 class="m-card__heading"> | ||
| <a href="{{ value.category.url }}"> | ||
| <span class="m-card__icon">{{ svg_icon( value.icon ) }}</span> | ||
| <span>{{ value.category.text }}</span> | ||
| </a> | ||
| </h2> | ||
|
|
||
| <ul class="m-list"> | ||
| {%- for link in value.links %} | ||
| <li class="m-list__item"> | ||
| {%- if link.text is not none and link.text.find('@') > -1 -%} | ||
| {%- if not value.emails is defined -%} | ||
| {%- do value.update({'emails':[{'url':link.text}]}) -%} | ||
| {%- endif -%} | ||
| {% include 'contact-email.html' with context %} | ||
| {%- else -%} | ||
| {%- set link_text = link.text if link.text else 'Learn More' -%} | ||
| {%- set link -%} | ||
| <a class="a_link a-link--partially-styled" | ||
| href="{{ link.url }}" | ||
| {%- if link.aria_label -%} | ||
| aria-label="{{ link.aria_label }}" | ||
| {%- endif %}> | ||
| <span class="a-link__plain"> | ||
| {{ link_text }} | ||
| </span> | ||
| <span class="a-link__underlined"> | ||
| {{ _('Read answer') }} | ||
| </span> | ||
| </a> | ||
| {%- endset -%} | ||
| {{ link | safe }} | ||
| {%- endif %} | ||
| </li> | ||
| {%- endfor %} | ||
| </ul> | ||
|
|
||
| <div class="m-card_footer"> | ||
| <a href="{{ value.category.url }}"> | ||
| {{ value.footer_label }} | ||
| </a> | ||
| </div> | ||
|
|
||
| </article> | ||
|
|
||
| {% endmacro %} |
105 changes: 34 additions & 71 deletions
105
cfgov/v1/jinja2/v1/includes/organisms/feature-cards.html
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 |
|---|---|---|
| @@ -1,85 +1,48 @@ | ||
| {# ========================================================================== | ||
|
|
||
| Feature Card | ||
| Featured Cards | ||
|
|
||
| ========================================================================== | ||
| ========================================================================== | ||
|
|
||
| Description: | ||
| Description: | ||
|
|
||
| Create a feature card molecule when given: | ||
| Create a 50/50 set of featured cards organism when given: | ||
|
|
||
| value: Object defined from a StreamField block. | ||
| value: Object defined from a StreamField block. | ||
|
|
||
| value.category: A set of values related to the card category | ||
| (title), including: | ||
| value.feature_cards: List of Feature Card molecules. See Info Unit | ||
| molecule template for details. | ||
|
|
||
| value.category.url: A string for the URL of the category page. | ||
| ========================================================================== #} | ||
|
|
||
| value.category.text: A string for the title of the category. | ||
| {%- from 'v1/includes/blocks/heading.html' import heading without context %} | ||
| {%- from 'v1/includes/molecules/feature-card.html' import feature_card with context %} | ||
|
|
||
| value.icon: A string corresponding to an SVG icon. | ||
| <section> | ||
| <h2 class="u-show-on-mobile u-mt45"> | ||
| Browse questions by category | ||
| </h2> | ||
|
|
||
| value.footer_label: A tuple of items related to the card, including: | ||
| <ul class="u-show-on-mobile category__list m-list m-list--links u-mb0"> | ||
| {% for card in value.feature_cards %} | ||
| <li class="m-list__item"> | ||
| <a class="m-list__link a-link a-link--jump a-link--icon-after-text" href="{{ card.category.url }}"> | ||
| <span class="a-link__text">{{ card.category.text }}</span> | ||
| {{ svg_icon( card.icon ) }} | ||
| </a> | ||
| </li> | ||
| {% endfor %} | ||
| </ul> | ||
|
|
||
| value.links: A tuple of items to create a list | ||
| of links, containing: | ||
| <div class="u-hide-on-mobile question-categories u-mb30"> | ||
| <div class="o-card-group o-card-group--column-2"> | ||
| <div class="o-card-group__cards"> | ||
|
|
||
| value.links[i].url: A string for the URL of the link. | ||
| {% for card in value.feature_cards %} | ||
| {{- feature_card(card) }} | ||
| {% endfor %} | ||
|
|
||
| value.links[i].text: A string for the text of the link. | ||
|
|
||
| value.links[i].aria_label: (Optional) An aria-label for the link. | ||
|
|
||
| ========================================================================== #} | ||
|
|
||
| {%- from 'v1/includes/blocks/heading.html' import heading without context %} | ||
|
|
||
| {%- macro feature_card(value) -%} | ||
|
|
||
| <article class="m-card"> | ||
| <h2 class="m-card__heading"> | ||
| <a href="{{ value.category.url }}"> | ||
| <span class="m-card__icon">{{ svg_icon( value.icon ) }}</span> | ||
| <span>{{ value.category.text }}</span> | ||
| </a> | ||
| </h2> | ||
|
|
||
| <ul class="m-list"> | ||
| {%- for link in value.links %} | ||
| <li class="m-list__item"> | ||
| {%- if link.text is not none and link.text.find('@') > -1 -%} | ||
| {%- if not value.emails is defined -%} | ||
| {%- do value.update({'emails':[{'url':link.text}]}) -%} | ||
| {%- endif -%} | ||
| {% include 'contact-email.html' with context %} | ||
| {%- else -%} | ||
| {%- set link_text = link.text if link.text else 'Learn More' -%} | ||
| {%- set link -%} | ||
| <a class="a_link a-link--partially-styled" | ||
| href="{{ link.url }}" | ||
| {%- if link.aria_label -%} | ||
| aria-label="{{ link.aria_label }}" | ||
| {%- endif %}> | ||
| <span class="a-link__plain"> | ||
| {{ link_text }} | ||
| </span> | ||
| <span class="a-link__underlined"> | ||
| {{ _('Read answer') }} | ||
| </span> | ||
| </a> | ||
| {%- endset -%} | ||
| {{ link | safe }} | ||
| {%- endif %} | ||
| </li> | ||
| {%- endfor %} | ||
| </ul> | ||
|
|
||
| <div class="m-card_footer"> | ||
| <a href="{{ value.category.url }}"> | ||
| {{ value.footer_label }} | ||
| </a> | ||
| </div> | ||
|
|
||
| </article> | ||
|
|
||
| {% endmacro %} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> |