Merge branch 'master' of https://github.com/department-of-veterans-af…

…fairs/vets-design-system-documentation

.circleci/config.yml

@@ -0,0 +1,51 @@
+# Use the latest 2.1 version of CircleCI pipeline process engine. See: https://circleci.com/docs/2.0/configuration-reference
+version: 2.1
+# Use a package of configuration called an orb.
+orbs:
+  aws-cli: circleci/[email protected]
+
+jobs:
+  build-deploy:
+    docker:
+      - image: cimg/ruby:2.7.2-node
+    environment:
+      AWS_DEFAULT_REGION: us-gov-west-1
+    parameters:
+      bucket:
+        type: string
+
+    steps:
+      - checkout
+      - aws-cli/setup
+      - run: yarn install
+        # If this works, think about adding it to the Gemfile
+      - run: gem install bundler:1.16.6
+      - run: bundle install
+      - run: yarn build
+      - run: bundle exec jekyll build
+      - run: aws s3 sync _site s3://<< parameters.bucket >> --acl public-read
+
+# Orchestrate or schedule a set of jobs
+workflows:
+  deploy-dev:
+    jobs:
+      - build-deploy:
+          # Set the bucket parameter to be the dev bucket
+          bucket: "dev-design.va.gov"
+          filters:
+            branches:
+              only: master
+          context:
+            # The Platform context has the environment variables for setting up the aws cli
+            - Platform
+  deploy-staging:
+    jobs:
+      - build-deploy:
+          # Set the bucket parameter to be the staging bucket
+          bucket: "staging-design.va.gov"
+          filters:
+            branches:
+              only: master
+          context:
+            # The Platform context has the environment variables for setting up the aws cli
+            - Platform

Jenkinsfile

@@ -50,25 +50,5 @@ pipeline {
       }
     }
 
-    stage('Deploy dev & staging') {
-      when {
-        expression { env.BRANCH_NAME == 'master' }
-      }
-      steps {
-        script {
-          commit = sh(returnStdout: true, script: "git rev-parse HEAD").trim()
-        }
-
-        build job: 'deploys/vets-design-system-documentation-vagov-dev', parameters: [
-          booleanParam(name: 'notify_slack', value: true),
-          stringParam(name: 'ref', value: commit)
-        ], wait: false
-
-        build job: 'deploys/vets-design-system-documentation-vagov-staging', parameters: [
-          booleanParam(name: 'notify_slack', value: true),
-          stringParam(name: 'ref', value: commit)
-        ], wait: false
-      }
-    }
   }
-}
+}

src/_components/buttons.md

@@ -70,11 +70,12 @@ Only `<button>` elements can be disabled with a `disabled` attribute. To make a
 * Style the button most users should click in a way that distinguishes from other buttons on the page. Try using the “large button” or the most visually distinct fill color.
 * Make sure buttons should look clickable—use color variations to distinguish static, hover and active states.
 * Avoid using too many buttons on a page.
+* Reserve chevrons in buttons for "Back" and "Continue" buttons only
 * Use sentence case for button labels.
-* Button labels should be as short as possible with “trigger words” that your users will recognize to clearly explain what will happen when the button is clicked (for example, “download,” “view” or “sign up”).
+* Keep the character limit for button labels to 35 characters. Button labels should be as short as possible with “trigger words” that your users will recognize to clearly explain what will happen when the button is clicked (for example, “download,” “view” or “sign up”). 
 * Make the first word of the button’s label a verb. For example, instead of “Complaint Filing” label the button “File a complaint.”
 * At times, consider adding an icon to signal specific actions (“download”, “open in a new window”, etc).
-* Read more about writing for buttons in the [content style guide](../content-style-guide/buttons.html)
+* Read more about writing for buttons in the [content style guide](https://design.va.gov/content-style-guide/button-labels)
 
 ### When to use
 
@@ -92,5 +93,5 @@ Only `<button>` elements can be disabled with a `disabled` attribute. To make a
 * Buttons should display a visible focus state when users tab to them.
 * Avoid using `<div>` or `<img>` tags to create buttons. Screen readers don't automatically know either is a usable button.
 * When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.
-
+* Include more contextual information in the button label for screen readers. You can use an aria label to specify form numbers or program names in the buttons for greater context. Example: A button label could say "Apply for caregiver assistance" and the button label for screen readers can say, `<button>Apply for <span class="sr only"the program of comprehensive</span> caregiver assistance</button>`