feat(localized-money-input): support isReadOnly prop (#1158)

* feat(localized-money-input): support isReadOnly prop

* chore: update readme

Author: montezume

src/components/inputs/localized-money-input/README.md

@@ -33,6 +33,7 @@ import { LocalizedMoneyInput } from '@commercetools-frontend/ui-kit';
 | `hideCurrencyExpansionControls` | `bool`           |    -     | -                       | `false` | Will hide the currency toggle controls when set to `true`. It always shows all currencies instead.                                                                     |
 | `defaultExpandCurrencies`       | `bool`           |    -     | -                       | `false` | Controls whether one or all currencies are visible by default. Pass `true` to show all currencies by default.                                                          |
 | `isDisabled`                    | `bool`           |    -     | -                       | `false` | Disables all input fields.                                                                                                                                             |
+| `isReadOnly`                    | `bool`           |    -     | -                       | `false` | Makes all input fields readonly.                                                                                                                                       |
 | `placeholder`                   | `object`         |    -     | -                       | -       | Placeholders for each currency. Object of the same shape as `value`.                                                                                                   |
 | `horizontalConstraint`          | `object`         |    -     | `m`, `l`, `xl`, `scale` | `scale` | Horizontal size limit of the input fields.                                                                                                                             |
 | `hasError`                      | `bool`           |    -     | -                       | -       | Will apply the error state to each input without showing any error message.                                                                                            |

src/components/inputs/localized-money-input/localized-money-input.js

@@ -68,6 +68,7 @@ const LocalizedInput = props => {
           onChange={handleChange}
           onBlur={props.onBlur}
           isDisabled={props.isDisabled}
+          isReadOnly={props.isReadOnly}
           placeholder={props.placeholder}
           hasError={props.hasError}
           hasWarning={props.hasWarning}
@@ -110,6 +111,7 @@ LocalizedInput.propTypes = {
   onBlur: PropTypes.func,
   onFocus: PropTypes.func,
   isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
   currenciesControl: PropTypes.node,
   hasError: PropTypes.bool,
   hasWarning: PropTypes.bool,
@@ -188,6 +190,7 @@ const LocalizedMoneyInput = props => {
               onBlur={props.onBlur}
               onFocus={props.onFocus}
               isDisabled={props.isDisabled}
+              isReadOnly={props.isReadOnly}
               currenciesControl={(() => {
                 if (
                   !hasRemainingCurrencies ||
@@ -269,6 +272,7 @@ LocalizedMoneyInput.propTypes = {
     return PropTypes.bool(props, propName, componentName, ...rest);
   },
   isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
   placeholder: PropTypes.objectOf(PropTypes.string),
   horizontalConstraint: PropTypes.oneOf(['m', 'l', 'xl', 'scale']),
   hasError: PropTypes.bool,

src/components/inputs/localized-money-input/localized-money-input.story.js

@@ -73,6 +73,7 @@ storiesOf('Components|Inputs', module)
                 defaultExpandCurrencies || undefined
               }
               isDisabled={boolean('isDisabled', false)}
+              isReadOnly={boolean('isReadOnly', false)}
               placeholder={object('placeholder', { EUR: '', USD: '' })}
               horizontalConstraint={select(
                 'horizontalConstraint',

src/components/inputs/localized-money-input/localized-money-input.visualroute.js

@@ -64,6 +64,25 @@ export const component = () => (
         isDisabled={true}
       />
     </Spec>
+    <Spec label="when readonly and open">
+      <LocalizedMoneyInput
+        value={value}
+        onChange={() => {}}
+        selectedCurrency="CAD"
+        horizontalConstraint="m"
+        isReadOnly={true}
+        defaultExpandCurrencies={true}
+      />
+    </Spec>
+    <Spec label="when readonly and closed">
+      <LocalizedMoneyInput
+        value={value}
+        onChange={() => {}}
+        selectedCurrency="CAD"
+        horizontalConstraint="m"
+        isReadOnly={true}
+      />
+    </Spec>
     <Spec label="when there is an error for a specific currency (first one)">
       <LocalizedMoneyInput
         value={value}