[IDP] Inclusive design report

_config.yml

@@ -72,6 +72,9 @@ collections:
   next:
     output: true
     permalink: /:collection/:title
+  together:
+    output: true
+    permalink: /:collection/:title
   security_updates:
     output: true
     permalink: /:collection/:title
@@ -115,6 +118,14 @@ defaults:
       layout: "next-content"
       chapter: false
       hero_color: "next-gray-dark"
+  - scope:
+      path: ""
+      type: together
+    values:
+      report_title: "Inclusive Design Patterns"
+      layout: "together-content"
+      chapter: false
+      hero_color: "next-gray-dark"
   - scope:
       path: ""
       type: security_updates

_includes/head.html

@@ -52,15 +52,20 @@
     {% if page.layout == 'next' or page.layout == 'next-content' %}
       <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/uswds-next.css">
     {% endif %}
+    {% if page.layout == 'together' or page.layout == 'together-content' %}
+      <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/uswds-together.css">
+    {% endif %}
   <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/uswds-utilities.css">
-
 {% else %}
   {% if page.layout == 'next' or page.layout == 'next-content' %}
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/styles-next.css">
+  {% elsif page.layout == 'together' or page.layout == 'together-content' %}
+    <!-- TODO: Add prod css -->
+    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/styles.css">
+    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/uswds-together.css">
   {% else %}
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/styles.css">
   {% endif %}
-
 {% endif %}
 
 <!-- USWDS INIT

_includes/together/together-color-hr.html

@@ -0,0 +1,8 @@
+<div class="grid-row margin-bottom-neg-1">
+  <div class="grid-col bg-violet-80v height-1"></div>
+  <div class="grid-col bg-primary height-1"></div>
+  <div class="grid-col bg-red-50 height-1"></div>
+  <div class="grid-col bg-gold-20v height-1"></div>
+  <div class="grid-col bg-green-cool-40v height-1"></div>
+  <div class="grid-col bg-indigo-cool-60v height-1"></div>
+</div>

_includes/together/together-deia-section.html

@@ -0,0 +1,34 @@
+<section class="margin-bottom-5">
+{% if include.color == "gold" %}
+  <h3 class="text-base-darker text-uppercase font-sans-lg line-height-sans-2">
+    {{ include.heading }}
+  </h3>
+{% else %}
+  <h3 class="text-{{include.color}} text-uppercase font-sans-lg line-height-sans-2">
+    {{ include.heading }}
+  </h3>
+{% endif %}
+  <p class="font-sans-md margin-0">
+    {{include.sub-heading}}
+  </p>
+  <p class="margin-0 margin-top-1">Consider</p>
+  <ul class="margin-0">
+    {% for bullet in include.bullets %}
+      <li>{{ bullet }}</li>
+    {% endfor %}
+  </ul>
+
+{% if include.color == "gold" %}
+  <p class="bg-{{include.color}} text-base-darker padding-2 padding-bottom-3 radius-md">
+    <span class="text-uppercase font-sans-3xs text-bold">Example</span>  
+    <br/>
+    {{ include.example }}
+  </p>    
+{% else %}
+  <p class="bg-{{include.color}} text-white padding-2 padding-bottom-3 radius-md">
+    <span class="text-uppercase font-sans-3xs text-bold">Example</span>  
+    <br/>
+    {{ include.example }}
+  </p>    
+{% endif %}
+</section>

_includes/together/together-finding-item.html

@@ -0,0 +1,8 @@
+<div class="together-finding">
+  <div class="together-finding__body">
+    <h3 class="together-finding__heading border-{{ include.border }} border-top-1 padding-top-2">
+      {{ include.heading }}
+    </h3>
+    <p class="together-finding__text">{{ include.text }}</p>
+  </div>
+</div>

_includes/together/together-quote.html

@@ -0,0 +1,27 @@
+{% assign hideIcon = "false" %}
+
+{% if include.hide-icon %}
+  {% assign hideIcon = include.hide-icon %}
+{% endif %}
+
+{% if include.top-icon and hideIcon == "false"  %}
+  <img class="display-block margin-x-auto margin-top-4" src="{{ site.baseurl }}/img/together/quote.svg" alt="quote">
+{% endif %}
+  <blockquote class="together-blockquote together-blockquote--{{ include.variant }}">
+{% if hideIcon %}
+
+{% else %}
+<svg class="usa-icon text-{{ include.color }}" aria-hidden="true" focusable="false" role="img" width="38" height="28" viewBox="0 0 38 28"  xmlns="http://www.w3.org/2000/svg" fill="#202550">
+  <path d="M35.0013 0.589043L27.0013 0.589044L21.668 11.2557L21.668 27.2557L37.668 27.2557L37.668 11.2557L29.668 11.2557L35.0013 0.589043ZM13.668 0.589045L5.66797 0.589045L0.334631 11.2557L0.334633 27.2557L16.3346 27.2557L16.3346 11.2557L8.33463 11.2557L13.668 0.589045Z"/>
+</svg>
+{% endif %}
+  {{ include.quote }}
+
+  {% if include.source-link %}
+  <a href="{{ include.source-link }}">
+    <span class="together-blockquote__source">— {{ include.source }}</span>
+  </a>
+{% else %}
+  <p class="together-blockquote__source">— {{ include.source }}</p>
+{% endif %}
+</blockquote>

