Update plugin to look like callouts in beta

README.md

@@ -9,7 +9,7 @@ Add the below to your `book.json` file, then run `gitbook install` :
 
 ```json
 {
-    "plugins": ["hints"]
+    "plugins": [ "hints" ]
 }
 ```
 
@@ -26,7 +26,7 @@ The above example will produce a styled alert, with an icon:
 
 ``` html
 <div class="alert alert-info hints-alert">
-  <div class="hints-icon"><i class="fa fa-info"></i></div>
+  <div class="hints-icon"><i class="icon-info"></i></div>
   <div class="hints-container">
     <p>Important info: this note needs to be highlighted</p>
   </div>
@@ -35,25 +35,7 @@ The above example will produce a styled alert, with an icon:
 
 Available styles are:
 
-- `info` (default)
-- `tip`
 - `danger`
-- `working`
-
-### Configuration
-
-You can specify custom classes for the icons (or none) in your `book.json`:
-
-```json
-{
-    "plugins": ["hints"],
-    "pluginsConfig": {
-        "hints": {
-            "info": "fa fa-info-circle",
-            "tip": "fa fa-mortar-board",
-            "danger": "fa fa-exclamation-cicle",
-            "working": "fa fa-wrench"
-        }
-    }
-}
-```
+- `info` (default)
+- `success`
+- `warning`

assets/icons.css

@@ -0,0 +1,38 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('fonts/icomoon.eot?ocmtqn');
+  src:  url('fonts/icomoon.eot?ocmtqn#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?ocmtqn') format('truetype'),
+    url('fonts/icomoon.woff?ocmtqn') format('woff'),
+    url('fonts/icomoon.svg?ocmtqn#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-danger:before {
+  content: "\e901";
+}
+.icon-info:before {
+  content: "\e903";
+}
+.icon-success:before {
+  content: "\e902";
+}
+.icon-warning:before {
+  content: "\e900";
+}

assets/plugin-hints.css

@@ -1,9 +1,55 @@
+.alert {
+  border-left: 4px solid;
+  border-bottom: 0;
+  color: #444444;
+  overflow: auto;
+  padding-bottom: 0;
+}
+
+.alert-danger {
+  background: #fdf7f7;
+  border-color: #d9534f;
+}
+
+.alert-danger i {
+  color: #d9534f;
+}
+
+.alert-info {
+  background: #eff5ff;
+  border-color: #42acf3;
+}
+
+.alert-info i {
+  color: #42acf3;
+}
+
+.alert-success {
+  background: #f3f8f3;
+  border-color: #50af51;
+}
+
+.alert-success i {
+  color: #50af51;
+}
+
+.alert-warning {
+  background: #fcf8f2;
+  border-color: #f0ad4e;
+}
+
+.alert-warning i {
+  color: #f0ad4e;
+}
+
+i[class^="icon-"] {
+  font-size: 1.5em;
+}
+
 .hints-icon {
-    display: table-cell;
-    padding-right: 15px;
-    padding-left: 5px;
+  position: absolute;
 }
 
 .hints-container {
-    display: table-cell;
+  padding-left: 40px;
 }

index.js

@@ -1,8 +1,8 @@
 var ALERT_STYLES = {
-    info:'info',
-    tip:'success',
-    danger:'danger',
-    working:'warning'
+    danger: 'danger',
+    info: 'info',
+    success: 'success',
+    warning: 'warning'
 };
 
 /**
@@ -12,7 +12,7 @@ var ALERT_STYLES = {
  */
 function makeIcon(style, pluginConfig) {
     var id = pluginConfig[style];
-    return '<div class="hints-icon"><i class="'+id+'"></i></div>';
+    return '<div class="hints-icon"><i class="icon-'+style+'"></i></div>';
 }
 
 /**
@@ -27,21 +27,22 @@ module.exports = {
     book: {
         assets: './assets',
         css: [
+            'icons.css',
             'plugin-hints.css'
         ]
     },
 
     blocks: {
         hint: {
             process: function (block) {
-                // Available styles: info, danger, tip, working
+                // Available styles: info, danger, success, warning
                 var style = block.kwargs.style || 'info';
                 var pluginConfig = this.config.get('pluginsConfig.hints');
 
                 return this
                     .renderBlock('markdown', block.body)
                     .then(function(renderedBody) {
-                        return '<div class="alert alert-'+ALERT_STYLES[style]+' hints-alert">'
+                        return '<div class="alert alert-' + ALERT_STYLES[style] + ' hints-alert">'
                             + makeIcon(style, pluginConfig)
                             + wrapInContainer(renderedBody)
                             + '</div>';

package.json

@@ -1,8 +1,8 @@
 {
     "name": "gitbook-plugin-hints",
-    "description": "Defines four types of styled hint blocks: info, danger, tip, working.",
+    "description": "Defines four types of styled hint blocks: info, danger, success, warning.",
     "main": "index.js",
-    "version": "1.0.2",
+    "version": "2.0.0",
     "engines": {
         "gitbook": ">2.x.x"
     },
@@ -14,25 +14,21 @@
     },
     "gitbook": {
         "properties": {
-            "info": {
+            "danger": {
                 "type": "string",
-                "title": "CSS class for the 'info' icons",
-                "default": "fa fa-info-circle"
+                "title": "CSS class for the 'danger' icons"
             },
-            "tip": {
+            "info": {
                 "type": "string",
-                "title": "CSS class for the 'tip' icons",
-                "default": "fa fa-mortar-board"
+                "title": "CSS class for the 'info' icons"
             },
-            "danger": {
+            "success": {
                 "type": "string",
-                "title": "CSS class for the 'danger' icons",
-                "default": "fa fa-exclamation-circle"
+                "title": "CSS class for the 'success' icons"
             },
-            "working": {
+            "warning": {
                 "type": "string",
-                "title": "CSS class for the 'working' icons",
-                "default": "fa fa-wrench"
+                "title": "CSS class for the 'warning' icons"
             }
         }
     }