fix(readme): update migration guides to differentiate between old / new (#37)

* fix(readme): update migration guides to differentiate between old / new

* docs(migration): update paths

Author: tw15egan

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

@@ -14,8 +14,14 @@ For more details on installing and using bluemix-icons, see install and usage gu
 
 ### SCSS
 
-The `_accordion.scss` file is now located at __src/components/accordion/_accordion.scss__. You'll need to update any `@import` statements for this file to reflect this change.
+The `_accordion.scss` file is now located at `src/components/accordion/_accordion.scss`. You'll need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/accordion/accordion';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/accordion/accordion';
 ```

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

@@ -4,10 +4,14 @@ The `bx--breadcrumb--lg` modifier class has been removed in `7.x` and is no long
 
 ### SCSS
 
-The `_breadcrumb.scss` file is now located at __src/components/breadcrumb/_breadcrumb.scss__. You will need to update any `@import` statements for this file to reflect this change.
+The `_breadcrumb.scss` file is now located at `src/components/breadcrumb/_breadcrumb.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
 ```scss
-@import 'path_to_node_modules/@console/bluemix-components/src/components/breadcrumb/breadcrumb';
+@import 'path_to_node_modules/carbon-components/src/components/breadcrumb/breadcrumb';
 ```
 
-
+**Old**: 
+```scss
+@import 'path_to_node_modules/@console/bluemix-components/src/components/breadcrumb/breadcrumb';
+```

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

@@ -1,7 +1,13 @@
 ### SCSS
 
-The `_button.scss` file is now located at __src/components/button/_button.scss__. You will need to update any `@import` statements for this file to reflect this change.
+The `_button.scss` file is now located at `src/components/button/_button.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/button/button';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/button/button';
 ```

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

@@ -4,8 +4,14 @@ The various card HTML variations of previous versions are now replaced by two si
 
 ### SCSS
 
-The `_card.scss` file is now located at __src/components/card/card.scss__. You will need to update any `@import` statements for this file to reflect this change.
+The `_card.scss` file is now located at `src/components/card/_card.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/card/card';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/card/card';
 ```

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

@@ -5,8 +5,14 @@ All checkboxes must use SVG icons to ensure browser compatibility.
 
 ### SCSS
 
-The `_checkbox.scss` file is now located in __src/components/checkbox__. You'll need to update any `@import` statements for this file to reflect this change.
+The `_checkbox.scss` file is now located in `src/components/checkbox/_checkbox.scss`. You'll need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/checkbox/checkbox';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/checkbox/checkbox';
 ```

src/components/code-snippet/migrate-to-7.x.md

@@ -4,8 +4,14 @@ No changes.
 
 ### SCSS
 
-The `_code-snippet.scss` file is now located at __src/components/code-snippet/_code-snippet.scss__. You will need to update any `@import` statements for this file to reflect this change.
+The `_code-snippet.scss` file is now located at `src/components/code-snippet/_code-snippet.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/code-snippet/code-snippet';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/code-snippet/code-snippet';
 ```

src/components/content-switcher/migrate-to-7.x.md

@@ -13,8 +13,14 @@ Use the smaller, simpler HTML for content-switcher from now on:
 
 ### SCSS
 
-The `_content-switcher.scss` file is now located at __src/components/content-switcher/_content-switcher.scss__. You will need to update any `@import` statements for this file to reflect this change.
+The `_content-switcher.scss` file is now located at `src/components/content-switcher/_content-switcher.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/content-switcher/content-switcher';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/content-switcher/content-switcher';
 ```

src/components/data-table/migrate-to-7.x.md

@@ -4,8 +4,14 @@ Main changes to HTML are for changes to Overflow Menu, Checkbox and icons that a
 
 ### SCSS
 
-The `_data-table.scss` file is now located at __src/components/data-table/_data-table.scss__. You will need to update any `@import` statements for this file to reflect this change.
+The `_data-table.scss` file is now located at `src/components/data-table/_data-table.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/data-table/data-table';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/data-table/data-table';
 ```

src/components/detail-page-header/migrate-to-7.x.md

@@ -5,8 +5,14 @@ A lot of classes have been removed, see SCSS for more details.
 
 ### SCSS
 
-The `_detail-page-header.scss` file is now located at __src/components/detail-page-header/_detail-page-header.scss__. You will need to update any `@import` statements for this file to reflect this change.
+The `_detail-page-header.scss` file is now located at `src/components/detail-page-header/_detail-page-header.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/detail-page-header/detail-page-header';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/detail-page-header/detail-page-header';
 ```

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

@@ -4,11 +4,18 @@ No structural changes. However, class names have been changed.
 
 ### SCSS
 
-The `_dropdown.scss` file is now located at __src/components/.dropdown/dropdown.scss__. You will need to update any `@import` statements for this file to reflect this change.
+The `_dropdown.scss` file is now located at `src/components/dropdown/_dropdown.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/dropdown/dropdown';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/dropdown/dropdown';
 ```
+
 Quite a few class names have changed. See table below.
 
 | Old Class               | New Class         |

src/components/file-uploader/migrate-to-7.x.md

@@ -8,8 +8,14 @@ There's also a new `.bx--file-container` element that is used to display filenam
 
 ### SCSS
 
-The `_file-uploader.scss` file is now located at __src/components/file-uploader/_file-uploader.scss__. You will need to update any `@import` statements for this file to reflect this change.
+The `_file-uploader.scss` file is now located at `src/components/file-uploader/_file-uploader.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/file-uploader/file-uploader';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/file-uploader/file-uploader';
 ```

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

@@ -5,8 +5,14 @@ Now there's only one variant of HTML for Footer that more closely resembles what
 
 ### SCSS
 
-The `_footer.scss` file is now located at __src/components/footer/_footer.scss__. You will need to update any `@import` statements for this file to reflect this change.
+The `_footer.scss` file is now located at `src/components/footer/_footer.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/footer/footer';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/footer/footer';
 ```

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

@@ -14,11 +14,18 @@ For full usage guidelines of the new HTML see the component README file.
 
 ### SCSS
 
-The `_form.scss` file is now located at __src/components/form/form.scss__. You will need to update any `@import` statements for this file to reflect this change.
+The `_form.scss` file is now located at `src/components/form/_form.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/form/form';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/form/form';
 ```
+
 Quite a few class names have changed. See table below.
 
 | Old Class              | New Class            | Note    |

src/components/interior-left-nav/migrate-to-7.x.md

@@ -15,8 +15,14 @@ All data-attributes containing the words `inline-left-nav` have been changed to
 
 ### SCSS
 
-The `_interior-left-nav.scss` file is now located at __src/components/interior-left-nav/_interior-left-nav.scss__. You will need to update any `@import` statements for this file to reflect this change.
+The `_interior-left-nav.scss` file is now located at `src/components/interior-left-nav/_interior-left-nav.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/interior-left-nav/interior-left-nav';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/interior-left-nav/interior-left-nav';
 ```

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

@@ -4,8 +4,14 @@ No changes.
 
 ### SCSS
 
-The `_link.scss` file is now located at __src/components/link/link.scss__. You will need to update any `@import` statements for this file to reflect this change.
+The `_link.scss` file is now located at `src/components/link/_link.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/link/link';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/link/link';
 ```

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

@@ -4,8 +4,14 @@ No changes.
 
 ### SCSS
 
-The `_list.scss` file is now located at __src/components/list/list.scss__. You will need to update any `@import` statements for this file to reflect this change.
+The `_list.scss` file is now located at `src/components/list/_list.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/list/list';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/list/list';
 ```

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

@@ -5,8 +5,14 @@ No class names have changed.
 
 ### SCSS
 
-The `_loading.scss` file is now located at __src/components/loading/loading.scss__. You will need to update any `@import` statements for this file to reflect this change.
+The `_loading.scss` file is now located at `src/components/loading/_loading.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/loading/loading';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/loading/loading';
 ```

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

@@ -17,8 +17,14 @@ With that said, it will be best to copy and paste the new HTML for Modal to capt
 
 ### SCSS
 
-The `_modal.scss` file is now located at __src/components/modal/_modal.scss__. You will need to update any `@import` statements for this file to reflect this change.
+The `_modal.scss` file is now located at `src/components/modal/_modal.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/modal/modal';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/modal/modal';
 ```

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

@@ -22,8 +22,14 @@ For more examples see the `module.html` file.
 
 ### SCSS
 
-The `_module.scss` file is now located at __src/components/modules/module.scss__. You'll need to update any `@import` statements for this file to reflect this change.
+The `_module.scss` file is now located at `src/components/modules/_module.scss`. You'll need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/module/module';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/module/module';
 ```

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

@@ -8,11 +8,19 @@ The majority of the class names have changed along with some structural changes.
 
 ### SCSS
 
-The `_notification.scss` file is now located at __src/components/notification/notification.scss__. You will need to update any `@import` statements for this file to reflect this change.
+The `_notification.scss` is now split in to two files. They are located at `src/components/notification/_inline-notification.scss` and `src/components/notification/_toast-notification.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/notification/_toast-notification.scss';
+@import 'path_to_node_modules/carbon-components/src/components/notification/_inline-notification.scss';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/notification/notification';
 ```
+
 Quite a few class names have changed. See table below.
 
 | Old Class                      | New Class: Inline                     | New Class: Toast                     |

src/components/number-input/migrate-to-7.x.md

@@ -7,8 +7,14 @@ In general, it will be easiest to simply copy and paste the new HTML to replace
 
 ### SCSS
 
-The `_number-input.scss` file is now located at __src/components/number-input/_number-input.scss__. You will need to update any `@import` statements for this file to reflect this change.
+The `_number-input.scss` file is now located at `src/components/number-input/_number-input.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/number-input/number-input';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/number-input/number-input';
 ```

src/components/overflow-menu/migrate-to-7.x.md

@@ -4,10 +4,16 @@ Structure stays the same but some class names have been changed. See below.
 
 ### SCSS
 
-The `_overflow-menu.scss` file is now located at `__src/components/overflow-menu/_overflow-menu.scss.` You will need to update any `@import` statements for this file to reflect this change.
+The `_overflow-menu.scss` file is now located at `src/components/overflow-menu/_overflow-menu.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
 ```scss
-@import 'path_to_node_modules/@console/bluemix-components/src/components/tooltip/tooltip;
+@import 'path_to_node_modules/carbon-components/src/components/overflow-menu/overflow-menu';
+```
+
+**Old**: 
+```scss
+@import 'path_to_node_modules/@console/bluemix-components/src/components/overflow-menu/overflow-menu;
 ```
 
 `.bx--overflow-menu__options` is now `.bx--overflow-menu-options`

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

@@ -4,8 +4,14 @@ No changes.
 
 ### SCSS
 
-The `_pagination.scss` file is now located at __src/components/pagination/_pagination.scss__. You will need to update any `@import` statements for this file to reflect this change.
+The `_pagination.scss` file is now located at `src/components/pagination/_pagination.scss`. You will need to update any `@import` statements for this file to reflect this change.
 
+**New**: 
+```scss
+@import 'path_to_node_modules/carbon-components/src/components/pagination/pagination';
+```
+
+**Old**: 
 ```scss
 @import 'path_to_node_modules/@console/bluemix-components/src/components/pagination/pagination';
 ```