_includes/together/together-spot-item.html

@@ -0,0 +1,3 @@
+<div class="next-spot-item border-base-darker border-top-1 padding-top-2 {{ include.variant }}">
+  <p class="margin-top-0">{{ include.text | markdownify | remove: '<p>' | remove: '</p>' }}</p>
+</div>

_layouts/together-content.html

@@ -0,0 +1,74 @@
+---
+layout: together
+report_title: Inclusive Design Patterns
+---
+
+{% assign page_type = 'summary' %}
+{% if page.chapter == true %}
+  {% assign page_type = 'chapter' %}
+{% elsif page.parent %}
+  {% assign page_type = 'page' %}
+{% endif %}
+
+<section class="together-hero together-hero--{{ page_type }} together-hero--{{ page.slug }}  text-black  " aria-label="Page description">
+  <div class="grid-container position-relative tablet:padding-6 desktop:padding-y-8">
+    <div class="grid-row margin-top-2 desktop:margin-y-6">
+      <div class="tablet:grid-col-4 desktop:grid-col-6 together-hero__content padding-x-2 tablet:padding-x-0 heading-wrapper">
+        {% if page_type == 'chapter' %}
+          <h1 class="together-hero__heading">{{ page.hero_title }}</h1>
+          <h2 class="together-hero__subhead text-base-dark">{{ page.hero_subtitle }}</h2>
+        {% elsif page_type == 'page' %}
+          <h1 class="together-hero__subhead">{{ page.subhead }}</h1>
+          <h2 class="together-hero__heading">{{ page.title }}</h2>
+        {% endif %}
+      </div>
+
+      {% if page.hero_title == 'Inclusive design patterns' %}
+        <img class="together-hero__image bottom-0 right-0 width-tablet tablet:width-mobile-lg desktop:width-tablet" src="{{ site.baseurl }}/img/together/hero-bg-2-ne.svg" alt="Diverse group of humans" />
+      {% elsif page.hero_title == 'Findings' %}
+        <img class="together-hero__image bottom-0 right-0 width-tablet tablet:width-mobile-lg desktop:width-tablet" src="{{ site.baseurl }}/img/together/hero-bg-3-ne.svg" alt="Diverse group of humans" />
+      {% elsif page.hero_title == 'What’s next' %}
+        <img class="together-hero__image bottom-0 right-0 width-tablet tablet:width-mobile-lg desktop:width-tablet" src="{{ site.baseurl }}/img/together/hero-bg-4-ne.svg" alt="Diverse group of humans" />
+      {% elsif page.hero_title == 'Get involved' %}
+        <img class="together-hero__image bottom-0 right-0 width-tablet tablet:width-mobile-lg desktop:width-tablet" src="{{ site.baseurl }}/img/together/hero-bg-5-ne.svg" alt="Diverse group of humans" />
+      {% endif %}
+    </div>
+  </div>
+</section>
+
+<nav class="together-internal-nav bg-gray-10 text-base" aria-label="Together report internal navigation">
+  <div class="grid-container tablet:padding-x-1 desktop:padding-x-3">
+    <div class="desktop:grid-offset-3 desktop:padding-left-0 tablet:padding-x-6">
+      <ul id="internal-nav" class="together-internal-nav__list">
+        {% for item in site.together %}
+          {% if item.chapter %}
+            <li class="together-internal-nav__item">
+              <a href="{{ site.baseurl }}{{ item.url }}" class="together-internal-nav__link {% if item.title == page.title or item.title == page.parent %}
+                current
+              {% endif %}">     
+                {{ item.nav_title }}
+              </a>
+            </li>
+          {% endif %}
+        {% endfor %}
+          <li class="together-internal-nav__item">
+            <a href="{{ site.baseurl }}/patterns" class="usa-button">Patterns</a>
+          </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+
+<div class="grid-container usa-in-page-nav-together-container tablet:padding-x-6">
+  <div class="grid-row">
+    <div class="tablet:grid-col-9">
+      <main role="main" id="main-content">
+        {{ content }}
+      </main>
+    </div>
+    <div class="tablet:grid-col-3">
+      <aside class="usa-in-page-nav-together"></aside>
+    </div>
+  </div>
+</div>
+