From c47bb87c39d06c8bb4fc4c17d71e78f681490a3e Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Fri, 9 Jul 2021 12:21:19 +0200 Subject: [PATCH] add stories to storybook for reusable search components Signed-off-by: Emma Indal --- .../DefaultResultListItem.stories.tsx | 43 +++++++++ .../SearchBar/SearchBar.stories.tsx | 45 +++++++++ .../SearchFilter/SearchFilter.stories.tsx | 69 ++++++++++++++ .../SearchResult/SearchResult.stories.tsx | 95 +++++++++++++++++++ 4 files changed, 252 insertions(+) create mode 100644 plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx create mode 100644 plugins/search/src/components/SearchBar/SearchBar.stories.tsx create mode 100644 plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx create mode 100644 plugins/search/src/components/SearchResult/SearchResult.stories.tsx 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/SearchBar/SearchBar.stories.tsx b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx new file mode 100644 index 0000000000..16da352ece --- /dev/null +++ b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx @@ -0,0 +1,45 @@ +/* + * 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 { 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/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} + + + ); + } + })} + + )} + + + + ); +};