New: Show genres on series details page

Closes #4734

frontend/src/Series/Details/SeriesDetails.js

@@ -31,6 +31,7 @@ import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
 import SeriesHistoryModal from 'Series/History/SeriesHistoryModal';
 import SeriesAlternateTitles from './SeriesAlternateTitles';
 import SeriesDetailsSeasonConnector from './SeriesDetailsSeasonConnector';
+import SeriesGenres from './SeriesGenres';
 import SeriesTagsConnector from './SeriesTagsConnector';
 import SeriesDetailsLinks from './SeriesDetailsLinks';
 import MonitoringOptionsModal from 'Series/MonitoringOptions/MonitoringOptionsModal';
@@ -186,6 +187,7 @@ class SeriesDetails extends Component {
       images,
       seasons,
       alternateTitles,
+      genres,
       tags,
       year,
       previousAiring,
@@ -406,6 +408,8 @@ class SeriesDetails extends Component {
                       iconSize={20}
                     />
 
+                    <SeriesGenres genres={genres} />
+
                     <span>
                       {runningYears}
                     </span>
@@ -699,6 +703,7 @@ SeriesDetails.propTypes = {
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
   seasons: PropTypes.arrayOf(PropTypes.object).isRequired,
   alternateTitles: PropTypes.arrayOf(PropTypes.object).isRequired,
+  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
   tags: PropTypes.arrayOf(PropTypes.number).isRequired,
   year: PropTypes.number.isRequired,
   previousAiring: PropTypes.string,

frontend/src/Series/Details/SeriesGenres.css

@@ -0,0 +1,3 @@
+.genres {
+  margin-right: 15px;
+}

frontend/src/Series/Details/SeriesGenres.js

@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { kinds, sizes, tooltipPositions } from 'Helpers/Props';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import Label from 'Components/Label';
+import styles from './SeriesGenres.css';
+
+function SeriesGenres({ genres }) {
+  const [firstGenre, ...otherGenres] = genres;
+
+  if (otherGenres.length) {
+    return (
+      <Tooltip
+        anchor={
+          <span className={styles.genres}>
+            {firstGenre}
+          </span>
+        }
+        tooltip={
+          <div>
+            {
+              otherGenres.map((tag) => {
+                return (
+                  <Label
+                    key={tag}
+                    kind={kinds.INFO}
+                    size={sizes.LARGE}
+                  >
+                    {tag}
+                  </Label>
+                );
+              })
+            }
+          </div>
+        }
+        kind={kinds.INVERSE}
+        position={tooltipPositions.TOP}
+      />
+    );
+  }
+
+  return (
+    <span className={styles.genres}>
+      {firstGenre}
+    </span>
+  );
+}
+
+SeriesGenres.propTypes = {
+  genres: PropTypes.arrayOf(PropTypes.string).isRequired
+};
+
+export default SeriesGenres;