From c2296ec0fa4bdb1b1ad8f377ab1be5dc1e7e0e9c Mon Sep 17 00:00:00 2001 From: Rohit Luthra Date: Sun, 15 Dec 2019 01:14:24 +0530 Subject: [PATCH 01/29] added typeahead component with tdd approch --- lib/components/atoms/Button/Button.js | 3 + lib/components/atoms/Button/Button.style.js | 7 + .../molecules/Typeahead/ListItem.js | 40 ++++ .../molecules/Typeahead/Typeahead.js | 187 ++++++++++++++++++ .../molecules/Typeahead/Typeahead.mock.js | 24 +++ .../molecules/Typeahead/Typeahead.story.js | 68 +++++++ .../molecules/Typeahead/Typeahead.style.js | 24 +++ .../molecules/Typeahead/constants.js | 6 + lib/components/molecules/Typeahead/index.js | 3 + .../Typeahead/tests/Typeahead.test.js | 92 +++++++++ .../__snapshots__/Typeahead.test.js.snap | 30 +++ .../molecules/Typeahead/types/index.js | 31 +++ lib/styles/themes/base/def/border.js | 7 + lib/styles/themes/base/def/colors.js | 14 ++ lib/styles/themes/base/tokens/colors.css | 11 +- 15 files changed, 543 insertions(+), 4 deletions(-) create mode 100644 lib/components/molecules/Typeahead/ListItem.js create mode 100644 lib/components/molecules/Typeahead/Typeahead.js create mode 100644 lib/components/molecules/Typeahead/Typeahead.mock.js create mode 100644 lib/components/molecules/Typeahead/Typeahead.story.js create mode 100644 lib/components/molecules/Typeahead/Typeahead.style.js create mode 100644 lib/components/molecules/Typeahead/constants.js create mode 100644 lib/components/molecules/Typeahead/index.js create mode 100644 lib/components/molecules/Typeahead/tests/Typeahead.test.js create mode 100644 lib/components/molecules/Typeahead/tests/__snapshots__/Typeahead.test.js.snap create mode 100644 lib/components/molecules/Typeahead/types/index.js diff --git a/lib/components/atoms/Button/Button.js b/lib/components/atoms/Button/Button.js index 35cb6250d..ec35693fe 100755 --- a/lib/components/atoms/Button/Button.js +++ b/lib/components/atoms/Button/Button.js @@ -15,6 +15,7 @@ type Props = { secondary?: boolean, tertiary?: boolean, disabled?: boolean, + transparent?: boolean, ariaLabel?: string, elementLocator?: string, }; @@ -28,6 +29,7 @@ const Button = ({ secondary, tertiary, disabled, + transparent, ariaLabel, elementLocator, ...others @@ -51,6 +53,7 @@ Button.defaultProps = { secondary: false, tertiary: false, disabled: false, + transparent: false, ariaLabel: '', className: '', elementLocator: '', diff --git a/lib/components/atoms/Button/Button.style.js b/lib/components/atoms/Button/Button.style.js index c35ce3c90..b766c6ecf 100755 --- a/lib/components/atoms/Button/Button.style.js +++ b/lib/components/atoms/Button/Button.style.js @@ -25,6 +25,13 @@ const ButtonStyles = css` outline: none; } + ${props => + props.transparent && + ` + ${props.theme.typography.FONT_CTA}; + ${props.theme.colors.CTA_TRANSPARENT} + `}; + ${props => (props.inheritedStyles ? props.inheritedStyles : '')}; `; diff --git a/lib/components/molecules/Typeahead/ListItem.js b/lib/components/molecules/Typeahead/ListItem.js new file mode 100644 index 000000000..4d14e0be7 --- /dev/null +++ b/lib/components/molecules/Typeahead/ListItem.js @@ -0,0 +1,40 @@ +// @flow +/** + * + * ListItem + * + */ +import classNames from 'classnames'; + +import type { ListItemProps } from './types'; +import Button from '../../atoms/Button'; + +const ListItem = ({ + children, + index, + activeResult, + handleClick, + item, + onMouseEnter, + onMouseDown, +}: ListItemProps) => { + const isSelectedItem = index === activeResult; + + return ( +
  • + +
    • + ); +}; + +export default ListItem; diff --git a/lib/components/molecules/Typeahead/Typeahead.js b/lib/components/molecules/Typeahead/Typeahead.js new file mode 100644 index 000000000..18a558d51 --- /dev/null +++ b/lib/components/molecules/Typeahead/Typeahead.js @@ -0,0 +1,187 @@ +// @flow +/** + * + * Typeahead + * + */ +import React, { useState } from 'react'; +import styled from 'styled-components'; +import classNames from 'classnames'; + +import Input from '../../atoms/Input'; +import Label from '../../atoms/Label'; +import List from '../List'; +import ListItem from './ListItem'; +import styles from './Typeahead.style'; +import type { Props } from './types'; +import { ENTER_KEY, UP_ARROW, DOWN_ARROW, ESCAPE, TAB } from './constants'; + +const Typeahead = ({ + id, + className, + searchValue, + label, + isFieldLabel, + results, + onChangeHandler, + getResults, + renderCustomResultsView, + getSelectedResultValue, + ...otherProps +}: Props): React.Element => { + const [updatedResults, setFilteredResults] = useState([]); + const [activeResult, setActiveResult] = useState(0); + + const triggerGetResults = val => { + return val && val.trim().length >= 3; + }; + + /** + * Function to return filtered results + * @param {*} allResults + * @param {*} inputText + */ + const getFilteredResults = (allResults, inputText) => { + const filteredResults = + allResults && + allResults.filter(Result => Result.toLowerCase().indexOf(inputText.toLowerCase()) > -1); + return filteredResults; + }; + + /** + * Function to handle item selection + * @param {'*'} e + */ + const handleClick = item => { + setActiveResult(0); + getSelectedResultValue(item); + }; + + /** + * Function to handle text change in input + * @param {*} e + */ + const handleChange = e => { + if (onChangeHandler) { + onChangeHandler(e); + } + const { value: inputText } = e.target; + let filteredResults = results; + if (triggerGetResults(inputText)) { + if (getResults) { + getResults(); + } else { + filteredResults = getFilteredResults(results, inputText); + } + setFilteredResults(filteredResults); + } else { + setFilteredResults([]); + } + }; + + /** + * Function to handle uparrow, downarrow, enter and escape + * @param {*} e + */ + const handleKeyDown = e => { + switch (e.keyCode) { + case ENTER_KEY: { + setActiveResult(0); + getSelectedResultValue(updatedResults[activeResult]); + setFilteredResults([]); + break; + } + case UP_ARROW: { + if (activeResult === 0) { + setActiveResult(updatedResults.length - 1); + return; + } + setActiveResult(activeResult - 1); + break; + } + case DOWN_ARROW: { + if (activeResult + 1 === updatedResults.length) { + setActiveResult(0); + return; + } + setActiveResult(activeResult + 1); + break; + } + case TAB: + case ESCAPE: { + setFilteredResults([]); + break; + } + default: + break; + } + }; + + /** + * Highlight and select item on mouse over + */ + const handleMouseEnter = activeItemIndex => { + setActiveResult(activeItemIndex); + }; + + /** + * Hide suggestion list on mouse down + */ + const handleMouseDown = activeItemIndex => { + setActiveResult(activeItemIndex); + getSelectedResultValue(updatedResults[activeResult]); + setFilteredResults([]); + }; + + const listOptions = { + noMargin: true, + }; + + return ( +
    + + + {updatedResults && ( + + {updatedResults.map((item, index) => { + return ( + handleMouseEnter(index)} + onMouseDown={() => handleMouseDown(index)} + > + {renderCustomResultsView ? renderCustomResultsView(item) : item} + + ); + })} + + )} +
    + ); +}; + +Typeahead.defaultProps = {}; + +export default styled(Typeahead)` + ${styles}; +`; + +export { Typeahead as TypeaheadVanilla }; diff --git a/lib/components/molecules/Typeahead/Typeahead.mock.js b/lib/components/molecules/Typeahead/Typeahead.mock.js new file mode 100644 index 000000000..797dbcb43 --- /dev/null +++ b/lib/components/molecules/Typeahead/Typeahead.mock.js @@ -0,0 +1,24 @@ +/* eslint-disable prettier/prettier */ +const defaultConfig = { + results: [ + 'Alligator', + 'Alligation', + 'All', + 'Allout', + 'Bask', + 'Crocodilian', + 'Death Roll', + 'Eggs', + 'Jaws', + 'Reptile', + 'Solitary', + 'Tail', + 'Wetlands', + ], + disabled: false, + name: 'word-typeahead', + id: 'word-typeahead', + value: 'all', +}; + +export default defaultConfig; diff --git a/lib/components/molecules/Typeahead/Typeahead.story.js b/lib/components/molecules/Typeahead/Typeahead.story.js new file mode 100644 index 000000000..1747c241b --- /dev/null +++ b/lib/components/molecules/Typeahead/Typeahead.story.js @@ -0,0 +1,68 @@ +import React, { useState } from 'react'; +import { storiesOf } from '@storybook/react'; +// import { action } from '@storybook/addon-actions'; +import defaultConfig from './Typeahead.mock'; + +// Import Styled Component to showcase variations +import Typeahead, { TypeaheadVanilla } from '.'; + +const Wrapper = Component => { + const [results, setResults] = useState([]); + const [inputText, setInputText] = useState(''); + + return ( + { + setInputText(e.currentTarget.value); + }} + results={results} + getResults={() => { + setResults(defaultConfig.results); + }} + getSelectedResultValue={value => { + setInputText(value); + }} + renderCustomResultsView={item =>

    {item}

    } + isFieldLabel="true" + label="search word" + /> + ); +}; + +const WrapperWithoutGetResults = Component => { + const [inputText, setInputText] = useState(''); + + return ( + { + setInputText(e.currentTarget.value); + }} + results={defaultConfig.results} + getSelectedResultValue={value => { + setInputText(value); + }} + renderCustomResultsView={item =>

    {item}

    } + isFieldLabel="true" + label="search word" + /> + ); +}; + +// TODO: indentation is not working fine in editor. Need to check for .hbs files +// $FlowFixMe eslint-disable-next-line extra-rules/no-commented-out-code +storiesOf('Molecules/Typeahead', module) + .addParameters({ jest: ['Typeahead', 'TypeaheadVanilla'] }) + .add('Knobs', () => Wrapper(TypeaheadVanilla)) + .add('Default', () => Wrapper(Typeahead)) + .add('Knobs-2nd', () => WrapperWithoutGetResults(TypeaheadVanilla)) + .add('Default-2nd', () => WrapperWithoutGetResults(Typeahead)); diff --git a/lib/components/molecules/Typeahead/Typeahead.style.js b/lib/components/molecules/Typeahead/Typeahead.style.js new file mode 100644 index 000000000..934a49b82 --- /dev/null +++ b/lib/components/molecules/Typeahead/Typeahead.style.js @@ -0,0 +1,24 @@ +import { css } from 'styled-components'; + +export default css` + input { + width: 100%; + } + + li { + ${props => ` + ${props.theme.border.LIST_ITEM}; + ${props.theme.colors.LIST_ITEM}; + `}; + } + + button { + text-align: left; + } + + ul { + ${props => `${props.theme.border.TYPEAHEAD_LIST};`}; + } + + ${props => (props.inheritedStyles ? props.inheritedStyles : '')}; +`; diff --git a/lib/components/molecules/Typeahead/constants.js b/lib/components/molecules/Typeahead/constants.js new file mode 100644 index 000000000..4cdfde7eb --- /dev/null +++ b/lib/components/molecules/Typeahead/constants.js @@ -0,0 +1,6 @@ +export const BACKSPACE = 8; +export const ENTER_KEY = 13; +export const UP_ARROW = 38; +export const DOWN_ARROW = 40; +export const ESCAPE = 27; +export const TAB = 9; diff --git a/lib/components/molecules/Typeahead/index.js b/lib/components/molecules/Typeahead/index.js new file mode 100644 index 000000000..4ec939037 --- /dev/null +++ b/lib/components/molecules/Typeahead/index.js @@ -0,0 +1,3 @@ +// @flow +export { default } from './Typeahead'; +export { TypeaheadVanilla } from './Typeahead'; diff --git a/lib/components/molecules/Typeahead/tests/Typeahead.test.js b/lib/components/molecules/Typeahead/tests/Typeahead.test.js new file mode 100644 index 000000000..3eab3a108 --- /dev/null +++ b/lib/components/molecules/Typeahead/tests/Typeahead.test.js @@ -0,0 +1,92 @@ +import React from 'react'; +import { shallow } from 'enzyme'; + +import { mountWithTheme } from '../../../../../__mock__/themeMock'; +import defaultConfig from '../Typeahead.mock'; +import { TypeaheadVanilla } from '../index'; + +describe('', () => { + let TypeaheadComponent = ''; + const onChange = jest.fn(); + + beforeEach(() => { + TypeaheadComponent = shallow( +

    {item}

    } + /> + ); + }); + + test('should render correctly', () => { + expect(TypeaheadComponent).toMatchSnapshot(); + }); + + test('should render .typeahead-component correctly', () => { + expect(TypeaheadComponent.find('#typeahead-component').length).toEqual(1); + }); + + test('should render label correctly', () => { + expect(TypeaheadComponent.find('Label').length).toEqual(1); + }); + + test('should render input correctly', () => { + expect(TypeaheadComponent.find('Input').length).toEqual(1); + }); + + test('should render search type input correctly', () => { + expect(TypeaheadComponent.exists({ type: 'search' })).toBe(true); + }); + + test('should render not List', () => { + expect(TypeaheadComponent.find('List').length).toEqual(1); + }); + + test('should render onchange event', () => { + const MountedTypeaheadComponent = mountWithTheme( +

    {item}

    } + /> + ); + MountedTypeaheadComponent.find('Input') + .first() + .simulate('change', { + target: { value: 'all' }, + }); + expect(MountedTypeaheadComponent.props().value).toEqual('all'); + }); + + test('should render input only 1s', () => { + expect(TypeaheadComponent.find('Input').length).toBe(1); + }); + + test('should render label only 1s', () => { + expect(TypeaheadComponent.find('Label').length).toBe(1); + }); + + test('should not render list item', () => { + expect(TypeaheadComponent.find('ListItem').length).toBe(0); + }); + + /* test('should update state', () => { + const setState = jest.fn(); + const getSelectedResultValue = jest.fn(); + const useStateSpy = jest.spyOn(React, 'useState'); + useStateSpy.mockImplementation(init => [init, setState]); + const MountedTypeaheadComponent = mountWithTheme( +

    {item}

    } + /> + ); + MountedTypeaheadComponent.find('Input') + .first() + .simulate('keydown', { keyCode: 13 }); + expect(setState).toHaveBeenCalledWith(1); + }); */ +}); diff --git a/lib/components/molecules/Typeahead/tests/__snapshots__/Typeahead.test.js.snap b/lib/components/molecules/Typeahead/tests/__snapshots__/Typeahead.test.js.snap new file mode 100644 index 000000000..72971a026 --- /dev/null +++ b/lib/components/molecules/Typeahead/tests/__snapshots__/Typeahead.test.js.snap @@ -0,0 +1,30 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render correctly 1`] = ` +
    +
    +`; diff --git a/lib/components/molecules/Typeahead/types/index.js b/lib/components/molecules/Typeahead/types/index.js new file mode 100644 index 000000000..c6c3b6507 --- /dev/null +++ b/lib/components/molecules/Typeahead/types/index.js @@ -0,0 +1,31 @@ +// @flow +import type { Node } from 'react'; + +export type Props = { + children: Node, + id: string, + name: string, + type: string, + disabled: boolean, + getResults?: any, + results: any, + inheritedStyles?: string, + className?: string, + renderCustomResultsView: any, + placeholder: string, + searchValue: string, + onChangeHandler: any, + getSelectedResultValue: any, + label: string, + isFieldLabel: boolean, +}; + +export type ListItemProps = { + children: Node, + index: number, + activeResult: number, + handleClick: any, + item: any, + onMouseEnter: any, + onMouseDown: any, +}; diff --git a/lib/styles/themes/base/def/border.js b/lib/styles/themes/base/def/border.js index 064281ca8..1c59ed6fa 100644 --- a/lib/styles/themes/base/def/border.js +++ b/lib/styles/themes/base/def/border.js @@ -25,4 +25,11 @@ export default { FIELD_RADIO: ` border-radius: var(--border-radius-round); `, + LIST_ITEM: ` + border-bottom: var(--border-size-field) solid var(--stroke); + `, + TYPEAHEAD_LIST: ` + border: var(--border-size-field) solid var(--stroke); + border-bottom: 0 none; + `, }; diff --git a/lib/styles/themes/base/def/colors.js b/lib/styles/themes/base/def/colors.js index 378641080..3273556f7 100644 --- a/lib/styles/themes/base/def/colors.js +++ b/lib/styles/themes/base/def/colors.js @@ -28,6 +28,14 @@ export default { color: var(--text-cta-disabled); } `, + CTA_TRANSPARENT: ` + background-color: transparent; + color: var(--text-cta-tertiary); + &:hover, &:active{ + background-color: transparent; + color: var(--text-cta-active); + } + `, CTA_TAB: ` background-color: var(--bg-cta-tertiary); color: var(--text-cta-tertiary); @@ -61,4 +69,10 @@ export default { background-color: var(--brand-disabled); color: 1px solid var(--text-cta-disabled); `, + LIST_ITEM: ` + background-color: var(--white); + &:hover, &:active, &.active{ + background-color: var(--text-light); + } + `, }; diff --git a/lib/styles/themes/base/tokens/colors.css b/lib/styles/themes/base/tokens/colors.css index 9fc770bfe..d7727850c 100644 --- a/lib/styles/themes/base/tokens/colors.css +++ b/lib/styles/themes/base/tokens/colors.css @@ -3,13 +3,13 @@ * @presenter Color */ - :root { +:root { --grey: grey; --red: red; --black: #000000; --white: #ffffff; - --error: #DA1E28; + --error: #da1e28; --success: #2e993a; --brand-primary: #fe414d; @@ -21,17 +21,20 @@ --brand-tertiary: var(--black); --brand-tertiary-active: var(--black); + --brand-transparent: transparent; + --brand-disabled: #e7e7e7; --outline: #999; --bg-primary: var(--white); - --bg-secondary: #FFD6D9; + --bg-secondary: #ffd6d9; --bg-cta-primary: var(--brand-primary); --bg-cta-primary-active: var(--brand-primary-active); --bg-cta-secondary: var(--brand-secondary); --bg-cta-secondary-active: var(--brand-secondary-active); --bg-cta-tertiary: var(--white); --bg-cta-tertiary-active: var(--brand-tertiary-active); + --bg-cta-transparent: var(--brand-transparent); --border-primary: #979797; --border-secondary: #171717; @@ -47,7 +50,7 @@ --text-cta-primary: var(--white); --text-cta-secondary: var(--white); --text-cta-tertiary: var(--text-primary); - --text-cta-disabled: #B1B1B1; + --text-cta-disabled: #b1b1b1; --text-field-disabled: var(--text-cta-disabled); --field-border-primary: var(--border-primary); From f4739615127364f176e5321d8761866b1235d564 Mon Sep 17 00:00:00 2001 From: Rohit Luthra Date: Sun, 15 Dec 2019 01:25:09 +0530 Subject: [PATCH 02/29] added aria-expanded --- lib/components/molecules/Typeahead/Typeahead.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/components/molecules/Typeahead/Typeahead.js b/lib/components/molecules/Typeahead/Typeahead.js index 18a558d51..a41a5c1d5 100644 --- a/lib/components/molecules/Typeahead/Typeahead.js +++ b/lib/components/molecules/Typeahead/Typeahead.js @@ -138,7 +138,7 @@ const Typeahead = ({ }; return ( -
    +
    @@ -152,7 +152,7 @@ const Typeahead = ({ aria-autocomplete="both" aria-describedby="initInstr" aria-owns="results" - aria-expanded="false" + aria-expanded={updatedResults.length > 0} aria-label={label} /> {updatedResults && ( From d54e92617200bc8292b48f4fba24b88a7a09585c Mon Sep 17 00:00:00 2001 From: Rohit Luthra Date: Sun, 15 Dec 2019 01:32:09 +0530 Subject: [PATCH 03/29] fixed linting error --- lib/components/molecules/Typeahead/Typeahead.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/molecules/Typeahead/Typeahead.js b/lib/components/molecules/Typeahead/Typeahead.js index a41a5c1d5..e2f6bbc87 100644 --- a/lib/components/molecules/Typeahead/Typeahead.js +++ b/lib/components/molecules/Typeahead/Typeahead.js @@ -138,7 +138,7 @@ const Typeahead = ({ }; return ( -
    +
    From 64c9f2a34c45eed2a2aaf360ba5734594d99f182 Mon Sep 17 00:00:00 2001 From: Rohit Luthra Date: Sun, 15 Dec 2019 01:51:35 +0530 Subject: [PATCH 04/29] fixed linting error --- lib/components/molecules/Typeahead/Typeahead.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/lib/components/molecules/Typeahead/Typeahead.js b/lib/components/molecules/Typeahead/Typeahead.js index e2f6bbc87..d46680168 100644 --- a/lib/components/molecules/Typeahead/Typeahead.js +++ b/lib/components/molecules/Typeahead/Typeahead.js @@ -144,6 +144,7 @@ const Typeahead = ({ 0} aria-label={label} /> {updatedResults && ( - + {updatedResults.map((item, index) => { return ( Date: Sun, 15 Dec 2019 15:49:38 +0530 Subject: [PATCH 05/29] updated snapshots --- .../__snapshots__/Button.style.test.js.snap | 24 +++++++++++++++++++ .../__snapshots__/Image.style.test.js.snap | 2 ++ .../__snapshots__/Input.style.test.js.snap | 22 +++++++++++++++++ .../__snapshots__/Select.style.test.js.snap | 21 ++++++++++++++++ .../__snapshots__/Textarea.style.test.js.snap | 22 +++++++++++++++++ .../__snapshots__/FieldInput.test.js.snap | 1 + .../__snapshots__/FieldSelect.test.js.snap | 1 + .../__snapshots__/FieldTextarea.test.js.snap | 1 + .../__snapshots__/Typeahead.test.js.snap | 9 ++++--- 9 files changed, 100 insertions(+), 3 deletions(-) diff --git a/lib/components/atoms/Button/tests/__snapshots__/Button.style.test.js.snap b/lib/components/atoms/Button/tests/__snapshots__/Button.style.test.js.snap index d9c4c7a58..0868468aa 100644 --- a/lib/components/atoms/Button/tests/__snapshots__/Button.style.test.js.snap +++ b/lib/components/atoms/Button/tests/__snapshots__/Button.style.test.js.snap @@ -23,6 +23,8 @@ exports[`Button should render correctly 1`] = ` ";&:focus:not(.focus-visible){outline:none;}", [Function], ";", + [Function], + ";", ";", ], }, @@ -32,6 +34,7 @@ exports[`Button should render correctly 1`] = ` "styledComponentId": "Button-sc-1ccn477-0", "target": [Function], "toString": [Function], + "usesTheme": true, "warnTooManyClasses": [Function], "withComponent": [Function], } @@ -75,6 +78,13 @@ exports[`Button should render correctly 1`] = ` ", "LIST_INLINE": " border-right: var(--border-size-field) solid var(--field-border-primary); + ", + "LIST_ITEM": " + border-bottom: var(--border-size-field) solid var(--stroke); + ", + "TYPEAHEAD_LIST": " + border: var(--border-size-field) solid var(--stroke); + border-bottom: 0 none; ", }, "colors": Object { @@ -109,6 +119,14 @@ exports[`Button should render correctly 1`] = ` background-color: var(--bg-cta-tertiary-active); color: var(--text-inverse); } + ", + "CTA_TRANSPARENT": " + background-color: transparent; + color: var(--text-cta-tertiary); + &:hover, &:active{ + background-color: transparent; + color: var(--text-cta-active); + } ", "FIELD_DEFAULT": " color: var(--text-cta-tertiary); @@ -120,6 +138,12 @@ exports[`Button should render correctly 1`] = ` ", "LINK_PRIMARY": " color: var(--text-link); + ", + "LIST_ITEM": " + background-color: var(--white); + &:hover, &:active, &.active{ + background-color: var(--text-light); + } ", "TEXT_DEFAULT": " color: var(--text-primary); diff --git a/lib/components/atoms/Image/tests/__snapshots__/Image.style.test.js.snap b/lib/components/atoms/Image/tests/__snapshots__/Image.style.test.js.snap index 908944f93..1a477d762 100755 --- a/lib/components/atoms/Image/tests/__snapshots__/Image.style.test.js.snap +++ b/lib/components/atoms/Image/tests/__snapshots__/Image.style.test.js.snap @@ -23,6 +23,7 @@ exports[`Image Component with styles should render correctly and match snapshots "styledComponentId": "Image-sc-1m0q2wx-0", "target": [Function], "toString": [Function], + "usesTheme": false, "warnTooManyClasses": [Function], "withComponent": [Function], } @@ -56,6 +57,7 @@ exports[`Image Component with styles should render correctly with lazy load 1`] "styledComponentId": "Image-sc-1m0q2wx-0", "target": [Function], "toString": [Function], + "usesTheme": false, "warnTooManyClasses": [Function], "withComponent": [Function], } diff --git a/lib/components/atoms/Input/tests/__snapshots__/Input.style.test.js.snap b/lib/components/atoms/Input/tests/__snapshots__/Input.style.test.js.snap index 84bbfc252..0eea5a1fb 100644 --- a/lib/components/atoms/Input/tests/__snapshots__/Input.style.test.js.snap +++ b/lib/components/atoms/Input/tests/__snapshots__/Input.style.test.js.snap @@ -25,6 +25,7 @@ exports[`Input Styled component should render correctly 1`] = ` "styledComponentId": "Input-sc-133uxg0-0", "target": [Function], "toString": [Function], + "usesTheme": true, "warnTooManyClasses": [Function], "withComponent": [Function], } @@ -69,6 +70,13 @@ exports[`Input Styled component should render correctly 1`] = ` ", "LIST_INLINE": " border-right: var(--border-size-field) solid var(--field-border-primary); + ", + "LIST_ITEM": " + border-bottom: var(--border-size-field) solid var(--stroke); + ", + "TYPEAHEAD_LIST": " + border: var(--border-size-field) solid var(--stroke); + border-bottom: 0 none; ", }, "colors": Object { @@ -103,6 +111,14 @@ exports[`Input Styled component should render correctly 1`] = ` background-color: var(--bg-cta-tertiary-active); color: var(--text-inverse); } + ", + "CTA_TRANSPARENT": " + background-color: transparent; + color: var(--text-cta-tertiary); + &:hover, &:active{ + background-color: transparent; + color: var(--text-cta-active); + } ", "FIELD_DEFAULT": " color: var(--text-cta-tertiary); @@ -114,6 +130,12 @@ exports[`Input Styled component should render correctly 1`] = ` ", "LINK_PRIMARY": " color: var(--text-link); + ", + "LIST_ITEM": " + background-color: var(--white); + &:hover, &:active, &.active{ + background-color: var(--text-light); + } ", "TEXT_DEFAULT": " color: var(--text-primary); diff --git a/lib/components/atoms/Select/tests/__snapshots__/Select.style.test.js.snap b/lib/components/atoms/Select/tests/__snapshots__/Select.style.test.js.snap index 3b52cc200..b8c134f5b 100644 --- a/lib/components/atoms/Select/tests/__snapshots__/Select.style.test.js.snap +++ b/lib/components/atoms/Select/tests/__snapshots__/Select.style.test.js.snap @@ -44,6 +44,13 @@ exports[`Select Styled component should render correctly 1`] = ` ", "LIST_INLINE": " border-right: var(--border-size-field) solid var(--field-border-primary); + ", + "LIST_ITEM": " + border-bottom: var(--border-size-field) solid var(--stroke); + ", + "TYPEAHEAD_LIST": " + border: var(--border-size-field) solid var(--stroke); + border-bottom: 0 none; ", }, "colors": Object { @@ -78,6 +85,14 @@ exports[`Select Styled component should render correctly 1`] = ` background-color: var(--bg-cta-tertiary-active); color: var(--text-inverse); } + ", + "CTA_TRANSPARENT": " + background-color: transparent; + color: var(--text-cta-tertiary); + &:hover, &:active{ + background-color: transparent; + color: var(--text-cta-active); + } ", "FIELD_DEFAULT": " color: var(--text-cta-tertiary); @@ -89,6 +104,12 @@ exports[`Select Styled component should render correctly 1`] = ` ", "LINK_PRIMARY": " color: var(--text-link); + ", + "LIST_ITEM": " + background-color: var(--white); + &:hover, &:active, &.active{ + background-color: var(--text-light); + } ", "TEXT_DEFAULT": " color: var(--text-primary); diff --git a/lib/components/atoms/Textarea/tests/__snapshots__/Textarea.style.test.js.snap b/lib/components/atoms/Textarea/tests/__snapshots__/Textarea.style.test.js.snap index 871aa3301..dbe530480 100644 --- a/lib/components/atoms/Textarea/tests/__snapshots__/Textarea.style.test.js.snap +++ b/lib/components/atoms/Textarea/tests/__snapshots__/Textarea.style.test.js.snap @@ -27,6 +27,7 @@ exports[`Select Styled component should render correctly 1`] = ` "styledComponentId": "Textarea-g6e5bs-0", "target": [Function], "toString": [Function], + "usesTheme": true, "warnTooManyClasses": [Function], "withComponent": [Function], } @@ -70,6 +71,13 @@ exports[`Select Styled component should render correctly 1`] = ` ", "LIST_INLINE": " border-right: var(--border-size-field) solid var(--field-border-primary); + ", + "LIST_ITEM": " + border-bottom: var(--border-size-field) solid var(--stroke); + ", + "TYPEAHEAD_LIST": " + border: var(--border-size-field) solid var(--stroke); + border-bottom: 0 none; ", }, "colors": Object { @@ -104,6 +112,14 @@ exports[`Select Styled component should render correctly 1`] = ` background-color: var(--bg-cta-tertiary-active); color: var(--text-inverse); } + ", + "CTA_TRANSPARENT": " + background-color: transparent; + color: var(--text-cta-tertiary); + &:hover, &:active{ + background-color: transparent; + color: var(--text-cta-active); + } ", "FIELD_DEFAULT": " color: var(--text-cta-tertiary); @@ -115,6 +131,12 @@ exports[`Select Styled component should render correctly 1`] = ` ", "LINK_PRIMARY": " color: var(--text-link); + ", + "LIST_ITEM": " + background-color: var(--white); + &:hover, &:active, &.active{ + background-color: var(--text-light); + } ", "TEXT_DEFAULT": " color: var(--text-primary); diff --git a/lib/components/molecules/Form/FieldInput/tests/__snapshots__/FieldInput.test.js.snap b/lib/components/molecules/Form/FieldInput/tests/__snapshots__/FieldInput.test.js.snap index 320e0caab..3fda9a331 100644 --- a/lib/components/molecules/Form/FieldInput/tests/__snapshots__/FieldInput.test.js.snap +++ b/lib/components/molecules/Form/FieldInput/tests/__snapshots__/FieldInput.test.js.snap @@ -37,6 +37,7 @@ exports[`FieldInput Component should render correctly 1`] = ` "styledComponentId": "FieldError-sc-1b3h259-0", "target": [Function], "toString": [Function], + "usesTheme": true, "warnTooManyClasses": [Function], "withComponent": [Function], } diff --git a/lib/components/molecules/Form/FieldSelect/tests/__snapshots__/FieldSelect.test.js.snap b/lib/components/molecules/Form/FieldSelect/tests/__snapshots__/FieldSelect.test.js.snap index 0497358ff..d68c0df3f 100644 --- a/lib/components/molecules/Form/FieldSelect/tests/__snapshots__/FieldSelect.test.js.snap +++ b/lib/components/molecules/Form/FieldSelect/tests/__snapshots__/FieldSelect.test.js.snap @@ -33,6 +33,7 @@ exports[`FieldInput Component should render correctly 1`] = ` "styledComponentId": "FieldError-sc-1b3h259-0", "target": [Function], "toString": [Function], + "usesTheme": true, "warnTooManyClasses": [Function], "withComponent": [Function], } diff --git a/lib/components/molecules/Form/FieldTextarea/tests/__snapshots__/FieldTextarea.test.js.snap b/lib/components/molecules/Form/FieldTextarea/tests/__snapshots__/FieldTextarea.test.js.snap index 41bef03cc..97e986fb5 100644 --- a/lib/components/molecules/Form/FieldTextarea/tests/__snapshots__/FieldTextarea.test.js.snap +++ b/lib/components/molecules/Form/FieldTextarea/tests/__snapshots__/FieldTextarea.test.js.snap @@ -35,6 +35,7 @@ exports[`FieldTextarea Component should render correctly 1`] = ` "styledComponentId": "FieldError-sc-1b3h259-0", "target": [Function], "toString": [Function], + "usesTheme": true, "warnTooManyClasses": [Function], "withComponent": [Function], } diff --git a/lib/components/molecules/Typeahead/tests/__snapshots__/Typeahead.test.js.snap b/lib/components/molecules/Typeahead/tests/__snapshots__/Typeahead.test.js.snap index 72971a026..6a1dd3444 100644 --- a/lib/components/molecules/Typeahead/tests/__snapshots__/Typeahead.test.js.snap +++ b/lib/components/molecules/Typeahead/tests/__snapshots__/Typeahead.test.js.snap @@ -12,17 +12,20 @@ exports[` should render correctly 1`] = ` From f3b6f8781b2b294943847e42af22be7da2a0c1be Mon Sep 17 00:00:00 2001 From: Rohit Luthra Date: Sun, 15 Dec 2019 22:30:01 +0530 Subject: [PATCH 06/29] added feature to use customer filter method --- .../molecules/Typeahead/Typeahead.js | 12 ++++-- .../molecules/Typeahead/Typeahead.mock.js | 22 +++++++++++ .../molecules/Typeahead/Typeahead.story.js | 38 ++++++++++++++++++- .../molecules/Typeahead/Typeahead.style.js | 4 ++ .../__snapshots__/Typeahead.test.js.snap | 36 +++++++++++++++--- .../molecules/Typeahead/types/index.js | 1 + 6 files changed, 102 insertions(+), 11 deletions(-) diff --git a/lib/components/molecules/Typeahead/Typeahead.js b/lib/components/molecules/Typeahead/Typeahead.js index d46680168..3f62ac3cd 100644 --- a/lib/components/molecules/Typeahead/Typeahead.js +++ b/lib/components/molecules/Typeahead/Typeahead.js @@ -27,6 +27,7 @@ const Typeahead = ({ getResults, renderCustomResultsView, getSelectedResultValue, + customFilter, ...otherProps }: Props): React.Element => { const [updatedResults, setFilteredResults] = useState([]); @@ -69,7 +70,9 @@ const Typeahead = ({ let filteredResults = results; if (triggerGetResults(inputText)) { if (getResults) { - getResults(); + getResults(inputText); + } else if (customFilter) { + filteredResults = customFilter(results, inputText); } else { filteredResults = getFilteredResults(results, inputText); } @@ -154,10 +157,11 @@ const Typeahead = ({ aria-describedby="initInstr" aria-owns={`typeahead-results-${otherProps.name}`} aria-haspopup="true" - aria-expanded={updatedResults.length > 0} - aria-label={label} + aria-placeholder={otherProps.placeholder} + aria-expanded={updatedResults && updatedResults.length > 0} + aria-labelledby={label} /> - {updatedResults && ( + {updatedResults && updatedResults.length !== 0 && ( { ); }; +const WrapperWithCustomFilterMethod = Component => { + const [inputText, setInputText] = useState(''); + + const getFilteredResults = (allResults, inputValue) => { + const filteredResults = + allResults && + allResults.filter( + Result => Result.first.toLowerCase().indexOf(inputValue.toLowerCase()) > -1 + ); + return filteredResults; + }; + + return ( + { + setInputText(e.currentTarget.value); + }} + results={defaultConfig.people} + getSelectedResultValue={value => { + setInputText(`${value.first} ${value.last}`); + }} + isFieldLabel="true" + label="search word" + renderCustomResultsView={item =>

    {`${item.first} ${item.last}`}

    } + customFilter={getFilteredResults} + /> + ); +}; + // TODO: indentation is not working fine in editor. Need to check for .hbs files // $FlowFixMe eslint-disable-next-line extra-rules/no-commented-out-code storiesOf('Molecules/Typeahead', module) @@ -65,4 +99,6 @@ storiesOf('Molecules/Typeahead', module) .add('Knobs', () => Wrapper(TypeaheadVanilla)) .add('Default', () => Wrapper(Typeahead)) .add('Knobs-2nd', () => WrapperWithoutGetResults(TypeaheadVanilla)) - .add('Default-2nd', () => WrapperWithoutGetResults(Typeahead)); + .add('Default-2nd', () => WrapperWithoutGetResults(Typeahead)) + .add('Knobs-3nd', () => WrapperWithCustomFilterMethod(TypeaheadVanilla)) + .add('Default-3nd', () => WrapperWithCustomFilterMethod(Typeahead)); diff --git a/lib/components/molecules/Typeahead/Typeahead.style.js b/lib/components/molecules/Typeahead/Typeahead.style.js index 934a49b82..f4120ed47 100644 --- a/lib/components/molecules/Typeahead/Typeahead.style.js +++ b/lib/components/molecules/Typeahead/Typeahead.style.js @@ -16,6 +16,10 @@ export default css` text-align: left; } + .initial-string { + display: none; + } + ul { ${props => `${props.theme.border.TYPEAHEAD_LIST};`}; } diff --git a/lib/components/molecules/Typeahead/tests/__snapshots__/Typeahead.test.js.snap b/lib/components/molecules/Typeahead/tests/__snapshots__/Typeahead.test.js.snap index 6a1dd3444..3d7e32dc8 100644 --- a/lib/components/molecules/Typeahead/tests/__snapshots__/Typeahead.test.js.snap +++ b/lib/components/molecules/Typeahead/tests/__snapshots__/Typeahead.test.js.snap @@ -21,13 +21,37 @@ exports[` should render correctly 1`] = ` name="word-typeahead" onChange={[Function]} onKeyDown={[Function]} + people={ + Array [ + Object { + "first": "Charlie", + "last": "Brown", + "twitter": "dancounsell", + }, + Object { + "first": "Charlotte", + "last": "White", + "twitter": "mtnmissy", + }, + Object { + "first": "Chloe", + "last": "Jones", + "twitter": "ladylexy", + }, + Object { + "first": "Cooper", + "last": "King", + "twitter": "steveodom", + }, + ] + } type="search" /> - + + When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures. +
    `; diff --git a/lib/components/molecules/Typeahead/types/index.js b/lib/components/molecules/Typeahead/types/index.js index c6c3b6507..8c614a698 100644 --- a/lib/components/molecules/Typeahead/types/index.js +++ b/lib/components/molecules/Typeahead/types/index.js @@ -18,6 +18,7 @@ export type Props = { getSelectedResultValue: any, label: string, isFieldLabel: boolean, + customFilter: any, }; export type ListItemProps = { From 471aadcd373a94fe4e9cd2d80fdfff6b1c769577 Mon Sep 17 00:00:00 2001 From: Rohit Luthra Date: Sun, 15 Dec 2019 22:47:44 +0530 Subject: [PATCH 07/29] updated test cases --- lib/components/molecules/Typeahead/tests/Typeahead.test.js | 4 ++-- .../Typeahead/tests/__snapshots__/Typeahead.test.js.snap | 6 ------ 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/lib/components/molecules/Typeahead/tests/Typeahead.test.js b/lib/components/molecules/Typeahead/tests/Typeahead.test.js index 3eab3a108..2c3715fe3 100644 --- a/lib/components/molecules/Typeahead/tests/Typeahead.test.js +++ b/lib/components/molecules/Typeahead/tests/Typeahead.test.js @@ -39,8 +39,8 @@ describe('', () => { expect(TypeaheadComponent.exists({ type: 'search' })).toBe(true); }); - test('should render not List', () => { - expect(TypeaheadComponent.find('List').length).toEqual(1); + test('should not render List by default', () => { + expect(TypeaheadComponent.find('List').length).toEqual(0); }); test('should render onchange event', () => { diff --git a/lib/components/molecules/Typeahead/tests/__snapshots__/Typeahead.test.js.snap b/lib/components/molecules/Typeahead/tests/__snapshots__/Typeahead.test.js.snap index 3d7e32dc8..feef3217c 100644 --- a/lib/components/molecules/Typeahead/tests/__snapshots__/Typeahead.test.js.snap +++ b/lib/components/molecules/Typeahead/tests/__snapshots__/Typeahead.test.js.snap @@ -47,11 +47,5 @@ exports[` should render correctly 1`] = ` } type="search" /> - - When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures. -
    `; From b507806c299d5f6201482b592f45e99ce39c0c4b Mon Sep 17 00:00:00 2001 From: Rohit Kumar Date: Mon, 16 Dec 2019 12:20:53 +0530 Subject: [PATCH 08/29] implemented review comments --- lib/components/molecules/Typeahead/Typeahead.js | 12 +++++++----- .../molecules/Typeahead/Typeahead.story.js | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/lib/components/molecules/Typeahead/Typeahead.js b/lib/components/molecules/Typeahead/Typeahead.js index 3f62ac3cd..98f58e8f1 100644 --- a/lib/components/molecules/Typeahead/Typeahead.js +++ b/lib/components/molecules/Typeahead/Typeahead.js @@ -45,7 +45,7 @@ const Typeahead = ({ const getFilteredResults = (allResults, inputText) => { const filteredResults = allResults && - allResults.filter(Result => Result.toLowerCase().indexOf(inputText.toLowerCase()) > -1); + allResults.filter(result => result.toLowerCase().indexOf(inputText.toLowerCase()) > -1); return filteredResults; }; @@ -95,19 +95,21 @@ const Typeahead = ({ break; } case UP_ARROW: { + let activeIndex = activeResult; if (activeResult === 0) { - setActiveResult(updatedResults.length - 1); + activeIndex = updatedResults.length; return; } - setActiveResult(activeResult - 1); + setActiveResult(activeIndex - 1); break; } case DOWN_ARROW: { + let activeIndex = activeResult; if (activeResult + 1 === updatedResults.length) { - setActiveResult(0); + activeIndex = 0; return; } - setActiveResult(activeResult + 1); + setActiveResult(activeIndex + 1); break; } case TAB: diff --git a/lib/components/molecules/Typeahead/Typeahead.story.js b/lib/components/molecules/Typeahead/Typeahead.story.js index 18741906b..2a6eda307 100644 --- a/lib/components/molecules/Typeahead/Typeahead.story.js +++ b/lib/components/molecules/Typeahead/Typeahead.story.js @@ -65,7 +65,7 @@ const WrapperWithCustomFilterMethod = Component => { const filteredResults = allResults && allResults.filter( - Result => Result.first.toLowerCase().indexOf(inputValue.toLowerCase()) > -1 + result => result.first.toLowerCase().indexOf(inputValue.toLowerCase()) > -1 ); return filteredResults; }; From 85bc143a7f3c9f039f2a06c43a2272ce9a6ebfcb Mon Sep 17 00:00:00 2001 From: Vijendra Mishra Date: Mon, 16 Dec 2019 16:35:31 +0530 Subject: [PATCH 09/29] updated snap shots --- .jest-test-results.json | 6292 ++++++++--------- .../__snapshots__/Button.style.test.js.snap | 1 - .../__snapshots__/Image.style.test.js.snap | 2 - .../__snapshots__/Input.style.test.js.snap | 1 - .../__snapshots__/Textarea.style.test.js.snap | 1 - .../__snapshots__/FieldInput.test.js.snap | 1 - .../__snapshots__/FieldTextarea.test.js.snap | 1 - yarn.lock | 132 +- 8 files changed, 3156 insertions(+), 3275 deletions(-) diff --git a/.jest-test-results.json b/.jest-test-results.json index cf9870cc8..ae024db7c 100644 --- a/.jest-test-results.json +++ b/.jest-test-results.json @@ -11,271 +11,301 @@ "numTotalTests": 97, "openHandles": [], "snapshot": { - "added": 1, - "didUpdate": false, + "added": 0, + "didUpdate": true, "failure": false, - "filesAdded": 1, + "filesAdded": 0, "filesRemoved": 0, "filesRemovedList": [], "filesUnmatched": 0, - "filesUpdated": 0, - "matched": 40, + "filesUpdated": 6, + "matched": 34, "total": 41, "unchecked": 0, "uncheckedKeysByFile": [], "unmatched": 0, - "updated": 0 + "updated": 7 }, - "startTime": 1576493768065, + "startTime": 1576494309992, "success": true, "testResults": [ { "assertionResults": [ { - "ancestorTitles": ["Button Component"], + "ancestorTitles": ["Input Styled component"], "failureMessages": [], - "fullName": "Button Component should render correctly", + "fullName": "Input Styled component should render correctly", "location": null, "status": "passed", "title": "should render correctly" - }, - { - "ancestorTitles": ["Button Component"], - "failureMessages": [], - "fullName": "Button Component should render disabled", - "location": null, - "status": "passed", - "title": "should render disabled" - }, + } + ], + "endTime": 1576494315012, + "message": "", + "name": "/Users/vijmishr/Documents/Projects/atomic-react-components/lib/components/atoms/Input/tests/Input.style.test.js", + "startTime": 1576494313717, + "status": "passed", + "summary": "" + }, + { + "assertionResults": [ { - "ancestorTitles": ["Button Component"], + "ancestorTitles": ["Image Component with styles"], "failureMessages": [], - "fullName": "Button Component should render title element", + "fullName": "Image Component with styles should render correctly and match snapshots", "location": null, "status": "passed", - "title": "should render title element" + "title": "should render correctly and match snapshots" }, { - "ancestorTitles": ["Button Component"], + "ancestorTitles": ["Image Component with styles"], "failureMessages": [], - "fullName": "Button Component should render aria attribute element", + "fullName": "Image Component with styles should render correctly with lazy load", "location": null, "status": "passed", - "title": "should render aria attribute element" - }, + "title": "should render correctly with lazy load" + } + ], + "endTime": 1576494315008, + "message": "", + "name": "/Users/vijmishr/Documents/Projects/atomic-react-components/lib/components/atoms/Image/tests/Image.style.test.js", + "startTime": 1576494313726, + "status": "passed", + "summary": "" + }, + { + "assertionResults": [ { - "ancestorTitles": ["Button Component"], + "ancestorTitles": ["Select Styled component"], "failureMessages": [], - "fullName": "Button Component should check the data attribute of button", + "fullName": "Select Styled component should render correctly", "location": null, "status": "passed", - "title": "should check the data attribute of button" + "title": "should render correctly" } ], - "endTime": 1576493779722, + "endTime": 1576494315086, "message": "", - "name": "/Users/vijmishr/Documents/Projects/atomic-react-components/lib/components/atoms/Button/tests/Button.test.js", - "startTime": 1576493776156, + "name": "/Users/vijmishr/Documents/Projects/atomic-react-components/lib/components/atoms/Textarea/tests/Textarea.style.test.js", + "startTime": 1576494313732, "status": "passed", "summary": "" }, { "assertionResults": [ { - "ancestorTitles": [" Rendering"], + "ancestorTitles": ["Button"], "failureMessages": [], - "fullName": " Rendering should render correctly", + "fullName": "Button should render correctly", "location": null, "status": "passed", "title": "should render correctly" - }, + } + ], + "endTime": 1576494315073, + "message": "", + "name": "/Users/vijmishr/Documents/Projects/atomic-react-components/lib/components/atoms/Button/tests/Button.style.test.js", + "startTime": 1576494313710, + "status": "passed", + "summary": "" + }, + { + "assertionResults": [ { - "ancestorTitles": ["Popover functional behavior"], + "ancestorTitles": ["FieldTextarea Component"], "failureMessages": [], - "fullName": "Popover functional behavior Should have Close Button By Default and can be closed", + "fullName": "FieldTextarea Component should render correctly", "location": null, "status": "passed", - "title": "Should have Close Button By Default and can be closed" + "title": "should render correctly" }, { - "ancestorTitles": ["Popover functional behavior"], + "ancestorTitles": ["FieldTextarea Component"], "failureMessages": [], - "fullName": "Popover functional behavior Should open By Default when isVisible set to true", + "fullName": "FieldTextarea Component should render label correctly", "location": null, "status": "passed", - "title": "Should open By Default when isVisible set to true" + "title": "should render label correctly" }, { - "ancestorTitles": ["Popover functional behavior"], + "ancestorTitles": ["FieldTextarea Component"], "failureMessages": [], - "fullName": "Popover functional behavior Should open and close on Trigger and X button click", + "fullName": "FieldTextarea Component should render textarea tag", "location": null, "status": "passed", - "title": "Should open and close on Trigger and X button click" + "title": "should render textarea tag" } ], - "endTime": 1576493780025, + "endTime": 1576494315545, "message": "", - "name": "/Users/vijmishr/Documents/Projects/atomic-react-components/lib/components/molecules/Popover/tests/Popover.test.js", - "startTime": 1576493776315, + "name": "/Users/vijmishr/Documents/Projects/atomic-react-components/lib/components/molecules/Form/FieldTextarea/tests/FieldTextarea.test.js", + "startTime": 1576494313720, "status": "passed", "summary": "" }, { "assertionResults": [ { - "ancestorTitles": ["