@digigov/react-core 0.2.0 → 0.3.0

package/src/TextInput/__snapshots__/index.test.tsx.snap

@@ -1,92 +1,80 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the TextInput  with with characterWidth=5 with width=full 1`] = `
+exports[`renders the TextInput  with with characterWidth=5 with cellWidth=full 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="5"
-  width="full"
+  cellWidth="full"
+  characterWidth={5}
 >
   <input
-    className="govgr-!-width-full govgr-input"
-    type="text"
-  />
-</ForwardRef(TextInput)>
-`;
-
-exports[`renders the TextInput  with with characterWidth=5 with width=one-half 1`] = `
-<ForwardRef(TextInput)
-  characterWidth="5"
-  width="one-half"
->
-  <input
-    className="govgr-!-width-one-half govgr-input"
+    className="govgr-input--width-5 govgr-!-width-full govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput  with with characterWidth=5 with width=one-quarter 1`] = `
+exports[`renders the TextInput  with with characterWidth=5 with cellWidth=one-half 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="5"
-  width="one-quarter"
+  cellWidth="one-half"
+  characterWidth={5}
 >
   <input
-    className="govgr-!-width-one-quarter govgr-input"
+    className="govgr-!-width-one-half govgr-input--width-5 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput  with with characterWidth=5 with width=one-third 1`] = `
+exports[`renders the TextInput  with with characterWidth=5 with cellWidth=one-quarter 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="5"
-  width="one-third"
+  cellWidth="one-quarter"
+  characterWidth={5}
 >
   <input
-    className="govgr-!-width-one-third govgr-input"
+    className="govgr-!-width-one-quarter govgr-input--width-5 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput  with with characterWidth=5 with width=three-quarters 1`] = `
+exports[`renders the TextInput  with with characterWidth=5 with cellWidth=one-third 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="5"
-  width="three-quarters"
+  cellWidth="one-third"
+  characterWidth={5}
 >
   <input
-    className="govgr-!-width-three-quarters govgr-input"
+    className="govgr-!-width-one-third govgr-input--width-5 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput  with with characterWidth=5 with width=two-thirds 1`] = `
+exports[`renders the TextInput  with with characterWidth=5 with cellWidth=three-quarters 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="5"
-  width="two-thirds"
+  cellWidth="three-quarters"
+  characterWidth={5}
 >
   <input
-    className="govgr-!-width-two-thirds govgr-input"
+    className="govgr-!-width-three-quarters govgr-input--width-5 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=2 1`] = `
+exports[`renders the TextInput  with with characterWidth=5 with cellWidth=two-thirds 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="2"
+  cellWidth="two-thirds"
+  characterWidth={5}
 >
   <input
