fix(Related Content): limit publication card number to 4

eea · Mar 9, 2022 · e7df032 · e7df032
1 parent 36a7c96
commit e7df032
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 66 deletions.
diff --git a/src/ui/RelatedContent/RelatedContent.jsx b/src/ui/RelatedContent/RelatedContent.jsx
@@ -1,8 +1,13 @@
 import React from 'react';
 import { Grid, Container } from 'semantic-ui-react';
+import PublicationCard from '../PublicationCard/PublicationCard';
 
-function RelatedContent({ items }) {
-  const rows = items.reduce(function (rows, key, index) {
+function RelatedContent({ publicationCards }) {
+  let cards = publicationCards;
+  if (publicationCards.length > 4) {
+    cards = cards.slice(0, 4);
+  }
+  const rows = cards.reduce(function (rows, key, index) {
     return (
       (index % 2 === 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) &&
       rows
@@ -12,42 +17,68 @@ function RelatedContent({ items }) {
   return (
     <div className="related-content-wrapper">
       <Container>
-        <h3 style={{ color: '#0A3D61' }}>Related Content</h3>
-
         {/* desktop grid */}
         <Grid columns={2} className="tablet or lower hidden">
-          {items.length > 2
+          {cards.length > 2
             ? rows.map((row, rowIndex) => (
                 <Grid.Column key={rowIndex} stretched>
-                  {row.map((item, index) => item)}
+                  {row.map((item, index) => (
+                    <PublicationCard {...item} key={index}>
+                      <PublicationCard.Header></PublicationCard.Header>
+                      <PublicationCard.Info
+                        description={item.description}
+                        tag={item.tag}
+                      ></PublicationCard.Info>
+                    </PublicationCard>
+                  ))}
                 </Grid.Column>
               ))
-            : items.map((item, index) => (
+            : cards.map((item, index) => (
                 <Grid.Column key={index} stretched>
-                  {item}
+                  <PublicationCard {...item}>
+                    <PublicationCard.Header></PublicationCard.Header>
+                    <PublicationCard.Info
+                      description={item.description}
+                      tag={item.tag}
+                    ></PublicationCard.Info>
+                  </PublicationCard>
                 </Grid.Column>
               ))}
         </Grid>
 
         {/* mobile grid */}
         <Grid className="mobile only" columns={1}>
-          {items.map((item, index) => (
-            <Grid.Column key={index}>{item}</Grid.Column>
+          {cards.map((item, index) => (
+            <Grid.Column key={index}>
+              <PublicationCard {...item}>
+                <PublicationCard.Header></PublicationCard.Header>
+                <PublicationCard.Info
+                  description={item.description}
+                  tag={item.tag}
+                ></PublicationCard.Info>
+              </PublicationCard>
+            </Grid.Column>
           ))}
         </Grid>
 
         {/* tablet grid */}
         <Grid className="tablet only">
-          {items.map((item, index) => (
+          {cards.map((item, index) => (
             <Grid.Column
               key={index}
               tablet={
-                items.length % 2 !== 0 && index === items.length - 1
+                cards.length % 2 !== 0 && index === cards.length - 1
                   ? '12'
                   : '6'
               }
             >
-              {item}
+              <PublicationCard {...item}>
+                <PublicationCard.Header></PublicationCard.Header>
+                <PublicationCard.Info
+                  description={item.description}
+                  tag={item.tag}
+                ></PublicationCard.Info>
+              </PublicationCard>
             </Grid.Column>
           ))}
         </Grid>

diff --git a/src/ui/RelatedContent/RelatedContent.stories.jsx b/src/ui/RelatedContent/RelatedContent.stories.jsx
@@ -1,11 +1,22 @@
 import React from 'react';
 import RelatedContent from './RelatedContent';
-import PublicationCard from '../PublicationCard/PublicationCard';
 
 export default {
   title: 'Components/Related Content',
   component: RelatedContent,
-  argTypes: {},
+  argTypes: {
+    publicationCards: {
+      description: 'publication cards data',
+      table: {
+        type: {
+          summary: 'Object',
+        },
+        defaultValue: {
+          summary: '',
+        },
+      },
+    },
+  },
 };
 
 const Template = (args) => (
@@ -16,61 +27,54 @@ const Template = (args) => (
 
 export const DefaultEven = Template.bind({});
 DefaultEven.args = {
-  items: [
-    <PublicationCard key="1">
-      <PublicationCard.Header />
-      <PublicationCard.Info
-        tag="Publication"
-        descripiton="Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis."
-      ></PublicationCard.Info>
-    </PublicationCard>,
-    <PublicationCard key="2">
-      <PublicationCard.Header />
-      <PublicationCard.Info
-        tag="Publication"
-        descripiton="Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis."
-      ></PublicationCard.Info>
-    </PublicationCard>,
-    <PublicationCard key="3">
-      <PublicationCard.Header />
-      <PublicationCard.Info
-        tag="Publication"
-        descripiton="Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis."
-      ></PublicationCard.Info>
-    </PublicationCard>,
-    <PublicationCard key="4">
-      <PublicationCard.Header />
-      <PublicationCard.Info
-        tag="Publication"
-        descripiton="Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis."
-      ></PublicationCard.Info>
-    </PublicationCard>,
+  publicationCards: [
+    {
+      tag: 'Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      href: '/#',
+    },
+    {
+      tag: 'Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      href: '/#',
+    },
+    {
+      tag: 'Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      href: '/#',
+    },
+    {
+      tag: 'Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      href: '/#',
+    },
   ],
 };
 
 export const DefaultOdd = Template.bind({});
 DefaultOdd.args = {
-  items: [
-    <PublicationCard key="1">
-      <PublicationCard.Header />
-      <PublicationCard.Info
-        tag="Publication"
-        descripiton="Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis."
-      ></PublicationCard.Info>
-    </PublicationCard>,
-    <PublicationCard key="2">
-      <PublicationCard.Header />
-      <PublicationCard.Info
-        tag="Publication"
-        descripiton="Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis."
-      ></PublicationCard.Info>
-    </PublicationCard>,
-    <PublicationCard key="3">
-      <PublicationCard.Header />
-      <PublicationCard.Info
-        tag="Publication"
-        descripiton="Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis."
-      ></PublicationCard.Info>
-    </PublicationCard>,
+  publicationCards: [
+    {
+      tag: 'Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      href: '/#',
+    },
+    {
+      tag: 'Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      href: '/#',
+    },
+    {
+      tag: 'Publication',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      href: '/#',
+    },
   ],
 };