Updated page and styles. Added a bar chart.

_data/assetPaths.json

@@ -85,6 +85,6 @@
   "warning.svg": "/assets/assets/warning-5OR6W6GJ.svg",
   "app.js": "/assets/js/app-EDZES2YK.js",
   "app.map": "/assets/js/app-EDZES2YK.js.map",
-  "index.css": "/assets/styles/index-2CIUQOP4.css",
-  "index.map": "/assets/styles/index-2CIUQOP4.css.map"
+  "index.css": "/assets/styles/index-NEFICJIY.css",
+  "index.map": "/assets/styles/index-NEFICJIY.css.map"
 }

_includes/components/miscellaneous-bar-chart.html

@@ -0,0 +1,68 @@
+
+<h4 id="chartTitle">{{ chartTitle }}</h4>
+
+<figure class="bar-chart-from-list" role="figure" aria-labelledby="chartTitle">
+  <figcaption class="usa-sr-only">{{- chartDescription -}}</figcaption>
+
+  <ul class="bar-chart__legend">
+    {%- for item in chartLegend -%}
+      <li class="font-sans-xs">
+        <span class="bar-chart__legend__swatch bg--{{- item[0] }}"></span>
+        {{- item[1].label -}}
+      </li>
+    {%- endfor -%}
+  </ul>
+
+  <ul class="bar-chart--vertical">
+    <li class="y-axis" aria-hidden="true">
+    {%- capture chartTicksString -%}
+      0,2,4,6,8,10,12,{{ chartYMax }}
+    {%- endcapture -%}
+    {%- assign chartTicks = chartTicksString | split: ',' -%}
+      {%- for tick in chartTicks -%}
+        <span class="y-tick">{{- tick | round -}}</span>
+      {%- endfor -%}
+    </li>
+    {%- for fy in chartData -%}
+      <li class="fy" aria-describedby="{{- fy.name -}}_label">
+        <h5 class="fy__wrapper-label font-sans-sm" id="{{- fy.name -}}_label">
+          {{- fy.name -}}
+        </h5>
+        <ul class="fy__wrapper">
+          <li class="bar-container">
+            <span class="bar bg--arabic_language" 
+              data-value="{{ fy.arabic_language }}" aria-hidden="true"
+              style="height: {{ fy.arabic_language | divided_by: chartYMax | times: 100 -}}%"></span>
+            <span class="usa-sr-only">{{ fy.arabic_language }} {{ chartLegend.arabic_language.label }}</span>
+          </li>
+          <li class="bar-container">
+            <span class="bar bg--mandarin_language" 
+              data-value="{{ fy.mandarin_language }}" aria-hidden="true"
+              style="height: {{ fy.mandarin_language | divided_by: chartYMax | times: 100 -}}%"></span>
+            <span class="usa-sr-only">{{ fy.mandarin_language }} {{ chartLegend.mandarin_language.label }}</span>
+          </li>
+          <li class="bar-container">
+            <span class="bar bg--spanish_language" 
+              data-value="{{ fy.spanish_language }}" aria-hidden="true"
+              style="height: {{ fy.spanish_language | divided_by: chartYMax | times: 100 -}}%"></span>
+            <span class="usa-sr-only">{{ fy.spanish_language }} {{ chartLegend.spanish_language.label }}</span>
+          </li>
+        </ul>
+      </li>
+    {%- endfor -%}
+  </ul>
+</figure>
+
+
+<style>
+/* 
+  or inline, style="background: {{- item[1].color -}}"  for legend
+  and style="background: {{- chartLegend.arabic_language.color -}}" for chart itself
+*/ 
+
+{% for item in chartLegend %}
+.bg--{{- item[0] }} {
+  background: {{ item[1].color }}
+}
+{% endfor %}
+</style>

_includes/components/report-bar-chart.html

@@ -55,129 +55,6 @@ <h4 class="fy__wrapper-label font-sans-sm" id="{{- fy.name -}}_label">
 
 
 <style>
