From 0b2c68993877d3098221ac891009312d587f9a91 Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo Date: Mon, 15 Jun 2020 14:41:35 -0400 Subject: [PATCH 01/12] Search / Search Assist --- src/Search/SearchAssist.js | 41 +++++++++++++++++++++++ src/Search/SearchAssistance.js | 21 ++++++++++++ src/Search/index.js | 51 ++++++++++++++++++++++++++++ src/Search/stories.js | 61 ++++++++++++++++++++++++++++++++++ src/index.mjs | 4 +++ src/storyUtils.js | 4 +++ 6 files changed, 182 insertions(+) create mode 100644 src/Search/SearchAssist.js create mode 100644 src/Search/SearchAssistance.js create mode 100644 src/Search/index.js create mode 100644 src/Search/stories.js diff --git a/src/Search/SearchAssist.js b/src/Search/SearchAssist.js new file mode 100644 index 0000000..d767238 --- /dev/null +++ b/src/Search/SearchAssist.js @@ -0,0 +1,41 @@ +import PropTypes from 'prop-types'; +import React, { useState } from 'react'; +import Search from './index'; +import SearchAssistance from './SearchAssistance'; +import { wcBool } from '../utils'; +import { POSITIONS } from '../constants'; + +/** + * @see https://helixdesignsystem.github.io/helix-ui/components/search/ + */ +const SearchAssist = ({ children, onFocus, onBlur, ...rest }) => { + const [open, setOpen] = useState(false); + return ( + <> + { + setOpen(true); + onFocus && onFocus(e) + }} + onBlur={(e) => { + setOpen(false); + onBlur && onBlur(e) + }} + wrapperId={`${rest.id}-hx-search-control`} + /> + + {children} + + + ); +}; + +SearchAssist.propTypes = { + children: PropTypes.node.isRequired, + relativeTo: PropTypes.string.isRequired, + position: PropTypes.oneOf(POSITIONS), + optimumPosition: PropTypes.string, +}; + +export default SearchAssist; diff --git a/src/Search/SearchAssistance.js b/src/Search/SearchAssistance.js new file mode 100644 index 0000000..23cad09 --- /dev/null +++ b/src/Search/SearchAssistance.js @@ -0,0 +1,21 @@ +import PropTypes from 'prop-types'; +import React from 'react'; + +/** + * @see https://helixdesignsystem.github.io/helix-ui/elements/hx-search-assistance/ + */ +const SearchAssistance = ({ children, className, relativeTo, ...rest }) => { + return ( + + {children} + + ); +}; + +SearchAssistance.propTypes = { + children: PropTypes.node.isRequired, + relativeTo: PropTypes.string.isRequired, +}; + + +export default SearchAssistance; diff --git a/src/Search/index.js b/src/Search/index.js new file mode 100644 index 0000000..9d6abe8 --- /dev/null +++ b/src/Search/index.js @@ -0,0 +1,51 @@ +import classnames from 'classnames'; +import PropTypes from 'prop-types'; +import React from 'react'; +import Icon from '../Icon'; +import { wcBool } from '../utils'; + +/** + * @see https://helixdesignsystem.github.io/helix-ui/components/search/ + */ +const Search = ({ children, disabled, id, label, className, clearLabel, onClear, optional, required, wrapperId, ...rest }) => { + return ( + + + + + {label && ( + + )} + + ); +}; + +Search.propTypes = { + className: PropTypes.string, + label: PropTypes.string, + id: PropTypes.string.isRequired, + wrapperId: PropTypes.string, + disabled: PropTypes.bool, + onChange: PropTypes.func, + onFocus: PropTypes.func, + onBlur: PropTypes.func, + onClear: PropTypes.func, + optional: PropTypes.bool, + required: PropTypes.bool, +}; + +Search.defaultProps = { + clearLabel: 'Clear search' +}; + +export default Search; diff --git a/src/Search/stories.js b/src/Search/stories.js new file mode 100644 index 0000000..5fe44d0 --- /dev/null +++ b/src/Search/stories.js @@ -0,0 +1,61 @@ +import centered from '@storybook/addon-centered/react'; +import { action } from '@storybook/addon-actions'; +import { boolean, text } from '@storybook/addon-knobs'; +import { storiesOf } from '@storybook/react'; +import React, { useState } from 'react'; +import Search from '../Search'; +import SearchAssist from './SearchAssist'; +import { InputContainer } from '../storyUtils'; + +storiesOf('Search', module) + .addDecorator(centered) + .add('All Knobs', () => { + let disabled = boolean('disabled', false); + let label = text('label', ''); + let optional = boolean('optional', false); + let required = boolean('required', false); + + return ( + + + + ); + }).add('SearchAssist', () => { + let disabled = boolean('disabled', false); + let label = text('label', 'Search'); + let optional = boolean('optional', false); + let required = boolean('required', false); + const [value, setValue] = useState(''); + + return ( + + setValue(e.target.value)} + onClear={e => action('onClear')} + onFocus={e => action('onFocus')} + onBlur={e => action('onBlur')} + {...(disabled && { disabled })} + {...(label && { label })} + {...(optional && { optional })} + {...(required && { required })} + > +
Search for "{value}"
+
+
Category Header
+ + + +
+ + + ); +}); + diff --git a/src/index.mjs b/src/index.mjs index 779609e..388290d 100644 --- a/src/index.mjs +++ b/src/index.mjs @@ -7,6 +7,8 @@ import Modal from './Modal'; import Popover from './Popover'; import Tooltip from './Tooltip'; import Select from './Select'; +import Search from './Search'; +import SearchAssist from './Search/SearchAssist'; export default { Button, @@ -17,4 +19,6 @@ export default { Popover, Select, Tooltip, + Search, + SearchAssist }; diff --git a/src/storyUtils.js b/src/storyUtils.js index bf6075a..ba5fa0a 100644 --- a/src/storyUtils.js +++ b/src/storyUtils.js @@ -1,3 +1,5 @@ +import React from 'react'; + export const getShortText = () => `lorem ipsum dolor sir amet`; export const getLongText = () => ` @@ -13,3 +15,5 @@ export const getLongText = () => ` elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla. `; + +export const InputContainer = ({ children }) =>
{children}
; From 729302f0f1d3bfd94c9d830e347c71281ede6207 Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo Date: Mon, 15 Jun 2020 14:42:28 -0400 Subject: [PATCH 02/12] make it prettier --- src/Search/SearchAssist.js | 4 +- src/Search/SearchAssistance.js | 1 - src/Search/index.js | 18 +++++++-- src/Search/stories.js | 68 ++++++++++++++++++---------------- src/storyUtils.js | 4 +- 5 files changed, 57 insertions(+), 38 deletions(-) diff --git a/src/Search/SearchAssist.js b/src/Search/SearchAssist.js index d767238..a7da2f9 100644 --- a/src/Search/SearchAssist.js +++ b/src/Search/SearchAssist.js @@ -16,11 +16,11 @@ const SearchAssist = ({ children, onFocus, onBlur, ...rest }) => { {...rest} onFocus={(e) => { setOpen(true); - onFocus && onFocus(e) + onFocus && onFocus(e); }} onBlur={(e) => { setOpen(false); - onBlur && onBlur(e) + onBlur && onBlur(e); }} wrapperId={`${rest.id}-hx-search-control`} /> diff --git a/src/Search/SearchAssistance.js b/src/Search/SearchAssistance.js index 23cad09..9b56732 100644 --- a/src/Search/SearchAssistance.js +++ b/src/Search/SearchAssistance.js @@ -17,5 +17,4 @@ SearchAssistance.propTypes = { relativeTo: PropTypes.string.isRequired, }; - export default SearchAssistance; diff --git a/src/Search/index.js b/src/Search/index.js index 9d6abe8..e4675e7 100644 --- a/src/Search/index.js +++ b/src/Search/index.js @@ -7,11 +7,23 @@ import { wcBool } from '../utils'; /** * @see https://helixdesignsystem.github.io/helix-ui/components/search/ */ -const Search = ({ children, disabled, id, label, className, clearLabel, onClear, optional, required, wrapperId, ...rest }) => { +const Search = ({ + children, + disabled, + id, + label, + className, + clearLabel, + onClear, + optional, + required, + wrapperId, + ...rest +}) => { return ( - @@ -45,7 +57,7 @@ Search.propTypes = { }; Search.defaultProps = { - clearLabel: 'Clear search' + clearLabel: 'Clear search', }; export default Search; diff --git a/src/Search/stories.js b/src/Search/stories.js index 5fe44d0..e2b0ab3 100644 --- a/src/Search/stories.js +++ b/src/Search/stories.js @@ -27,35 +27,41 @@ storiesOf('Search', module) /> ); - }).add('SearchAssist', () => { - let disabled = boolean('disabled', false); - let label = text('label', 'Search'); - let optional = boolean('optional', false); - let required = boolean('required', false); - const [value, setValue] = useState(''); - - return ( - - setValue(e.target.value)} - onClear={e => action('onClear')} - onFocus={e => action('onFocus')} - onBlur={e => action('onBlur')} - {...(disabled && { disabled })} - {...(label && { label })} - {...(optional && { optional })} - {...(required && { required })} - > -
Search for "{value}"
-
-
Category Header
- - - -
- - - ); -}); + }) + .add('SearchAssist', () => { + let disabled = boolean('disabled', false); + let label = text('label', 'Search'); + let optional = boolean('optional', false); + let required = boolean('required', false); + const [value, setValue] = useState(''); + return ( + + setValue(e.target.value)} + onClear={(e) => action('onClear')} + onFocus={(e) => action('onFocus')} + onBlur={(e) => action('onBlur')} + {...(disabled && { disabled })} + {...(label && { label })} + {...(optional && { optional })} + {...(required && { required })} + > +
Search for "{value}"
+
+
Category Header
+ + + +
+ + + ); + }); diff --git a/src/storyUtils.js b/src/storyUtils.js index ba5fa0a..0fceeec 100644 --- a/src/storyUtils.js +++ b/src/storyUtils.js @@ -16,4 +16,6 @@ export const getLongText = () => ` nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla. `; -export const InputContainer = ({ children }) =>
{children}
; +export const InputContainer = ({ children }) => ( +
{children}
+); From 5a16e0544d7a49d87b1cbabb4880f2d5a668785b Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo Date: Mon, 15 Jun 2020 15:06:01 -0400 Subject: [PATCH 03/12] Fix default prop values --- src/Search/SearchAssist.js | 10 ++++++---- src/Search/SearchAssistance.js | 8 +++++++- src/Search/stories.js | 7 ++++++- 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/Search/SearchAssist.js b/src/Search/SearchAssist.js index a7da2f9..3a57291 100644 --- a/src/Search/SearchAssist.js +++ b/src/Search/SearchAssist.js @@ -8,7 +8,7 @@ import { POSITIONS } from '../constants'; /** * @see https://helixdesignsystem.github.io/helix-ui/components/search/ */ -const SearchAssist = ({ children, onFocus, onBlur, ...rest }) => { +const SearchAssist = ({ children, onFocus, onBlur, position, ...rest }) => { const [open, setOpen] = useState(false); return ( <> @@ -24,7 +24,11 @@ const SearchAssist = ({ children, onFocus, onBlur, ...rest }) => { }} wrapperId={`${rest.id}-hx-search-control`} /> - + {children} @@ -33,9 +37,7 @@ const SearchAssist = ({ children, onFocus, onBlur, ...rest }) => { SearchAssist.propTypes = { children: PropTypes.node.isRequired, - relativeTo: PropTypes.string.isRequired, position: PropTypes.oneOf(POSITIONS), - optimumPosition: PropTypes.string, }; export default SearchAssist; diff --git a/src/Search/SearchAssistance.js b/src/Search/SearchAssistance.js index 9b56732..7bc93f6 100644 --- a/src/Search/SearchAssistance.js +++ b/src/Search/SearchAssistance.js @@ -1,12 +1,17 @@ import PropTypes from 'prop-types'; import React from 'react'; +import { POSITIONS } from '../constants'; /** * @see https://helixdesignsystem.github.io/helix-ui/elements/hx-search-assistance/ */ const SearchAssistance = ({ children, className, relativeTo, ...rest }) => { return ( - + {children} ); @@ -15,6 +20,7 @@ const SearchAssistance = ({ children, className, relativeTo, ...rest }) => { SearchAssistance.propTypes = { children: PropTypes.node.isRequired, relativeTo: PropTypes.string.isRequired, + position: PropTypes.oneOf(POSITIONS), }; export default SearchAssistance; diff --git a/src/Search/stories.js b/src/Search/stories.js index e2b0ab3..34a5e30 100644 --- a/src/Search/stories.js +++ b/src/Search/stories.js @@ -1,11 +1,12 @@ import centered from '@storybook/addon-centered/react'; import { action } from '@storybook/addon-actions'; -import { boolean, text } from '@storybook/addon-knobs'; +import { boolean, text, select } from '@storybook/addon-knobs'; import { storiesOf } from '@storybook/react'; import React, { useState } from 'react'; import Search from '../Search'; import SearchAssist from './SearchAssist'; import { InputContainer } from '../storyUtils'; +import { POSITIONS } from '../constants'; storiesOf('Search', module) .addDecorator(centered) @@ -14,6 +15,7 @@ storiesOf('Search', module) let label = text('label', ''); let optional = boolean('optional', false); let required = boolean('required', false); + let position = select('positions', POSITIONS, 'bottom-center'); return ( @@ -23,6 +25,7 @@ storiesOf('Search', module) {...(label && { label })} {...(optional && { optional })} {...(required && { required })} + {...(position && { position })} onChange={action('change')} /> @@ -33,6 +36,7 @@ storiesOf('Search', module) let label = text('label', 'Search'); let optional = boolean('optional', false); let required = boolean('required', false); + let position = select('positions', POSITIONS, 'bottom-center'); const [value, setValue] = useState(''); return ( @@ -47,6 +51,7 @@ storiesOf('Search', module) {...(label && { label })} {...(optional && { optional })} {...(required && { required })} + {...(position && { position })} >
Search for "{value}"
From 89dce99981d25a310aaa10596dfef4c4b8e89a01 Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo Date: Mon, 15 Jun 2020 15:12:29 -0400 Subject: [PATCH 04/12] more propTypes --- src/Search/SearchAssistance.js | 6 +----- src/Search/index.js | 1 + 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/Search/SearchAssistance.js b/src/Search/SearchAssistance.js index 7bc93f6..45a15a9 100644 --- a/src/Search/SearchAssistance.js +++ b/src/Search/SearchAssistance.js @@ -7,11 +7,7 @@ import { POSITIONS } from '../constants'; */ const SearchAssistance = ({ children, className, relativeTo, ...rest }) => { return ( - + {children} ); diff --git a/src/Search/index.js b/src/Search/index.js index e4675e7..42f8e59 100644 --- a/src/Search/index.js +++ b/src/Search/index.js @@ -44,6 +44,7 @@ const Search = ({ Search.propTypes = { className: PropTypes.string, + clearLabel: PropTypes.string, label: PropTypes.string, id: PropTypes.string.isRequired, wrapperId: PropTypes.string, From 1165e48eb14f4044d8987701bc050773809a0981 Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo Date: Thu, 18 Jun 2020 16:12:32 -0400 Subject: [PATCH 05/12] Bug fixes - Fixed bug where you could not click item before before search assist was removed from DOM - Fix propTypes errors - Make story book example more realistic by allowing us to select an item - Make sure search is no longer centered to prevent positioning bug from showing up in demo. --- package.json | 3 ++- src/Choice Tile/index.js | 2 +- src/Drawer/index.js | 2 +- src/Modal/index.js | 2 +- src/Search/SearchAssist.js | 27 ++++++++++++++++++++------- src/Search/stories.js | 26 ++++++++++++++------------ yarn.lock | 18 ++++++++++++++++++ 7 files changed, 57 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index 600c991..0a07e76 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,8 @@ "react-dom": "^16.6.3" }, "dependencies": { - "classnames": "^2.2.6" + "classnames": "^2.2.6", + "use-onclickoutside": "^0.3.1" }, "husky": { "hooks": { diff --git a/src/Choice Tile/index.js b/src/Choice Tile/index.js index 269d45b..88e2ef2 100644 --- a/src/Choice Tile/index.js +++ b/src/Choice Tile/index.js @@ -52,7 +52,7 @@ ChoiceTile.propTypes = { invalid: PropTypes.bool, name: PropTypes.string.isRequired, onChange: PropTypes.func, - size: PropTypes.oneOf(SIZES), + size: PropTypes.oneOf(Object.keys(SIZES)), subdued: PropTypes.bool, title: PropTypes.string.isRequired, }; diff --git a/src/Drawer/index.js b/src/Drawer/index.js index f8eef93..2b08614 100644 --- a/src/Drawer/index.js +++ b/src/Drawer/index.js @@ -20,7 +20,7 @@ Drawer.propTypes = { onClose: PropTypes.func, onOpen: PropTypes.func, open: PropTypes.bool, - size: PropTypes.oneOf(SIZES), + size: PropTypes.oneOf(Object.keys(SIZES)), }; Drawer.defaultProps = { diff --git a/src/Modal/index.js b/src/Modal/index.js index 9d2e8c5..f6a5dee 100644 --- a/src/Modal/index.js +++ b/src/Modal/index.js @@ -16,7 +16,7 @@ const Modal = ({ onOpen, onClose, className, open, size, children, ...rest }) => Modal.propTypes = { id: PropTypes.string, - size: PropTypes.oneOf(SIZES), + size: PropTypes.oneOf(Object.keys(SIZES)), children: PropTypes.node.isRequired, className: PropTypes.string, open: PropTypes.bool, diff --git a/src/Search/SearchAssist.js b/src/Search/SearchAssist.js index 3a57291..8599bef 100644 --- a/src/Search/SearchAssist.js +++ b/src/Search/SearchAssist.js @@ -1,43 +1,56 @@ import PropTypes from 'prop-types'; -import React, { useState } from 'react'; +import React, { useState, useRef } from 'react'; import Search from './index'; import SearchAssistance from './SearchAssistance'; import { wcBool } from '../utils'; import { POSITIONS } from '../constants'; +import useClickOutside from 'use-onclickoutside'; /** * @see https://helixdesignsystem.github.io/helix-ui/components/search/ */ const SearchAssist = ({ children, onFocus, onBlur, position, ...rest }) => { const [open, setOpen] = useState(false); + const searchRef = useRef(); + useClickOutside(searchRef, e => setOpen(false)); + return ( - <> +
{ setOpen(true); onFocus && onFocus(e); }} - onBlur={(e) => { - setOpen(false); - onBlur && onBlur(e); - }} wrapperId={`${rest.id}-hx-search-control`} /> setOpen(false)} > {children} - +
); }; SearchAssist.propTypes = { children: PropTypes.node.isRequired, position: PropTypes.oneOf(POSITIONS), + className: PropTypes.string, + clearLabel: PropTypes.string, + label: PropTypes.string, + id: PropTypes.string.isRequired, + wrapperId: PropTypes.string, + disabled: PropTypes.bool, + onChange: PropTypes.func, + onFocus: PropTypes.func, + onBlur: PropTypes.func, + onClear: PropTypes.func, + optional: PropTypes.bool, + required: PropTypes.bool, }; export default SearchAssist; diff --git a/src/Search/stories.js b/src/Search/stories.js index 34a5e30..fa08948 100644 --- a/src/Search/stories.js +++ b/src/Search/stories.js @@ -1,4 +1,3 @@ -import centered from '@storybook/addon-centered/react'; import { action } from '@storybook/addon-actions'; import { boolean, text, select } from '@storybook/addon-knobs'; import { storiesOf } from '@storybook/react'; @@ -9,7 +8,6 @@ import { InputContainer } from '../storyUtils'; import { POSITIONS } from '../constants'; storiesOf('Search', module) - .addDecorator(centered) .add('All Knobs', () => { let disabled = boolean('disabled', false); let label = text('label', ''); @@ -44,7 +42,11 @@ storiesOf('Search', module) setValue(e.target.value)} - onClear={(e) => action('onClear')} + value={value} + onClear={(e) => { + action('onClear'); + setValue(''); + }} onFocus={(e) => action('onFocus')} onBlur={(e) => action('onBlur')} {...(disabled && { disabled })} @@ -56,15 +58,15 @@ storiesOf('Search', module)
Search for "{value}"
Category Header
- - - + {POSITIONS.filter(p => p.search(value) !== -1).map(item => ( + + ))}
diff --git a/yarn.lock b/yarn.lock index 0122082..d2e539c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1896,6 +1896,11 @@ aproba@^1.0.3, aproba@^1.1.1: version "1.2.0" resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a" +are-passive-events-supported@^1.1.0: + version "1.1.1" + resolved "https://registry.yarnpkg.com/are-passive-events-supported/-/are-passive-events-supported-1.1.1.tgz#3db180a1753a2186a2de50a32cded3ac0979f5dc" + integrity sha512-5wnvlvB/dTbfrCvJ027Y4L4gW/6Mwoy1uFSavney0YO++GU+0e/flnjiBBwH+1kh7xNCgCOGvmJC3s32joYbww== + are-we-there-yet@~1.1.2: version "1.1.5" resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21" @@ -7461,6 +7466,19 @@ use-callback-ref@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.1.tgz#898759ccb9e14be6c7a860abafa3ffbd826c89bb" +use-latest@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.0.0.tgz#c86d2e4893b15f27def69da574a47136d107facb" + integrity sha512-CxmFi75KTXeTIBlZq3LhJ4Hz98pCaRKZHCpnbiaEHIr5QnuHvH8lKYoluPBt/ik7j/hFVPB8K3WqF6mQvLyQTg== + +use-onclickoutside@^0.3.1: + version "0.3.1" + resolved "https://registry.yarnpkg.com/use-onclickoutside/-/use-onclickoutside-0.3.1.tgz#fdd723a6a499046b6bc761e4a03af432eee5917b" + integrity sha512-aahvbW5+G0XJfzj31FJeLsvc6qdKbzeTsQ8EtkHHq5qTg6bm/qkJeKLcgrpnYeHDDbd7uyhImLGdkbM9BRzOHQ== + dependencies: + are-passive-events-supported "^1.1.0" + use-latest "^1.0.0" + use-sidecar@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.2.tgz#e72f582a75842f7de4ef8becd6235a4720ad8af6" From 7798590d8e7a007fca59478fa012a05adb9e546a Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo Date: Thu, 18 Jun 2020 16:13:13 -0400 Subject: [PATCH 06/12] make it pretty --- src/Search/SearchAssist.js | 2 +- src/Search/stories.js | 8 ++------ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/Search/SearchAssist.js b/src/Search/SearchAssist.js index 8599bef..1edf1c2 100644 --- a/src/Search/SearchAssist.js +++ b/src/Search/SearchAssist.js @@ -12,7 +12,7 @@ import useClickOutside from 'use-onclickoutside'; const SearchAssist = ({ children, onFocus, onBlur, position, ...rest }) => { const [open, setOpen] = useState(false); const searchRef = useRef(); - useClickOutside(searchRef, e => setOpen(false)); + useClickOutside(searchRef, (e) => setOpen(false)); return (
diff --git a/src/Search/stories.js b/src/Search/stories.js index fa08948..24dc8d6 100644 --- a/src/Search/stories.js +++ b/src/Search/stories.js @@ -58,12 +58,8 @@ storiesOf('Search', module)
Search for "{value}"
Category Header
- {POSITIONS.filter(p => p.search(value) !== -1).map(item => ( - ))} From e00a1a9b9307d30e95d92f9cf79c0b7dec7d8002 Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo Date: Thu, 18 Jun 2020 16:35:25 -0400 Subject: [PATCH 07/12] add Autocomplete --- src/Search/stories.js | 2 ++ src/storyUtils.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Search/stories.js b/src/Search/stories.js index 24dc8d6..5859769 100644 --- a/src/Search/stories.js +++ b/src/Search/stories.js @@ -25,6 +25,7 @@ storiesOf('Search', module) {...(required && { required })} {...(position && { position })} onChange={action('change')} + autocomplete="off" /> ); @@ -49,6 +50,7 @@ storiesOf('Search', module) }} onFocus={(e) => action('onFocus')} onBlur={(e) => action('onBlur')} + autocomplete="off" {...(disabled && { disabled })} {...(label && { label })} {...(optional && { optional })} diff --git a/src/storyUtils.js b/src/storyUtils.js index 0fceeec..d4a0509 100644 --- a/src/storyUtils.js +++ b/src/storyUtils.js @@ -17,5 +17,5 @@ export const getLongText = () => ` `; export const InputContainer = ({ children }) => ( -
{children}
+
{children}
); From 1f307bdc07fd3148b3d2f2800c4537474c9e284d Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo Date: Thu, 18 Jun 2020 16:35:54 -0400 Subject: [PATCH 08/12] make it pretty --- src/storyUtils.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/storyUtils.js b/src/storyUtils.js index d4a0509..85b6dfc 100644 --- a/src/storyUtils.js +++ b/src/storyUtils.js @@ -16,6 +16,4 @@ export const getLongText = () => ` nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla. `; -export const InputContainer = ({ children }) => ( -
{children}
-); +export const InputContainer = ({ children }) =>
{children}
; From 10e843c295848cff788fd94c57b93d324b8df8bb Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo Date: Thu, 18 Jun 2020 22:13:58 -0400 Subject: [PATCH 09/12] Only load panel if children exist --- src/Search/SearchAssist.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/Search/SearchAssist.js b/src/Search/SearchAssist.js index 1edf1c2..91771f7 100644 --- a/src/Search/SearchAssist.js +++ b/src/Search/SearchAssist.js @@ -11,9 +11,11 @@ import useClickOutside from 'use-onclickoutside'; */ const SearchAssist = ({ children, onFocus, onBlur, position, ...rest }) => { const [open, setOpen] = useState(false); + const searchRef = useRef(); useClickOutside(searchRef, (e) => setOpen(false)); + const hasChildren = React.Children.toArray(children).filter(c => c).length > 0; return (
{ }} wrapperId={`${rest.id}-hx-search-control`} /> - setOpen(false)} - > - {children} - + {hasChildren && + setOpen(false)} + > + {children} + + }
); }; From bfe91ec38abcb5658b9afbdbe92698f8843bda81 Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo Date: Thu, 18 Jun 2020 22:17:36 -0400 Subject: [PATCH 10/12] cleanup --- src/Search/SearchAssist.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/Search/SearchAssist.js b/src/Search/SearchAssist.js index 91771f7..09e7a15 100644 --- a/src/Search/SearchAssist.js +++ b/src/Search/SearchAssist.js @@ -13,9 +13,10 @@ const SearchAssist = ({ children, onFocus, onBlur, position, ...rest }) => { const [open, setOpen] = useState(false); const searchRef = useRef(); - useClickOutside(searchRef, (e) => setOpen(false)); + useClickOutside(searchRef, () => setOpen(false)); + + const hasChildren = React.Children.toArray(children).filter((c) => c).length > 0; - const hasChildren = React.Children.toArray(children).filter(c => c).length > 0; return (
{ }} wrapperId={`${rest.id}-hx-search-control`} /> - {hasChildren && + {hasChildren && ( { > {children} - } + )}
); }; From c9c92869fb7eb492ba38a6c5716f5d1141683f0c Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo Date: Wed, 24 Jun 2020 17:24:13 -0400 Subject: [PATCH 11/12] Add Choice tile to index.mjs and order components in index.mjs --- src/{Choice Tile => ChoiceTile}/index.js | 0 src/{Choice Tile => ChoiceTile}/stories.js | 0 src/index.mjs | 6 ++++-- 3 files changed, 4 insertions(+), 2 deletions(-) rename src/{Choice Tile => ChoiceTile}/index.js (100%) rename src/{Choice Tile => ChoiceTile}/stories.js (100%) diff --git a/src/Choice Tile/index.js b/src/ChoiceTile/index.js similarity index 100% rename from src/Choice Tile/index.js rename to src/ChoiceTile/index.js diff --git a/src/Choice Tile/stories.js b/src/ChoiceTile/stories.js similarity index 100% rename from src/Choice Tile/stories.js rename to src/ChoiceTile/stories.js diff --git a/src/index.mjs b/src/index.mjs index 388290d..de07366 100644 --- a/src/index.mjs +++ b/src/index.mjs @@ -1,6 +1,7 @@ /* Export helix-react definition */ -import Button from './Button'; import Alert from './Alert'; +import Button from './Button'; +import ChoiceTile from './ChoiceTile'; import Drawer from './Drawer'; import Icon from './Icon'; import Modal from './Modal'; @@ -11,8 +12,9 @@ import Search from './Search'; import SearchAssist from './Search/SearchAssist'; export default { - Button, Alert, + Button, + ChoiceTile, Drawer, Icon, Modal, From e3bb8491c8c7c0e89b51ff1814e46950166eb06e Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo <35456401+nicko-winner@users.noreply.github.com> Date: Thu, 25 Jun 2020 16:41:12 -0400 Subject: [PATCH 12/12] Update src/Search/SearchAssistance.js add classname to propTypes --- src/Search/SearchAssistance.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Search/SearchAssistance.js b/src/Search/SearchAssistance.js index 45a15a9..8175083 100644 --- a/src/Search/SearchAssistance.js +++ b/src/Search/SearchAssistance.js @@ -15,6 +15,7 @@ const SearchAssistance = ({ children, className, relativeTo, ...rest }) => { SearchAssistance.propTypes = { children: PropTypes.node.isRequired, + className: PropTypes.string, relativeTo: PropTypes.string.isRequired, position: PropTypes.oneOf(POSITIONS), };