Merge branch 'master' of https://github.com/nexxtway/react-rainbow in…

…to implement-phone-input-component
nexxtway · May 23, 2020 · cd2bf76 · cd2bf76
2 parents c7e7f2d + 18a894f
commit cd2bf76
Show file tree

Hide file tree

Showing 138 changed files with 5,047 additions and 673 deletions.
diff --git a/assets/images/componentsThumbs/InternalOverlay.svg b/assets/images/componentsThumbs/InternalOverlay.svg
diff --git a/integration/specs/CodeInput/codeInput-1.spec.js b/integration/specs/CodeInput/codeInput-1.spec.js
@@ -0,0 +1,105 @@
+const PageCodeInput = require('../../../src/components/CodeInput/pageObject');
+const { DELETE_KEY, TAB_KEY } = require('../../constants');
+
+const CODEINPUT = '#codeinput-1';
+
+describe('CodeInput base example', () => {
+    beforeAll(() => {
+        browser.url('/#!/CodeInput/1');
+    });
+    beforeEach(() => {
+        browser.refresh();
+        const component = $(CODEINPUT);
+        component.waitForExist();
+    });
+    it('should have focus on the first input on load', () => {
+        const codeInput = new PageCodeInput(CODEINPUT);
+        expect(codeInput.getFocusedIndex()).toBe(0);
+    });
+    it('should change focus to the second input when the first input its filled with a number', () => {
+        const codeInput = new PageCodeInput(CODEINPUT);
+        codeInput.type('2');
+        expect(codeInput.getFocusedIndex()).toBe(1);
+    });
+    it('should remove value from first input when first input is selected, has a value and "Backspace" key is pressed', () => {
+        const codeInput = new PageCodeInput(CODEINPUT);
+        codeInput.type('2');
+        expect(codeInput.getInputValueAtIndex(0)).toBe('2');
+        browser.keys(DELETE_KEY);
+        expect(codeInput.getInputValueAtIndex(0)).toBe('');
+    });
+    it('should return focus to the first input and clear his value when the first input has a value, the second input is empty, is focused and "Backspace" key is pressed', () => {
+        const codeInput = new PageCodeInput(CODEINPUT);
+        codeInput.type('2');
+        expect(codeInput.getInputValueAtIndex(0)).toBe('2');
+        expect(codeInput.getFocusedIndex()).toBe(1);
+        browser.keys(DELETE_KEY);
+        expect(codeInput.getInputValueAtIndex(0)).toBe('');
+        expect(codeInput.getFocusedIndex()).toBe(0);
+    });
+    it('should keep focus on the first input when input is empty and "Backspace" key is pressed', () => {
+        const codeInput = new PageCodeInput(CODEINPUT);
+        expect(codeInput.getFocusedIndex()).toBe(0);
+        expect(codeInput.getInputValueAtIndex(0)).toBe('');
+        browser.keys(DELETE_KEY);
+        expect(codeInput.getFocusedIndex()).toBe(0);
+    });
+    it('should keep focus on the last input when the last input value is filled with a number', () => {
+        const codeInput = new PageCodeInput(CODEINPUT);
+        codeInput.type('2');
+        codeInput.type('2');
+        codeInput.type('2');
+        codeInput.type('2');
+        expect(codeInput.getFocusedIndex()).toBe(3);
+    });
+    it('should keep focus in the current input when we type a letter', () => {
+        const codeInput = new PageCodeInput(CODEINPUT);
+        expect(codeInput.getFocusedIndex()).toBe(0);
+        codeInput.type('A');
+        expect(codeInput.getFocusedIndex()).toBe(0);
+    });
+    it('should keep value empty in the current input when we type a letter', () => {
+        const codeInput = new PageCodeInput(CODEINPUT);
+        expect(codeInput.getFocusedIndex()).toBe(0);
+        codeInput.type('A');
+        expect(codeInput.getInputValueAtIndex(0)).toBe('');
+    });
+    it('should keep current input focus when unfocused inputs are clicked', () => {
+        const codeInput = new PageCodeInput(CODEINPUT);
+        expect(codeInput.getFocusedIndex()).toBe(0);
+        codeInput.clickInputAtIndex(2);
+        expect(codeInput.getFocusedIndex()).toBe(0);
+    });
+    it('should keep focus on the second input when any input is clicked and the first input has a number already', () => {
+        const codeInput = new PageCodeInput(CODEINPUT);
+        codeInput.type('2');
+        expect(codeInput.getFocusedIndex()).toBe(1);
+        codeInput.clickInputAtIndex(0);
+        expect(codeInput.getFocusedIndex()).toBe(1);
+    });
+    it('should leave focus on all inputs when "Tab" key is pressed', () => {
+        const codeInput = new PageCodeInput(CODEINPUT);
+        expect(codeInput.getFocusedIndex()).toBe(0);
+        browser.keys(TAB_KEY);
+        expect(codeInput.getFocusedIndex()).toBe(undefined);
+    });
+    it('should return focus to the active input when "Tab" key is pressed and then any of the non active inputs is clicked', () => {
+        const codeInput = new PageCodeInput(CODEINPUT);
+        expect(codeInput.getFocusedIndex()).toBe(0);
+        browser.keys(TAB_KEY);
+        expect(codeInput.getFocusedIndex()).toBe(undefined);
+        codeInput.clickInputAtIndex(3);
+        expect(codeInput.getFocusedIndex()).toBe(0);
+    });
+    it('should have all inputs filled when we type 4 numbers in a row and codeInput has a length of 4', () => {
+        const codeInput = new PageCodeInput(CODEINPUT);
+        codeInput.type('1');
+        codeInput.type('2');
+        codeInput.type('3');
+        codeInput.type('4');
+        expect(codeInput.getInputValueAtIndex(0)).toBe('1');
+        expect(codeInput.getInputValueAtIndex(1)).toBe('2');
+        expect(codeInput.getInputValueAtIndex(2)).toBe('3');
+        expect(codeInput.getInputValueAtIndex(3)).toBe('4');
+    });
+});
diff --git a/integration/specs/CodeInput/codeInput-5.spec.js b/integration/specs/CodeInput/codeInput-5.spec.js
@@ -0,0 +1,21 @@
+const PageCodeInput = require('../../../src/components/CodeInput/pageObject');
+
+const CODEINPUT = '#codeinput-5';
+
+describe('CodeInput disabled example', () => {
+    beforeAll(() => {
+        browser.url('/#!/CodeInput/5');
+    });
+    beforeEach(() => {
+        browser.refresh();
+        const component = $(CODEINPUT);
+        component.waitForExist();
+    });
+    it('should keep inputs unfocused when codeInput is disabled and inputs are clicked', () => {
+        const codeInput = new PageCodeInput(CODEINPUT);
+        expect(codeInput.getFocusedIndex()).toBe(undefined);
+        codeInput.clickInputAtIndex(2);
+        codeInput.clickInputAtIndex(3);
+        expect(codeInput.getFocusedIndex()).toBe(undefined);
+    });
+});
diff --git a/library/exampleComponents/GlobalHeader/index.js b/library/exampleComponents/GlobalHeader/index.js
@@ -6,11 +6,14 @@ import RenderIf from './../../../src/components/RenderIf';
 import { StyledGlobalHeader, StyledLogo } from './styled';
 
 export default function GlobalHeader(props) {
-    const { className, children, src, hideAvatar } = props;
+    const { className, children, src, hideAvatar, variant } = props;
 
     return (
         <div className={className}>
-            <StyledGlobalHeader className="rainbow-align-content_space-between rainbow-p-vertical_small">
+            <StyledGlobalHeader
+                className="rainbow-align-content_space-between rainbow-p-vertical_small"
+                variant={variant}
+            >
                 <StyledLogo src={logo} alt="rainbow logo" className="rainbow-m-left_medium" />
                 <div className="rainbow-flex rainbow-align_center">
                     {children}
@@ -32,11 +35,13 @@ GlobalHeader.propTypes = {
     className: PropTypes.string,
     src: PropTypes.string,
     hideAvatar: PropTypes.bool,
+    variant: PropTypes.oneOf(['default', 'neutral']),
 };
 
 GlobalHeader.defaultProps = {
     children: null,
     className: undefined,
     src: 'images/user/user1.jpg',
     hideAvatar: false,
+    variant: 'default',
 };
diff --git a/library/exampleComponents/GlobalHeader/styled.js b/library/exampleComponents/GlobalHeader/styled.js
@@ -5,6 +5,13 @@ import attachThemeAttrs from '../../../src/styles/helpers/attachThemeAttrs';
 export const StyledGlobalHeader = attachThemeAttrs(styled.header)`
     background-color: ${props => props.palette.background.main};
     border-bottom: 1px solid ${props => props.palette.border.divider};
+
+    ${props =>
+        props.variant === 'neutral' &&
+        `
+            background-color: ${props.palette.background.secondary};
+            border-bottom: none;
+        `};
 `;
 
 export const StyledLogo = styled.img`