From e7e201a4d4b0fbb19670a18347e5fb8b26822e1a Mon Sep 17 00:00:00 2001 From: John Donmoyer Date: Fri, 14 Apr 2017 15:18:19 -0500 Subject: [PATCH 01/65] adding graphic list content for new homepage --- _layouts/landing.html | 17 +++++++++++++++++ pages/home.md | 17 +++++++++++++++++ 2 files changed, 34 insertions(+) diff --git a/_layouts/landing.html b/_layouts/landing.html index e6d08953c5..f3f9a3d2b2 100644 --- a/_layouts/landing.html +++ b/_layouts/landing.html @@ -23,6 +23,23 @@

{{ page.hero.callout }}

{% endif %} + {% if page.graphic-list %} +
+ {% for page.graphic-list.list-item in page.graphic-list %} + {% cycle '
', '' %} +
+ {{ graphic.image.alt }} +
+ {% if page.graphic-list.list-item.title %}

{{ page.graphic-list.list-item.title }}

{% endif %} + {{ page.graphic-list.list-item.description | markdownify }} +
+
+ {% cycle '', '
' %} + {% endfor %} +
+ {% endif %} + +
{{ content }}
diff --git a/pages/home.md b/pages/home.md index 20cd1c66f9..a3e51249ba 100644 --- a/pages/home.md +++ b/pages/home.md @@ -8,6 +8,23 @@ hero: button: href: whats-new/releases/#version-1-0-0 text: Read more about this release +graphic-list: + list-item: + title: Getting Started + description: Learn how to get started using the U.S. Web Design Standards for your project, regardless of your technical stack. + image: + list-item: + title: What's New + description: Keep up to date with the current news and product development updates for the U.S. Web Design Standards. + image: + list-item: + title: UI Components + description: Discover all the different components that the Standards provide as both design and development assets. + image: + list-item: + title: Page Templates + description: Explore the different page templates that have been created to jump start your product development. + image: --- ## New training and services From 2c39de559de536d77650b82236536a6d55c7bd76 Mon Sep 17 00:00:00 2001 From: John Donmoyer Date: Mon, 17 Apr 2017 11:11:36 -0500 Subject: [PATCH 02/65] adding image data to home --- _layouts/landing.html | 4 ++-- css/styleguide.scss | 6 +++--- pages/home.md | 15 ++++++++++----- 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/_layouts/landing.html b/_layouts/landing.html index f3f9a3d2b2..6a3107cedb 100644 --- a/_layouts/landing.html +++ b/_layouts/landing.html @@ -25,10 +25,10 @@

{{ page.hero.callout }}

{% if page.graphic-list %}
- {% for page.graphic-list.list-item in page.graphic-list %} + {% for list-item in page.graphic-list %} {% cycle '
', '' %}
- {{ graphic.image.alt }} +
{% if page.graphic-list.list-item.title %}

{{ page.graphic-list.list-item.title }}

{% endif %} {{ page.graphic-list.list-item.description | markdownify }} diff --git a/css/styleguide.scss b/css/styleguide.scss index f5fd1fad80..03b5fe38d2 100644 --- a/css/styleguide.scss +++ b/css/styleguide.scss @@ -202,9 +202,9 @@ body { } a { - color: $color-gray; + color: $color-gray-dark; font-size: $h5-font-size; - font-weight: bold; + font-weight: normal; letter-spacing: 0.3px; line-height: $height-nav-secondary; text-decoration: none; @@ -1410,7 +1410,7 @@ hr { background: $color-gray-lighter; border: none; height: 1px; - margin: 3em 0; + margin: 3em 0; } iframe { diff --git a/pages/home.md b/pages/home.md index a3e51249ba..09fc6fff98 100644 --- a/pages/home.md +++ b/pages/home.md @@ -3,28 +3,33 @@ permalink: / layout: landing title: Announcing version 1.0 hero: - callout: Announcing version 1.0 - content: After a year and a half of development and user research, we’re officially launching version 1.0 of the U.S. Web Design Standards. Please explore the site, read our research and documentation, use our code, and join the community! - button: - href: whats-new/releases/#version-1-0-0 - text: Read more about this release + callout: U.S. Web Design Standards + content: The Standards are a design system that allows federal agencies to quickly prototype and deploy digital products using a baseline of design patterns. graphic-list: list-item: title: Getting Started description: Learn how to get started using the U.S. Web Design Standards for your project, regardless of your technical stack. image: + src: + alt: list-item: title: What's New description: Keep up to date with the current news and product development updates for the U.S. Web Design Standards. image: + src: + alt: list-item: title: UI Components description: Discover all the different components that the Standards provide as both design and development assets. image: + src: + alt: list-item: title: Page Templates description: Explore the different page templates that have been created to jump start your product development. image: + src: + alt: --- ## New training and services From f15d71ccbddf5f31479ca713bfd78bf32ef206eb Mon Sep 17 00:00:00 2001 From: John Donmoyer Date: Thu, 20 Apr 2017 14:02:17 -0500 Subject: [PATCH 03/65] fixing homepage loop --- _layouts/landing.html | 10 +++++----- pages/home.md | 15 ++++++--------- 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/_layouts/landing.html b/_layouts/landing.html index 6a3107cedb..14726416e9 100644 --- a/_layouts/landing.html +++ b/_layouts/landing.html @@ -23,15 +23,15 @@

{{ page.hero.callout }}

{% endif %} - {% if page.graphic-list %} + {% if page.graphic_list %}
- {% for list-item in page.graphic-list %} + {% for list_item in page.graphic_list.list_item %} {% cycle '
', '' %}
- + {{ list_item.image.alt }}
- {% if page.graphic-list.list-item.title %}

{{ page.graphic-list.list-item.title }}

{% endif %} - {{ page.graphic-list.list-item.description | markdownify }} + {% if list_item.topic %}

{{ list_item.topic }}

{% endif %} + {{ list_item.description | markdownify }}
{% cycle '', '
' %} diff --git a/pages/home.md b/pages/home.md index 09fc6fff98..69178f56b5 100644 --- a/pages/home.md +++ b/pages/home.md @@ -5,27 +5,24 @@ title: Announcing version 1.0 hero: callout: U.S. Web Design Standards content: The Standards are a design system that allows federal agencies to quickly prototype and deploy digital products using a baseline of design patterns. -graphic-list: - list-item: - title: Getting Started +graphic_list: + list_item: + - topic: Getting Started description: Learn how to get started using the U.S. Web Design Standards for your project, regardless of your technical stack. image: src: alt: - list-item: - title: What's New + - topic: What's New description: Keep up to date with the current news and product development updates for the U.S. Web Design Standards. image: src: alt: - list-item: - title: UI Components + - topic: UI Components description: Discover all the different components that the Standards provide as both design and development assets. image: src: alt: - list-item: - title: Page Templates + - topic: Page Templates description: Explore the different page templates that have been created to jump start your product development. image: src: From 2bdd8f8c5c2b8d4467dc8580c509d1ceefa5275a Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Mon, 26 Jun 2017 11:23:06 -0400 Subject: [PATCH 04/65] Add basic site crawler to find 404s, etc. --- crawl.js | 44 ++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 ++ 2 files changed, 46 insertions(+) create mode 100644 crawl.js diff --git a/crawl.js b/crawl.js new file mode 100644 index 0000000000..f45914f465 --- /dev/null +++ b/crawl.js @@ -0,0 +1,44 @@ +const express = require('express'); +const Crawler = require("simplecrawler"); + +const app = express(); + +app.use(express.static(`${__dirname}/_site`)); + +const listener = app.listen(() => { + const port = listener.address().port; + const crawler = new Crawler(`http://127.0.0.1:${port}/`); + const referrers = {}; + let errors = 0; + + crawler.maxDepth = 2; + crawler.interval = 1; + crawler.on("discoverycomplete", (item, resources) => { + resources.forEach(url => { + if (!(url in referrers)) { + referrers[url] = []; + } + referrers[url].push(item.path); + }); + }); + crawler.on("fetch404", (item, res) => { + const refs = referrers[item.url]; + console.log(`404 for ${item.path}!`); + console.log(` ${refs.length} referrer(s) including at least:`, + refs.slice(0, 5)); + errors++; + }); + crawler.on("complete", () => { + listener.close(() => { + const success = errors === 0; + console.log(`${errors} error(s) found.`); + if (success) { + console.log(`Hooray!`); + } else { + console.log(`Alas.`); + } + process.exit(success ? 0 : 1); + }); + }); + crawler.start(); +}); diff --git a/package.json b/package.json index 8fa3feea99..c900348698 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "dependencies": { "browserify": "^13.0.0", "del": "^2.2.0", + "express": "^4.15.3", "gulp": "^3.9.0", "gulp-clean": "^0.3.1", "gulp-concat": "^2.6.0", @@ -81,6 +82,7 @@ "nswatch": "^0.2.0", "politespace": "^0.1.4", "run-sequence": "^1.1.5", + "simplecrawler": "^1.1.3", "uswds": "1.2.1", "vinyl-buffer": "^1.0.0", "vinyl-source-stream": "^1.1.0" From c72f95b82e8b38f98b022ea59ac2660852b254e9 Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Mon, 26 Jun 2017 12:17:27 -0400 Subject: [PATCH 05/65] Increase maxDepth to 3. --- crawl.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crawl.js b/crawl.js index f45914f465..6a5807a8e8 100644 --- a/crawl.js +++ b/crawl.js @@ -11,7 +11,7 @@ const listener = app.listen(() => { const referrers = {}; let errors = 0; - crawler.maxDepth = 2; + crawler.maxDepth = 3; crawler.interval = 1; crawler.on("discoverycomplete", (item, resources) => { resources.forEach(url => { From 7e95c2bdcc47d17bb6a1a477cdeb769801af5792 Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Mon, 26 Jun 2017 12:33:23 -0400 Subject: [PATCH 06/65] Ignore HREFs with '"' in them. --- crawl.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/crawl.js b/crawl.js index 6a5807a8e8..f1d2741343 100644 --- a/crawl.js +++ b/crawl.js @@ -11,6 +11,13 @@ const listener = app.listen(() => { const referrers = {}; let errors = 0; + crawler.addFetchCondition((item, referrerItem, cb) => { + // If a URL's path contains a literal `"` in it, then it's + // almost guaranteed to be a false-positive that's actually + // in an example snippet of HTML in the docs, so ignore it. + cb(null, !item.path.match(/"/)); + }); + crawler.maxDepth = 3; crawler.interval = 1; crawler.on("discoverycomplete", (item, resources) => { From 9018c84c3688701f695fac2ed0bdc0bd9c086ada Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Mon, 26 Jun 2017 16:23:52 -0400 Subject: [PATCH 07/65] Squelch false positives. --- _components/buttons.md | 2 +- crawl.js | 18 ++++++++++++++---- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/_components/buttons.md b/_components/buttons.md index da507b1f74..e999b917e7 100644 --- a/_components/buttons.md +++ b/_components/buttons.md @@ -30,7 +30,7 @@ lead: Use buttons to signal actions.
  • usa-button-big

    • For example, a secondary button style would use the following code: - <a class="usa-button usa-button-secondary" href="/my-link">My button</a>

    + <a class="usa-button usa-button-secondary" href="/my-link">My button</a>

    Accessibility

    {% endif %} +
    +
    +
    {{ content }} diff --git a/css/styleguide.scss b/css/styleguide.scss index fd3085011c..1e9e307c52 100644 --- a/css/styleguide.scss +++ b/css/styleguide.scss @@ -43,8 +43,8 @@ body { } // Override for 4x1 media grid when it collapses to 2x2 -@media screen and (min-width: 600px) { - .usa-graphic_list .usa-graphic_list-row:last-child .usa-media_block { +@media screen and (max-width: 1200px) and (min-width: 600px) { + .usa-graphic_list .usa-graphic_list-row .usa-media_block:nth-child(-n+2) { margin-bottom: 6rem; } } @@ -72,6 +72,31 @@ body { font-weight: $font-light; } +// Fancy Horizontal Rule // + +.homepage-rule { + border: 0; + height: 1px; + width: 100%; + position: relative; + + &.center-diamond { + background: $color-primary; + text-align: center; + + &:before { + content: "◆"; + display: inline-block; + position: relative; + top: -0.7em; + font-size: 1.5em; + padding: 0 0.25em; + color: $color-secondary; + background: $color-white; + } + } +} + // Header -------------- // .sticky { position: -webkit-sticky; From 2bfea4d3dde118e8e2be6288b7433d0ef3d25407 Mon Sep 17 00:00:00 2001 From: John Donmoyer Date: Thu, 29 Jun 2017 17:07:04 -0500 Subject: [PATCH 25/65] width fix, cleanup --- css/styleguide.scss | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/css/styleguide.scss b/css/styleguide.scss index 1e9e307c52..37853481c5 100644 --- a/css/styleguide.scss +++ b/css/styleguide.scss @@ -10,6 +10,8 @@ body { height: auto; } +// USWDS Overrides + .usa-footer-secondary_section { background-color: $color-primary-alt-lightest; } @@ -30,7 +32,7 @@ body { .usa-hero-callout { border-radius: 0.3rem; - min-width: 46rem; + max-width: 46rem; padding: 3.6rem 3rem; & > *:first-child { @@ -42,13 +44,6 @@ body { font-size: 2.7rem; } -// Override for 4x1 media grid when it collapses to 2x2 -@media screen and (max-width: 1200px) and (min-width: 600px) { - .usa-graphic_list .usa-graphic_list-row .usa-media_block:nth-child(-n+2) { - margin-bottom: 6rem; - } -} - .usa-media_block-body { & > *:first-child { font-size: $media-block-header-font-size; @@ -72,6 +67,13 @@ body { font-weight: $font-light; } +// Override for 4x1 media grid when it collapses to 2x2 +@media screen and (max-width: 1200px) and (min-width: 600px) { + .usa-graphic_list .usa-graphic_list-row .usa-media_block:nth-child(-n+2) { + margin-bottom: 6rem; + } +} + // Fancy Horizontal Rule // .homepage-rule { From f73541daed79f67bbcd27c65a8f8c0911bddd5cd Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Fri, 30 Jun 2017 07:30:57 -0400 Subject: [PATCH 26/65] List jekyll theme. Fixes 18F/web-design-standards#2001. --- _data/implementations.yml | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/_data/implementations.yml b/_data/implementations.yml index afc7db548d..3861f203e0 100644 --- a/_data/implementations.yml +++ b/_data/implementations.yml @@ -14,6 +14,14 @@ version: 1.x notes: "This base theme focuses on tweaking Drupal's markup so that it will work with the USWDS library. Some CSS is added to deal with unavoidable Drupal quirks, but only as a last resort." +- name: Jekyll + url: https://github.com/18f/uswds-jekyll + author: + name: 18F + url: https://github.com/18F + version: 1.1.1 + notes: "A [Jekyll](https://jekyllrb.com/) theme for the Standards." + - name: npm and node-sass url: https://github.com/openbrian/18f-contrib-web-design-standards author: From ee9698abed4725bfa03e9a65a554905ead8f2715 Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Fri, 30 Jun 2017 12:11:26 -0400 Subject: [PATCH 27/65] Remove alt text for decorative images --- _includes/footer.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_includes/footer.html b/_includes/footer.html index a59b4baad2..5d85daefc9 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -44,17 +44,17 @@

    Become a part of the community

    Find an issue or have a feature request?
    - GitHub logo + Ask questions on GitHub
    Need help troubleshooting?
    - Slack logo + Join our Slack Channel
    Want to hire or contact us?
    - Email logo + Send us an email
    From 7ef0a89ed6b3536fc4c34ae47ee74b98572387a0 Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Fri, 30 Jun 2017 12:16:39 -0400 Subject: [PATCH 28/65] Set aria-label of site logo to "USWDS home" --- _includes/navbar.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/navbar.html b/_includes/navbar.html index 902ff40326..a7aa6c7f48 100644 --- a/_includes/navbar.html +++ b/_includes/navbar.html @@ -5,7 +5,7 @@ diff --git a/_includes/code/components/header-basic-mega.html b/_includes/code/components/header-basic-mega.html index df32caeeec..75184a4414 100644 --- a/_includes/code/components/header-basic-mega.html +++ b/_includes/code/components/header-basic-mega.html @@ -39,7 +39,7 @@ diff --git a/_includes/code/components/header-basic.html b/_includes/code/components/header-basic.html index f81a41eed4..f13bd18cd1 100644 --- a/_includes/code/components/header-basic.html +++ b/_includes/code/components/header-basic.html @@ -39,7 +39,7 @@ diff --git a/_includes/code/components/header-extended-mega.html b/_includes/code/components/header-extended-mega.html index 8c23e1d3c5..1667ab98a0 100644 --- a/_includes/code/components/header-extended-mega.html +++ b/_includes/code/components/header-extended-mega.html @@ -38,7 +38,7 @@ diff --git a/_includes/code/components/header-extended.html b/_includes/code/components/header-extended.html index 4fd629f43a..f74653efd8 100644 --- a/_includes/code/components/header-extended.html +++ b/_includes/code/components/header-extended.html @@ -38,7 +38,7 @@ diff --git a/_includes/code/components/template-docs.html b/_includes/code/components/template-docs.html index 2dfc891412..655bbe192f 100644 --- a/_includes/code/components/template-docs.html +++ b/_includes/code/components/template-docs.html @@ -49,7 +49,7 @@ diff --git a/_includes/code/components/template-landing.html b/_includes/code/components/template-landing.html index fda5664a76..71d7ace9f4 100644 --- a/_includes/code/components/template-landing.html +++ b/_includes/code/components/template-landing.html @@ -48,7 +48,7 @@ From 6d736a13a0fed0fd564810ac49e7361578602ee1 Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Tue, 11 Jul 2017 08:24:45 -0400 Subject: [PATCH 39/65] Add 'npm run axe' command. --- config/run-axe.js | 79 +++++++++++++++++++++++++++++++++++++++++ config/static-server.js | 22 ++++++++++++ package.json | 6 +++- 3 files changed, 106 insertions(+), 1 deletion(-) create mode 100644 config/run-axe.js create mode 100644 config/static-server.js diff --git a/config/run-axe.js b/config/run-axe.js new file mode 100644 index 0000000000..cb8ef0b7dd --- /dev/null +++ b/config/run-axe.js @@ -0,0 +1,79 @@ +const fs = require('fs'); +const chromeLauncher = require('chrome-launcher'); +const CDP = require('chrome-remote-interface'); +const runServer = require('./static-server'); + +const AXE_JS = fs.readFileSync(__dirname + '/../node_modules/axe-core/axe.js'); + +function launchChrome(headless=true) { + return chromeLauncher.launch({ + chromeFlags: [ + '--window-size=412,732', + '--disable-gpu', + headless ? '--headless' : '' + ] + }); +} + +// This function is only here so it can be easily .toString()'d +// and run in the context of a web page by Chrome. It will not +// be run in the node context. +function runAxe() { + return new Promise((resolve, reject) => { + window.axe.run((err, results) => { + if (err) return reject(err); + resolve(JSON.stringify(results.violations)); + }); + }); +} + +Promise.all([runServer(), launchChrome()]).then(([server, chrome]) => { + const port = server.address().port; + console.log(`Chrome is debuggable on ${chrome.port}.`); + CDP({ + port: chrome.port, + }, client => { + console.log('Created CDP.'); + + const {Page, Runtime} = client; + + Promise.all([ + Page.enable() + ]).then(() => { + Page.loadEventFired(() => { + // TODO: Ensure we're not just on a "network error" type page. + console.log('Page loaded, running aXe.'); + Runtime.evaluate({ + expression: AXE_JS + ';(' + runAxe.toString() + ')()', + awaitPromise: true, + }).then(details => { + let exitCode = 0; + if (details.result.type === 'string') { + const violations = JSON.parse(details.result.value); + if (violations.length === 0) { + console.log('No aXe violations found. Hooray!'); + } else { + console.log(`Found ${violations.length} aXe violations. Alas.`); + console.log(violations); + exitCode = 1; + } + } else { + console.log('Unexpected result from CDP!'); + console.log(details.result); + exitCode = 1; + } + client.close().then(() => { + chrome.kill(); + server.close(); + console.log(`Terminating with exit code ${exitCode}.`); + process.exit(exitCode); + }); + }); + }); + + const url = `http://localhost:${port}`; + console.log(`Navigating to ${url}.`); + Page.navigate({url: url}); + }); + }); +}); diff --git a/config/static-server.js b/config/static-server.js new file mode 100644 index 0000000000..d1ea1d0f17 --- /dev/null +++ b/config/static-server.js @@ -0,0 +1,22 @@ +const fs = require('fs'); +const path = require('path'); +const express = require('express'); + +const app = express(); + +const SITE_PATH = path.normalize(`${__dirname}/../_site`); + +if (fs.existsSync(SITE_PATH)) { + app.use(express.static(SITE_PATH)); +} else { + console.log(`Please build the site before running me.`); + process.exit(1); +} + +module.exports = () => { + return new Promise((resolve, reject) => { + const server = app.listen(() => { + resolve(server); + }); + }); +}; diff --git a/package.json b/package.json index 67fca913eb..0f35b83bd2 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,8 @@ "postinstall": "bundle", "prestart": "gulp build", "start": "bundle exec jekyll serve --drafts --future", - "test": "npm run lint && npm run crawl && bundle exec rspec", + "test": "npm run axe && npm run lint && npm run crawl && bundle exec rspec", + "axe": "node config/run-axe.js", "crawl": "node config/crawl.js", "watch": "nswatch" }, @@ -64,8 +65,11 @@ }, "homepage": "https://github.com/18F/web-design-standards-docs#readme", "dependencies": { + "axe-core": "^2.3.1", "browserify": "^13.0.0", "chalk": "^1.1.3", + "chrome-launcher": "^0.3.1", + "chrome-remote-interface": "^0.24.1", "del": "^2.2.0", "express": "^4.15.3", "gulp": "^3.9.0", From c1e786b9321f848b3e3a887c6cc38e39c81978f1 Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Tue, 11 Jul 2017 08:25:36 -0400 Subject: [PATCH 40/65] Install Chrome on circle, hopefully. --- circle.yml | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/circle.yml b/circle.yml index 1fc8896404..d9fc191db7 100644 --- a/circle.yml +++ b/circle.yml @@ -5,6 +5,11 @@ machine: dependencies: pre: - bundle install + # https://discuss.circleci.com/t/using-the-latest-version-of-chrome-on-circleci/871/4 + - curl -L -o google-chrome.deb https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb + - sudo dpkg -i google-chrome.deb + - sudo sed -i 's|HERE/chrome\"|HERE/chrome\" --disable-setuid-sandbox|g' /opt/google/chrome/google-chrome + - rm google-chrome.deb test: pre: From 3feb2113b53b6e037d65f8b3f8e74bcd2b1e62b7 Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Tue, 11 Jul 2017 09:00:41 -0400 Subject: [PATCH 41/65] Update Gemfile.lock. --- Gemfile.lock | 3 --- 1 file changed, 3 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index d6b9a671ae..369b1a74db 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -7,8 +7,6 @@ GEM diff-lcs (1.3) ffi (1.9.18) forwardable-extended (2.6.0) - hash-joiner (0.0.7) - safe_yaml jekyll (3.4.3) addressable (~> 2.4) colorator (~> 1.0) @@ -61,7 +59,6 @@ PLATFORMS ruby DEPENDENCIES - hash-joiner jekyll jekyll-compose jekyll-redirect-from From b7688db03b8bc53c6fdc8027950dd50376705509 Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Tue, 11 Jul 2017 10:30:28 -0400 Subject: [PATCH 42/65] Add support for REMOTE_CHROME_URL. --- config/run-axe.js | 53 ++++++++++++++++++++++++++++++----------- config/static-server.js | 10 +++++++- 2 files changed, 48 insertions(+), 15 deletions(-) diff --git a/config/run-axe.js b/config/run-axe.js index cb8ef0b7dd..cb6fde32d2 100644 --- a/config/run-axe.js +++ b/config/run-axe.js @@ -1,11 +1,13 @@ const fs = require('fs'); +const urlParse = require('url').parse; const chromeLauncher = require('chrome-launcher'); const CDP = require('chrome-remote-interface'); const runServer = require('./static-server'); +const REMOTE_CHROME_URL = process.env['REMOTE_CHROME_URL']; const AXE_JS = fs.readFileSync(__dirname + '/../node_modules/axe-core/axe.js'); -function launchChrome(headless=true) { +function launchChromeLocally(headless=true) { return chromeLauncher.launch({ chromeFlags: [ '--window-size=412,732', @@ -15,6 +17,19 @@ function launchChrome(headless=true) { }); } +function getRemoteChrome() { + const info = urlParse(REMOTE_CHROME_URL); + if (info.protocol !== 'http:') + throw new Error(`Unsupported protocol: ${info.protocol}`); + return new Promise(resolve => { + resolve({ + host: info.hostname, + port: info.port, + kill() { return Promise.resolve(); } + }); + }); +} + // This function is only here so it can be easily .toString()'d // and run in the context of a web page by Chrome. It will not // be run in the node context. @@ -27,19 +42,21 @@ function runAxe() { }); } -Promise.all([runServer(), launchChrome()]).then(([server, chrome]) => { - const port = server.address().port; - console.log(`Chrome is debuggable on ${chrome.port}.`); +let getChrome = REMOTE_CHROME_URL ? getRemoteChrome : launchChromeLocally; + +Promise.all([runServer(), getChrome()]).then(([server, chrome]) => { + const chromeHost = chrome.host || 'localhost'; + console.log(`Chrome is debuggable on http://${chromeHost}:${chrome.port}.`); + CDP({ + host: chrome.host, port: chrome.port, }, client => { console.log('Created CDP.'); const {Page, Runtime} = client; - Promise.all([ - Page.enable() - ]).then(() => { + Page.enable().then(() => { Page.loadEventFired(() => { // TODO: Ensure we're not just on a "network error" type page. console.log('Page loaded, running aXe.'); @@ -63,17 +80,25 @@ Promise.all([runServer(), launchChrome()]).then(([server, chrome]) => { exitCode = 1; } client.close().then(() => { - chrome.kill(); - server.close(); - console.log(`Terminating with exit code ${exitCode}.`); - process.exit(exitCode); + chrome.kill().then(() => { + // Note that we're not killing the server; this is because + // the remote chrome instance (if we're using one) may be + // keeping some network connections to the server alive, which + // makes it harder to kill, so it's easier to just terminate. + console.log(`Terminating with exit code ${exitCode}.`); + process.exit(exitCode); + }); }); }); }); - const url = `http://localhost:${port}`; - console.log(`Navigating to ${url}.`); - Page.navigate({url: url}); + console.log(`Navigating to ${server.url}.`); + Page.navigate({url: server.url}); }); }); }); + +process.on('unhandledRejection', (reason, p) => { + console.log('Unhandled Rejection at:', p, 'reason:', reason); + process.exit(1); +}); diff --git a/config/static-server.js b/config/static-server.js index d1ea1d0f17..462890cc44 100644 --- a/config/static-server.js +++ b/config/static-server.js @@ -1,4 +1,5 @@ const fs = require('fs'); +const os = require('os'); const path = require('path'); const express = require('express'); @@ -16,7 +17,14 @@ if (fs.existsSync(SITE_PATH)) { module.exports = () => { return new Promise((resolve, reject) => { const server = app.listen(() => { - resolve(server); + const hostname = os.hostname(); + const port = server.address().port; + resolve({ + hostname, + port, + url: `http://${hostname}:${port}`, + httpServer: server, + }); }); }); }; From 5e001b2c7f790c1b665244c0dd3734ddebe08eda Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Tue, 11 Jul 2017 10:37:15 -0400 Subject: [PATCH 43/65] Update README.md to include info on Chrome. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 13ee3ea6f9..1c7f71e746 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ You will need to have the following installed on your machine before following t 1. Ruby v2.2.2+, [Installation guides](https://www.ruby-lang.org/en/documentation/installation/) 1. Node v4.2.3+, [Installation guides](https://nodejs.org/en/download/) 1. Bundler v1.12.3+, [Installation guides](http://bundler.io/v1.13/guides/using_bundler_in_application.html#getting-started---installing-bundler-and-bundle-init) - +1. Chrome v59 or higher (v60 if on Windows) ### Building the documentation with gulp @@ -43,7 +43,7 @@ Here are a few other utility commands you may find useful: - `npm run lint`: Runs `eslint` and `sass-lint` against JavaScript and Sass files. -- `npm test`: Runs `npm run lint` and can also be used to run any tests. +- `npm test`: Runs all tests and linters. - `npm run watch`: Runs a series of commands that watches for any changes in both the Standards node module and the root level asset folders in this repo. From 4731a04a4096663d6fc47d6de95cd91da24f05ae Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Tue, 11 Jul 2017 10:54:28 -0400 Subject: [PATCH 44/65] Raise errors on network failure, HTTP errors. --- config/run-axe.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/config/run-axe.js b/config/run-axe.js index cb6fde32d2..f4d42c9e78 100644 --- a/config/run-axe.js +++ b/config/run-axe.js @@ -54,9 +54,22 @@ Promise.all([runServer(), getChrome()]).then(([server, chrome]) => { }, client => { console.log('Created CDP.'); - const {Page, Runtime} = client; + const {Page, Network, Runtime} = client; - Page.enable().then(() => { + Promise.all([ + Page.enable(), + Network.enable(), + ]).then(() => { + Network.responseReceived(({response}) => { + if (response.status < 400) return; + console.log(`${response.url} returned HTTP ${response.status}!`); + process.exit(1); + }); + Network.loadingFailed(details => { + console.log("A network request failed to load."); + console.log(details); + process.exit(1); + }); Page.loadEventFired(() => { // TODO: Ensure we're not just on a "network error" type page. console.log('Page loaded, running aXe.'); From dc2a86716cee2ecb207156e3743b05a79c2a094d Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Tue, 11 Jul 2017 10:57:10 -0400 Subject: [PATCH 45/65] Remove stale TODO. --- config/run-axe.js | 1 - 1 file changed, 1 deletion(-) diff --git a/config/run-axe.js b/config/run-axe.js index f4d42c9e78..f21b98f293 100644 --- a/config/run-axe.js +++ b/config/run-axe.js @@ -71,7 +71,6 @@ Promise.all([runServer(), getChrome()]).then(([server, chrome]) => { process.exit(1); }); Page.loadEventFired(() => { - // TODO: Ensure we're not just on a "network error" type page. console.log('Page loaded, running aXe.'); Runtime.evaluate({ expression: AXE_JS + ';(' + runAxe.toString() + ')()', From 36070bebedfb54c40dacbd6be8782c1b9d092060 Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Tue, 11 Jul 2017 11:12:41 -0400 Subject: [PATCH 46/65] Don't allow Chrome instances to go unkilled. --- config/run-axe.js | 37 ++++++++++++++++++++----------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/config/run-axe.js b/config/run-axe.js index f21b98f293..95762e3a34 100644 --- a/config/run-axe.js +++ b/config/run-axe.js @@ -55,6 +55,23 @@ Promise.all([runServer(), getChrome()]).then(([server, chrome]) => { console.log('Created CDP.'); const {Page, Network, Runtime} = client; + const terminate = exitCode => { + client.close().then(() => { + chrome.kill().then(() => { + // Note that we're not killing the server; this is because + // the remote chrome instance (if we're using one) may be + // keeping some network connections to the server alive, which + // makes it harder to kill, so it's easier to just terminate. + console.log(`Terminating with exit code ${exitCode}.`); + process.exit(exitCode); + }); + }); + }; + + process.on('unhandledRejection', (reason, p) => { + console.log('Unhandled Rejection at:', p, 'reason:', reason); + terminate(1); + }); Promise.all([ Page.enable(), @@ -63,12 +80,12 @@ Promise.all([runServer(), getChrome()]).then(([server, chrome]) => { Network.responseReceived(({response}) => { if (response.status < 400) return; console.log(`${response.url} returned HTTP ${response.status}!`); - process.exit(1); + terminate(1); }); Network.loadingFailed(details => { console.log("A network request failed to load."); console.log(details); - process.exit(1); + terminate(1); }); Page.loadEventFired(() => { console.log('Page loaded, running aXe.'); @@ -91,16 +108,7 @@ Promise.all([runServer(), getChrome()]).then(([server, chrome]) => { console.log(details.result); exitCode = 1; } - client.close().then(() => { - chrome.kill().then(() => { - // Note that we're not killing the server; this is because - // the remote chrome instance (if we're using one) may be - // keeping some network connections to the server alive, which - // makes it harder to kill, so it's easier to just terminate. - console.log(`Terminating with exit code ${exitCode}.`); - process.exit(exitCode); - }); - }); + terminate(exitCode); }); }); @@ -109,8 +117,3 @@ Promise.all([runServer(), getChrome()]).then(([server, chrome]) => { }); }); }); - -process.on('unhandledRejection', (reason, p) => { - console.log('Unhandled Rejection at:', p, 'reason:', reason); - process.exit(1); -}); From dcd5070cf1a11cedae3f49371e3f325dc8039111 Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Tue, 11 Jul 2017 11:13:02 -0400 Subject: [PATCH 47/65] Use strict mode. --- config/run-axe.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/config/run-axe.js b/config/run-axe.js index 95762e3a34..1ab6c35471 100644 --- a/config/run-axe.js +++ b/config/run-axe.js @@ -1,3 +1,5 @@ +'use strict'; + const fs = require('fs'); const urlParse = require('url').parse; const chromeLauncher = require('chrome-launcher'); From 24c93cca55dc93a114f09e332284dd6fffa112de Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Tue, 11 Jul 2017 11:29:08 -0400 Subject: [PATCH 48/65] crawl.js now uses static-server.js. --- config/crawl.js | 19 +++++-------------- config/static-server.js | 2 +- 2 files changed, 6 insertions(+), 15 deletions(-) diff --git a/config/crawl.js b/config/crawl.js index 21c4763521..4cb0839093 100644 --- a/config/crawl.js +++ b/config/crawl.js @@ -4,7 +4,7 @@ const express = require('express'); const Crawler = require("simplecrawler"); const chalk = require('chalk'); -const app = express(); +const runServer = require('./static-server'); // These pages incorporate content from other files in other repos, so // they should be considered "second class" by the link checker, and @@ -33,17 +33,8 @@ function shouldFetch(item, referrerItem) { return true; } -if (fs.existsSync(SITE_PATH)) { - app.use(express.static(SITE_PATH)); -} else { - console.log(`Please build the site before running me.`); - process.exit(1); -} - -const listener = app.listen(() => { - const port = listener.address().port; - const baseURL = `http://127.0.0.1:${port}`; - const crawler = new Crawler(`${baseURL}/`); +runServer().then(server => { + const crawler = new Crawler(`${server.url}/`); const referrers = {}; const notFound = []; @@ -65,7 +56,7 @@ const listener = app.listen(() => { notFound.push(item); }); crawler.on("complete", () => { - listener.close(() => { + server.httpServer.close(() => { let errors = 0; let warnings = 0; @@ -85,7 +76,7 @@ const listener = app.listen(() => { }); WARNING_PAGES.forEach(path => { - if (!(`${baseURL}${path}` in referrers)) { + if (!(`${server.url}${path}` in referrers)) { console.log(`${ERROR}: ${path} was not visited!`); console.log(` If this is not an error, please remove the path ` + `from WARNING_PAGES.`); diff --git a/config/static-server.js b/config/static-server.js index 462890cc44..f8d9ea4485 100644 --- a/config/static-server.js +++ b/config/static-server.js @@ -17,7 +17,7 @@ if (fs.existsSync(SITE_PATH)) { module.exports = () => { return new Promise((resolve, reject) => { const server = app.listen(() => { - const hostname = os.hostname(); + const hostname = os.hostname().toLowerCase(); const port = server.address().port; resolve({ hostname, From 2acce31df79c6f7604c99bff6240ff4db101134f Mon Sep 17 00:00:00 2001 From: John Donmoyer Date: Tue, 11 Jul 2017 11:03:10 -0500 Subject: [PATCH 49/65] adding vets.gov content --- _posts/2017-07-10-vets-case-study.md | 45 ++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 _posts/2017-07-10-vets-case-study.md diff --git a/_posts/2017-07-10-vets-case-study.md b/_posts/2017-07-10-vets-case-study.md new file mode 100644 index 0000000000..a6a3713a88 --- /dev/null +++ b/_posts/2017-07-10-vets-case-study.md @@ -0,0 +1,45 @@ +--- +title: How the Vets.gov team uses the U.S. Web Design Standards +tags: +- web design standards +- design +- case study +- design +--- +The U.S. Web Design Standards are currently being used on hundreds of government sites, with an audience of more than 59 million monthly users. In this fifth post in our series, we met with the team at [Vets.gov](https://vets.gov) to talk about their use of the Standards. + +**Standards team**: How did you hear about the U.S. Web Design Standards? + +**Vets.gov team**: We had heard about the Standards through the U.S. Digital Service and the first iteration of Vets.gov launched, using the Standards, in 2015. + +**Standards team**: Why did you decide to use the Standards? + +**Vets.gov team**: From a user experience perspective, the idea of common standards was very appealing. We had talked to the 18F team and knew we could rely on the extensive user research already done. It was really exciting that the development of the Standards was rigorous and we could build off that. + +The Standards gave us the opportunity to move faster without having to worry about the foundational stuff, as that was already taken care of. + +**Standards team**: How did you integrate your work with the Standards? + +**Vets.gov team**: From a design perspective, we really built with them in mind, since the site launched with the Standards. From a more technical perspective, we tried, as much as possible, to incorporate the different components--from the buttons, forms, alerts to labels. The only thing we weren’t using from the beginning was the grid. + +For the forms, technically it’s nice that the components are pretty straightforward and don’t require us to include a lot, except for the basic styles. We can take the HTML and CSS on the site and plug those in where we need to. We use a library built with Bootstrap to construct our forms, and it wasn’t difficult to plug the Standards into it. + +**Standards team**: What were the benefits you gained by using the Standards? + +**Vets.gov team**: It’s nice to have a site where you can go and get a list of user-tested components, and be guaranteed that the documentation is always up to date. If we tried to replicate this ourselves, it would be a lot more work. + +The Standards allow you to concentrate on the things you need to do - and allow you to go deeper on that kind of work. When we’re designing new forms, we can design them as text outlines because people know how they are going to look and we can pretty quickly outline a form. Having an outline makes our lives easier. We don’t have to wait for mock-ups or changes that take awhile. + +The Standards have also been extensively tested with users to optimize for the best user experience, which makes our work easier in leveraging what they’ve discovered. One example of this is when we were building forms early on, we knew the Standards had an indicator for a ‘required field’, but we went with the asterisk as the indicator, which the agency was already using on its forms. But, when we did user testing, several testers were confused by the asterisk. So we moved back to the Standards’ indicator. It showed the benefit of the research the Standards team had done and that all the design decisions had been tested with users beforehand. We can feel confident that those decisions were the best decisions to make. + +**Standards team**: Is there anything the Standards team could do to help you in your efforts? + +**Vets.gov team**: No, we’ve found the team to be really responsive when we’ve added a PR (pull request) or issue in GitHub, which has been really helpful. So, it’s just on us to put the PR, or changes, in when we find things that need changing. + +**Standards team**: Advice for other agencies? + +**Vets.gov team**: It’s only been a benefit for our team to use the Standards. We can rely on the user research they did. Every user test we do, we get positive feedback on how easy it is to use the forms and interact with the site. Overall, the consistency of user experience across government websites makes for a better government experience. + +--- + +We’re looking to learn more [from agencies that have used the Standards](/getting-started/showcase/); if you’re interested in talking to us about your experience or have any feedback, feel free to send us an email at [uswebdesignstandards@gsa.gov](mailto:uswebdesignstandards@gsa.gov). You can also chat with the team in the new [public Slack channel for the Standards](https://chat.18f.gov/)! From c863e0d48b26ce5ad7e9b5c4954df1f1c1733b0f Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Tue, 11 Jul 2017 16:53:57 -0400 Subject: [PATCH 50/65] Run aXe on multiple pages. --- config/run-axe.js | 46 ++++++++++++++++++++++++++++++++++------------ 1 file changed, 34 insertions(+), 12 deletions(-) diff --git a/config/run-axe.js b/config/run-axe.js index 1ab6c35471..59ce6af016 100644 --- a/config/run-axe.js +++ b/config/run-axe.js @@ -8,6 +8,11 @@ const runServer = require('./static-server'); const REMOTE_CHROME_URL = process.env['REMOTE_CHROME_URL']; const AXE_JS = fs.readFileSync(__dirname + '/../node_modules/axe-core/axe.js'); +const PAGES = [ + '/', + '/page-templates/landing/', + '/page-templates/docs/', +]; function launchChromeLocally(headless=true) { return chromeLauncher.launch({ @@ -48,15 +53,26 @@ let getChrome = REMOTE_CHROME_URL ? getRemoteChrome : launchChromeLocally; Promise.all([runServer(), getChrome()]).then(([server, chrome]) => { const chromeHost = chrome.host || 'localhost'; + console.log(`Static file server is listening at ${server.url}.`); console.log(`Chrome is debuggable on http://${chromeHost}:${chrome.port}.`); CDP({ host: chrome.host, port: chrome.port, }, client => { - console.log('Created CDP.'); - const {Page, Network, Runtime} = client; + const pagesLeft = PAGES.slice(); + const loadNextPage = () => { + if (pagesLeft.length === 0) { + console.log(`Finished visiting ${PAGES.length} pages with no errors.`); + terminate(0); + } else { + const page = pagesLeft.pop(); + const url = `${server.url}${page}`; + console.log(`Navigating to ${page}.`); + Page.navigate({url}); + } + }; const terminate = exitCode => { client.close().then(() => { chrome.kill().then(() => { @@ -90,32 +106,38 @@ Promise.all([runServer(), getChrome()]).then(([server, chrome]) => { terminate(1); }); Page.loadEventFired(() => { - console.log('Page loaded, running aXe.'); Runtime.evaluate({ expression: AXE_JS + ';(' + runAxe.toString() + ')()', awaitPromise: true, }).then(details => { - let exitCode = 0; + let errorFound = false; if (details.result.type === 'string') { const violations = JSON.parse(details.result.value); - if (violations.length === 0) { - console.log('No aXe violations found. Hooray!'); - } else { + if (violations.length > 0) { console.log(`Found ${violations.length} aXe violations. Alas.`); console.log(violations); - exitCode = 1; + errorFound = true; } } else { console.log('Unexpected result from CDP!'); console.log(details.result); - exitCode = 1; + errorFound = true; + } + // Note that this means we're terminating on the first error we + // find, rather than reporting the error and moving on to the + // next page. We're doing this because it's possible that the + // error is caused by a layout or include, which may result + // in the same errors being reported across multiple pages, so + // we'd rather avoid the potential spam and just exit early. + if (errorFound) { + terminate(1); + } else { + loadNextPage(); } - terminate(exitCode); }); }); - console.log(`Navigating to ${server.url}.`); - Page.navigate({url: server.url}); + loadNextPage(); }); }); }); From bafe664640ae2bb024c576f3b666bff4b4ed11de Mon Sep 17 00:00:00 2001 From: Marco Segreto Date: Tue, 11 Jul 2017 14:50:26 -0700 Subject: [PATCH 51/65] Remove old line about jQuery Because it's no longer valid, since jQuery is just a dev dependency for running the tests and is no long included in the standards JS code. --- pages/getting-started/developers.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/pages/getting-started/developers.md b/pages/getting-started/developers.md index 37197441d6..7400bb90bc 100644 --- a/pages/getting-started/developers.md +++ b/pages/getting-started/developers.md @@ -72,8 +72,6 @@ And that’s it — you should be set to use the Standards. ### Using npm -Note: Using npm to install the Standards will include jQuery version `2.2.0`. Please make sure that you’re not including any other version of jQuery on your page. - If you have `node` installed on your machine, you can use npm to install the Standards. Add `uswds` to your project’s `package.json` as a dependency: @@ -142,6 +140,7 @@ You can also email us directly at [uswebdesignstandards@gsa.gov](mailto:uswebdes **For more information, visit: [https://pages.18f.gov/frontend/css-coding-styleguide/](https://pages.18f.gov/frontend/css-coding-styleguide/)** +## JavaScript ## Customization and theming From a6fed4140008dd9cbba749fea08a764afb98f37a Mon Sep 17 00:00:00 2001 From: Marco Segreto Date: Tue, 11 Jul 2017 14:51:41 -0700 Subject: [PATCH 52/65] Mistakenly added an unused heading --- pages/getting-started/developers.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/pages/getting-started/developers.md b/pages/getting-started/developers.md index 7400bb90bc..52449c824b 100644 --- a/pages/getting-started/developers.md +++ b/pages/getting-started/developers.md @@ -140,8 +140,6 @@ You can also email us directly at [uswebdesignstandards@gsa.gov](mailto:uswebdes **For more information, visit: [https://pages.18f.gov/frontend/css-coding-styleguide/](https://pages.18f.gov/frontend/css-coding-styleguide/)** -## JavaScript - ## Customization and theming The Standards can be customized to use different typography, colors and grid systems. The easiest way to do this is to use Sass and override the Standards’ global variables. If it isn’t possible to use Sass, do theming by overriding the CSS rules in the Standards set. From 9b2197c46511069f3af9f4934c798a517fb07b4a Mon Sep 17 00:00:00 2001 From: Marco Segreto Date: Tue, 11 Jul 2017 14:59:28 -0700 Subject: [PATCH 53/65] Start on JS customization documentation --- pages/getting-started/developers.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/pages/getting-started/developers.md b/pages/getting-started/developers.md index 52449c824b..474a0fa363 100644 --- a/pages/getting-started/developers.md +++ b/pages/getting-started/developers.md @@ -140,6 +140,14 @@ You can also email us directly at [uswebdesignstandards@gsa.gov](mailto:uswebdes **For more information, visit: [https://pages.18f.gov/frontend/css-coding-styleguide/](https://pages.18f.gov/frontend/css-coding-styleguide/)** +## JS customization + +The JavaScript for the standards is separated into components in the same manner as the visual interface which is all initialized with event handlers when the DOM is ready. These components are accessible as CommonJS modules that can be required in other JavaScript files which then must be fuilt for the browser. The components are currently not accessible in the global browser scope, but can be easily extended to be included by requiring `components` and setting it to a global scope: + +```js +window.uswds = require('./components'); +``` + ## Customization and theming The Standards can be customized to use different typography, colors and grid systems. The easiest way to do this is to use Sass and override the Standards’ global variables. If it isn’t possible to use Sass, do theming by overriding the CSS rules in the Standards set. From c1117d05411f000d43aac30e8a68cdb103ce6efa Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Tue, 11 Jul 2017 17:59:32 -0400 Subject: [PATCH 54/65] Add colors. --- config/run-axe.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/config/run-axe.js b/config/run-axe.js index 59ce6af016..83b43d7bc6 100644 --- a/config/run-axe.js +++ b/config/run-axe.js @@ -4,6 +4,7 @@ const fs = require('fs'); const urlParse = require('url').parse; const chromeLauncher = require('chrome-launcher'); const CDP = require('chrome-remote-interface'); +const chalk = require('chalk'); const runServer = require('./static-server'); const REMOTE_CHROME_URL = process.env['REMOTE_CHROME_URL']; @@ -55,6 +56,7 @@ Promise.all([runServer(), getChrome()]).then(([server, chrome]) => { const chromeHost = chrome.host || 'localhost'; console.log(`Static file server is listening at ${server.url}.`); console.log(`Chrome is debuggable on http://${chromeHost}:${chrome.port}.`); + console.log(`Running aXe on:`); CDP({ host: chrome.host, @@ -69,7 +71,7 @@ Promise.all([runServer(), getChrome()]).then(([server, chrome]) => { } else { const page = pagesLeft.pop(); const url = `${server.url}${page}`; - console.log(`Navigating to ${page}.`); + process.stdout.write(` ${page} `); Page.navigate({url}); } }; @@ -80,7 +82,8 @@ Promise.all([runServer(), getChrome()]).then(([server, chrome]) => { // the remote chrome instance (if we're using one) may be // keeping some network connections to the server alive, which // makes it harder to kill, so it's easier to just terminate. - console.log(`Terminating with exit code ${exitCode}.`); + const color = exitCode === 0 ? chalk.green : chalk.red; + console.log(color(`Terminating with exit code ${exitCode}.`)); process.exit(exitCode); }); }); @@ -112,10 +115,16 @@ Promise.all([runServer(), getChrome()]).then(([server, chrome]) => { }).then(details => { let errorFound = false; if (details.result.type === 'string') { - const violations = JSON.parse(details.result.value); - if (violations.length > 0) { - console.log(`Found ${violations.length} aXe violations. Alas.`); - console.log(violations); + const viols = JSON.parse(details.result.value); + if (viols.length === 0) { + console.log(chalk.green('OK')); + } else { + console.log(chalk.red(`Found ${viols.length} aXe violations.`)); + console.log(viols); + console.log(chalk.cyan( + `\nTo debug these violations, install aXe at:\n\n` + + ` https://www.deque.com/products/axe/\n` + )); errorFound = true; } } else { From 1d8a55321446fd06bd39b992e69bdd3d9ec6a321 Mon Sep 17 00:00:00 2001 From: Marco Segreto Date: Tue, 11 Jul 2017 16:26:10 -0700 Subject: [PATCH 55/65] Add more on component architecture Attempted to add some basic information on the architecture that doesn't go into too much detail but would hopefully be helpful for somebody to extend from. --- pages/getting-started/developers.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/pages/getting-started/developers.md b/pages/getting-started/developers.md index 474a0fa363..716c299a39 100644 --- a/pages/getting-started/developers.md +++ b/pages/getting-started/developers.md @@ -148,6 +148,16 @@ The JavaScript for the standards is separated into components in the same manner window.uswds = require('./components'); ``` +Each component has a standardized interface that can be used to extend it further. The primary methods each component has are as follows: + +- `on`: Initialize a component's JavaScript behavior by passing the root element, such as `window.document`. +- `off`: The opposite of `on`, de-initializes a component, removing any JavaScript event handlers on the component. +- `hide`: Hide the whole component. +- `show`: Shows a whole, hidden component. +- `toggle`: Toggles the visibility of a component on and off based on the previous state. + +Some components have additional methods for manipulating specific aspects of them based on what they are and what they do. These can be found in the component's JS file. + ## Customization and theming The Standards can be customized to use different typography, colors and grid systems. The easiest way to do this is to use Sass and override the Standards’ global variables. If it isn’t possible to use Sass, do theming by overriding the CSS rules in the Standards set. From 0e719444455ecf4bb071a646309538251a125a9d Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Wed, 12 Jul 2017 08:11:54 -0400 Subject: [PATCH 56/65] Ensure _config.yml version matches package.json uswds version. --- spec/config_spec.rb | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 spec/config_spec.rb diff --git a/spec/config_spec.rb b/spec/config_spec.rb new file mode 100644 index 0000000000..8e711b23f8 --- /dev/null +++ b/spec/config_spec.rb @@ -0,0 +1,10 @@ +require 'yaml' +require 'json' + +RSpec.describe "Configuration" do + it '_config.yml version matches USWDS version in package.json' do + site = YAML.load(File.read('_config.yml')) + package = JSON.load(File.read('package.json')) + expect(site['version']).to eq(package['dependencies']['uswds']) + end +end From 4bb4c9ed42cf9ad4be8932a6b18fb934985076ce Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Wed, 12 Jul 2017 08:32:25 -0400 Subject: [PATCH 57/65] Always get uswds version from package.json at build time. --- _config.yml | 1 - _plugins/uswds_version.rb | 8 ++++++++ pages/getting-started/developers.md | 8 ++++---- pages/getting-started/download.html | 4 ++-- spec/config_spec.rb | 10 ---------- 5 files changed, 14 insertions(+), 17 deletions(-) create mode 100644 _plugins/uswds_version.rb delete mode 100644 spec/config_spec.rb diff --git a/_config.yml b/_config.yml index eba98637c3..71fb614416 100644 --- a/_config.yml +++ b/_config.yml @@ -1,6 +1,5 @@ # Site settings title: U.S. Web Design Standards -version: 1.1.0 google_analytics_ua: UA-48605964-43 # this is for pages that don't have a permalink (primarily posts) diff --git a/_plugins/uswds_version.rb b/_plugins/uswds_version.rb new file mode 100644 index 0000000000..d1ded71711 --- /dev/null +++ b/_plugins/uswds_version.rb @@ -0,0 +1,8 @@ +module USWDSVersion + class Generator < Jekyll::Generator + def generate(site) + package = JSON.load(File.read('package.json')) + site.data['uswds_version'] = package['dependencies']['uswds'] + end + end +end diff --git a/pages/getting-started/developers.md b/pages/getting-started/developers.md index 52449c824b..b3dd7d07f5 100644 --- a/pages/getting-started/developers.md +++ b/pages/getting-started/developers.md @@ -29,13 +29,13 @@ To use the Web Design Standards on your project, you’ll need to include the CS First, download the Web Design Standards assets: -Download code -Version {{ site.version }} +Download code +Version {{ site.data.uswds_version }} Then, add the following folders into a relevant place in your code base — likely a directory where you keep third-party libraries: ``` -uswds-{{ site.version }}/ +uswds-{{ site.data.uswds_version }}/ ├── js/ │   ├── uswds.min.js.map │   ├── uswds.min.js @@ -184,7 +184,7 @@ NOTE: If you plan on upgrading to newer versions of the Standards in the future, ## Where things live * **HTML** markup for the components is located in: `src/html` in the site root. -* **Sass** styles are located in: `src/stylesheets/ (/core, /elements, /components)`. **Compiled CSS** is located in the [downloadable zip file]({{ site.repos[0].url }}/releases/download/v{{ site.version }}/uswds-{{ site.version }}.zip) . +* **Sass** styles are located in: `src/stylesheets/ (/core, /elements, /components)`. **Compiled CSS** is located in the [downloadable zip file]({{ site.repos[0].url }}/releases/download/v{{ site.data.uswds_version }}/uswds-{{ site.data.uswds_version }}.zip) . * **JS** is located in: `src/js/components (accordion.js, toggle-field-mark.js, toggle-form-input.js, validator.js)`. * **Fonts** are located in: `src/fonts`. * **Images** and icons are located in: `src/img`. diff --git a/pages/getting-started/download.html b/pages/getting-started/download.html index 1ad4b35334..e9a7859b2a 100644 --- a/pages/getting-started/download.html +++ b/pages/getting-started/download.html @@ -10,8 +10,8 @@

    Code

    -Download code -Version {{ site.version }} +Download code +Version {{ site.data.uswds_version }}

    Design files

    diff --git a/spec/config_spec.rb b/spec/config_spec.rb deleted file mode 100644 index 8e711b23f8..0000000000 --- a/spec/config_spec.rb +++ /dev/null @@ -1,10 +0,0 @@ -require 'yaml' -require 'json' - -RSpec.describe "Configuration" do - it '_config.yml version matches USWDS version in package.json' do - site = YAML.load(File.read('_config.yml')) - package = JSON.load(File.read('package.json')) - expect(site['version']).to eq(package['dependencies']['uswds']) - end -end From c073a6adb6569c9d3edf4b15ec8943d9404b6f01 Mon Sep 17 00:00:00 2001 From: Marco Segreto Date: Wed, 12 Jul 2017 11:02:29 -0700 Subject: [PATCH 58/65] Fix typo and remove easy --- pages/getting-started/developers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/getting-started/developers.md b/pages/getting-started/developers.md index 716c299a39..f927610e54 100644 --- a/pages/getting-started/developers.md +++ b/pages/getting-started/developers.md @@ -142,7 +142,7 @@ You can also email us directly at [uswebdesignstandards@gsa.gov](mailto:uswebdes ## JS customization -The JavaScript for the standards is separated into components in the same manner as the visual interface which is all initialized with event handlers when the DOM is ready. These components are accessible as CommonJS modules that can be required in other JavaScript files which then must be fuilt for the browser. The components are currently not accessible in the global browser scope, but can be easily extended to be included by requiring `components` and setting it to a global scope: +The JavaScript for the standards is separated into components in the same manner as the visual interface which is all initialized with event handlers when the DOM is ready. These components are accessible as CommonJS modules that can be required in other JavaScript files which then must be built for the browser. The components are currently not accessible in the global browser scope, but can be extended to be included by requiring `components` and setting it to a global scope: ```js window.uswds = require('./components'); From 7153d5be04f8c0275789beb993f74ef5192e1952 Mon Sep 17 00:00:00 2001 From: Marco Segreto Date: Wed, 12 Jul 2017 11:03:30 -0700 Subject: [PATCH 59/65] Add disclaimer about customizing JS standards --- pages/getting-started/developers.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/pages/getting-started/developers.md b/pages/getting-started/developers.md index f927610e54..f1a3ef120f 100644 --- a/pages/getting-started/developers.md +++ b/pages/getting-started/developers.md @@ -142,6 +142,8 @@ You can also email us directly at [uswebdesignstandards@gsa.gov](mailto:uswebdes ## JS customization +**Unfortunately, customizing the JavaScript for the standards currently requires NodeJS and a module bundler like Browserify or Webpack. We apologize for this inconvenience, and are working to resolve it in a future release of the Standards.** + The JavaScript for the standards is separated into components in the same manner as the visual interface which is all initialized with event handlers when the DOM is ready. These components are accessible as CommonJS modules that can be required in other JavaScript files which then must be built for the browser. The components are currently not accessible in the global browser scope, but can be extended to be included by requiring `components` and setting it to a global scope: ```js From 3a958c5b2b919e9583a91bf15099371430587575 Mon Sep 17 00:00:00 2001 From: Marco Segreto Date: Wed, 12 Jul 2017 11:08:07 -0700 Subject: [PATCH 60/65] Add some context about how components work on DOM --- pages/getting-started/developers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/getting-started/developers.md b/pages/getting-started/developers.md index f1a3ef120f..5db901c4a7 100644 --- a/pages/getting-started/developers.md +++ b/pages/getting-started/developers.md @@ -150,7 +150,7 @@ The JavaScript for the standards is separated into components in the same manner window.uswds = require('./components'); ``` -Each component has a standardized interface that can be used to extend it further. The primary methods each component has are as follows: +Each component has a standardized interface that can be used to extend it further. The components store a HTML classname that's used to link HTML elements with the JS component, so when a component is initialized, it will search through the current HTML DOM finding all elements that match it's class and inialize the component JavaScript for those elements. The primary methods each component has are as follows: - `on`: Initialize a component's JavaScript behavior by passing the root element, such as `window.document`. - `off`: The opposite of `on`, de-initializes a component, removing any JavaScript event handlers on the component. From 3c0c42c1ddccbd52dd6eca6d01ce2856362e6f35 Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Wed, 12 Jul 2017 18:00:33 -0400 Subject: [PATCH 61/65] Fix issues with run-axe.js. --- config/run-axe.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/config/run-axe.js b/config/run-axe.js index 83b43d7bc6..d4395a87d7 100644 --- a/config/run-axe.js +++ b/config/run-axe.js @@ -41,14 +41,14 @@ function getRemoteChrome() { // This function is only here so it can be easily .toString()'d // and run in the context of a web page by Chrome. It will not // be run in the node context. -function runAxe() { +const RUN_AXE_FUNC_JS = function runAxe() { return new Promise((resolve, reject) => { window.axe.run((err, results) => { if (err) return reject(err); resolve(JSON.stringify(results.violations)); }); }); -} +}.toString(); let getChrome = REMOTE_CHROME_URL ? getRemoteChrome : launchChromeLocally; @@ -59,7 +59,7 @@ Promise.all([runServer(), getChrome()]).then(([server, chrome]) => { console.log(`Running aXe on:`); CDP({ - host: chrome.host, + host: chromeHost, port: chrome.port, }, client => { const {Page, Network, Runtime} = client; @@ -110,7 +110,7 @@ Promise.all([runServer(), getChrome()]).then(([server, chrome]) => { }); Page.loadEventFired(() => { Runtime.evaluate({ - expression: AXE_JS + ';(' + runAxe.toString() + ')()', + expression: `${AXE_JS};(${RUN_AXE_FUNC_JS})()`, awaitPromise: true, }).then(details => { let errorFound = false; @@ -128,7 +128,7 @@ Promise.all([runServer(), getChrome()]).then(([server, chrome]) => { errorFound = true; } } else { - console.log('Unexpected result from CDP!'); + console.log('Unexpected result from aXe JS evaluation!'); console.log(details.result); errorFound = true; } @@ -149,4 +149,8 @@ Promise.all([runServer(), getChrome()]).then(([server, chrome]) => { loadNextPage(); }); }); +}).catch(e => { + console.log(chalk.red("An error occurred during initialization.")); + console.log(e); + process.exit(1); }); From da1a47a3df683869af70e62840083e7cb89a1439 Mon Sep 17 00:00:00 2001 From: Atul Varma Date: Thu, 13 Jul 2017 08:05:51 -0400 Subject: [PATCH 62/65] List 18F/django-uswds-forms in implementations.yml. --- _data/implementations.yml | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/_data/implementations.yml b/_data/implementations.yml index 3861f203e0..7addb53e90 100644 --- a/_data/implementations.yml +++ b/_data/implementations.yml @@ -6,6 +6,15 @@ version: 0.12.0 notes: "This package provides access to the Standards in [Django](https://www.djangoproject.com/) applications." +- name: Django + url: http://django-uswds-forms.readthedocs.io/en/latest/ + author: + name: 18F + url: https://github.com/18F + version: 0.0.3 + notes: | + This package provides Django Forms integration with the Standards. + - name: Drupal url: https://www.drupal.org/project/uswds author: From eb9a5756348c43294128ede03788a5aa6b9622ca Mon Sep 17 00:00:00 2001 From: Marco Segreto Date: Thu, 13 Jul 2017 10:26:54 -0700 Subject: [PATCH 63/65] Spelling fixes and example --- pages/getting-started/developers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/getting-started/developers.md b/pages/getting-started/developers.md index 5db901c4a7..7eb8d635e7 100644 --- a/pages/getting-started/developers.md +++ b/pages/getting-started/developers.md @@ -150,7 +150,7 @@ The JavaScript for the standards is separated into components in the same manner window.uswds = require('./components'); ``` -Each component has a standardized interface that can be used to extend it further. The components store a HTML classname that's used to link HTML elements with the JS component, so when a component is initialized, it will search through the current HTML DOM finding all elements that match it's class and inialize the component JavaScript for those elements. The primary methods each component has are as follows: +Each component has a standardized interface that can be used to extend it further. The components store a HTML class name (e.g. `.usa-accordion-button[aria-controls]`) that's used to link HTML elements with the JS component, so when a component is initialized, it will search through the current HTML DOM finding all elements that match its class and inialize the component JavaScript for those elements. The primary methods each component has are as follows: - `on`: Initialize a component's JavaScript behavior by passing the root element, such as `window.document`. - `off`: The opposite of `on`, de-initializes a component, removing any JavaScript event handlers on the component. From 1374c8236e0e123ce4c52fa7e92c0f826e946364 Mon Sep 17 00:00:00 2001 From: John Donmoyer Date: Fri, 21 Jul 2017 15:37:11 -0500 Subject: [PATCH 64/65] 1.3.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0f35b83bd2..398156add5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "uswds-docs", - "version": "1.2.1", + "version": "1.3.0", "description": "Website and documentation on using the U.S. Web Design Standards.", "scripts": { "federalist": "gulp build", From b11ac1d635ea9b7269ca045a80ad7831a1b19e6f Mon Sep 17 00:00:00 2001 From: John Donmoyer Date: Fri, 21 Jul 2017 15:37:42 -0500 Subject: [PATCH 65/65] use uswds 1.3.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 398156add5..19cb2a27f9 100644 --- a/package.json +++ b/package.json @@ -89,7 +89,7 @@ "politespace": "^0.1.4", "run-sequence": "^1.1.5", "simplecrawler": "^1.1.3", - "uswds": "1.2.1", + "uswds": "1.3.0", "vinyl-buffer": "^1.0.0", "vinyl-source-stream": "^1.1.0" }