Add a new story

src/client/components/facet_results/ObjectListItemEvent.js

@@ -10,6 +10,9 @@ const styles = () => ({
   }
 })
 
+/**
+  A component for displaying an event with or without a date in an ObjectListCollapsible.
+ */
 const ObjectListItemEvent = props => {
   const { data, isFirstValue } = props
   const label = Array.isArray(data.prefLabel) ? data.prefLabel[0] : data.prefLabel
@@ -37,9 +40,20 @@ const ObjectListItemEvent = props => {
 }
 
 ObjectListItemEvent.propTypes = {
-  classes: PropTypes.object.isRequired,
-  data: PropTypes.object.isRequired,
-  isFirstValue: PropTypes.bool.isRequired
+  /**
+   * Material-UI styles
+   */
+  classes: PropTypes.object,
+  /**
+   * An object with the following keys: id, prefLabel, date, dataProviderUrl.
+   */
+  data: PropTypes.object,
+  /**
+   * The first item in a ObjectListCollapsible is rendered differently in collapsed mode.
+   */
+  isFirstValue: PropTypes.bool
 }
 
+export const ObjectListItemEventComponent = ObjectListItemEvent
+
 export default withStyles(styles)(ObjectListItemEvent)

src/client/components/facet_results/ObjectListItemEvent.stories.js

+import React from 'react'
+import ObjectListItemEvent, { ObjectListItemEventComponent } from './ObjectListItemEvent'
+
+export default {
+  component: ObjectListItemEventComponent,
+  title: 'ObjectListItemEvent'
+}
+
+export const basic = () =>
+  <ObjectListItemEvent
+    data={{
+      id: 'http://ldf.fi/mmm/event/bibale_production_10000',
+      type: 'http://erlangen-crm.org/current/E12_Production',
+      date: '0701 - 0800',
+      prefLabel: 'Production',
+      dataProviderUrl: '/events/page/bibale_production_10000'
+    }}
+  />
+
+export const isFirstValue = () =>
+  <ObjectListItemEvent
+    data={{
+      id: 'http://ldf.fi/mmm/event/bibale_production_10000',
+      type: 'http://erlangen-crm.org/current/E12_Production',
+      date: '0701 - 0800',
+      prefLabel: 'Production',
+      dataProviderUrl: '/events/page/bibale_production_10000'
+    }}
+    isFirstValue
+  />

src/client/components/main_layout/TopBar.js

@@ -69,6 +69,10 @@ const useStyles = makeStyles((theme) => ({
   }
 }))
 
+/**
+ * Responsive app bar with a search field, perspective links, info links and a language
+ * selector. Based on Material-UI's App Bar component.
+ */
 const TopBar = props => {
   const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null)
   const isMobileMenuOpen = Boolean(mobileMoreAnchorEl)
@@ -256,13 +260,37 @@ const TopBar = props => {
 }
 
 TopBar.propTypes = {
+  /**
+   * Redux action for full text search results using the search field.
+   */
   fetchFullTextResults: PropTypes.func.isRequired,
+  /**
+   * Redux action for clearing the full text results.
+   */
   clearResults: PropTypes.func.isRequired,
+  /**
+   * Redux action for loading translations.
+   */
   loadLocales: PropTypes.func.isRequired,
-  perspectives: PropTypes.array.isRequired,
+  /**
+   * Current locale as a two-letter code
+   */
   currentLocale: PropTypes.string.isRequired,
+  /**
+   * Available locales as an array of objects with two-letter codes as keys.
+   */
   availableLocales: PropTypes.array.isRequired,
+  /**
+   * Perspective config as an array of objects.
+   */
+  perspectives: PropTypes.array.isRequired,
+  /**
+   * Flag for checking if the screen is extra small.
+   */
   xsScreen: PropTypes.bool.isRequired,
+  /**
+   * React Router's location object. The perspective links are highlighted based on this.
+   */
   location: PropTypes.object.isRequired,
   /**
    * Root url of the application.