Merge pull request #3825 from 18F/638-update-the-guides-index-page

638 update the guides index page

README.md

@@ -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.

_data/guides.yml

@@ -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: ""

_includes/card-with-image-guides.html

@@ -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>

_includes/footer.html

@@ -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">

_layouts/guides.html

@@ -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 %}
+

_sass/_components/card-with-image-guides.scss

@@ -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;
+}

_sass/styles.scss

@@ -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';