Merge branch 'master' into 1.0

Author: kylebuch8

.gitattributes

@@ -2,3 +2,4 @@ elements/*/*.umd.js     -diff -merge
 elements/*/*.umd.js.map -diff -merge
 themes/*/*.umd.js       -diff -merge
 themes/*/*.umd.js.map   -diff -merge
+package-lock.json       -diff -merge

.github/pull_request_templates/feature-branch.md

@@ -0,0 +1,23 @@
+## Feature Branch: Title
+
+* Appendix doc:
+    - 
+* Link(s) to demo pages_ where this element can be viewed:
+    - 
+
+### Ready-for-merge Checklist
+
+- [ ] Expected files: all files in the merge request related to one feature request?
+- [ ] Is your branch up-to-date with the master branch?
+- [ ] Did automated tests pass?
+- [ ] Was it [browser-tested](https://docs.google.com/spreadsheets/d/1luriPYswlGcKdcbKhQfW6kxIgj7tjNjnBVP7yZ4onwA/edit#gid=1660273076)?
+- [ ] Was this feature demo'd and the design review task marked as complete?
+- [ ] Did it get a LGTM *after the last commit*? (changelog updates are exempt from this rule)
+- [ ] Changelog: consider this your postage stamp, it can’t go out without one! Stories should be in alphabetical/numerical order under the tag release.
+
+
+---
+
+### What's in this branch?
+Summarize files edited as part of this MR along with a brief description of what was changed/why.
+

README.md

@@ -1,105 +1,37 @@
-# RHElements
+**[Getting Started][start] | [Element Catalog][storybook] | [Creating Components][develop] | [Theming Components][theming]**
 
-Welcome to the RHElements project! Let's get started.
+![RHElements logo](./brand/logo/png/rhelements-logo-red.png)
 
-## Quick-start
-
-*Notice: You will need to use [Node](https://nodejs.org/en/) v.7 or higher. These components are written in [ES6](http://es6-features.org/).*
-
-```
-$ git clone [email protected]:RHElements/rhelements.git
-$ cd rhelements
-$ npm install # this will take a while due to lerna bootstrap
-$ npm rebuild node-sass  # this may be necessary
-$ npm start
-```
-
-## Scripts
-
-- `$ npm start`
-    - Launch a demo server. This should be continuously running as you develop.
-- `$ npm run new`
-    -  Create a new component.
-- `$ npm test`
-    -  Run tests on ALL RHElements.
-- `$ npm run build`
-    -  Run build on ALL RHElements.
-- `$ npm run bootstrap`
-    - Update ALL rhelements' dependencies and interlink them with [lerna bootstrap][lerna-bs].
-- `$ npm run storybook`
-    - Run storybook
-- `$ npm run build-storybook`
-    - Build storybook for deployment
-
-[lerna]: https://github.com/lerna/lerna
-[lerna-bs]: https://github.com/lerna/lerna#bootstrap
-
-## Component development
-
-Because this is a monorepo, each component will need to be independently built in order to actively work on and preview the changes. Every component has its own Gulp file and NPM script.
-
-While still running `npm start` in one terminal window (which runs the local server), you will need to open another terminal window, drill into the directory of the component you'd like to work on, and execute the `npm run dev` command. This command will use gulp tasks to watch the files within that component directory and will automatically re-run the build command and refresh the browser when you make changes to the component.
-
-### Example development on a component
-
-```
-$ cd /Sites/rhelement
-$ npm start
+[RHElements][rhe] is a collection of flexible and lightweight [Web Components][wc], and the tools to build them. RHElements are...
 
-# SHIFT + CTRL + T to open a new tab in Terminal
+ - **Lightweight**: small file size, minimal boilerplate, no "framework-like" features.
+ - **Universal**: write once, use everywhere.  RHElements work in React, Vue, Angular, vanilla JS, anywhere HTML elements are used.
 
-$ cd elements/rh-card  # or any other component
-$ npm run dev
-```
+The result of these two principles is plugging one set of comopnents into a wide variety of applications, bringing UX consistency and developer familiarity to any web project.
 
-Make a change to the component and save. The gulpfile will handle transpiling the element down to ES5 and will bring in the HTML and Sass into the template in the component.
+A Yeoman generator is included for creating Web Components that meets these goals.
 
-## Test
+Let's get started!
 
-To test all RHElements, run `npm test` from the root of the repo. If you only want to test the component you're working on:
-
-```
-$ cd elements/rh-card
-$ npm test
-```
-
-Also, if your tests are failing and you want access to a live browser to investigate why, the following flag will keep the browser open.
-
-```
-$ npm test -- -p
-```
-
-Then open the URL that will be printed in the terminal. It looks something like this: `http://localhost:8081/components/@rhelements/rhelements/generated-index.html?cli_browser_id=0`.
-
-## Storybook
-
-We've added [Storybook](https://storybook.js.org/) to RHElements as a way to preview our components as they are being developed. We'll also use Storybook to export a static site that will be the demo site for RHElements.
-
-To run storybook
-
-```
-$ npm run storybook
-```
-
-This will start a web server on port 9001. Navigate in your browser to `http://localhost:9001` to see Storybook in action. Storybook will watch for file changes and reload the browser automatically for you. This is a little slow at the moment, but we'll look into speeding this up.
-
-To export the storybook static site
+## Quick-start
 
-```
-$ npm run build-storybook
-```
+    git clone [email protected]:RHElements/rhelements.git
+    cd rhelements
+    npm install # this will take a while due to lerna bootstrap
+    npm start
 
-This places a build of the storybook site in the .storybook_out directory.
+The `start` script will launch the demo pages.  Demo pages are static showcases of each element, and also serve as scratchpads for experimenting while working on an element.
 
-### Known Issues with Storybook
+*Notice: You will need to use [Node](https://nodejs.org/en/) v.7 or higher.  Storybook _may_ not work with Node v.10.*
 
-For any component that has a third-party dependency you will need to update the `/.storybook/webpack.config.js` file. You will need to create an alias for your depedency.
+---
 
-For example:
+**[Getting Started][start] | [Developing Components][develop] | [Theming][theming]**
 
-```
-"../../whatwg-fetch/fetch.js": path.join( // this is the third-party dependency in the rhelement
-  __dirname,
-  "../node_modules/whatwg-fetch/fetch.js" // this is where it lives in node_modules
-)
-```
+[rhe]: https://github.com/RHElements/rhelements
+[wc]: https://developer.mozilla.org/en-US/docs/Web/Web_Components
+[home]: https://rhelements.github.io/
+[start]: https://rhelements.github.io/getting-started/
+[develop]: https://rhelements.github.io/develop/
+[theming]: https://rhelements.github.io/theme/
+[storybook]: https://rhelements.github.io/rhelements/

elements/all/LICENSE.txt

@@ -1,96 +1,5 @@
-const fs = require("fs");
-const path = require("path");
+// rollup.config.js
+const gulpFactory = require("../../scripts/gulpfile.factory.js");
+const rhelementPackage = require("./package.json");
 
-const gulp = require("gulp");
-const rename = require("gulp-rename");
-const replace = require("gulp-replace");
-const stripCssComments = require("strip-css-comments");
-const trim = require("trim");
-const decomment = require("decomment");
-const sass = require("node-sass");
-const shell = require("gulp-shell");
-
-gulp.task("compile", () => {
-  return gulp
-    .src("./rh-accordion.js")
-    .pipe(
-      replace(
-        /^(import .*?)(['"]\.\.\/(?!\.\.\/).*)(\.js['"];)$/gm,
-        "$1$2.umd$3"
-      )
-    )
-    .pipe(
-      rename({
-        suffix: ".umd"
-      })
-    )
-    .pipe(gulp.dest("./"));
-});
-
-gulp.task("merge", () => {
-  return gulp
-    .src("./src/rh-accordion.js")
-    .pipe(
-      replace(
-        /extends\s+RHElement\s+{/g,
-        (classStatement, character, jsFile) => {
-          // extract the templateUrl and styleUrl with regex.  Would prefer to do
-          // this by require'ing rh-card.js and asking it directly, but without
-          // node.js support for ES modules, we're stuck with this.
-          const oneLineFile = jsFile
-            .slice(character)
-            .split("\n")
-            .join(" ");
-          const [
-            ,
-            templateUrl
-          ] = /get\s+templateUrl\([^)]*\)\s*{\s*return\s+"([^"]+)"/.exec(
-            oneLineFile
-          );
-          const [
-            ,
-            styleUrl
-          ] = /get\s+styleUrl\([^)]*\)\s*{\s*return\s+"([^"]+)"/.exec(
-            oneLineFile
-          );
-
-          let html = fs
-            .readFileSync(path.join("./src", templateUrl))
-            .toString()
-            .trim();
-
-          html = decomment(html);
-
-          let cssResult = sass.renderSync({
-            file: path.join("./src", styleUrl)
-          }).css;
-
-          cssResult = stripCssComments(cssResult).trim();
-
-          return `${classStatement}
-  get html() {
-    return \`
-<style>
-${cssResult}
-</style>
-
-${html}\`;
-  }
-`;
-        }
-      )
-    )
-    .pipe(gulp.dest("./"));
-});
-
-gulp.task("watch", () => {
-  return gulp.watch("./src/*", gulp.series("build"));
-});
-
-gulp.task("bundle", shell.task("../../node_modules/.bin/rollup -c"));
-
-gulp.task("build", gulp.series("merge", "compile", "bundle"));
-
-gulp.task("default", gulp.series("build"));
-
-gulp.task("dev", gulp.series("build", "watch"));
+gulpFactory(rhelementPackage.rhelement);

elements/all/README.md

@@ -17,7 +17,7 @@
   "scripts": {
     "build": "../../node_modules/.bin/gulp && ../../node_modules/.bin/prettier --ignore-path ../../.prettierignore --write '**/*.{js,json}'",
     "dev": "../../node_modules/.bin/gulp dev",
-    "test": "../../node_modules/.bin/wct --configFile ../../wct.conf.json node_modules/@rhelements/rh-accordion/test/"
+    "test": "../../node_modules/.bin/wct --configFile ../../wct.conf.json elements/rh-accordion/test/"
   },
   "author": {
     "name": "Kyle Buchanan"