Merge branch 'master' into styles-make-blurred-backdrop-on-Modal-and-…

…Drawer

library/styleguideComponents/RibbonRenderer/styled.js

@@ -79,4 +79,8 @@ export const StyledStackoverflowLink = styled.a`
     :hover {
         background: rgba(1, 1, 1, 0.05);
     }
+
+    @media (max-width: 800px) {
+        display: none;
+    }
 `;

src/components/CounterInput/__test__/counterInput.a11y.spec.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import axe from '../../../../axe';
+import CounterInput from '..';
+
+describe('<CounterInput/>', () => {
+    it('should be accessible when label is passed', async () => {
+        expect.assertions(1);
+        const html = ReactDOMServer.renderToString(<CounterInput label="CounterInput Label" />);
+        const results = await axe(html);
+        expect(results).toHaveNoViolations();
+    });
+});

src/components/CounterInput/__test__/counterInput.spec.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import CounterInput from '..';
+
+describe('<CounterInput />', () => {
+    it('should mount a input type number with a value of 5', () => {
+        const component = mount(<CounterInput value={5} />);
+        const input = component.find('input');
+        expect(input.prop('type')).toBe('number');
+        expect(input.prop('value')).toBe(5);
+    });
+
+    it('should fire onChange with -1 as argument when click in minusButton', () => {
+        const onChangeMockFn = jest.fn();
+        const component = mount(<CounterInput onChange={onChangeMockFn} value={0} />);
+        const button = component.find('button');
+        const minusButton = button.at(0);
+        minusButton.simulate('mouseDown');
+        expect(onChangeMockFn).toHaveBeenCalledWith(-1);
+    });
+
+    it('should fire onChange with 1 as argument when click in plusButton', () => {
+        const onChangeMockFn = jest.fn();
+        const component = mount(<CounterInput onChange={onChangeMockFn} value={0} />);
+        const button = component.find('button');
+        const plusButton = button.at(1);
+        plusButton.simulate('mouseDown');
+        expect(onChangeMockFn).toHaveBeenCalledWith(1);
+    });
+
+    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} />);
+        const button = component.find('button');
+        const minusButton = button.at(0);
+        minusButton.simulate('mouseDown');
+        expect(onChangeMockFn).toHaveBeenCalledWith(-2);
+    });
+
+    it('should fire onChange with 2 as argument when click in plusButton and step = 2', () => {
+        const onChangeMockFn = jest.fn();
+        const component = mount(<CounterInput onChange={onChangeMockFn} step={2} />);
+        const button = component.find('button');
+        const plusButton = button.at(1);
+        plusButton.simulate('mouseDown');
+        expect(onChangeMockFn).toHaveBeenCalledWith(2);
+    });
+
+    it('should have plusButton disabled', () => {
+        const component = mount(<CounterInput value={5} max={5} />);
+        const button = component.find('button');
+        const plusButton = button.at(1);
+        expect(plusButton.prop('disabled')).toBe(true);
+    });
+
+    it('should have minusButton disabled', () => {
+        const component = mount(<CounterInput value={-5} min={-5} />);
+        const button = component.find('button');
+        const minusButton = button.at(0);
+        expect(minusButton.prop('disabled')).toBe(true);
+    });
+
+    it('should have an input, minusButton and plusButton disabled', () => {
+        const component = mount(<CounterInput disabled />);
+        const button = component.find('button');
+        const input = component.find('input');
+        const minusButton = button.at(0);
+        const plusButton = button.at(1);
+        expect(input.prop('disabled')).toBe(true);
+        expect(minusButton.prop('disabled')).toBe(true);
+        expect(plusButton.prop('disabled')).toBe(true);
+    });
+
+    it('should have an input active and minusButton and plusButton disabled', () => {
+        const component = mount(<CounterInput readOnly />);
+        const button = component.find('button');
+        const input = component.find('input');
+        const minusButton = button.at(0);
+        const plusButton = button.at(1);
+        expect(input.prop('disabled')).toBe(false);
+        expect(minusButton.prop('disabled')).toBe(true);
+        expect(plusButton.prop('disabled')).toBe(true);
+    });
+});

