v1.0.0-alpha.5

Merge pull request #29 from CMSgov/staging
CMSgov · Apr 13, 2017 · ffaf353 · ffaf353
2 parents 0c22909 + 2399506
commit ffaf353
Show file tree

Hide file tree

Showing 109 changed files with 7,149 additions and 834 deletions.
diff --git a/.babelrc b/.babelrc
@@ -8,6 +8,7 @@
   },
   "presets": [
     "react",
-    "es2015"
+    "es2015",
+    "stage-3"
   ]
 }
diff --git a/.eslintrc b/.eslintrc
@@ -3,7 +3,7 @@
 // rule to the ESLint config file relative to the directory you want it
 // applied to.
 {
-  "extends": ["eslint:recommended", "plugin:react/recommended", "nava"],
+  "extends": ["nava", "plugin:react/recommended"],
   "env": {
     "browser": true,
     "es6": true,
@@ -16,9 +16,28 @@
     },
     "sourceType": "module"
   },
-  "plugins": ["react"],
+  "plugins": ["jest", "react"],
   "rules": {
-    "react/no-find-dom-node": "warn",
-    "eol-last": "warn"
+    "eol-last": "warn",
+    "jest/no-disabled-tests": "warn",
+    "jest/no-focused-tests": "error",
+    "jest/no-identical-title": "error",
+    "no-unused-vars": ["error", {ignoreRestSiblings: true}],
+    "react/forbid-prop-types": "error",
+    "react/jsx-closing-bracket-location": "error",
+    "react/jsx-first-prop-new-line": ["error", "multiline"],
+    // handleChange = class method, onChange = prop
+    "react/jsx-handler-names": "error",
+    "react/jsx-key": "warn",
+    "react/jsx-max-props-per-line": ["error", {"maximum": 3}],
+    "react/jsx-pascal-case": "error",
+    "react/jsx-wrap-multilines": "error",
+    "react/no-array-index-key": "error",
+    "react/no-find-dom-node": "error",
+    "react/no-multi-comp": "error",
+    "react/prefer-es6-class": "error",
+    "react/prefer-stateless-function": "error",
+    "react/prop-types": ["error", {ignore: ["className"]}],
+    "react/sort-comp": "error",
   }
 }
diff --git a/.gitignore b/.gitignore
@@ -1,10 +1,14 @@
 # Compiled documentation site. This gets published to S3 and can
 # be generated on demand
 packages/docs/build
+
 # Generated documentation data from CSS and JSX comments. We only need this
 # during the docs generation task.
 packages/docs/src/data
 
+# Transpiled example files
+examples/**/dist
+
 # Logs
 logs
 *.log

diff --git a/examples/article/index.html b/examples/article/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Design System</title>

diff --git a/examples/form/index.html b/examples/form/index.html
@@ -1,28 +1,35 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Design System</title>
   <link rel="stylesheet" href="../../packages/core/dist/index.css" />
   <link rel="stylesheet" href="style.css">
 </head>
 <body class="ds-base">
-  <div class="ds-u-measure--narrow ds-u-margin-y--5 container">
+  <div class="ds-u-margin-y--5 container">
     <h1 class="ds-h1">Report an issue</h1>
+    <p class="ds-text ds-u-measure--base">Please fill out the fields below to report your issue. After you've reported an issue, you'll receive a response within 24 hours.</p>
 
     <div class="ds-c-alert ds-c-alert--error">
       <div class="ds-c-alert__body">
         <h2 class="ds-c-alert__heading">1 error with your application</h2>
-        <p class="ds-c-alert__text">Please select which county you reside in.</p>
+        <p class="ds-c-alert__text">Please enter your last name.</p>
       </div>
     </div>
 
     <form>
       <label class="ds-c-label" for="input-firstname">First name</label>
       <input class="ds-c-field" id="input-firstname" name="firstname" type="text" />
 
-      <label class="ds-c-label" for="input-lastname">Last name</label>
-      <input class="ds-c-field" id="input-lastname" name="lastname" type="text" />
+      <label class="ds-c-label" for="input-lastname">
+        <strong>Last name</strong>
+
+        <span class="ds-c-field__hint ds-u-color--error" id="input-lastname-message" role="alert">
+          A last name is required
+        </span>
+      </label>
+      <input class="ds-c-field ds-c-field--error" id="input-lastname" name="lastname" type="text" />
 
       <h3 class="ds-c-label">Which days can we call you?</h3>
       <span class="ds-c-field__hint">Select all days that would work for you</span>

diff --git a/examples/form/style.css b/examples/form/style.css
@@ -1,4 +1,5 @@
 .container {
   margin-left: auto;
   margin-right: auto;
+  max-width: 700px;
 }
