refactor(messages): fix controversial BEM by using composition #110

      BREAKING CHANGES:

         dc-icon--msg-success has been renamed to dc-icon--success
         dc-icon--msg-info has been renamed to dc-icon--info-large
         dc-icon--msg-error has been renamed to dc-icon--error
         dc-icon--msg-warning has been renamed to dc-icon--warning

         Introduced dc-msg__icon-frame and dc-msg__icon is applied to the actual font icon
         Introduced dc-msg__close__icon

docs/demo/materials/02-atoms/icons.html

@@ -24,9 +24,8 @@
     <i class="dc-icon dc-icon--play dc-icon--interactive"><span>play</span></i>
     <i class="dc-icon dc-icon--search dc-icon--interactive"><span>search</span></i>
     <i class="dc-icon dc-icon--trash dc-icon--interactive"><span>trash</span></i>
-    <i class="dc-icon dc-icon--msg-error dc-icon--interactive"><span>msg-error</span></i>
-    <i class="dc-icon dc-icon--msg-info dc-icon--interactive"><span>msg-info</span></i>
-    <i class="dc-icon dc-icon--msg-neutral dc-icon--interactive"><span>msg-neutral</span></i>
-    <i class="dc-icon dc-icon--msg-success dc-icon--interactive"><span>msg-success</span></i>
-    <i class="dc-icon dc-icon--msg-warning dc-icon--interactive"><span>msg-warning</span></i>
+    <i class="dc-icon dc-icon--error dc-icon--interactive"><span>error</span></i>
+    <i class="dc-icon dc-icon--info-large dc-icon--interactive"><span>info-large</span></i>
+    <i class="dc-icon dc-icon--success dc-icon--interactive"><span>success</span></i>
+    <i class="dc-icon dc-icon--warning dc-icon--interactive"><span>warning</span></i>
 </div>

docs/demo/materials/03-molecules/09-messages.html

@@ -6,68 +6,59 @@
 <div class="dc-msg dc-msg--info">
   <div class="dc-msg__inner">
 
-    <div class="dc-msg__icon">
-      <i class="dc-icon dc-icon--msg-info"></i>
+    <div class="dc-msg__icon-frame">
+      <i class="dc-icon dc-msg__icon dc-icon--info-large"></i>
     </div>
 
     <div class="dc-msg__bd">
-
       <h1 class="dc-msg__title">Info message</h1>
-
       <p class="dc-msg__text">
-        Give some more information about what happened. <a href class="dc-link" title="tooltip">Also, here's a link. Boo!</a>
+        Give some more information about what happened. <a href class="dc-link dc-msg__bd__link" title="tooltip">Also, here's a link. Boo!</a>
       </p>
-
     </div>
 
     <div class="dc-msg__close">
-      <i class="dc-icon dc-icon--close"></i>
+      <i class="dc-icon dc-icon--close dc-msg__close__icon"></i>
     </div>
   </div>
 </div>
 
 <div class="dc-msg dc-msg--success">
   <div class="dc-msg__inner">
 
-    <div class="dc-msg__icon">
-      <i class="dc-icon dc-icon--msg-success"></i>
+    <div class="dc-msg__icon-frame">
+      <i class="dc-icon dc-msg__icon dc-icon--success"></i>
     </div>
 
     <div class="dc-msg__bd">
-
       <h1 class="dc-msg__title">Success message</h1>
-
       <p class="dc-msg__text">
-        Give some more information about what happened. <a href class="dc-link" title="tooltip">Also, here's a link. Boo!</a>
+        Give some more information about what happened. <a href class="dc-link dc-msg__bd__link" title="tooltip">Also, here's a link. Boo!</a>
       </p>
-
     </div>
 
     <div class="dc-msg__close">
-        <i class="dc-icon dc-icon--close"></i>
+        <i class="dc-icon dc-icon--close dc-msg__close__icon"></i>
     </div>
   </div>
 </div>
 
 <div class="dc-msg dc-msg--warning">
   <div class="dc-msg__inner">
 
-    <div class="dc-msg__icon">
-      <i class="dc-icon dc-icon--msg-warning"></i>
+    <div class="dc-msg__icon-frame">
+      <i class="dc-icon dc-msg__icon dc-icon--warning"></i>
     </div>
 
     <div class="dc-msg__bd">
