Skip to content

Commit

Permalink
Merge pull request #3825 from 18F/638-update-the-guides-index-page
Browse files Browse the repository at this point in the history
638 update the guides index page
  • Loading branch information
dluetger authored Apr 19, 2024
2 parents b4348f9 + 64d0fb2 commit 851aa06
Show file tree
Hide file tree
Showing 11 changed files with 323 additions and 34 deletions.
39 changes: 39 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,45 @@ A light card with the image on the left:
%}
```

### card-with-image-guides

This component is a spin off of `card-with-image`, made for the unique case on `guides.html`, and outputs a card with a heading, icon, descriptive text, a link, and, optionally, a hero image. It was spun off from the "card-with-image" partial to accomodate the unique needs of the guides index page. The whole card is no longer a clickable link. In the future, these might be condensed back down into a single partial and class, but it will probably require some more conditional statements because the behaviors are so different.

**Expected arguments**:

`link_url` - the url the links on the card will link to (href).

`image_path` - the path to the icon. Note that the partial will prepend the site baseurl. It should start with a leading forward slash (“/”).

`text_content` - the text to be displayed next to the icon; the guide name

`text_descrip` - the longer description to be displayed under the card heading

**Optional arguments**:

`card_color` - if set to `"dark"`, will make the card background the primary-dark color. Otherwise the background will default to a white color.

`image_alt_text` - will be the alt text for the image. If this argument isn’t provided, alt text will be set to “” and screen readers will ignore the image.

`image_side` - if set to `"right"`, will place the image on the right side of the card. Otherwise the image will default to the left side.

`image_size` - if set to `"md"`, will set the max image size to 8 units. Otherwise the image will default to a max size of 6 units.

`hero.url` - for guides where `promoted` == true, this will be the hero image for the card. Like the icon, the partial will prepend the site baseurl. It should start with a leading forward slash (“/”).

**Example**
A card on the guides index page that has a hero image. In the current implementation, these values are being brought in `guide.yml` as variables.
```
{% include card-with-image-guides.html
text_content="Design Methods"
text_descrip="Involve the people who will use your service in the design process."
link_url="https://guides.18f.gov/methods/"
image_path="/assets/img/guides/design-methods-darker.svg"
image_side="right"
hero_url="/assets/img/guides/design-methods-hero.svg"
%}
```

### featured-posts

This component outputs a list of blog post previews to be displayed on pages other than the blog. Each preview will take up 12 columns on mobile screens, 6 columns on tablet screens, and 4 columns on screens larger than a tablet.
Expand Down
28 changes: 27 additions & 1 deletion _data/guides.yml
Original file line number Diff line number Diff line change
@@ -1,47 +1,73 @@
#"promoted" is being used for layout, and per the design, it should only be set to true for two guides at a time

- name: "Accessibility"
link: "https://guides.18f.gov/accessibility"
description: "Make websites more accessible so everyone can use them."
promoted: false
image:
light: "/assets/img/guides/accessibility-lightest.svg"
dark: "/assets/img/guides/accessibility-darker.svg"
hero: ""

- name: "Agile"
link: "https://guides.18f.gov/agile/"
description: "Move toward an agile approach to stay within budget and provide value to the public."
promoted: false
image:
light: "/assets/img/guides/agile-lightest.svg"
dark: "/assets/img/guides/agile-darker.svg"
hero: ""

- name: "Content"
link: "https://guides.18f.gov/content-guide/"
description: "Create content in plain language to help the public save time and build trust."
promoted: false
image:
light: "/assets/img/guides/content-lightest.svg"
dark: "/assets/img/guides/content-darker.svg"
hero: ""

- name: "De-risking"
- name: "Derisking"
link: "https://guides.18f.gov/derisking/"
description: "Save millions of dollars and reduce risk in your technology projects."
promoted: true
image:
light: ""
dark: "/assets/img/guides/derisking-darker.svg"
hero: "/assets/img/guides/derisking-hero.svg"

- name: "Design Methods"
link: "https://guides.18f.gov/methods/"
description: "Involve the people who will use your service in the design process."
promoted: true
image:
light: ""
dark: "/assets/img/guides/design-methods-darker.svg"
hero: "/assets/img/guides/design-methods-hero.svg"

- name: "Engineering"
link: "https://guides.18f.gov/engineering"
description: "Develop secure software in the cloud, which can reduce costs and scale to meet public need."
promoted: false
image:
light: ""
dark: "/assets/img/guides/engineering-darker.svg"
hero: ""

- name: "Product"
link: "https://guides.18f.gov/product"
description: "Support a team to deliver the right product to the right audience."
promoted: false
image:
light: "/assets/img/guides/product-lightest.svg"
dark: "/assets/img/guides/product-darker.svg"
hero: ""

- name: "User Experience"
link: "https://guides.18f.gov/ux-guide/"
description: "Make your products and services work for the people that use them."
promoted: false
image:
light: "/assets/img/guides/ux-lightest.svg"
dark: "/assets/img/guides/ux-darker.svg"
hero: ""
59 changes: 59 additions & 0 deletions _includes/card-with-image-guides.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
{% comment %}
This partial outputs a card with a heading, icon, descriptive text, a link, and, optionally, a hero image.
It was spun off from the "card-with-image" partial to accomodate the unique needs of the guides index page.
The whole card is no longer a clickable link. In the future, these might be condensed back down
into a single partial and class, but it will probably require some more conditional statements
because the behaviors are so different.

The expected arguments for this partial are:
link_url - the url the links on the card will link to (href)
image_path - the path to the image, note that the partial will prepend the site baseurl
text_content - the text to be displayed next to the image; the guide name
text_descrip - the longer description to be displayed under the card heading

Optional arguments:
card_color - if set to "dark" will make the card background the primary-dark color. Otherwise will default to a white background.
image_alt_text - will be the alt text for the image. If this argument isn’t provided alt text will be set to “” and the image will be ignored by screen readers.
image_side - if set to "right" will place the image on the right side of the card. Otherwise the image will default to the left side.
image_size - if set to "md" will set the max image size to 8 units. Otherwise the image will default to a max size of 6 units.
hero.url - for guides where "promoted" = true, this will be the hero image for the card.
{% endcomment %}

<div class="card-with-image-guides display-flex flex-column radius-lg">

<!--The card only attempts to render a hero image (and the background color) if it has one assigned, which right now is only reserved for guides labeled "important"-->
<!--Using a few inline styles here to force the hero div to respect the border radii of the card, but there might be a more elegant way of doing that-->
{% if include.hero_url %}
<div class="padding-4 display-flex flex-column bg-primary-dark" style="border-top-left-radius:inherit; border-top-right-radius: inherit;">
<img class="flex-align-self-center maxh-card-lg" alt="" src="{{ site.baseurl }}{{include.hero_url}}">
</div>
{% endif %}

<div class="padding-4 display-flex flex-column flex-align-stretch card-content">
<div class="margin-bottom-2 display-flex flex-align-center {%- if include.image_side == "right" %} flex-justify {% endif %} height-full">

{% capture card_image %}
<img src="{{ site.baseurl }}{{include.image_path}}"
class="{%- if include.image_size == "md" -%}maxw-8 height-8 {%- else -%} maxw-6 height-6 {%- endif %} margin-top-0 {%- unless include.image_side == "right" %} margin-right-2 {% endunless %}"
alt="{{- include.image_alt_text -}}"
>
{% endcapture %}

{% capture card_text %}
<h3 class="text-bold margin-y-0">{{ include.text_content }}</h3>
{% endcapture %}

{% if include.image_side == "right" %}
{{ card_text }}
{{ card_image }}
{% else %}
{{ card_image }}
{{ card_text }}
{% endif %}

</div>

<p class="font-sans-md margin-y-0 text-no-underline">{{ include.text_descrip }}</p>
<a href="{{include.link_url}}" class="text-bold flex-align-end">Read <span class="text-lowercase">{{ include.text_content }}</span> guide</a>
</div>
</div>
2 changes: 1 addition & 1 deletion _includes/footer.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<footer>
<div class="grid-container padding-y-6">
{% unless page.hide_footer_rule %}
<hr class="hr-1-dark footer-hr-alignment">
<hr class="hr-1-dark footer-hr-alignment">
{% endunless %}
<div class="grid-row grid-gap">
<div class="tablet:grid-col-3">
Expand Down
36 changes: 36 additions & 0 deletions _layouts/guides.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
layout: default
main:
class: 'primary-layout'
---

{% assign page_title = page.subnav_title | default: page.title %}

{% if page.breadcrumb %}
{% include breadcrumb.html
page_title=page_title
background_class='bg-base-lightest'
%}
{% endif %}

<section class="usa-section section-padding-sm">
<div class="grid-container">
<h1> {{ page.title }} </h1>
{% if page.lead %}
<p class="font-sans-xl line-height-sans-3"> {{ page.lead }} </p>
{% endif %}
{% if page.image %}
<img src="{{ site.baseurl }}{{ page.image }}"
alt="{{ page.image_alt_text }}"
class="margin-top-4"
>
{% endif %}
</div>
</section>

{{ content }}

{% if page.banner_cta %}
{% include banner-cta.html %}
{% endif %}

25 changes: 25 additions & 0 deletions _sass/_components/card-with-image-guides.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
@use 'uswds-core' as *;
@use 'variables.scss' as *;

.card-with-image-guides {

box-sizing: border-box;
border: 2px solid transparent;
background-color: white;
border-radius: radius-lg;
flex-grow: 0;
min-height: 260px;
}

.card-content{
flex-grow: 1;
}

.card-with-image-guides p{
text-wrap: pretty;
flex-grow: 1;
}

.card-with-image-guides a{
text-wrap: pretty;
}
1 change: 1 addition & 0 deletions _sass/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ Custom styling
@forward '_components/blog';
@forward '_components/button';
@forward '_components/card-with-image';
@forward '_components/card-with-image-guides';
@forward '_components/header';
@forward '_components/hr';
@forward '_components/project-page';
Expand Down
17 changes: 17 additions & 0 deletions assets/img/guides/derisking-hero.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions assets/img/guides/design-methods-hero.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 851aa06

Please sign in to comment.