From 0fad6e4ffd7f803b64df2912bfd1765745c83d59 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Wed, 6 May 2020 10:58:27 +0300
Subject: [PATCH] Add a new story

---
 .../facet_results/ObjectListItemEvent.js      | 20 +++++++++++--
 .../ObjectListItemEvent.stories.js            | 30 +++++++++++++++++++
 src/client/components/main_layout/TopBar.js   | 30 ++++++++++++++++++-
 3 files changed, 76 insertions(+), 4 deletions(-)
 create mode 100644 src/client/components/facet_results/ObjectListItemEvent.stories.js

diff --git a/src/client/components/facet_results/ObjectListItemEvent.js b/src/client/components/facet_results/ObjectListItemEvent.js
index 6a868697..b44aed20 100644
--- a/src/client/components/facet_results/ObjectListItemEvent.js
+++ b/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)
diff --git a/src/client/components/facet_results/ObjectListItemEvent.stories.js b/src/client/components/facet_results/ObjectListItemEvent.stories.js
new file mode 100644
index 00000000..b96b0aa0
--- /dev/null
+++ b/src/client/components/facet_results/ObjectListItemEvent.stories.js
@@ -0,0 +1,30 @@
+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
+  />
diff --git a/src/client/components/main_layout/TopBar.js b/src/client/components/main_layout/TopBar.js
index 4976fd5c..7a0697f8 100644
--- a/src/client/components/main_layout/TopBar.js
+++ b/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.
-- 
GitLab