@eeacms/volto-eea-design-system 1.19.0 → 1.21.0

package/CHANGELOG.md

@@ -4,6 +4,88 @@ 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.21.0](https://github.com/eea/volto-eea-design-system/compare/1.20.0...1.21.0) - 20 November 2023
+
+#### :bug: Bug Fixes
+
+- fix(item): styling difference so that column group or section group flex template match design [David Ichim - [`f57e074`](https://github.com/eea/volto-eea-design-system/commit/f57e0744808df8b467e179b83266e8b2c2398956)]
+
+#### :nail_care: Enhancements
+
+- change(message): Renamed Error to ErrorMessage to avoid special identifier Sonarqube warning [David Ichim - [`09e49ac`](https://github.com/eea/volto-eea-design-system/commit/09e49ac4e71c02b439459eec29266d3f5b884d50)]
+- change(header): dropdowns now auto open and close on focus and blur when using keyboard navigation [David Ichim - [`d558e9b`](https://github.com/eea/volto-eea-design-system/commit/d558e9bf7abba19221744be871759d025ce0f05a)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.21.0 [Alin Voinea - [`fe39edd`](https://github.com/eea/volto-eea-design-system/commit/fe39edde81fd4f01f7958aee706887a5dedce521)]
+- Modified test to reference ErrorMessage [David Ichim - [`36fefd0`](https://github.com/eea/volto-eea-design-system/commit/36fefd05a6b30d92494a7974c9fb86d35cae5acc)]
+- Lint fix [David Ichim - [`c1fc104`](https://github.com/eea/volto-eea-design-system/commit/c1fc104f1e7be0611de4aa17c55ad9c402c70ff8)]
+- Test Header onBlur [David Ichim - [`42f9c97`](https://github.com/eea/volto-eea-design-system/commit/42f9c97d01f7b59a1c63e42e1825dfa0697f0ef2)]
+- Add dropdown test case to Header component [David Ichim - [`9ea3234`](https://github.com/eea/volto-eea-design-system/commit/9ea3234c2c0f1c819c7c2b54a75c56cda7812c56)]
+- Remove unused import in Header.test.jsx [David Ichim - [`082069e`](https://github.com/eea/volto-eea-design-system/commit/082069e1f057786e0f1fb00c98d54b8e03b5d9c5)]
+- Added some tests for TopDropdownMenu mobile and dropdown interaction [David Ichim - [`9d24488`](https://github.com/eea/volto-eea-design-system/commit/9d24488c1e97b2b1b14bd9bd8cb6f5b68414794b)]
+- Lint fix [David Ichim - [`e29fd50`](https://github.com/eea/volto-eea-design-system/commit/e29fd50ee73477007dcf94a268596e6c11176d7b)]
+### [1.20.0](https://github.com/eea/volto-eea-design-system/compare/1.19.0...1.20.0) - 2 November 2023
+
+#### :rocket: New Features
+
+- feat(storybook): add event date on cards based on volto-listing-block; refs #258288 #402 from eea/cards-storybook [ichim-david - [`638241c`](https://github.com/eea/volto-eea-design-system/commit/638241cd8376dba9970c415fce5b46c93dde48da)]
+- feat(accordion): accordion title now has css variable for justification and icon order [David Ichim - [`cd775de`](https://github.com/eea/volto-eea-design-system/commit/cd775de9a347b2999cfa378da947bac2076df460)]
+- feat(tabs): added inverted option to tabs storybook [David Ichim - [`d9e760b`](https://github.com/eea/volto-eea-design-system/commit/d9e760b069a48a7a4594c6dba0044755415d505d)]
+- feat(tabs): added theme config to tabs storybook [David Ichim - [`01d1e85`](https://github.com/eea/volto-eea-design-system/commit/01d1e85b82b18cae7ac6519f86e471149c210e73)]
+- feat(tabs): allow styling of vertical tabs with and without secondary or pointing classes [David Ichim - [`1d1b78b`](https://github.com/eea/volto-eea-design-system/commit/1d1b78ba22bbf63c02f7db0d4a8b5a1dd309f755)]
+- feat(tabs): style tabs for themes without need of secondary and pointing classes [David Ichim - [`2337659`](https://github.com/eea/volto-eea-design-system/commit/233765947f2653b6dd6bf91e85a2c09deb5af5a6)]
+- feat(accordion): style inverted theme version to set bg color to theme color [David Ichim - [`ab1e8df`](https://github.com/eea/volto-eea-design-system/commit/ab1e8df9ea5911a70ee45212213eac4fe0d3611d)]
+
+#### :bug: Bug Fixes
+
+- fix(item): position of text when icon is on top to align on center [David Ichim - [`ce37114`](https://github.com/eea/volto-eea-design-system/commit/ce37114c97f29884080747a4691031ffd66d2ab5)]
+- fix: Fix page layout on edit view when a block has full-with size; Refs #259212 #405 from eea/full-width-edit-mode [ichim-david - [`36820f5`](https://github.com/eea/volto-eea-design-system/commit/36820f5252992eecb27b3a4b5a87a74df6d2c274)]
+- fix: Fix page layout on edit view when a block has full-with size; Refs #259212 [kreafox - [`16c9a55`](https://github.com/eea/volto-eea-design-system/commit/16c9a558118fd312688a8aa8dee6ee2f474664a5)]
+- fix: formatting (stylelint) [kreafox - [`ba35c2e`](https://github.com/eea/volto-eea-design-system/commit/ba35c2e000aa7443670de32f212af3e0c93f5576)]
+- fix: redo changes [kreafox - [`101e957`](https://github.com/eea/volto-eea-design-system/commit/101e95777a40a1c8b3958c90c7f3a44152a48f7c)]
+- fix: Fix page layout on edit view when a block has full-with size; Refs #259212 [kreafox - [`55617e6`](https://github.com/eea/volto-eea-design-system/commit/55617e6ec9ce4930e97fe4a886cbdd36c1bb3941)]
+- fix(accordion): color change of sub accordions due to theme settings on parent [David Ichim - [`f3755ac`](https://github.com/eea/volto-eea-design-system/commit/f3755ac9ffcc5ba5ed9992fbab8fbd5f69dc92ba)]
+- fix(block-chooser): title block order and color because it receives styling from accordion title styles [David Ichim - [`ecc85b2`](https://github.com/eea/volto-eea-design-system/commit/ecc85b2e1fa9bd6809dabf4655afe785e1085473)]
+- fix(tabs): edit active tab background color [David Ichim - [`c5726a4`](https://github.com/eea/volto-eea-design-system/commit/c5726a467a39592415dae2a7e40616cf5a9a0bbf)]
+
+#### :nail_care: Enhancements
+
+- change(storybook): add event date on cards based on volto-listing-block; refs #258288 [kreafox - [`25af204`](https://github.com/eea/volto-eea-design-system/commit/25af204d81c4253c5ca6705b47a893c3f3443cc3)]
+- change(tabs): modified logic for left and right tabs to work without secondary and pointing [David Ichim - [`ac60bc0`](https://github.com/eea/volto-eea-design-system/commit/ac60bc0a282da41fdc36792275807e7625a11076)]
+- change(tabs): vertical menu gets same item size as themes without borders or shadows [David Ichim - [`f2b49ec`](https://github.com/eea/volto-eea-design-system/commit/f2b49ec3bc4358f33f134230f91c18fe36bc95ef)]
+
+#### :house: Internal changes
+
+- chore: husky, lint-staged use fixed versions [valentinab25 - [`59ecb8e`](https://github.com/eea/volto-eea-design-system/commit/59ecb8e28b259472303324f9655b0cbbcbbf9c23)]
+
+#### :hammer_and_wrench: Others
+
+- bump package version preparing for release [David Ichim - [`c3bddab`](https://github.com/eea/volto-eea-design-system/commit/c3bddab1d2aa18b0cc2b1b4d5d9d8a4e437e6e07)]
+- fixed missing comma from accordion selector [David Ichim - [`609f676`](https://github.com/eea/volto-eea-design-system/commit/609f67627c500d5e1d7714d4eb5598f78aafe90d)]
+- prettier and stylelint fix commands [David Ichim - [`82ec097`](https://github.com/eea/volto-eea-design-system/commit/82ec097016b4d3ba06d36ae473151d636b00be6a)]
+- style tabs with situations where we have secondary plus theme classes [David Ichim - [`41ee835`](https://github.com/eea/volto-eea-design-system/commit/41ee8353a43b25095d01c63a3bf9895ab7601b68)]
+- Added color for inverted active  menu [David Ichim - [`457e223`](https://github.com/eea/volto-eea-design-system/commit/457e223dc5a45ae5173fcdd239b89f2cbcc48942)]
+- Added correct color for tab brown option [David Ichim - [`a4e58fe`](https://github.com/eea/volto-eea-design-system/commit/a4e58fefdfb5b35168bf8e514f8c1c1661d46288)]
+- Style inverted secondary menu using css variables: [David Ichim - [`d3a8d7c`](https://github.com/eea/volto-eea-design-system/commit/d3a8d7c65472f9abcc93ccbe13b2c9ca5634266f)]
+- make accordion transformed from rrt_tabs use same color bg as tabs [David Ichim - [`3a1a144`](https://github.com/eea/volto-eea-design-system/commit/3a1a144e5ec1a936db9caa8c1f39af4db4dd7c72)]
+- Tabs to accordion transformation for volto-tabs-block accordion template #256605 #392 from eea/tabs-accordion-transformation-256605 [ichim-david - [`cf7d1ef`](https://github.com/eea/volto-eea-design-system/commit/cf7d1ef6200c898c86598ba7e4a225180faa9537)]
+- test(Card): fix duplicated lines reported by sonarqube [kreafox - [`ef1fc33`](https://github.com/eea/volto-eea-design-system/commit/ef1fc337855049364d7fdc10621c8f4c376815f5)]
+- test(Card): add missing tests for ImageGrid [kreafox - [`5971e01`](https://github.com/eea/volto-eea-design-system/commit/5971e01a2f4f5ba8a180ed2fd38df28d55ad92c0)]
+- test(Card): add Card tests to check correct rendering [kreafox - [`1de5f50`](https://github.com/eea/volto-eea-design-system/commit/1de5f5065a0fa10a931b57fcc4f7831427f897cf)]
+- inverted border should be transparent black instead of black [David Ichim - [`700b9e7`](https://github.com/eea/volto-eea-design-system/commit/700b9e7abef32d5721ea093baa122d8cd4eb5e1b)]
+- implement colors for tabs when using the inverted option, and we still secondary or pointing [David Ichim - [`e3e5fef`](https://github.com/eea/volto-eea-design-system/commit/e3e5fef006ce6ad5dd144a9fb6b8054be9a2a50c)]
+- fix text bounce when using normal tabs due to border size and negative border margin [David Ichim - [`10b7241`](https://github.com/eea/volto-eea-design-system/commit/10b72418ecdf16690eaec229d406969b0eb31336)]
+- Rollback previous change as passing items shorthand does not add ui class [David Ichim - [`ce36c78`](https://github.com/eea/volto-eea-design-system/commit/ce36c789c9289698d7e8a2c0ab54d364a0909b07)]
+- stylelint fix [David Ichim - [`fd4831e`](https://github.com/eea/volto-eea-design-system/commit/fd4831ef31b70bcad8f8b3c49a14b47e857e5e36)]
+- Removed pointing option from vertical tab by default: [David Ichim - [`19d1870`](https://github.com/eea/volto-eea-design-system/commit/19d187037a8aa7d5e2c8dfb518ebf3941d24839f)]
+- fixed color of input within edit page when double-clicking to edit the tab name [David Ichim - [`957e6fd`](https://github.com/eea/volto-eea-design-system/commit/957e6fd5eba3d7b35b8b1a16dbbcef9d732c4e35)]
+- modify tabs story for vertical to still make use of pointing param [David Ichim - [`6963345`](https://github.com/eea/volto-eea-design-system/commit/6963345702c08dd6e1e68dcbf067c9a9ff1502a1)]
+- style tabs menu items for any themes without assumption of pointing or secondary class being present [David Ichim - [`6278457`](https://github.com/eea/volto-eea-design-system/commit/6278457324f7fc4b2c40bdc8c38af708d3950707)]
+- fix test [Dobricean Ioan Dorian - [`6d6e3b9`](https://github.com/eea/volto-eea-design-system/commit/6d6e3b9fa83665dbdff206f0a8e5530c1a128ffe)]
+- add jest test [Dobricean Ioan Dorian - [`cc9533c`](https://github.com/eea/volto-eea-design-system/commit/cc9533c41ef985d394be6b9bb5c776d03a37993c)]
+- add styles for tabs [Dobricean Ioan Dorian - [`8448bf4`](https://github.com/eea/volto-eea-design-system/commit/8448bf4ed60b18a9a28e6e5ef4451fefc141d263)]
+- wip modifying menu classes so that we can use css variables for tab menus [David Ichim - [`f8a55c5`](https://github.com/eea/volto-eea-design-system/commit/f8a55c5ab059de53b66db2f8233fac068d3c96b0)]
 ### [1.19.0](https://github.com/eea/volto-eea-design-system/compare/1.18.3...1.19.0) - 13 October 2023
 
 #### :bug: Bug Fixes

package/cypress.config.js

@@ -2,12 +2,12 @@ const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
   viewportWidth: 1280,
-  defaultCommandTimeout: 5000,
+  defaultCommandTimeout: 8888,
   chromeWebSecurity: false,
   reporter: 'junit',
-  video: true,
+  video: false,
   retries: {
-    runMode: 1,
+    runMode: 2,
     openMode: 0,
   },
   reporterOptions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.19.0",
+  "version": "1.21.0",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -32,8 +32,8 @@
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "husky": "*",
-    "lint-staged": "*",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
     "md5": "^2.3.0"
   },
   "lint-staged": {

package/src/ui/Banner/Banner.jsx

@@ -3,6 +3,7 @@ import { Container, Icon, Button, Grid } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { formatDate } from '@plone/volto/helpers/Utils/Date';
+import cx from 'classnames';
 import config from '@plone/volto/registry';
 
 Banner.propTypes = {
@@ -44,7 +45,7 @@ export const sharePage = (url, platform) => {
   link.click();
 };
 
-function Banner({ image, metadata, properties, children, ...rest }) {
+function Banner({ image, metadata, properties, children, styles, ...rest }) {
   if (image) {
     //extract Lead image from page content.
     const content = metadata || properties;
@@ -52,7 +53,7 @@ function Banner({ image, metadata, properties, children, ...rest }) {
     return (
       <div className="eea banner">
         <div
-          className={imageUrl ? 'image' : ''}
+          className={cx(imageUrl ? 'image' : '', styles?.bg)}
           style={imageUrl ? { backgroundImage: `url(${imageUrl})` } : {}}
         >
           <div className="gradient">
@@ -72,21 +73,14 @@ function Banner({ image, metadata, properties, children, ...rest }) {
 }
 
 Banner.Action = React.forwardRef(function (
-  { id, title, titleClass, icon, onClick, className, color, ...rest },
+  { title, titleClass, icon, onClick, className, color, ...rest },
   ref,
 ) {
   return (
     <div className="action" ref={ref}>
-      <Button
-        className={className}
-        basic
-        icon
-        inverted
-        onClick={onClick}
-        {...rest}
-      >
-        <Icon className={icon} color={color}></Icon>
-        <span className={titleClass || 'mobile hidden'}>{title}</span>
+      <Button className={className} basic icon inverted onClick={onClick}>
+        <Icon className={icon} color={color} title={title}></Icon>
+        <span className={titleClass || 'mobile-sr-only'}>{title}</span>
       </Button>
     </div>
   );

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Card, Image, Grid, Container, Icon, Button } from 'semantic-ui-react';
 import Slider from 'react-slick';
+import TagList from '../TagList/TagList';
+import Tag from '../Tag/Tag';
 
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
@@ -8,71 +10,89 @@ import 'slick-carousel/slick/slick-theme.css';
 const tabletBreakpoint = 835;
 const mobileBreakpoint = 480;
 
-let cardModels = [
-  {
-    title: 'Economy and resources',
-    imgUrl:
+// Content for all cards
+let cardData = {
+  cardContent: {
+    title: [
+      'Economy and resources',
+      'Health',
+      'Nature',
+      'Climate',
+      "State of Europe's environment",
+    ],
+    imgUrl: [
       'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini',
-    description:
-      'The economy plays a vital role in our lives by providing access to employment, ' +
-      'products and services that help us thrive. Unfortunately, with its key sectors like agriculture,' +
-      ' energy and transport, our economy also harms the environment and causes climate change. ' +
-      'Europe needs a circular, carbon-neutral and zero-pollution economy. ',
-    meta: 'Article',
-    metaRight: '20/05/2022',
-    href: '/#',
-  },
-  {
-    title: 'Health',
-    imgUrl:
       'https://www.eea.europa.eu/en/topics/at-a-glance/health/@@images/image/preview',
-    description:
-      'By improving air, water, and soil quality and limiting pollution released to nature, ' +
-      'the EU has significantly contributed to enhancing human health in the last five ' +
-      'decades. Yet, many vulnerable groups continue to be impacted by environmental ' +
-      'degradation and climate change. Further improvements can help keep Europeans ' +
-      'healthier and better equipped to cope with climate change impacts.',
-    meta: 'Article',
-    metaRight: '30/06/2023',
-    href: '/#',
-  },
-  {
-    title: 'Nature',
-    imgUrl:
       'https://www.eea.europa.eu/en/topics/at-a-glance/nature/@@images/image/preview',
-    description:
-      'Europe’s nature is filled with forests, mountains, vast plains, long rivers, deep blue seas and ' +
-      'refreshing lakes. But it also is under threat. Unsustainable farming and forestry practices, ' +
-      'pollution, climate change and invasive species are stressing and destabilising all natural ' +
-      'systems in Europe. The result is a biodiversity crisis. The EU is taking steps to protect and restore nature.',
-    meta: 'Article',
-    metaRight: '10/04/2022',
-    href: '/#',
-  },
-  {
-    title: 'Climate',
-    meta: 'Article',
-    imgUrl:
       'https://www.eea.europa.eu/en/topics/at-a-glance/climate/@@images/image/preview',
-    description:
-      'Climate change affects us all and is accelerating. Its impacts will become even more severe if ' +
-      'the increase in global temperature is not kept below 1.5°C. The EU and its Member States are ' +
-      'taking important steps to rapidly reduce greenhouse gas emissions and adapt to climate change.',
-    href: '/#',
-  },
-  {
-    title: "State of Europe's environment",
-    imgUrl:
       'https://www.eea.europa.eu/en/topics/at-a-glance/state-of-europes-environment/@@images/image/preview',
-    description:
+    ],
+    description: [
+      'The economy plays a vital role in our lives by providing access to employment, ' +
+        'products and services that help us thrive. Unfortunately, with its key sectors like agriculture,' +
+        ' energy and transport, our economy also harms the environment and causes climate change. ' +
+        'Europe needs a circular, carbon-neutral and zero-pollution economy. ',
+      'By improving air, water, and soil quality and limiting pollution released to nature, ' +
+        'the EU has significantly contributed to enhancing human health in the last five ' +
+        'decades. Yet, many vulnerable groups continue to be impacted by environmental ' +
+        'degradation and climate change. Further improvements can help keep Europeans ' +
+        'healthier and better equipped to cope with climate change impacts.',
+      'Europe’s nature is filled with forests, mountains, vast plains, long rivers, deep blue seas and ' +
+        'refreshing lakes. But it also is under threat. Unsustainable farming and forestry practices, ' +
+        'pollution, climate change and invasive species are stressing and destabilising all natural ' +
+        'systems in Europe. The result is a biodiversity crisis. The EU is taking steps to protect and restore nature.',
+      'Climate change affects us all and is accelerating. Its impacts will become even more severe if ' +
+        'the increase in global temperature is not kept below 1.5°C. The EU and its Member States are ' +
+        'taking important steps to rapidly reduce greenhouse gas emissions and adapt to climate change.',
       'EU environment and climate policies have delivered substantial benefits over recent ' +
-      'decades, such as cleaner air and water. Nevertheless, Europe, as well as the rest ' +
-      'of the globe, is facing environmental challenges of unprecedented scale and urgency.',
+        'decades, such as cleaner air and water. Nevertheless, Europe, as well as the rest ' +
+        'of the globe, is facing environmental challenges of unprecedented scale and urgency.',
+    ],
+    metaRight: [
+      '20/05/2023',
+      '30/04/2023',
+      '10/04/2023',
+      '02/04/2023',
+      '16/03/2023',
+    ],
+    eventDate: [
+      '20/05/2023',
+      '30/04/2023',
+      '10/04/2023',
+      '02/04/2023',
+      '16/03/2023',
+    ],
+    tags: [
+      { category: 'tag 1', href: '#' },
+      { category: 'tag 2', href: '#' },
+      { category: 'bigger tag', href: '#' },
+      { category: 'tag 3', href: '#' },
+      { category: 'tag 4', href: '#' },
+    ],
+  },
+};
+
+// Fill the cardModel array that stories use
+let cardModels = [];
+let tempCardContent = {};
+for (var i = 0; i <= cardData.cardContent.title.length; i++) {
+  tempCardContent = {
+    title: cardData.cardContent.title[i],
+    imgUrl: cardData.cardContent.imgUrl[i],
+    description: cardData.cardContent.description[i],
     meta: 'Article',
-    metaRight: '16/03/2022',
+    metaRight: cardData.cardContent.metaRight[i],
+    eventDate: cardData.cardContent.eventDate[i],
     href: '/#',
-  },
-];
+    tags: [],
+  };
+
+  // Fill cards with random amount of tags
+  for (var j = 0; j < Math.floor(Math.random() * 4 + 1); j++) {
+    tempCardContent.tags.push(cardData.cardContent.tags[j]);
+  }
+  cardModels.push(tempCardContent);
+}
 
 export default {
   title: 'Components/Card/Default',
@@ -166,6 +186,15 @@ export default {
         defaultValue: { summary: '2' },
       },
     },
+    eventDate: {
+      name: 'Event date',
+      control: { type: 'boolean' },
+      table: {
+        category: 'Content',
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
+      },
+    },
     cards: {
       name: 'Cards content',
       table: {
@@ -176,6 +205,28 @@ export default {
         defaultValue: { summary: ' "" ' },
       },
     },
+    hasTags: {
+      name: 'Tags',
+      table: {
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
+        category: 'Tags',
+      },
+    },
+    direction: {
+      name: 'Tags direction',
+      control: { type: 'select' },
+      options: ['right', 'left'],
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'left',
+        },
+        category: 'Tags',
+      },
+    },
   },
 };
 
@@ -192,6 +243,17 @@ const MetaRight = (args) => (
   <span className="bold text-right">{args.metaRight}</span>
 );
 
+const EventDate = (args) => (
+  <>
+    {args.eventDate && (
+      <span className="event-date">
+        <Icon className="ri-calendar-line" />
+        <span>{args.eventDate}</span>
+      </span>
+    )}
+  </>
+);
+
 const CardTemplate = ({
   variant,
   inverted,
@@ -201,8 +263,11 @@ const CardTemplate = ({
   objectPosition,
   titleMaxLines,
   maxLines,
+  eventDate,
   fluid,
   card,
+  hasTags,
+  direction,
 }) => (
   <Card
     fluid={fluid}
@@ -244,8 +309,24 @@ const CardTemplate = ({
         ''
       )}
 
+      {/* Event date */}
+      {eventDate && <EventDate {...card} />}
+
       {/* Description */}
       <Card.Description>{card.description}</Card.Description>
+      {hasTags && (
+        <div className="card-tags">
+          <TagList className={direction}>
+            <TagList.Content>
+              {card.tags.map((tag, index) => [
+                <Tag href={tag.href} key={index}>
+                  {tag.category}
+                </Tag>,
+              ])}
+            </TagList.Content>
+          </TagList>
+        </div>
+      )}
     </Card.Content>
 
     {/* Additional links */}
@@ -276,9 +357,12 @@ Default.args = {
   objectPosition: 'center',
   titleMaxLines: '2',
   maxLines: '2',
+  eventDate: false,
   numberOfCards: 1,
   fluid: false,
   cards: [...cardModels],
+  hasTags: false,
+  direction: 'left',
 };
 const GridTemplate = (args) => (
   <Container>
@@ -302,9 +386,12 @@ CardGrid.args = {
   objectPosition: 'center',
   titleMaxLines: '2',
   maxLines: '2',
+  eventDate: false,
   fluid: true,
   numberOfCards: 5,
   cards: [...cardModels],
+  hasTags: false,
+  direction: 'left',
 };
 
 const ImageCard = ({
@@ -350,6 +437,8 @@ ImageGrid.args = {
   fluid: true,
   cards: [...cardModels],
   numberOfCards: 5,
+  hasTags: false,
+  direction: 'left',
 };
 
 ImageGrid.argTypes = {
@@ -363,6 +452,11 @@ ImageGrid.argTypes = {
       disable: true,
     },
   },
+  eventDate: {
+    table: {
+      disable: true,
+    },
+  },
   maxLines: {
     table: {
       disable: true,
@@ -391,8 +485,11 @@ FluidGrid.args = {
   titleMaxLines: '2',
   maxLines: '2',
   numberOfCards: 3,
+  eventDate: false,
   fluid: true,
   cards: [...cardModels],
+  hasTags: false,
+  direction: 'left',
 };
 const PrevArrow = (props) => {
   const { onClick } = props;
@@ -481,6 +578,7 @@ CarouselCards.args = {
   objectPosition: 'center',
   titleMaxLines: '2',
   maxLines: '2',
+  eventDate: false,
   fluid: true,
   settings: {
     dots: true,
@@ -511,6 +609,8 @@ CarouselCards.args = {
   },
   numberOfCards: 5,
   cards: [...cardModels],
+  hasTags: false,
+  direction: 'left',
 };
 CarouselCards.argTypes = {
   settings: {
@@ -534,7 +634,10 @@ const TeaserCard = ({
   titleMaxLines,
   fluid,
   maxLines,
+  eventDate,
   card,
+  hasTags,
+  direction,
 }) => (
   <div className="column grid-block-teaser">
     <div
@@ -571,7 +674,21 @@ const TeaserCard = ({
             <div className="header">
               <a href={card.href}>{card.title}</a>
             </div>
+            {eventDate && <EventDate {...card} />}
             <Card.Description>{card.description}</Card.Description>
+            {hasTags && (
+              <div className="card-tags">
+                <TagList className={direction}>
+                  <TagList.Content>
+                    {card.tags.map((tag, index) => [
+                      <Tag href={tag.href} key={index}>
+                        {tag.category}
+                      </Tag>,
+                    ])}
+                  </TagList.Content>
+                </TagList>
+              </div>
+            )}
           </div>
         )}
       </div>
@@ -612,7 +729,10 @@ TeaserCardGrid.args = {
   objectPosition: 'center',
   titleMaxLines: '2',
   maxLines: '2',
+  eventDate: false,
   fluid: true,
   numberOfCards: 3,
   cards: [...cardModels],
+  hasTags: false,
+  direction: 'left',
 };