Add HTML for form input examples

.gitignore

@@ -38,3 +38,6 @@ jspm_packages
 
 # Ignore .DS_store file
 .DS_Store
+
+# Privacy
+.env

.sample-env

@@ -0,0 +1,6 @@
+OPTIMIZELY_PRODUCTION=1509982184
+OPTIMIZELY_STAGING=3687732782
+SEGMENT_PRODUCTION=470f745508
+SEGMENT_STAGING=qtm71bghig
+S3_ACCESSID=AKIAIJDQGZZGV3GI3XHA
+S3_KEY=iezgLuS4y+otDs6cwZ0JqkbBmKliaAfMAdpFb+z9

app/assets/js/SpriteFetcher.js

@@ -0,0 +1,66 @@
+/**
+ * @overview Fetch an SVG spritesheet and append it to the DOM. This allows us
+ * to use `<use>` elements and target sprites with CSS in all modern browsers.
+ * @module SpriteFetcher.js
+ * @TODO: Use the new `fetch` API once Polyfill.io polyfills for ie9 and
+ * Safari correctly.
+ */
+
+export const SpriteFetcher = {
+  container: null,
+
+  /**
+   * Add the container and SVG spritesheet to the page
+   * @param {string} spriteUrl - URL to a spritesheet
+   * @returns {void}
+  */
+  init(spriteUrl) {
+    this.initContainer();
+    this.inline(spriteUrl);
+  },
+
+  /**
+   * Create a container element to hold the spritesheet
+   * @returns {void}
+  */
+  initContainer() {
+    this.container = document.createElement(`div`);
+    this.container.classList.add(`sprite-container`, `is-hidden`);
+    this.container.id = `sprite-container`;
+
+    // Insert container as the first child of the body element
+    document.body.insertBefore(this.container, window.document.body.firstChild);
+  },
+
+  /**
+   * Fetch a spritesheet and insert into the container element
+   * @param {string} spriteUrl - URL to a spritesheet
+   * @returns {void}
+  */
+  inline(spriteUrl) {
+    let ajax;
+
+    // For IE9, use XDomainRequest. Set event handlers and use setTimeout to
+    // avoid intermittent failure (http://stackoverflow.com/a/18392382/530653).
+    if (window.XDomainRequest) {
+      ajax = new XDomainRequest();
+      ajax.onprogress = () => { return; };
+      ajax.ontimeout = () => { return; };
+      ajax.onerror = () => { return; };
+    }
+    // For standards browsers use XMLHttpRequest
+    else {
+      ajax = new XMLHttpRequest();
+    }
+
+    ajax.onload = () => {
+      this.container.innerHTML += ajax.responseText;
+    };
+
+    ajax.open(`GET`, spriteUrl);
+
+    setTimeout(function() {
+      ajax.send();
+    }, 0);
+  },
+};

app/assets/js/pages/BasePage.js

@@ -8,8 +8,8 @@
 import feature from 'viljamis/feature.js';
 import attachFastClick from 'fastclick';
 import pepjs from 'pepjs';
-import svg4everybody from 'svg4everybody';
 import { ImgixSettings } from 'node_modules/@casper/nightshade-core/src/media/ImgixSettings';
+import { SpriteFetcher } from 'assets/js/SpriteFetcher.js';
 
 export const BasePage = {
 
@@ -25,8 +25,7 @@ export const BasePage = {
       autoInsertCSSBestPractices: false,
     });
 
-    // Initialize svg4everybody IE polyfill
-    svg4everybody();
+    SpriteFetcher.init('/node_modules/@casper/nightshade-icons/dist/storefront/sprite.symbol.svg');
 
     /**
      * Checks for browser support of the `touch-action` CSS property and if so,

app/assets/scss/application.scss

@@ -28,12 +28,14 @@
 @import './node_modules/@casper/nightshade-core/src/links/index';
 @import './node_modules/@casper/nightshade-core/src/accordion/index';
 @import './node_modules/@casper/nightshade-core/src/breadcrumbs/index';
+@import './node_modules/@casper/nightshade-core/src/scrollto_nav/index';
 
 // Local sass files that are app specific
 @import 'styleguide/index';
 @import 'styleguide/home';
 @import 'styleguide/layout';
 
 @import './app/views/icons/base';
+@import './app/views/breadcrumbs/base';
 @import './app/views/color/index';
 @import './app/views/layout/pattern';

app/assets/scss/styleguide/_nav.scss

@@ -4,7 +4,7 @@
  * @overview Nav sidebar styles
  */
 
