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

package/CHANGELOG.md

@@ -4,10 +4,69 @@ 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.0.7](https://github.com/eea/volto-eea-design-system/compare/1.0.6...1.0.7) - 10 April 2023
+
+#### :rocket: New Features
+
+- feat(storybook): components keyboard and screen reader optimization #324 from eea/design-system-accessibility [ichim-david - [`85faff7`](https://github.com/eea/volto-eea-design-system/commit/85faff73025442a012f079b6734ef868862cc44f)]
+
+#### :bug: Bug Fixes
+
+- fix(cards): focus outline for header needed for the overflow hidden solution with max title lines [David Ichim - [`849a7a8`](https://github.com/eea/volto-eea-design-system/commit/849a7a8e3cf801bf0a4d7e9189b603ea15219fcc)]
+- fix(header): external url in header now takes you to the correct url #330 from eea/header-external-url-fix [ichim-david - [`086c61d`](https://github.com/eea/volto-eea-design-system/commit/086c61d683a7ac67dea221aa39ffe4cef05a9a68)]
+- fix(item): flex variant on edit when inside blockchooser #333 from eea/fix-item-csss [ichim-david - [`65b9099`](https://github.com/eea/volto-eea-design-system/commit/65b9099779180feeb7d10384928bb0a3224b947d)]
+- fix(item): use child selector instead of descendent as it interferes with blockchooser refs #157040 [nileshgulia1 - [`ad4ca37`](https://github.com/eea/volto-eea-design-system/commit/ad4ca3725c595c8dbeaff69f730928313c1779ec)]
+- fix: github autoformat [andreiggr - [`be97749`](https://github.com/eea/volto-eea-design-system/commit/be9774981032759b3284a6fb93490a204a817c7a)]
+- fix: dont run isInternalURL twice [Andrei Grigore - [`a48984e`](https://github.com/eea/volto-eea-design-system/commit/a48984e0cb224944aed3846447c416511d080779)]
+- fix: check if client method change [andreiggr - [`7c53b83`](https://github.com/eea/volto-eea-design-system/commit/7c53b83a54e4e7d3c5329c46de03cdf7aabedf13)]
+- fix: external url in header [andreiggr - [`9e3aea6`](https://github.com/eea/volto-eea-design-system/commit/9e3aea649ca6f9446324d5d351cdfcde08332f84)]
+- fix(tag): fix in args [Antonis Tarantilis - [`18eaaf4`](https://github.com/eea/volto-eea-design-system/commit/18eaaf41fa80a3e175341a2ddd7376b8281fee7d)]
+
+#### :nail_care: Enhancements
+
+- change(card): simplified headerLineHeightOffset used as margin top for cards header [David Ichim - [`ca61105`](https://github.com/eea/volto-eea-design-system/commit/ca61105f2f39e6880ce545ba4d54f3568e7b87e2)]
+- change(storybook): removed links for Label and Comment that we implement without a link [David Ichim - [`ee0bfdf`](https://github.com/eea/volto-eea-design-system/commit/ee0bfdf3aee3e4b6b6eba6dabd7817a37ace48ae)]
+- change(logos): updated eionet logo used in the site footer #318 from eea/footer-logo-update [ichim-david - [`70671d0`](https://github.com/eea/volto-eea-design-system/commit/70671d03bbc228e3013e382cb51e6764a83b01a8)]
+- refactor(label): add href attribute to links [Antonis Tarantilis - [`05f664d`](https://github.com/eea/volto-eea-design-system/commit/05f664dde27f1e0580ab7f32a7934e4d8e85c918)]
+- change(breadcrumbs,mega-menu): better screen readers support, see links instead of groups #309 from eea/firefox-accessibility-tab-issues [ichim-david - [`d6b0b4a`](https://github.com/eea/volto-eea-design-system/commit/d6b0b4adba8f04799491025fb41ac97e875bcce0)]
+- change(mega-menu): added code to align countries left column subtitle with the right column [David Ichim - [`1aa33dd`](https://github.com/eea/volto-eea-design-system/commit/1aa33dd7ac7154a91515eef688f276d664d5d7f3)]
+- change(mega-menu): sub-title padding tweaks for better spacing normalization [David Ichim - [`e08668d`](https://github.com/eea/volto-eea-design-system/commit/e08668dd9fd948e57628e5582e7a4a7f08d96451)]
+- change(breadcrumbs): fixed sizing of breadcrumbs list items [David Ichim - [`1761e98`](https://github.com/eea/volto-eea-design-system/commit/1761e984a6ffebbcca0c7b88128a01235fc6b903)]
+- change(inpageNavigation): story improvements [Antonis Tarantilis - [`ade63c6`](https://github.com/eea/volto-eea-design-system/commit/ade63c6f0b08c62318d31c54568cca29d0f106bc)]
+- refactor(inpageNavigation): restructure as a button [Antonis Tarantilis - [`48e22ac`](https://github.com/eea/volto-eea-design-system/commit/48e22ac0ee521f87497822a0ec9d627829d849d5)]
+- change(breadcrumbs): label modification for better screen reader output [David Ichim - [`c967bef`](https://github.com/eea/volto-eea-design-system/commit/c967bef63ac6f622f5936235dd5590831a674d15)]
+- change(checkbox): toggle hover color correction [Antonis Tarantilis - [`4f4d0df`](https://github.com/eea/volto-eea-design-system/commit/4f4d0df7292fdccb89f83feface51639bd5d6559)]
+- refactor(checkbox): accessibility fix [Antonis Tarantilis - [`3b3047f`](https://github.com/eea/volto-eea-design-system/commit/3b3047f6a6bdd9e9ad858e6a7ca0c6f6b404e605)]
+- refactor(newTabLabeledIcon): accessibility fix [Antonis Tarantilis - [`211e40a`](https://github.com/eea/volto-eea-design-system/commit/211e40aa47d1f0de91b1d949770c452336b80248)]
+- refactor(languageLabeledIcon): accessibility fix [Antonis Tarantilis - [`61edd9e`](https://github.com/eea/volto-eea-design-system/commit/61edd9e1022a8954930db30c262290680974d880)]
+- refactor(downloadLabeledIcon): accessibility fix [Antonis Tarantilis - [`df3935d`](https://github.com/eea/volto-eea-design-system/commit/df3935dc5836298768316399ba36927325541fef)]
+- refactor(labeledIconGroup): group updates for all labeled icons [Antonis Tarantilis - [`a679d9d`](https://github.com/eea/volto-eea-design-system/commit/a679d9d05b804f516fdeed449eba1e74e227818c)]
+- change(ContextNavigation): accessibility updates, not restructuring of the volto component [Antonis Tarantilis - [`03fe83d`](https://github.com/eea/volto-eea-design-system/commit/03fe83dce70c6931c543b93c71e3cd8e16f99ec8)]
+- refactor(comment): accessibility fixes and text button update [Antonis Tarantilis - [`dad8cb6`](https://github.com/eea/volto-eea-design-system/commit/dad8cb67a0092b01b50197c94691ed8a5d00a128)]
+- change(card): add links to teaser titles [Antonis Tarantilis - [`cc64c74`](https://github.com/eea/volto-eea-design-system/commit/cc64c74a69539af287f424abdf96226635284303)]
+- refactor(card): fix header outline not showing issue [Antonis Tarantilis - [`48fc2e2`](https://github.com/eea/volto-eea-design-system/commit/48fc2e2328ff184402e15edbaf1ed2507e771a14)]
+- refactor(modal): restructure close icon as button [Antonis Tarantilis - [`f1b836e`](https://github.com/eea/volto-eea-design-system/commit/f1b836e3071c220235eb327ee7ef67edac4d467d)]
+- change(logo): update eionet svg [Antonis Tarantilis - [`3c87fc7`](https://github.com/eea/volto-eea-design-system/commit/3c87fc750a3dc376205a643eefced410a41b22c6)]
+- refactor(megaMenu): clean up function after test [Antonis Tarantilis - [`883eb73`](https://github.com/eea/volto-eea-design-system/commit/883eb73cbc3db6a1fadd0200118eafdce91b7aab)]
+- refactor(megaMenu): align menu items with demo site for better testing [Antonis Tarantilis - [`82a5c84`](https://github.com/eea/volto-eea-design-system/commit/82a5c84cfde81dd8243f3f9a2d1fcaa8ac4b1463)]
+- refactor(breadcrumbs): updates on structure and story for accessibility [Antonis Tarantilis - [`770c8c0`](https://github.com/eea/volto-eea-design-system/commit/770c8c0bce88c5d9301ab0293a8e4865849bfeb2)]
+- refactor(megaMenu): Restructure Topics and Countries lists [Antonis Tarantilis - [`d816e7a`](https://github.com/eea/volto-eea-design-system/commit/d816e7ab9cdf2f202ab994201c16241cfb26c33a)]
+- change(mega-menu): use lists for navigation, enhance voice over support for better accessibility [David Ichim - [`d13137f`](https://github.com/eea/volto-eea-design-system/commit/d13137f024d6357514b85f184d219eb81dd585f2)]
+- refactor(header): firefox accessibility errors fix [Antonis Tarantilis - [`c7d35b9`](https://github.com/eea/volto-eea-design-system/commit/c7d35b92b90940b466ea016dbbb3f1c6dfa0c3ab)]
+
+#### :house: Internal changes
+
+- style(megaMenu): remove comments and unused properties [Antonis Tarantilis - [`fa5f8f8`](https://github.com/eea/volto-eea-design-system/commit/fa5f8f878421d879026aacd86e5390112b8852a1)]
+
+#### :house: Documentation changes
+
+- docs(footer): logo update [Manthos Matzios - [`ad982d6`](https://github.com/eea/volto-eea-design-system/commit/ad982d63423442bc292cd7553ad3163b33b337bb)]
+
 ### [1.0.6](https://github.com/eea/volto-eea-design-system/compare/1.0.5...1.0.6) - 29 March 2023
 
 #### :rocket: New Features
 
+- feat: add viewport-(width/height) less functions and fixed banner image url #329 from eea/develop [ichim-david - [`e8e70bd`](https://github.com/eea/volto-eea-design-system/commit/e8e70bdc81f4f301a9dce370867a873e55563048)]
 - feat: add viewport-(width/height) less functions [Miu Razvan - [`68300a3`](https://github.com/eea/volto-eea-design-system/commit/68300a3c34e66954c7ef3a6e52baa37431fbfa9e)]
 
 #### :nail_care: Enhancements

package/package.json

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

package/src/ui/Breadcrumbs/Breadcrumb.stories.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Breadcrumb, Container, Icon, Image } from 'semantic-ui-react';
-import homeSVG from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/home-icon.svg';
-import { Link } from 'react-router-dom';
+import { Breadcrumb } from 'semantic-ui-react';
+import { BreadcrumbsComponent } from './Breadcrumbs';
 
 export default {
   title: 'Components/Breadcrumb',
@@ -37,43 +36,16 @@ export default {
   },
 };
 
-//const Template = (args) => <Breadcrumb {...args}></Breadcrumb>;
-
 const Template = (args) => (
-  <Container>
-    <Breadcrumb size="tiny">
-      <Breadcrumb.Section key="home" href={args.root}>
-        <Image src={homeSVG} alt="home" />
-      </Breadcrumb.Section>
-      <Breadcrumb.Divider>
-        <Icon className="ri-arrow-right-s-line"></Icon>
-      </Breadcrumb.Divider>
-      {args.sections.map((section, index, sections) => [
-        index !== 0 && (
-          <Breadcrumb.Divider key={index}>
-            <Icon className="ri-arrow-right-s-line"></Icon>
-          </Breadcrumb.Divider>
-        ),
-        index < sections.length - 1 ? (
-          <Link key={section.href} to={section.href} className="section">
-            {section.content}{' '}
-          </Link>
-        ) : (
-          <Breadcrumb.Section key={section.key} active>
-            {section.content}{' '}
-          </Breadcrumb.Section>
-        ),
-      ])}
-    </Breadcrumb>
-  </Container>
+  <BreadcrumbsComponent root={args.root} sections={args.sections} />
 );
 
 export const Default = Template.bind({});
 Default.args = {
   root: 'https://www.eea.europa.eu/',
   sections: [
-    { key: 'Section 1', content: 'Section 1', href: '/#' },
-    { key: 'Section 2', content: 'Section 2', href: '/#' },
-    { key: 'Section 3', content: 'Section 3', href: '/#' },
+    { key: 'Section 1', title: 'Section 1', href: '/#' },
+    { key: 'Section 2', title: 'Section 2', href: '/#' },
+    { key: 'Section 3', title: 'Section 3', href: '/#' },
   ],
 };

package/src/ui/Breadcrumbs/Breadcrumbs.jsx

@@ -17,32 +17,32 @@ const Breadcrumbs = ({
   size = 'tiny',
 }) => {
   return sections.length > 0 ? (
-    <Segment
-      role="navigation"
-      aria-label={'breadcrumbs'}
-      className="breadcrumbs"
-      attached
-      vertical
-    >
+    <Segment className="breadcrumbs" attached vertical>
       <Container>
-        <Breadcrumb size={size}>
-          <Link to={root || '/'} className="section" title={'Home'}>
-            <Image src={homeIcon} alt="home" />
-          </Link>
-          {sections.map((item, index, items) => [
-            <Breadcrumb.Divider key={`divider-${item.href}`}>
-              <Icon className={icon}></Icon>
-            </Breadcrumb.Divider>,
-            index < items.length - 1 ? (
-              <Link key={item.key} to={item.href} className="section">
-                {item.title}
+        <Breadcrumb size={size} as="nav" aria-label={'Breadcrumbs'}>
+          <ol aria-label="Breadcrumbs navigation">
+            <li>
+              <Link to={root || '/'} className="section" title={'Home'}>
+                <Image src={homeIcon} alt="" />
               </Link>
-            ) : (
-              <Breadcrumb.Section key={item.key} active>
-                {item.title}
-              </Breadcrumb.Section>
-            ),
-          ])}
+            </li>
+            {sections.map((item, index, items) => [
+              <li key={index}>
+                <Breadcrumb.Divider key={`divider-${item.href}`}>
+                  <Icon className={icon}></Icon>
+                </Breadcrumb.Divider>
+                {index < items.length - 1 ? (
+                  <Link key={item.key} to={item.href} className="section">
+                    {item.title}
+                  </Link>
+                ) : (
+                  <Breadcrumb.Section key={item.key} active>
+                    {item.title}
+                  </Breadcrumb.Section>
+                )}
+              </li>,
+            ])}
+          </ol>
         </Breadcrumb>
       </Container>
     </Segment>

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

@@ -86,7 +86,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>
       ) : (
         ''
       )}
@@ -488,7 +490,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>
         )}

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/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>

package/src/ui/Header/Header.jsx

@@ -16,6 +16,8 @@ import HeaderSearchPopUp from './HeaderSearchPopUp';
 import HeaderMenuPopUp from './HeaderMenuPopUp';
 import PropTypes from 'prop-types';
 
+import { isInternalURL } from '@plone/volto/helpers';
+
 Header.propTypes = {
   transparency: PropTypes.bool,
   inverted: PropTypes.bool,
@@ -143,6 +145,9 @@ const Main = ({
   const [searchIsActive, setSearchIsActive] = React.useState(false);
   const [burger, setBurger] = React.useState('');
   const searchInputRef = React.useRef(null);
+  const [isClient, setIsClient] = React.useState();
+
+  React.useEffect(() => setIsClient(true), []);
 
   React.useEffect(() => {
     setMenuIsActive(false);
@@ -203,7 +208,11 @@ const Main = ({
     if (item.items.length) {
       setMenuIsActive(true);
     } else {
-      history.push(item.url);
+      if (isInternalURL(item.url)) {
+        history.push(item.url);
+      } else if (isClient) {
+        window.location.replace(item.url);
+      }
     }
   };
 
@@ -266,7 +275,7 @@ const Main = ({
           <Grid.Column mobile={4} tablet={4} computer={8}>
             <div className={inverted ? 'main-menu inverted' : 'main-menu'}>
               {menuItems && (
-                <div
+                <ul
                   className="ui text eea-main-menu tablet or lower hidden menu"
                   ref={desktopMenuRef}
                   id={'navigation'}
@@ -275,6 +284,7 @@ const Main = ({
                     <Menu.Item
                       name={item['@id'] || item.url}
                       key={item['@id'] || item.url}
+                      as={'li'}
                       active={
                         activeItem.indexOf(item['@id']) !== -1 ||
                         activeItem.indexOf(item.url) !== -1
@@ -285,7 +295,7 @@ const Main = ({
                       })}
                     </Menu.Item>
                   ))}
-                </div>
+                </ul>
               )}
               {!hideSearch && (
                 <button