docs(migration-guides): recommend inline svg (#141)

* docs(accordion): update migration guide, recommend inline svg

* docs(button): migration guide mentions inline svg

* docs(checkbox): migration guide mentions inline svg

* test(copy-button): update HTML string for unit tests

src/components/accordion/migrate-to-7.x.md

@@ -1,6 +1,15 @@
 ### HTML
 
-Updating HTML pertains mainly to SVG icon paths. It's recommended to use bluemix-icons locally in your project. 
+Updating HTML pertains mainly to SVG icon paths. 
+It's now recommended to use inline SVG icons. 
+
+```html
+<svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
+  <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+</svg>
+```
+
+But if you're going to make use of carbon-icons.svg, it's recommended to use the sprite svg file locally in your project. 
 
 Update `<use xlink:href>` to a local path of bluemix-icons.svg, which should look something like this:
 

src/components/button/README.md

@@ -26,15 +26,28 @@ Use these modifiers with `.bx--btn` class.
 
 #### Using icons with buttons
 
-All buttons can use icons. 
+All buttons can use icons. It's recommended to inline SVG icons when possible.
 Simply add the appropriate `<svg>` to the button HTML with the `bx--btn__icon` class.
+You can also include `<title>` for better accessibility to describe what the button does.
+
+```html
+<button class="bx--btn bx--btn--secondary" type="button">
+  Secondary
+  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+    <title>add a new connection to your instance</title>
+    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
+  </svg>
+</button>
+```
+
 Be aware that only `--glyph` icons should be used with buttons.
+Here's an example using `carbon-icons.svg`.
 
 ```html
 <button class="bx--btn bx--btn--secondary" type="button">
   Secondary
   <svg class="bx--btn__icon">
-    <use xlink:href="/carbon-icons/bluemix-icons.svg#add--glyph"></use>
+    <use xlink:href="/carbon-icons/carbon-icons.svg#add--glyph"></use>
   </svg>
 </button>
 ```

src/components/checkbox/README.md

@@ -20,8 +20,8 @@ With `input` and `label` as siblings
   <input id="bx--checkbox" class="bx--checkbox" type="checkbox" value="green" name="checkbox">
   <label for="bx--checkbox" class="bx--checkbox-label">
     <span class="bx--checkbox-appearance">
-      <svg class="bx--checkbox-checkmark">
-        <use xlink:href="/carbon-icons/bluemix-icons.svg#checkmark"></use>
+      <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+        <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
       </svg>
     </span>
     Checkbox (input + label)
@@ -36,15 +36,17 @@ With `label` wrapping `input`
   <label class="bx--checkbox-label">
     <input class="bx--checkbox" type="checkbox" value="yellow" name="checkbox">
     <span class="bx--checkbox-appearance">
-      <svg class="bx--checkbox-checkmark">
-        <use xlink:href="/carbon-icons/bluemix-icons.svg#checkmark"></use>
+      <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
+        <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
       </svg>
     </span>
     <span class="bx--checkbox-label-text">Checkbox (label > input)</span>
   </label>
 </div>
 ```
 
+Also note that it's now recommended to use inline SVG when possible.
+
 #### Fieldset and Legend
 
 As a best practice, groups of checkboxes should make use of `<fieldset>` and `<legend>` (see Form for details).

tests/spec/copy-button_spec.js

@@ -4,8 +4,8 @@ import CopyButton from '../../src/components/copy-button/copy-button';
 const HTML = `
 <button data-copy-btn class="bx--btn bx--btn--primary bx--btn--copy bx--btn--sm">
   Copy button
-  <svg class="bx--btn__icon">
-    <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--add--glyph"></use>
+  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
   </svg>
   <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
 </button>
@@ -47,19 +47,23 @@ describe('Test Copy Button', function () {
     });
 
     it('Should not show the feedback tooltip before click', function () {
-      expect(feedbackTooltip.classList.contains('bx--btn--copy__feedback--displayed')).to.be.false;
+      expect(feedbackTooltip.classList.contains('bx--btn--copy__feedback--displayed')).to.be
+        .false;
     });
 
     it('Should show the feedback tooltip on click', function () {
       element.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(feedbackTooltip.classList.contains('bx--btn--copy__feedback--displayed')).to.be.true;
+      expect(feedbackTooltip.classList.contains('bx--btn--copy__feedback--displayed')).to.be
+        .true;
     });
 
     it('Should hide the feedback tooltip after specified timeout value', function () {
       element.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      expect(feedbackTooltip.classList.contains('bx--btn--copy__feedback--displayed')).to.be.true;
+      expect(feedbackTooltip.classList.contains('bx--btn--copy__feedback--displayed')).to.be
+        .true;
       clock.tick(2000);
-      expect(feedbackTooltip.classList.contains('bx--btn--copy__feedback--displayed')).to.be.false;
+      expect(feedbackTooltip.classList.contains('bx--btn--copy__feedback--displayed')).to.be
+        .false;
     });
 
     afterEach(function () {