build: update to use demo build

README.md

@@ -151,3 +151,7 @@ Open [localhost:8000](http://localhost:8000/)
 
 ### Testing
 Automated tests are required for every Auro component. See `.\test\auro-button.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
+
+### Demo deployment
+
+To deploy a demo version of the component for review, run `npm run demo:build` to create a `./build` directory that can be pushed to any static server.

build/demo/demo.md

@@ -0,0 +1,220 @@
+# Button
+
+The Auro Design System fully supports a wide range of buttons styles and use cases. The following examples illustrate common button uses followed up by code examples.
+
+See [install instructions](https://www.alaskaair.com/components/auro/button/install) for more information as how to install and full API for the `auro-button` Auro base element.
+
+Illustrated in this example is a stand-alone use of `auro-button`.
+
+## Button use cases
+
+The `auro-button` element should be used in situations where users may:
+
+* submit a form
+* begin a new task
+* trigger a new UI element to appear on the page
+* specify a new or next step in a process
+
+## Buttons are not Hyperlinks
+
+In cases were the action of the button would not fit the criteria above, it is most likely a Hyperlink. In that situation it is recommended that the [auro-hyperlink](https://www.alaskaair.com/components/auro/hyperlink) element be used.
+
+## Default types
+
+<div class="exampleWrapper">
+  <auro-button>Primary</auro-button>
+  <auro-button disabled>Primary</auro-button>
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+  ```html
+  <auro-button>Primary</auro-button>
+  <auro-button disabled>Primary</auro-button>
+  ```
+
+</auro-accordion>
+
+<div class="exampleWrapper">
+  <auro-button secondary>Secondary</auro-button>
+  <auro-button secondary disabled>Secondary</auro-button>
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+  ```html
+  <auro-button secondary>Secondary</auro-button>
+  <auro-button secondary disabled>Secondary</auro-button>
+  ```
+
+</auro-accordion>
+
+<div class="exampleWrapper">
+  <auro-button tertiary>Tertiary</auro-button>
+  <auro-button tertiary disabled>Tertiary</auro-button>
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+  ```html
+  <auro-button tertiary>Tertiary</auro-button>
+  <auro-button tertiary disabled>Tertiary</auro-button>
+  ```
+
+</auro-accordion>
+
+For default spacing of elements in a row, use the [.auro_containedButtons](https://alaskaairlines.github.io/WebCoreStyleSheets/#utility-auro-css-#{$scope}.auro_containedButtons) predefined selector in the [WC Style Sheets](https://auro.alaskaair.com/webcorestylesheets) lib.
+
+<div class="exampleWrapper auro_containedButtons">
+  <auro-button>Primary</auro-button>
+  <auro-button secondary>Secondary</auro-button>
+  <auro-button tertiary>Tertiary</auro-button>
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+  ```html
+  <div class="exampleWrapper auro_containedButtons">
+    <auro-button>Primary</auro-button>
+    <auro-button secondary>Secondary</auro-button>
+    <auro-button tertiary>Tertiary</auro-button>
+  </div>
+  ```
+
+</auro-accordion>
+
+## Icon support
+
+Adding icons to the auro-button component is as easy as nesting any other HTML. The [auro-icon component](https://www.alaskaair.com/components/auro/icon) has access to all the icons listed in the [Auro Icons library](https://www.alaskaair.com/icons/usage) for quick and easy use.
+
+Be sure to use the `customColor` attribute on the auro-icon component to allow colors set in your parent element to pass through to the icon.
+
+
+<div class="exampleWrapper auro_containedButtons">
+  <auro-button>
+    Activate WiFi
+    <auro-icon customColor category="in-flight" name="wifi"></auro-icon>
+  </auro-button>
+
+  <auro-button secondary>
+    <auro-icon customcolor category="interface" name="arrow-left"></auro-icon>
+    Previous action
+  </auro-button>
+
+  <auro-button tertiary>
+    Love this ...
+    <auro-icon customcolor category="interface" name="heart-filled"></auro-icon>
+  </auro-button>
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+  ```html
+  <auro-button>
+    Activate WiFi
+    <auro-icon customColor category="in-flight" name="wifi"></auro-icon>
+  </auro-button>
+
+  <auro-button secondary>
+    <auro-icon customcolor category="interface" name="arrow-left"></auro-icon>
+    Previous action
+  </auro-button>
+
+  <auro-button tertiary>
+    Love this ...
+    <auro-icon customcolor category="interface" name="heart-filled"></auro-icon>
+  </auro-button>
+  ```
+
+</auro-accordion>
+
+## Auro Button - fluid
+
+<div class="exampleWrapper">
+  <auro-button fluid>Primary</auro-button>
+  <auro-button secondary fluid>Secondary</auro-button>
+  <auro-button tertiary fluid>Tertiary</auro-button>
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+  ```html
+  <auro-button fluid>Primary</auro-button>
+  <auro-button secondary fluid>Secondary</auro-button>
+  <auro-button tertiary fluid>Tertiary</auro-button>
+  ```
+
+</auro-accordion>
+
+## Auro Button - onDark
+
+<div class="exampleWrapper--ondark auro_containedButtons">
+  <auro-button ondark>Primary</auro-button>
+  <auro-button ondark disabled>Primary</auro-button>
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+  ```html
+  <auro-button ondark>Primary</auro-button>
+  <auro-button ondark disabled>Primary</auro-button>
+  ```
+
+</auro-accordion>
+
+<div class="exampleWrapper--ondark auro_containedButtons">
+  <auro-button secondary ondark>Secondary</auro-button>
+  <auro-button secondary ondark disabled>Secondary</auro-button>
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+  ```html
+  <auro-button secondary ondark>Secondary</auro-button>
+  <auro-button secondary ondark disabled>Secondary</auro-button>
+
+  ```
+
+</auro-accordion>
+
+<div class="exampleWrapper--ondark auro_containedButtons">
+  <auro-button tertiary ondark>Tertiary</auro-button>
+  <auro-button tertiary ondark disabled>Tertiary</auro-button>
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+  ```html
+  <auro-button tertiary ondark>Tertiary</auro-button>
+  <auro-button tertiary ondark disabled>Tertiary</auro-button>
+
+  ```
+
+</auro-accordion>
+
+## Auro Button - pass function to button
+
+<div class="exampleWrapper auro_containedButtons">
+  <auro-button onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
+  <auro-button disabled onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+  ```html
+  <auro-button onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
+  <auro-button disabled onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
+
+  ```
+
+</auro-accordion>

build/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Generator | [namespace]-[name] custom element</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://unpkg.com/prismjs@latest/themes/prism.css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/style.css" />
+  </head>
+  <body>
+    <main></main>
+
+    <script type="module">
+      import 'https://unpkg.com/marked@latest/marked.min.js';
+      import 'https://unpkg.com/prismjs@latest/prism.js';
+      fetch('/demo/demo.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+        });
+    </script>
+    <script type="module" src="auro-button__bundled.js"></script>
+    <script src="https://unpkg.com/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://unpkg.com/@alaskaairux/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
+    <script type="text/javascript">
+      console.log('hello');
+    </script>
+  </body>
+</html>

demo/index.html

@@ -7,16 +7,16 @@
     <link
       rel="stylesheet"
       type="text/css"
-      href="../node_modules/prismjs/themes/prism.css"
+      href="https://unpkg.com/prismjs@latest/themes/prism.css"
     />
     <link rel="stylesheet" type="text/css" href="css/style.css" />
   </head>
   <body>
     <main></main>
 
     <script type="module">
-      import 'marked/marked.min.js';
-      import 'prismjs';
+      import 'https://unpkg.com/marked@latest/marked.min.js';
+      import 'https://unpkg.com/prismjs@latest/prism.js';
       fetch('/demo/demo.md')
         .then((response) => response.text())
         .then((text) => {
@@ -26,7 +26,6 @@
         });
     </script>
     <script type="module" src="../src/auro-button.js"></script>
-    <script type="module" src="../src/auro-button-light.js"></script>
     <script src="https://unpkg.com/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://unpkg.com/@alaskaairux/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
     <script type="text/javascript">

package.json

@@ -117,7 +117,13 @@
     "sassBuild:demo": "node-sass ./demo/sass/ --output ./demo/css/",
     "sassBuild:component": "node-sass ./src/ --output ./src/",
     "sassBuild:watch": "nodemon -e scss --watch src --exec npm run sassBuild:dev",
-    "postCss:component": "node ./scripts/postCss.js"
+    "postCss:component": "node ./scripts/postCss.js",
+    "demo:rmBuild": "rm -rf ./build",
+    "demo:newBuild": "mkdir ./build && mkdir ./build/css && mkdir ./build/demo",
+    "demo:copyDemo": "copyfiles -u 1 -V './demo/demo.md' ./build/demo",
+    "demo:copyIndex": "copyfiles -u 1 -V './demo/index.html' ./build",
+    "demo:updateIndex": "node ./scripts/prepForBuild",
+    "demo:build": "npm-run-all ciBuild demo:rmBuild demo:newBuild demo:copyIndex demo:copyDemo demo:updateIndex"
   },
   "husky": {
     "hooks": {

scripts/prepForBuild.js

@@ -0,0 +1,31 @@
+const fs = require('fs');
+const bundle = 'auro-button__bundled.js';
+const indexFile = './build/index.html';
+
+// File destination.txt will be created or overwritten by default.
+let copyFiles = async function() {
+  fs.copyFile(`./dist/${bundle}`, `./build/${bundle}`, (err) => {
+    if (err) throw err;
+    console.log(`${bundle} was copied to ./build dir`);
+  });
+
+  fs.copyFile(`./demo/css/style.css`, `./build/css/style.css`, (err) => {
+    if (err) throw err;
+    console.log(`CSS was copied to ./build dir`);
+  });
+}
+
+// Edit string in new index.html file
+fs.readFile(indexFile, 'utf8', function (err,data) {
+  copyFiles();
+
+  if (err) {
+    return console.log(err);
+  }
+
+  const element = data.replace(`../src/auro-button.js`, `auro-button__bundled.js`);
+
+  fs.writeFile(indexFile, element, 'utf8', function (err) {
+     if (err) return console.log(err);
+  });
+});