1.2.0

Merge pull request #151 from CMSgov/staging

.gitignore

@@ -1,13 +1,24 @@
 # Documentation is generated into this directory
-docs
+/docs
 
 # Generated documentation data from CSS and JSX comments. We only need this
 # during the docs generation task.
 packages/docs/src/data
 
-# Transpiled example files
+# Themes should be in their own repo, but can be included in this directory
+# in order to use the same tooling and documentation processes
+packages/themes
+
+# Compiled example files
 examples/**/dist
 
+# Package managers
+**/package-lock.json
+/examples/*/yarn.lock
+
+# Code editors
+*.sublime-*
+
 # Logs
 logs
 *.log
@@ -19,12 +30,6 @@ pids
 *.seed
 tmp
 
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
 # node-waf configuration
 .lock-wscript
 
@@ -33,7 +38,6 @@ build/Release
 
 # Dependency directories
 node_modules
-jspm_packages
 
 # Optional npm cache directory
 .npm
@@ -43,6 +47,3 @@ jspm_packages
 
 # .DS_Store Mac
 .DS_Store
-
-**/package-lock.json
-/examples/*/yarn.lock

CONTRIBUTING.md

@@ -26,6 +26,7 @@ This project uses [Yarn](https://yarnpkg.com/) for package management. Yarn help
 
 1. `yarn install`
 1. `yarn bootstrap:yarn`
+1. `yarn start`
 
 The `bootstrap:yarn` command runs [Lerna](https://lernajs.io/) which allows us to have multiple packages within the same repo (a monorepo). Lerna installs all our dependencies and symlinks any cross-dependencies. If you're using `npm` rather than `yarn`, there is also a `bootstrap:npm` command.
 
@@ -52,6 +53,15 @@ These scripts can all be run from the root level of the repo:
 - `yarn lint`
   - Runs just the linting portion of the tests
 
+#### Theme scripts
+
+You can also use the following scripts to [preview and build a theme](https://github.com/CMSgov/design-system/wiki/site-packages-and-themes):
+
+- `yarn start:theme`
+- `yarn build:theme`
+
+If you have multiple directories inside of `packages/themes`, you can specify which theme to use by passing the scripts the name of the folder. For example: `yarn start:theme -- my-theme-folder-name`
+
 ## Submitting a pull request
 
 Here are a few guidelines to follow when submitting a pull request:

README.md

@@ -14,19 +14,19 @@ These packages are published to NPM and can be installed. View each package's RE
 
 #### [Core](packages/core/)
 
-[![npm](http://img.shields.io/npm/v/@cmsgov/design-system-core.svg?label=@cmsgov%2Fdesign-system-core)](https://www.npmjs.com/package/@cmsgov/design-system-core)
+[![npm](https://img.shields.io/npm/v/@cmsgov/design-system-core.svg?label=@cmsgov%2Fdesign-system-core)](https://www.npmjs.com/package/@cmsgov/design-system-core)
 
 The core CSS and React components for the design system. Includes the Support package.
 
 #### [Support](packages/support/)
 
-[![npm](http://img.shields.io/npm/v/@cmsgov/design-system-support.svg?label=@cmsgov%2Fdesign-system-support)](https://www.npmjs.com/package/@cmsgov/design-system-support)
+[![npm](https://img.shields.io/npm/v/@cmsgov/design-system-support.svg?label=@cmsgov%2Fdesign-system-support)](https://www.npmjs.com/package/@cmsgov/design-system-support)
 
 Sass variables, mixins, and functions. Included in the Core package.
 
 #### [Layout](packages/layout/)
 
-[![npm](http://img.shields.io/npm/v/@cmsgov/design-system-layout.svg?label=@cmsgov%2Fdesign-system-layout)](https://www.npmjs.com/package/@cmsgov/design-system-layout)
+[![npm](https://img.shields.io/npm/v/@cmsgov/design-system-layout.svg?label=@cmsgov%2Fdesign-system-layout)](https://www.npmjs.com/package/@cmsgov/design-system-layout)
 
 A responsive flexbox grid framework.
 

lerna.json

@@ -1,7 +1,15 @@
 {
   "lerna": "2.0.0",
+  "command": {
+    "publish": {
+      "ignore": [
+        "packages/themes/*"
+      ]
+    }
+  },
   "packages": [
-    "packages/*"
+    "packages/*",
+    "packages/themes/*"
   ],
-  "version": "1.1.0"
+  "version": "1.2.0"
 }

package.json

@@ -7,91 +7,89 @@
     "bootstrap:npm": "lerna bootstrap",
     "bootstrap:yarn": "lerna bootstrap --npm-client=yarn",
     "build": "NODE_ENV=production gulp build --env=production",
+    "build:theme": "npm run build -- --theme",
     "bump": "lerna publish --skip-git --skip-npm",
     "generate": "yo cmsgov",
     "g": "yarn generate",
     "start": "NODE_ENV=development gulp watch --env=development",
+    "start:theme": "npm run start -- --theme",
     "test": "NODE_ENV=test gulp docs:react && jest && gulp lint --env=test",
     "test:watch": "NODE_ENV=test jest --watch",
     "lint": "yarn run gulp lint"
   },
   "devDependencies": {
-    "autoprefixer": "^7.1.2",
-    "babel-core": "^6.25.0",
-    "babel-jest": "^20.0.3",
-    "babel-loader": "^7.1.1",
+    "autoprefixer": "^7.1.4",
+    "babel-core": "^6.26.0",
+    "babel-jest": "^21.0.2",
+    "babel-loader": "^7.1.2",
     "babel-plugin-transform-object-assign": "^6.22.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-3": "^6.24.1",
-    "babel-register": "^6.24.1",
+    "babel-register": "^6.26.0",
     "browser-sync": "^2.18.13",
-    "bytes": "^2.5.0",
+    "bytes": "^3.0.0",
     "cli-table": "^0.3.1",
     "colors": "^1.1.2",
-    "crypto": "^0.0.3",
     "cssnano": "^3.10.0",
     "cssstats": "^3.1.0",
     "del": "^3.0.0",
     "ejs": "^2.5.7",
-    "eslint": "^4.4.1",
+    "eslint": "^4.7.1",
     "eslint-config-nava": "^2.0.0",
     "eslint-plugin-filenames": "^1.2.0",
-    "eslint-plugin-jest": "^20.0.3",
+    "eslint-plugin-jest": "^21.1.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.2.0",
-    "front-matter": "^2.1.2",
+    "eslint-plugin-react": "^7.3.0",
+    "front-matter": "^2.2.0",
     "generator-cmsgov": "file:./packages/generator-cmsgov",
+    "github": "^11.0.0",
+    "glob": "^7.1.2",
     "gulp": "^3.9.1",
     "gulp-babel": "^7.0.0",
     "gulp-changed": "^3.1.0",
     "gulp-changed-in-place": "^2.2.0",
     "gulp-count": "^0.3.0",
     "gulp-eslint": "^4.0.0",
     "gulp-if": "^2.0.2",
-    "gulp-merge-json": "^1.1.0",
+    "gulp-merge-json": "^1.2.0",
     "gulp-postcss": "^7.0.0",
     "gulp-sass": "^3.1.0",
-    "gulp-sourcemaps": "^2.6.0",
-    "gulp-stylelint": "^4.0.0",
+    "gulp-sourcemaps": "^2.6.1",
+    "gulp-stylelint": "^5.0.0",
     "gulp-util": "^3.0.8",
-    "jest": "^20.0.4",
+    "jest": "^21.1.0",
     "kss": "^3.0.0-beta.18",
-    "lerna": "^2.1.1",
+    "lerna": "^2.2.0",
     "lodash": "^4.17.4",
     "marked": "^0.3.6",
-    "matchdep": "^1.0.1",
     "mkdir-recursive": "^0.3.0",
-    "mz": "^2.6.0",
+    "mz": "^2.7.0",
     "node-notifier": "^5.1.2",
-    "node-sass": "^4.5.3",
     "postcss-image-inliner": "^1.0.6",
-    "postcss-import": "^10.0.0",
-    "postcss-url": "^7.1.1",
-    "prismjs": "^1.6.0",
-    "react": "^15.6.1",
-    "react-docgen": "^2.17.0",
-    "react-dom": "^15.6.1",
+    "postcss-import": "^11.0.0",
+    "postcss-url": "^7.1.2",
+    "prismjs": "^1.8.1",
+    "react": "^15.6.2",
+    "react-docgen": "^2.18.0",
+    "react-dom": "^15.6.2",
     "react-hot-loader": "3.0.0-beta.7",
     "recast": "^0.12.6",
-    "run-sequence": "^2.1.0",
-    "stylelint": "^8.0.0",
+    "run-sequence": "^2.2.0",
+    "stylelint": "^8.1.1",
     "stylelint-order": "^0.6.0",
-    "stylelint-scss": "^2.0.1",
+    "stylelint-scss": "^2.1.0",
     "through2": "^2.0.3",
     "tota11y": "^0.1.6",
     "vinyl-source-stream": "^1.1.0",
-    "webpack": "^3.5.5",
+    "webpack": "^3.6.0",
     "webpack-dev-middleware": "^1.12.0",
-    "webpack-hot-middleware": "^2.18.2",
-    "yargs": "^8.0.2",
+    "webpack-hot-middleware": "^2.19.1",
+    "yargs": "^9.0.1",
     "yo": "^2.0.0"
   },
-  "optionalDependencies": {
-    "nodegit": "^0.19.0"
-  },
   "engines": {
-    "node": ">=4.5.0 <8.0.0"
+    "node": ">=4.5.0"
   },
   "jest": {
     "testPathIgnorePatterns": [
@@ -100,5 +98,8 @@
       "<rootDir>/packages/*/node_modules/",
       "<rootDir>/packages/generator-cmsgov/generators/app/templates/"
     ]
