Make one-way-zip-code-mask component (#56)

Author: brandynbennett

README.md

@@ -70,6 +70,7 @@ This component has the same interface as it's [ember-one-way-controls counterpar
 * [{{one-way-number-mask}}](docs/one-way-number-mask.md)
 * [{{one-way-phone-mask}}](docs/one-way-phone-mask.md)
 * [{{one-way-ssn-mask}}](docs/one-way-ssn-mask.md)
+* [{{one-way-zip-code-mask}}](docs/one-way-zip-code-mask.md)
 
 ## Input Mask Component (deprecated)
 
@@ -253,7 +254,7 @@ than this tag, however.
 
 Masks a US SSN code (`999-99-9999`).
 
-### US ZIP Code Inputs
+### US ZIP Code Inputs (deprecated)
 
 ```hbs
 {{zip-code-input unmaskedValue=foo fullCode=false}}

addon/components/one-way-zip-code-mask.js

@@ -0,0 +1,32 @@
+import OneWayInputMask, { DEFAULT_NON_BOUND_PROPS }  from 'ember-inputmask/components/one-way-input-mask';
+import { computed, get } from '@ember/object';
+
+/**
+ * `{{one-way-zip-code-mask}}` component.
+ *
+ * Displays an input that masks a US ZIP code.
+ *
+ * Future: Add config options that allow users to set locality
+ * app wide.
+ *
+ * @param {boolean} fullCode Allows users to optionally enter the full ZIP+4 area code.e
+ */
+export default OneWayInputMask.extend({
+  NON_ATTRIBUTE_BOUND_PROPS: DEFAULT_NON_BOUND_PROPS.concat('fullCode'),
+
+  /**
+   * Allows users to optionally enter the full ZIP+4 area code.
+   */
+  fullCode: false,
+
+  /**
+   * @override
+   */
+  mask: computed('fullCode', function() {
+    if (get(this, 'fullCode')) {
+      return '99999[-9999]';
+    }
+
+    return '99999';
+  }),
+});

app/components/one-way-zip-code-mask.js

@@ -0,0 +1 @@
+export { default } from 'ember-inputmask/components/one-way-zip-code-mask';

docs/one-way-zip-code-mask.md

@@ -0,0 +1,19 @@
+One Way Zip Code Mask
+=====================
+
+```
+{{one-way-zip-code-mask value update=(action (mut value))}}
+```
+
+Masks a US ZIP code.
+
+## Arguments
+
+### fullCode
+
+```
+{{one-way-zip-code-mask value fullCode=true update=(action (mut value))}}
+```
+
+If `fullCode` is set to `true`, then it will enable the
+user to enter an extended ZIP+4 code.

tests/dummy/app/templates/application.hbs

@@ -33,7 +33,7 @@
 
   <fieldset>
     <legend>US Zip code input:</legend>
-    {{zip-code-input}}
+    {{one-way-zip-code-mask}}
   </fieldset>
 
   <fieldset>

tests/integration/components/one-way-zip-code-mask-test.js

@@ -0,0 +1,27 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import { fillIn, find } from 'ember-native-dom-helpers';
+
+moduleForComponent('one-way-zip-code-mask', 'Integration | Component | one way zip code mask', {
+  integration: true,
+
+  beforeEach() {
+    this.set('update', unmaskedValue => {
+      this.set('unmaskedValue', unmaskedValue);
+    });
+  },
+});
+
+test('filled-in value', async function(assert) {
+  this.render(hbs`{{one-way-zip-code-mask value=unmaskedValue update=update}}`);
+  await fillIn('input', '12345');
+  assert.equal(find('input').value, '12345');
+  assert.equal(this.unmaskedValue, 12345);
+});
+
+test('full code works', async function(assert) {
+  this.render(hbs`{{one-way-zip-code-mask value=unmaskedValue fullCode=true update=update}}`);
+  await fillIn('input', '123451234');
+  assert.equal(find('input').value, '12345-1234');
+  assert.equal(this.unmaskedValue, 123451234);
+});