src/components/CounterInput/helpers/__test__/getNormalizedValue.spec.js

@@ -0,0 +1,20 @@
+import getNormalizedValue from '../getNormalizedValue';
+
+describe('getNormalizedValue helper', () => {
+    it('should return the numbers without unnecesary zeros', () => {
+        const numbers = [
+            0.30000000000000004,
+            6.800000000000001,
+            1.9000000000000001,
+            0.11000000000000009,
+            0.20000000000000284,
+            7.6000000000000005,
+            0.020000000000000004,
+        ];
+        const rounded = [0.3, 6.8, 1.9, 0.11, 0.2, 7.6, 0.02];
+
+        numbers.forEach((value, index) => {
+            expect(getNormalizedValue(value)).toBe(rounded[index]);
+        });
+    });
+});

src/components/CounterInput/helpers/__test__/getValue.spec.js

@@ -0,0 +1,13 @@
+import getValue from '../getValue';
+
+describe('getValueOfNan helper', () => {
+    it('should return 0', () => {
+        const number = getValue(NaN);
+        expect(number).toBe(0);
+    });
+
+    it('should return 3', () => {
+        const number = getValue(3);
+        expect(number).toBe(3);
+    });
+});

src/components/CounterInput/helpers/__test__/isButtonDisabled.spec.js

@@ -0,0 +1,39 @@
+import isButtonDisabled from '../isButtonDisabled';
+
+describe('isButtonDisabled helper', () => {
+    it('should return true when isMinOrMax', () => {
+        const isMinOrMax = true;
+        const disabled = false;
+        const readOnly = false;
+
+        const disable = isButtonDisabled(isMinOrMax, disabled, readOnly);
+        expect(disable).toBe(true);
+    });
+
+    it('should return true when disabled', () => {
+        const isMinOrMax = false;
+        const disabled = true;
+        const readOnly = false;
+
+        const disable = isButtonDisabled(isMinOrMax, disabled, readOnly);
+        expect(disable).toBe(true);
+    });
+
+    it('should return true when readOnly', () => {
+        const isMinOrMax = false;
+        const disabled = false;
+        const readOnly = true;
+
+        const disable = isButtonDisabled(isMinOrMax, disabled, readOnly);
+        expect(disable).toBe(true);
+    });
+
+    it('should return false', () => {
+        const isMinOrMax = false;
+        const disabled = false;
+        const readOnly = false;
+
+        const disable = isButtonDisabled(isMinOrMax, disabled, readOnly);
+        expect(disable).toBe(false);
+    });
+});

src/components/CounterInput/helpers/__test__/isMax.spec.js

@@ -0,0 +1,27 @@
+import isMax from '../isMax';
+
+describe('isMax helper', () => {
+    it('should return false when number + step < max', () => {
+        const number = 2;
+        const step = 3;
+        const max = 6;
+        const isMaxCondition = isMax(number, step, max);
+        expect(isMaxCondition).toBe(false);
+    });
+
+    it('should return false when number + step = max', () => {
+        const number = 3;
+        const step = 3;
+        const max = 6;
+        const isMaxCondition = isMax(number, step, max);
+        expect(isMaxCondition).toBe(false);
+    });
+
+    it('should return true when number + step > max', () => {
+        const number = 4;
+        const step = 3;
+        const max = 6;
+        const isMaxCondition = isMax(number, step, max);
+        expect(isMaxCondition).toBe(true);
+    });
+});

src/components/CounterInput/helpers/__test__/isMin.spec.js

@@ -0,0 +1,27 @@
+import isMin from '../isMin';
+
+describe('isMax helper', () => {
+    it('should return false when number - step > min', () => {
+        const number = -2;
+        const step = 3;
+        const min = -6;
+        const isMaxCondition = isMin(number, step, min);
+        expect(isMaxCondition).toBe(false);
+    });
+
+    it('should return false when number - step = min', () => {
+        const number = -3;
+        const step = 3;
+        const min = -6;
+        const isMaxCondition = isMin(number, step, min);
+        expect(isMaxCondition).toBe(false);
+    });
+
+    it('should return true when number - step < min', () => {
+        const number = -4;
+        const step = 3;
+        const min = -6;
+        const isMaxCondition = isMin(number, step, min);
+        expect(isMaxCondition).toBe(true);
+    });
+});

