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

package/src/ui/Header/HeaderMenuPopUp.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Transition } from 'semantic-ui-react';
 import { Container, Grid, List, Icon, Accordion } from 'semantic-ui-react';
 
@@ -6,64 +6,59 @@ import { cloneDeep } from 'lodash';
 
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
 
-const createColumns = (item, length, renderMenuItem) => {
-  let subArrays = [];
-  let size = length;
-  for (let i = 0; i < item.items.length; i += size) {
-    subArrays.push(item.items.slice(i, i + size));
-  }
+const createColumns = (item, renderMenuItem, item_id) => {
+  const itemList = item.items.map((item, index) => (
+    <React.Fragment key={index}>
+      {renderMenuItem(item, {
+        className: 'item',
+        key: index,
+        id: item_id,
+      })}
+    </React.Fragment>
+  ));
+  return itemList;
+};
 
-  const column = subArrays.map((subArray, index) => (
-    <Grid.Column key={index}>
-      <List>
-        {subArray.map((arrayItem, idx) => (
-          <React.Fragment key={idx}>
-            {renderMenuItem(arrayItem, {
-              className: 'item',
-              role: 'listitem',
-              key: idx,
-            })}
+const ItemGrid = ({ sectionTitle, item, columns, renderMenuItem }) => {
+  const item_id = item.title.toLowerCase().replaceAll(' ', '-') + '-sub-title';
+  return (
+    <>
+      {renderMenuItem(item, { className: 'sub-title', id: item_id })}
+      {item.items.length ? (
+        <List aria-labelledby={item_id} style={{ columns: `${columns}` }}>
+          {createColumns(item, renderMenuItem, item_id)}
+        </List>
+      ) : null}
+    </>
+  );
+};
+
+const Item = ({ item, icon = false, iconName, renderMenuItem }) => {
+  const item_id = item.title.toLowerCase().replaceAll(' ', '-') + '-sub-title';
+  return (
+    <>
+      {renderMenuItem(item, {
+        className: 'sub-title',
+        id: item_id,
+      })}
+      <List className="menu-list" aria-labelledby={item_id}>
+        {item.items.map((listItem, index) => (
+          <React.Fragment key={index}>
+            {renderMenuItem(
+              listItem,
+              {
+                className: 'item',
+                key: index,
+              },
+              { children: icon && <Icon className={iconName} /> },
+            )}
           </React.Fragment>
         ))}
       </List>
-    </Grid.Column>
-  ));
-
-  return column;
+    </>
+  );
 };
 
-const ItemGrid = ({ item, columns, length, renderMenuItem }) => (
-  <>
-    {renderMenuItem(item, { className: 'sub-title' })}
-    {item.items.length ? (
-      <Grid columns={columns}>
-        {createColumns(item, length, renderMenuItem)}
-      </Grid>
-    ) : null}
-  </>
-);
-
-const Item = ({ item, icon = false, iconName, renderMenuItem }) => (
-  <>
-    {renderMenuItem(item, { className: 'sub-title' })}
-    <List className="menu-list">
-      {item.items.map((listItem, index) => (
-        <React.Fragment key={index}>
-          {renderMenuItem(
-            listItem,
-            {
-              className: 'item',
-              key: index,
-              role: 'listitem',
-            },
-            { children: icon && <Icon className={iconName} /> },
-          )}
-        </React.Fragment>
-      ))}
-    </List>
-  </>
-);
-
 const Topics = ({ menuItem, renderMenuItem }) => (
   <Grid>
     {menuItem.items.map((section, index) => (
@@ -75,9 +70,9 @@ const Topics = ({ menuItem, renderMenuItem }) => (
         ) : (
           <Grid.Column width={9} key={index} id="topics-right-column">
             <ItemGrid
+              sectionTitle={section.title}
               item={section}
               columns={4}
-              length={10}
               key={index}
               renderMenuItem={renderMenuItem}
             />
@@ -95,9 +90,9 @@ const Countries = ({ menuItem, renderMenuItem }) => (
         <React.Fragment key={index}>
           {section.title === 'EEA member countries' && (
             <ItemGrid
+              sectionTitle={section.title}
               item={section}
               columns={5}
-              length={7}
               renderMenuItem={renderMenuItem}
             />
           )}
@@ -111,9 +106,9 @@ const Countries = ({ menuItem, renderMenuItem }) => (
             {section.title !== 'EEA member countries' && (
               <Grid.Column>
                 <ItemGrid
+                  sectionTitle={section.title}
                   item={section}
                   columns={2}
-                  length={3}
                   renderMenuItem={renderMenuItem}
                 />
               </Grid.Column>
@@ -249,17 +244,31 @@ const SecondLevelContent = ({ element, topics = false, renderMenuItem }) => {
 };
 
 const NestedAccordion = ({ menuItems, renderMenuItem, pathName }) => {
-  let defaultIndex = -1;
+  const [activeIndex, setActiveIndex] = useState(-1);
+
+  useEffect(() => {
+    let index = 0;
+    menuItems.forEach((menuItem) => {
+      if (pathName.includes(menuItem.url)) setActiveIndex(index);
+      ++index;
+    });
+  }, [menuItems, pathName]);
+
   const rootPanels = [];
   menuItems.forEach((element, index) => {
     let x = {};
     x.key = index;
-
-    if (pathName.indexOf(element.url) !== -1) {
-      defaultIndex = index;
-    }
     x.title = (
-      <Accordion.Title key={`title-${index}`} index={index} as="button">
+      <Accordion.Title
+        key={`title-${index}`}
+        index={index}
+        as="button"
+        onClick={() => {
+          if (activeIndex === index) {
+            setActiveIndex(-1);
+          } else setActiveIndex(index);
+        }}
+      >
         {element.title}
         <Icon className="ri-arrow-down-s-line" size="small" />
       </Accordion.Title>
@@ -294,7 +303,7 @@ const NestedAccordion = ({ menuItems, renderMenuItem, pathName }) => {
     rootPanels.push(x);
   });
 
-  return <Accordion defaultActiveIndex={defaultIndex} panels={rootPanels} />;
+  return <Accordion activeIndex={activeIndex} panels={rootPanels} />;
 };
 
 function HeaderMenuPopUp({

package/src/ui/Header/HeaderSearchPopUp.js

@@ -30,6 +30,7 @@ function HeaderSearchPopUp({
   const {
     path = '',
     buttonTitle,
+    buttonUrl,
     description,
     placeholder = 'Search',
     searchSuggestions,
@@ -115,7 +116,7 @@ function HeaderSearchPopUp({
             <Container>
               <div>{description}</div>
               <a
-                href={defaultView[0].path}
+                href={buttonUrl || defaultView[0].path}
                 className="ui button white inverted"
                 title="Advanced search"
               >

package/src/ui/InpageNavigation/InpageNavigation.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Container, Icon } from 'semantic-ui-react';
+import { Container, Button, Icon } from 'semantic-ui-react';
 
 class InpageNavigation extends Component {
   constructor(props) {
@@ -39,11 +39,11 @@ class InpageNavigation extends Component {
   render() {
     return (
       <Container>
-        <div
+        <Button
           id="inpage-navigation"
           onClick={this.onInpageNavigationClick}
-          role="none"
           className={this.state.removeClass}
+          title="Go to top"
         >
           <div className="mobile tablet only">
             <Icon className="ri-arrow-up-s-line" />
@@ -52,7 +52,7 @@ class InpageNavigation extends Component {
             <Icon className="ri-arrow-up-s-line" />
             <div className="text">top</div>
           </div>
-        </div>
+        </Button>
       </Container>
     );
   }

package/src/ui/InpageNavigation/InpageNavigation.stories.jsx

@@ -12,6 +12,7 @@ function InpageNavigationExample() {
   return (
     <div id="anchor">
       <Container>
+        <h3>Scroll to reveal Inpage Navigation</h3>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
           arcu egestas ultrices mollis. In facilisis, velit vel varius
@@ -52,7 +53,7 @@ function InpageNavigationExample() {
           tempor blandit. Curabitur iaculis risus ac ipsum semper egestas. Sed
           in condimentum lacus. Donec ac efficitur sapien. Integer sit amet
           bibendum urna, eget rhoncus elit. Nam a diam sed dui consectetur
-          aliquet.
+          aliquet. <a href="/#">Link example</a>
         </p>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
@@ -80,7 +81,7 @@ function InpageNavigationExample() {
           tempor blandit. Curabitur iaculis risus ac ipsum semper egestas. Sed
           in condimentum lacus. Donec ac efficitur sapien. Integer sit amet
           bibendum urna, eget rhoncus elit. Nam a diam sed dui consectetur
-          aliquet.
+          aliquet. <a href="/#">Link example</a>
         </p>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
@@ -108,7 +109,7 @@ function InpageNavigationExample() {
           tempor blandit. Curabitur iaculis risus ac ipsum semper egestas. Sed
           in condimentum lacus. Donec ac efficitur sapien. Integer sit amet
           bibendum urna, eget rhoncus elit. Nam a diam sed dui consectetur
-          aliquet.
+          aliquet. <a href="/#">Link example</a>
         </p>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
@@ -136,7 +137,7 @@ function InpageNavigationExample() {
           tempor blandit. Curabitur iaculis risus ac ipsum semper egestas. Sed
           in condimentum lacus. Donec ac efficitur sapien. Integer sit amet
           bibendum urna, eget rhoncus elit. Nam a diam sed dui consectetur
-          aliquet.
+          aliquet. <a href="/#">Link example</a>
         </p>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis

package/src/ui/Label/Label.stories.js

@@ -64,10 +64,13 @@ export const Ribbon = (args) => (
     <Segment raised>
       <Label
         as="a"
+        href={args.link}
         ribbon
         className={args.importance ? args.importance : ''}
         {...args}
       ></Label>
+      <br />
+      <br />
       <Image
         src="https://react.semantic-ui.com/images/wireframe/paragraph.png"
         alt="paragraph"
@@ -91,7 +94,6 @@ export const Corner = (args) => (
     <Image
       src="https://react.semantic-ui.com/images/wireframe/image.png"
       label={{
-        as: 'a',
         corner: 'right',
         icon: 'save',
         className: `${args.importance ? args.importance : ''}`,

package/src/ui/LabeledIconGroup/LabeledIconGroup.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Button } from 'semantic-ui-react';
 import NewTabLabeledIcon from '../NewTabLabeledIcon/NewTabLabeledIcon';
 import DownloadLabeledIcon from '../DownloadLabeledIcon/DownloadLabeledIcon';
 import LanguageLabeledIcon from '../LanguageLabeledIcon/LanguageLabeledIcon';
@@ -17,12 +18,12 @@ LabeledIconGroup.Download = ({ children, ...rest }) => {
       <DownloadLabeledIcon
         {...rest}
         trigger={
-          <div>
+          <Button className="text">
             <DownloadLabeledIcon.Icon {...rest}>
               {rest.icon}
             </DownloadLabeledIcon.Icon>
             <DownloadLabeledIcon.Label>{rest.label}</DownloadLabeledIcon.Label>
-          </div>
+          </Button>
         }
       >
         <DownloadLabeledIcon.Dropdown {...rest}></DownloadLabeledIcon.Dropdown>
@@ -48,12 +49,12 @@ LabeledIconGroup.Language = ({ children, ...rest }) => {
       <LanguageLabeledIcon
         {...rest}
         trigger={
-          <div>
+          <Button className="text">
             <LanguageLabeledIcon.Icon
               icon={rest.icon}
             ></LanguageLabeledIcon.Icon>
             <LanguageLabeledIcon.Label>{rest.label}</LanguageLabeledIcon.Label>
-          </div>
+          </Button>
         }
       >
         <LanguageLabeledIcon.Dropdown

package/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Button } from 'semantic-ui-react';
 import LanguageLabeledIcon from './LanguageLabeledIcon';
 import LabeledIconGroup from '../LabeledIconGroup/LabeledIconGroup';
 
@@ -35,10 +36,10 @@ const Template = (args) => (
     <LanguageLabeledIcon
       {...args}
       trigger={
-        <div>
+        <Button className="text">
           <LanguageLabeledIcon.Icon icon={args.icon}></LanguageLabeledIcon.Icon>
           <LanguageLabeledIcon.Label>{args.label}</LanguageLabeledIcon.Label>
-        </div>
+        </Button>
       }
     >
       <LanguageLabeledIcon.Dropdown

package/src/ui/Modal/Modal.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Modal } from 'semantic-ui-react';
+import { Button, Modal, Icon } from 'semantic-ui-react';
 
 export default {
   title: 'Components/Modal',
@@ -84,7 +84,6 @@ function ModalEEA({
   const [open, setOpen] = React.useState(false);
   return (
     <Modal
-      closeIcon
       onClose={() => setOpen(false)}
       onOpen={() => setOpen(true)}
       open={open}
@@ -93,6 +92,14 @@ function ModalEEA({
       size={size}
       dimmer={dimmer}
     >
+      <Button
+        className="close icon"
+        onClick={() => setOpen(false)}
+        title="Close modal dialog"
+      >
+        <Icon name="close" />
+      </Button>
+
       <Modal.Header>{header}</Modal.Header>
       <Modal.Content>
         <Modal.Description>{content}</Modal.Description>

package/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.jsx

@@ -1,12 +1,18 @@
 import React from 'react';
-import { Icon } from 'semantic-ui-react';
+import { Button, Icon } from 'semantic-ui-react';
 
 function NewTabLabeledIcon({ children, ...rest }) {
   return (
     <div className="eea new tab labeled icon">
-      <a target="_blank" rel="noreferrer" href={rest.link}>
+      <Button
+        target="_blank"
+        rel="noreferrer"
+        href={rest.link}
+        as="a"
+        className="text"
+      >
         {children}
-      </a>
+      </Button>
     </div>
   );
 }

package/src/ui/Tag/Tag.stories.jsx

@@ -16,7 +16,7 @@ export default {
 
 export const Default = (args) => (
   <Container>
-    <Tag href={args.href}>{args.title}</Tag>
+    <Tag href={args.link}>{args.title}</Tag>
   </Container>
 );
 

package/src/ui/Video/Video.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import cx from 'classnames';
+
+function Video({ children, align }) {
+  return <div className={cx('block video align', align)}>{children}</div>;
+}
+
+Video.Body = ({ children, align }) => (
+  <div className={cx('video-inner', { 'full-width': align === 'full' })}>
+    {children}
+  </div>
+);
+
+Video.Embed = ({
+  children,
+  url,
+  loop,
+  autoPlay,
+  align,
+  placeholder_image,
+  required_caption,
+}) => {
+  return (
+    <video
+      src={url}
+      controls={!autoPlay}
+      autoPlay={autoPlay}
+      muted={autoPlay}
+      loop={loop}
+      poster={placeholder_image}
+      type="video/mp4"
+    >
+      <track kind="captions" {...required_caption} />
+      {children}
+    </video>
+  );
+};
+
+Video.Track = ({ tracks }) =>
+  tracks.map((track, index) => {
+    return <track {...track} />;
+  });
+
+export default Video;

package/src/ui/Video/Video.stories.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Container } from 'semantic-ui-react';
+import Video from './Video';
+import englishTrack from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/video/demo-track-en.vtt';
+import romanianTrack from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/video/demo-track-ro.vtt';
+import greekTrack from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/video/demo-track-el.vtt';
+
+export default {
+  title: 'Components/Video',
+  component: Video,
+  argTypes: {
+    align: {
+      options: ['center', 'right', 'left'],
+      control: {
+        type: 'select',
+        labels: {
+          '': 'default',
+        },
+      },
+      defaultValue: 'center',
+      table: {
+        defaultValue: { summary: 'center' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <Container>
+    <Video align={args.align}>
+      <Video.Body align={args.align}>
+        <Video.Embed {...args}>
+          <Video.Track tracks={args.tracks} />
+        </Video.Embed>
+      </Video.Body>
+    </Video>
+  </Container>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  url: 'https://cmshare.eea.europa.eu/s/Xw7kH2TJGCibHJf/download',
+  autoPlay: false,
+  loop: false,
+  align: 'center',
+  placeholder_image: '',
+  required_caption: { src: englishTrack, srclang: 'en', label: 'English' },
+  tracks: [
+    { src: romanianTrack, kind: 'captions', srclang: 'ro', label: 'Română' },
+    { src: greekTrack, kind: 'captions', srclang: 'el', label: 'Ελλήνικά' },
+  ],
+};

package/src/ui/index.js

@@ -22,8 +22,6 @@ export Timeline from './Timeline/Timeline';
 
 export Testimonial from './Quote/Testimonial/Testimonial';
 
-export AvatarGrid from './Card/AvatarGrid/AvatarGrid';
-
 export KeyContent from './KeyContent/KeyContent';
 
 export DownloadLabeledIcon from './DownloadLabeledIcon/DownloadLabeledIcon';
@@ -39,3 +37,5 @@ export RelatedContent from './Card/RelatedContent/RelatedContent';
 export Hero from './Hero/Hero';
 
 export Copyright from './Copyright/Copyright';
+
+export Video from './Video/Video';

package/theme/theme.config

@@ -88,10 +88,8 @@
 @tagList          : 'eea';
 @inpageNavigation : 'eea';
 @contextNavigation : 'eea';
-@avatar           : 'eea';
 @divider          : 'eea';
 @testimonial      : 'eea';
-@avatarGrid       : 'eea';
 @keyContent       : 'eea';
 @publicationCard  : 'eea';
 @contentBox       : 'eea';
@@ -135,5 +133,4 @@
   @import (optional) "@{siteFolder}/@{addon}/@{addontype}s/@{addonelement}.overrides";
 }
 
-
 /* End Config */