Add Brand Guide to repo

.eleventy.js

@@ -1,10 +1,12 @@
-const { DateTime } = require('luxon');
 const fs = require('fs');
 const pluginRss = require('@11ty/eleventy-plugin-rss');
 const pluginNavigation = require('@11ty/eleventy-navigation');
 const markdownIt = require('markdown-it');
+const markdownItAttrs = require('markdown-it-attrs');
 const markdownItAnchor = require('markdown-it-anchor');
+const { readableDate, htmlDateString, head, min, filterTagList } = require("./config/filters");
 const { headingLinks } = require("./config/headingLinks");
+const { contrastRatio, humanReadableContrastRatio } = require("./config/wcagColorContrast");
 const yaml = require("js-yaml");
 const svgSprite = require("eleventy-plugin-svg-sprite");
 const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
@@ -23,10 +25,14 @@ module.exports = function (config) {
 
   // Specific scripts to guides
   config.addPassthroughCopy("./assets/_common/js/*");
-  //
+
   config.addPassthroughCopy({'./assets/_common/_img/favicons/favicon.ico': './favicon.ico' });
   config.addPassthroughCopy({'./assets/_common/_img/favicons': './img/favicons' });
 
+  // Set download paths
+  // Place files for download in assets/{guide}/dist/{filename.ext}
+  config.addPassthroughCopy("./assets/**/dist/*");
+
   // Add plugins
   config.addPlugin(pluginRss);
   config.addPlugin(pluginNavigation);
@@ -51,41 +57,18 @@ module.exports = function (config) {
   // Allow yaml to be used in the _data dir
   config.addDataExtension("yaml", contents => yaml.load(contents));
 
-  config.addFilter('readableDate', (dateObj) => {
-    return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat(
-      'dd LLL yyyy'
-    );
-  });
-
+  // Filters
+  // Add filter function defintions to config/filters.js, then add the functions
+  // to the import statement above and define like the other filters.
+  config.addFilter('readableDate', readableDate);
   // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
-  config.addFilter('htmlDateString', (dateObj) => {
-    return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat('yyyy-LL-dd');
-  });
-
-  // Get the first `n` elements of a collection.
-  config.addFilter('head', (array, n) => {
-    if (!Array.isArray(array) || array.length === 0) {
-      return [];
-    }
-    if (n < 0) {
-      return array.slice(n);
-    }
-
-    return array.slice(0, n);
-  });
-
-  // Return the smallest number argument
-  config.addFilter('min', (...numbers) => {
-    return Math.min.apply(null, numbers);
-  });
-
-  function filterTagList(tags) {
-    return (tags || []).filter(
-      (tag) => ['all', 'nav', 'post', 'posts'].indexOf(tag) === -1
-    );
-  }
-
+  config.addFilter('htmlDateString', htmlDateString);
+  config.addFilter('head', head); // Get the first `n` elements of a collection.
+  config.addFilter('min', min); // Return the smallest number argument
   config.addFilter('filterTagList', filterTagList);
+  // Color contrast checkers for the color matrix in the Brand guide
+  config.addFilter('contrastRatio', contrastRatio);
+  config.addFilter('humanReadableContrastRatio', humanReadableContrastRatio);
 
   // Create an array of all tags
   config.addCollection('tagList', function (collection) {
@@ -97,15 +80,15 @@ module.exports = function (config) {
     return filterTagList([...tagSet]);
   });
 
-  // Customize Markdown library and settings:
+  // Customize Markdown library and settings
   let markdownLibrary = markdownIt({
     html: true,
     breaks: false,
     linkify: false,
   }).use(markdownItAnchor, {
     permalink: headingLinks,
     slugify: config.getFilter('slug'),
-  });
+  }).use(markdownItAttrs);
   config.setLibrary('md', markdownLibrary);
 
   // Override Browsersync defaults (used only with --serve)

_data/navigation.yaml

@@ -13,6 +13,34 @@ agile:
   - name: More 18F guides
     url: https://18f.gsa.gov/guides/
 
+brand:
+  - name: Introduction
+    url: /brand/
+  - name: Logo
+    url: /brand/logo/
+  - name: Color palette
+    url: /brand/color-palette/
+  - name: Typography
+    url: /brand/typography/
+  - name: Icons
+    url: /brand/icons/
+  - name: Templates
+    url: /brand/templates/
+  - name: Images
+    url: /brand/images/
+  - name: Principles
+    url: /brand/principles/
+  - name: More 18F guides
+    url: https://18f.gsa.gov/guides/
+
+content-guide:
+  - name: About this guide
+    url: /content-guide/
+  - name: Our approach
+    url: /content-guide/our-approach/
+  - name: Our style
+    url: /content-guide/our-style/
+
 engineering:
   - name: Home
     url: /engineering/
@@ -27,14 +55,6 @@ engineering:
   - name: Security
     url: /engineering/security/
 
-content-guide:
-  - name: About this guide
-    url: /content-guide/
-  - name: Our approach
-    url: /content-guide/our-approach/
-  - name: Our style
-    url: /content-guide/our-style/
-
 eng-hiring:
   - name: Overview
     url: /eng-hiring/
@@ -72,4 +92,3 @@ product:
     url: /product/deliver/
   - name: Enable partners
     url: /product/partners/
-

_data/titles_roots.yaml

@@ -1,17 +1,20 @@
 # Title for each guide that will appear in the header, as well as the root subdirectory for the guide
-default: 
+default:
   title: 18F Approaches
   root: /
-accessibility: 
+accessibility:
   title: Accessibility
   root: /accessibility/
-agile: 
+agile:
   title: Agile
   root: /agile/
-content-guide: 
+brand:
+  title: Visual identity
+  root: /brand/
+content-guide:
   title: Content Guide
   root: /content-guide/
-derisking: 
+derisking:
   title: De-risking Guide
   root: /derisking/
 eng-hiring:

_includes/brand/color-matrix.html

@@ -0,0 +1,112 @@
+<svg class="usa-matrix-symbol-definitions">
+  <symbol id="usa-matrix-bad-contrast-ratio" viewBox="0 0 100 100">
+    <rect width="100" height="100" fill="#f0f0f0"/>
+    <line x1="0" y1="100" x2="100" y2="0" stroke="white" stroke-width="4"/>
+  </symbol>
+</svg>
+
+
+<div class="usa-matrix-legend">
+    <svg viewBox="0 0 100 100" class="usa-sr-invisible" aria-hidden="true">
+    <rect width="100" height="100" fill="#121212"/>
+    <text x="10" y="50%" text-achor="middle" alignment-baseline="middle" style="fill: #f1f2f1; font-family:Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-size:2em; ">Aa ★</text>
+  </svg>
+  <p class="usa-sr-invisible" aria-hidden="true">You can use these color combinations for large text, small text, and non-text elements.</p>
+</div>
+
+<div class="usa-matrix-legend">
+    <svg viewBox="0 0 100 100" class="usa-sr-invisible" aria-hidden="true">
+    <rect width="100" height="100" fill="#f0f0f0"/>
+    <polygon points="100,0, 100,100, 0,100" style="fill:#121212;" />
+    <text x="55" y="80" style="fill: #f1f2f1; font-family:Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-size:2em; "> ★ </text>
+  </svg>
+  <p class="usa-sr-invisible" aria-hidden="true"> Only use these color combinations for non-text elements.</p>
+</div>
+
+<div class="usa-matrix-legend legend-bad-contrast">
+  <svg viewBox= "0 0 100 100" class="usa-sr-invisible" aria-hidden="true"><use xlink:href="#usa-matrix-bad-contrast-ratio"/></svg>
+
+  <p class="usa-sr-invisible" aria-hidden="true">
+    <strong>Don&rsquo;t</strong> use these color combinations. They don&rsquo;t have enough contrast to meet accessibility standards, and some people will have difficulty reading the text.
+  </p>
+</div>
+
+<table class="usa-table--borderless usa-matrix" name="color-palette-grid">
+  <thead>
+    <tr>
+      <td scope="col"></td>
+      {% for foreground in palette %}
+        <td scope="col">
+          <div class="usa-matrix-desc">
+            {{ foreground.name | capitalize }} text<br>
+            #{{ foreground.hex }}<br>
+          </div>
+          <strong class="usa-matrix-foreground-{{ foreground.name }} usa-sr-invisible" aria-hidden="true">
+            Aa
+          </strong>
+        </td>
+      {% endfor %}
+    </tr>
+  </thead>
+
+  <tbody>
+  {% assign reversed_palette = palette | reverse %}
+  {% for background in reversed_palette %}
+    <tr>
+      <td scope="row">
+        <div>
+          <div class="usa-matrix-square usa-color-{{ background.name }}"></div>
+          <div class="usa-matrix-desc">
+            {{ background.name | capitalize }} background<br>
+            #{{ background.hex }}
+          </div>
+        </div>
+      </td>
+      {% for foreground in palette %}
+      {% assign ratio = foreground.hex | contrastRatio: background.hex %}
+      {% if ratio >= 3.1 %}
+      <td class="usa-matrix-valid-color-combo">
+        {% if ratio >= 4.5 %}
+          <div class="usa-matrix-square usa-color-{{ background.name }} usa-sr-invisible"
+               title="The contrast ratio of {{ foreground.name }} on {{ background.name }} is {{ ratio | humanReadableContrastRatio }}."
+               role="presentation">
+
+            <strong class="usa-matrix-foreground-{{ foreground.name }} usa-sr-invisible" aria-hidden="true">
+              Aa ★
+            </strong>
+          </div>
+          <div class="usa-matrix-color-combo-description">
+            <p><strong>{{ foreground.name | capitalize }}</strong> elements on&nbsp;<strong>{{ background.name }}</strong> background</p>
+            <span class="usa-sr-only">is 508-compliant, with a contrast ratio of {{ ratio | humanReadableContrastRatio }}.</span>
+          </div>
+        {% else %}
+          <div class= "usa-matrix-square usa-sr-invisible" aria-hidden="true">
+          <svg viewBox="0 0 100 100">
+              <rect width="100" height="100" fill="#f0f0f0"/>
+              <polygon points="100,0, 100,100, 0,100" style="fill: #{{background.hex}};" />
+              <text x="55" y="80" style="fill: #{{ foreground.hex }}; font-family:Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-size:1.75em; "> ★ </text>
+          </svg>
+          </div>
+          <div class="usa-matrix-color-combo-description">
+            <p><strong>{{ foreground.name | capitalize }}</strong> elements on&nbsp;<strong>{{ background.name }}</strong> background</p>
+            <span class="usa-sr-only">is 508-compliant, with a contrast ratio of {{ ratio | humanReadableContrastRatio }}. We recommend using this combination only for non-text elements. </span>
+          </div>
+        {% endif %}
+      </td>
+      {% else %}
+      <td class="usa-matrix-invalid-color-combo">
+        <div class="usa-sr-invisible" title="The contrast ratio of {{ foreground.name }} on {{ background.name }} is {{ ratio | humanReadableContrastRatio }}, which does not conform with the standards of Section 508 for body text." role="presentation" aria-hidden="true">
+          <svg class="usa-matrix-square usa-sr-invisible">
+            <use xlink:href="#usa-matrix-bad-contrast-ratio"/>
+          </svg>
+        </div>
+        <div class="usa-sr-only">
+          Do not use {{ foreground.name }} text on {{ background.name }} background; it is not 508-compliant, with a contrast ratio of {{ ratio | humanReadableContrastRatio }}.
+        </div>
+      </td>
+      {% endif %}
+      {% endfor %}
+    </tr>
+  {% endfor %}
+  </tbody>
+</table>

_includes/guidelist.html

@@ -1,39 +1,46 @@
-<section class="usa-section border-1 border-primary-dark"> 
+<section class="usa-section border-1 border-primary-dark">
   <div class="grid-container">
   <h2> Some approaches and stuff</h2>
-    <div class="grid-row grid-gap"> 
-      <div class="grid-col-6 tablet:grid-col-3 margin-top-2"> 
-        <a href="{{'/accessibility/' | url }}"> 
+    <div class="grid-row grid-gap">
+      <div class="grid-col-6 tablet:grid-col-3 margin-top-2">
+        <a href="{{'/accessibility/' | url }}">
           {% image_with_class "assets/_common/_img/guide_icons/accessibility.svg" "maxw-6" "" %}
           <p>So accessibiliity</p>
         </a>
       </div>
 
-      <div class="grid-col-6 tablet:grid-col-3 margin-top-2"> 
-        <a href="{{'/agile/' | url }}"> 
+      <div class="grid-col-6 tablet:grid-col-3 margin-top-2">
+        <a href="{{'/agile/' | url }}">
           {% image_with_class "assets/_common/_img/guide_icons/agile.svg" "maxw-6" "" %}
           <p>So agile</p>
         </a>
       </div>
 
-      <div class="grid-col-6 tablet:grid-col-3 margin-top-2"> 
-        <a href="{{'/content-guide/' | url }}"> 
+      <div class="grid-col-6 tablet:grid-col-3 margin-top-2">
+        <a href="{{'/brand/' | url }}">
+          {% image_with_class "assets/_common/_img/guide_icons/brand.svg" "maxw-6" "" %}
+          <p>Such brand</p>
+        </a>
+      </div>
+
+      <div class="grid-col-6 tablet:grid-col-3 margin-top-2">
+        <a href="{{'/content-guide/' | url }}">
           {% image_with_class "assets/_common/_img/guide_icons/content.svg" "maxw-6" "" %}
           <p>Very content-guide </p>
         </a>
       </div>
 
       <div class="grid-col-6 tablet:grid-col-3 margin-top-2">
-        <a href="{{'/eng-hiring/' | url }}"> 
+        <a href="{{'/eng-hiring/' | url }}">
           {% image_with_class "assets/_common/_img/team-lg.svg" "maxw-6" "" %}
           <p>Much hiring of engineers</p>
         </a>
       </div>
 
-      <div class="grid-col-6 tablet:grid-col-3 margin-top-2"> 
-        <a href="{{'/product/' | url }}"> 
+      <div class="grid-col-6 tablet:grid-col-3 margin-top-2">
+        <a href="{{'/product/' | url }}">
           {% image_with_class "assets/_common/_img/guide_icons/product.svg" "maxw-6" "" %}
-          <p>Product guide</p>
+          <p>Product guide (Wow)</p>
         </a>
       </div>