Merge remote-tracking branch 'upstream/master'

demo/index.js

@@ -10,22 +10,20 @@ export * from '../src/bundle';
 if (typeof module !== 'undefined' && module.hot) {
   const forEach = Array.prototype.forEach;
 
-  if (window.oldComponentClasses) {
+  module.hot.dispose(() => {
     // Releases component instances of (old) component classes that have been replaced with new ones by HMR
-    window.oldComponentClasses.forEach(Clz => {
-      forEach.call(document.body.querySelectorAll(Clz.options.selectorInit), element => {
-        const instance = Clz.components.get(element);
-        if (instance) {
-          instance.release();
-        }
+    Object.keys(components)
+      .map(key => components[key])
+      .filter(component => typeof component.init === 'function')
+      .forEach(Clz => {
+        forEach.call(document.body.querySelectorAll(Clz.options.selectorInit), element => {
+          const instance = Clz.components.get(element);
+          if (instance) {
+            instance.release();
+          }
+        });
       });
-    });
-  }
-
-  // Preserves component classe refs, that would be replaced replaced with new ones by HMR, to `window`
-  window.oldComponentClasses = Object.keys(components)
-    .map(key => components[key])
-    .filter(component => typeof component.init === 'function');
+  });
 
   module.hot.accept();
 }

docs/contributing.md

@@ -10,7 +10,8 @@ Contributing to carbon-components requires that you can run this repo locally on
 
 ## Class names
 
-Prefix all class names with `bx--`.
+Prefix all class names with `#{$prefix}--` in SCSS, which is replaced with `bx--` by default,
+and design systems inheriting Carbon can override.
 This prefix prevents potential conflicts with class names from the user.
 
 __HTML__
@@ -24,21 +25,21 @@ __HTML__
 __SCSS__
 
 ```scss
-.bx--inline-notification {
+.#{$prefix}--inline-notification {
   ...
 }
 
-.bx--inline-notification__details {
+.#{$prefix}--inline-notification__details {
   ...
 }
 ```
 
-Follow BEM naming convention for classes. Again, the only thing we do differently is prefix all classes with `bx--`.
+Follow BEM naming convention for classes. Again, the only thing we do differently is prefix all classes with `#{$prefix}--`.
 
 ```scss
-.bx--block
-.bx--block__element
-.bx--block--modifier
+.#{$prefix}--block
+.#{$prefix}--block__element
+.#{$prefix}--block--modifier
 ```
 
 ### Start a new `block` or `element`?
@@ -50,16 +51,16 @@ A nested element can use a new block name as long as the styles are independent
   <button class="bx--component-button">Button</button>
 </div>
 ```
-:point_up: The `bx--component-button` class implies that this button has independent styles from its parent.
+:point_up: The `#{$prefix}--component-button` class implies that this button has independent styles from its parent.
 Generally, it's preferred to start a new block.
 
 ### Red Flags
 
 Avoid names with multiple `__element` names:
 
-- :x: `.bx--card__list__item`
-- :white_check_mark: `.bx--card-item`
-- :white_check_mark: `.bx--card__item`
+- :x: `.#{$prefix}--card__list__item`
+- :white_check_mark: `.#{$prefix}--card-item`
+- :white_check_mark: `.#{$prefix}--card__item`
 
 ## Files and folders
 

gulpfile.js

@@ -42,22 +42,19 @@ const del = require('del');
 
 // Test environment
 const Server = require('karma').Server;
-const cloptions = require('minimist')(process.argv.slice(2), {
-  alias: {
-    k: 'keepalive',
-    p: 'port',
-    r: 'rollup',
-  },
-  default: {
-    port: 3000,
-    serverport: 8080,
-  },
-  boolean: ['keepalive', 'rollup'],
-});
+const commander = require('commander');
+
+const assign = v => v;
+const cloptions = commander
+  .option('-k, --keepalive', 'Keeps browser open after first run of Karma test finishes')
+  .option('--name [name]', 'Component name used for aXe testing', assign, '')
+  .option('-p, --port [port]', 'Uses the given port for dev env', assign, 3000)
+  .option('-r, --rollup', 'Uses Rollup for dev env')
+  .option('--serverport [port]', 'Uses the given port for dev env server', assign, 8080)
+  .parse(process.argv);
 
 // Axe A11y Test
 const axe = require('gulp-axe-webdriver');
-const axeArgs = require('minimist')(process.argv.slice(2));
 
 /**
  * BrowserSync
@@ -344,7 +341,7 @@ gulp.task('test:unit', done => {
 });
 
 gulp.task('test:a11y', ['sass:compiled'], done => {
-  const componentName = axeArgs.name === undefined ? undefined : axeArgs.name;
+  const componentName = cloptions.name;
   const options = {
     a11yCheckOptions: {
       rules: {
@@ -357,9 +354,9 @@ gulp.task('test:a11y', ['sass:compiled'], done => {
     showOnlyViolations: true,
     exclude: '.offleft, #flex-col, #flex-row',
     tags: ['wcag2aa', 'wcag2a'],
-    folderOutputReport: componentName === undefined ? 'tests/axe/allHtml' : 'tests/axe',
-    saveOutputIn: componentName === undefined ? `a11y-html.json` : `a11y-${componentName}.json`,
-    urls: componentName === undefined ? ['http://localhost:3000'] : [`http://localhost:3000/components/${componentName}/`],
+    folderOutputReport: !componentName ? 'tests/axe/allHtml' : 'tests/axe',
+    saveOutputIn: !componentName ? `a11y-html.json` : `a11y-${componentName}.json`,
+    urls: !componentName ? ['http://localhost:3000'] : [`http://localhost:3000/component/${componentName}/`],
   };
 
   return axe(options, done);

package.json

@@ -59,8 +59,8 @@
     "browser-sync": "~2.10.0",
     "carbon-addons-cloud": "^1.1.0",
     "carbon-components-react": "^5.8.0",
-    "chai": "^3.5.0",
     "classnames": "^2.2.0",
+    "commander": "^2.13.0",
     "core-js": "^2.4.0",
     "custom-event": "^1.0.0",
     "cz-conventional-changelog": "^1.2.0",
@@ -91,25 +91,24 @@
     "gulp-sourcemaps": "~1.6.0",
     "gulp-uglify": "^2.1.2",
     "gulp-util": "~3.0.7",
+    "html-loader": "^0.5.0",
     "husky": "^0.12.0",
+    "jasmine-core": "^2.9.0",
     "karma": "^2.0.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-coverage": "^1.1.0",
     "karma-firefox-launcher": "^1.0.0",
     "karma-html2js-preprocessor": "^1.1.0",
     "karma-ie-launcher": "^1.0.0",
-    "karma-mocha": "^1.3.0",
-    "karma-mocha-reporter": "^2.2.0",
-    "karma-rollup-preprocessor": "^5.0.0",
+    "karma-jasmine": "^1.1.0",
     "karma-safari-launcher": "^1.0.0",
-    "karma-sinon-chai": "^1.1.0",
     "karma-sourcemap-loader": "~0.3.7",
+    "karma-spec-reporter": "0.0.32",
+    "karma-webpack": "^2.0.0",
     "lolex": "1.4.0",
     "markdown-it": "^8.4.0",
     "merge-stream": "^1.0.0",
     "minimatch": "^3.0.0",
-    "minimist": "~1.2.0",
-    "mocha": "~2.4.4",
     "mock-raf": "^1.0.0",
     "nodemon": "1.9.1",
     "prettier": "^1.7.0",
@@ -125,12 +124,9 @@
     "rollup-plugin-filesize": "^1.2.1",
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-string": "^2.0.0",
     "rollup-plugin-uglify": "^2.0.0",
     "scss-to-json": "1.1.0",
     "semantic-release": "^6.3.2",
-    "sinon": "^2.1.0",
-    "sinon-chai": "^2.9.0",
     "validate-commit-msg": "^2.8.2",
     "vinyl-named": "^1.1.0",
     "webpack": "^3.10.0",

src/components/content-switcher/_content-switcher.scss

@@ -49,6 +49,15 @@
     }
   }
 
+  .#{$prefix}--content-switcher__icon {
+    margin-right: $spacing-xs;
+    fill: currentColor;
+    // need to color any child path or g
+    * {
+      fill: currentColor;
+    }
+  }
+
   .#{$prefix}--content-switcher-btn:not(:last-of-type) {
     border-right: none;
   }

src/components/date-picker/date-picker.js

@@ -27,18 +27,20 @@ function flattenOptions(options) {
  */
 function augmentFlatpickr(calendar) {
   const container = calendar._;
-  if (container.changeEvent) {
-    container._changeEvent = container.changeEvent; // eslint-disable-line no-underscore-dangle
+  if (container) {
+    if (container.changeEvent) {
+      container._changeEvent = container.changeEvent; // eslint-disable-line no-underscore-dangle
+    }
+    Object.defineProperty(container, 'changeEvent', {
+      get() {
+        return this._changeEvent;
+      },
+      set(value) {
+        value.detail = Object.assign(value.detail || {}, { fromFlatpickr: true });
+        this._changeEvent = value;
+      },
+    });
   }
-  Object.defineProperty(container, 'changeEvent', {
-    get() {
-      return this._changeEvent;
-    },
-    set(value) {
-      value.detail = Object.assign(value.detail || {}, { fromFlatpickr: true });
-      this._changeEvent = value;
-    },
-  });
   return calendar;
 }
 

src/components/file-uploader/file-uploader.js

@@ -23,11 +23,11 @@ class FileUploader extends mixin(createComponent, initComponentBySearch, evented
     this.container = this.element.querySelector(this.options.selectorContainer);
 
     if (!this.input) {
-      throw new Error('Cannot find the file input box.');
+      throw new TypeError('Cannot find the file input box.');
     }
 
     if (!this.container) {
-      throw new Error('Cannot find the file names container.');
+      throw new TypeError('Cannot find the file names container.');
     }
 
     this.inputId = this.input.getAttribute('id');

src/components/floating-menu/floating-menu.js

@@ -49,8 +49,9 @@ class FloatingMenu extends mixin(createComponent, eventedShowHideState, trackBlu
   handleBlur(event) {
     if (this.element.classList.contains(this.options.classShown)) {
       this.changeState('hidden', getLaunchingDetails(event));
-      if (this.element.contains(event.relatedTarget) && event.target !== this.options.refNode) {
-        this.options.refNode.focus();
+      const { refNode } = this.options;
+      if (this.element.contains(event.relatedTarget) && refNode && event.target !== refNode) {
+        refNode.focus();
       }
     }
   }
@@ -162,6 +163,9 @@ class FloatingMenu extends mixin(createComponent, eventedShowHideState, trackBlu
   _changeState(state, detail, callback) {
     const shown = state === 'shown';
     const { refNode, classShown, classRefShown } = this.options;
+    if (!refNode) {
+      throw new TypeError('Cannot find the refernce node for changing the style.');
+    }
     this.element.classList.toggle(classShown, shown);
     if (classRefShown) {
       refNode.classList.toggle(classRefShown, shown);

src/components/interior-left-nav/interior-left-nav-keep-open.html

@@ -1,27 +1,27 @@
-<nav role="navigation" aria-label="Interior Left Navigation" data-interior-left-nav class="bx--interior-left-nav bx--interior-left-nav--collapseable"
+<nav role="navigation" aria-label="Interior Left Navigation Open" data-interior-left-nav class="bx--interior-left-nav bx--interior-left-nav--collapseable"
   data-keep-open="true">
-  <ul role="menubar" class="left-nav-list" data-interior-left-nav-list aria-hidden="false">
+  <ul role="menubar" aria-label="left nav list" class="left-nav-list" data-interior-left-nav-list aria-hidden="false">
     <li role="menuitem" tabindex="0" class="left-nav-list__item" data-interior-left-nav-item>
       <a class="left-nav-list__item-link">
-          Example Item 1
-        </a>
+        Example Item 1
+      </a>
     </li>
     <li role="menuitem" tabindex="0" class="left-nav-list__item" data-interior-left-nav-item>
       <a class="left-nav-list__item-link">
-          Example Item 2
-        </a>
+        Example Item 2
+      </a>
     </li>
     <li role="menuitem" tabindex="0" class="left-nav-list__item left-nav-list__item--has-children" data-interior-left-nav-item
       data-interior-left-nav-with-children>
       <a class="left-nav-list__item-link">
-          Example Item 3
-          <div class="left-nav-list__item-icon">
-            <svg class="bx--interior-left-nav__icon" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-              <path d="M10 0L5 5 0 0z"></path>
-            </svg>
-          </div>
-        </a>
-      <ul role="menu" aria-hidden="true" class="left-nav-list left-nav-list--nested" data-interior-left-nav-nested-list>
+        Example Item 3
+        <div class="left-nav-list__item-icon">
+          <svg class="bx--interior-left-nav__icon" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+            <path d="M10 0L5 5 0 0z"></path>
+          </svg>
+        </div>
+      </a>
+      <ul role="menu" aria-hidden="true" aria-label="nested left nav list" class="left-nav-list left-nav-list--nested" data-interior-left-nav-nested-list>
         <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
           <a href="#example-item-1A" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 1A</a>
         </li>
@@ -39,14 +39,14 @@
     <li role="menuitem" tabindex="0" class="left-nav-list__item left-nav-list__item--has-children" data-interior-left-nav-item
       data-interior-left-nav-with-children>
       <a class="left-nav-list__item-link">
-          Example Item 4
-          <div class="left-nav-list__item-icon">
-            <svg class="bx--interior-left-nav__icon" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-              <path d="M10 0L5 5 0 0z"></path>
-            </svg>
-          </div>
-        </a>
-      <ul role="menu" aria-hidden="true" class="left-nav-list left-nav-list--nested" data-interior-left-nav-nested-list>
+        Example Item 4
+        <div class="left-nav-list__item-icon">
+          <svg class="bx--interior-left-nav__icon" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+            <path d="M10 0L5 5 0 0z"></path>
+          </svg>
+        </div>
+      </a>
+      <ul role="menu" aria-hidden="true" aria-label="nested left nav list" class="left-nav-list left-nav-list--nested" data-interior-left-nav-nested-list>
         <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
           <a href="#example-item-2A" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 2A</a>
         </li>
@@ -64,7 +64,7 @@
   </ul>
 
   <div class="bx--interior-left-nav-collapse" data-interior-left-nav-collapse>
-    <a class="bx--interior-left-nav-collapse__link" href="#">
+    <a class="bx--interior-left-nav-collapse__link" href="#" aria-label="collapse nav pane">
       <svg class="bx--interior-left-nav-collapse__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd" data-interior-left-nav-arrow>
         <title>Collapse nav pane</title>
         <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>

src/components/interior-left-nav/interior-left-nav.html

@@ -1,5 +1,5 @@
 <nav role="navigation" aria-label="Interior Left Navigation" data-interior-left-nav class="bx--interior-left-nav bx--interior-left-nav--collapseable">
-  <ul role="menubar" class="left-nav-list" data-interior-left-nav-list aria-hidden="false">
+  <ul role="menubar" class="left-nav-list" data-interior-left-nav-list aria-label="left nav list" aria-hidden="false">
     <li role="menuitem" tabindex="0" class="left-nav-list__item" data-interior-left-nav-item>
       <a class="left-nav-list__item-link">
         Example Item 1
@@ -20,7 +20,7 @@
           </svg>
         </div>
       </a>
-      <ul role="menu" aria-hidden="true" class="left-nav-list left-nav-list--nested" data-interior-left-nav-nested-list>
+      <ul role="menu" aria-hidden="true" aria-label="nested left nav list" class="left-nav-list left-nav-list--nested" data-interior-left-nav-nested-list>
         <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
           <a href="#example-item-1A" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 1A</a>
         </li>
@@ -45,7 +45,7 @@
           </svg>
         </div>
       </a>
-      <ul role="menu" aria-hidden="true" class="left-nav-list left-nav-list--nested" data-interior-left-nav-nested-list>
+      <ul role="menu" aria-hidden="true" class="left-nav-list left-nav-list--nested" aria-label="nested left nav list" data-interior-left-nav-nested-list>
         <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
           <a href="#example-item-2A" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 2A</a>
         </li>
@@ -63,7 +63,7 @@
   </ul>
 
   <div class="bx--interior-left-nav-collapse" data-interior-left-nav-collapse>
-    <a class="bx--interior-left-nav-collapse__link" href="#">
+    <a class="bx--interior-left-nav-collapse__link" href="#" aria-label="collapse nav pane">
       <svg class="bx--interior-left-nav-collapse__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd" data-interior-left-nav-arrow>
         <title>Collapse nav pane</title>
         <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>