fix: update CounterInput buttons behavior

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} />);

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) => {

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 />
+```