+  },
+  "resolutions": {
+    "gulp-sass/node-sass": ">=4.5.3"
   }
 }

packages/core/dist/components/ChoiceList/Choice.js

@@ -40,10 +40,17 @@ var Choice = function Choice(props) {
       className = props.className,
       id = props.id,
       inversed = props.inversed,
-      inputProps = _objectWithoutProperties(props, ['children', 'className', 'id', 'inversed']);
+      inputPlacement = props.inputPlacement,
+      inputClassName = props.inputClassName,
+      size = props.size,
+      inputProps = _objectWithoutProperties(props, ['children', 'className', 'id', 'inversed', 'inputPlacement', 'inputClassName', 'size']);
   /* eslint-enable prefer-const */
 
-  var inputClasses = (0, _classnames2.default)('ds-c-choice', { 'ds-c-choice--inverse': inversed });
+  var inputClasses = (0, _classnames2.default)(inputClassName, 'ds-c-choice', {
+    'ds-c-choice--inverse': inversed,
+    'ds-c-choice--right': inputPlacement === 'right',
+    'ds-c-choice--small': size === 'small'
+  });
 
   if (!id) {
     id = (0, _lodash2.default)(inputProps.type + '_' + inputProps.name + '_');
@@ -66,7 +73,8 @@ var Choice = function Choice(props) {
 
 exports.Choice = Choice;
 Choice.defaultProps = {
-  type: 'checkbox'
+  type: 'checkbox',
+  inputPlacement: 'left'
 };
 
 Choice.propTypes = {
@@ -83,6 +91,10 @@ Choice.propTypes = {
    * Additional classes to be added to the root `div` element.
    */
   className: _propTypes2.default.string,
+  /**
+   * Additional classes to be added to the `input` element.
+   */
+  inputClassName: _propTypes2.default.string,
   /**
    * Sets the initial checked state. Use this for an uncontrolled component;
    * otherwise, use the `checked` property.
@@ -97,6 +109,11 @@ Choice.propTypes = {
    * Applies the "inverse" UI theme
    */
   inversed: _propTypes2.default.bool,
+  /**
+   * Placement of the input relative to the text label
+   */
+  inputPlacement: _propTypes2.default.oneOf(['left', 'right']),
+  size: _propTypes2.default.oneOf(['small']),
   /**
    * The `input` field's `name` attribute
    */

packages/core/dist/components/Spinner/Spinner.js

@@ -22,10 +22,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var Spinner = exports.Spinner = function Spinner(props) {
   var className = (0, _classnames2.default)('ds-c-spinner', props.size && 'ds-c-spinner--' + props.size, props.inversed && 'ds-u-fill--background-inverse ds-u-color--base-inverse', props.filled && 'ds-c-spinner--filled', props.className);
 
-  return _react2.default.createElement('span', { className: className });
+  return _react2.default.createElement('span', {
+    className: className,
+    'aria-valuetext': props['aria-valuetext'],
+    role: props.role
+  });
 };
 
 Spinner.propTypes = {
+  /** The text announced to screen readers */
+  'aria-valuetext': _propTypes2.default.string,
   /**
    * Additional classes to be added to the spinner element.
    * Useful for adding utility classes.
@@ -35,8 +41,15 @@ Spinner.propTypes = {
   inversed: _propTypes2.default.bool,
   /** Adds a background behind the spinner for extra contrast */
   filled: _propTypes2.default.bool,
+  /** Landmark role so the spinner can receive keyboard focus */
+  role: _propTypes2.default.string,
   /** Smaller or larger variant */
   size: _propTypes2.default.oneOf(['small', 'big'])
 };
 
+Spinner.defaultProps = {
+  'aria-valuetext': 'Loading',
+  role: 'progressbar'
+};
+
 exports.default = Spinner;

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmsgov/design-system-core",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -9,16 +9,16 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "dist/index.js",
   "dependencies": {
-    "@cmsgov/design-system-support": "^1.1.0",
+    "@cmsgov/design-system-support": "^1.2.0",
     "classnames": "^2.2.5",
     "lodash.uniqueid": "^4.0.1",
-    "prop-types": "^15.5.10",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1"
+    "prop-types": "^15.6.0",
+    "react": "^15.6.2",
+    "react-dom": "^15.6.2"
   },
   "devDependencies": {
     "enzyme": "^2.9.1",
-    "mz": "^2.6.0",
-    "react-test-renderer": "^15.6.1"
+    "mz": "^2.7.0",
+    "react-test-renderer": "^15.6.2"
   }
 }