Merge pull request #1355 from sparkdesignsystem/staging

Publish 4-29

.eslintrc

@@ -1,3 +1,34 @@
 {
-  "extends": "airbnb"
+  "extends": ["airbnb", "prettier", "plugin:jest/recommended"],
+  "plugins": ["prettier", "jest"],
+  "env": {
+    "browser": true,
+    "jest/globals": true
+  },
+  "rules": {
+    "import/no-extraneous-dependencies": ["error", {
+      "devDependencies": true,
+      "optionalDependencies": false,
+      "peerDependencies": false
+    }],
+    "max-len": ["error", 80, {
+      "ignorePattern": "^import\\s.+\\sfrom\\s.+;$",
+      "ignoreUrls": true
+    }],
+    "prettier/prettier": ["error"],
+    "object-curly-newline": "off",
+    "react/require-default-props" : "off",
+    "react/jsx-filename-extension": "off",
+    "jsx-a11y/label-has-associated-control": [ 2, {
+      "labelComponents": ["label"],
+      "labelAttributes": ["htmlFor"],
+      "controlComponents": ["input"]
+    }],
+    "jsx-a11y/label-has-for": [ 2, {
+      "components": [ "Label" ],
+      "required": {
+        "every": [ "id" ]
+      }
+    }]
+  }
 }

.github/pull_request_template.md

@@ -1,19 +1,26 @@
 ## What does this PR do?
 A clear and concise description of what this PR does.
 
+### Associated Issue 
+Issue Number that this PR is closing out.
+
 ## Please check off completed items as you work.
 If a checklist item or section does not apply to your PR
 then please remove it.
+
 ### Documentation
+ - [ ] Update Spark Docs React
  - [ ] Update Spark Docs Angular
  - [ ] Update Spark Docs Vanilla
  - [ ] Update Component Sass Var/Class Modifier table
 
 ### Code
  - [ ] Build Component in Spark Vanilla (Sass, HTML, JS)
  - [ ] Build Component in Spark Angular
+ - [ ] Build Component in Spark React
  - [ ] Unit Testing in Spark Vanilla with `npm run test` (100% coverage, 100% passing)
  - [ ] Unit Testing in Spark Angular with `gulp test-angular` (100% coverage, 100% passing)
+ - [ ] Unit Testing in Spark React with `gulp test-react` (100% coverage, 100% passing)
 
 ### Accessibility
 - [ ] New changes abide by [accessibility requirements](https://sparkdesignsystem.com/docs/accessibility)

.prettierrc.json

@@ -1,3 +1,4 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "trailingComma": "all"
 }

.travis.yml

@@ -20,5 +20,5 @@ before_install:
 
 install:
   - $(npm bin)/gulp pre-publish
-  - npm test
   - $(npm bin)/gulp test-angular
+  - $(npm bin)/gulp test-react

_redirects

@@ -1 +1,3 @@
 https://fall.sparkdesignsystem.com/* https://staging.sparkdesignsystem.com/:splat 301!
+https://sparkdesignsystem.com/gettingstarted/developers https://www.sparkdesignsystem.com/ 301!
+https://sparkdesignsystem.com/gettingstarted/designers https://www.sparkdesignsystem.com/ 301!

gulp/drizzle/config.js

@@ -29,7 +29,8 @@ module.exports = {
           'drizzle/scripts/drizzle': './src/assets/drizzle/scripts/drizzle.js',
           // Common toolkit scripts
           'toolkit/scripts/toolkit': './src/assets/toolkit/scripts/toolkit.js',
-          'toolkit/scripts/toolkit-prerender': './src/assets/toolkit/scripts/toolkit-prerender.js',
+          'toolkit/scripts/toolkit-prerender':
+            './src/assets/toolkit/scripts/toolkit-prerender.js',
         },
         output: {
           path: './dist/assets',
@@ -81,6 +82,7 @@ module.exports = {
           './packages/spark-core/es5/*.js',
           './src/assets/toolkit/**/*.js',
           '!./src/angular',
+          '!./src/react',
         ],
         tasks: ['js'],
       },