src/components/CounterInput/helpers/getNormalizedValue.js

@@ -0,0 +1,5 @@
+const getNormalizedValue = number => {
+    return parseFloat(number.toFixed(10));
+};
+
+export default getNormalizedValue;

src/components/CounterInput/helpers/getValue.js

@@ -0,0 +1,9 @@
+const getValue = value => {
+    // eslint-disable-next-line no-restricted-globals
+    if (isNaN(value)) {
+        return 0;
+    }
+    return value;
+};
+
+export default getValue;

src/components/CounterInput/helpers/isButtonDisabled.js

@@ -0,0 +1,8 @@
+const isButtonDisabled = (isMinOrMax, disable, readOnly) => {
+    if (isMinOrMax || disable || readOnly) {
+        return true;
+    }
+    return false;
+};
+
+export default isButtonDisabled;

src/components/CounterInput/helpers/isMax.js

@@ -0,0 +1,10 @@
+import getValue from './getValue';
+
+const isMax = (number, step, max) => {
+    if (getValue(Number(number)) + step > max) {
+        return true;
+    }
+    return false;
+};
+
+export default isMax;

src/components/CounterInput/helpers/isMin.js

@@ -0,0 +1,10 @@
+import getValue from './getValue';
+
+const isMin = (number, step, min) => {
+    if (getValue(Number(number)) - step < min) {
+        return true;
+    }
+    return false;
+};
+
+export default isMin;

src/components/CounterInput/icons/minus.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const MinusIcon = props => {
+    const { className, style } = props;
+
+    return (
+        <svg
+            className={className}
+            style={style}
+            width="12px"
+            height="2px"
+            viewBox="0 0 12 2"
+            version="1.1"
+        >
+            <g id="components" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                <g
+                    id="Components-CounterInput"
+                    transform="translate(-498.000000, -541.000000)"
+                    fill="currentColor"
+                    fillRule="nonzero"
+                >
+                    <g id="Group-6-Copy" transform="translate(482.000000, 497.000000)">
+                        <path
+                            d="M27.1428571,44.1428571 L16.8571429,44.1428571 C16.384,44.1428571 16,44.5268571 16,45 C16,45.4731429 16.384,45.8571429 16.8571429,45.8571429 L27.1428571,45.8571429 C27.616,45.8571429 28,45.4731429 28,45 C28,44.5268571 27.616,44.1428571 27.1428571,44.1428571 Z"
+                            id="Path-Copy-6"
+                        />
+                    </g>
+                </g>
+            </g>
+        </svg>
+    );
+};
+
+MinusIcon.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+};
+
+MinusIcon.defaultProps = {
+    className: undefined,
+    style: undefined,
+};
+
+export default MinusIcon;

src/components/CounterInput/icons/plus.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const PlusIcon = props => {
+    const { className, style } = props;
+
+    return (
+        <svg className={className} style={style} width="14" height="14" viewBox="0 0 14 14">
+            <path
+                fill="currentColor"
+                d="M12.181 5.964H8.036V1.819C8.036 1.247 7.573.783 7 .783s-1.036.464-1.036 1.036v4.145H1.819C1.246 5.964.783 6.428.783 7c0 .572.463 1.036 1.036 1.036h4.145v4.145c0 .572.463 1.036 1.036 1.036s1.036-.464 1.036-1.036V8.036h4.145c.573 0 1.036-.464 1.036-1.036 0-.572-.463-1.036-1.036-1.036z"
+            />
+        </svg>
+    );
+};
+
+PlusIcon.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+};
+
+PlusIcon.defaultProps = {
+    className: undefined,
+    style: undefined,
+};
+
+export default PlusIcon;