-.nav--main {
+.nav-main {
   position: fixed;
   z-index: 2; // @todo use zindex layer value
   top: 0;

app/views/beacon/index.html

@@ -6,6 +6,6 @@
 
 {% block pattern_content %}
 
-  {{ beacon('waypoint') }}
+  {{ beacon(href='#') }}
 
 {% endblock %}

app/views/breadcrumbs/_base.scss

@@ -0,0 +1,9 @@
+/**
+ * @file Breadcrumbs macro example
+ * @overview Adds base styling to show the footer breadcrumbs
+ * @module Breadcrumbs
+ */
+.footer-breadcrumbs-container {
+  background-color: color(primary);
+  padding: 20px;
+}

app/views/breadcrumbs/index.html

@@ -6,11 +6,11 @@
 
 {% set mattress_data = [
   {
-    content: "Mattress",
+    content: "MATTRESS",
     href: "#"
   },
   {
-    content: "Full Mattress",
+    content: "FULL MATTRESS",
     href: "#"
   }
   ]
@@ -25,6 +25,8 @@
   <br>
 
   {# Breadcrumbs with a logo #}
-  {{ breadcrumbs(mattress_data, logo='true') }}
+  <div class="footer-breadcrumbs-container">
+    {{ breadcrumbs(mattress_data, footer='true') }}
+  </div>
 
 {% endblock %}

app/views/color/documentation.md

@@ -0,0 +1,9 @@
+## Using Colors
+
+All colors should be declared using the [Accoutrement](https://github.com/oddbird/accoutrement-color) `color()` function, and in most cases specify a color name from our map, e.g `background: color(dark-background);`. Avoid using explicit HEX values.
+
+Colors are defined in our [color config](https://github.com/CasperSleep/nightshade-core/blob/v2.0.0-dev/src/color/lib/config.json) JSON file, which is imported and converted to a Sass map. Any global colors, or colors shared by multiple modules should be added to this object. Run `gulp colors-config` to re-generate the map.
+
+One-off colors that are specific to a given module should be defined in a `_config.scss` partial, that is imported at to the top of that module's `_index.scss`. These should also be declared using the `color()` function, e.g `color: color($custom-color);`.
+
+Color stacks are defined by mixing a base color with another color, and defining the interval steps for each shade in the stack (see our [color helpers](https://github.com/CasperSleep/nightshade-core/blob/v2.0.0-dev/src/color/_helpers.scss)). Avoid using stack values explicitly unless there is no pre-mapped color name suitable, e.g. use `color(light-background)` rather than `color(gray--light9)`.

app/views/color/index.html

@@ -42,6 +42,11 @@
       {{ color_swatch('accent--light2') }}
     </li>
   </ul>
+
+  <div class="color-documentation">
+    {% markdown "color/documentation.md" %}
+  </div>
+
   <div id="swatch-stacks"></div>
 </div>
 {% endblock %}

app/views/forms/index.html

@@ -6,6 +6,58 @@
 
 {% block pattern_content %}
 
+  <h3>Standard text input</h3>
+  <div class="form-field">
+    <label class="form-label" for="">Required Text Input</label>
+    <input type="text" class="form-input required" name="" id="" placeholder="Required Text Input">
+  </div>
+
+  <h3>Phone number input</h3>
+  <div class="form-field">
+    <label class="form-label" for="">Phone Number</label>
+    <input type="tel" class="form-input js-form-input-phone" name="" id="" autocomplete="tel-national" placeholder="Phone Number">
+  </div>
+
+  <h3>Number input</h3>
+  <div class="form-field">
+    <label class="form-label" for="">Number</label>
+    <input type="tel" class="form-input" name="" id="" pattern="\d*" x-inputmode="numeric" inputmode="numeric" placeholder="Number">
+  </div>
+
+  <h3>Credit card input</h3>
+  <div class="form-field">
+    <label class="form-label" for="">Credit Card</label>
+    <input type="tel" class="form-input js-form-input-card-number cardNumber" name="" id="" autocomplete="cc-number" maxlength="19" pattern="d+" inputmode="numeric" x-inputmode="numeric" placeholder="Credit Card">
+  </div>
+
+  <h3>Email input</h3>
+  <div class="form-field">
+    <label class="form-label" for="">Email</label>
+    <input type="email" class="form-input" name="" id="" inputmode="email" x-inputmode="email" placeholder="Email">
+  </div>
+
+  <h3>Password input</h3>
+  <div class="form-field">
+    <label class="form-label" for="">Password</label>
+    <input type="password" class="form-input" name="" id="" placeholder="Password">
+  </div>
+
+  <h3>Textarea</h3>
+  <div class="form-field">
+    <label class="form-label" for="">Textarea</label>
+    <textarea class="form-input form-input--textarea" name="" id=""></textarea>
+  </div>
+
+  <h3>Disabled button</h3>
+  <p>
+    <button type="button" data-button="primary" disabled>Disabled Button</button>
+  </p>
+
+  <h3>Loading button</h3>
+  <p>
+    <button type="button" data-button="primary" class="is-loading">Loading Button</button>
+  </p>
+
   <h3>Input group with a text button</h3>
   {{ input_group(
     'basic-input-group',
@@ -23,3 +75,9 @@ <h3>Search input group</h3>
   ) }}
 
 {% endblock %}
+
+{% block inline_js %}
+  System.import('nightshade-core/src/forms/Inputs.js').then( function(mod) {
+    mod.Inputs.init();
+  } );
+{% endblock %}

app/views/icons/_base.scss

@@ -19,3 +19,11 @@
   font-size: 11px;
   margin-top: 1.5em;
 }
+
+// These svgs are exported with a stroke and need to be colored by the
+// stroke attribute in scss
+// @TODO Standardize icons to use fill
+[data-icon="arrow-circle"],
+[data-icon="search"] {
+  stroke: color(black);
+}

app/views/layout/_base_layout.html

@@ -38,7 +38,6 @@
       {% block body_content %}{% endblock %}
     </div>
 
-    <script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>
     <script src="/jspm_packages/system.js"></script>
     <script src="/systemjs_config.js"></script>
     {% block scripts %}{% endblock %}

app/views/layout/_nightshade_layout.html

@@ -4,6 +4,8 @@
 
 {% block title %}{{ page_title }} | Nightshade Design System{% endblock %}
 
+{% set favicon_path = '/assets/img/favicon.ico' %}
+
 {% block base_styles %}
 <link href="/dist/assets/css/application.css" media="screen" rel="stylesheet">
 {% endblock %}
@@ -16,7 +18,7 @@
     <h1 class="logo heading--tertiary-light"><a href="/">Nightshade Design System</a></h1>
   </header>
 
-  <nav class="nav--main is-invisible" id="nav-main" role="navigation" aria-expanded="false">
+  <nav class="nav-main is-invisible" id="nav-main" role="navigation" aria-expanded="false">
 
     <header class="nav-header">
       <h3 class="nav-header-title heading--tertiary-light">Nightshade <span class="is-hidden">Table of Contents</span></h3>
@@ -57,7 +59,7 @@ <h3 class="nav-header-title heading--tertiary-light">Nightshade <span class="is-
           <li><a class="nav-link" href="/forms">Forms</a></li>
           <li><a class="nav-link" href="/accordion">Accordion</a></li>
           <li><a class="nav-link" href="/breadcrumbs">Breadcrumbs</a></li>
-          <li><a class="nav-link" href="/pages/landing.html">Credibility Landing</a></li>
+          <li><a class="nav-link" href="/scrollto-nav">ScrollTo Nav</a></li>
         </ul>
       </li>
     </ul>