-    className="govgr-input"
+    className="govgr-!-width-two-thirds govgr-input--width-5 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=2 and with width=full 1`] = `
+exports[`renders the TextInput with cellWidth=full 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="2"
-  width="full"
+  cellWidth="full"
 >
   <input
     className="govgr-!-width-full govgr-input"
@@ -95,10 +83,9 @@ exports[`renders the TextInput with characterWidth=2 and with width=full 1`] = `
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=2 and with width=one-half 1`] = `
+exports[`renders the TextInput with cellWidth=one-half 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="2"
-  width="one-half"
+  cellWidth="one-half"
 >
   <input
     className="govgr-!-width-one-half govgr-input"
@@ -107,10 +94,9 @@ exports[`renders the TextInput with characterWidth=2 and with width=one-half 1`]
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=2 and with width=one-quarter 1`] = `
+exports[`renders the TextInput with cellWidth=one-quarter 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="2"
-  width="one-quarter"
+  cellWidth="one-quarter"
 >
   <input
     className="govgr-!-width-one-quarter govgr-input"
@@ -119,10 +105,9 @@ exports[`renders the TextInput with characterWidth=2 and with width=one-quarter
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=2 and with width=one-third 1`] = `
+exports[`renders the TextInput with cellWidth=one-third 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="2"
-  width="one-third"
+  cellWidth="one-third"
 >
   <input
     className="govgr-!-width-one-third govgr-input"
@@ -131,10 +116,9 @@ exports[`renders the TextInput with characterWidth=2 and with width=one-third 1`
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=2 and with width=three-quarters 1`] = `
+exports[`renders the TextInput with cellWidth=three-quarters 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="2"
-  width="three-quarters"
+  cellWidth="three-quarters"
 >
   <input
     className="govgr-!-width-three-quarters govgr-input"
@@ -143,10 +127,9 @@ exports[`renders the TextInput with characterWidth=2 and with width=three-quarte
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=2 and with width=two-thirds 1`] = `
+exports[`renders the TextInput with cellWidth=two-thirds 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="2"
-  width="two-thirds"
+  cellWidth="two-thirds"
 >
   <input
     className="govgr-!-width-two-thirds govgr-input"
@@ -155,347 +138,364 @@ exports[`renders the TextInput with characterWidth=2 and with width=two-thirds 1
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=3 1`] = `
+exports[`renders the TextInput with characterWidth=2 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="3"
+  characterWidth={2}
 >
   <input
-    className="govgr-input"
+    className="govgr-input--width-2 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=3 and with width=full 1`] = `
+exports[`renders the TextInput with characterWidth=2 and with cellWidth=full 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="3"
-  width="full"
+  cellWidth="full"
+  characterWidth={2}
 >
   <input
-    className="govgr-!-width-full govgr-input"
+    className="govgr-input--width-2 govgr-!-width-full govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=3 and with width=one-half 1`] = `
+exports[`renders the TextInput with characterWidth=2 and with cellWidth=one-half 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="3"
-  width="one-half"
+  cellWidth="one-half"
+  characterWidth={2}
 >
   <input
-    className="govgr-!-width-one-half govgr-input"
+    className="govgr-!-width-one-half govgr-input--width-2 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=3 and with width=one-quarter 1`] = `
+exports[`renders the TextInput with characterWidth=2 and with cellWidth=one-quarter 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="3"
-  width="one-quarter"
+  cellWidth="one-quarter"
+  characterWidth={2}
 >
   <input
-    className="govgr-!-width-one-quarter govgr-input"
+    className="govgr-!-width-one-quarter govgr-input--width-2 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=3 and with width=one-third 1`] = `
+exports[`renders the TextInput with characterWidth=2 and with cellWidth=one-third 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="3"
-  width="one-third"
+  cellWidth="one-third"
+  characterWidth={2}
 >
   <input
-    className="govgr-!-width-one-third govgr-input"
+    className="govgr-!-width-one-third govgr-input--width-2 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=3 and with width=three-quarters 1`] = `
+exports[`renders the TextInput with characterWidth=2 and with cellWidth=three-quarters 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="3"
-  width="three-quarters"
+  cellWidth="three-quarters"
+  characterWidth={2}
 >
   <input
-    className="govgr-!-width-three-quarters govgr-input"
+    className="govgr-!-width-three-quarters govgr-input--width-2 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=3 and with width=two-thirds 1`] = `
+exports[`renders the TextInput with characterWidth=2 and with cellWidth=two-thirds 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="3"
-  width="two-thirds"
+  cellWidth="two-thirds"
+  characterWidth={2}
 >
   <input
-    className="govgr-!-width-two-thirds govgr-input"
+    className="govgr-!-width-two-thirds govgr-input--width-2 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=4 1`] = `
+exports[`renders the TextInput with characterWidth=3 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="4"
+  characterWidth={3}
 >
   <input
-    className="govgr-input"
+    className="govgr-input--width-3 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=4 and with width=full 1`] = `
+exports[`renders the TextInput with characterWidth=3 and with cellWidth=full 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="4"
-  width="full"
+  cellWidth="full"
+  characterWidth={3}
 >
   <input
-    className="govgr-!-width-full govgr-input"
+    className="govgr-input--width-3 govgr-!-width-full govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=4 and with width=one-half 1`] = `
+exports[`renders the TextInput with characterWidth=3 and with cellWidth=one-half 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="4"
-  width="one-half"
+  cellWidth="one-half"
+  characterWidth={3}
 >
   <input
-    className="govgr-!-width-one-half govgr-input"
+    className="govgr-!-width-one-half govgr-input--width-3 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=4 and with width=one-quarter 1`] = `
+exports[`renders the TextInput with characterWidth=3 and with cellWidth=one-quarter 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="4"
-  width="one-quarter"
+  cellWidth="one-quarter"
+  characterWidth={3}
 >
   <input
-    className="govgr-!-width-one-quarter govgr-input"
+    className="govgr-!-width-one-quarter govgr-input--width-3 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=4 and with width=one-third 1`] = `
+exports[`renders the TextInput with characterWidth=3 and with cellWidth=one-third 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="4"
-  width="one-third"
+  cellWidth="one-third"
+  characterWidth={3}
 >
   <input
-    className="govgr-!-width-one-third govgr-input"
+    className="govgr-!-width-one-third govgr-input--width-3 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=4 and with width=three-quarters 1`] = `
+exports[`renders the TextInput with characterWidth=3 and with cellWidth=three-quarters 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="4"
-  width="three-quarters"
+  cellWidth="three-quarters"
+  characterWidth={3}
 >
   <input
-    className="govgr-!-width-three-quarters govgr-input"
+    className="govgr-!-width-three-quarters govgr-input--width-3 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=4 and with width=two-thirds 1`] = `
+exports[`renders the TextInput with characterWidth=3 and with cellWidth=two-thirds 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="4"
-  width="two-thirds"
+  cellWidth="two-thirds"
+  characterWidth={3}
 >
   <input
-    className="govgr-!-width-two-thirds govgr-input"
+    className="govgr-!-width-two-thirds govgr-input--width-3 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=5 1`] = `
+exports[`renders the TextInput with characterWidth=4 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="5"
+  characterWidth={4}
 >
   <input
-    className="govgr-input"
+    className="govgr-input--width-4 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=10 1`] = `
+exports[`renders the TextInput with characterWidth=4 and with cellWidth=full 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="10"
+  cellWidth="full"
+  characterWidth={4}
 >
   <input
-    className="govgr-input"
+    className="govgr-input--width-4 govgr-!-width-full govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=20 1`] = `
+exports[`renders the TextInput with characterWidth=4 and with cellWidth=one-half 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="20"
+  cellWidth="one-half"
+  characterWidth={4}
 >
   <input
-    className="govgr-input"
+    className="govgr-!-width-one-half govgr-input--width-4 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=20 and with width=full 1`] = `
+exports[`renders the TextInput with characterWidth=4 and with cellWidth=one-quarter 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="20"
-  width="full"
+  cellWidth="one-quarter"
+  characterWidth={4}
 >
   <input
-    className="govgr-!-width-full govgr-input"
+    className="govgr-!-width-one-quarter govgr-input--width-4 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=20 and with width=one-half 1`] = `
+exports[`renders the TextInput with characterWidth=4 and with cellWidth=one-third 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="20"
-  width="one-half"
+  cellWidth="one-third"
+  characterWidth={4}
 >
   <input
-    className="govgr-!-width-one-half govgr-input"
+    className="govgr-!-width-one-third govgr-input--width-4 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=20 and with width=one-quarter 1`] = `
+exports[`renders the TextInput with characterWidth=4 and with cellWidth=three-quarters 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="20"
-  width="one-quarter"
+  cellWidth="three-quarters"
+  characterWidth={4}
 >
   <input
-    className="govgr-!-width-one-quarter govgr-input"
+    className="govgr-!-width-three-quarters govgr-input--width-4 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=20 and with width=one-third 1`] = `
+exports[`renders the TextInput with characterWidth=4 and with cellWidth=two-thirds 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="20"
-  width="one-third"
+  cellWidth="two-thirds"
+  characterWidth={4}
 >
   <input
-    className="govgr-!-width-one-third govgr-input"
+    className="govgr-!-width-two-thirds govgr-input--width-4 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=20 and with width=three-quarters 1`] = `
+exports[`renders the TextInput with characterWidth=5 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="20"
-  width="three-quarters"
+  characterWidth={5}
 >
   <input
-    className="govgr-!-width-three-quarters govgr-input"
+    className="govgr-input--width-5 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with characterWidth=20 and with width=two-thirds 1`] = `
+exports[`renders the TextInput with characterWidth=10 1`] = `
 <ForwardRef(TextInput)
-  characterWidth="20"
-  width="two-thirds"
+  characterWidth={10}
 >
   <input
-    className="govgr-!-width-two-thirds govgr-input"
+    className="govgr-input--width-10 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with no props 1`] = `
-<ForwardRef(TextInput)>
+exports[`renders the TextInput with characterWidth=20 1`] = `
+<ForwardRef(TextInput)
+  characterWidth={20}
+>
   <input
-    className="govgr-input"
+    className="govgr-input--width-20 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with width=full 1`] = `
+exports[`renders the TextInput with characterWidth=20 and with cellWidth=full 1`] = `
 <ForwardRef(TextInput)
-  width="full"
+  cellWidth="full"
+  characterWidth={20}
 >
   <input
-    className="govgr-!-width-full govgr-input"
+    className="govgr-input--width-20 govgr-!-width-full govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with width=one-half 1`] = `
+exports[`renders the TextInput with characterWidth=20 and with cellWidth=one-half 1`] = `
 <ForwardRef(TextInput)
-  width="one-half"
+  cellWidth="one-half"
+  characterWidth={20}
 >
   <input
-    className="govgr-!-width-one-half govgr-input"
+    className="govgr-!-width-one-half govgr-input--width-20 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with width=one-quarter 1`] = `
+exports[`renders the TextInput with characterWidth=20 and with cellWidth=one-quarter 1`] = `
 <ForwardRef(TextInput)
-  width="one-quarter"
+  cellWidth="one-quarter"
+  characterWidth={20}
 >
   <input
-    className="govgr-!-width-one-quarter govgr-input"
+    className="govgr-!-width-one-quarter govgr-input--width-20 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with width=one-third 1`] = `
+exports[`renders the TextInput with characterWidth=20 and with cellWidth=one-third 1`] = `
 <ForwardRef(TextInput)
-  width="one-third"
+  cellWidth="one-third"
+  characterWidth={20}
 >
   <input
-    className="govgr-!-width-one-third govgr-input"
+    className="govgr-!-width-one-third govgr-input--width-20 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with width=three-quarters 1`] = `
+exports[`renders the TextInput with characterWidth=20 and with cellWidth=three-quarters 1`] = `
 <ForwardRef(TextInput)
-  width="three-quarters"
+  cellWidth="three-quarters"
+  characterWidth={20}
 >
   <input
-    className="govgr-!-width-three-quarters govgr-input"
+    className="govgr-!-width-three-quarters govgr-input--width-20 govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>
 `;
 
-exports[`renders the TextInput with width=two-thirds 1`] = `
+exports[`renders the TextInput with characterWidth=20 and with cellWidth=two-thirds 1`] = `
 <ForwardRef(TextInput)
-  width="two-thirds"
+  cellWidth="two-thirds"
+  characterWidth={20}
 >
   <input
-    className="govgr-!-width-two-thirds govgr-input"
+    className="govgr-!-width-two-thirds govgr-input--width-20 govgr-input"
+    type="text"
+  />
+</ForwardRef(TextInput)>
+`;
+
+exports[`renders the TextInput with no props 1`] = `
+<ForwardRef(TextInput)>
+  <input
+    className="govgr-input"
     type="text"
   />
 </ForwardRef(TextInput)>