@justfixnyc/component-library 0.50.1 → 0.51.0

package/dist/src/assets/index.css

@@ -632,6 +632,10 @@
   font-size: 1.125rem;
   line-height: 120%;
   letter-spacing: 0.54px;
+  display: flex;
+  justify-content: center;
+  flex-grow: 1;
+  white-space: nowrap;
   border-radius: 6px;
   border: 1px solid #9a9898;
   background: #faf8f4;
@@ -663,6 +667,17 @@
   letter-spacing: 0.54px;
   color: #242323;
   margin-bottom: 2rem;
+  position: relative;
+  --input-padding-left: 9px;
+}
+.jfcl-text-input.jfcl-text-input--has-prefix {
+  --input-padding-left: 31.5px;
+}
+.jfcl-text-input .jfcl-text-input__prefix {
+  position: absolute;
+  left: 14px;
+  height: 44px;
+  line-height: 44px;
 }
 .jfcl-text-input .jfcl-text-input__input {
   font-family: "Degular", Arial, Helvetica, sans-serif;
@@ -674,7 +689,10 @@
   box-sizing: border-box;
   width: 100%;
   height: 44px;
-  padding: 10px 9px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-right: 9px;
+  padding-left: var(--input-padding-left);
   border-radius: 4px;
   border: 1px solid #242323;
   background: #faf8f4;
@@ -691,7 +709,7 @@
 .jfcl-text-input .jfcl-text-input__input:active:not(:disabled) {
   border-radius: 4px;
   border: 2px solid #242323;
-  padding-left: 8px;
+  padding-left: calc(var(--input-padding-left) - 1px);
   background: #ffffff;
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
 }

package/dist/src/assets/index.es.css

@@ -632,6 +632,10 @@
   font-size: 1.125rem;
   line-height: 120%;
   letter-spacing: 0.54px;
+  display: flex;
+  justify-content: center;
+  flex-grow: 1;
+  white-space: nowrap;
   border-radius: 6px;
   border: 1px solid #9a9898;
   background: #faf8f4;
@@ -663,6 +667,17 @@
   letter-spacing: 0.54px;
   color: #242323;
   margin-bottom: 2rem;
+  position: relative;
+  --input-padding-left: 9px;
+}
+.jfcl-text-input.jfcl-text-input--has-prefix {
+  --input-padding-left: 31.5px;
+}
+.jfcl-text-input .jfcl-text-input__prefix {
+  position: absolute;
+  left: 14px;
+  height: 44px;
+  line-height: 44px;
 }
 .jfcl-text-input .jfcl-text-input__input {
   font-family: "Degular", Arial, Helvetica, sans-serif;
@@ -674,7 +689,10 @@
   box-sizing: border-box;
   width: 100%;
   height: 44px;
-  padding: 10px 9px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-right: 9px;
+  padding-left: var(--input-padding-left);
   border-radius: 4px;
   border: 1px solid #242323;
   background: #faf8f4;
@@ -691,7 +709,7 @@
 .jfcl-text-input .jfcl-text-input__input:active:not(:disabled) {
   border-radius: 4px;
   border: 2px solid #242323;
-  padding-left: 8px;
+  padding-left: calc(var(--input-padding-left) - 1px);
   background: #ffffff;
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
 }

package/dist/src/index.es.js

@@ -545,8 +545,11 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     type = 'text',
     ...props
   } = _ref;
+  const inputIsMoney = type === 'money';
+  const inputType = inputIsMoney ? 'text' : type;
   const textInputWrapperClassNames = classNames('jfcl-text-input', {
-    ['jfcl-text-input--is-invalid']: invalid
+    ['jfcl-text-input--is-invalid']: invalid,
+    ["jfcl-text-input--has-prefix"]: inputIsMoney
   }, className);
   const textInputClassNames = classNames('jfcl-text-input__input', {
     ["jfcl-text-input--size-".concat(size)]: size
@@ -560,12 +563,14 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     invalidText: invalidText,
     invalid: invalid,
     labelFor: id
-  }), /*#__PURE__*/React.createElement("input", _extends({
+  }), inputIsMoney && /*#__PURE__*/React.createElement("span", {
+    className: "jfcl-text-input__prefix"
+  }, "$"), /*#__PURE__*/React.createElement("input", _extends({
     ref: ref
   }, props, {
     id: id,
     className: textInputClassNames,
-    type: type
+    type: inputType
   })));
 });
 TextInput.displayName = 'TextInput';

package/dist/src/index.js

@@ -556,8 +556,11 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
     type = 'text',
     ...props
   } = _ref;
+  const inputIsMoney = type === 'money';
+  const inputType = inputIsMoney ? 'text' : type;
   const textInputWrapperClassNames = classNames__default["default"]('jfcl-text-input', {
-    ['jfcl-text-input--is-invalid']: invalid
+    ['jfcl-text-input--is-invalid']: invalid,
+    ["jfcl-text-input--has-prefix"]: inputIsMoney
   }, className);
   const textInputClassNames = classNames__default["default"]('jfcl-text-input__input', {
     ["jfcl-text-input--size-".concat(size)]: size
@@ -571,12 +574,14 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
     invalidText: invalidText,
     invalid: invalid,
     labelFor: id
-  }), /*#__PURE__*/React__default["default"].createElement("input", _extends__default["default"]({
+  }), inputIsMoney && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "jfcl-text-input__prefix"
+  }, "$"), /*#__PURE__*/React__default["default"].createElement("input", _extends__default["default"]({
     ref: ref
   }, props, {
     id: id,
     className: textInputClassNames,
-    type: type
+    type: inputType
   })));
 });
 TextInput.displayName = 'TextInput';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@justfixnyc/component-library",
   "description": "JustFix Component Library",
   "license": "MIT",
-  "version": "0.50.1",
+  "version": "0.51.0",
   "main": "dist/src/index.js",
   "module": "dist/src/index.es.js",
   "files": [