diff --git a/.jest-test-results.json b/.jest-test-results.json
new file mode 100644
index 000000000..efc1c6f26
--- /dev/null
+++ b/.jest-test-results.json
@@ -0,0 +1,6414 @@
+{
+ "numFailedTestSuites": 0,
+ "numFailedTests": 0,
+ "numPassedTestSuites": 38,
+ "numPassedTests": 120,
+ "numPendingTestSuites": 0,
+ "numPendingTests": 0,
+ "numRuntimeErrorTestSuites": 0,
+ "numTodoTests": 0,
+ "numTotalTestSuites": 38,
+ "numTotalTests": 120,
+ "openHandles": [],
+ "snapshot": {
+ "added": 0,
+ "didUpdate": false,
+ "failure": false,
+ "filesAdded": 0,
+ "filesRemoved": 0,
+ "filesRemovedList": [],
+ "filesUnmatched": 0,
+ "filesUpdated": 0,
+ "matched": 45,
+ "total": 45,
+ "unchecked": 0,
+ "uncheckedKeysByFile": [],
+ "unmatched": 0,
+ "updated": 0
+ },
+ "startTime": 1577085456911,
+ "success": true,
+ "testResults": [
+ {
+ "assertionResults": [
+ {
+ "ancestorTitles": ["
"],
+ "failureMessages": [],
+ "fullName": "
should render default view correctly",
+ "location": null,
+ "status": "passed",
+ "title": "should render default view correctly"
+ }
+ ],
+ "endTime": 1577085465715,
+ "message": "",
+ "name": "/Users/vinkumar2/Documents/Projects/PageSource/PatternLibs/ReactPatternLib/lib/components/molecules/List/tests/List.test.js",
+ "startTime": 1577085465504,
+ "status": "passed",
+ "summary": ""
+ },
+ {
+ "assertionResults": [
+ {
+ "ancestorTitles": ["
+ handleClick(item)}
+ onMouseEnter={onMouseEnter}
+ onMouseDown={onMouseDown}
+ >
+ {children}
+
+
+ );
+};
+
+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..2ced191ce
--- /dev/null
+++ b/lib/components/molecules/Typeahead/Typeahead.js
@@ -0,0 +1,227 @@
+// @flow
+/**
+ *
+ * Typeahead
+ *
+ */
+import React, { useState, useEffect } 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,
+ customFilter,
+ minSearchChars,
+ minItemsInList,
+ ariainititalInstructions,
+ ...otherProps
+}: Props): React.Element => {
+ const [updatedResults, setFilteredResults] = useState([]);
+ const [activeResult, setActiveResult] = useState(-1);
+
+ useEffect(() => {
+ const element = document.getElementsByClassName('active')[0];
+ if (element) {
+ element.scrollIntoView({ block: 'nearest', behavior: 'auto' });
+ }
+ });
+
+ const triggerGetResults = val => {
+ return val && val.trim().length >= minSearchChars;
+ };
+
+ /**
+ * 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 => {
+ getSelectedResultValue(item);
+ };
+
+ /**
+ * Function to handle text change in input
+ * @param {*} e
+ */
+ const handleChange = e => {
+ if (typeof onChangeHandler === 'function') {
+ onChangeHandler(e);
+ }
+ const { value: inputText } = e.target;
+ let filteredResults = results;
+ if (triggerGetResults(inputText)) {
+ if (typeof getResults === 'function') {
+ getResults(inputText);
+ } else if (typeof customFilter === 'function') {
+ filteredResults = customFilter(results, inputText);
+ } else {
+ filteredResults = getFilteredResults(results, inputText);
+ }
+ } else {
+ filteredResults = [];
+ }
+ setFilteredResults(filteredResults);
+ };
+
+ /**
+ * Function to handle uparrow, downarrow, enter and escape
+ * @param {*} e
+ */
+ const handleKeyDown = e => {
+ switch (e.keyCode) {
+ case ENTER_KEY: {
+ if (activeResult !== -1) {
+ getSelectedResultValue(updatedResults[activeResult]);
+ setFilteredResults([]);
+ }
+ break;
+ }
+ case UP_ARROW: {
+ let activeIndex = activeResult;
+ if (activeResult === 0) {
+ activeIndex = updatedResults.length;
+ }
+ activeIndex -= 1;
+ setActiveResult(activeIndex);
+ break;
+ }
+ case DOWN_ARROW: {
+ let activeIndex = activeResult;
+ if (activeResult + 1 === updatedResults.length) {
+ activeIndex = -1;
+ }
+ activeIndex += 1;
+ setActiveResult(activeIndex);
+ 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 (
+ 0}
+ aria-owns={`typeahead-results-${otherProps.name}`}
+ >
+
+ {label}
+
+
+ {updatedResults.map((item, index) => {
+ return (
+ handleMouseEnter(index)}
+ onMouseDown={() => handleMouseDown(index)}
+ >
+ {renderCustomResultsView ? renderCustomResultsView(item) : item}
+
+ );
+ })}
+
+ )}
+
+ {ariainititalInstructions}
+
+
+ );
+};
+
+Typeahead.defaultProps = {
+ className: 'typeahead-component',
+ getResults: null,
+ results: [],
+ inheritedStyles: '',
+ isFieldLabel: false,
+ customFilter: null,
+ minSearchChars: 3,
+ minItemsInList: 4,
+ ariainititalInstructions:
+ '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.',
+};
+
+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..82aa10d30
--- /dev/null
+++ b/lib/components/molecules/Typeahead/Typeahead.mock.js
@@ -0,0 +1,50 @@
+/* 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',
+};
+
+const mock = {
+ people: [
+ {
+ first: 'Charlie',
+ last: 'Brown',
+ twitter: 'dancounsell',
+ },
+ {
+ first: 'Charlotte',
+ last: 'White',
+ twitter: 'mtnmissy',
+ },
+ {
+ first: 'Chloe',
+ last: 'Jones',
+ twitter: 'ladylexy',
+ },
+ {
+ first: 'Cooper',
+ last: 'King',
+ twitter: 'steveodom',
+ },
+ ],
+};
+
+export { mock };
+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..7a92e71fe
--- /dev/null
+++ b/lib/components/molecules/Typeahead/Typeahead.story.js
@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+// import { action } from '@storybook/addon-actions';
+import defaultConfig, { mock } 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"
+ minSearchChars={3}
+ minItemsInList={3}
+ />
+ );
+};
+
+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"
+ minSearchChars={3}
+ />
+ );
+};
+
+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={mock.people}
+ getSelectedResultValue={value => {
+ setInputText(`${value.first} ${value.last}`);
+ }}
+ isFieldLabel="true"
+ label="search word"
+ renderCustomResultsView={item => {`${item.first} ${item.last}`}
}
+ customFilter={getFilteredResults}
+ minSearchChars={3}
+ />
+ );
+};
+
+// 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('Typeahead without getResults Prop', () => WrapperWithoutGetResults(Typeahead))
+ .add('Typeahead with customFilter Prop', () => WrapperWithCustomFilterMethod(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..f83284623
--- /dev/null
+++ b/lib/components/molecules/Typeahead/Typeahead.style.js
@@ -0,0 +1,32 @@
+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;
+ }
+
+ .initial-string {
+ display: none;
+ }
+
+ ul {
+ ${props => `
+ ${props.theme.border.TYPEAHEAD_LIST};
+ height: calc(48px * ${props.minItemsInList});
+ `};
+ overflow-y: scroll;
+ }
+
+ ${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..6e2ca0882
--- /dev/null
+++ b/lib/components/molecules/Typeahead/tests/Typeahead.test.js
@@ -0,0 +1,171 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { mountWithTheme } from '../../../../../__mock__/themeMock';
+import defaultConfig from '../Typeahead.mock';
+import { TypeaheadVanilla } from '../index';
+
+describe(' {item}
}
+ />
+ );
+
+ 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 not render List by default', () => {
+ expect(TypeaheadComponent.find('List').length).toEqual(0);
+ });
+
+ test('should render onchange event', () => {
+ 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 show list', () => {
+ MountedTypeaheadComponent.find('Input')
+ .first()
+ .simulate('change', {
+ target: { value: 'all' },
+ });
+ expect(MountedTypeaheadComponent.find('ListItem').length).toBe(4);
+ });
+
+ test('should return single list item', () => {
+ MountedTypeaheadComponent.find('Input')
+ .first()
+ .simulate('change', {
+ target: { value: 'Alligator' },
+ });
+ expect(MountedTypeaheadComponent.find('ListItem').length).toBe(1);
+ });
+
+ test('should select particular list item by click', () => {
+ MountedTypeaheadComponent.find('Input')
+ .first()
+ .simulate('change', {
+ target: { value: 'all' },
+ });
+ MountedTypeaheadComponent.find('Button')
+ .at(1)
+ .simulate('click');
+
+ expect(
+ MountedTypeaheadComponent.find('Button')
+ .at(1)
+ .text()
+ ).toEqual('Alligator');
+ });
+
+ test('should render span with id `initInstr`', () => {
+ expect(TypeaheadComponent.find('#initInstr').length).toBe(1);
+ });
+
+ test('should render the input with `aria-autocomplete`', () => {
+ expect(TypeaheadComponent.exists({ 'aria-autocomplete': 'list' })).toBe(true);
+ });
+
+ test('should render the input with `aria-activedescendant`', () => {
+ expect(TypeaheadComponent.exists({ 'aria-activedescendant': '' })).toBe(true);
+ });
+
+ test('should render the input with `aria-describedby`', () => {
+ expect(TypeaheadComponent.exists({ 'aria-describedby': 'initInstr' })).toBe(true);
+ });
+
+ test('should render the list items with `role="option"`', () => {
+ MountedTypeaheadComponent.find('Input')
+ .first()
+ .simulate('change', {
+ target: { value: 'all' },
+ });
+ expect(MountedTypeaheadComponent.find('[role="option"]').length).toBe(4);
+ });
+
+ test('should render the list items with `aria-selected`', () => {
+ MountedTypeaheadComponent.find('Input')
+ .first()
+ .simulate('change', {
+ target: { value: 'all' },
+ });
+ expect(MountedTypeaheadComponent.find('[aria-selected=false]').length).toBe(4);
+ });
+
+ test('should render the list items with `id="selectedOption"`', () => {
+ MountedTypeaheadComponent.find('Input')
+ .first()
+ .simulate('change', {
+ target: { value: 'all' },
+ });
+ MountedTypeaheadComponent.find('Input')
+ .first()
+ .simulate('keydown', { keyCode: 40 });
+ expect(MountedTypeaheadComponent.find('[id="selectedOption"]').length).toBe(1);
+ });
+
+ test('should render the list items with `id="selectedOption"`', () => {
+ MountedTypeaheadComponent.find('Input')
+ .first()
+ .simulate('change', {
+ target: { value: 'all' },
+ });
+ MountedTypeaheadComponent.find('Input')
+ .first()
+ .simulate('keydown', { keyCode: 40 })
+ .simulate('keydown', { keyCode: 40 });
+ expect(MountedTypeaheadComponent.find('[id="selectedOption"]').text()).toBe('Alligation');
+ });
+});
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..894c2d6f1
--- /dev/null
+++ b/lib/components/molecules/Typeahead/tests/__snapshots__/Typeahead.test.js.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`
+
+ 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
new file mode 100644
index 000000000..32cb4e039
--- /dev/null
+++ b/lib/components/molecules/Typeahead/types/index.js
@@ -0,0 +1,35 @@
+// @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,
+ customFilter?: any,
+ minSearchChars?: number,
+ minItemsInList?: number,
+ ariainititalInstructions?: string,
+};
+
+export type ListItemProps = {
+ children: Node,
+ index: number,
+ activeResult: number,
+ handleClick: any,
+ item: any,
+ onMouseEnter: any,
+ onMouseDown: any,
+};
diff --git a/lib/index.js b/lib/index.js
index 72af9bd52..4981d5d32 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -27,6 +27,7 @@ import Modal, { ModalVanilla } from './components/molecules/Modal';
import Popover, { PopoverVanilla } from './components/molecules/Popover';
import Tabs, { TabsVanilla } from './components/molecules/Tabs';
import StickyBar, { StickyBarVanilla } from './components/molecules/StickyBar';
+import Typeahead, { TypeaheadVanilla } from './components/molecules/Typeahead';
import Table, { TableVanilla } from './components/molecules/Table';
/**
* Theme
@@ -74,6 +75,8 @@ export {
Tabs,
TabsVanilla,
Theme,
+ Typeahead,
+ TypeaheadVanilla,
Video,
VideoVanilla,
};
diff --git a/lib/styles/themes/base/def/border.js b/lib/styles/themes/base/def/border.js
index 064281ca8..928c49e9d 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 5e8a75641..849471284 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_DEFAULT: `
background-color:var(--bg-cta-default);
color:var(--text-cta-default);
@@ -67,4 +75,21 @@ export default {
TEXT_LIGHT: `
color: var(--text-light);
`,
+ TEXT_ERROR: `
+ color: var(--error);
+ `,
+ FIELD_DEFAULT: `
+ color: var(--text-cta-tertiary);
+ background-color: var(--bg-cta-tertiary);
+ `,
+ FIELD_DISABLED: `
+ 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 9c85e63eb..70d50e048 100644
--- a/lib/styles/themes/base/tokens/colors.css
+++ b/lib/styles/themes/base/tokens/colors.css
@@ -21,6 +21,8 @@
--brand-tertiary: var(--black);
--brand-tertiary-active: var(--black);
+ --brand-transparent: transparent;
+
--brand-disabled: #e7e7e7;
--outline: #999;
@@ -32,6 +34,7 @@
--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);
--bg-cta-info: #31708f;
--bg-cta-warning: #d8ca00;
--bg-cta-success: #36b37e;