-.bar-chart-from-list {
-  padding: 2rem 0 0;
-  margin: 0;
-}
-.bar-chart-from-list ul {
-  text-indent: 0;
-  padding-left: 0;
-  margin: 0 auto;
-}
-.bar-chart-from-list li {
-  list-style-type:none;
-}
-.bar-chart--vertical h4 {
-  margin-top: 2rem;
-}
-.bar-chart--vertical {
-  width: 100%;
-  margin: auto;
-  text-align: center;
-
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  padding-right: 1rem;
-
-  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.2) 1%, rgba(0, 0, 0, 0) 1%);
-  background-size: 100% 100px;
-  background-position: left top;
-  border: 1px solid #888;
-  border-left-width: 2px;
-  border-left-color: #444;
-}
-
-.bar-chart--vertical li {
-  position:relative;
-  display:flex;
-  vertical-align:bottom;
-  height:400px;
-  width: 100%;
-}
-.bar-chart--vertical .fy,
-.bar-chart--vertical .y-axis {
-  flex: auto;
-  display: block;
-  margin: 0;
-  max-width: 7rem;
-}
-.bar-chart--vertical .y-axis {
-  height: 428px;
-  margin-top:-28px;
-  max-width: 1rem;
-  display: flex;
-  flex-direction: column-reverse;
-  justify-content: space-between;
-  align-items: flex-start;
-  flex-wrap: nowrap;
-}
-.bar-chart--vertical .y-axis .y-tick {
-  display: block;
-  padding-left: 5px;
-}
-
-.bar-chart--vertical .fy__wrapper-label {
-  order: 2;
-}
-.bar-chart--vertical .fy {
-  display: flex;
-  flex-direction: column;
-}
-.bar-chart--vertical .fy__wrapper {
-  order: 1;
-  display: flex;
-  width: 100%;
-}
-
-.bar-chart--vertical .bar-container {
-  align-items: flex-end;
-  margin: 0 2px;
-}
-
-.bar-chart--vertical .bar-container .bar{
-  display: flex;
-  animation: draw 1s ease-in-out;
-  min-height: 1px;
-  width: 100%;
-}
-
-.bar-chart--vertical .bar-container .bar:before{
-  font-size:.8rem;
-  position:absolute;
-  left:0;
-  right:0;
-  top:100%;
-  padding:3px .25em 0;
-  display:block;
-  text-align:center;
-  content:attr(data-value);
-}
-
-@keyframes draw{
-  0%{height:0;} 
-}
-
-.bar-chart-from-list .bar-chart__legend {
-  margin: 4rem 0 2rem;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-.bar-chart__legend li {
-  padding: 1rem;
-  display: flex;
-  align-items: center;
-}
-.bar-chart__legend__swatch{
-  display: inline-block;
-  width: 1.25rem;
-  height: 1rem;
-  content: "";
-  margin-right: .25rem;
-}
-
 /* 
   or inline, style="background: {{- item[1].color -}}"  for legend
   and style="background: {{- chartLegend.projects_kicked_off.color -}}" for chart itself
@@ -188,5 +65,4 @@ <h4 class="fy__wrapper-label font-sans-sm" id="{{- fy.name -}}_label">
   background: {{ item[1].color }}
 }
 {% endfor %}
-
 </style>

_includes/layouts/post.html

@@ -12,6 +12,7 @@
   - In-the-news
   - Perspectives
   - Projects
+  - Research-findings
 ---
 <div class="portfolio-blog-pages">
   <div class="TxContent portfolio-blog-single-page blog-page static-content-page">
@@ -21,7 +22,7 @@
     <section class="usa-section grid-container">
       {% include "components/news-blog-post-breadcrumb.html" %}
       <div class="grid-row content-column grid-gap-6">
-        <div class="desktop:grid-col-8 usa-prose usa-layout-docs" id="main-content">
+        <div class="desktop:grid-col-8 usa-prose usa-layout-docs {{ className }}" id="main-content">
           {{ layoutContent }}
           <hr>
 

_includes/theme/styles/_impact-reports.scss

@@ -1132,7 +1132,6 @@ $c-report-header: #006680;
           font-weight: 700;
           border-right: 1px solid white;
           border-bottom: 5px solid color('violet-50');
-          ;
           text-align: center;
 
           &:last-child {