@eeacms/volto-eea-design-system 0.7.3 → 0.8.0

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

@@ -28,10 +28,21 @@ export default {
 const Template = (args) => (
   <Container>
     <Card className="publication tertiary">
-      <Image src={args.image} wrapped ui={false} alt="card image" />
+      <Image
+        as="a"
+        href={args.href}
+        src={args.image}
+        wrapped
+        ui={false}
+        alt="card image"
+      />
       <Card.Content>
-        <Card.Meta>{args.tag}</Card.Meta>
-        <Card.Description>{args.description}</Card.Description>
+        <Card.Meta>
+          <a href={args.href}>{args.tag}</a>
+        </Card.Meta>
+        <Card.Description>
+          <a href={args.href}>{args.description}</a>
+        </Card.Description>
       </Card.Content>
     </Card>
   </Container>
@@ -43,4 +54,5 @@ PublicationCard.args = {
   description:
     'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
   image: imageUrl,
+  href: '/#',
 };

package/src/ui/Card/RelatedContent/RelatedContent.jsx

@@ -32,11 +32,22 @@ RelatedContent.Grid = ({ children, ...rest }) => {
               mobile={12}
             >
               {row.map((item, index) => (
-                <Card className="publication" key={index}>
-                  <Image src={item.image} wrapped ui={false} alt="card image" />
+                <Card className="publication tertiary" key={index}>
+                  <Image
+                    as="a"
+                    href={item.href}
+                    src={item.image}
+                    wrapped
+                    ui={false}
+                    alt="card image"
+                  />
                   <Card.Content>
-                    <Card.Meta>{item.tag}</Card.Meta>
-                    <Card.Description>{item.description}</Card.Description>
+                    <Card.Meta>
+                      <a href={item.href}>{item.tag}</a>
+                    </Card.Meta>
+                    <Card.Description>
+                      <a href={item.href}>{item.description}</a>
+                    </Card.Description>
                   </Card.Content>
                 </Card>
               ))}
@@ -50,11 +61,22 @@ RelatedContent.Grid = ({ children, ...rest }) => {
               tablet={12}
               mobile={12}
             >
-              <Card className="publication">
-                <Image src={item.image} wrapped ui={false} alt="card image" />
+              <Card className="publication tertiary">
+                <Image
+                  as="a"
+                  href={item.href}
+                  src={item.image}
+                  wrapped
+                  ui={false}
+                  alt="card image"
+                />
                 <Card.Content>
-                  <Card.Meta>{item.tag}</Card.Meta>
-                  <Card.Description>{item.description}</Card.Description>
+                  <Card.Meta>
+                    <a href={item.href}>{item.tag}</a>
+                  </Card.Meta>
+                  <Card.Description>
+                    <a href={item.href}>{item.description}</a>
+                  </Card.Description>
                 </Card.Content>
               </Card>
             </Grid.Column>

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

@@ -31,29 +31,34 @@ DefaultEven.args = {
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       image: imageUrl,
+      href: '/#',
     },
     {
       tag: '#Publication',
       description: 'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
       image: imageUrl,
+      href: '/#',
     },
     {
       tag: '#Publication',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. ',
       image: imageUrl,
+      href: '/#',
     },
     {
       tag: '#Publication',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. ',
       image: imageUrl,
+      href: '/#',
     },
     {
       tag: '#Publication',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       image: imageUrl,
+      href: '/#',
     },
   ],
   buttonText: 'See All',
@@ -104,17 +109,20 @@ DefaultOdd.args = {
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       image: imageUrl,
+      href: '/#',
     },
     {
       tag: '#Publication',
       description: 'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
       image: imageUrl,
+      href: '/#',
     },
     {
       tag: '#Publication',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. ',
       image: imageUrl,
+      href: '/#',
     },
   ],
   buttonText: 'See All',
@@ -190,6 +198,7 @@ function TabWithRelatedContent({ panes }) {
         menu={{
           secondary: true,
           pointing: true,
+          tabIndex: 0,
         }}
       />
     </Container>
@@ -209,6 +218,7 @@ RelatedContentInTab.args = {
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
           image: imageUrl,
+          href: '/#',
         },
       ],
       buttonText: 'See All',
@@ -222,12 +232,14 @@ RelatedContentInTab.args = {
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
           image: imageUrl,
+          href: '/#',
         },
       ],
       buttonText: 'See All',
@@ -241,18 +253,21 @@ RelatedContentInTab.args = {
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. ',
           image: imageUrl,
+          href: '/#',
         },
       ],
       buttonText: 'See All',
@@ -266,30 +281,35 @@ RelatedContentInTab.args = {
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. ',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. ',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
           image: imageUrl,
+          href: '/#',
         },
       ],
       buttonText: 'See All',

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

