diff --git a/.storybook/Center.js b/.storybook/Center.js
new file mode 100644
index 0000000000000000000000000000000000000000..ea67597be6764007dc9abf7c89e3c03273d59a31
--- /dev/null
+++ b/.storybook/Center.js
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const styles = {
+ width: '100%',
+ height: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center'
+}
+const Center = ({ children }) => <div style={styles}>{children}</div>
+
+export default Center
\ No newline at end of file
diff --git a/.storybook/PaperContainer.js b/.storybook/PaperContainer.js
new file mode 100644
index 0000000000000000000000000000000000000000..8d2694fca5cfedf9cf33f9a791ac7bc6db967477
--- /dev/null
+++ b/.storybook/PaperContainer.js
@@ -0,0 +1,9 @@
+import React from 'react'
+import Paper from '@material-ui/core/Paper'
+
+const styles = {
+ padding: 8
+}
+const PaperContainer = ({ children }) => <Paper style={styles}>{children}</Paper>
+
+export default PaperContainer
\ No newline at end of file
diff --git a/src/client/components/facet_bar/ChipsArray.js b/src/client/components/facet_bar/ChipsArray.js
index 74dc4c4796606e10126ce814d8d9f216850d3f5a..b9d1f60045e7b1ad9516ca368591d1f8a24085e6 100644
--- a/src/client/components/facet_bar/ChipsArray.js
+++ b/src/client/components/facet_bar/ChipsArray.js
@@ -115,4 +115,6 @@ ChipsArray.propTypes = {
fetchFacet: PropTypes.func.isRequired
}
+export const ChipsArrayComponent = ChipsArray
+
export default withStyles(styles)(ChipsArray)
diff --git a/src/client/components/facet_bar/ChipsArray.stories.js b/src/client/components/facet_bar/ChipsArray.stories.js
new file mode 100644
index 0000000000000000000000000000000000000000..50de044585926df627f7de1f0e0cec9535a57f54
--- /dev/null
+++ b/src/client/components/facet_bar/ChipsArray.stories.js
@@ -0,0 +1,91 @@
+import React from 'react'
+import ChipsArray, { ChipsArrayComponent } from './ChipsArray'
+import Center from '../../../../.storybook/Center'
+import PaperContainer from '../../../../.storybook/PaperContainer'
+
+export default {
+ component: ChipsArrayComponent,
+ title: 'Sampo-UI/facet_bar/ChipsArray',
+ decorators: [storyFn => <Center><PaperContainer>{storyFn()}</PaperContainer></Center>]
+}
+
+const facetValues = [
+ {
+ facetID: 'author',
+ facetLabel: 'Author',
+ filterType: 'uriFilter',
+ value: {
+ node: {
+ id: 'http://ldf.fi/mmm/actor/bodley_person_78769600',
+ prefLabel: 'Cicero, Marcus Tullius',
+ selected: 'false',
+ parent: null,
+ instanceCount: '2575'
+ },
+ parentNode: null,
+ path: [3],
+ lowerSiblingCounts: [8527],
+ treeIndex: 3,
+ isSearchMatch: false,
+ isSearchFocus: false,
+ added: true
+ }
+ },
+ {
+ facetID: 'author',
+ facetLabel: 'Author',
+ filterType: 'uriFilter',
+ value: {
+ node: {
+ id: 'http://ldf.fi/mmm/actor/bodley_person_95147024',
+ prefLabel: 'Jerome, Saint, -419 or 420',
+ selected: 'false',
+ parent: null,
+ instanceCount: '3240',
+ parentNode: null,
+ path: [2],
+ lowerSiblingCounts: [8528],
+ treeIndex: 2,
+ isSearchMatch: false,
+ isSearchFocus: false,
+ added: true
+ }
+ }
+ },
+ {
+ facetID: 'productionPlace',
+ facetLabel: 'Production place',
+ filterType: 'uriFilter',
+ value: {
+ node: {
+ id: 'http://ldf.fi/mmm/place/tgn_7024097',
+ prefLabel: 'Flanders',
+ selected: 'false',
+ parent: 'http://ldf.fi/mmm/place/tgn_1000003',
+ instanceCount: '28',
+ totalInstanceCount: 28
+ },
+ parentNode: {
+ id: 'http://ldf.fi/mmm/place/tgn_1000003',
+ prefLabel: 'Europe',
+ selected: 'false',
+ parent: 'http://ldf.fi/mmm/place/tgn_7029392',
+ instanceCount: '1'
+ }
+ }
+ }
+]
+
+export const basic = props => {
+ return (
+ <div style={{ width: 400 }}>
+ <ChipsArray
+ data={facetValues}
+ facetClass='perspective1'
+ updateFacetOption={() => null}
+ someFacetIsFetching={false}
+ fetchFacet={() => null}
+ />
+ </div>
+ )
+}
diff --git a/src/client/components/facet_bar/FacetBar.stories.js b/src/client/components/facet_bar/FacetBar.stories.js
index 9e863f1c7f64228cf471551145db90893679bc3f..1f8ce7f980274a3f1e10717877cce1ebd8224404 100644
--- a/src/client/components/facet_bar/FacetBar.stories.js
+++ b/src/client/components/facet_bar/FacetBar.stories.js
@@ -14,20 +14,22 @@ export const basic = props => {
const perspective1Facets = useSelector(state => state.perspective1Facets)
const perspective1FacetsConstrainSelf = useSelector(state => state.perspective1FacetsConstrainSelf)
return (
- <FacetBar
- facetedSearchMode='serverFS'
- facetData={perspective1Facets}
- facetDataConstrainSelf={perspective1FacetsConstrainSelf}
- facetClass={perspective.id}
- resultClass={perspective.id}
- fetchingResultCount={facetResults.fetchingResultCount}
- resultCount={facetResults.resultCount}
- fetchFacet={() => null}
- fetchFacetConstrainSelf={() => null}
- fetchResultCount={() => null}
- updateFacetOption={() => null}
- defaultActiveFacets={perspective.defaultActiveFacets}
- rootUrl=''
- />
+ <div style={{ width: 500 }}>
+ <FacetBar
+ facetedSearchMode='serverFS'
+ facetData={perspective1Facets}
+ facetDataConstrainSelf={perspective1FacetsConstrainSelf}
+ facetClass={perspective.id}
+ resultClass={perspective.id}
+ fetchingResultCount={facetResults.fetchingResultCount}
+ resultCount={facetResults.resultCount}
+ fetchFacet={() => null}
+ fetchFacetConstrainSelf={() => null}
+ fetchResultCount={() => null}
+ updateFacetOption={() => null}
+ defaultActiveFacets={perspective.defaultActiveFacets}
+ rootUrl=''
+ />
+ </div>
)
}
diff --git a/src/client/components/facet_bar/FacetHeader.js b/src/client/components/facet_bar/FacetHeader.js
index 2c3276ea4a35242f77afea9b96480da2c45b4599..0722f267e7e5f0301749630521eab4284edaa4c9 100644
--- a/src/client/components/facet_bar/FacetHeader.js
+++ b/src/client/components/facet_bar/FacetHeader.js
@@ -213,4 +213,6 @@ FacetHeader.propTypes = {
rootUrl: PropTypes.string.isRequired
}
+export const FacetHeaderComponent = FacetHeader
+
export default withStyles(styles)(FacetHeader)
diff --git a/src/client/components/facet_bar/FacetHeader.stories.js b/src/client/components/facet_bar/FacetHeader.stories.js
new file mode 100644
index 0000000000000000000000000000000000000000..3f55be4a6bd61a8697c9beb7a9992fb17a56d91d
--- /dev/null
+++ b/src/client/components/facet_bar/FacetHeader.stories.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import FacetHeader, { FacetHeaderComponent } from './FacetHeader'
+import Paper from '@material-ui/core/Paper'
+import { useSelector } from 'react-redux'
+import intl from 'react-intl-universal'
+import Center from '../../../../.storybook/Center'
+
+export default {
+ component: FacetHeaderComponent,
+ title: 'Sampo-UI/facet_bar/FacetHeader',
+ decorators: [storyFn => <Center>{storyFn()}</Center>]
+}
+
+export const basic = props => {
+ const facetID = 'language'
+ const label = intl.get(`perspectives.perspective1.properties.${facetID}.label`)
+ const description = intl.get(`perspectives.perspective1.properties.${facetID}.description`)
+ const facet = useSelector(state => state.perspective1Facets.facets[facetID])
+ const facetConstrainSelf = useSelector(state => state.perspective1FacetsConstrainSelf.facets[facetID])
+ return (
+ <Paper style={{ width: 500, paddingLeft: 8 }}>
+ <FacetHeader
+ facetID={facetID}
+ facetLabel={label}
+ facet={facet}
+ facetConstrainSelf={facetConstrainSelf}
+ isActive
+ facetClass='perspective1'
+ resultClass='perspective1'
+ fetchFacet={() => null}
+ fetchFacetConstrainSelf={() => null}
+ updateFacetOption={() => null}
+ facetDescription={description}
+ rootUrl=''
+ />
+ </Paper>
+ )
+}
diff --git a/src/client/components/facet_bar/RangeFacet.js b/src/client/components/facet_bar/RangeFacet.js
index 7dcfaf8477d9457b399ce594cecbbed16a51f8ad..7a2f19386b76d4a5e90c3780166a8637c5e02873 100644
--- a/src/client/components/facet_bar/RangeFacet.js
+++ b/src/client/components/facet_bar/RangeFacet.js
@@ -168,4 +168,6 @@ RangeFacet.propTypes = {
updatedFacet: PropTypes.string
}
+export const RangeFacetComponent = RangeFacet
+
export default withStyles(styles)(RangeFacet)
diff --git a/src/client/components/facet_bar/RangeFacet.stories.js b/src/client/components/facet_bar/RangeFacet.stories.js
new file mode 100644
index 0000000000000000000000000000000000000000..52ce84d4f743243227669c70fef155ddec628dd3
--- /dev/null
+++ b/src/client/components/facet_bar/RangeFacet.stories.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import RangeFacet, { RangeFacetComponent } from './RangeFacet'
+import { useSelector } from 'react-redux'
+import Center from '../../../../.storybook/Center'
+import PaperContainer from '../../../../.storybook/PaperContainer'
+
+export default {
+ component: RangeFacetComponent,
+ title: 'Sampo-UI/facet_bar/RangeFacet',
+ decorators: [storyFn => <Center><PaperContainer>{storyFn()}</PaperContainer></Center>]
+}
+
+export const basic = props => {
+ const facetID = 'width'
+ const facet = useSelector(state => state.perspective1Facets.facets[facetID])
+ return (
+ <div style={{ width: 400 }}>
+ <RangeFacet
+ facetID={facetID}
+ facet={facet}
+ facetClass='perspective1'
+ resultClass='perspective1'
+ facetUpdateID={0}
+ fetchFacet={() => null}
+ someFacetIsFetching={false}
+ updateFacetOption={() => null}
+ dataType='integer'
+ />
+ </div>
+ )
+}
diff --git a/src/client/components/facet_bar/TextFacet.js b/src/client/components/facet_bar/TextFacet.js
index fa760123608468a00d948cc0763c8a7c82177429..cff72f36f19fb2265105f80d397d05b210d7c7ff 100644
--- a/src/client/components/facet_bar/TextFacet.js
+++ b/src/client/components/facet_bar/TextFacet.js
@@ -121,4 +121,6 @@ TextFacet.propTypes = {
facetUpdateID: PropTypes.number
}
+export const TextFacetComponent = TextFacet
+
export default withStyles(styles)(TextFacet)
diff --git a/src/client/components/facet_bar/TextFacet.stories.js b/src/client/components/facet_bar/TextFacet.stories.js
new file mode 100644
index 0000000000000000000000000000000000000000..dc8e766e81b9b785920a3610bce35c1e0e5c3d5c
--- /dev/null
+++ b/src/client/components/facet_bar/TextFacet.stories.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import TextFacet, { TextFacetComponent } from './TextFacet'
+import { useSelector } from 'react-redux'
+import Center from '../../../../.storybook/Center'
+import PaperContainer from '../../../../.storybook/PaperContainer'
+
+export default {
+ component: TextFacetComponent,
+ title: 'Sampo-UI/facet_bar/TextFacet',
+ decorators: [storyFn => <Center><PaperContainer>{storyFn()}</PaperContainer></Center>]
+}
+
+export const basic = props => {
+ const facetID = 'prefLabel'
+ const facet = useSelector(state => state.perspective1Facets.facets[facetID])
+ return (
+ <div style={{ width: 400 }}>
+ <TextFacet
+ facetID={facetID}
+ facet={facet}
+ facetClass='perspective1'
+ resultClass='perspective1'
+ facetUpdateID={0}
+ fetchFacet={() => null}
+ someFacetIsFetching={false}
+ updateFacetOption={() => null}
+ />
+ </div>
+ )
+}
+
+export const loading = props => {
+ const facetID = 'prefLabel'
+ const facet = useSelector(state => state.perspective1Facets.facets[facetID])
+ return (
+ <div style={{ width: 400 }}>
+ <TextFacet
+ facetID={facetID}
+ facet={facet}
+ facetClass='perspective1'
+ resultClass='perspective1'
+ facetUpdateID={0}
+ fetchFacet={() => null}
+ someFacetIsFetching
+ updateFacetOption={() => null}
+ />
+ </div>
+ )
+}
diff --git a/src/client/components/facet_results/ObjectListItemEvent.stories.js b/src/client/components/facet_results/ObjectListItemEvent.stories.js
index 3196703d5d6147052a95deb0abe5f55db03bed06..d6f09ecef6c31c5276fc62834e1087f05c98fd56 100644
--- a/src/client/components/facet_results/ObjectListItemEvent.stories.js
+++ b/src/client/components/facet_results/ObjectListItemEvent.stories.js
@@ -1,9 +1,13 @@
import React from 'react'
+import Center from '../../../../.storybook/Center'
+import PaperContainer from '../../../../.storybook/PaperContainer'
+
import ObjectListItemEvent, { ObjectListItemEventComponent } from './ObjectListItemEvent'
export default {
component: ObjectListItemEventComponent,
- title: 'Sampo-UI/facet_results/ObjectListItemEvent'
+ title: 'Sampo-UI/facet_results/ObjectListItemEvent',
+ decorators: [storyFn => <Center><PaperContainer>{storyFn()}</PaperContainer></Center>]
}
export const basic = () =>