From b2be2c0d489c2154161a621ec9f179552e885955 Mon Sep 17 00:00:00 2001
From: David Rodriguez <drodriguezfeito@gmail.com>
Date: Wed, 20 Oct 2021 15:13:11 -0400
Subject: [PATCH] fix: update CounterInput buttons behavior

---
 .../__test__/counterInput.spec.js             | 18 ++++++++
 src/components/CounterInput/index.js          |  8 +++-
 src/components/CounterInput/readme.md         | 42 +++++++++++++++++++
 3 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/src/components/CounterInput/__test__/counterInput.spec.js b/src/components/CounterInput/__test__/counterInput.spec.js
index 33b0b2b9e..658d30a79 100644
--- a/src/components/CounterInput/__test__/counterInput.spec.js
+++ b/src/components/CounterInput/__test__/counterInput.spec.js
@@ -28,6 +28,24 @@ describe('<CounterInput />', () => {
         expect(onChangeMockFn).toHaveBeenCalledWith(1);
     });
 
+    it('should fire onChange `min` as argument when click in plusButton', () => {
+        const onChangeMockFn = jest.fn();
+        const component = mount(<CounterInput onChange={onChangeMockFn} value={5} min={10} />);
+        const button = component.find('button');
+        const plusButton = button.at(1);
+        plusButton.simulate('mouseDown');
+        expect(onChangeMockFn).toHaveBeenCalledWith(10);
+    });
+
+    it('should fire onChange `max` as argument when click in minusButton', () => {
+        const onChangeMockFn = jest.fn();
+        const component = mount(<CounterInput onChange={onChangeMockFn} value={101} max={100} />);
+        const button = component.find('button');
+        const plusButton = button.at(0);
+        plusButton.simulate('mouseDown');
+        expect(onChangeMockFn).toHaveBeenCalledWith(100);
+    });
+
     it('should fire onChange with -2 as argument when click in minusButton and step = 2', () => {
         const onChangeMockFn = jest.fn();
         const component = mount(<CounterInput onChange={onChangeMockFn} step={2} />);
diff --git a/src/components/CounterInput/index.js b/src/components/CounterInput/index.js
index ff27cca27..e9ac06657 100644
--- a/src/components/CounterInput/index.js
+++ b/src/components/CounterInput/index.js
@@ -72,13 +72,17 @@ const CounterInput = React.forwardRef((props, ref) => {
     const handlePlusMouseDown = event => {
         event.preventDefault();
         inputRef.current.focus();
-        onChange(getNormalizedValue(getValue(Number(value)) + step));
+        const val = getValue(Number(value));
+        if (val < min) return onChange(getNormalizedValue(min));
+        return onChange(getNormalizedValue(val + step));
     };
 
     const handleMinusMouseDown = event => {
         event.preventDefault();
         inputRef.current.focus();
-        onChange(getNormalizedValue(getValue(Number(value)) - step));
+        const val = getValue(Number(value));
+        if (val > max) return onChange(getNormalizedValue(max));
+        return onChange(getNormalizedValue(val - step));
     };
 
     const handleEvents = (event, callback) => {
diff --git a/src/components/CounterInput/readme.md b/src/components/CounterInput/readme.md
index c2d3ceb3c..d8bb14b13 100644
--- a/src/components/CounterInput/readme.md
+++ b/src/components/CounterInput/readme.md
@@ -22,6 +22,8 @@ const CounterBase = () => {
             labelAlignment="center"
             value={counter}
             onChange={setCounter}
+            min={10}
+            max={100}
         />
     )
 }
@@ -93,3 +95,43 @@ const CounterDisabled = () => {
 
     <CounterDisabled />
 ```
+
+# CounterInput with controlled limits
+##### If you want to validate the value of the input while the user is typing you can do so on the onChange handler.
+
+```js
+import React, { useState } from 'react';
+import { CounterInput } from 'react-rainbow-components';
+
+const containerStyles = {
+    maxWidth: 220,
+
+};
+
+const maxLimit = 100;
+
+const CounterControlled = () => {
+    const [counter, setCounter] = useState();
+
+    const handleChange = value => {
+        if (value > maxLimit) setCounter(maxLimit);
+        else setCounter(value)
+    }
+
+    return(
+        <CounterInput
+            id="input-component-1"
+            label="Passengers"
+            placeholder="Only numbers"
+            style={containerStyles}
+            className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
+            labelAlignment="center"
+            value={counter}
+            onChange={handleChange}
+            max={maxLimit}
+        />
+    )
+}
+
+    <CounterControlled />
+```