@@ -11,13 +11,22 @@ export default {
     },
   },
   argTypes: {
-    hasImage: {
-      description: 'true if card contains image',
+    variant: {
+      options: ['default', 'primary', 'secondary', 'tertiary'],
+      control: { type: 'select' },
+      description: 'card variation class',
       table: {
         type: {
-          summary: 'boolean',
+          summary: 'string',
         },
-        defaultValue: { summary: true },
+        defaultValue: { summary: 'null' },
+      },
+    },
+    inverted: {
+      description: 'Inverted card',
+      table: {
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
       },
     },
     title: {
@@ -47,11 +56,8 @@ export default {
         defaultValue: { summary: false },
       },
     },
-    avatarVariant: {
-      options: ['big', 'small'],
-      control: { type: 'inline-radio' },
-      defaultValue: 'big',
-      description: 'rounded card size class',
+    src: {
+      description: 'rounded card image url',
       table: {
         type: {
           summary: 'string',
@@ -59,13 +65,11 @@ export default {
         defaultValue: { summary: ' "" ' },
       },
     },
-    src: {
-      description: 'rounded card image url',
+    hasLink: {
+      description: 'Clickable card',
       table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: { summary: ' "" ' },
+        defaultValue: { summary: 'true' },
+        type: { summary: 'boolean' },
       },
     },
   },
@@ -73,12 +77,32 @@ export default {
 
 const AvatarTemplate = (args) => (
   <Container>
-    <Card className={`rounded ${args.avatarVariant}`} fluid={args.fluid}>
-      {args.hasImage && (
+    <Card
+      className={`rounded ${args.variant === 'default' ? '' : args.variant} ${
+        args.inverted ? 'inverted' : ''
+      }`}
+      fluid={args.fluid}
+    >
+      {args.hasLink ? (
+        <Image
+          as="a"
+          href={args.href}
+          src={args.src}
+          wrapped
+          ui={false}
+          alt="card image"
+        />
+      ) : (
         <Image src={args.src} wrapped ui={false} alt="card image" />
       )}
       <Card.Content>
-        <Card.Header>{args.title}</Card.Header>
+        {args.hasLink ? (
+          <Card.Header>
+            <a href={args.href}>{args.title}</a>
+          </Card.Header>
+        ) : (
+          <Card.Header>{args.title}</Card.Header>
+        )}
         <Card.Description>{args.description}</Card.Description>
       </Card.Content>
     </Card>
@@ -87,10 +111,12 @@ const AvatarTemplate = (args) => (
 
 export const Default = AvatarTemplate.bind({});
 Default.args = {
-  avatarVariant: 'big',
+  variant: 'default',
+  inverted: false,
   src: imgUrl,
   title: 'Lorem Ipsum',
   description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-  hasImage: true,
   fluid: false,
+  hasLink: true,
+  href: '/#',
 };

package/src/ui/Footer/Contact.jsx

@@ -1,30 +1,34 @@
 import React from 'react';
-import { Icon } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
-const Contact = ({ children, contacts, header, address }) =>
+const Contact = ({ children, contacts }) =>
   children?.length ? (
     children
   ) : (
     <div className="contact-block">
-      <p className="header">{header}</p>
       {contacts?.map((contact, index) => (
         <div className="contact" key={index}>
-          <Link to={contact.link}>
-            <Icon className={contact.icon} size="big"></Icon>
+          <Link to={contact.link} className="bold">
             {contact.text}
           </Link>
+          {contact.children && (
+            <div className="subcontact">
+              {contact.children.map((child, index) => (
+                <Link to={child.link} key={index}>
+                  {child.text}
+                </Link>
+              ))}
+            </div>
+          )}
         </div>
       ))}
-      {address && <p className="address">{address}</p>}
     </div>
   );
 
 Contact.propTypes = {
   contacts: PropTypes.array,
   header: PropTypes.string,
-  address: PropTypes.string,
 };
 
 export default Contact;

package/src/ui/Footer/Footer.jsx

@@ -24,7 +24,7 @@ const Footer = (props) => {
   const { children } = props;
   return (
     <footer>
-      <div className="wrapper">
+      <div className="footer-wrapper">
         <Container>{children}</Container>
       </div>
     </footer>

package/src/ui/Footer/FooterActions.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { Grid } from 'semantic-ui-react';
 
 const FooterActions = (props) => {
   if (props.children) {
@@ -8,13 +9,29 @@ const FooterActions = (props) => {
 
   return (
     <div className="menu">
-      {props.actions &&
-        props.actions.map((action, index) => (
-          <Link to={action.link} key={index}>
-            {action.copy && <>&copy;</>}
-            {action.title}
-          </Link>
-        ))}
+      <Grid>
+        <Grid.Column mobile={12} tablet={6} computer={6}>
+          <div className="actions">
+            {props.actions &&
+              props.actions.map((action, index) => (
+                <Link to={action.link} key={index}>
+                  {action.title}
+                </Link>
+              ))}
+          </div>
+        </Grid.Column>
+
+        <Grid.Column mobile={12} tablet={6} computer={6}>
+          <div className="copyright">
+            {props.copyright &&
+              props.copyright.map((copyright, index) => (
+                <Link to={copyright.link} key={index}>
+                  &copy; Copyright {new Date().getFullYear()} {copyright.site}
+                </Link>
+              ))}
+          </div>
+        </Grid.Column>
+      </Grid>
     </div>
   );
 };

package/src/ui/Footer/FooterHeader.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const FooterHeader = (props) => {
   return (
-    <div className="theme-sites mobile hidden">
+    <div className="theme-sites">
       <p className="header text-center">{props.children}</p>
     </div>
   );

package/src/ui/Footer/FooterSites.jsx

@@ -3,23 +3,35 @@ import { Grid, Image } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 
 const Sites = (props) => {
+  const getLogoColumns = (logos) => {
+    let column = [];
+    for (let i = 0; i < logos.length; i += 2) {
+      const item = logos[i];
+      const nextItem = logos[i + 1];
+      column.push(
+        <Grid.Column className="logo" key={i}>
+          <a className="logo" href={item.link}>
+            <Image src={item.src} alt={item.alt}></Image>
+          </a>
+          <a className="logo" href={nextItem.link}>
+            <Image src={nextItem.src} alt={nextItem.alt}></Image>
+          </a>
+        </Grid.Column>,
+      );
+    }
+    return column;
+  };
+
   if (props.children) {
     return <div>{props.children}</div>;
   }
 
   //fallback to props
   return (
-    <div className="theme-sites mobile hidden">
+    <div className="theme-sites">
       <div className="logos">
-        <Grid columns={5}>
-          {props.sites &&
-            props.sites.map((site, index) => (
-              <Grid.Column className="logo" key={index}>
-                <a href={site.link}>
-                  <Image src={site.src} alt={site.alt}></Image>
-                </a>
-              </Grid.Column>
-            ))}
+        <Grid columns={5} stackable>
+          {getLogoColumns(props.sites)}
         </Grid>
       </div>
     </div>

package/src/ui/Footer/SubFooter.jsx

@@ -11,51 +11,55 @@ const SubFooter = (props) => {
   return (
     <div className={'subfooter'}>
       <Grid>
-        <Grid.Column mobile={12} tablet={5} computer={6}>
-          <div className="item">
-            <p className="header text-center logo-header">
-              {props.logosHeader}
-            </p>
+        {props.managedBy &&
+          props.managedBy.map((manager, index) => (
+            <Grid.Column
+              mobile={manager.columnSize.mobile}
+              tablet={manager.columnSize.tablet}
+              computer={manager.columnSize.computer}
+              key={index}
+              className="mobile hidden"
+            >
+              <div className="item">
+                <div className={manager.className}>
+                  <a href={manager.link}>
+                    <Image src={manager.src} alt={manager.alt}></Image>
+                  </a>
+                </div>
+              </div>
+            </Grid.Column>
+          ))}
 
-            <Grid>
-              {props.managedBy &&
-                props.managedBy.map((manager, index) => (
-                  <Grid.Column
-                    mobile={manager.columnSize.mobile}
-                    tablet={manager.columnSize.tablet}
-                    computer={manager.columnSize.computer}
-                    key={index}
-                  >
-                    <div className={manager.className}>
-                      <a href={manager.link}>
-                        <Image src={manager.src} alt={manager.alt}></Image>
-                      </a>
-                    </div>
-                  </Grid.Column>
-                ))}
-            </Grid>
-          </div>
-        </Grid.Column>
-        <Grid.Column
-          mobile={6}
-          tablet={2}
-          computer={2}
-          className="mobile hidden"
-        ></Grid.Column>
-        <Grid.Column mobile={12} tablet={5} computer={4}>
+        <Grid.Column mobile={12} tablet={4} computer={4}>
           <div className="item">
-            <Footer.Contact
-              contacts={props.contacts}
-              header={props.contactHeader}
-              address={props.address}
-            />
-            <Footer.Social social={props.social} />
+            <Footer.Contact contacts={props.contacts} />
           </div>
         </Grid.Column>
       </Grid>
+
       <Grid.Row>
-        <Footer.Actions actions={props.actions} />
+        <Footer.Social social={props.social} />
       </Grid.Row>
+
+      <Grid className="mobile only">
+        {props.managedBy &&
+          props.managedBy.map((manager, index) => (
+            <Grid.Column
+              mobile={manager.columnSize.mobile}
+              tablet={manager.columnSize.tablet}
+              computer={manager.columnSize.computer}
+              key={index}
+            >
+              <div className="item">
+                <div className={manager.className}>
+                  <a href={manager.link}>
+                    <Image src={manager.src} alt={manager.alt}></Image>
+                  </a>
+                </div>
+              </div>
+            </Grid.Column>
+          ))}
+      </Grid>
     </div>
   );
 };