feat(PublicationCard):create publication card component & styles

src/semantic.less

@@ -247,3 +247,7 @@
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/keyContent';
 }
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/publicationCard';
+}

src/ui/PublicationCard/PublicationCard.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+function PublicationCard({ children, ...rest }) {
+  return <div className="eea publication card">{children}</div>;
+}
+
+PublicationCard.Header = ({ children, ...rest }) => (
+  <div
+    className="header"
+    style={rest.image ? { backgroundImage: `url(${rest.image_url})` } : {}}
+  >
+    {children}
+  </div>
+);
+
+PublicationCard.Info = ({ children, ...rest }) => (
+  <div className="descripiton">
+    <div className="tag">#{rest.tag}</div>
+    <p className="text">{rest.descripiton}</p>
+  </div>
+);
+
+export default PublicationCard;

src/ui/PublicationCard/PublicationCard.stories.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import PublicationCard from './PublicationCard';
+
+const imageUrl =
+  'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini';
+
+export default {
+  title: 'Components/PublicationCard',
+  component: PublicationCard,
+  argTypes: {
+    tag: {
+      description: 'publication tags',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+      },
+    },
+    descripiton: {
+      description: 'publication description',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <PublicationCard {...args}>
+    <PublicationCard.Header
+      image_url={args.image ? imageUrl : null}
+      image={args.image}
+    />
+    <PublicationCard.Info descripiton={args.descripiton} tag={args.tag} />
+  </PublicationCard>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  tag: 'Publication',
+  descripiton:
+    'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+};
+
+export const PublicationCardWithImage = Template.bind({});
+PublicationCardWithImage.args = {
+  tag: 'Publication',
+  descripiton:
+    'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+  image: true,
+};
+PublicationCardWithImage.argTypes = {
+  image: {
+    description: 'set or unset publication backgroung image',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: 'false' },
+    },
+  },
+};

src/ui/index.js

@@ -25,3 +25,5 @@ export Testimonial from './Testimonial/Testimonial';
 export AvatarGrid from './AvatarGrid/AvatarGrid';
 
 export KeyContent from './KeyContent/KeyContent';
+
+export PublicationCard from './PublicationCard/PublicationCard';

theme/theme.config

@@ -90,6 +90,7 @@
 @testimonial : 'eea';
 @avatarGrid  : 'eea';
 @keyContent  : 'eea';
+@publicationCard  : 'eea';
 
 /*******************************
             Folders

theme/themes/eea/extras/publicationCard.less

@@ -0,0 +1,55 @@
+@type: 'extra';
+@element: 'publicationCard';
+
+@import (multiple) '../../theme.config';
+
+/*-------------------
+  Publication Card
+--------------------*/
+
+.eea.publication.card {
+    color: @publicationCardtextColor;
+    //position: relative;
+    height: @publicationCardHeight;
+    background-color: @publicationCardBackgroundColor;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .header{
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+        height: calc(100% - @cardDescripitonMaxHeight);
+    }
+
+    .descripiton {
+        background-color: @publicationCardDescripitonColor;
+        height: @cardDescripitonHeight;
+        padding: @cardDescripitonPadding;
+        //position: absolute;
+        //bottom: 0;
+        width: @cardDescripitonWidth;
+        max-height: @cardDescripitonMaxHeight;
+
+        .tag {
+            font-size: @cardDescripitonTagFontSize;
+            font-weight: @cardDescripitonTagFontWeight;
+        }
+
+        .text {
+            font-size: @cardDescripitonTextFontSize;
+            font-weight: @cardDescripitonTextFontWeight;
+        }
+    }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+    .eea.publication.card {
+        margin: @publicationCardMargin;
+
+        .descripiton {
+            height: @computerCardDescripitonHeight;
+        }
+    }
+  }

theme/themes/eea/extras/publicationCard.variables

@@ -0,0 +1,24 @@
+/*-------------------
+  Publication Card
+--------------------*/
+
+@publicationCardtextColor: @white;
+@publicationCardMargin: 10px 0;
+@publicationCardHeight: 268px;
+
+/* Colors */
+@publicationCardBackgroundColor: #BCBEC0;
+@publicationCardDescripitonColor: #3D5265;
+
+/* Descripiton */
+@cardDescripitonHeight: auto;
+@cardDescripitonMaxHeight: 135px;
+@computerCardDescripitonHeight: auto;
+@cardDescripitonPadding: 20px;
+@cardDescripitonWidth: 100%;
+
+@cardDescripitonTagFontSize: 12px;
+@cardDescripitonTagFontWeight: 400;
+@cardDescripitonTextFontSize: 16px;
+@cardDescripitonTextFontWeight: 700;
+