Skip to content

Typeahead component with tdd approch #185

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vinodloha merged 33 commits into from
Dec 23, 2019
Merged

Typeahead component with tdd approch #185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
c2296ec
added typeahead component with tdd approch
Dec 14, 2019
f473961
added aria-expanded
Dec 14, 2019
d54e926
fixed linting error
Dec 14, 2019
64c9f2a
fixed linting error
Dec 14, 2019
f4ac3ff
updated snapshots
Dec 15, 2019
f3b6f87
added feature to use customer filter method
Dec 15, 2019
471aadc
updated test cases
Dec 15, 2019
b507806
implemented review comments
Dec 16, 2019
7d10452
updated code from develop
Dec 16, 2019
85bc143
updated snap shots
Dec 16, 2019
7091ffd
updated snapshots
Dec 16, 2019
246c3aa
updated snap shots
Dec 16, 2019
5e0be35
implemented review comments
Dec 16, 2019
e7ffb74
added jsx-a11y/label-has-associated-control
Dec 16, 2019
9956316
removed jsx-a11y/label-has-associated-control
Dec 16, 2019
ea54843
added one more test
Dec 16, 2019
29b6358
added one more test
Dec 16, 2019
3f58899
added minCharactersRequired
Dec 17, 2019
ad86784
Merge branch 'develop' into typeahead
RohitLuthra19 Dec 17, 2019
23b937f
commented the test cases failing on travis
Dec 17, 2019
5af0e75
fixed issue pressing down arrow key on last item should move to first…
Dec 17, 2019
57b5469
merged changes
Dec 19, 2019
9689dd7
implemented review comments
Dec 19, 2019
ef11282
updated review comments
Dec 21, 2019
727bf91
fixed function typeof check
Dec 21, 2019
e25a968
removed default function props with null
Dec 21, 2019
d308c01
updated snapshots
Dec 22, 2019
c061f6c
updated snapshots
Dec 22, 2019
6f5aa66
updated snapshots
Dec 22, 2019
950dd11
updated component to have accessibility support
Dec 23, 2019
47ea801
added typeahead entry in main export index.js file
Dec 23, 2019
dc44f19
Merge branch 'develop' into typeahead
Dec 23, 2019
cb84018
updated typeahead component to support intial instructions for access…
Dec 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6,414 changes: 6,414 additions & 0 deletions .jest-test-results.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions lib/components/atoms/Button/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ type Props = {
secondary?: boolean,
tertiary?: boolean,
disabled?: boolean,
transparent?: boolean,
ariaLabel?: string,
elementLocator?: string,
};
Expand All @@ -28,6 +29,7 @@ const Button = ({
secondary,
tertiary,
disabled,
transparent,
ariaLabel,
elementLocator,
...others
Expand All @@ -51,6 +53,7 @@ Button.defaultProps = {
secondary: false,
tertiary: false,
disabled: false,
transparent: false,
Comment thread
RohitLuthra19 marked this conversation as resolved.
ariaLabel: '',
className: '',
elementLocator: '',
Expand Down
7 changes: 7 additions & 0 deletions lib/components/atoms/Button/Button.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 : '')};
`;

Expand Down
34 changes: 34 additions & 0 deletions lib/components/atoms/Button/tests/__snapshots__/Button.style.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ exports[`Button should render correctly 1`] = `
";&:focus:not(.focus-visible){outline:none;}",
[Function],
";",
[Function],
";",
";",
],
},
Expand Down Expand Up @@ -79,6 +81,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 {
Expand Down Expand Up @@ -127,15 +136,40 @@ 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);
}
",
"CTA_WARNING": "
background-color:var(--bg-cta-warning);
color:var(--text-cta-warning);",
"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);
",
"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);
",
"TEXT_ERROR": "
color: var(--error);
",
"TEXT_INVERSE": "
color: var(--text-inverse);
Expand Down
32 changes: 32 additions & 0 deletions lib/components/atoms/Input/tests/__snapshots__/Input.style.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,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 {
Expand Down Expand Up @@ -121,15 +128,40 @@ 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);
}
",
"CTA_WARNING": "
background-color:var(--bg-cta-warning);
color:var(--text-cta-warning);",
"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);
",
"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);
",
"TEXT_ERROR": "
color: var(--error);
",
"TEXT_INVERSE": "
color: var(--text-inverse);
Expand Down
32 changes: 32 additions & 0 deletions lib/components/atoms/Select/tests/__snapshots__/Select.style.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,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 {
Expand Down Expand Up @@ -96,15 +103,40 @@ 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);
}
",
"CTA_WARNING": "
background-color:var(--bg-cta-warning);
color:var(--text-cta-warning);",
"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);
",
"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);
",
"TEXT_ERROR": "
color: var(--error);
",
"TEXT_INVERSE": "
color: var(--text-inverse);
Expand Down
32 changes: 32 additions & 0 deletions lib/components/atoms/Textarea/tests/__snapshots__/Textarea.style.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,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 {
Expand Down Expand Up @@ -122,15 +129,40 @@ 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);
}
",
"CTA_WARNING": "
background-color:var(--bg-cta-warning);
color:var(--text-cta-warning);",
"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);
",
"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);
",
"TEXT_ERROR": "
color: var(--error);
",
"TEXT_INVERSE": "
color: var(--text-inverse);
Expand Down
43 changes: 43 additions & 0 deletions lib/components/molecules/Typeahead/ListItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
// @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 (
<li
className={classNames({ active: isSelectedItem })}
role="option"
id={isSelectedItem && 'selectedOption'}
aria-selected={isSelectedItem}
>
<Button
fullWidth
transparent
onClick={() => handleClick(item)}
onMouseEnter={onMouseEnter}
Comment thread
RohitLuthra19 marked this conversation as resolved.
onMouseDown={onMouseDown}
>
{children}
</Button>
</li>
);
};

export default ListItem;
Loading