@@ -103,15 +105,11 @@ module.exports = {
         tasks: ['build-spark-core'],
       },
       {
-        match: [
-          './packages/spark-extras-highlight-board/*.js',
-        ],
+        match: ['./packages/spark-extras-highlight-board/*.js'],
         tasks: ['build-spark-extras-highlight-board'],
       },
       {
-        match: [
-          './src/angular/projects/spark-core-angular/src/lib/**/*.ts',
-        ],
+        match: ['./src/angular/projects/spark-core-angular/src/lib/**/*.ts'],
         tasks: ['build-spark-core-angular'],
       },
       {
@@ -138,6 +136,10 @@ module.exports = {
         ],
         tasks: ['build-spark-extras-angular-highlight-board'],
       },
+      {
+        match: ['./src/react/projects/spark-react/src/**/*'],
+        tasks: ['build-spark-react'],
+      },
     ],
   },
 
@@ -148,6 +150,8 @@ module.exports = {
       indent_size: 2,
       indent_with_tabs: false,
       max_preserve_newlines: 1,
+      e4x: true,
+      wrap_attributes: 'force-expand-multiline',
       wrap_line_length: 0,
       unformatted: `a abbr acronym address b bdo big cite code col del dfn dt em font
         h1 h2 h3 h4 h5 h6 i img ins kbd mark pre q s samp small span

gulp/react/dev-app/reactdevapp.gulpfile.js

@@ -0,0 +1,63 @@
+const clean = require('gulp-clean');
+const gulp = require('gulp');
+const request = require('request');
+const { exec } = require('child_process');
+const fs = require('fs');
+
+gulp.task('build-react-dev-app-netlify', ['fetch-icons'], (cb) => {
+  exec('cd src/react && npm run build', (err, stdout, stderr) => {
+    console.log(stdout);
+    console.log(stderr);
+    cb(err);
+  });
+});
+
+gulp.task('fetch-icons', () => {
+  request('https://spark-assets.netlify.com/spark-core-icons.svg', { strictSSL: false })
+    .pipe(fs.createWriteStream('src/react/public/sprk-icons.svg'));
+});
+
+gulp.task('clean-react-dev-app', () => gulp.src(['src/react/node_modules', './dist/react'], { read: false }).pipe(clean()));
+
+gulp.task('install-react-dev-app', (cb) => {
+  exec('cd src/react && npm install', (err, stdout, stderr) => {
+    console.log(stdout);
+    console.log(stderr);
+    cb(err);
+  });
+});
+
+gulp.task('serve-react-dev-app', ['fetch-icons'], (cb) => {
+  exec('cd src/react && npm start', (err, stdout, stderr) => {
+    console.log(stdout);
+    console.log(stderr);
+    cb(err);
+  });
+});
+
+gulp.task('transfer-react-dev-app', () => {
+  gulp.src('dist/react/build', { read: false }).pipe(clean());
+  gulp.src('src/react/build/react/**/*').pipe(gulp.dest('dist/react'));
+});
+
+gulp.task('link-spark-to-react-dir', (cb) => {
+  gulp
+    .src(
+      [
+        'src/react/node_modules/@sparkdesignsystem/spark-core',
+        'src/react/node_modules/@sparkdesignsystem/spark-card',
+        'src/react/node_modules/@sparkdesignsystem/spark-dictionary',
+        'src/react/node_modules/@sparkdesignsystem/spark-highlight-board',
+      ],
+      { read: false },
+    )
+    .pipe(clean());
+  exec(
+    'cd src/react && npm link @sparkdesignsystem/spark-core && npm link @sparkdesignsystem/spark-card && npm link @sparkdesignsystem/spark-dictionary && npm link @sparkdesignsystem/spark-highlight-board',
+    (err, stdout, stderr) => {
+      console.log(stdout);
+      console.log(stderr);
+      cb(err);
+    },
+  );
+});