Merge pull request #51 from vesper2000/master

Adding new `design` property.

.pullapprove.yml

@@ -1 +1 @@
-extends: default
+extends: base

README.md

@@ -32,15 +32,16 @@ ember install ember-frost-button
 | `text` | `string` | `<button-text>` | text do display on the button |
 | `subtext` | `string` | `<button-subtext>` | subtext do display on the button underneath main `text` |
 | `size` | `string` | `small` | The smallest button you ever did see |
-| | | `medium` | **default**: Not quite as small as `small`, but not very big either |
+| | | `medium` | Not quite as small as `small`, but not very big either |
 | | | `large` | Now *that's* what I call a button! |
 | | | `extra-large` | My grandma, what a big button you have! <br /> Recommended when `icon`, `text`, and `subtext` are used together |
 | `priority` | `string` | `primary` | Call-to-action :telephone: |
-| | | `secondary` | **default**: Run of the mill, garden variety  |
+| | | `secondary` | Run of the mill, garden variety  |
 | | | `tertiary` | Low-key, subdued  |
 | | | `confirm` | An alias for `primary`  |
 | | | `normal` | An alias for `secondary`  |
 | | | `cancel` | An alias for `tertiary`  |
+| `design`| `string` | `tab` | Custom styling for applications that use buttons but don't follow the button styling.  Requires `text` or `icon` to be specified.  Should not be used with `priority` and `size`. |
 
 ## Examples
 
@@ -89,6 +90,13 @@ ember install ember-frost-button
 }}
 ```
 
+### Design
+```handlebars
+{{frost-button
+  design='tab'
+  text='Tab'
+}}
+
 ## Development
 
 ### Setup

addon/components/frost-button.js

@@ -55,6 +55,28 @@ function addSizeClass (size, classes) {
   }
 }
 
+/**
+ * Add the appropriate class for the button design to the Array of classes
+ * Button design is restricted for use with specific applications.
+ * For example, frost-tabs uses button for tabs, but styling for
+ * tabs is quite different then for a button.  By providing 'design'
+ * property, we can style the button appropriately and still re-use
+ * other functionality.
+ *
+ * @param {String} design - button design
+ * @param {String[]} classes - the classes to add the size class to
+ */
+function addDesignClass (design, classes) {
+  switch (design) {
+    case 'tab':
+      classes.push('tab')
+      break
+    default:
+      // no class to add for this invalid size
+      break
+  }
+}
+
 export default Ember.Component.extend({
   tagName: 'button',
   classNames: [
@@ -92,15 +114,23 @@ export default Ember.Component.extend({
    * 'cancel' => 'tertiary'
    * @type {String}
    */
-  priority: 'confirm',
+  priority: '',
 
   /**
    * How big do you want your button?
    * Currently available options are:
    * ['small', 'medium', 'large', 'extra-large']
    * @type {String}
    */
-  size: 'medium',
+  size: '',
+
+  /**
+   *  Specifies design of the button.
+   *  Currently available options are:
+   *  ['tab']
+   *  @type {String}
+   */
+  design: '',
 
   /**
    * The text to display within this button
@@ -156,11 +186,26 @@ export default Ember.Component.extend({
 
   extraClasses: Ember.computed('priority', 'vertical', function () {
     const classes = []
-    addSizeClass(this.get('size'), classes)
-    addPriorityClass(this.get('priority'), classes)
-
-    if (this.get('vertical')) {
-      classes.push('vertical')
+    addDesignClass(this.get('design'), classes)
+
+    // only add size and priority if design has not been specified
+    if (classes.length === 0) {
+      addSizeClass(this.get('size'), classes)
+      addPriorityClass(this.get('priority'), classes)
+      if (this.get('vertical')) {
+        classes.push('vertical')
+      }
+    } else {
+      // design button needs to have either text or icon property present
+      if ((this.get('text') === '') && (this.get('icon') === '')) {
+        Ember.Logger.error('Error: The `design` property requires `text` or `icon` property to be specified.')
+        return
+      }
+
+      // display warning when design property is used together with size and/or priority
+      if ((this.get('priority') !== '') || (this.get('size') !== '')) {
+        Ember.Logger.warn('Warning: The `design` property takes precedence over `size` and `priority`.')
+      }
     }
 
     return classes.join(' ')

addon/styles/addon.scss

@@ -144,6 +144,24 @@ $frost-color-button-primary-active: $frost-color-blue-4; // TODO move to ember-f
     }
   }
 
+  // Design - 'tab'
+  &.tab {
+    height: 35px;
+    padding: 0 15px;
+    box-shadow: none;
+    cursor: default;
+
+    .text {
+      font-family: $frost-font-family;
+      font-size: $frost-font-m;
+      color: $frost-color-grey-5;
+    }
+
+    &:hover {
+      background-color: $frost-color-button-tertiary-hover-bg;
+    }
+  }
+
   // Content - text
   &.text {
     // Deprecated format

tests/dummy/app/pods/demo/template.hbs

@@ -299,6 +299,33 @@
       }}
     </div>
   </div>
+
+   <div class="example">
+    <div class="title">Design - tab</div>
+    <div class="code">
+      {{format-markdown "```handlebars
+{{frost-button
+  autofocus=true
+  on-click=(action 'click')
+  design='tab'
+  text='Design Tab'
+  vertical=vertical
+}}
+```"
+      }}
+    </div>
+    <div class="demo">
+      {{frost-button
+        autofocus=true
+        on-click=(action 'click')
+        design='tab'
+        text='Design Tab'
+        vertical=vertical
+      }}
+    </div>
+  </div>
+
+
 </div>
 
 <div class="section">