Merge pull request #44 from eea/develop

Develop
eea · Jun 7, 2023 · f6a15b0 · f6a15b0
2 parents 47cfb6d + 1c467df
commit f6a15b0
Show file tree

Hide file tree

Showing 11 changed files with 158 additions and 90 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,11 +4,24 @@ 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.3.0](https://github.com/eea/volto-block-image-cards/compare/1.2.0...1.3.0) - 12 April 2023
+### [1.3.1](https://github.com/eea/volto-block-image-cards/compare/1.3.0...1.3.1) - 1 June 2023
 
-#### :nail_care: Enhancements
+#### :bug: Bug Fixes
+
+- fix: background color and link color for all themes [Mimi - [`7914cc0`](https://github.com/eea/volto-block-image-cards/commit/7914cc07a32eed570bfcebe16bfbcf0187c2e87e)]
+
+#### :house: Internal changes
 
-- refactor(package.json): remove "@eeacms/volto-block-style" dependency [Miu Razvan - [`91fb789`](https://github.com/eea/volto-block-image-cards/commit/91fb78902e65257255f26d12414391a65268c218)]
+
+#### :hammer_and_wrench: Others
+
+- add tertiary color [Mimi - [`1fbc4e7`](https://github.com/eea/volto-block-image-cards/commit/1fbc4e7fe18c353fe86db5ece820b6856475441b)]
+- code clean up [Mimi - [`a3a53f2`](https://github.com/eea/volto-block-image-cards/commit/a3a53f25a9852d9b2742d1aa71410e086c09032e)]
+- fix import [Miu Razvan - [`52072a2`](https://github.com/eea/volto-block-image-cards/commit/52072a2e1bb92f72c523064a9e39cdd97eb06b80)]
+- clean up [Miu Razvan - [`d140780`](https://github.com/eea/volto-block-image-cards/commit/d14078020e5965955842db64c26e396d25ac5151)]
+- update widget url [tedw87 - [`0eb54f1`](https://github.com/eea/volto-block-image-cards/commit/0eb54f15572b5f8d35084ead2d864fef763fa4f3)]
+- refactor code [tedw87 - [`e8f68df`](https://github.com/eea/volto-block-image-cards/commit/e8f68df84fc916f73370961eb04e72f1d6e62700)]
+### [1.3.0](https://github.com/eea/volto-block-image-cards/compare/1.2.0...1.3.0) - 12 April 2023
 
 #### :house: Internal changes
 

diff --git a/Jenkinsfile b/Jenkinsfile
@@ -4,7 +4,7 @@ pipeline {
   environment {
         GIT_NAME = "volto-block-image-cards"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu,climate-energy.eea.europa.eu,www.eea.europa.eu-ims,sustainability.eionet.europa.eu,forest.eea.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,water.europa.eu-marine,climate-adapt.eea.europa.eu,climate-advisory-board.devel4cph.eea.europa.eu,climate-advisory-board.europa.eu,www.eea.europa.eu-en"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu,climate-energy.eea.europa.eu,www.eea.europa.eu-ims,sustainability.eionet.europa.eu,forest.eea.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu,water.europa.eu-marine,climate-adapt.eea.europa.eu,climate-advisory-board.devel4cph.eea.europa.eu,climate-advisory-board.europa.eu,www.eea.europa.eu-en"
         DEPENDENCIES = ""
         VOLTO = ""
     }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-block-image-cards",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "volto-block-image-cards: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

diff --git a/src/ImageCards/css/cards.less b/src/ImageCards/css/cards.less
@@ -6,6 +6,32 @@
 
 .loadAddonVariables();
 
+.image-cards-wrapper > .ui.cards {
+  .card.primary {
+    background-color: @primaryColor;
+
+    .extra a:not(.ui) {
+      color: white;
+    }
+  }
+
+  .card.secondary {
+    background-color: @secondaryColor;
+
+    .extra a:not(.ui) {
+      color: white;
+    }
+  }
+
+  .card.tertiary {
+    background-color: @tertiaryColor;
+
+    .extra a:not(.ui) {
+      color: white;
+    }
+  }
+}
+
 @media only screen and (max-width: @tabletBreakpoint) {
   .ui.cards {
     &.two,

diff --git a/src/ImageCards/css/cards.variables b/src/ImageCards/css/cards.variables
@@ -0,0 +1 @@
+@tertiaryColor: #3D5265;
diff --git a/src/ImageCards/displays/Cards.jsx b/src/ImageCards/displays/Cards.jsx
@@ -4,7 +4,8 @@ import cx from 'classnames';
 import { Card, Icon, Message } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
-import { getScaleUrl, getPath } from '../utils';
+import { getFieldURL } from '@eeacms/volto-block-image-cards/helpers';
+import { getScaleUrl } from '@eeacms/volto-block-image-cards/ImageCards/utils';
 
 import '@eeacms/volto-block-image-cards/ImageCards/css/cards.less';
 
@@ -30,33 +31,37 @@ const Cards = (props) => {
     return (
       <img
         src={
-          getScaleUrl(getPath(attachedimage), image_scale || 'preview') ||
+          getScaleUrl(getFieldURL(attachedimage), image_scale || 'preview') ||
           DefaultImageSVG
         }
         alt={item.title}
       />
     );
   };
 
-  const makeTextBody = (item) => (
-    <>
-      <Card.Content>
-        <Card.Header>{item.title ? item.title : item.id}</Card.Header>
-        {item.meta && <Card.Meta>{serializeNodes(item.meta)}</Card.Meta>}
-        {item.text && (
-          <Card.Description>{serializeNodes(item.text)}</Card.Description>
-        )}
-      </Card.Content>
-      {item.link && (
-        <Card.Content extra>
-          <UniversalLink href={item.link}>
-            <Icon name="linkify" />
-            {item.linkTitle || item.link}
-          </UniversalLink>
+  const makeTextBody = (item) => {
+    const link = getFieldURL(item.link);
+
+    return (
+      <>
+        <Card.Content>
+          <Card.Header>{item.title ? item.title : item.id}</Card.Header>
+          {item.meta && <Card.Meta>{serializeNodes(item.meta)}</Card.Meta>}
+          {item.text && (
+            <Card.Description>{serializeNodes(item.text)}</Card.Description>
+          )}
         </Card.Content>
-      )}
-    </>
-  );
+        {item.link && (
+          <Card.Content extra>
+            <UniversalLink href={link}>
+              <Icon name="linkify" />
+              {item.linkTitle || link}
+            </UniversalLink>
+          </Card.Content>
+        )}
+      </>
+    );
+  };
 
   if (!cards?.length && editable) {
     return <Message>No image cards</Message>;

diff --git a/src/ImageCards/displays/Carousel.jsx b/src/ImageCards/displays/Carousel.jsx
@@ -1,12 +1,13 @@
 import React from 'react';
+import cx from 'classnames';
 import loadable from '@loadable/component';
 import { Message } from 'semantic-ui-react';
 import { Icon, UniversalLink } from '@plone/volto/components';
 import { BodyClass } from '@plone/volto/helpers';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
-import { getScaleUrl, getPath } from '../utils';
-import { CommonCarouselschemaExtender } from './../CommonAssets/schema';
-import cx from 'classnames';
+import { getFieldURL } from '@eeacms/volto-block-image-cards/helpers';
+import { getScaleUrl } from '@eeacms/volto-block-image-cards/ImageCards/utils';
+import { CommonCarouselschemaExtender } from '@eeacms/volto-block-image-cards/ImageCards/CommonAssets/schema';
 
 import leftSVG from '@plone/volto/icons/left-key.svg';
 import rightSVG from '@plone/volto/icons/right-key.svg';
@@ -100,52 +101,57 @@ const Carousel = (props) => {
       >
         <div className="slider-wrapper" style={{ height: `${height}px` }}>
           <Slider {...settings} ref={slider}>
-            {(cards || []).map((card, index) => (
-              <div className="slider-slide" key={index}>
-                <div
-                  className="slide-img"
-                  style={
-                    card.attachedimage
-                      ? {
-                          backgroundImage: `url(${getScaleUrl(
-                            getPath(card.attachedimage),
-                            image_scale || 'large',
-                          )})`,
-                          height: `${height}px`,
-                        }
-                      : {}
-                  }
-                />
-                <div className="slide-overlay"></div>
-                <div className="slider-caption ui container">
-                  <div className="slide-body">
-                    {card.link ? (
-                      <UniversalLink href={card.link}>
+            {(cards || []).map((card, index) => {
+              const link = getFieldURL(card.link);
+              const image = getFieldURL(card.attachedimage);
+
+              return (
+                <div className="slider-slide" key={index}>
+                  <div
+                    className="slide-img"
+                    style={
+                      image
+                        ? {
+                            backgroundImage: `url(${getScaleUrl(
+                              image,
+                              image_scale || 'large',
+                            )})`,
+                            height: `${height}px`,
+                          }
+                        : {}
+                    }
+                  />
+                  <div className="slide-overlay"></div>
+                  <div className="slider-caption ui container">
+                    <div className="slide-body">
+                      {card.link ? (
+                        <UniversalLink href={link}>
+                          <div className="slide-title">{card.title || ''}</div>
+                        </UniversalLink>
+                      ) : (
                         <div className="slide-title">{card.title || ''}</div>
-                      </UniversalLink>
-                    ) : (
-                      <div className="slide-title">{card.title || ''}</div>
-                    )}
-                    {/* Incomplete backward-compatibility: */}
-                    {card.text?.data ? (
-                      <div
-                        className="slide-description"
-                        dangerouslySetInnerHTML={{
-                          __html: card.text?.data || '',
-                        }}
-                      />
-                    ) : (
-                      <div className="slide-description">
-                        {serializeNodes(card.text)}
-                      </div>
-                    )}
+                      )}
+                      {/* Incomplete backward-compatibility: */}
+                      {card.text?.data ? (
+                        <div
+                          className="slide-description"
+                          dangerouslySetInnerHTML={{
+                            __html: card.text?.data || '',
+                          }}
+                        />
+                      ) : (
+                        <div className="slide-description">
+                          {serializeNodes(card.text)}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div className="slide-copyright ui container">
+                    {serializeNodes(card.copyright)}
                   </div>
                 </div>
-                <div className="slide-copyright ui container">
-                  {serializeNodes(card.copyright)}
-                </div>
-              </div>
-            ))}
+              );
+            })}
           </Slider>
           {!hideArrows && cards.length > 1 && <Arrows slider={slider} />}
         </div>

diff --git a/src/ImageCards/displays/DiscreetCarousel.jsx b/src/ImageCards/displays/DiscreetCarousel.jsx
@@ -1,19 +1,20 @@
 import React from 'react';
-import { Popup, Image, Message } from 'semantic-ui-react';
-import ResponsiveContainer from '../ResponsiveContainer';
-
 import loadable from '@loadable/component';
-import { CommonCarouselschemaExtender } from './../CommonAssets/schema';
+import { Popup, Image, Message } from 'semantic-ui-react';
+import { getFieldURL } from '@eeacms/volto-block-image-cards/helpers';
+import { getScaleUrl } from '@eeacms/volto-block-image-cards/ImageCards/utils';
+import ResponsiveContainer from '@eeacms/volto-block-image-cards/ImageCards/ResponsiveContainer';
+import { CommonCarouselschemaExtender } from '@eeacms/volto-block-image-cards/ImageCards/CommonAssets/schema';
 
 import 'slick-carousel/slick/slick.css';
-import '../css/discreetcarousel.less';
-
-import { getScaleUrl, getPath } from '../utils';
+import '@eeacms/volto-block-image-cards/ImageCards/css/discreetcarousel.less';
 
 const Slider = loadable(() => import('react-slick'));
 
 const Card = ({ card = {}, height, image_scale, mode = 'view' }) => {
-  const { link, title } = card;
+  const { title } = card;
+  const link = getFieldURL(card.link);
+  const image = getFieldURL(card.attachedimage);
 
   const LinkWrapper =
     link && mode === 'view'
@@ -33,10 +34,7 @@ const Card = ({ card = {}, height, image_scale, mode = 'view' }) => {
         <LinkWrapper>
           <Image
             className="bg-image"
-            src={getScaleUrl(
-              getPath(card.attachedimage),
-              image_scale || 'large',
-            )}
+            src={getScaleUrl(image, image_scale || 'large')}
           />
         </LinkWrapper>
       </PopupWrapper>

diff --git a/src/ImageCards/displays/RoundTiled.jsx b/src/ImageCards/displays/RoundTiled.jsx
@@ -4,11 +4,14 @@ import { LazyLoadComponent } from 'react-lazy-load-image-component';
 import { UniversalLink } from '@plone/volto/components';
 import { BodyClass } from '@plone/volto/helpers';
 import cx from 'classnames';
-import { getScaleUrl, getPath } from '../utils';
+import { getFieldURL } from '@eeacms/volto-block-image-cards/helpers';
+import { getScaleUrl } from '../utils';
 import '../css/roundtiled.less';
 
 export const Card = (props) => {
-  const { title, link, attachedimage, image_scale } = props;
+  const { title, image_scale } = props;
+  const attachedimage = getFieldURL(props.attachedimage);
+  const link = getFieldURL(props.link);
 
   return (
     <div className="card">
@@ -22,7 +25,7 @@ export const Card = (props) => {
                   attachedimage
                     ? {
                         backgroundImage: `url(${getScaleUrl(
-                          getPath(attachedimage),
+                          attachedimage,
                           image_scale || 'preview',
                         )})`,
                       }
@@ -42,7 +45,7 @@ export const Card = (props) => {
                 attachedimage
                   ? {
                       backgroundImage: `url(${getScaleUrl(
-                        getPath(attachedimage),
+                        attachedimage,
                         image_scale || 'preview',
                       )})`,
                     }

diff --git a/src/ImageCards/utils.js b/src/ImageCards/utils.js
@@ -1,9 +1,6 @@
 import config from '@plone/volto/registry';
 import { flattenToAppURL } from '@plone/volto/helpers';
 
-export const getPath = (url = '') =>
-  (url || '').startsWith('http') ? new URL(url).pathname : url;
-
 export const getScaleUrl = (url, size) =>
   (url || '').includes(config.settings.apiPath)
     ? `${flattenToAppURL(url.replace('/api', ''))}/@@images/image/${size}`

diff --git a/src/helpers.js b/src/helpers.js
@@ -0,0 +1,19 @@
+import isArray from 'lodash/isArray';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
+import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
+
+export const getFieldURL = (data) => {
+  let url = data;
+  const _isObject = data && isObject(data) && !isArray(data);
+  if (_isObject && data['@type'] === 'URL') {
+    url = data['value'] ?? data['url'] ?? data['href'] ?? data;
+  } else if (_isObject) {
+    url = data['@id'] ?? data['url'] ?? data['href'] ?? data;
+  }
+  if (isArray(data)) {
+    url = data.map((item) => getFieldURL(item));
+  }
+  if (isString(url) && isInternalURL(url)) return flattenToAppURL(url);
+  return url;
+};