Temp - checking v6.0 changes

.circleci/config.yml

@@ -0,0 +1,104 @@
+
+version: 2
+
+# YAML anchors/aliases. See;
+# - https://circleci.com/blog/circleci-hacks-reuse-yaml-in-your-circleci-config-with-yaml/
+# - https://github.com/circleci/frontend/blob/master/.circleci/config.yml
+references:
+  common_config: &common_config
+    working_directory: /var/www/code
+    docker:
+      # @see https://github.com/massgov/Drupal-Container
+      - image: massgov/drupal-container:1.0.1-ci
+
+jobs:
+  build:
+    <<: *common_config
+    steps:
+      - checkout
+      - restore_cache:
+          name: Restore NPM Cache
+          keys:
+            - site-npm-v1-{{ checksum "styleguide/yarn.lock" }}
+            - site-npm-v1-
+      - run: { name: 'NPM Install', command: 'cd styleguide && yarn' }
+      - save_cache:
+          name: Save NPM cache
+          key: site-npm-v1-{{ checksum "styleguide/yarn.lock" }}
+          paths: [ styleguide/node_modules ]
+      - run: { name: 'Generate style guide', command: 'php styleguide/core/console --generate' }
+      - run: { name: 'Build assets', command: 'cd styleguide && node_modules/.bin/gulp prod' }
+      - persist_to_workspace:
+          root: /var/www
+          paths: [code]
+
+  test:
+    working_directory: /home/circleci/code
+    docker:
+      - image: circleci/python:2.7.14
+    steps:
+      - attach_workspace: {at: /home/circleci}
+      - setup_remote_docker
+      - run: docker-compose up --no-start web backstop
+      - run: |
+          docker cp ./ $(docker-compose ps -q backstop):/src/
+          docker cp ./styleguide/public/. $(docker-compose ps -q web):/usr/share/nginx/html
+      - run: docker-compose run backstop test
+      - run:
+          command: docker cp $(docker-compose ps -q backstop):/src/backstopjs/. ./backstopjs/
+          when: always
+      - store_artifacts:
+          path: ./backstopjs
+          destination: backstop
+      - store_test_results:
+          path: backstopjs/reports/ci
+
+  deploy_branch:
+    <<: *common_config
+    steps:
+      - add_ssh_keys
+      - attach_workspace: {at: /var/www}
+      - run:
+          name: "Prepare Git"
+          command: |
+            git config --global user.email "ci.bot@mass.gov"
+            git config --global user.name "MassGov Bot"
+      - run: { name: 'Deploy artifacts', command: "cd styleguide && node_modules/.bin/gulp artifacts:publish" }
+      - run: { name: 'Deploy S3', command: "cd styleguide && node_modules/.bin/gulp patternlab:publish" }
+
+  deploy_tag:
+    <<: *common_config
+    steps:
+      - add_ssh_keys
+      - attach_workspace: {at: /var/www}
+      - run:
+          name: "Prepare Git"
+          command: |
+            git config --global user.email "ci.bot@mass.gov"
+            git config --global user.name "MassGov Bot"
+      - run: { name: 'Configure NPM', command: 'echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc'}
+      - run: { name: 'Release Artifacts', command: "cd styleguide && node_modules/.bin/gulp artifacts:release" }
+      - run: { name: 'Release S3', command: "cd styleguide && node_modules/.bin/gulp patternlab:release" }
+      - run: { name: 'Release NPM', command: "cd styleguide && node_modules/.bin/gulp npm:release" }
+
+workflows:
+  version: 2
+  build_branch:
+    jobs:
+      - build
+      - test:
+          requires: [build]
+      - deploy_branch:
+          requires: [build]
+
+  build_tag:
+    jobs:
+      - build:
+          filters:
+            branches: { ignore: /.*/ }
+            tags: { only: /.*/ }
+      - deploy_tag:
+          requires: [build]
+          filters:
+            branches: { ignore: /.*/ }
+            tags: { only: /.*/ }

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,19 @@
+Before opening an issue:
+
+- [Search for duplicate or closed issues](https://github.com/massgov/mayflower/issues?utf8=%E2%9C%93&q=is%3Aissue)
+- Read the [contributing guidelines](https://github.com/massgov/mayflower/blob/master/CONTRIBUTING.md)
+
+When reporting a bug, include:
+
+- Mayflower version
+- Operating system and version (Windows, Mac OS X, Android, iOS, Win10 Mobile)
+- Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
+- Description (write a sentence or two about the issue)
+- Steps to reproduce on live site
+- Prepare a [reduced test case](https://css-tricks.com/reduced-test-cases/)
+
+When suggesting a feature, include:
+
+- As much detail as possible for what we should add and why it's important to Mayflower
+- Relevant links to prior art, screenshots, or live demos whenever possible
+

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,37 @@
+<!-- Please use TICKET Description of ticket as PR title (i.e. DP-1234 Add back-to link on Announcement template)  -->
+Any PRs being created needs a changelog.txt file before being merged into dev. See: [Change Log Instructions](https://github.com/massgov/mayflower/blob/dev/docs/change-log-instructions.md)
+
+
+## Description
+<!-- A few sentences describing the overall goals of the pull request's commits.-->
+
+## Related Issue / Ticket
+
+- [JIRA issue]()
+- [Github issue]()
+
+## Steps to Test
+<!-- Outline the steps to test or reproduce the PR here.  Whenever possible deploy your branch to your fork Github Pages so UAT can be done without rebuilding. See: https://github.com/massgov/mayflower/blob/master/docs/deploy.md -->
+
+1. 
+
+## Screenshots
+Use something like [licecap](http://www.cockos.com/licecap/) to capture gifs to demonstrate behaviors.
+
+
+## Additional Notes:
+
+Anything else to add?
+
+#### Impacted Areas in Application
+<!-- List general components of the application that this PR will affect: -->
+
+* 
+
+#### @TODO
+<!-- List any known remaining work for this ticket / issue. -->
+
+*
+
+#### Today I learned...
+<!-- Did you learn anything valuable in your work for this PR that you could share with the team?  You could list any relevant blogs, docs, or stack overflow posts that helped you with this work. -->

README.md

@@ -1,35 +1,53 @@
-# Style Guide
-This living styleguide is built using PatternLab.
-
-## Machine set up
-1. Install PHP
-2. Install NodeJS version 6.9.4 (https://nodejs.org/en/download/)
-3. Install GulpJS, via command line `npm install -g gulp`
-
-## Set up instructions
-1. Clone Repo
-2. Move into the styleguide directory `cd mayflower/styleguide`
-3. Generate pattern lab default files `php core/console --generate`
-4. Install npm dependencies `npm install`
-
-## Generate a styleguide
-### For local development
-1. run `gulp`
-2. launch browser at http://localhost:3000/ or port shown in gulp output
-3. Browser will automatically refresh as you make changes
-
-### For a dev environment
-1. run 'gulp build'
-
-### For a production environment
-1. run 'gulp prod'
-
-# Working with PatternLab
-* All work is done in the source folder.
-* Mark-up is in the source/_patterns directory.
-* Front end assets can be found in the source/assets directory
-* Gulp will handle the conversion of files from source to public
-* Pattern Lab specific files are in the /public/styleguide directory (the styleguide.html file is automatically generated when twig templates are updated)
-
-# Release Deployment
-Tagged releases are automatically (via CircleCI) deployed to the [Mayflower Artifacts](https://github.com/palantirnet/mayflower-artifacts) repo for consumption by the Palantir team. Tags should follow [semantic versioning](https://github.com/sindresorhus/semver-regex) conventions.
+# Mayflower [![GitHub version](https://badge.fury.io/gh/massgov%2Fmayflower.svg)](https://badge.fury.io/gh/massgov%2Fmayflower)
+Mayflower is the enterprise design system for the Commonwealth of Massachusetts.
+
+## Getting Started
+
+### Setting up your environment
+
+In order to run Mayflower locally, you need to have some things installed and set up on your machine.  Follow the steps in [setting up your machine](docs/machine-setup.md).
+
+#### Demo Install
+- Follow the steps in [Demo Install](docs/demo-install.md) to get a copy of the project up and running on your local machine for *demo* and *testing* purposes. 
+
+## Contribute
+
+Please follow the steps in [Contributing docs](.github/CONTRIBUTING.md) to set up your fork and repo for *development* and *contribution* purposes.
+
+## Deployment
+
+### Developer Deployment
+
+Every time a branch passes CircleCI it will deploy the code to a the following URL `http://mayflower.digital.mass.gov/b/<branch name>/index.html` which will allow the developer to share the URL with reviewers to test their code.
+
+### Production Deployment
+
+Mayflower release managers with the necessary repo permissions can see [Release docs](docs/release.md) for steps on deploying code to production (i.e. do a release).
+
+## Generating assets
+
+This project comes with gulp tasks to build Mayflower's static assets (html, css, js, + images) without serving them locally.  See the [gulp-readme](styleguide/tools/gulp/gulp-readme.md) for more information.
+
+### Mayflower Artifacts
+Some Mass Digital Services projects (i.e. [massgov/mass](https://github.com/massgov/mass)) use twig templates in addition to the static assets (html, css, js, image) from Mayflower.  To establish that dependency, those projects point their dependency manager (i.e. [composer](https://getcomposer.org/doc/00-intro.md)) to the [Mayflower Artifacts](https://github.com/massgov/mayflower-artifacts) repository, which is a collection of Mayflower build artifacts with both twig and static assets.  Learn more about Mayflower Artifacts in the [massgov/openmass docs](https://github.com/massgov/openmass/blob/master/docs/Mayflower.md#mayflower-artifacts).
+
+## Built With
+
+* [Pattern Lab 2 (PHP)](http://patternlab.io/docs/index.html) - The pattern framework / static site generator
+* [Twig](https://twig.sensiolabs.org/) - The templating language
+* [TwigJS](https://github.com/twigjs/twig.js/wiki) - For clientside rendering of twig templates (see [ajaxPattern](styleguide/source/_patterns/03-organisms/by-template/ajax-pattern.md))
+
+## Versioning
+
+We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/massgov/mayflower/tags).
+
+Learn about how Mayflower versions work in our [Semantic Versioning](docs/versioning.md) docs.
+
+## License
+
+This project is licensed under the is licensed under the GNU General Public License v2.0 - see the [LICENSE.txt](LICENSE.txt) file for details.
+
+## Acknowledgments
+
+* [Atomic Design](http://atomicdesign.bradfrost.com/chapter-2/) methodology by Brad Frost
+* This awesome [README template](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2) by [@PurpleBooth](https://gist.github.com/PurpleBooth)

backstopjs/.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+/runs
+/reports

backstopjs/backstop.js

@@ -0,0 +1,70 @@
+
+var walk = require('./walk-dir');
+var path = require('path');
+
+var patternPath = `${__dirname}/../styleguide/public/patterns/`;
+
+/**
+ * Scan for page and template patterns.
+ */
+var files = walk(patternPath)
+    .filter(function(f) {
+        // Only *.html
+        return f.match(/\.html$/)
+            // Not index.html/markup-only.html
+            && !f.match(/(\/index|markup-only)\.html$/)
+            // Only templates and pages.
+            && f.match(/\/(04-templates|05-pages)/)
+            // Not the readme (has version #)
+            && !f.match(/05-pages-readme2.html$/)
+    });
+
+/**
+ * Map discovered HTML files to Backstop scenarios.
+ */
+var scenarios = files.map(function(file) {
+    return {
+        label: path.basename(file, '.html').replace('05-pages-', 'page-').replace('04-templates-', 'template-').replace('-', ' '),
+        url: `http://web/patterns/${path.relative(patternPath, file)}`,
+        misMatchThreshold: 0.05
+    }
+});
+
+
+
+module.exports = {
+  "id": "regression",
+  "viewports": [
+    {
+      "label": "phone",
+      "width": 320,
+      "height": 480
+    },
+    {
+      "label": "tablet",
+      "width": 1024,
+      "height": 768
+    }
+  ],
+  "engineOptions": {
+    "waitTimeout": "10000",
+    "chromeFlags": ['--force-device-scale-factor=1']
+  },
+  "onBeforeScript": "onBefore.js",
+  "onReadyScript": "onReady.js",
+  "scenarios": scenarios,
+  "paths": {
+    "bitmaps_reference": `${__dirname}/reference`,
+    "bitmaps_test": `${__dirname}/runs`,
+    "engine_scripts": `${__dirname}/scripts`,
+    "html_report": `${__dirname}/reports/html`,
+    "ci_report": `${__dirname}/reports/ci`,
+  },
+  "report": ["browser", "CI"],
+  "engine": "chrome",
+  "engineFlags": [],
+  "asyncCaptureLimit": 3,
+  "asyncCompareLimit": 10,
+  "debug": false,
+  "debugWindow": false
+}

backstopjs/scripts/noAnimationHelper.js

@@ -0,0 +1,20 @@
+module.exports = function(chromy) {
+    /**
+     * Writes a CSS property to set transition and animation
+     * delays and duration to 0ms.
+     */
+    chromy.evaluate(function() {
+        var style = document.createElement('style');
+        style.type = 'text/css';
+        var styleNode = document.createTextNode(
+            '*, *::before, *::after {\n' +
+            '  animation-delay: 0ms !important;\n' +
+            '  animation-duration: 0ms !important;\n' +
+            '  transition-duration: 0ms !important;\n' +
+            '  transition-delay: 0ms !important;\n' +
+            '}'
+        );
+        style.appendChild(styleNode);
+        document.head.appendChild(style);
+    });
+}

backstopjs/scripts/noGoogleHelper.js

@@ -0,0 +1,36 @@
+module.exports = function(chromy) {
+    /**
+     * Hides elements that are problematic during visual testing.
+     *  * Google Maps, which may not load all the way
+     *  * YouTube Videos, which display differently sometimes (A/B testing maybe?)
+     */
+    chromy.evaluate(function() {
+        var style = document.createElement('style');
+        style.type = 'text/css';
+        var styleNode = document.createTextNode(
+            '.fluid-width-video-wrapper:after {' +
+            '  background: black;' +
+            '  content: \'\';' +
+            '  position: absolute;' +
+            '  top: 0;' +
+            '  left: 0;' +
+            '  right: 0;' +
+            '  bottom: 0;' +
+            '  z-index: 100;' +
+            '}' +
+            '.js-google-map:before {' +
+            '  background: #B2DEA2;\n' +
+            '  content: \' \';\n' +
+            '  display: block;\n' +
+            '  position: absolute;\n' +
+            '  top: 0;\n' +
+            '  left: 0;\n' +
+            '  right: 0;\n' +
+            '  bottom: 0;\n' +
+            '  z-index: 100;\n' +
+            '}'
+        );
+        style.appendChild(styleNode);
+        document.head.appendChild(style);
+    });
+}

backstopjs/scripts/onBefore.js

@@ -0,0 +1,4 @@
+module.exports = function (chromy, scenario, vp) {
+  // IGNORE ANY CERT WARNINGS
+  chromy.ignoreCertificateErrors();
+};