Merge 83af897 into 3ecc852

addon/components/frost-sidebar.js

@@ -1,7 +1,9 @@
 import Ember from 'ember'
 const {Component} = Ember
 import layout from '../templates/components/frost-sidebar'
+import computed, {readOnly} from 'ember-computed-decorators'
 import PropTypesMixin, {PropTypes} from 'ember-prop-types'
+import {validators} from 'ember-prop-types/utils/prop-types'
 
 export default Component.extend(PropTypesMixin, {
   // == Component properties ==================================================
@@ -17,8 +19,20 @@ export default Component.extend(PropTypesMixin, {
       PropTypes.object,
       PropTypes.EmberObject
     ]).isRequired,
+    label: PropTypes.oneOfType([
+      PropTypes.EmberComponent,
+      PropTypes.string
+    ]),
 
     // Actions
     onToggle: PropTypes.func.isRequired
+  },
+
+  // == Computed Properties ===================================================
+
+  @readOnly
+  @computed('label')
+  isLabelComponent (label) {
+    return validators.EmberComponent(null, 'label', label, null, false, false)
   }
 })

addon/styles/_frost-sidebar.scss

@@ -10,13 +10,19 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    margin-top: 5px;
-    margin-bottom: 10px;
+    margin: 5px 5px 10px 0;
+
+    .frost-sidebar-button {
+      height: 45px;
+    }
   }
 
   &-closed {
-    width: 70px;
-    height: 65px;
+    margin: 5px 5px 5px 0;
+
+    .frost-sidebar-button-label {
+      border-right: 1px solid $frost-color-lgrey-2;
+    }
   }
 
   &-content-container {
@@ -39,26 +45,30 @@
   }
 
   &-button {
-    width: 40px;
-    height: 45px;
+    display: flex;
+    align-items: center;
+    padding: 5px;
     border-radius: 4px;
     background-color: $frost-color-white;
     box-shadow: 1px 2px 5px $frost-color-grey-5;
     cursor: pointer;
     z-index: $frost-z-index-modal;
 
+    &-label {
+      margin: 0 10px;
+      padding-right: 10px;
+    }
+
     &-icon {
       width: 35px;
       height: 35px;
-      margin-top: 5px;
-      margin-right: 2px;
       vertical-align: middle;
     }
 
     &:hover {
       &:not(.frost-sidebar-button-open) {
-        width: 50px;
         padding-left: 10px;
+        white-space: nowrap;
       }
     }
 

addon/templates/components/frost-sidebar.hbs

@@ -14,6 +14,17 @@
 {{else}}
   <div class="frost-sidebar-closed" data-test={{hook (concat hook '-sidebar')}}>
     <div class="frost-sidebar-button" {{action onToggle}} data-test={{hook (concat hook '-sidebar-button')}} role="button">
+      {{#if label}}
+        <div class="frost-sidebar-button-label">
+          {{#if isLabelComponent}}
+            {{component label
+              hook=(concat hook '-sidebar-button-label')
+            }}
+          {{else}}
+            {{label}}
+          {{/if}}
+        </div>
+      {{/if}}
       {{frost-icon class="frost-sidebar-button-icon" icon="layer-normal" pack='frost-sidebar'}}
     </div>
   </div>

ember-cli-build.js

@@ -3,6 +3,9 @@ const EmberAddon = require('ember-cli/lib/broccoli/ember-addon')
 
 module.exports = function (defaults) {
   let app = new EmberAddon(defaults, {
+    babel: {
+      optional: ['es7.decorators']
+    },
     snippetSearchPaths: [
       'addon',
       'tests/dummy'

index.js

@@ -6,6 +6,22 @@ const {setSvgConfiguration} = require('ember-frost-core/utils/frost-icon-svg')
 module.exports = {
   name: 'ember-frost-sidebar',
 
+  /* eslint-disable complexity */
+  init: function () {
+    this.options = this.options || {}
+    this.options.babel = this.options.babel || {}
+    this.options.babel.optional = this.options.babel.optional || []
+
+    if (this.options.babel.optional.indexOf('es7.decorators') === -1) {
+      this.options.babel.optional.push('es7.decorators')
+    }
+
+    /* eslint-disable no-unused-expressions */
+    this._super.init && this._super.init.apply(this, arguments)
+    /* eslint-enable no-unused-expressions */
+  },
+  /* eslint-enable complexity */
+
   included: function () {
     this.app = this._findHost.call(this) // eslint-disable-line no-useless-call
 

tests/dummy/app/pods/components/map-label/template.hbs

@@ -0,0 +1,2 @@
+<div>Map Details</div>
+<div>Legends and symbols</div>

tests/dummy/app/pods/demo/label/controller.js

@@ -0,0 +1,18 @@
+import Ember from 'ember'
+const {
+  Controller
+} = Ember
+
+export default Controller.extend({
+  sentences: ['I\'m loooooooooooooggggg content'],
+  isOpen1: false,
+  isOpen2: false,
+  actions: {
+    onToggle1 () {
+      this.toggleProperty('isOpen1')
+    },
+    onToggle2 () {
+      this.toggleProperty('isOpen2')
+    }
+  }
+})

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

@@ -0,0 +1,63 @@
+{{!-- BEGIN-SNIPPET label-api }}
+  {{frost-sidebar
+    ...
+    class='<class name>'
+    isOpen=<true/false>
+    content=(component '<component name>')
+    onToggle=<action>
+    label=(component '<component name>') // or string e.g. 'foo'
+    ...
+  }}
+{{ END-SNIPPET --}}
+
+<div class='addon-demo-api'>
+  <div class='addon-demo-title'>
+    Notes
+  </div>
+  <div class='addon-demo-notes'>
+    <p>
+      Pass in a string or component to the label prop to show beside the sidebar button when it is collapsed.
+    </p>
+  </div>
+  <div class='addon-demo-title'>
+    API
+  </div>
+  <div class='addon-demo-snippet'>
+    {{code-snippet name='label-api.hbs'}}
+  </div>
+</div>
+<div class='addon-demo-live'>
+  <div class='addon-demo-title'>
+    Live demo
+  </div>
+  <div class='addon-demo-snippet'>
+    <i>Label component</i>  
+    {{code-snippet name='label-component-frost-sidebar.hbs'}}
+  </div>
+  <div class='addon-demo-component'>
+    {{! BEGIN-SNIPPET label-component-frost-sidebar }}
+    {{frost-sidebar
+      content=(component 'simple-content'
+              sentences=sentences)
+      onToggle=(action 'onToggle1')
+      isOpen=isOpen1
+      label=(component 'map-label')
+    }}
+    {{! END-SNIPPET }}
+  </div>
+  <div class='addon-demo-snippet'>
+    <i>String label</i>  
+    {{code-snippet name='string-label-frost-sidebar.hbs'}}
+  </div>
+  <div class='addon-demo-component'>
+    {{! BEGIN-SNIPPET string-label-frost-sidebar }}
+    {{frost-sidebar
+      content=(component 'simple-content'
+              sentences=sentences)
+      onToggle=(action 'onToggle2')
+      isOpen=isOpen2
+      label='Map Details'
+    }}
+    {{! END-SNIPPET }}
+  </div>
+</div>

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

@@ -10,6 +10,7 @@
         {{#link-to 'demo.content'}}Content{{/link-to}}
         {{#link-to 'demo.size'}}Size{{/link-to}}
         {{#link-to 'demo.dynamic-updates'}}Dynamic updates{{/link-to}}
+        {{#link-to 'demo.label'}}Label component{{/link-to}}
       </div>
     {{/frost-scroll}}
   </div>

tests/dummy/app/router.js

@@ -13,6 +13,7 @@ Router.map(function () {
     this.route('content')
     this.route('size')
     this.route('dynamic-updates')
+    this.route('label')
   })
 })