feat: allow specifying input type

arenoir · May 10, 2024 · fae53c3 · fae53c3
1 parent e69444c
commit fae53c3
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 2 deletions.
diff --git a/addon/components/input-credit-card-cvc.hbs b/addon/components/input-credit-card-cvc.hbs
@@ -1,5 +1,5 @@
 <Input
-  @type="tel"
+  @type={{this.type}}
   @value={{this.cvc}}
   class="input-credit-card-cvc"
   placeholder="•••"

diff --git a/addon/components/input-credit-card-cvc.js b/addon/components/input-credit-card-cvc.js
@@ -10,6 +10,10 @@ function inputValid(value) {
 }
 
 export default class InputCreditCardCvcComponent extends Component {
+  get type() {
+    return this.args.type || 'tel';
+  }
+
   get cvc() {
     return formatters.formatCvc(this.args.cvc);
   }

diff --git a/addon/components/input-credit-card-number.hbs b/addon/components/input-credit-card-number.hbs
@@ -1,5 +1,5 @@
 <Input
-  @type="tel"
+  @type={{this.type}}
   @value={{this.number}}
   autocomplete="cc-number"
   class="input-credit-card-number"

diff --git a/addon/components/input-credit-card-number.js b/addon/components/input-credit-card-number.js
@@ -24,6 +24,10 @@ function inputValid(value) {
 }
 
 export default class InputCreditCardNumberComponent extends Component {
+  get type() {
+    return this.args.type || 'tel';
+  }
+
   get number() {
     return formatters.formatNumber(this.args.number);
   }

diff --git a/tests/integration/components/input-credit-card-cvc-test.js b/tests/integration/components/input-credit-card-cvc-test.js
@@ -17,4 +17,10 @@ module('Integration | Component | input-credit-card-cvc', function (hooks) {
 
     assert.equal(this.element.querySelector('.form-control').value, '300');
   });
+
+  test('it can specify the input type', async function (assert) {
+    await render(hbs`<InputCreditCardCvc @type="password" />`);
+
+    assert.dom('input').hasAttribute('type', 'password');
+  });
 });
diff --git a/tests/integration/components/input-credit-card-number-test.js b/tests/integration/components/input-credit-card-number-test.js
@@ -43,4 +43,10 @@ module('Integration | Component | input-credit-card-number', function (hooks) {
     await typeIn('input', '1');
     assert.equal(this.number, '4111111111111111');
   });
+
+  test('it can specify the input type', async function (assert) {
+    await render(hbs`<InputCreditCardNumber @type="password" />`);
+
+    assert.dom('input').hasAttribute('type', 'password');
+  });
 });