-
       <h1 class="dc-msg__title">Warning message</h1>
-
       <p class="dc-msg__text">
-        Give some more information about what happened. <a href class="dc-link" title="tooltip">Also, here's a link. Boo!</a>
+        Give some more information about what happened. <a href class="dc-link dc-msg__bd__link" title="tooltip">Also, here's a link. Boo!</a>
       </p>
-
     </div>
 
     <div class="dc-msg__close">
-        <i class="dc-icon dc-icon--close"></i>
+        <i class="dc-icon dc-icon--close dc-msg__close__icon"></i>
     </div>
   </div>
 </div>
@@ -76,22 +67,19 @@ <h1 class="dc-msg__title">Warning message</h1>
 <div class="dc-msg dc-msg--error">
   <div class="dc-msg__inner">
 
-    <div class="dc-msg__icon">
-      <i class="dc-icon dc-icon--msg-error"></i>
+    <div class="dc-msg__icon-frame">
+      <i class="dc-icon dc-msg__icon dc-icon--error"></i>
     </div>
 
     <div class="dc-msg__bd">
-
       <h1 class="dc-msg__title">Error message</h1>
-
       <p class="dc-msg__text">
-        Give some more information about what happened. <a href class="dc-link" title="tooltip">Also, here's a link. Boo!</a>
+        Give some more information about what happened. <a href class="dc-link dc-msg__bd__link" title="tooltip">Also, here's a link. Boo!</a>
       </p>
-
     </div>
 
     <div class="dc-msg__close">
-        <i class="dc-icon dc-icon--close"></i>
+        <i class="dc-icon dc-icon--close dc-msg__close__icon"></i>
     </div>
   </div>
 </div>

npm-debug.log

@@ -0,0 +1,45 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
+2 info using npm@3.5.2
+3 info using node@v4.2.3
+4 verbose run-script [ 'prestart', 'start', 'poststart' ]
+5 info lifecycle dress-code@1.1.1-alpha~prestart: dress-code@1.1.1-alpha
+6 silly lifecycle dress-code@1.1.1-alpha~prestart: no script for prestart, continuing
+7 info lifecycle dress-code@1.1.1-alpha~start: dress-code@1.1.1-alpha
+8 verbose lifecycle dress-code@1.1.1-alpha~start: unsafe-perm in lifecycle true
+9 verbose lifecycle dress-code@1.1.1-alpha~start: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/dgarcia/Projects/dress-code/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
+10 verbose lifecycle dress-code@1.1.1-alpha~start: CWD: /Users/dgarcia/Projects/dress-code
+11 silly lifecycle dress-code@1.1.1-alpha~start: Args: [ '-c', 'gulp' ]
+12 silly lifecycle dress-code@1.1.1-alpha~start: Returned: code: 1  signal: null
+13 info lifecycle dress-code@1.1.1-alpha~start: Failed to exec start script
+14 verbose stack Error: dress-code@1.1.1-alpha start: `gulp`
+14 verbose stack Exit status 1
+14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:232:16)
+14 verbose stack     at emitTwo (events.js:87:13)
+14 verbose stack     at EventEmitter.emit (events.js:172:7)
+14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
+14 verbose stack     at emitTwo (events.js:87:13)
+14 verbose stack     at ChildProcess.emit (events.js:172:7)
+14 verbose stack     at maybeClose (internal/child_process.js:818:16)
+14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
+15 verbose pkgid dress-code@1.1.1-alpha
+16 verbose cwd /Users/dgarcia/Projects/dress-code
+17 error Darwin 14.5.0
+18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
+19 error node v4.2.3
+20 error npm  v3.5.2
+21 error code ELIFECYCLE
+22 error dress-code@1.1.1-alpha start: `gulp`
+22 error Exit status 1
+23 error Failed at the dress-code@1.1.1-alpha start script 'gulp'.
+23 error Make sure you have the latest version of node.js and npm installed.
+23 error If you do, this is most likely a problem with the dress-code package,
+23 error not with npm itself.
+23 error Tell the author that this fails on your system:
+23 error     gulp
+23 error You can get information on how to open an issue for this project with:
+23 error     npm bugs dress-code
+23 error Or if that isn't available, you can get their info via:
+23 error     npm owner ls dress-code
+23 error There is likely additional logging output above.
+24 verbose exit [ 1, true ]