homeflowjs 1.0.49 → 1.0.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "1.0.49",
+  "version": "1.0.51",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

package/search/address-lookup-input/address-lookup-input.component.jsx

@@ -17,6 +17,7 @@ const AddressLookupInput = ({
   name,
   required,
   setSelectedAddress,
+  iconStokeInherit,
 }) => {
   const [locationQuery, setLocationQuery] = useState('');
   const [suggestions, setSuggestions] = useState([]);
@@ -138,7 +139,7 @@ const AddressLookupInput = ({
   }, [inputRef, clickedOutSide]);
 
   return (
-    <div className="address-lookup-input" ref={inputRef}>
+    <div className="hf-address-lookup-input address-lookup-input" ref={inputRef}>
       <Input
         id="address-lookup-input"
         name={name}
@@ -156,6 +157,7 @@ const AddressLookupInput = ({
         className={className}
         // autoComplete false won't in chrome but if we set it to some random value it will work
         autoComplete="nope"
+        iconStokeInherit={iconStokeInherit}
       />
       {/* Render the search results  */}
       {suggestions.length > 0 && (
@@ -191,6 +193,7 @@ AddressLookupInput.propTypes = {
   required: PropTypes.bool,
   className: PropTypes.string,
   setSelectedAddress: PropTypes.func,
+  iconStokeInherit: PropTypes.bool,
 };
 
 AddressLookupInput.defaultProps = {
@@ -200,6 +203,7 @@ AddressLookupInput.defaultProps = {
   required: false,
   className: '',
   setSelectedAddress: null,
+  iconStokeInherit: true,
 };
 
 export default AddressLookupInput;

package/search/address-lookup-input/clear-button.component.jsx

@@ -4,7 +4,7 @@ import SearchIcon from '../../shared/search-icon.component';
 import CloseIcon from '../../shared/close-icon.component';
 import LoadingIcon from '../../shared/loading-icon.component';
 
-const ClearButton = ({ address, loading, onClear }) => (
+const ClearButton = ({ address, loading, onClear, iconStokeInherit }) => (
   <button
     type="button"
     className="address-lookup-input__btn btn-unstyled"
@@ -13,13 +13,13 @@ const ClearButton = ({ address, loading, onClear }) => (
     disabled={Object.keys(address.value).length === 0}
   >
     {Object.keys(address.value).length === 0 && !loading && (
-      <SearchIcon />
+      <SearchIcon inherit={iconStokeInherit} />
     )}
     {Object.keys(address.value).length !== 0 && !loading && (
-    <CloseIcon />
+      <CloseIcon inherit={iconStokeInherit} />
     )}
     {loading && (
-    <LoadingIcon />
+      <LoadingIcon inherit={iconStokeInherit} />
     )}
   </button>
 );
@@ -28,6 +28,11 @@ ClearButton.propTypes = {
   address: PropTypes.object.isRequired,
   loading: PropTypes.bool.isRequired,
   onClear: PropTypes.func.isRequired,
+  iconStokeInherit: PropTypes.bool,
 };
 
+ClearButton.defaultProps = {
+  iconStokeInherit: true,
+}
+
 export default ClearButton;

package/search/address-lookup-input/input.jsx

@@ -21,6 +21,7 @@ const Input = ({
   className,
   required,
   loading,
+  iconStokeInherit,
   ...other
 }) => (
   <div className={`input ${address?.error ? 'input--error' : ''} ${fullWidth ? 'input--full-width' : ''} ${onDark ? 'input--on-dark' : ''}`}>
@@ -41,7 +42,7 @@ const Input = ({
         required={required}
         {...other}
       />
-      <ClearButton address={address} loading={loading} onClear={onClear} />
+      <ClearButton address={address} loading={loading} onClear={onClear} iconStokeInherit={iconStokeInherit} />
     </div>
     {address?.error && typeof (address.error) === 'string' && (
       <span className="input__error">{address.error}</span>
@@ -70,6 +71,7 @@ Input.propTypes = {
   ]),
   className: PropTypes.string,
   required: PropTypes.bool,
+  iconStokeInherit: PropTypes.bool,
 };
 
 Input.defaultProps = {
@@ -83,6 +85,7 @@ Input.defaultProps = {
   disabled: false,
   className: '',
   required: false,
+  iconStokeInherit: true,
 };
 
 export default Input;

package/shared/close-icon.component.jsx

@@ -1,13 +1,22 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
-const CloseIcon = () => (
+const CloseIcon = ({inherit}) => (
   <svg role="img" xmlns="http://www.w3.org/2000/svg" width="20.52" height="20.52" viewBox="0 0 20.52 20.52">
     <title>Close Icon</title>
     <g transform="translate(-336.011 -145.97)">
-      <line x2="19.459" y2="19.459" transform="translate(336.541 146.5)" fill="none" stroke="inherit" strokeWidth="1.5" />
-      <line x1="19.459" y2="19.459" transform="translate(336.541 146.5)" fill="none" stroke="inherit" strokeWidth="1.5" />
+      <line x2="19.459" y2="19.459" transform="translate(336.541 146.5)" fill="none" stroke={`${inherit ? 'inherit' : '#fff'}`} strokeWidth="1.5" />
+      <line x1="19.459" y2="19.459" transform="translate(336.541 146.5)" fill="none" stroke={`${inherit ? 'inherit' : '#fff'}`} strokeWidth="1.5" />
     </g>
   </svg>
 );
 
+CloseIcon.propTypes = {
+  inherit: PropTypes.bool,
+};
+
+CloseIcon.defaultProps = {
+  inherit: false,
+};
+
 export default CloseIcon;

package/shared/loading-icon.component.jsx

@@ -1,11 +1,21 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
-const LoadingIcon = () => (
+const LoadingIcon = ({inherit}) => (
   <svg role="img" className="loading-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <title>Loading Icon</title>
-    <path d="M23 4V10H17" stroke="inherit" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-    <path d="M20.49 15C19.84 16.8399 18.6096 18.4187 16.9842 19.4985C15.3588 20.5783 13.4265 21.1006 11.4784 20.9866C9.53038 20.8726 7.67216 20.1286 6.18376 18.8667C4.69536 17.6047 3.65743 15.8932 3.22637 13.9901C2.79531 12.0869 2.99448 10.0952 3.79386 8.31508C4.59325 6.53496 5.94954 5.06288 7.65836 4.12065C9.36717 3.17843 11.3359 2.81711 13.268 3.09116C15.2 3.3652 16.9906 4.25975 18.37 5.64001L23 10" stroke="inherit" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M23 4V10H17" stroke={`${inherit ? 'inherit' : '#fff'}`} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M20.49 15C19.84 16.8399 18.6096 18.4187 16.9842 19.4985C15.3588 20.5783 13.4265 21.1006 11.4784 20.9866C9.53038 20.8726 7.67216 20.1286 6.18376 18.8667C4.69536 17.6047 3.65743 15.8932 3.22637 13.9901C2.79531 12.0869 2.99448 10.0952 3.79386 8.31508C4.59325 6.53496 5.94954 5.06288 7.65836 4.12065C9.36717 3.17843 11.3359 2.81711 13.268 3.09116C15.2 3.3652 16.9906 4.25975 18.37 5.64001L23 10" stroke={`${inherit ? 'inherit' : '#fff'}`} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 );
 
+LoadingIcon.propTypes = {
+  inherit: PropTypes.bool,
+};
+
+LoadingIcon.defaultProps = {
+  inherit: false,
+};
+
+
 export default LoadingIcon;