Initial implementation of tf-input, tf-input-group, and tf-textarea

README.md

@@ -1,6 +1,104 @@
-# ticketfly-fields
+# Ticketfly Fields
 
-This README outlines the details of collaborating on this Ember addon.
+This Ember addon provides the field components of the Ticketfly UI library. The components provided include:
+
+* `tf-input`
+* `tf-input-group`
+* `tf-textarea`
+
+## Usage
+
+**Input Sizing**
+
+Template:
+```hbs
+{{tf-input size="large"}}
+{{tf-input}} {{!-- size="default" by default --}}
+{{tf-input size="small"}}
+```
+
+Resulting HTML:
+```html
+<input type="text" class="c-input u-input-large">
+<input type="text" class="c-input">
+<input type="text" class="c-input u-input-small">
+```
+
+**Input Block with Label & Description**
+
+Template:
+
+```hbs
+{{#tf-input-group size="large" as |group|}}
+  {{group.label "First Name"}}
+  {{group.input}}
+  {{group.description "You must provide a First Name"}}
+{{/tf-input-group}}
+```
+
+Resulting HTML:
+
+```html
+<div class="c-input-group">
+  <label class="u-label-large" for="random-uuid">First Name</label>
+  <input class="c-input u-input-large" type="text" id="random-uuid" aria-describedby="other-uuid">
+  <p class="u-description-large" id="other-uuid">You must provide a First Name</p>
+</div>
+```
+
+The contextual components for `tf-input-group` support overriding the size of child components such as:
+
+```hbs
+{{#tf-input-group size="large" as |group|}}
+  {{group.label "First Name" }} <!--large, following group size-->
+  {{group.input }}  <!--large, following group size-->
+  {{group.description "You must provide a First Name" size="small"}} <!--small, overriding group size-->
+{{/tf-input-group}}
+```
+
+**Input Validation States**
+
+Template:
+
+```hbs
+{{tf-input should-validate=true is-valid=true}}
+{{tf-input should-validate=true is-valid=false}}
+{{tf-input should-validate=false is-valid=true}}
+
+{{#tf-input-group should-validate=true is-valid=false as |group|}}
+  {{group.label "First Name"}}
+  {{group.input}}
+  {{group.description "You must provide a First Name"}}
+{{/tf-input-group}}
+```
+
+Resulting HTML:
+
+```html
+<input type="text" class="c-input is-valid">
+<input type="text" class="c-input is-invalid">
+<input type="text" class="c-input">
+
+<div class="c-input-group">
+  <label class="is-invalid" for="random-uuid">First Name</label>
+  <input class="c-input is-invalid" type="text" id="random-uuid" aria-describedby="other-uuid">
+  <p class="is-invalid" id="other-uuid">You must provide a First Name</p>
+</div>
+```
+
+**Text Area**
+
+Template:
+
+```hbs
+{{tf-textarea}}
+```
+
+Resulting HTML:
+
+```html
+<textarea class="c-textarea"></textarea>
+```
 
 ## Installation
 

addon/components/tf-input-group/component.js

@@ -0,0 +1,29 @@
+/**
+  @module ticketfly-fields
+ */
+import Ember from 'ember';
+import layout from './template';
+const { Component, guidFor, computed } = Ember;
+
+/**
+  @public
+  @class TfInputGroup
+  @extends Ember.Component
+ */
+export default Component.extend({
+  layout,
+
+  classNames: ['c-input-group'],
+
+  inputGuid: computed({
+    get() {
+      return `id-${guidFor(this)}`;
+    }
+  }),
+
+  describedByGuid: computed({
+    get() {
+      return `described-by-${guidFor(this)}`;
+    }
+  })
+});

addon/components/tf-input-group/template.hbs

@@ -0,0 +1,18 @@
+{{yield (hash
+  label=(component 'tf-input/input-label' 
+          sizeStyle=sizeStyle 
+          for=inputGuid 
+          shouldValidate=shouldValidate 
+          isValid=isValid)
+  input=(component 'tf-input' 
+          sizeStyle=sizeStyle 
+          id=inputGuid 
+          aria-describedby=describedByGuid 
+          shouldValidate=shouldValidate 
+          isValid=isValid)
+  description=(component 'tf-input/input-description' 
+                sizeStyle=sizeStyle 
+                id=describedByGuid 
+                shouldValidate=shouldValidate 
+                isValid=isValid)
+)}}

addon/components/tf-input/component.js

@@ -0,0 +1,18 @@
+/**
+  @module ticketfly-fields
+ */
+import Ember from 'ember';
+import SizingMixin from 'ticketfly-fields/mixins/sizing-mixin';
+import ValidityMixin from 'ticketfly-fields/mixins/validity-mixin';
+const { TextField } = Ember;
+
+/**
+  @public
+  @class TfInput
+  @extends Ember.TextField
+ */
+export default TextField.extend(SizingMixin, ValidityMixin, {
+  classNames: ['c-input'],
+  classNameBindings: ['sizing', 'validity'],
+  attributeBindings: ['aria-describedby']
+});

addon/components/tf-input/input-description/component.js

@@ -0,0 +1,27 @@
+/**
+  @module ticketfly-fields
+ */
+import Ember from 'ember';
+import SizingMixin from 'ticketfly-fields/mixins/sizing-mixin';
+import ValidityMixin from 'ticketfly-fields/mixins/validity-mixin';
+import layout from './template';
+const { Component } = Ember;
+
+/**
+  @class TfInputDescription
+  @extends Ember.Computed
+ */
+const InputDescriptionComponent = Component.extend(SizingMixin, ValidityMixin, {
+  layout,
+
+  tagName: 'p',
+  classNameBindings: ['sizing', 'validity'],
+
+  utilityName: 'description'
+});
+
+InputDescriptionComponent.reopenClass({
+  positionalParams: ['text']
+});
+
+export default InputDescriptionComponent;

