@eeacms/volto-eea-design-system 1.0.7 → 1.11.0

package/CHANGELOG.md

@@ -4,6 +4,65 @@ 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.11.0](https://github.com/eea/volto-eea-design-system/compare/1.0.7...1.11.0) - 11 May 2023
+
+#### :boom: Breaking Change
+
+- breaking(table): cell text align is again inherited instead of center [David Ichim - [`46602c5`](https://github.com/eea/volto-eea-design-system/commit/46602c59bfebd0eae8ede2dcc345efdc635e35f6)]
+
+#### :rocket: New Features
+
+- feat(docusaurus):  Add Video block to docusaurus #343 from eea/feature-video-block [ichim-david - [`f692fd4`](https://github.com/eea/volto-eea-design-system/commit/f692fd42a8c0171db3e86a95c504b7a6f8b89b30)]
+- feat(cards): added image position and title and description max lines also to storybook #335 from eea/rounded-card-control [ichim-david - [`9cba23b`](https://github.com/eea/volto-eea-design-system/commit/9cba23bef8d74cdd5cf3505b9a9f3d51b68eedcf)]
+- feat(accordion): Add control to change the heading tag of the title within storybook #337 from eea/accordion-refactor [ichim-david - [`3bf19bd`](https://github.com/eea/volto-eea-design-system/commit/3bf19bdc4053d9e5b8c69226d55b358632d82c5e)]
+- feat(cards): add teaser card image alignment styles refs #250422 #338 from eea/teaser-image-alignment [ichim-david - [`1e5677c`](https://github.com/eea/volto-eea-design-system/commit/1e5677c8d40aeb5013097219d45954b869974e90)]
+- feat(storybook):  Add Video block to storybook based on existing Volto EEA add-on #331 from eea/feature-video-block [ichim-david - [`1b539c8`](https://github.com/eea/volto-eea-design-system/commit/1b539c8ccfab459fa7682cca7f75dd6aaaabca24)]
+- feat(teaser): add object-fit and object-position classnames [nileshgulia1 - [`68c9567`](https://github.com/eea/volto-eea-design-system/commit/68c9567179e4e67136a9fd53758d1f6fb43f005c)]
+- feat(video) initial component work in progress [Antonis Tarantilis - [`1c99c91`](https://github.com/eea/volto-eea-design-system/commit/1c99c914161827528bc3a6bf9f8c13bef4ba5817)]
+- feat(video): add video block story [Antonis Tarantilis - [`e1addf5`](https://github.com/eea/volto-eea-design-system/commit/e1addf5df1219af4d6663310342ffb8587404e12)]
+
+#### :bug: Bug Fixes
+
+- fix(listing): link size for image block by setting display to block [David Ichim - [`5afa665`](https://github.com/eea/volto-eea-design-system/commit/5afa6651ce35aaef0b09da71f13dd90b90ac5052)]
+- fix(footer): Check contact url if is internal #250343 #342 from eea/footer_url_internal_check [ichim-david - [`d753c21`](https://github.com/eea/volto-eea-design-system/commit/d753c2150ec211ec5f4838afc6dd53f89c8a3b7b)]
+- fix: fill links in Storybook #250343 [andreiggr - [`e09995b`](https://github.com/eea/volto-eea-design-system/commit/e09995b1488176017d4e9c04ee89b84a8145d0c4)]
+- fix(card): overrides file missing { and cleaned duplicated css code [David Ichim - [`0979032`](https://github.com/eea/volto-eea-design-system/commit/0979032827318d3af186e05d23bf781094d8e82f)]
+- fix(cards): title from next line becoming visible with large titles [David Ichim - [`c196f1a`](https://github.com/eea/volto-eea-design-system/commit/c196f1a35ee06a0bec1d7b2e33d02f0744fe57fd)]
+- fix(cards): use css variables [nileshgulia1 - [`71abd31`](https://github.com/eea/volto-eea-design-system/commit/71abd31ece6c24d85d32698fea448a9493475452)]
+- fix(video): fix lint track error [Antonis Tarantilis - [`6249f9e`](https://github.com/eea/volto-eea-design-system/commit/6249f9e93b21c15883974ccbfa980749e342e4ab)]
+- fix(video): fix tracks after the file loader module update [Antonis Tarantilis - [`a3a3614`](https://github.com/eea/volto-eea-design-system/commit/a3a3614e19ce25e65d8f51e70c47d6c634a15a0e)]
+
+#### :nail_care: Enhancements
+
+- change(cards, utilities): modified name of object fit and position classes to have hyphens [David Ichim - [`5fb39ab`](https://github.com/eea/volto-eea-design-system/commit/5fb39ab2601d36b92cf896a7de66025ba56928a6)]
+- change(search): added possibility to configure button url in search popup  #345 from eea/searchpopup_update [ichim-david - [`112e97e`](https://github.com/eea/volto-eea-design-system/commit/112e97e2139cd5bed5be23cd1bcc80065ae2ce09)]
+- refactor(card): restore designs & add max lines controls [Antonis Tarantilis - [`e7d6e39`](https://github.com/eea/volto-eea-design-system/commit/e7d6e395dfc4110a361d27cd25af4a950a283aa4)]
+- refactor(card): delete rounded card code and stories [Antonis Tarantilis - [`5177697`](https://github.com/eea/volto-eea-design-system/commit/5177697eac60b9876160b5f2741f0389e4bf8196)]
+- refactor(card): add image controls [Antonis Tarantilis - [`5c1c0b8`](https://github.com/eea/volto-eea-design-system/commit/5c1c0b8081fdc5f944fcf495e17379a9526e25d0)]
+- change(cards): set object fit and position on any ui images [David Ichim - [`1185305`](https://github.com/eea/volto-eea-design-system/commit/118530573145055ddb11e717ce2ba80270586c66)]
+- refactor(accordion): update structure [Antonis Tarantilis - [`fc9847f`](https://github.com/eea/volto-eea-design-system/commit/fc9847fdc11576a73770caee0f141992652bb001)]
+- refactor(card): add rounded control for cards [Antonis Tarantilis - [`df2e6a0`](https://github.com/eea/volto-eea-design-system/commit/df2e6a0bea91ee87a522a0c0eb3ea16d2eb61f0a)]
+
+#### :house: Documentation changes
+
+- docs(video): docusaurus page for video component [Dora Anastasiou - [`6e5b51e`](https://github.com/eea/volto-eea-design-system/commit/6e5b51e8fed58c4abc37b6d4a86a89256c9422a2)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.11.0 [alin - [`acc76ea`](https://github.com/eea/volto-eea-design-system/commit/acc76ea7b81e31a8d83179cb0af48482a8f84709)]
+- bump package version [David Ichim - [`3dfa3f0`](https://github.com/eea/volto-eea-design-system/commit/3dfa3f088a4c012ac1bb36f3ef08fac9079f3f81)]
+- added possibility to configure button url [Zoltan Szabo - [`91cd277`](https://github.com/eea/volto-eea-design-system/commit/91cd27764f646429f168c09361b370632e900c80)]
+- Update Footer.stories.js [ichim-david - [`4001536`](https://github.com/eea/volto-eea-design-system/commit/400153652a87b141c5f081fa443127f40d8b2d61)]
+- no need for title in link [andreiggr - [`b01c361`](https://github.com/eea/volto-eea-design-system/commit/b01c361c7e346d485214d69f33a7fc22180f5b5c)]
+- Check contact url if is internal [andreiggr - [`5996d4e`](https://github.com/eea/volto-eea-design-system/commit/5996d4efc26aa00f2644f658252d6b817f06c177)]
+- (feat): Make menu aware of pathname #151573 #336 from eea/ionut-menu [ichim-david - [`d4a2a96`](https://github.com/eea/volto-eea-design-system/commit/d4a2a96807bf9ea11ffaf08f2abeaa629c3dc876)]
+- remove default acitve index [Dobricean Ioan Dorian - [`57235c6`](https://github.com/eea/volto-eea-design-system/commit/57235c6ad03730c23fe97f01c20a0a955cdcb732)]
+- add default active index back [Dobricean Ioan Dorian - [`5020467`](https://github.com/eea/volto-eea-design-system/commit/5020467ed33612804626cf51dd5f2140d914757c)]
+- remove console [Dobricean Ioan Dorian - [`7320e3a`](https://github.com/eea/volto-eea-design-system/commit/7320e3a3e2c1c8190480570edec3a57180c4eb4f)]
+- ismultilingual [Dobricean Ioan Dorian - [`367c07c`](https://github.com/eea/volto-eea-design-system/commit/367c07c500cb8db3fb5941513ecba5eb357bc6af)]
+- activeIndex [Dobricean Ioan Dorian - [`ba9d4b3`](https://github.com/eea/volto-eea-design-system/commit/ba9d4b3b1bf0ace3adc2b4dd55c09c509293138f)]
+- Back to dev [Alin Voinea - [`98d0031`](https://github.com/eea/volto-eea-design-system/commit/98d00316740230cc3b4b95e031e0c1987effde76)]
+- removed babel override, loader change should be done in storybook config [David Ichim - [`d63233e`](https://github.com/eea/volto-eea-design-system/commit/d63233ef24eb47a1f4ab68b454895886a0728fc7)]
 ### [1.0.7](https://github.com/eea/volto-eea-design-system/compare/1.0.6...1.0.7) - 10 April 2023
 
 #### :rocket: New Features
@@ -161,7 +220,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fixed accordion selector typo [David Ichim - [`f4cabc8`](https://github.com/eea/volto-eea-design-system/commit/f4cabc8f2222cf587af9e04b0ea196799b84202f)]
 ### [1.0.1](https://github.com/eea/volto-eea-design-system/compare/1.0.0...1.0.1) - 13 March 2023
 
-### [1.0.0](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.6...1.0.0) - 13 March 2023
+## [1.0.0](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.6...1.0.0) - 13 March 2023
 
 #### :bug: Bug Fixes
 

package/package.json

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

package/src/semantic.less

@@ -249,10 +249,6 @@
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/tagList';
 }
 
-& {
-  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/avatarGrid';
-}
-
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/keyContent';
 }

package/src/ui/Accordion/Accordion.stories.js

@@ -15,85 +15,28 @@ export default {
       defaultValue: 'primary',
       options: ['default', 'primary', 'secondary', 'tertiary'],
       control: { type: 'select' },
-      description: 'call to action variation',
       table: {
         defaultValue: { summary: 'primary' },
         type: { summary: 'string' },
       },
     },
-    toggle1: {
-      description: 'Text of the accordion toggler',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: {
-          summary: '""',
-        },
-      },
-    },
-    toggle2: {
-      description: 'Text of the accordion toggler',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: {
-          summary: '""',
-        },
-      },
-    },
-    toggle3: {
-      description: 'Text of the accordion toggler',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: {
-          summary: '""',
-        },
-      },
-    },
-    content1: {
-      description: 'Text of the hidden content',
-      table: {
-        type: {
-          summary: 'array',
-        },
-        defaultValue: {
-          summary: '""',
-        },
-      },
-    },
-    content2: {
-      description: 'Text of the hidden content',
-      table: {
-        type: {
-          summary: 'array',
-        },
-        defaultValue: {
-          summary: '""',
-        },
-      },
-    },
-    content3: {
-      description: 'Text of the hidden content',
+    title_size: {
+      name: 'Title size',
+      defaultValue: 'primary',
+      options: ['no value', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      control: { type: 'select' },
       table: {
-        type: {
-          summary: 'array',
-        },
-        defaultValue: {
-          summary: '""',
-        },
+        defaultValue: { summary: 'primary' },
+        type: { summary: 'string' },
       },
     },
   },
 };
 
 function AccordionContainer({ ...args }) {
-  const [activeIndex, setActiveIndex] = useState();
+  const [activeIndex, setActiveIndex] = useState([0]);
 
-  const toggleOpenAccordion = (e, titleProps) => {
+  const handleClick = (e, titleProps) => {
     const { index } = titleProps;
     const newIndex = activeIndex === index ? -1 : index;
 
@@ -102,70 +45,56 @@ function AccordionContainer({ ...args }) {
 
   return (
     <Container>
-      <Accordion className={args.variant}>
-        <Accordion.Title
-          active={activeIndex === 0}
-          index={0}
-          onClick={toggleOpenAccordion}
-          as="button"
-        >
-          {args.toggle1}
-          <Icon className="ri-arrow-down-s-line" />
-        </Accordion.Title>
-        <Accordion.Content active={activeIndex === 0}>
-          {args.content1.length > 0 &&
-            args.content1.map((item, index) => <p key={index}>{item}</p>)}
-          <a href="/#">Read more</a>
-        </Accordion.Content>
-
-        <Accordion.Title
-          active={activeIndex === 1}
-          index={1}
-          onClick={toggleOpenAccordion}
-          as="button"
-        >
-          {args.toggle2}
-          <Icon className="ri-arrow-down-s-line" />
-        </Accordion.Title>
-        <Accordion.Content active={activeIndex === 1}>
-          {args.content2.length > 0 &&
-            args.content2.map((item, index) => <p key={index}>{item}</p>)}
-        </Accordion.Content>
-
-        <Accordion.Title
-          active={activeIndex === 2}
-          index={2}
-          onClick={toggleOpenAccordion}
-          as="button"
-        >
-          {args.toggle3}
-          <Icon className="ri-arrow-down-s-line" />
-        </Accordion.Title>
-        <Accordion.Content active={activeIndex === 2}>
-          {args.content3.length > 0 &&
-            args.content3.map((item, index) => <p key={index}>{item}</p>)}
-        </Accordion.Content>
-      </Accordion>
+      <div className="accordion-block">
+        {args.panels.map((panel, index) => {
+          return (
+            <Accordion className={args.variant} key={index}>
+              <Accordion.Title
+                index={index}
+                tabIndex={0}
+                active={activeIndex === index}
+                onClick={handleClick}
+                as={args.title_size === 'no value' ? '' : args.title_size}
+                onKeyDown={(e) => {
+                  if (e.nativeEvent.keyCode === 13) {
+                    handleClick(e, { index });
+                  }
+                }}
+              >
+                <span>{panel.title}</span>
+                <Icon className="ri-arrow-down-s-line" />
+              </Accordion.Title>
+              <Accordion.Content active={activeIndex === index}>
+                {panel.content}
+              </Accordion.Content>
+            </Accordion>
+          );
+        })}
+      </div>
     </Container>
   );
 }
 
 const Template = (args) => <AccordionContainer {...args}></AccordionContainer>;
-
 export const Default = Template.bind({});
 Default.args = {
   variant: 'secondary',
-  toggle1: 'Water and marine environment',
-  toggle2: 'Resource efficiency and waste',
-  toggle3: 'Air pollution',
-  content1: [
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
-  ],
-  content2: [
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
-  ],
-  content3: [
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
+  title_size: 'no value',
+  panels: [
+    {
+      title: 'Water and marine environment',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
+    },
+    {
+      title: 'Resource efficiency and waste',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
+    },
+    {
+      title: 'Air pollution',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
+    },
   ],
 };

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

@@ -43,23 +43,85 @@ export default {
         type: { summary: 'boolean' },
       },
     },
+    rounded: {
+      table: {
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
+      },
+    },
+    objectFit: {
+      name: 'Image fit',
+      options: ['unset', 'cover', 'contain', 'fill', 'scale-down'],
+      control: { type: 'select' },
+      table: {
+        category: 'Image',
+        defaultValue: { summary: 'cover' },
+      },
+    },
+    objectPosition: {
+      name: 'Image position',
+      options: ['none', 'center', 'top', 'bottom', 'left', 'right'],
+      control: { type: 'select' },
+      table: {
+        category: 'Image',
+        defaultValue: { summary: 'center' },
+      },
+    },
+    titleMaxLines: {
+      name: 'Title max lines',
+      options: ['none', '1', '2', '3', '4', '5'],
+      control: { type: 'select' },
+      table: {
+        category: 'Content',
+        defaultValue: { summary: '2' },
+      },
+    },
+    maxLines: {
+      name: 'Content max lines',
+      options: ['none', '1', '2', '3', '4', '5'],
+      control: { type: 'select' },
+      table: {
+        category: 'Content',
+        defaultValue: { summary: '2' },
+      },
+    },
     cards: {
+      name: 'Cards content',
       table: {
         type: {
           summary: 'Object',
         },
+        category: 'Content',
         defaultValue: { summary: ' "" ' },
       },
     },
   },
 };
 
-const CardTemplate = ({ variant, inverted, titleOnImage, card }) => (
+const CardTemplate = ({
+  variant,
+  inverted,
+  titleOnImage,
+  rounded,
+  objectFit,
+  objectPosition,
+  titleMaxLines,
+  maxLines,
+  card,
+}) => (
   <Card
     fluid={card.fluid}
-    className={`${variant === 'default' ? '' : variant} ${
+    className={`u-card ${variant === 'default' ? '' : variant} ${
       inverted ? 'inverted' : ''
-    }`}
+    } ${variant} ${rounded ? 'rounded' : ''} ${
+      objectFit === 'unset' ? '' : 'has--object-fit--' + objectFit
+    } ${
+      objectPosition === 'none' ? '' : 'has--object-position--' + objectPosition
+    } ${
+      titleMaxLines === 'none'
+        ? 'title-max-0-lines'
+        : 'title-max-' + titleMaxLines + '-lines'
+    } ${maxLines === 'none' ? 'max-0-lines' : 'max-' + maxLines + '-lines'}`}
   >
     {/* Card Image */}
     {card.hasImage ? (
@@ -127,6 +189,11 @@ const Template = (args) => (
         variant={args.variant}
         titleOnImage={args.titleOnImage}
         inverted={args.inverted}
+        rounded={args.rounded}
+        objectFit={args.objectFit}
+        objectPosition={args.objectPosition}
+        titleMaxLines={args.titleMaxLines}
+        maxLines={args.maxLines}
         card={card}
         key={index}
       />
@@ -139,6 +206,11 @@ Default.args = {
   titleOnImage: false,
   variant: 'default',
   inverted: false,
+  rounded: false,
+  objectFit: 'cover',
+  objectPosition: 'center',
+  titleMaxLines: '2',
+  maxLines: '2',
   cards: [
     {
       title: 'Economy and resources',
@@ -164,6 +236,11 @@ const GridTemplate = (args) => (
             variant={args.variant}
             titleOnImage={args.titleOnImage}
             inverted={args.inverted}
+            rounded={args.rounded}
+            objectFit={args.objectFit}
+            objectPosition={args.objectPosition}
+            titleMaxLines={args.titleMaxLines}
+            maxLines={args.maxLines}
             card={card}
             key={index}
           />
@@ -178,6 +255,11 @@ CardGrid.args = {
   titleOnImage: false,
   variant: 'default',
   inverted: false,
+  rounded: false,
+  objectFit: 'cover',
+  objectPosition: 'center',
+  titleMaxLines: '2',
+  maxLines: '2',
   cards: [
     {
       title: 'Nature',
@@ -223,6 +305,11 @@ ImageGrid.args = {
   titleOnImage: true,
   variant: 'default',
   inverted: false,
+  rounded: false,
+  objectFit: 'center',
+  objectPosition: 'cover',
+  titleMaxLines: '2',
+  maxLines: '2',
   cards: [
     {
       title: 'Nature',
@@ -259,6 +346,11 @@ const FluidGridTemplate = (args) => (
           variant={args.variant}
           titleOnImage={args.titleOnImage}
           inverted={args.inverted}
+          rounded={args.rounded}
+          objectFit={args.objectFit}
+          objectPosition={args.objectPosition}
+          titleMaxLines={args.titleMaxLines}
+          maxLines={args.maxLines}
           card={card}
           key={index}
         />
@@ -272,6 +364,11 @@ FluidGrid.args = {
   titleOnImage: false,
   variant: 'default',
   inverted: false,
+  rounded: false,
+  objectFit: 'cover',
+  objectPosition: 'center',
+  titleMaxLines: '2',
+  maxLines: '2',
   cards: [
     {
       title: 'Nature',
@@ -349,7 +446,12 @@ function CarouselCardsContent({
   titleOnImage,
   variant,
   inverted,
+  rounded,
+  objectFit,
   settings,
+  objectPosition,
+  titleMaxLines,
+  maxLines,
   cards,
 }) {
   const slider = React.useRef(null);
@@ -361,6 +463,11 @@ function CarouselCardsContent({
             variant={variant}
             titleOnImage={titleOnImage}
             inverted={inverted}
+            rounded={rounded}
+            objectFit={objectFit}
+            objectPosition={objectPosition}
+            titleMaxLines={titleMaxLines}
+            maxLines={maxLines}
             card={card}
             key={index}
           />
@@ -382,6 +489,11 @@ CarouselCards.args = {
   titleOnImage: false,
   variant: 'default',
   inverted: false,
+  rounded: false,
+  objectFit: 'cover',
+  objectPosition: 'center',
+  titleMaxLines: '2',
+  maxLines: '2',
   settings: {
     dots: true,
     infinite: true,
@@ -467,17 +579,37 @@ CarouselCards.argTypes = {
   },
 };
 
-const TeaserCard = ({ variant, inverted, titleOnImage, card }) => (
+const TeaserCard = ({
+  variant,
+  titleOnImage,
+  inverted,
+  rounded,
+  objectFit,
+  objectPosition,
+  titleMaxLines,
+  maxLines,
+  card,
+}) => (
   <div className="column grid-block-teaser">
     <div
-      className={`styled-teaser styled ${
-        variant === 'default' ? '' : variant
-      } ${inverted ? 'inverted' : ''}`}
+      className={`styled-teaser styled ${variant === 'default' ? '' : variant}`}
     >
       <div
-        className={`ui card u-card max-3-lines title-max-3-lines ${
-          card.fluid ? 'fluid' : ''
-        } ${variant}`}
+        className={`ui card u-card ${card.fluid ? 'fluid' : ''} ${
+          inverted ? 'inverted' : ''
+        } ${variant} ${rounded ? 'rounded' : ''} ${
+          objectFit === 'unset' ? '' : 'has--object-fit--' + objectFit
+        } ${
+          objectPosition === 'none'
+            ? ''
+            : 'has--object-position--' + objectPosition
+        } ${
+          titleMaxLines === 'none'
+            ? 'title-max-0-lines'
+            : 'title-max-' + titleMaxLines + '-lines'
+        } ${
+          maxLines === 'none' ? 'max-0-lines' : 'max-' + maxLines + '-lines'
+        }`}
       >
         <a className="image" href={card.href}>
           <img src={card.imgUrl} alt={card.title} className="ui image" />
@@ -510,6 +642,11 @@ const TeaserTemplate = (args) => (
             variant={args.variant}
             titleOnImage={args.titleOnImage}
             inverted={args.inverted}
+            rounded={args.rounded}
+            objectFit={args.objectFit}
+            objectPosition={args.objectPosition}
+            titleMaxLines={args.titleMaxLines}
+            maxLines={args.maxLines}
             card={card}
             key={index}
           />
@@ -524,6 +661,11 @@ TeaserCardGrid.args = {
   titleOnImage: false,
   variant: 'default',
   inverted: false,
+  rounded: false,
+  objectFit: 'cover',
+  objectPosition: 'center',
+  titleMaxLines: '2',
+  maxLines: '2',
   cards: [
     {
       title: "State of Europe's environment",
@@ -538,7 +680,7 @@ TeaserCardGrid.args = {
     {
       title: 'Climate',
       imgUrl:
-        'https://www.eea.europa.eu/media/pictures/european-environment-agency-building-with/image_large',
+        'https://www.eea.europa.eu/publications/eea-eionet-strategy-2021-2030/image_mini',
       hasImage: true,
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',

package/src/ui/Footer/Contact.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
+import { isInternalURL } from '@plone/volto/helpers/Url/Url';
+
 const Contact = ({ children, contacts }) =>
   children?.length ? (
     children
@@ -9,15 +11,38 @@ const Contact = ({ children, contacts }) =>
     <div className="contact-block">
       {contacts?.map((contact, index) => (
         <div className="contact" key={index}>
-          <Link to={contact.link} className="bold">
-            {contact.text}
-          </Link>
+          {isInternalURL(contact.link) ? (
+            <Link to={contact.link} className="bold">
+              {contact.text}
+            </Link>
+          ) : (
+            <a
+              href={contact.link}
+              target={'_blank'}
+              rel="noopener noreferrer"
+              className={'bold'}
+            >
+              {contact.text}
+            </a>
+          )}
           {contact.children && (
             <div className="subcontact">
               {contact.children.map((child, index) => (
-                <Link to={child.link} key={index}>
-                  {child.text}
-                </Link>
+                <>
+                  {isInternalURL(child.link) ? (
+                    <Link to={child.link} key={index}>
+                      {child.text}
+                    </Link>
+                  ) : (
+                    <a
+                      href={child.link}
+                      target={'_blank'}
+                      rel="noopener noreferrer"
+                    >
+                      {child.text}
+                    </a>
+                  )}
+                </>
               ))}
             </div>
           )}