1.0.0-alpha.6

Merge pull request #40 from CMSgov/staging
CMSgov · Apr 18, 2017 · 020784f · 020784f
2 parents ffaf353 + 855fad0
commit 020784f
Show file tree

Hide file tree

Showing 45 changed files with 268 additions and 157 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -3,26 +3,34 @@
 // rule to the ESLint config file relative to the directory you want it
 // applied to.
 {
-  "extends": ["nava", "plugin:react/recommended"],
+  "extends": [
+    "nava",
+    "plugin:jsx-a11y/recommended",
+    "plugin:react/recommended"
+  ],
   "env": {
     "browser": true,
     "es6": true,
-    "jest": true,
-    "node": true
+    "jest": true
   },
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
     },
     "sourceType": "module"
   },
-  "plugins": ["jest", "react"],
+  "plugins": [
+    "jest",
+    "jsx-a11y",
+    "react"
+  ],
   "rules": {
     "eol-last": "warn",
     "jest/no-disabled-tests": "warn",
     "jest/no-focused-tests": "error",
     "jest/no-identical-title": "error",
     "no-unused-vars": ["error", {ignoreRestSiblings: true}],
+    "sort-imports": "error",
     "react/forbid-prop-types": "error",
     "react/jsx-closing-bracket-location": "error",
     "react/jsx-first-prop-new-line": ["error", "multiline"],

diff --git a/package.json b/package.json
@@ -31,7 +31,9 @@
     "ejs": "^2.5.6",
     "eslint": "^3.19.0",
     "eslint-config-nava": "^1.0.0",
+    "eslint-plugin-filenames": "^1.2.0",
     "eslint-plugin-jest": "^19.0.1",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-react": "^6.10.3",
     "front-matter": "^2.1.2",
     "generator-cmsgov": "file:./packages/generator-cmsgov",

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -1,77 +1,15 @@
-# CMSGov Design System
-
-A UI component library and styleguide that is living, tested, importable, and iterable. The goal is to promote consistency across agency websites, speed up productivity, and serve as a future-friendly foundation.
-
 ## Installation
 
-You can download a .zip of the design system directly from GitHub's [Releases](CMSgov/design-system/releases) page, however we suggest using a package manager like NPM or Yarn to install the design system package if you're working on a real world project. This way you can easily update the package when there's a new release.
-
-**Important:** The NPM package is currently a private package. In order to install it you must have access to the package.
-
 ```
-npm login
 npm install --save @cmsgov/design-system-core
 ```
 
 or if you're using Yarn:
 
 ```
-yarn login
 yarn add @cmsgov/design-system-core
 ```
 
 ## Usage
 
-Source files can be imported from the `src` directory. Transpiled files can be found in the `dist` directory.
-
-Import all Sass styles:
-
-```css
-@import 'node_modules/@cmsgov/design-system-core/src/index';
-```
-
-Link to transpiled CSS:
-
-```html
-<link rel="stylesheet" src="node_modules/@cmsgov/design-system-core/dist/index.css" />
-```
-
-Import JSX component:
-
-```jsx
-import {Button} from '@cmsgov/design-system-core';
-...
-<Button>Foo</Button>;
-```
-
-Apply base-level of styles and use a utility class:
-
-```html
-<html>
-<head>
-    <link rel="stylesheet" src="node_modules/@cmsgov/design-system-core/dist/index.css" />
-</head>
-<body class="ds-base">
-    <h1 class="ds-u-font-size--title">Hello world</h1>
-</body>
-</html>
-```
-
-## Directory reference
-<!-- You can regenerate the tree by running tree -d -I "node_modules" -->
-
-```
-├── dist                Transpiled CSS and fonts
-└── src                 Sass and JSX
-    ├── base            Base HTML styles (scoped to .ds-base)
-    ├── components      Sass and React components
-    │   ├── Button
-    │   └── etc...
-    ├── fonts
-    ├── generics        Far reaching selectors
-    ├── layouts         Structural patterns; No cosmetics.
-    ├── settings        Globally-available settings and config options
-    ├── tools           Helper functions and public mixins
-    ├── utilities       Functional CSS classes to apply individual traits
-    └── vendor          Third-party libraries
-```
+Please view the documentation site for usage information. Each release has its own version of the documentation site, and can be found in the [release notes on GitHub](https://github.com/CMSgov/design-system/releases).
diff --git a/packages/core/dist/components/Alert/Alert.js b/packages/core/dist/components/Alert/Alert.js
@@ -7,14 +7,14 @@ exports.Alert = undefined;
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
 var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
 var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);

diff --git a/packages/core/dist/components/Badge/Badge.js b/packages/core/dist/components/Badge/Badge.js
@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Badge = undefined;
 
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
 var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var Badge = exports.Badge = function Badge(props) {

diff --git a/packages/core/dist/components/Button/Button.js b/packages/core/dist/components/Button/Button.js
@@ -9,14 +9,14 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
 var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
 var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);

diff --git a/packages/core/dist/components/ChoiceList/Choice.js b/packages/core/dist/components/ChoiceList/Choice.js
@@ -7,17 +7,17 @@ exports.Choice = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _classnames = require('classnames');
+var _propTypes = require('prop-types');
 
-var _classnames2 = _interopRequireDefault(_classnames);
+var _propTypes2 = _interopRequireDefault(_propTypes);
 
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _classnames = require('classnames');
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _classnames2 = _interopRequireDefault(_classnames);
 
 var _lodash = require('lodash.uniqueid');
 

diff --git a/packages/core/dist/components/Form/FormLabel.js b/packages/core/dist/components/Form/FormLabel.js
@@ -7,17 +7,17 @@ exports.FormLabel = undefined;
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _classnames = require('classnames');
+var _propTypes = require('prop-types');
 
-var _classnames2 = _interopRequireDefault(_classnames);
+var _propTypes2 = _interopRequireDefault(_propTypes);
 
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _classnames = require('classnames');
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _classnames2 = _interopRequireDefault(_classnames);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

diff --git a/packages/core/dist/components/Select/Select.js b/packages/core/dist/components/Select/Select.js
@@ -7,14 +7,14 @@ exports.Select = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
 var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
 var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);

