refactor(RelatedContent):change to use new card variant instead of pu…

…blication card component
eea · Apr 5, 2022 · 7cf424a · 7cf424a
1 parent 1abea5e
commit 7cf424a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 17 deletions.
diff --git a/src/ui/PublicationCard/PublicationCard.stories.jsx b/src/ui/PublicationCard/PublicationCard.stories.jsx
@@ -26,7 +26,7 @@ export default {
 };
 
 const Template = (args) => (
-  <Card {...args} className="publication">
+  <Card className="publication">
     <Image src={args.image} wrapped ui={false} alt="card image" />
     <Card.Content>
       <Card.Meta>{args.tag}</Card.Meta>

diff --git a/src/ui/RelatedContent/RelatedContent.jsx b/src/ui/RelatedContent/RelatedContent.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Grid, Button } from 'semantic-ui-react';
-import PublicationCard from '../PublicationCard/PublicationCard';
+import { Grid, Button, Card, Image } from 'semantic-ui-react';
 
 function RelatedContent({ children, ...rest }) {
   return (
@@ -33,13 +32,13 @@ RelatedContent.Grid = ({ children, ...rest }) => {
               mobile={12}
             >
               {row.map((item, index) => (
-                <PublicationCard {...item} key={index}>
-                  <PublicationCard.Header></PublicationCard.Header>
-                  <PublicationCard.Info
-                    description={item.description}
-                    tag={item.tag}
-                  ></PublicationCard.Info>
-                </PublicationCard>
+                <Card className="publication" key={index}>
+                  <Image src={item.image} wrapped ui={false} alt="card image" />
+                  <Card.Content>
+                    <Card.Meta>{item.tag}</Card.Meta>
+                    <Card.Description>{item.description}</Card.Description>
+                  </Card.Content>
+                </Card>
               ))}
             </Grid.Column>
           ))
@@ -51,13 +50,13 @@ RelatedContent.Grid = ({ children, ...rest }) => {
               tablet={12}
               mobile={12}
             >
-              <PublicationCard {...item}>
-                <PublicationCard.Header></PublicationCard.Header>
-                <PublicationCard.Info
-                  description={item.description}
-                  tag={item.tag}
-                ></PublicationCard.Info>
-              </PublicationCard>
+              <Card className="publication">
+                <Image src={item.image} wrapped ui={false} alt="card image" />
+                <Card.Content>
+                  <Card.Meta>{item.tag}</Card.Meta>
+                  <Card.Description>{item.description}</Card.Description>
+                </Card.Content>
+              </Card>
             </Grid.Column>
           ))}
 

diff --git a/src/ui/RelatedContent/RelatedContent.stories.jsx b/src/ui/RelatedContent/RelatedContent.stories.jsx
@@ -2,6 +2,9 @@ import React from 'react';
 import RelatedContent from './RelatedContent';
 import { Container, Tab } from 'semantic-ui-react';
 
+const imageUrl =
+  'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini';
+
 export default {
   title: 'Components/Related Content',
   component: RelatedContent,
@@ -27,25 +30,30 @@ DefaultEven.args = {
       tag: 'Publication',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      image: imageUrl,
     },
     {
       tag: 'Publication',
       description: 'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
+      image: imageUrl,
     },
     {
       tag: 'Publication',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. ',
+      image: imageUrl,
     },
     {
       tag: 'Publication',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. ',
+      image: imageUrl,
     },
     {
       tag: 'Publication',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      image: imageUrl,
     },
   ],
   buttonText: 'See All',
@@ -95,15 +103,18 @@ DefaultOdd.args = {
       tag: 'Publication',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      image: imageUrl,
     },
     {
       tag: 'Publication',
       description: 'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
+      image: imageUrl,
     },
     {
       tag: 'Publication',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. ',
+      image: imageUrl,
     },
   ],
   buttonText: 'See All',
@@ -197,6 +208,7 @@ RelatedContentInTab.args = {
           tag: 'Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+          image: imageUrl,
         },
       ],
       buttonText: 'See All',
@@ -209,11 +221,13 @@ RelatedContentInTab.args = {
           tag: 'Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+          image: imageUrl,
         },
         {
           tag: 'Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
+          image: imageUrl,
         },
       ],
       buttonText: 'See All',
@@ -226,16 +240,19 @@ RelatedContentInTab.args = {
           tag: 'Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+          image: imageUrl,
         },
         {
           tag: 'Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
+          image: imageUrl,
         },
         {
           tag: 'Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. ',
+          image: imageUrl,
         },
       ],
       buttonText: 'See All',
@@ -248,26 +265,31 @@ RelatedContentInTab.args = {
           tag: 'Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+          image: imageUrl,
         },
         {
           tag: 'Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
+          image: imageUrl,
         },
         {
           tag: 'Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. ',
+          image: imageUrl,
         },
         {
           tag: 'Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. ',
+          image: imageUrl,
         },
         {
           tag: 'Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+          image: imageUrl,
         },
       ],
       buttonText: 'See All',