From ee7d4c70ab055a94697193507d1747c31726eb62 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Mon, 4 May 2020 14:40:12 -0400
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20@type=20examples?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/components/rose/form/input.js     |  3 ++-
 .../rose/addon/styles/rose/variables/_sizing.scss   |  2 +-
 .../addon/styles/rose/variables/_typography.scss    |  2 +-
 addons/rose/stories/form/input.stories.js           | 13 ++++++++++++-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/input.js b/addons/rose/addon/components/rose/form/input.js
index 49f5f11f3..5d2710b93 100644
--- a/addons/rose/addon/components/rose/form/input.js
+++ b/addons/rose/addon/components/rose/form/input.js
@@ -2,10 +2,11 @@ import Component from '@ember/component';
 import layout from '../../../templates/components/rose/form/input';
 
 /**
- * A simple HTML `<button>` element.
+ * A simple HTML `<input>` element.
  *
  * @example
  *  <Rose::Form::Input
+ *    @type="text"
  *    @value="Text"
  *    @label="Label"
  *    @helperText="Helper text"
diff --git a/addons/rose/addon/styles/rose/variables/_sizing.scss b/addons/rose/addon/styles/rose/variables/_sizing.scss
index 34d5c9628..93ebe4da7 100644
--- a/addons/rose/addon/styles/rose/variables/_sizing.scss
+++ b/addons/rose/addon/styles/rose/variables/_sizing.scss
@@ -23,7 +23,7 @@ $size-coefficients: (
   //  4
     xxxs: 0.125,
   //  2
-    xxxxs: 0.0625 //  1,,
+    xxxxs: 0.0625 //  1,,,
 );
 
 /**
diff --git a/addons/rose/addon/styles/rose/variables/_typography.scss b/addons/rose/addon/styles/rose/variables/_typography.scss
index f733a2930..beaf59a5a 100644
--- a/addons/rose/addon/styles/rose/variables/_typography.scss
+++ b/addons/rose/addon/styles/rose/variables/_typography.scss
@@ -40,7 +40,7 @@ $font-sizes: (
   // 20
     h3: sizing.size(m),
   // 16
-    button: sizing.size(m) * 0.8125 // 13,,
+    button: sizing.size(m) * 0.8125 // 13,,,
 );
 
 // Line height expressed as ratio.
diff --git a/addons/rose/stories/form/input.stories.js b/addons/rose/stories/form/input.stories.js
index df2f09729..b55d202c2 100644
--- a/addons/rose/stories/form/input.stories.js
+++ b/addons/rose/stories/form/input.stories.js
@@ -1,5 +1,5 @@
 import { hbs } from 'ember-cli-htmlbars';
-import { text, boolean } from '@storybook/addon-knobs';
+import { text, boolean, select } from '@storybook/addon-knobs';
 
 export default {
   title: 'Rose::Form::Input',
@@ -8,6 +8,7 @@ export default {
 export const Normal = () => ({
   template: hbs`
     <Rose::Form::Input
+      @type={{type}}
       @value={{value}}
       @label={{label}}
       @helperText={{helperText}}
@@ -17,6 +18,16 @@ export const Normal = () => ({
       />
   `,
   context: {
+    type: select(
+      'type',
+      {
+        text: 'text',
+        email: 'email',
+        number: 'number',
+        password: 'password',
+      },
+      'text'
+    ),
     value: text('value', 'Value'),
     label: text('label', 'Label'),
     helperText: text('helperText', 'Helper text'),