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

package/src/ui/Header/HeaderMenuPopUp.js

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

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/theme/plugins.js

@@ -0,0 +1,41 @@
+module.exports = {
+  install(less, pluginManager, functions) {
+    functions.add('vw', function (percentage) {
+      return new less.tree.Call('calc', [
+        new less.tree.Operation(
+          '*',
+          [
+            new less.tree.Call('var', [
+              new less.tree.UnicodeDescriptor('--vw'),
+              new less.tree.Dimension(
+                1,
+                new less.tree.Unit(['vw'], null, 'vw'),
+              ),
+            ]),
+            percentage,
+          ],
+          true,
+        ),
+      ]);
+    });
+
+    functions.add('vh', function (percentage) {
+      return new less.tree.Call('calc', [
+        new less.tree.Operation(
+          '*',
+          [
+            new less.tree.Call('var', [
+              new less.tree.UnicodeDescriptor('--vh'),
+              new less.tree.Dimension(
+                1,
+                new less.tree.Unit(['vh'], null, 'vh'),
+              ),
+            ]),
+            percentage,
+          ],
+          true,
+        ),
+      ]);
+    });
+  },
+};

package/theme/theme.less

@@ -10,6 +10,8 @@
 
 @themesFolderEEA: '~eea-volto-themes';
 
+@plugin "./plugins";
+
 /*--------------------
    Site Variables
 ---------------------*/