diff --git a/packages/core/dist/components/index.js b/packages/core/dist/components/index.js
@@ -16,6 +16,18 @@ Object.keys(_Alert).forEach(function (key) {
   });
 });
 
+var _Badge = require('./Badge/Badge');
+
+Object.keys(_Badge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Badge[key];
+    }
+  });
+});
+
 var _Button = require('./Button/Button');
 
 Object.keys(_Button).forEach(function (key) {

diff --git a/packages/core/dist/index.css b/packages/core/dist/index.css
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,9 @@
 {
   "name": "@cmsgov/design-system-core",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "Core CSS and React components",
   "repository": "CMSgov/design-system",
   "main": "dist/index.js",
@@ -15,6 +18,7 @@
   },
   "devDependencies": {
     "enzyme": "^2.8.1",
+    "mz": "^2.6.0",
     "react-addons-test-utils": "^15.5.1",
     "react-test-renderer": "^15.5.4"
   }

diff --git a/packages/core/src/.eslintrc b/packages/core/src/.eslintrc
@@ -2,7 +2,11 @@
 // to apply a stricter set of rules to our package's JavaScript versus the
 // documentation site's.
 {
+  "plugins": [
+    "filenames"
+  ],
   "rules": {
+    "filenames/match-exported": [2, "pascal"],
     // We want a displayName for the generated React docs
     "react/display-name": "error",
     // Avoid exploits. If you need dangerouslySetInnerHTML, then temporarily

diff --git a/packages/core/src/components/Alert/Alert.example.jsx b/packages/core/src/components/Alert/Alert.example.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
-import React from 'react';
 import Alert from './Alert';
+import React from 'react';
 
 export default function() {
   return (

diff --git a/packages/core/src/components/Alert/Alert.jsx b/packages/core/src/components/Alert/Alert.jsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export class Alert extends React.PureComponent {

diff --git a/packages/core/src/components/Alert/Alert.test.jsx b/packages/core/src/components/Alert/Alert.test.jsx
@@ -1,6 +1,6 @@
+import Alert from './Alert';
 import React from 'react';
 import {shallow} from 'enzyme';
-import Alert from './Alert';
 
 describe('Alert', function() {
   const text = 'Ruhroh';

diff --git a/packages/core/src/components/Badge/Badge.example.jsx b/packages/core/src/components/Badge/Badge.example.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
-import React from 'react';
 import Badge from './Badge';
+import React from 'react';
 
 export default function() {
   return <Badge>Today</Badge>;

diff --git a/packages/core/src/components/Badge/Badge.jsx b/packages/core/src/components/Badge/Badge.jsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 export const Badge = (props) => {
   return <span className='ds-c-badge'>{props.children}</span>;

diff --git a/packages/core/src/components/Badge/Badge.test.jsx b/packages/core/src/components/Badge/Badge.test.jsx
@@ -1,8 +1,7 @@
+import Badge from './Badge';
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import Badge from './Badge';
-
 describe('Badge', () => {
   it('should include children as label', () => {
     expect(

diff --git a/packages/core/src/components/Button/Button.example.jsx b/packages/core/src/components/Button/Button.example.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
-import React from 'react';
 import Button from './Button';
+import React from 'react';
 
 export default function() {
   return (
@@ -13,14 +13,6 @@ export default function() {
         target='_blank'
         variation='primary'
       >
-        <svg
-          className='ds-u-margin-right--1'
-          xmlns='http://www.w3.org/2000/svg'
-          aria-hidden='true'
-          viewBox='0 0 24 24'
-        >
-          <use xlinkHref='/1.0.0-alpha.4/public/images/symbols.svg#download' />
-        </svg>
         React anchor button
       </Button>
     </div>

diff --git a/packages/core/src/components/Button/Button.jsx b/packages/core/src/components/Button/Button.jsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 /**

diff --git a/packages/core/src/components/Button/Button.test.jsx b/packages/core/src/components/Button/Button.test.jsx
@@ -1,8 +1,7 @@
+import Button from './Button.jsx';
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import Button from './Button.jsx';
-
 /* eslint-disable react/display-name, react/prop-types */
 const Link = (props) => {
   return <div {...props}>{props.children}</div>;

diff --git a/packages/core/src/components/ChoiceList/Choice.example.jsx b/packages/core/src/components/ChoiceList/Choice.example.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
-import React from 'react';
 import Choice from './Choice';
+import React from 'react';
 
 export default function() {
   return (