@eeacms/volto-eea-design-system 1.0.0-alpha.10 → 1.0.0-alpha.12

package/CHANGELOG.md

@@ -4,7 +4,70 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [1.0.0-alpha.10](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.9...1.0.0-alpha.10) - 12 January 2023
+### [1.0.0-alpha.12](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.11...1.0.0-alpha.12) - 24 January 2023
+
+#### :bug: Bug Fixes
+
+- fix(mobile menu): sub links when an accordion section is active [David Ichim - [`bb3be81`](https://github.com/eea/volto-eea-design-system/commit/bb3be81416340ad0e3e992cd4e75642fc50f8ad3)]
+
+#### :nail_care: Enhancements
+
+- change(card): title padding value for a more balance look [David Ichim - [`74b6556`](https://github.com/eea/volto-eea-design-system/commit/74b65563d973eb9c6afc534935e253f2705fe9ee)]
+- change(card): added image card section, tweaked mobile heading size [David Ichim - [`0f879e1`](https://github.com/eea/volto-eea-design-system/commit/0f879e15d22ae066f020d8188ef3e355c27d016c)]
+- change(cards): moved image gradient overlay to a mixin.less file [David Ichim - [`8b4928a`](https://github.com/eea/volto-eea-design-system/commit/8b4928a87bfe5fae6f64c93d7c8f1f7a3045816c)]
+- change(card): removed uppercase transform from title on image [David Ichim - [`2948ae1`](https://github.com/eea/volto-eea-design-system/commit/2948ae16f748911929910ac53d1e0acf96952317)]
+- change(cards): added image for all storybook card examples [David Ichim - [`3f19413`](https://github.com/eea/volto-eea-design-system/commit/3f194130bb6fb7b9ab04a7e1305f26fa135c23d2)]
+- change(card): implement title on image within image section [David Ichim - [`ff6cc60`](https://github.com/eea/volto-eea-design-system/commit/ff6cc600978355e04dde704d014d2cbe27df1298)]
+- change(colors, Docusaurus): Visited link colour change and thematic logo replacement #278 from eea/refactor-visited-link [ichim-david - [`f82d978`](https://github.com/eea/volto-eea-design-system/commit/f82d9781cc3b34443f181565c2ec1892d534f8e2)]
+- change(banner): restored label value of metadata field when type isn't date [David Ichim - [`571a4f2`](https://github.com/eea/volto-eea-design-system/commit/571a4f27fe73d0465b6482f70dd70b2dc47dffe8)]
+- refactor(docusaurus): applied image naming convention [Giorgos Stamatis - [`ee7bc29`](https://github.com/eea/volto-eea-design-system/commit/ee7bc290084e198f9f94e40fbf44c6d9cb19d1ba)]
+- refactor(card): Update titles value and size [Antonis Tarantilis - [`c35ad5c`](https://github.com/eea/volto-eea-design-system/commit/c35ad5c76caa00556f8a501d2e7d516464790dc4)]
+- refactor(storybook): visited link variables [Dora Anastasiou - [`b209b2f`](https://github.com/eea/volto-eea-design-system/commit/b209b2f7703641926c6d4b1f7162eef39b2a1ad8)]
+- refactor(Card): add image with title css [Antonis Tarantilis - [`6e6e63e`](https://github.com/eea/volto-eea-design-system/commit/6e6e63e2362a27b0bbf4b8dd968f11a0dc87da2a)]
+- refactor(Card): create card template for stories [Antonis Tarantilis - [`2fa77f3`](https://github.com/eea/volto-eea-design-system/commit/2fa77f3f93935dd01cd5e3d77437fe8dc03721da)]
+
+#### :house: Documentation changes
+
+- docs(colors): visited link update [Dora Anastasiou - [`ece77fe`](https://github.com/eea/volto-eea-design-system/commit/ece77fec130de1d9d8014d40e7da975bf57061ee)]
+
+#### :hammer_and_wrench: Others
+
+- change version to alpha 12 instead of 1 final [David Ichim - [`3225025`](https://github.com/eea/volto-eea-design-system/commit/32250253f5d7fe9f01126136ad86b8a4f2f5c700)]
+- feature(card): new card variation with title on top of image #267 from eea/title-on-image-card [ichim-david - [`2c0ca95`](https://github.com/eea/volto-eea-design-system/commit/2c0ca95700bb162bc1273c83f2fc4f591de8dcf0)]
+- fix typos in footer gradient variables [David Ichim - [`4006640`](https://github.com/eea/volto-eea-design-system/commit/40066405d97af838e986370101371a8162029e02)]
+- Back to dev [Alin Voinea - [`477d997`](https://github.com/eea/volto-eea-design-system/commit/477d997513ef5152ab98e080ad07f927b5869705)]
+### [1.0.0-alpha.11](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.10...1.0.0-alpha.11) - 17 January 2023
+
+#### :rocket: New Features
+
+- feat(docusaurus): Header and footer elements section #277 [ichim-david - [`0df271c`](https://github.com/eea/volto-eea-design-system/commit/0df271c4c79bd8a24750cfe44d69f32cb04a1b63)]
+
+#### :bug: Bug Fixes
+
+- fix(banner): storybook date input and simplified gradient opacity [David Ichim - [`7674d76`](https://github.com/eea/volto-eea-design-system/commit/7674d767bb770342828d6bea6953ce45b823943f)]
+- fix(banner): re-added title class on banner title [David Ichim - [`6d15799`](https://github.com/eea/volto-eea-design-system/commit/6d157994934c3da9af4e3dd37844f910bddf8377)]
+
+#### :nail_care: Enhancements
+
+- refactor(banner): sync storybook and Volto component #275 from eea/sync-page-banner-theme [ichim-david - [`4331fb4`](https://github.com/eea/volto-eea-design-system/commit/4331fb4a6d5744e7d7d6a001bca91265a22587fd)]
+- change(banner): removed margin from title [David Ichim - [`17e592c`](https://github.com/eea/volto-eea-design-system/commit/17e592c4f3fd16a78069af50574e2ac608166a0f)]
+- refactor(banner): sync storybook and Volto component [nileshgulia1 - [`c9087cc`](https://github.com/eea/volto-eea-design-system/commit/c9087cc8edc3fb27e0b96b509354861ec306f22a)]
+
+#### :house: Documentation changes
+
+- docs(footer): updates on header elements [Dora Anastasiou - [`b41c550`](https://github.com/eea/volto-eea-design-system/commit/b41c550475dc5a2eefcad5d75439601d079613e2)]
+- docs(footer): add elements anatomy [Dora Anastasiou - [`d9f0872`](https://github.com/eea/volto-eea-design-system/commit/d9f0872f93a6f7572f798b2c001d3af00eb282e3)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-alpha.11 [Alin Voinea - [`07e8f85`](https://github.com/eea/volto-eea-design-system/commit/07e8f858b0bdeaa6a348c0bfc2b785f26017e1ea)]
+- renamed image elements as requested in review [David Ichim - [`8541fb6`](https://github.com/eea/volto-eea-design-system/commit/8541fb6739d3c935ed8d44a220114546b2aef682)]
+- update(gradient): use 8deg angle [nileshgulia1 - [`6fd597d`](https://github.com/eea/volto-eea-design-system/commit/6fd597d8d7a83fdf8a27939e4c69dfc3975b6a81)]
+- update(gradiant): make it 0deg [nileshgulia1 - [`1bb2696`](https://github.com/eea/volto-eea-design-system/commit/1bb2696375eef233b509e27d9d464b8343421430)]
+- remove(banner-gradiant): image gradiant in favour of text [nileshgulia1 - [`1b58520`](https://github.com/eea/volto-eea-design-system/commit/1b58520490be5e17ea4ce6fc98329d467dad3960)]
+- remove(comment) referencing old verison of title [nileshgulia1 - [`4226d42`](https://github.com/eea/volto-eea-design-system/commit/4226d42e34b119e057cf4e9878b6a99172cb976a)]
+- add(banner): banner title css [nileshgulia1 - [`d003247`](https://github.com/eea/volto-eea-design-system/commit/d0032474d2b57eb63a4b50a882ced2ee743a48e6)]
+### [1.0.0-alpha.10](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.9...1.0.0-alpha.10) - 13 January 2023
 
 #### :bug: Bug Fixes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.12",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/Banner/Banner.jsx

@@ -1,22 +1,68 @@
 import React from 'react';
 import { Container, Icon, Button, Grid } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
+import { formatDate } from '@plone/volto/helpers/Utils/Date';
+import config from '@plone/volto/registry';
 
 Banner.propTypes = {
   title: PropTypes.string,
   image: PropTypes.bool,
 };
 
-function Banner({ image_url, image, children }) {
+const socialPlatforms = {
+  facebook: {
+    shareLink: (url) => `https://facebook.com/sharer.php?u=${url}`,
+  },
+  twitter: {
+    shareLink: (url) => `https://www.twitter.com/share?url=${url}`,
+  },
+  linkedin: {
+    shareLink: (url) =>
+      `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+  },
+  reddit: {
+    shareLink: (url, title) => `https://reddit.com/submit?url=${url}`,
+  },
+};
+
+export const getImageSource = (image) => {
+  if (image?.download) return image.download;
+  if (image?.encoding)
+    return `data:${image['content-type']};${image['encoding']},${image['data']}`;
+  return null;
+};
+
+export const sharePage = (url, platform) => {
+  if (!socialPlatforms[platform]) return;
+  const link = document.createElement('a');
+  link.setAttribute('href', socialPlatforms[platform].shareLink(url));
+  link.setAttribute('target', '_blank');
+  link.setAttribute('rel', 'noreferrer');
+  link.click();
+};
+
+function Banner({ image, metadata, properties, children, ...rest }) {
+  if (image) {
+    //extract Lead image from page content.
+    const content = metadata || properties;
+    const imageUrl = getImageSource(content['image']) ?? image;
+    return (
+      <div className="eea banner">
+        <div
+          className={imageUrl ? 'image' : ''}
+          style={imageUrl ? { backgroundImage: `url(${imageUrl})` } : {}}
+        >
+          <div className="gradient">
+            <Container>{children}</Container>
+          </div>
+        </div>
+      </div>
+    );
+  }
   return (
     <div className="eea banner">
-      <div
-        className={image ? 'image' : ''}
-        style={image ? { backgroundImage: `url(${image_url})` } : {}}
-      >
-        <div className="gradient">
-          <Container>{children}</Container>
-        </div>
+      <div className="gradient">
+        <Container>{children}</Container>
       </div>
     </div>
   );
@@ -48,12 +94,30 @@ Banner.Content = ({ children, actions }) => {
   );
 };
 
-Banner.Title = ({ children }) => <p className="title">{children}</p>;
+Banner.Title = ({ children }) => {
+  return <h1 className="documentFirstHeading title">{children}</h1>;
+};
 Banner.Subtitle = ({ children }) => <p className="subtitle">{children}</p>;
 Banner.Metadata = ({ children }) => <p className="metadata">{children}</p>;
 
 Banner.MetadataField = ({ hidden, type = 'text', label, value, title }) => {
+  const locale = config.settings.dateLocale || 'en-gb';
   if (hidden || !value) return '';
+  if (type === 'date' && value)
+    return (
+      <span className={`field ${type}`} title={title?.replace('{}', value)}>
+        {label}{' '}
+        {formatDate({
+          date: value,
+          format: {
+            year: 'numeric',
+            month: 'short',
+            day: '2-digit',
+          },
+          locale: locale,
+        })}
+      </span>
+    );
   return (
     <span className={`field ${type}`}>
       {label && <>{label}: </>}

package/src/ui/Banner/Banner.stories.jsx

@@ -74,7 +74,7 @@ export default {
 };
 
 const Template = (args) => (
-  <Banner {...args} image_url={args.image ? imgUrl : null}>
+  <Banner {...args} image={args.image ? imgUrl : null}>
     <Banner.Content
       actions={
         <>
@@ -143,8 +143,8 @@ Default.args = {
   subtitle: 'Lorem ipsum dolor',
   metadata: [
     { hidden: false, value: 'Briefing', type: 'type' },
-    { hidden: false, value: 'Published Date', type: 'date' },
-    { hidden: false, value: 'Modified Date', type: 'date' },
+    { hidden: false, label: 'Published', value: '25 Nov 2022', type: 'date' },
+    { hidden: false, label: 'Modified', value: '29 Nov 2022', type: 'date' },
     { hidden: false, value: '5 min read', type: '' },
   ],
   image: true,

package/src/ui/Card/Card.stories.jsx

@@ -17,6 +17,15 @@ export default {
     },
   },
   argTypes: {
+    titleOnImage: {
+      name: 'Display title on image',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: false },
+      },
+    },
     variant: {
       options: ['default', 'primary', 'secondary', 'tertiary'],
       control: { type: 'select' },
@@ -28,140 +37,120 @@ export default {
         defaultValue: { summary: 'default' },
       },
     },
-    cards: {
-      description: 'cards data',
-      table: {
-        type: {
-          summary: 'object',
-        },
-        defaultValue: { summary: '' },
-      },
-    },
     inverted: {
-      description: 'Inverted card',
       table: {
         defaultValue: { summary: 'false' },
         type: { summary: 'boolean' },
       },
     },
+    cards: {
+      table: {
+        type: {
+          summary: 'Object',
+        },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
   },
 };
 
-const MetaRight = (args) => (
-  <span className="bold text-right">{args.metaRight}</span>
-);
-
-const Template = (args) => (
-  <Container>
-    <Card
-      fluid={args.fluid}
-      className={`${args.variant === 'default' ? '' : args.variant} ${
-        args.inverted ? 'inverted' : ''
-      }`}
-    >
-      {args.hasImage && (
+const CardTemplate = ({ variant, inverted, titleOnImage, card }) => (
+  <Card
+    fluid={card.fluid}
+    className={`${variant === 'default' ? '' : variant} ${
+      inverted ? 'inverted' : ''
+    }`}
+  >
+    {/* Card Image */}
+    {card.hasImage ? (
+      titleOnImage ? (
+        <CardImage {...card} />
+      ) : (
         <Image
           as="a"
-          href={args.href}
-          src={args.imgUrl}
+          href={card.href}
+          src={card.imgUrl}
           wrapped
           ui={false}
           alt="card image"
         />
+      )
+    ) : (
+      ''
+    )}
+    <Card.Content>
+      {/* Type & Date */}
+      <Card.Meta>
+        {card.meta} <MetaRight {...card} />
+      </Card.Meta>
+
+      {/* Title */}
+      {!titleOnImage || !card.hasImage ? (
+        <Card.Header>{card.title}</Card.Header>
+      ) : (
+        ''
       )}
-      <Card.Content>
-        <Card.Meta>
-          {args.meta} <MetaRight {...args} />
-        </Card.Meta>
-        <Card.Header>
-          <a href={args.href}>{args.title}</a>
-        </Card.Header>
-        <Card.Description>{args.description}</Card.Description>
-      </Card.Content>
-      {args.links !== null &&
-        args.links.map((item, index) => (
-          <Card.Content extra key={index}>
-            <a href={args.href}>{item.linkName}</a>
-          </Card.Content>
-        ))}
-    </Card>
+
+      {/* Description */}
+      <Card.Description>{card.description}</Card.Description>
+    </Card.Content>
+
+    {/* Additional links */}
+    {card.links &&
+      card.links.map((item, index) => (
+        <Card.Content extra key={index}>
+          <a href={card.href}>{item.linkName}</a>
+        </Card.Content>
+      ))}
+  </Card>
+);
+
+const CardImage = (card) => (
+  <a href={card.href} className={'image'}>
+    <Image src={card.imgUrl} ui={false} alt="card image" />
+    <div className="gradient">
+      <Card.Header>{card.title}</Card.Header>
+    </div>
+  </a>
+);
+
+const MetaRight = (args) => (
+  <span className="bold text-right">{args.metaRight}</span>
+);
+
+const Template = (args) => (
+  <Container>
+    {args.cards.map((card, index) => (
+      <CardTemplate
+        variant={args.variant}
+        titleOnImage={args.titleOnImage}
+        inverted={args.inverted}
+        card={card}
+        key={index}
+      />
+    ))}
   </Container>
 );
 
 export const Default = Template.bind({});
 Default.args = {
+  titleOnImage: false,
   variant: 'default',
   inverted: false,
-  imgUrl:
-    'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
-
-  meta: 'Article',
-  metaRight: '30/07/2022',
-  title: 'Lorem Ipsum',
-  description:
-    'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
-  hasImage: true,
-  href: '/#',
-  links: null,
-  fluid: false,
-};
-Default.argTypes = {
-  imgUrl:
-    'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
-  hasImage: {
-    description: 'true if card contains image',
-    table: {
-      type: {
-        summary: 'boolean',
-      },
-      defaultValue: { summary: true },
-    },
-  },
-  fluid: {
-    description: 'take up the width of its container',
-    table: {
-      type: {
-        summary: 'boolean',
-      },
-      defaultValue: { summary: false },
-    },
-  },
-  meta: {
-    description: 'Card metadata',
-    table: {
-      category: 'Card content',
-      type: { summary: 'string' },
-      defaultValue: { summary: ' "" ' },
-    },
-  },
-  metaRight: {
-    description: 'Card right metadata',
-    table: {
-      category: 'Card content',
-      type: { summary: 'string' },
-      defaultValue: { summary: ' "" ' },
-    },
-  },
-  title: {
-    description: 'card header',
-    table: {
-      category: 'Card content',
-      type: { summary: 'string' },
-      defaultValue: { summary: ' "" ' },
-    },
-  },
-  description: {
-    description: 'card main content',
-    table: {
-      category: 'Card content',
-      type: { summary: 'string' },
-      defaultValue: { summary: ' "" ' },
+  cards: [
+    {
+      title: 'Economy and resources',
+      imgUrl:
+        'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+      description:
+        'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
+      hasImage: true,
+      meta: 'Article',
+      metaRight: '30/07/2022',
+      href: '/#',
+      fluid: false,
     },
-  },
-};
-Default.parameters = {
-  controls: { exclude: ['cards', 'href', 'links'] },
-  hideNoControlsWarning: true,
+  ],
 };
 
 const GridTemplate = (args) => (
@@ -169,38 +158,13 @@ const GridTemplate = (args) => (
     <Grid>
       {args.cards.map((card, index) => (
         <Grid.Column mobile={12} tablet={6} computer={4} key={index}>
-          <Card
-            fluid={card.fluid}
-            className={`${args.variant === 'default' ? '' : args.variant} ${
-              args.inverted ? 'inverted' : ''
-            }`}
-          >
-            {card.hasImage && (
-              <Image
-                as="a"
-                href={card.href}
-                src={card.imgUrl}
-                wrapped
-                ui={false}
-                alt="card image"
-              />
-            )}
-            <Card.Content>
-              <Card.Meta>
-                {card.meta} <MetaRight {...card} />
-              </Card.Meta>
-              <Card.Header>
-                <a href={args.href}>{card.title}</a>
-              </Card.Header>
-              <Card.Description>{card.description}</Card.Description>
-            </Card.Content>
-            {card.links !== null &&
-              card.links.map((item, index) => (
-                <Card.Content extra key={index}>
-                  <a href="/#">{item.linkName}</a>
-                </Card.Content>
-              ))}
-          </Card>
+          <CardTemplate
+            variant={args.variant}
+            titleOnImage={args.titleOnImage}
+            inverted={args.inverted}
+            card={card}
+            key={index}
+          />
         </Grid.Column>
       ))}
     </Grid>
@@ -209,11 +173,12 @@ const GridTemplate = (args) => (
 
 export const CardGrid = GridTemplate.bind({});
 CardGrid.args = {
+  titleOnImage: false,
   variant: 'default',
   inverted: false,
   cards: [
     {
-      title: 'Lorem Ipsum',
+      title: 'Nature',
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
       description:
@@ -222,11 +187,10 @@ CardGrid.args = {
       meta: 'Article',
       metaRight: '30/07/2022',
       href: '/#',
-      links: null,
       fluid: true,
     },
     {
-      title: 'Suspendisse iaculis feugiat',
+      title: 'Economy and resources',
       imgUrl:
         'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini',
       description:
@@ -235,71 +199,67 @@ CardGrid.args = {
       meta: 'Article',
       metaRight: '30/07/2022',
       href: '/#',
-      links: null,
       fluid: true,
     },
     {
-      title: 'Eget tellus blandit aenean mattis.',
+      title: "State of Europe's environment",
+      imgUrl:
+        'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini',
       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.',
-      hasImage: false,
+      hasImage: true,
       meta: 'Article',
       metaRight: '30/07/2022',
       href: '/#',
-      links: null,
       fluid: true,
     },
   ],
 };
-CardGrid.argTypes = {
-  cards: {
-    description: 'array with cards data',
-    table: {
-      type: {
-        summary: 'Object',
-      },
-      defaultValue: { summary: ' "" ' },
+
+export const ImageGrid = GridTemplate.bind({});
+ImageGrid.args = {
+  titleOnImage: true,
+  variant: 'default',
+  inverted: false,
+  cards: [
+    {
+      title: 'Nature',
+      imgUrl:
+        'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+      hasImage: true,
+      href: '/#',
+      fluid: true,
     },
-  },
+    {
+      title: 'Economy and resources',
+      imgUrl:
+        'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini',
+      hasImage: true,
+      href: '/#',
+      fluid: true,
+    },
+    {
+      title: "State of Europe's environment",
+      imgUrl:
+        'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini',
+      hasImage: true,
+      href: '/#',
+      fluid: true,
+    },
+  ],
 };
 
 const FluidGridTemplate = (args) => (
   <Container>
     <div className="fluid-card-row">
       {args.cards.map((card, index) => (
-        <Card
-          fluid={card.fluid}
-          className={`${args.variant === 'default' ? '' : args.variant} ${
-            args.inverted ? 'inverted' : ''
-          }`}
+        <CardTemplate
+          variant={args.variant}
+          titleOnImage={args.titleOnImage}
+          inverted={args.inverted}
+          card={card}
           key={index}
-        >
-          {card.hasImage && (
-            <Image
-              as="a"
-              href={card.href}
-              src={card.imgUrl}
-              wrapped
-              ui={false}
-              alt="card image"
-            />
-          )}
-          <Card.Content>
-            <Card.Meta>
-              {card.meta} <MetaRight {...card} />
-            </Card.Meta>
-            <Card.Header>
-              <a href={args.href}>{card.title}</a>
-            </Card.Header>
-            <Card.Description>{card.description}</Card.Description>
-          </Card.Content>
-          {card.links !== null &&
-            card.links.map((item, index) => (
-              <Card.Content extra key={index}>
-                <a href="/#">{item.linkName}</a>
-              </Card.Content>
-            ))}
-        </Card>
+        />
       ))}
     </div>
   </Container>
@@ -307,11 +267,12 @@ const FluidGridTemplate = (args) => (
 
 export const FluidGrid = FluidGridTemplate.bind({});
 FluidGrid.args = {
+  titleOnImage: false,
   variant: 'default',
   inverted: false,
   cards: [
     {
-      title: 'Lorem Ipsum',
+      title: 'Nature',
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
       description:
@@ -321,10 +282,9 @@ FluidGrid.args = {
       metaRight: '30/07/2022',
       href: '/#',
       fluid: true,
-      links: null,
     },
     {
-      title: 'Suspendisse iaculis feugiat',
+      title: 'Health',
       imgUrl:
         'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini',
       description:
@@ -334,32 +294,21 @@ FluidGrid.args = {
       metaRight: '30/07/2022',
       href: '/#',
       fluid: true,
-      links: null,
     },
     {
-      title: 'Eget tellus blandit aenean mattis.',
+      title: "State of Europe's environment",
+      imgUrl:
+        'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini',
       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.',
-      hasImage: false,
+      hasImage: true,
       meta: 'Article',
       metaRight: '30/07/2022',
       href: '/#',
       fluid: true,
-      links: null,
     },
   ],
 };
-CardGrid.argTypes = {
-  cards: {
-    description: 'array with cards data',
-    table: {
-      type: {
-        summary: 'Object',
-      },
-      defaultValue: { summary: ' "" ' },
-    },
-  },
-};
 
 const Arrows = (props) => {
   const { slider = {} } = props;
@@ -394,36 +343,25 @@ const Arrows = (props) => {
   );
 };
 
-function CarouselCardsContent({ variant, inverted, settings, cards, ...rest }) {
+function CarouselCardsContent({
+  titleOnImage,
+  variant,
+  inverted,
+  settings,
+  cards,
+}) {
   const slider = React.useRef(null);
   return (
     <div className="cards-carousel">
       <Slider {...settings} ref={slider}>
         {cards.map((card, index) => (
-          <Card
-            fluid={card.fluid}
+          <CardTemplate
+            variant={variant}
+            titleOnImage={titleOnImage}
+            inverted={inverted}
+            card={card}
             key={index}
-            className={`${variant === 'default' ? '' : variant} ${
-              inverted ? 'inverted' : ''
-            }`}
-          >
-            {card.hasImage && (
-              <Image
-                as="a"
-                href={card.href}
-                src={card.imgUrl}
-                wrapped
-                ui={false}
-                alt="card image"
-              />
-            )}
-            <Card.Content>
-              <Card.Meta>{card.meta}</Card.Meta>
-              <Card.Header>
-                <a href={card.href}>{card.title}</a>
-              </Card.Header>
-            </Card.Content>
-          </Card>
+          />
         ))}
       </Slider>
       <Arrows slider={slider} />
@@ -439,6 +377,7 @@ const CarouselCardsTemplate = (args) => (
 
 export const CarouselCards = CarouselCardsTemplate.bind({});
 CarouselCards.args = {
+  titleOnImage: false,
   variant: 'default',
   inverted: false,
   settings: {
@@ -468,7 +407,7 @@ CarouselCards.args = {
   },
   cards: [
     {
-      title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      title: "State of Europe's environment",
       meta: 'March 20, 2022.',
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
@@ -477,7 +416,7 @@ CarouselCards.args = {
       fluid: true,
     },
     {
-      title: 'Lorem ipsum.',
+      title: 'Nature',
       meta: 'March 20, 2022.',
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
@@ -486,7 +425,7 @@ CarouselCards.args = {
       fluid: true,
     },
     {
-      title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      title: 'Health',
       meta: 'March 20, 2022.',
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
@@ -495,8 +434,7 @@ CarouselCards.args = {
       fluid: true,
     },
     {
-      title:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean massa strong.',
+      title: 'Climate',
       meta: 'March 20, 2022.',
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
@@ -505,7 +443,7 @@ CarouselCards.args = {
       fluid: true,
     },
     {
-      title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      title: 'Economy and resources',
       meta: 'March 20, 2022.',
       imgUrl:
         'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',

package/theme/theme.config

@@ -135,5 +135,4 @@
   @import (optional) "@{siteFolder}/@{addon}/@{addontype}s/@{addonelement}.overrides";
 }
 
-
 /* End Config */

package/theme/themes/eea/extras/banner.less

@@ -91,13 +91,20 @@
     background-size: @imageBackgroundSize;
 
     .gradient {
-      background-image: @backgroundGradientWithImage;
-
       .content {
         padding: @mobileContentPaddingWithImage;
       }
     }
   }
+
+  .documentFirstHeading {
+    border-bottom: @titleBorderBottom;
+    margin-bottom: @titleMarginBottom;
+
+    &::before {
+      content: @titleBorderBottom;
+    }
+  }
 }
 
 /*Share Popup*/
@@ -218,4 +225,3 @@
 }
 
 .loadUIOverrides();
-

package/theme/themes/eea/extras/banner.variables

@@ -10,8 +10,7 @@
 @imageBackgroundPosition : center;
 
 /* Gradient */
-@backgroundGradient           : linear-gradient(8deg, #0c1b28b3 32%, rgba(0, 36, 78, 0) 80%);
-@backgroundGradientWithImage  : linear-gradient(0deg, rgb(20, 33, 44, 90%) 24%, rgba(0, 36, 78, 0) 80%);
+@backgroundGradient           : linear-gradient(8deg,rgba(12,27,40, 0.7) 32%,rgba(0,36,78,0) 80%);
 @backgroundGradientOpacity    : 1;
 
 /* Content */
@@ -26,15 +25,18 @@
 /* Title */
 @titleFontWeight           : @bold;
 @titleMaxWidth             : 100%;
-@mobileTitleFontSize       : 1.25rem;
-@tabletTitleFontSize       : 2.25rem;
-@computerTitleFontSize     : 3rem;
-@mobileTitleLineHeight     : 1.375rem;
-@tabletTitleLineHeight     : 2.75rem;
-@computerTitleLineHeight   : 3.5rem;
-@mobileTitleMargin         : 0 0 0.5rem 0;
-@tabletTitleMargin         : 0 0 0.813rem 0;
-@computerTitleMargin       : 0 0 1.125rem 0;
+@titleMarginBottom         : 0;
+@titleBorderBottom         : none;
+@mobileTitleFontSize       : @mobileH1;
+@tabletTitleFontSize       : @h2;
+@computerTitleFontSize     : @h1;
+@mobileTitleLineHeight     : @headerLineHeight;
+@tabletTitleLineHeight     : @headerLineHeight;
+@computerTitleLineHeight   : @headerLineHeight;
+@mobileTitleMargin         : 0 0 0 0;
+@tabletTitleMargin         : 0 0 0 0;
+@computerTitleMargin       : 0 0 0 0;
+
 
 /* Subtitle */
 @subtitleFontWeight        : @bold;
@@ -85,4 +87,4 @@
 @sharePopupLineHeight: 1rem;
 // Actions
 @sharePopupActionsIconColor: @pineGreen;
-@sharePopupActionsIconMargin: 0;
+@sharePopupActionsIconMargin: 0;

package/theme/themes/eea/extras/footer.less

@@ -11,7 +11,7 @@ footer {
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: @mobileFooterBackgroundGrandient;
+  background: @mobileFooterBackgroundGradient;
   color: @white;
 
   .footer-wrapper {
@@ -78,7 +78,7 @@ footer .theme-sites {
   display: flex;
   justify-content: @mobileSocialJustifyContent;
   margin: @mobileSocialIconsMargin;
-  
+
   a {
     color: @socialIconColor;
 
@@ -132,7 +132,7 @@ footer .footer-wrapper .menu {
 
 @media only screen and (min-width: @tabletBreakpoint) {
   footer {
-    background: @computerFooterBackgroundGrandient;
+    background: @computerFooterBackgroundGradient;
   }
   footer .theme-sites {
     .header {
@@ -246,11 +246,11 @@ footer .footer-wrapper .menu {
   }
 
   .footer .footer-wrapper .menu {
-  
+
     a {
       font-size: @computerMenuFontSize;
     }
-  } 
+  }
 }
 
-.loadUIOverrides();
+.loadUIOverrides();

package/theme/themes/eea/extras/footer.variables

@@ -2,9 +2,9 @@
             Footer
 *******************************/
 
-/* @footerBackgroundGrandient: linear-gradient(220.4deg, #009591 8.29%, #2E3E4C 56.3%, #212D38 89.06%); */
-@mobileFooterBackgroundGrandient: linear-gradient(220.4deg, @green-5 8.29%, @blue-grey-6 56.3%, #212D38 89.06%);
-@computerFooterBackgroundGrandient: linear-gradient(212.33deg, @green-5 6.78%, #212D38 69.54%, #212D38 98.23%);
+/* @footerBackgroundGradient: linear-gradient(220.4deg, #009591 8.29%, #2E3E4C 56.3%, #212D38 89.06%); */
+@mobileFooterBackgroundGradient: linear-gradient(220.4deg, @green-5 8.29%, @blue-grey-6 56.3%, #212D38 89.06%);
+@computerFooterBackgroundGradient: linear-gradient(212.33deg, @green-5 6.78%, #212D38 69.54%, #212D38 98.23%);
 
 /* Titles */
 @footerTitleFontWeight      : @font-weight-7;

package/theme/themes/eea/extras/header.less

@@ -833,7 +833,8 @@
   display: none;
 }
 
-#main #mega-menu .ui.accordion .title:first-child + .content {
+// hide content of accordion titles that are not active
+#main #mega-menu .ui.accordion .title:first-child + .content:not(.active) {
   display: none;
 }
 

package/theme/themes/eea/globals/mixins.less

@@ -0,0 +1,16 @@
+// Gradient Mixin
+.gradientMix(@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: length(@prefixes)) when (@index > 0) {
+  .gradientMix(@type; @colors; @dir; @prefixes; (@index - 1));
+
+  @prefix  : extract(@prefixes, @index);
+  @dir-old : 90 - (@dir);
+
+  background-image: ~"-@{prefix}-@{type}-gradient(@{dir-old}, @{colors})";
+  & when ( @index = length(@prefixes) ) {
+    background-image: ~"@{type}-gradient(@{dir}, @{colors})";
+  }
+}
+
+.image-overlay-gradient() {
+  .gradientMix(linear; rgba(46, 62, 76, 0.65) 38.6%, rgba(46, 62, 76, 0.169) 59.52%, rgba(69, 95, 106, 0) 79.64%; 13.39deg)
+}

package/theme/themes/eea/globals/site.variables

@@ -3,6 +3,7 @@
 *******************************/
 
 @import '@eeacms/volto-eea-design-system/../theme/themes/eea/tokens/tokens';
+@import '@eeacms/volto-eea-design-system/../theme/themes/eea/globals/mixins';
 
 /*-------------------
        Fonts
@@ -209,7 +210,7 @@
 
 @linkColor           : @blue-4;
 @linkHoverColor      : @blue-5;
-@linkVisitedColor    : @purple-5;
+@linkVisitedColor    : @purple-4;
 @linkActiveColor     : @blue-6;
 @linkUnderline       : none;
 @linkHoverUnderline  : @linkUnderline;

package/theme/themes/eea/tokens/colors.less

@@ -10,7 +10,7 @@
 @purple-1: #DFD6E7;
 @purple-2: #BEADCE;
 @purple-3: #9E84B6;
-@purple-4: #7D5B9D;
+@purple-4: #753AAD;
 @purple-5: #5C3285;
 @purple-6: #3C096C;
 

package/theme/themes/eea/views/card.overrides

@@ -14,6 +14,7 @@
 
 /* Cards must have same height */
 .ui.card {
+  min-width: @minWidth;
   height: 100%;
   text-align: var(--text-align, @cardTextAlign);
   background-color: var(--card-background-color, @background);
@@ -24,6 +25,7 @@
   margin-left: @cardMetaDateMarginLeft;
 }
 
+.ui.cards > .card:not(.rounded) > .image,
 .ui.card:not(.rounded) > .image {
   overflow: @cardImageOverflow;
   height: @cardImageHeight;
@@ -249,6 +251,46 @@
   }
 }
 
+/*******************************
+      Image with title
+*******************************/
+// Adding the default image css for image inside image-with-title
+.ui.cards > .card > .image {
+  position: relative;
+  display: block;
+  flex: 0 0 auto;
+  padding: 0;
+  background: transparent;
+}
+
+
+.card .gradient {
+  display: flex;
+  align-items: end;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  padding: @imageTitlePadding;
+  .image-overlay-gradient();
+}
+
+.gradient .header {
+  font-size: var(--image-header-font-size, @imageTitleMobileFontSize);
+  color: @imageTitleColor;
+  font-weight: @imageTitleFontWeight;
+  line-height: @imageTitleLineHeight;
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  .card .gradient {
+    padding-block: @imageTitlePaddingBlock;
+  }
+  .gradient .header {
+    --image-header-font-size: @imageTitleFontSize;
+  }
+}
+
 /*******************************
         Carousel
 *******************************/

package/theme/themes/eea/views/card.variables

@@ -22,6 +22,7 @@
 @minHeight: 0px;
 @padding: 0em;
 @width: 290px;
+@minWidth: 250px;
 @borderWidth: 1px;
 @borderShadow: 0px 0px 0px @borderWidth @solidBorderColor;
 @boxShadow: @eeaGlobalShadow;
@@ -262,6 +263,17 @@
 @invertedTertiaryCardColor: @tertiaryColor;
 @invertedTertiaryCardBackgroundColor: @white;
 
+/*******************************
+        Image with title
+*******************************/
+@imageTitleColor: @white;
+@imageTitleFontSize: @h2;
+@imageTitleMobileFontSize: @mobileH1;
+@imageTitleFontWeight: @font-weight-7;
+@imageTitleLineHeight: @font-lineheight-0;
+@imageTitlePadding: @rem-space-6;
+@imageTitlePaddingBlock: @rem-space-4;
+
 /*******************************
           Rounded Card
 *******************************/