diff --git a/examples/react-app/Gulpfile.js b/examples/react-app/Gulpfile.js
@@ -0,0 +1,37 @@
+var gulp = require('gulp');
+var sass = require('gulp-sass');
+
+/**
+ * Copy the static assets from the design system, such as the fonts and images.
+ * We could do this manually, but why not automate it so it's easy to do
+ * as things are updated :)
+ */
+gulp.task('copy-design-system', function() {
+  return gulp.src([
+    'node_modules/@cmsgov/design-system-core/src/**/fonts/*',
+    'node_modules/@cmsgov/design-system-core/src/**/images/*'
+  ])
+    .pipe(gulp.dest('./dist'));
+});
+
+/**
+ * Transpile Sass to CSS
+ */
+gulp.task('sass', function() {
+  var transpiler = sass({
+    // Add node_modules to the list of paths used to resolve @import
+    // declarations. This way it's easier to import our design system's
+    // Sass files.
+    includePaths: ['./node_modules'],
+    outputStyle: 'compressed'
+  }).on('error', sass.logError);
+
+  return gulp.src('./src/**/*.scss')
+    .pipe(transpiler)
+    .pipe(gulp.dest('./dist'));
+});
+
+gulp.task('default', [
+  'copy-design-system',
+  'sass'
+]);
diff --git a/examples/react-app/README.md b/examples/react-app/README.md
@@ -0,0 +1,11 @@
+## Introduction
+
+This example shows how you can incorporate the design system into your build process. It uses [Webpack](https://webpack.js.org) to bundle and optimize JavaScript files, [Babel](https://babeljs.io/) to transpile JSX, and [Gulp](http://gulpjs.com/) to transpile Sass and copy static assets from the design system.
+
+## Getting started
+
+_Note_: The instructions below assume you have Yarn installed. You can also use NPM if that's your flavor.
+
+1. Install packages: `yarn install`
+1. Transpile and bundle assets: `yarn run build`
+1. Open `index.html` in a browser.
diff --git a/examples/react-app/index.html b/examples/react-app/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Design System</title>
+  <link rel="stylesheet" href="dist/index.css">
+</head>
+<body class="ds-base">
+  <div class="wrap">
+    <div id="jsx-root">
+      <h1>Build assets before viewing</h1>
+      <p>Seeing this message in the browser? Make sure to run the following command first:</p>
+      <p>
+        <code>yarn run build</code>
+        <br>
+        <em>or</em>
+        <br />
+        <code>npm run build</code>
+      </p>
+    </div>
+  </div>
+
+  <script src="dist/bundle.js"></script>
+</body>
+</html>
diff --git a/examples/react-app/package.json b/examples/react-app/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "react-app-example",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@cmsgov/design-system-core": "^1.0.0-alpha",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4"
+  },
+  "devDependencies": {
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0-beta.1",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "gulp": "^3.9.1",
+    "gulp-sass": "^3.1.0",
+    "webpack": "^2.3.3"
+  },
+  "scripts": {
+    "build": "NODE_ENV=production webpack -p --progress && gulp"
+  }
+}
diff --git a/examples/react-app/src/index.js b/examples/react-app/src/index.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+// Import all components and reference one by name. You can optimize this using
+// your build process (ie. Tree shaking in Webpack)
+import { Alert } from '@cmsgov/design-system-core';
+// Import individual component. No special optimizations needed.
+import Button from '@cmsgov/design-system-core/dist/components/Button/Button';
+
+const Example = function() {
+  return (
+    <div>
+      <Alert heading='Hello world'>
+        <p className='ds-c-alert__text'>
+          You did it! You've ran the example.
+        </p>
+        <Button className='ds-u-margin-top--2'>
+          Learn more
+        </Button>
+      </Alert>
+    </div>
+  );
+};
+
+ReactDOM.render(
+  <Example />,
+  document.querySelector('#jsx-root')
+);
diff --git a/examples/react-app/src/index.scss b/examples/react-app/src/index.scss
@@ -0,0 +1,9 @@
+// In our Gulp Sass task, we've added node_modules to the list of paths that
+// are used to resolve @import declarations, so we omit it from the path below.
+@import '@cmsgov/design-system-core/src/index';
+
+.wrap {
+  margin: auto;
+  max-width: 800px;
+  width: 95%;
+}
diff --git a/examples/react-app/webpack.config.js b/examples/react-app/webpack.config.js
@@ -0,0 +1,29 @@
+/**
+ * Use Webpack + Babel to bundle and transpile our JSX
+ */
+var path = require('path');
+var webpack = require('webpack');
+
+var config = {
+  entry: './src/index.js',
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist')
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: [/node_modules/],
+        use: [{
+          loader: 'babel-loader',
+          options: {
+            presets: ['es2015', 'react']
+          }
+        }]
+      }
+    ]
+  }
+};
+
+module.exports = config;