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

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 ? (
@@ -86,7 +148,9 @@ const CardTemplate = ({ variant, inverted, titleOnImage, card }) => (
 
       {/* Title */}
       {!titleOnImage || !card.hasImage ? (
-        <Card.Header>{card.title}</Card.Header>
+        <Card.Header>
+          <a href={card.href}>{card.title}</a>
+        </Card.Header>
       ) : (
         ''
       )}
@@ -125,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}
       />
@@ -137,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',
@@ -162,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}
           />
@@ -176,6 +255,11 @@ CardGrid.args = {
   titleOnImage: false,
   variant: 'default',
   inverted: false,
+  rounded: false,
+  objectFit: 'cover',
+  objectPosition: 'center',
+  titleMaxLines: '2',
+  maxLines: '2',
   cards: [
     {
       title: 'Nature',
@@ -221,6 +305,11 @@ ImageGrid.args = {
   titleOnImage: true,
   variant: 'default',
   inverted: false,
+  rounded: false,
+  objectFit: 'center',
+  objectPosition: 'cover',
+  titleMaxLines: '2',
+  maxLines: '2',
   cards: [
     {
       title: 'Nature',
@@ -257,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}
         />
@@ -270,6 +364,11 @@ FluidGrid.args = {
   titleOnImage: false,
   variant: 'default',
   inverted: false,
+  rounded: false,
+  objectFit: 'cover',
+  objectPosition: 'center',
+  titleMaxLines: '2',
+  maxLines: '2',
   cards: [
     {
       title: 'Nature',
@@ -347,7 +446,12 @@ function CarouselCardsContent({
   titleOnImage,
   variant,
   inverted,
+  rounded,
+  objectFit,
   settings,
+  objectPosition,
+  titleMaxLines,
+  maxLines,
   cards,
 }) {
   const slider = React.useRef(null);
@@ -359,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}
           />
@@ -380,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,
@@ -465,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" />
@@ -488,7 +622,9 @@ const TeaserCard = ({ variant, inverted, titleOnImage, card }) => (
 
         {!titleOnImage && (
           <div className="content">
-            <div className="header">{card.title}</div>
+            <div className="header">
+              <a href={card.href}>{card.title}</a>
+            </div>
             <Card.Description>{card.description}</Card.Description>
           </div>
         )}
@@ -506,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}
           />
@@ -520,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",
@@ -534,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/Comment/Comment.stories.js

@@ -45,32 +45,38 @@ function CommentEEA({ title, comments, threaded, minimal, size }) {
         <Comment key={comIndex}>
           <Comment.Avatar src={comment.src} alt="user avatar" />
           <Comment.Content>
-            <Comment.Author as="a">{comment.author}</Comment.Author>
+            <Comment.Author>{comment.author}</Comment.Author>
             <Comment.Metadata>
               <div>{comment.time}</div>
             </Comment.Metadata>
             <Comment.Text>{comment.text}</Comment.Text>
             <Comment.Actions>
-              <Comment.Action>Reply</Comment.Action>
+              <Comment.Action as="button" className="ui button text">
+                Reply
+              </Comment.Action>
             </Comment.Actions>
           </Comment.Content>
-          <Comment.Group>
-            {comment.replies.map((reply, repIndex) => (
-              <Comment key={repIndex}>
-                <Comment.Avatar src={comment.src} alt="user avatar" />
-                <Comment.Content>
-                  <Comment.Author as="a">{reply.author}</Comment.Author>
-                  <Comment.Metadata>
-                    <div>{reply.time}</div>
-                  </Comment.Metadata>
-                  <Comment.Text>{reply.text}</Comment.Text>
-                  <Comment.Actions>
-                    <Comment.Action>Reply</Comment.Action>
-                  </Comment.Actions>
-                </Comment.Content>
-              </Comment>
-            ))}
-          </Comment.Group>
+          {comment.replies.length > 0 && (
+            <Comment.Group>
+              {comment.replies.map((reply, repIndex) => (
+                <Comment key={repIndex}>
+                  <Comment.Avatar src={comment.src} alt="user avatar" />
+                  <Comment.Content>
+                    <Comment.Author>{reply.author}</Comment.Author>
+                    <Comment.Metadata>
+                      <div>{reply.time}</div>
+                    </Comment.Metadata>
+                    <Comment.Text>{reply.text}</Comment.Text>
+                    <Comment.Actions>
+                      <Comment.Action as="button" className="ui button text">
+                        Reply
+                      </Comment.Action>
+                    </Comment.Actions>
+                  </Comment.Content>
+                </Comment>
+              ))}
+            </Comment.Group>
+          )}
         </Comment>
       ))}
     </Comment.Group>

package/src/ui/ContextNavigation/ContextNavigation.stories.jsx

@@ -125,14 +125,15 @@ function Template({ ...args }) {
   return (
     <Container>
       <nav className="context-navigation">
-        <div className="context-navigation-header">
+        <div className="context-navigation-header" id="Navigation">
           {args?.header ? <a href="/#">{args?.header}</a> : 'Navigation'}
         </div>
-        <div role="list" className="ui list">
+        <div role="list" className="ui list" aria-labelledby="Navigation">
           {args.sidenavItems &&
             args.sidenavItems.map((element, index) => {
               return (
                 <div
+                  key={index}
                   role="listitem"
                   className={
                     (element.is_current ? 'active ' : '') +
@@ -142,6 +143,7 @@ function Template({ ...args }) {
                 >
                   <div className="content">
                     <a
+                      id={element['@id']}
                       title={element.title}
                       className={
                         element?.items?.length > 0
@@ -155,7 +157,12 @@ function Template({ ...args }) {
                     {element?.items?.length > 0
                       ? element.items.map((subelement, index) => {
                           return (
-                            <div className="list" role="list">
+                            <div
+                              className="list"
+                              role="list"
+                              key={index}
+                              aria-labelledby={element['@id']}
+                            >
                               <div
                                 role="listitem"
                                 className={
@@ -166,6 +173,7 @@ function Template({ ...args }) {
                               >
                                 <div className="content">
                                   <a
+                                    id={subelement['@id']}
                                     title={subelement.title}
                                     className="contenttype-document"
                                     href={subelement.url}
@@ -176,7 +184,12 @@ function Template({ ...args }) {
                                     subelement.items.map(
                                       (subparelement, index) => {
                                         return (
-                                          <div className="list" role="list">
+                                          <div
+                                            className="list"
+                                            role="list"
+                                            key={index}
+                                            aria-labelledby={subelement['@id']}
+                                          >
                                             <div
                                               role="listitem"
                                               className={
@@ -187,6 +200,7 @@ function Template({ ...args }) {
                                             >
                                               <div className="content">
                                                 <a
+                                                  id={subparelement['@id']}
                                                   title={subparelement.title}
                                                   className="contenttype-document"
                                                   href={subparelement.url}

package/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Button } from 'semantic-ui-react';
 import DownloadLabeledIcon from './DownloadLabeledIcon';
 import LabeledIconGroup from '../LabeledIconGroup/LabeledIconGroup';
 
@@ -42,12 +43,12 @@ const DefaultTemplate = (args) => (
     <DownloadLabeledIcon
       {...args}
       trigger={
-        <div>
+        <Button className="text">
           <DownloadLabeledIcon.Icon {...args}>
             {args.icon}
           </DownloadLabeledIcon.Icon>
           <DownloadLabeledIcon.Label>{args.label}</DownloadLabeledIcon.Label>
-        </div>
+        </Button>
       }
     >
       <DownloadLabeledIcon.Dropdown {...args}></DownloadLabeledIcon.Dropdown>

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>
           )}

package/src/ui/Footer/Footer.stories.js

@@ -33,29 +33,60 @@ Default.args = {
   header: 'Environmental information systems',
   description: '',
   actions: [
-    { link: '/#', title: 'Privacy' },
-    { link: '/#', title: 'Sitemap' },
-    { link: '/#', title: 'CMS Login' },
+    { link: '/privacy', title: 'Privacy' },
+    { link: '/sitemap', title: 'Sitemap' },
+    { link: 'https://www.eea.europa.eu/en/login', title: 'CMS Login' },
   ],
   copyright: [
     { link: 'https://status.eea.europa.eu/', title: 'System status' },
-    { link: '/#', title: '© Copyright 2023 EEA' },
+    {
+      link: '/copyright',
+      title: '© Copyright 2023 EEA',
+    },
   ],
   sites: [
-    { link: '/#', src: Marine, alt: 'WISE marine' },
-    { link: '/#', src: Freshwater, alt: 'WISE freshwater' },
-    { link: '/#', src: Bise, alt: 'Biodiversity' },
-    { link: '/#', src: Fise, alt: 'Forest information system for europe' },
+    { link: 'https://water.europa.eu/marine', src: Marine, alt: 'WISE marine' },
+    {
+      link: 'https://water.europa.eu/freshwater',
+      src: Freshwater,
+      alt: 'WISE freshwater',
+    },
+    { link: 'https://biodiversity.europa.eu/', src: Bise, alt: 'Biodiversity' },
     {
-      link: '/#',
+      link: 'https://forest.eea.europa.eu/',
+      src: Fise,
+      alt: 'Forest information system for europe',
+    },
+    {
+      link: 'https://climate-adapt.eea.europa.eu/observatory',
       src: ClimateHealth,
       alt: 'Information platform for chemical monitoring',
     },
-    { link: '/#', src: Cca, alt: 'Climate adapt' },
-    { link: '/#', src: Industry, alt: 'European industrial emissions portal' },
-    { link: '/#', src: Energy, alt: 'Climate and energy in the EU' },
-    { link: '/#', src: Copernicus, alt: 'Copernicus land monitoring service' },
-    { link: '/#', src: Insitu, alt: 'Copernicus in situ' },
+    {
+      link: 'https://climate-adapt.eea.europa.eu/',
+      src: Cca,
+      alt: 'Climate adapt',
+    },
+    {
+      link: 'https://industry.eea.europa.eu/',
+      src: Industry,
+      alt: 'European industrial emissions portal',
+    },
+    {
+      link: 'https://climate-energy.eea.europa.eu/',
+      src: Energy,
+      alt: 'Climate and energy in the EU',
+    },
+    {
+      link: 'https://land.copernicus.eu/',
+      src: Copernicus,
+      alt: 'Copernicus land monitoring service',
+    },
+    {
+      link: 'https://insitu.copernicus.eu/',
+      src: Insitu,
+      alt: 'Copernicus in situ',
+    },
   ],
   managedBy: [
     {
@@ -82,23 +113,43 @@ Default.args = {
     },
   ],
   social: [
-    { name: 'twitter', icon: 'ri-twitter-fill', link: '/#' },
-    { name: 'facebook', icon: 'ri-facebook-box-fill', link: '/#' },
-    { name: 'linkedin', icon: 'ri-linkedin-fill', link: '/#' },
-    { name: 'youtube', icon: 'ri-youtube-fill', link: '/#' },
-    { name: 'instagram', icon: 'ri-instagram-fill', link: '/#' },
-    { name: 'rss', icon: 'ri-rss-fill', link: '/#' },
+    {
+      name: 'twitter',
+      icon: 'ri-twitter-fill',
+      link: 'https://twitter.com/euenvironment',
+    },
+    {
+      name: 'facebook',
+      icon: 'ri-facebook-box-fill',
+      link: 'https://www.facebook.com/European.Environment.Agency',
+    },
+    {
+      name: 'linkedin',
+      icon: 'ri-linkedin-fill',
+      link: 'https://www.linkedin.com/company/european-environment-agency',
+    },
+    {
+      name: 'youtube',
+      icon: 'ri-youtube-fill',
+      link: 'https://www.youtube.com/user/EEAvideos',
+    },
+    {
+      name: 'instagram',
+      icon: 'ri-instagram-fill',
+      link: 'https://www.instagram.com/ourplanet_eu',
+    },
+    { name: 'rss', icon: 'ri-rss-fill', link: '/subscription/news-feeds' },
   ],
   contacts: [
     {
       text: 'About us',
-      link: '/#',
+      link: '/about',
       children: [
-        { text: 'FAQs', link: '/#' },
-        { text: 'Careers', link: '/#' },
+        { text: 'FAQs', link: 'http://external.site' },
+        { text: 'Careers', link: '/careers' },
       ],
     },
-    { text: 'Contact us', link: '/#' },
-    { text: 'Sign up to our newsletter', link: '/#' },
+    { text: 'Contact us', link: '/contact-us' },
+    { text: 'Sign up to our newsletter', link: '/newsletter' },
   ],
 };

package/src/ui/Form/Button/Button.stories.jsx

@@ -189,7 +189,7 @@ Labeled.argTypes = {
 export const Text = (args) => {
   return (
     <Container>
-      <Button as="p" disabled={args.disabled}>
+      <Button className="text" disabled={args.disabled}>
         {args.label}
       </Button>
     </Container>