addon/components/tf-input/input-description/template.hbs

@@ -0,0 +1 @@
+{{text}}

addon/components/tf-input/input-label/component.js

@@ -0,0 +1,26 @@
+/**
+  @module ticketfly-fields
+ */
+import Ember from 'ember';
+import SizingMixin from 'ticketfly-fields/mixins/sizing-mixin';
+import ValidityMixin from 'ticketfly-fields/mixins/validity-mixin';
+import layout from './template';
+const { Component } = Ember;
+
+/**
+  @class TfInputLabel
+  @extends Ember.Computed
+ */
+const InputLabelComponent = Component.extend(SizingMixin, ValidityMixin, {
+  layout,
+
+  tagName: 'label',
+  classNameBindings: ['sizing', 'validity'],
+  attributeBindings: ['for']
+});
+
+InputLabelComponent.reopenClass({
+  positionalParams: ['text']
+});
+
+export default InputLabelComponent;

addon/components/tf-input/input-label/template.hbs

@@ -0,0 +1 @@
+{{text}}

addon/components/tf-textarea/component.js

@@ -0,0 +1,14 @@
+/**
+  @module ticketfly-fields
+ */
+import Ember from 'ember';
+const { TextArea } = Ember;
+
+/**
+  @public
+  @class TfTextarea
+  @extends Ember.TextArea
+ */
+export default TextArea.extend({
+  classNames: ['c-textarea']
+});

addon/mixins/sizing-mixin.js

@@ -0,0 +1,38 @@
+/**
+ * @module ticketfly-fields
+ */
+import Ember from 'ember';
+const { Mixin, computed, get } = Ember;
+
+/**
+  @class SizingMixin
+  @extends Ember.Mixin
+ */
+export default Mixin.create({
+  sizing: computed('sizeStyle','utilityName', {
+    get() {
+      const sizeStyle = get(this, 'sizeStyle');
+      if (sizeStyle) {
+        const utilityName = get(this, 'utilityName');
+        return `u-${utilityName}-${sizeStyle}`;
+      }
+    }
+  }),
+
+  /**
+    Override the utilityName property for a more unique sizing class name. 
+    Defaults to the class' tagName
+
+    Example
+
+    If the tagName of the component is 'p', one can set the utilityName to change
+    the return value of sizing:
+
+    ```javascript
+    get(this, 'sizing');                        // 'u-p-large'
+    set(this, 'utilityName', 'description');
+    get(this, 'sizing');                        // 'u-description-large'  
+    ```
+   */
+  utilityName: computed.oneWay('tagName')
+});

addon/mixins/validity-mixin.js

@@ -0,0 +1,22 @@
+/**
+ * @module ticketfly-fields
+ */
+import Ember from 'ember';
+const { Mixin, computed, get } = Ember;
+
+/**
+  @class ValidityMixin
+  @extends Ember.Mixin
+ */
+export default Mixin.create({
+  shouldValidate: false,
+  isValid: false,
+
+  validity: computed('shouldValidate','isValid', {
+    get() {
+      if (get(this, 'shouldValidate')) {
+        return get(this, 'isValid') ? 'is-valid' : 'is-invalid';
+      }
+    }
+  })
+});

app/components/tf-input-group.js

@@ -0,0 +1 @@
+export { default } from 'ticketfly-fields/components/tf-input-group/component';

app/components/tf-input.js

@@ -0,0 +1 @@
+export { default } from 'ticketfly-fields/components/tf-input/component';

app/components/tf-input/input-description.js

@@ -0,0 +1 @@
+export { default } from 'ticketfly-fields/components/tf-input/input-description/component';

app/components/tf-input/input-label.js

@@ -0,0 +1 @@
+export { default } from 'ticketfly-fields/components/tf-input/input-label/component';

app/components/tf-textarea.js

@@ -0,0 +1 @@
+export { default } from 'ticketfly-fields/components/tf-textarea/component';

package.json

@@ -1,9 +1,12 @@
 {
   "name": "ticketfly-fields",
   "version": "0.0.0",
-  "description": "The default blueprint for ember-cli addons.",
+  "description": "The field components of the Ticketfly UI library.",
   "keywords": [
-    "ember-addon"
+    "ember-addon",
+    "ticketfly",
+    "ticketfly-ui",
+    "fields"
   ],
   "license": "MIT",
   "author": "",
@@ -18,15 +21,15 @@
     "test": "ember try:each"
   },
   "dependencies": {
-    "ember-cli-babel": "^5.1.7"
+    "ember-cli-babel": "^5.1.7",
+    "ember-cli-htmlbars": "^1.0.10"
   },
   "devDependencies": {
     "broccoli-asset-rev": "^2.4.5",
     "ember-ajax": "^2.4.1",
     "ember-cli": "2.10.0",
     "ember-cli-app-version": "^2.0.0",
     "ember-cli-dependency-checker": "^1.3.0",
-    "ember-cli-htmlbars": "^1.0.10",
     "ember-cli-htmlbars-inline-precompile": "^0.3.3",
     "ember-cli-inject-live-reload": "^1.4.1",
     "ember-cli-jshint": "^2.0.1",