Skip to content

Commit

Permalink
feat(refinement-list): implement InstantSearch.css to searchbox (#3263)
Browse files Browse the repository at this point in the history
  • Loading branch information
@francoischalifour
francoischalifour authored Nov 15, 2018
1 parent b3aa71e commit ad905c7
Show file tree
Hide file tree
Showing 4 changed files with 285 additions and 209 deletions.
2 changes: 1 addition & 1 deletion src/components/RefinementList/RefinementList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import isEqual from 'lodash/isEqual';
import { isSpecialClick } from '../../lib/utils.js';
import Template from '../Template/Template';
import RefinementListItem from './RefinementListItem.js';
import SearchBox from '../SearchBox';
import SearchBox from '../SearchBox/Searchbox';

class RefinementList extends Component {
constructor(props) {
Expand Down
254 changes: 150 additions & 104 deletions src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,85 +254,108 @@ exports[`RefinementList rendering with facets from search 1`] = `
<div
className="searchBox"
>
<form
className="searchbox sbx-sffv"
noValidate="novalidate"
onReset={[Function]}
onSubmit={[Function]}
<div
className="ais-SearchBox"
>
<svg
style={
Object {
"display": "none",
}
}
xmlns="http://www.w3.org/2000/svg"
>
<symbol
id="sbx-icon-search-12"
viewBox="0 0 40 41"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M30.967 27.727l-.03-.03c-.778-.777-2.038-.777-2.815 0l-1.21 1.21c-.78.78-.778 2.04 0 2.817l.03.03 4.025-4.027zm1.083 1.084L39.24 36c.778.778.78 2.037 0 2.816l-1.21 1.21c-.777.778-2.038.78-2.816 0l-7.19-7.19 4.026-4.025zM15.724 31.45c8.684 0 15.724-7.04 15.724-15.724C31.448 7.04 24.408 0 15.724 0 7.04 0 0 7.04 0 15.724c0 8.684 7.04 15.724 15.724 15.724zm0-3.93c6.513 0 11.793-5.28 11.793-11.794 0-6.513-5.28-11.793-11.793-11.793C9.21 3.93 3.93 9.21 3.93 15.725c0 6.513 5.28 11.793 11.794 11.793z"
fillRule="evenodd"
/>
</symbol>
<symbol
id="sbx-icon-clear-2"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.96 10L.52 1.562 0 1.042 1.04 0l.522.52L10 8.96 18.438.52l.52-.52L20 1.04l-.52.522L11.04 10l8.44 8.438.52.52L18.96 20l-.522-.52L10 11.04l-8.438 8.44-.52.52L0 18.96l.52-.522L8.96 10z"
fillRule="evenodd"
/>
</symbol>
</svg>
<div
className="sbx-sffv__wrapper"
<form
action=""
className="ais-SearchBox-form"
noValidate="novalidate"
onReset={[Function]}
onSubmit={[Function]}
role="search"
>
<input
autoCapitalize="off"
autoComplete="off"
className="sbx-sffv__input"
autoCorrect="off"
className="ais-SearchBox-input"
disabled={false}
name="search"
maxLength="512"
onChange={[Function]}
placeholder="Search"
required="required"
spellCheck="false"
type="search"
/>
<button
className="sbx-sffv__submit"
title="Submit your search query."
className="ais-SearchBox-submit"
title="Submit the search query."
type="submit"
>
<svg
aria-label="Search"
role="img"
className="ais-SearchBox-submitIcon"
height="10"
viewBox="0 0 40 40"
width="10"
xmlns="http://www.w3.org/2000/svg"
>
<use
xlinkHref="#sbx-icon-search-12"
<path
d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
/>
</svg>
</button>
<button
className="sbx-sffv__reset"
className="ais-SearchBox-reset"
hidden={true}
title="Clear the search query."
type="reset"
>
<svg
aria-label="Reset"
role="img"
className="ais-SearchBox-resetIcon"
height="10"
viewBox="0 0 20 20"
width="10"
xmlns="http://www.w3.org/2000/svg"
>
<use
xlinkHref="#sbx-icon-clear-2"
<path
d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
/>
</svg>
</button>
</div>
</form>
<span
className="ais-SearchBox-loadingIndicator"
hidden={true}
>
<svg
className="ais-SearchBox-loadingIcon"
height="16"
stroke="#444"
viewBox="0 0 38 38"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<g
fill="none"
fillRule="evenodd"
>
<g
strokeWidth="2"
transform="translate(1 1)"
>
<circle
cx="18"
cy="18"
r="18"
strokeOpacity=".5"
/>
<path
d="M36 18c0-9.94-8.06-18-18-18"
>
<animateTransform
attributeName="transform"
dur="1s"
from="0 18 18"
repeatCount="indefinite"
to="360 18 18"
type="rotate"
/>
</path>
</g>
</g>
</svg>
</span>
</form>
</div>
</div>
<ul
className="list"
Expand Down Expand Up @@ -420,85 +443,108 @@ exports[`RefinementList rendering without facets from search 1`] = `
<div
className="searchBox"
>
<form
className="searchbox sbx-sffv"
noValidate="novalidate"
onReset={[Function]}
onSubmit={[Function]}
<div
className="ais-SearchBox"
>
<svg
style={
Object {
"display": "none",
}
}
xmlns="http://www.w3.org/2000/svg"
>
<symbol
id="sbx-icon-search-12"
viewBox="0 0 40 41"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M30.967 27.727l-.03-.03c-.778-.777-2.038-.777-2.815 0l-1.21 1.21c-.78.78-.778 2.04 0 2.817l.03.03 4.025-4.027zm1.083 1.084L39.24 36c.778.778.78 2.037 0 2.816l-1.21 1.21c-.777.778-2.038.78-2.816 0l-7.19-7.19 4.026-4.025zM15.724 31.45c8.684 0 15.724-7.04 15.724-15.724C31.448 7.04 24.408 0 15.724 0 7.04 0 0 7.04 0 15.724c0 8.684 7.04 15.724 15.724 15.724zm0-3.93c6.513 0 11.793-5.28 11.793-11.794 0-6.513-5.28-11.793-11.793-11.793C9.21 3.93 3.93 9.21 3.93 15.725c0 6.513 5.28 11.793 11.794 11.793z"
fillRule="evenodd"
/>
</symbol>
<symbol
id="sbx-icon-clear-2"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.96 10L.52 1.562 0 1.042 1.04 0l.522.52L10 8.96 18.438.52l.52-.52L20 1.04l-.52.522L11.04 10l8.44 8.438.52.52L18.96 20l-.522-.52L10 11.04l-8.438 8.44-.52.52L0 18.96l.52-.522L8.96 10z"
fillRule="evenodd"
/>
</symbol>
</svg>
<div
className="sbx-sffv__wrapper"
<form
action=""
className="ais-SearchBox-form"
noValidate="novalidate"
onReset={[Function]}
onSubmit={[Function]}
role="search"
>
<input
autoCapitalize="off"
autoComplete="off"
className="sbx-sffv__input"
autoCorrect="off"
className="ais-SearchBox-input"
disabled={false}
name="search"
maxLength="512"
onChange={[Function]}
placeholder="Search"
required="required"
spellCheck="false"
type="search"
/>
<button
className="sbx-sffv__submit"
title="Submit your search query."
className="ais-SearchBox-submit"
title="Submit the search query."
type="submit"
>
<svg
aria-label="Search"
role="img"
className="ais-SearchBox-submitIcon"
height="10"
viewBox="0 0 40 40"
width="10"
xmlns="http://www.w3.org/2000/svg"
>
<use
xlinkHref="#sbx-icon-search-12"
<path
d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
/>
</svg>
</button>
<button
className="sbx-sffv__reset"
className="ais-SearchBox-reset"
hidden={true}
title="Clear the search query."
type="reset"
>
<svg
aria-label="Reset"
role="img"
className="ais-SearchBox-resetIcon"
height="10"
viewBox="0 0 20 20"
width="10"
xmlns="http://www.w3.org/2000/svg"
>
<use
xlinkHref="#sbx-icon-clear-2"
<path
d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
/>
</svg>
</button>
</div>
</form>
<span
className="ais-SearchBox-loadingIndicator"
hidden={true}
>
<svg
className="ais-SearchBox-loadingIcon"
height="16"
stroke="#444"
viewBox="0 0 38 38"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<g
fill="none"
fillRule="evenodd"
>
<g
strokeWidth="2"
transform="translate(1 1)"
>
<circle
cx="18"
cy="18"
r="18"
strokeOpacity=".5"
/>
<path
d="M36 18c0-9.94-8.06-18-18-18"
>
<animateTransform
attributeName="transform"
dur="1s"
from="0 18 18"
repeatCount="indefinite"
to="360 18 18"
type="rotate"
/>
</path>
</g>
</g>
</svg>
</span>
</form>
</div>
</div>
<div
className="noResults"
Expand Down
Loading

0 comments on commit ad905c7

Please sign in to comment.