change(cards): use card styling instead of global styles

CHANGELOG.md

@@ -4,6 +4,29 @@ 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).
 
+### [2.1.0](https://github.com/eea/volto-listing-block/compare/2.0.1...2.1.0) - 22 November 2022
+
+#### :bug: Bug Fixes
+
+- fix(listing): carousel styles needs slick-carousel css files [David Ichim - [`55a9d1c`](https://github.com/eea/volto-listing-block/commit/55a9d1c456e262db2a05d5a49961722a813a728a)]
+
+#### :nail_care: Enhancements
+
+- change(cards): Multiple improvements #38 from eea/cards-improvements [ichim-david - [`b3aff3f`](https://github.com/eea/volto-listing-block/commit/b3aff3f3fe1138385bd6ea7d4026605b3625746e)]
+- change(listing): color listing item bg color and text as cards [David Ichim - [`d9f9693`](https://github.com/eea/volto-listing-block/commit/d9f969332a298b374558bbe93567d9f3bc1c1cdd)]
+- change(listing): text align class names to better align to text utility class names [David Ichim - [`1b09619`](https://github.com/eea/volto-listing-block/commit/1b09619fb9dc54fab1453de8fa4a0f2fcc52597d)]
+- change(card): Better approach for cards title: remove min-height and add config option for nr of lines [kreafox - [`0138349`](https://github.com/eea/volto-listing-block/commit/0138349cbf9980e7b174bb8efb8f1dcc4e80cb7b)]
+- change(card): always show date div in meta section even if it's empty [David Ichim - [`f16c7af`](https://github.com/eea/volto-listing-block/commit/f16c7af75c199651f852108cb88d508a1a1d977f)]
+- change(card): Remove description styling [kreafox - [`8ef6bc9`](https://github.com/eea/volto-listing-block/commit/8ef6bc9dfc1abae6f58a0936d656ffa622f4c712)]
+- change(cards): Remove block style wrapper temporarily and unused styling [kreafox - [`5d39f05`](https://github.com/eea/volto-listing-block/commit/5d39f05c6371d072a447bd68d0163f478eec6091)]
+- change(card): Use line-camp on cards title [kreafox - [`f7a7a58`](https://github.com/eea/volto-listing-block/commit/f7a7a58ebbbf64889119f3d3b650ebf679acd1e6)]
+- change(card): Reserve space for meta section [kreafox - [`f3c581b`](https://github.com/eea/volto-listing-block/commit/f3c581bf7ebeba9caabde661f07c43a63fddaedb)]
+
+#### :hammer_and_wrench: Others
+
+- stylelint fix [David Ichim - [`dfcd960`](https://github.com/eea/volto-listing-block/commit/dfcd9609a511e21d0167f60c30c47367b1176fe0)]
+- bump package version [David Ichim - [`1e44a06`](https://github.com/eea/volto-listing-block/commit/1e44a06a207c349a1e56a16c4e055720f977c4d3)]
+- linting fixes and code cleanup [David Ichim - [`4a0d364`](https://github.com/eea/volto-listing-block/commit/4a0d3647cc65752d55804aecddd5f21ff0c465d4)]
 ### [2.0.1](https://github.com/eea/volto-listing-block/compare/2.0.0...2.0.1) - 17 November 2022
 
 #### :hammer_and_wrench: Others
@@ -84,7 +107,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - linting fixes [David Ichim - [`331ce4a`](https://github.com/eea/volto-listing-block/commit/331ce4ad8ec2b9d598ff9b15ee46ea7a53de2c06)]
-- Add Sonarqube tag using marine-frontend addons list [EEA Jenkins - [`36ef986`](https://github.com/eea/volto-listing-block/commit/36ef986f4f9809cc8881e81dfc58dc5c0f7ad543)]
 ### [0.6.7](https://github.com/eea/volto-listing-block/compare/0.6.6...0.6.7) - 28 September 2022
 
 #### :nail_care: Enhancements
@@ -155,7 +177,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix cypress by defining color also in volto-listing-block [David Ichim - [`a5a1324`](https://github.com/eea/volto-listing-block/commit/a5a1324b1b80fca264342ff24f050b212a2505b3)]
 - linting fixes [David Ichim - [`f082535`](https://github.com/eea/volto-listing-block/commit/f0825350da16338026c26622ad30911d5439d649)]
 - Add styling schema demo [Tiberiu Ichim - [`9d95279`](https://github.com/eea/volto-listing-block/commit/9d952798bb9e80da2781091bc0c582d6a0809481)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`baf4b37`](https://github.com/eea/volto-listing-block/commit/baf4b37b4418d05f81605ac97cf7b1476701a02a)]
 - Style adjusment for search item [kreafox - [`ab83a5f`](https://github.com/eea/volto-listing-block/commit/ab83a5f1adc6a2bde6740846e02bff58c7a633a9)]
 - Remove unneeded style for search item [kreafox - [`a1fde0f`](https://github.com/eea/volto-listing-block/commit/a1fde0f5291176c5136314699f61033cbb62f6ea)]
 - WIP search item [kreafox - [`c7d933c`](https://github.com/eea/volto-listing-block/commit/c7d933c2637965d7b93642c97ea8013f37cdc4cd)]
@@ -183,7 +204,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Remove useless Default theme option [Alin Voinea - [`3b7e8f8`](https://github.com/eea/volto-listing-block/commit/3b7e8f87ac88e02e3a7684088ea5f9f322c5753b)]
-- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`23b11b0`](https://github.com/eea/volto-listing-block/commit/23b11b00f2ce70fd275f4c675ba8443c2724903b)]
 ### [0.4.1](https://github.com/eea/volto-listing-block/compare/0.4.0...0.4.1) - 23 June 2022
 
 ### [0.4.0](https://github.com/eea/volto-listing-block/compare/0.3.2...0.4.0) - 10 June 2022
@@ -204,7 +224,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`3862702`](https://github.com/eea/volto-listing-block/commit/3862702466bac959f3999a10842e3cd533dc6881)]
 ### [0.3.1](https://github.com/eea/volto-listing-block/compare/0.3.0...0.3.1) - 11 April 2022
 
 #### :bug: Bug Fixes
@@ -213,14 +232,12 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`f38c11e`](https://github.com/eea/volto-listing-block/commit/f38c11e37d6376713234a47ead1d0665f03c163f)]
 ### [0.3.0](https://github.com/eea/volto-listing-block/compare/0.2.0...0.3.0) - 9 March 2022
 
 #### :hammer_and_wrench: Others
 
 - bump version [Miu Razvan - [`a1cef0d`](https://github.com/eea/volto-listing-block/commit/a1cef0d692bc49a4aa1be5988d0c9cb0d25cb299)]
 - add PreviewImage till https://github.com/plone/volto/pull/3122 is merged [Miu Razvan - [`4f8a6c2`](https://github.com/eea/volto-listing-block/commit/4f8a6c21517f29a20724f813f95b45511e557064)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`b6d612c`](https://github.com/eea/volto-listing-block/commit/b6d612cdb84b6f9f5ddc0485f7794005b2a09f3f)]
 ### [0.2.0](https://github.com/eea/volto-listing-block/compare/0.1.5...0.2.0) - 4 March 2022
 
 #### :hammer_and_wrench: Others
@@ -247,19 +264,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`28f1090`](https://github.com/eea/volto-listing-block/commit/28f10909e263378517ddde84d84c04512c3d2c0d)]
 ### [0.1.3](https://github.com/eea/volto-listing-block/compare/0.1.2...0.1.3) - 10 December 2021
 
 #### :hammer_and_wrench: Others
 
 - Refs #142010 - Optimize Volto-addons gitflow pipelines [valentinab25 - [`f8c8b64`](https://github.com/eea/volto-listing-block/commit/f8c8b642c0de6db65b7a67515164dcafae359686)]
-- Add Sonarqube tag using industry-frontend addons list [EEA Jenkins - [`7b647c2`](https://github.com/eea/volto-listing-block/commit/7b647c206c1414633ec41d864c6499986161dab1)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`d02020c`](https://github.com/eea/volto-listing-block/commit/d02020c4e9b1aa69cea1f75ef12d745e7c22004b)]
-- Add Sonarqube tag using bise-frontend addons list [EEA Jenkins - [`ad9e8cd`](https://github.com/eea/volto-listing-block/commit/ad9e8cdecb00709db7bf2ac84fd055ed2e10f95d)]
-- Add Sonarqube tag using forests-frontend addons list [EEA Jenkins - [`613e782`](https://github.com/eea/volto-listing-block/commit/613e782c438eaaea7d439299746bef1ceadb33b3)]
-- Add Sonarqube tag using sustainability-frontend addons list [EEA Jenkins - [`b60cdde`](https://github.com/eea/volto-listing-block/commit/b60cdde6b5814ccfc484b4d2af1292cfd57d981a)]
-- Add Sonarqube tag using climate-energy-frontend addons list [EEA Jenkins - [`1b6d68f`](https://github.com/eea/volto-listing-block/commit/1b6d68fd4009f4fea1602912760c746951823fc7)]
-- Add Sonarqube tag using ims-frontend addons list [EEA Jenkins - [`8e44298`](https://github.com/eea/volto-listing-block/commit/8e442980d01e393fb4fce0d3db68348627a86464)]
 ### [0.1.2](https://github.com/eea/volto-listing-block/compare/0.1.1...0.1.2) - 17 June 2021
 
 ### [0.1.1](https://github.com/eea/volto-listing-block/compare/0.1.0...0.1.1) - 10 June 2021
@@ -277,5 +286,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- yarn bootstrap [Alin Voinea - [`bac461d`](https://github.com/eea/volto-listing-block/commit/bac461d220dcb93173e48c9c21162dae084949eb)]
 - Initial commit [Alin Voinea - [`3e20e5b`](https://github.com/eea/volto-listing-block/commit/3e20e5b483e4c3b826be44f4dd549ec445280b39)]

Jenkinsfile

@@ -4,7 +4,7 @@ pipeline {
   environment {
         GIT_NAME = "volto-listing-block"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu,sustainability.eionet.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu,circularity.eea.europa.eu,prod-www.eea.europa.eu,water.europa.eu-marine"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu,sustainability.eionet.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu,circularity.eea.europa.eu,prod-www.eea.europa.eu,water.europa.eu-marine,demo-kitkat.dev2aws.eea.europa.eu"
         DEPENDENCIES = ""
         VOLTO = "alpha"
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-listing-block",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "@eeacms/volto-listing-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/blocks/Listing/index.js

@@ -1,12 +1,12 @@
-import { addStyling } from '@plone/volto/helpers';
+// import { addStyling } from '@plone/volto/helpers';
 import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
 import { composeSchema } from '@eeacms/volto-listing-block/schema-utils';
 
 import Carousel from './layout-templates/Carousel';
 import Gallery from './layout-templates/Gallery';
 import Listing from './layout-templates/Listing';
 import {
-  setBasicStylingSchema,
+  // setBasicStylingSchema,
   setCardStylingSchema,
   setCardModelSchema,
   setItemModelSchema,
@@ -52,8 +52,8 @@ const applyConfig = (config) => {
       title: 'Listing',
       template: Listing,
       schemaEnhancer: composeSchema(
-        addStyling,
-        setBasicStylingSchema,
+        // addStyling,
+        // setBasicStylingSchema,
         UniversalCard.schemaEnhancer,
       ),
     },
@@ -63,8 +63,8 @@ const applyConfig = (config) => {
       title: 'Carousel',
       template: Carousel,
       schemaEnhancer: composeSchema(
-        addStyling,
-        setBasicStylingSchema,
+        // addStyling,
+        // setBasicStylingSchema,
         UniversalCard.schemaEnhancer,
         Carousel.schemaEnhancer,
       ),
@@ -75,8 +75,8 @@ const applyConfig = (config) => {
       title: 'Gallery',
       template: Gallery,
       schemaEnhancer: composeSchema(
-        addStyling,
-        setBasicStylingSchema,
+        // addStyling,
+        // setBasicStylingSchema,
         UniversalCard.schemaEnhancer,
         Gallery.schemaEnhancer,
       ),

src/blocks/Listing/item-templates/CardTemplates.jsx

@@ -16,6 +16,9 @@ const getStyles = (props) => {
   if (itemModel.maxDescription) {
     res[`max-${itemModel.maxDescription}-lines`] = true;
   }
+  if (itemModel.maxTitle) {
+    res[`title-max-${itemModel.maxTitle}-lines`] = true;
+  }
   return res;
 };
 

src/blocks/Listing/item-templates/ItemTemplates.jsx

@@ -12,6 +12,9 @@ const getStyles = (props) => {
   if (itemModel.maxDescription) {
     res[`max-${itemModel.maxDescription}-lines`] = true;
   }
+  if (itemModel.maxTitle) {
+    res[`title-max-${itemModel.maxTitle}-lines`] = true;
+  }
   return res;
 };
 

src/blocks/Listing/item-templates/SearchItemTemplate.jsx

@@ -20,6 +20,9 @@ const getStyles = (props) => {
   if (itemModel.maxDescription) {
     res[`max-${itemModel.maxDescription}-lines`] = true;
   }
+  if (itemModel.maxTitle) {
+    res[`title-max-${itemModel.maxTitle}-lines`] = true;
+  }
   return res;
 };
 

src/blocks/Listing/layout-templates/Carousel.jsx

@@ -2,6 +2,9 @@ import React from 'react';
 import { Button, Icon } from 'semantic-ui-react';
 import loadable from '@loadable/component';
 
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
 import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
 import ResponsiveContainer from '@eeacms/volto-listing-block/components/ResponsiveContainer';
 

src/blocks/Listing/schema.js

@@ -4,47 +4,47 @@ import alignLeftSVG from '@plone/volto/icons/align-left.svg';
 import alignCenterSVG from '@plone/volto/icons/align-center.svg';
 
 const ALIGN_INFO_MAP = {
-  align_left: [alignLeftSVG, 'Left'],
-  align_center: [alignCenterSVG, 'Center'],
+  left: [alignLeftSVG, 'Left'],
+  center: [alignCenterSVG, 'Center'],
 };
 
-export const setBasicStylingSchema = (args) => {
-  const { schema, intl } = args;
-  schema.properties.styles.schema = {
-    fieldsets: [
-      {
-        id: 'styling',
-        title: 'Styling',
-        fields: ['theme', 'inverted', 'rounded'],
-      },
-    ],
-    properties: {
-      theme: {
-        title: intl.formatMessage(messages.Theme),
-        description: intl.formatMessage(messages.ThemeHelp),
-        choices: [
-          ['', intl.formatMessage(messages.ThemeDefault)],
-          ['primary', intl.formatMessage(messages.ThemePrimary)],
-          ['secondary', intl.formatMessage(messages.ThemeSecondary)],
-          ['tertiary', intl.formatMessage(messages.ThemeTertiary)],
-        ],
-      },
-      inverted: {
-        title: intl.formatMessage(messages.Inverted),
-        description: intl.formatMessage(messages.InvertedHelp),
-        type: 'boolean',
-      },
-      rounded: {
-        title: intl.formatMessage(messages.Rounded),
-        description: intl.formatMessage(messages.RoundedHelp),
-        type: 'boolean',
-      },
-    },
-    required: [],
-  };
+// export const setBasicStylingSchema = (args) => {
+//   const { schema, intl } = args;
+//   schema.properties.styles.schema = {
+//     fieldsets: [
+//       {
+//         id: 'styling',
+//         title: 'Styling',
+//         fields: ['theme', 'inverted', 'rounded'],
+//       },
+//     ],
+//     properties: {
+//       theme: {
+//         title: intl.formatMessage(messages.Theme),
+//         description: intl.formatMessage(messages.ThemeHelp),
+//         choices: [
+//           ['', intl.formatMessage(messages.ThemeDefault)],
+//           ['primary', intl.formatMessage(messages.ThemePrimary)],
+//           ['secondary', intl.formatMessage(messages.ThemeSecondary)],
+//           ['tertiary', intl.formatMessage(messages.ThemeTertiary)],
+//         ],
+//       },
+//       inverted: {
+//         title: intl.formatMessage(messages.Inverted),
+//         description: intl.formatMessage(messages.InvertedHelp),
+//         type: 'boolean',
+//       },
+//       rounded: {
+//         title: intl.formatMessage(messages.Rounded),
+//         description: intl.formatMessage(messages.RoundedHelp),
+//         type: 'boolean',
+//       },
+//     },
+//     required: [],
+//   };
 
-  return schema;
-};
+//   return schema;
+// };
 
 const CallToActionSchema = ({ formData }) => {
   return {
@@ -98,6 +98,7 @@ export const setCardModelSchema = (args) => {
   const itemModelSchema = schema.properties.itemModel.schema;
   itemModelSchema.fieldsets[0].fields = [
     ...itemModelSchema.fieldsets[0].fields,
+    'maxTitle',
     'hasDate',
     'hasDescription',
     ...(formData?.itemModel?.hasDescription ? ['maxDescription'] : []),
@@ -116,6 +117,15 @@ export const setCardModelSchema = (args) => {
       title: 'Description',
       type: 'boolean',
     },
+    maxTitle: {
+      title: 'Title max lines',
+      description:
+        "Limit title to a maximum number of lines by adding trailing '...'",
+      type: 'number',
+      default: 2,
+      minimum: 0,
+      maximum: 5,
+    },
     maxDescription: {
       title: 'Description max lines',
       description:
@@ -153,6 +163,7 @@ export const setItemModelSchema = (args) => {
 
   itemModelSchema.fieldsets[0].fields = [
     ...itemModelSchema.fieldsets[0].fields,
+    'maxTitle',
     'hasDate',
     'hasDescription',
     'maxDescription',
@@ -175,6 +186,15 @@ export const setItemModelSchema = (args) => {
       type: 'boolean',
       default: true,
     },
+    maxTitle: {
+      title: 'Title max lines',
+      description:
+        "Limit title to a maximum number of lines by adding trailing '...'",
+      type: 'number',
+      default: 2,
+      minimum: 0,
+      maximum: 5,
+    },
     maxDescription: {
       title: 'Description max lines',
       description:
@@ -214,7 +234,7 @@ export const setCardStylingSchema = ({ schema, intl }) => {
   const itemModelSchema = schema.properties.itemModel;
   const styleSchema = itemModelSchema.schema.properties.styles.schema;
   const fieldset = styleSchema.fieldsets.find(({ id }) => id === 'default');
-  fieldset.fields.push('theme', 'inverted', 'rounded', 'text_align');
+  fieldset.fields.push('theme', 'inverted', 'rounded', 'text');
   styleSchema.properties = {
     ...styleSchema.properties,
     theme: {
@@ -237,7 +257,7 @@ export const setCardStylingSchema = ({ schema, intl }) => {
       description: intl.formatMessage(messages.RoundedHelp),
       type: 'boolean',
     },
-    text_align: {
+    text: {
       title: 'Text align',
       widget: 'style_text_align',
       actions: Object.keys(ALIGN_INFO_MAP),

src/blocks/Teaser/index.js

@@ -1,17 +1,17 @@
 import { composeSchema } from '@eeacms/volto-listing-block/schema-utils';
-import { addStyling } from '@plone/volto/helpers';
+// import { addStyling } from '@plone/volto/helpers';
 
 import TeaserCardTemplate from './Card';
 import { adjustTeaserSchema } from './schema';
 import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
-import { setBasicStylingSchema } from '../Listing/schema';
+// import { setBasicStylingSchema } from '../Listing/schema';
 
 export default (config) => {
   if (config.blocks.blocksConfig.teaser) {
     config.blocks.blocksConfig.teaser.schemaEnhancer = composeSchema(
       config.blocks.blocksConfig.teaser.schemaEnhancer,
-      addStyling,
-      setBasicStylingSchema,
+      // addStyling,
+      // setBasicStylingSchema,
     );
 
     config.blocks.blocksConfig.teaser.variations = [