Card and Comment class updates

eea · Jan 18, 2022 · 3899465 · 3899465
1 parent 9cdde86
commit 3899465
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 17 deletions.
diff --git a/src/customizations/components/theme/Card/Card.stories.js b/src/customizations/components/theme/Card/Card.stories.js
@@ -47,7 +47,7 @@ export default {
       },
     },
     fluid: {
-      description: 'card header',
+      description: 'take up the width of its container',
       table: {
         type: {
           summary: 'boolean',
@@ -56,7 +56,7 @@ export default {
       },
     },
     links: {
-      description: 'if true takes width of container',
+      description: 'array with links to other content',
       table: {
         type: {
           summary: 'Object',
@@ -68,7 +68,7 @@ export default {
 };
 
 const Template = (args) => (
-  <Card fluid={args.fluid} className="eeaCard">
+  <Card fluid={args.fluid} className="eea-card">
     {args.hasImage && (
       <Image
         src="https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large"
@@ -97,10 +97,10 @@ const Template = (args) => (
 export const Default = Template.bind({});
 Default.args = {
   //src: 'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
-  hasImage: true,
   title: 'Card Header',
   meta: 'meta data',
   description: 'card description',
+  hasImage: true,
   fluid: false,
   links: [{ linkName: 'Link 1', icon: 'linkify' }],
 };
diff --git a/src/customizations/components/theme/Comment/Comment.js b/src/customizations/components/theme/Comment/Comment.js
@@ -1,14 +1,15 @@
 import React from 'react';
 import { Comment, Header } from 'semantic-ui-react';
-
+import CommentStories from './Comment.stories';
+//  "../../../../../../../../.storybook/assets/eea_icon.png"
 function CommentEEA({ title, comments, threaded, minimal, size }) {
   return (
     <Comment.Group threaded={threaded} minimal={minimal} size={size}>
       <Header dividing>{title}</Header>
 
       {comments.map((comment, comIndex) => (
         <Comment key={comIndex}>
-          <Comment.Avatar src={comment.avatar} />
+          <Comment.Avatar src={comment.src}/>
           <Comment.Content>
             <Comment.Author as="a">{comment.author}</Comment.Author>
             <Comment.Metadata>
@@ -22,7 +23,7 @@ function CommentEEA({ title, comments, threaded, minimal, size }) {
           <Comment.Group>
             {comment.replies.map((reply, repIndex) => (
               <Comment key={repIndex}>
-                <Comment.Avatar src={comment.avatar} />
+                <Comment.Avatar src={comment.src} />
                 <Comment.Content>
                   <Comment.Author as="a">{reply.author}</Comment.Author>
                   <Comment.Metadata>

diff --git a/src/customizations/components/theme/Comment/Comment.stories.js b/src/customizations/components/theme/Comment/Comment.stories.js
@@ -50,37 +50,37 @@ const Template = (args) => <CommentEEA {...args}></CommentEEA>;
 export const Default = Template.bind({});
 Default.args = {
   title: 'Comments Header',
+  threaded: false,
+  minimal: false,
+  size: 'large',
   comments: [
     {
-      src: '',
+      src: 'eea_icon.png',
       author: 'User 1',
       time: 'Message timestamp',
       text: 'Message Content',
       replies: [
         {
-          src: '',
+          src: 'eea_icon.png',
           author: 'User 4',
           time: 'Message timestamp',
           text: 'Message Content',
         },
       ],
     },
     {
-      src: '',
+      src: 'eea_icon.png',
       author: 'User 2',
       time: 'Message timestamp',
       text: 'Message Content',
       replies: [],
     },
     {
-      src: '',
+      src: 'eea_icon.png',
       author: 'User 2',
       time: 'Message timestamp',
       text: 'Message Content',
       replies: [],
     },
   ],
-  threaded: false,
-  minimal: false,
-  size: 'large',
 };
diff --git a/theme/themes/eea/views/card.overrides b/theme/themes/eea/views/card.overrides
@@ -2,10 +2,12 @@
          Theme Overrides
 *******************************/
 
-.ui.card.eeaCard {
+div.ui.card,
+.ui.card.eea-card {
   border: @cardBorder;
   background: @background;
   border-radius: @defaultBorderRadius;
-  box-shadow: none;
-  font-family: @fontFamily;
+  box-shadow: @eeaGlobalShadow;
+  font-family: @pageFont;
+  font-size: @fontSize;
 }