diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx index 6fe02de837..cf4e610b80 100644 --- a/packages/app/src/components/search/SearchPage.tsx +++ b/packages/app/src/components/search/SearchPage.tsx @@ -33,12 +33,14 @@ const useStyles = makeStyles((theme: Theme) => ({ bar: { padding: theme.spacing(1, 0), }, + filter: { + '& + &': { + marginTop: theme.spacing(2.5), + }, + }, filters: { padding: theme.spacing(2), }, - filter: { - marginTop: theme.spacing(2.5), - }, })); // TODO: Move this into the search plugin once pagination is natively supported. diff --git a/plugins/search/api-report.md b/plugins/search/api-report.md index 525136713d..e3075a448d 100644 --- a/plugins/search/api-report.md +++ b/plugins/search/api-report.md @@ -167,7 +167,7 @@ export const useSearch: () => SearchContextValue; // Warnings were encountered during analysis: // -// src/components/SearchContext/SearchContext.d.ts:18:5 - (ae-forgotten-export) The symbol "SettableSearchContext" needs to be exported by the entry point index.d.ts +// src/components/SearchContext/SearchContext.d.ts:19:5 - (ae-forgotten-export) The symbol "SettableSearchContext" needs to be exported by the entry point index.d.ts // src/components/SearchFilter/SearchFilter.d.ts:13:5 - (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // src/components/SearchFilter/SearchFilter.d.ts:14:5 - (ae-forgotten-export) The symbol "Component" needs to be exported by the entry point index.d.ts diff --git a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx new file mode 100644 index 0000000000..34436f9f93 --- /dev/null +++ b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx @@ -0,0 +1,43 @@ +/* + * Copyright 2021 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { Grid } from '@material-ui/core'; +import { DefaultResultListItem } from '../index'; +import { MemoryRouter } from 'react-router'; + +export default { + title: 'Plugins/Search/DefaultResultListItem', + component: DefaultResultListItem, +}; + +export const Default = () => { + return ( + + + + + + + + ); +}; diff --git a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx index 8cb560b7e5..ed508aa671 100644 --- a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx +++ b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx @@ -33,7 +33,7 @@ export const DefaultResultListItem = ({ result }: Props) => { secondary={result.text} /> - + ); }; diff --git a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx new file mode 100644 index 0000000000..fa2ba0d94e --- /dev/null +++ b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx @@ -0,0 +1,47 @@ +/* + * Copyright 2021 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { Paper, Grid } from '@material-ui/core'; +import { SearchBar, SearchContext } from '../index'; +import { MemoryRouter } from 'react-router'; + +export default { + title: 'Plugins/Search/SearchBar', + component: SearchBar, +}; + +const defaultValue = { + term: '', + setTerm: () => {}, +}; + +export const Default = () => { + return ( + + {/* @ts-ignore (defaultValue requires more than what is used here) */} + + + + + + + + + + + ); +}; diff --git a/plugins/search/src/components/SearchContext/SearchContext.tsx b/plugins/search/src/components/SearchContext/SearchContext.tsx index eee72d9fc5..619471d490 100644 --- a/plugins/search/src/components/SearchContext/SearchContext.tsx +++ b/plugins/search/src/components/SearchContext/SearchContext.tsx @@ -45,7 +45,9 @@ type SettableSearchContext = Omit< 'result' | 'setTerm' | 'setTypes' | 'setFilters' | 'setPageCursor' >; -const SearchContext = createContext(undefined); +export const SearchContext = createContext( + undefined, +); export const SearchContextProvider = ({ initialState = { diff --git a/plugins/search/src/components/SearchContext/index.tsx b/plugins/search/src/components/SearchContext/index.tsx index 895e66a9e5..682ade916f 100644 --- a/plugins/search/src/components/SearchContext/index.tsx +++ b/plugins/search/src/components/SearchContext/index.tsx @@ -14,4 +14,8 @@ * limitations under the License. */ -export { SearchContextProvider, useSearch } from './SearchContext'; +export { + SearchContextProvider, + SearchContext, + useSearch, +} from './SearchContext'; diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx new file mode 100644 index 0000000000..190856fca8 --- /dev/null +++ b/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx @@ -0,0 +1,69 @@ +/* + * Copyright 2021 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { Grid, Paper } from '@material-ui/core'; +import { SearchFilter, SearchContext } from '../index'; +import { MemoryRouter } from 'react-router'; + +export default { + title: 'Plugins/Search/SearchFilter', + component: SearchFilter, +}; + +const defaultValue = { + filters: {}, +}; + +export const CheckBoxFilter = () => { + return ( + + {/* @ts-ignore (defaultValue requires more than what is used here) */} + + + + + + + + + + + ); +}; + +export const SelectFilter = () => { + return ( + + {/* @ts-ignore (defaultValue requires more than what is used here) */} + + + + + + + + + + + ); +}; diff --git a/plugins/search/src/components/SearchResult/SearchResult.stories.tsx b/plugins/search/src/components/SearchResult/SearchResult.stories.tsx new file mode 100644 index 0000000000..bf83b8b1ad --- /dev/null +++ b/plugins/search/src/components/SearchResult/SearchResult.stories.tsx @@ -0,0 +1,95 @@ +/* + * Copyright 2021 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { List, Link, ListItem } from '@material-ui/core'; +import { SearchResult, SearchContext, DefaultResultListItem } from '../index'; +import { MemoryRouter } from 'react-router'; + +export default { + title: 'Plugins/Search/SearchResult', + component: SearchResult, +}; + +const defaultValue = { + result: { + loading: false, + error: '', + value: { + results: [ + { + type: 'custom-result-item', + document: { + location: 'search/search-result-1', + title: 'Search Result 1', + text: 'some text from the search result', + }, + }, + { + type: 'no-custom-result-item', + document: { + location: 'search/search-result-2', + title: 'Search Result 2', + text: 'some text from the search result', + }, + }, + { + type: 'no-custom-result-item', + document: { + location: 'search/search-result-3', + title: 'Search Result 3', + text: 'some text from the search result', + }, + }, + ], + }, + }, +}; + +export const Default = () => { + return ( + + {/* @ts-ignore (defaultValue requires more than what is used here) */} + + + {({ results }) => ( + + {results.map(({ type, document }) => { + switch (type) { + case 'custom-result-item': + return ( + + ); + default: + return ( + + + {document.title} - {document.text} + + + ); + } + })} + + )} + + + + ); +};