@eeacms/volto-eea-design-system 0.4.3 → 0.4.4

package/CHANGELOG.md

@@ -4,8 +4,52 @@ 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).
 
+#### [0.4.4](https://github.com/eea/volto-eea-design-system/compare/0.4.3...0.4.4)
+
+- Make dots container of slick slider relative [`#184`](https://github.com/eea/volto-eea-design-system/pull/184)
+- [R3] Divider component [`#170`](https://github.com/eea/volto-eea-design-system/pull/170)
+- Remove a tag for menu item -> use only the class [`#183`](https://github.com/eea/volto-eea-design-system/pull/183)
+- Autobuild of docusaurus docs [`7f0962d`](https://github.com/eea/volto-eea-design-system/commit/7f0962d26986e801c46b3390a90640b4f5f8cd24)
+- fix(divider): Text colors and transform [`e524e10`](https://github.com/eea/volto-eea-design-system/commit/e524e1002bb0700ea69782cf5a95c6073ab383d2)
+- Autobuild of docusaurus docs [`1652dda`](https://github.com/eea/volto-eea-design-system/commit/1652dda1428a7e4736c0d1b818a0fe27255d12ea)
+- refactor(footer):  to latest figma design #182 [`3e0ba2b`](https://github.com/eea/volto-eea-design-system/commit/3e0ba2b659db9dc1b140d853840a06bd3ce31cab)
+- Autobuild of docusaurus docs [`58402e0`](https://github.com/eea/volto-eea-design-system/commit/58402e040a8a5080b4a07cd575fb9fe87624b593)
+- change(Divider): Rename color property to theme [`0deffc8`](https://github.com/eea/volto-eea-design-system/commit/0deffc823609d23131a85bc180e4a3f5a67a64aa)
+- change(footer): tweaked column sizes to the values before my changes [`fdf2718`](https://github.com/eea/volto-eea-design-system/commit/fdf271868e44bce2904cc28c6fa924ee4c9ba759)
+- refactor(footer): move subfooter logic to the proper component #185 [`3034577`](https://github.com/eea/volto-eea-design-system/commit/303457719128c9699dd34939bd8db2b647977667)
+- change(footer): added managed by section as properties [`9328fc3`](https://github.com/eea/volto-eea-design-system/commit/9328fc3084baf22439e1892d256d9a167b911849)
+- Autobuild of docusaurus docs [`d171921`](https://github.com/eea/volto-eea-design-system/commit/d1719215a0ec3c52474b79d647618e329a627e08)
+- lint fix [`657cf4e`](https://github.com/eea/volto-eea-design-system/commit/657cf4ed917c4ff992aa033c3d9f4884a949d86d)
+- change(footer): moved SubFooter logic to SubFooter.jsx from Footer story [`902383a`](https://github.com/eea/volto-eea-design-system/commit/902383a0bb3446dc69237099bd429ead5e30a6c1)
+- Remove unnecessary spaces [`d137981`](https://github.com/eea/volto-eea-design-system/commit/d137981430809345bfb3ad494e7ab981c93c3e51)
+- Autobuild of docusaurus docs [`5b0be9c`](https://github.com/eea/volto-eea-design-system/commit/5b0be9cc97e1166b983f46d5732e5c57f4e970d0)
+- refactor(testimonial): changed divider color to secondary [`84282f9`](https://github.com/eea/volto-eea-design-system/commit/84282f960ab22ccb8403e975c055c61d1023193a)
+- Autobuild of docusaurus docs [`e856488`](https://github.com/eea/volto-eea-design-system/commit/e85648834e23c02670957b8463d4e0fd3a649728)
+- fix(footer): story aria labels for social media links [`254bdc7`](https://github.com/eea/volto-eea-design-system/commit/254bdc7ba944943f5d08a71f9d0a3a31bdc06044)
+- docs(divider): switch to secondary color [`239844b`](https://github.com/eea/volto-eea-design-system/commit/239844be374a2f6bc4667e7ab3d2f52bfdc181ad)
+- perf(storybook): added storybook favicon [`38eabc3`](https://github.com/eea/volto-eea-design-system/commit/38eabc3124c85dd56bf5c68c0fb1e967c39055ec)
+- docs(divider): showcase path fix [`d5ea03f`](https://github.com/eea/volto-eea-design-system/commit/d5ea03f60034edc918054aa273e44b84b2537716)
+- refactor(footer): update links and logo align [`7afbab9`](https://github.com/eea/volto-eea-design-system/commit/7afbab9b37982a557ac8bfa4430205ce912c3b8b)
+- refactor(footer): logo updates and adjustments [`101bc9d`](https://github.com/eea/volto-eea-design-system/commit/101bc9dfe4136240457f335de867a83c28d59339)
+- fix(divider): restore space between classes [`c595c15`](https://github.com/eea/volto-eea-design-system/commit/c595c152c144463f33757157ed7d6797ae31ceed)
+- refactor(footer): update controls [`b0b872b`](https://github.com/eea/volto-eea-design-system/commit/b0b872b1415c9792a5886f619195f9c0471ea564)
+- refactor(footer): use tokens and adjust spacing [`2cb1669`](https://github.com/eea/volto-eea-design-system/commit/2cb166949913f725271050e863b38e7630748135)
+- refactor(Divider):add divider with content inside story [`e2d66dc`](https://github.com/eea/volto-eea-design-system/commit/e2d66dca901fa189d69b65239dc34b1969097be8)
+- refactor(footer): use remix icons for social links [`5ef9aa2`](https://github.com/eea/volto-eea-design-system/commit/5ef9aa2cebb6f96857a1920cefbf7e367b4d7c28)
+- refactor(Divider_:remove green color class & add tertiary [`95f3018`](https://github.com/eea/volto-eea-design-system/commit/95f30186bc1768e08f00ad7d5ffa2a70402ac553)
+- refactor(Divider):remove clean class and use fitted prop [`8d2be35`](https://github.com/eea/volto-eea-design-system/commit/8d2be350dcc44fd56b5fbfb791fb6b2a45bd8a52)
+- refactor(footer): update logos and less structure [`66b8e0f`](https://github.com/eea/volto-eea-design-system/commit/66b8e0f12825968d94f7d572f2823d9a8a3a239b)
+- refactor(footer): first footer updates [`d18a2ee`](https://github.com/eea/volto-eea-design-system/commit/d18a2ee59d0deb143075d8dfeb949898ad1f6399)
+- refactor(divider): remove custom divider from theme config [`a0409e8`](https://github.com/eea/volto-eea-design-system/commit/a0409e8df3c9ba043717140455369a3630f0da85)
+- refactor(testimonial): update divider [`784450a`](https://github.com/eea/volto-eea-design-system/commit/784450abdf395318fe89d8d3d0a1e398393cc93c)
+- refactor(divider): remove custom divider [`d4870d2`](https://github.com/eea/volto-eea-design-system/commit/d4870d2252ad216e82213fa1f94cc39609ae676d)
+- feat(divider): create story for divider [`b10a2e0`](https://github.com/eea/volto-eea-design-system/commit/b10a2e08b14962bed9f13317754f4124ee60d313)
+
 #### [0.4.3](https://github.com/eea/volto-eea-design-system/compare/0.4.2...0.4.3)
 
+> 3 June 2022
+
+- Release [`#181`](https://github.com/eea/volto-eea-design-system/pull/181)
 - Autobuild of docusaurus docs [`adc7b64`](https://github.com/eea/volto-eea-design-system/commit/adc7b64312b98a56a893bc99571149353a8c0f00)
 - fix(edit): Fix columns/accordion inner toolbar padding [`fafbb52`](https://github.com/eea/volto-eea-design-system/commit/fafbb525baa60c339906dc6a33d2f9418d050be6)
 - Autobuild of docusaurus docs [`12f9a51`](https://github.com/eea/volto-eea-design-system/commit/12f9a51906a6b444857c2b2c988436eeab412064)

package/package.json

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

package/src/semantic.less

@@ -233,10 +233,6 @@
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/inpageNavigation';
 }
 
-& {
-  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/divider';
-}
-
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/testimonial';
 }

package/src/ui/Divider/Divider.stories.jsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import { Divider, Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Divider',
+  component: Divider,
+  argTypes: {
+    theme: {
+      options: ['default', 'primary', 'secondary', 'tertiary'],
+      control: { type: 'select' },
+      description: 'Variations of the divider',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+    },
+    section: {
+      description:
+        'A divider can provide greater margins to divide sections of content.',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    hidden: {
+      description:
+        'A hidden divider divides content without creating a dividing line',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    short: {
+      description: 'Shot divider',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    fitted: {
+      description: 'Remove space above or below the divider',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    content: {
+      description: 'Horizontal divider content',
+      table: {
+        type: {
+          summary: 'string | object',
+        },
+        defaultValue: {
+          summary: '',
+        },
+      },
+    },
+  },
+};
+
+function Template({ hidden, theme, section, short, fitted }) {
+  return (
+    <Container>
+      <p>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+        ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+        magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+        arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+        Nullam dictum felis eu pede link mollis.
+      </p>
+      <Divider
+        hidden={hidden}
+        section={section}
+        className={`${theme === 'default' ? '' : theme} ${
+          short ? 'short' : ''
+        }`}
+        fitted={fitted}
+      />
+      <p>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+        ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+        magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+        arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+        Nullam dictum felis eu pede link mollis.
+      </p>
+    </Container>
+  );
+}
+
+export const Default = Template.bind({});
+Default.args = {
+  theme: 'default',
+  hidden: false,
+  section: false,
+  short: false,
+  fitted: false,
+};
+Default.parameters = {
+  controls: { exclude: ['content'] },
+  hideNoControlsWarning: true,
+};
+
+function DividerWithContentTemplate({ content, theme, section, fitted }) {
+  return (
+    <Container>
+      <p>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+        ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+        magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+        arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+        Nullam dictum felis eu pede link mollis.
+      </p>
+      <Divider
+        horizontal
+        section={section}
+        className={`${theme === 'default' ? '' : theme}`}
+        fitted={fitted}
+      >
+        <div>{content}</div>
+      </Divider>
+      <p>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+        ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+        magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+        arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+        Nullam dictum felis eu pede link mollis.
+      </p>
+    </Container>
+  );
+}
+
+export const DividerWithContent = DividerWithContentTemplate.bind({});
+DividerWithContent.args = {
+  content: 'Divider Content',
+  theme: 'default',
+  section: false,
+  fitted: false,
+};
+DividerWithContent.parameters = {
+  controls: { exclude: ['short', 'hidden'] },
+  hideNoControlsWarning: true,
+};

package/src/ui/Footer/Contact.jsx

@@ -7,16 +7,18 @@ const Contact = ({ children, contacts, header, address }) =>
   children?.length ? (
     children
   ) : (
-    <>
+    <div className="contact-block">
       <p className="header">{header}</p>
       {contacts?.map((contact, index) => (
         <div className="contact" key={index}>
-          <Icon name={contact.icon} size="big"></Icon>
-          <Link to={contact.link}>{contact.text}</Link>
+          <Link to={contact.link}>
+            <Icon className={contact.icon} size="big"></Icon>
+            {contact.text}
+          </Link>
         </div>
       ))}
       {address && <p className="address">{address}</p>}
-    </>
+    </div>
   );
 
 Contact.propTypes = {

package/src/ui/Footer/FooterHeader.jsx

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

package/src/ui/Footer/FooterSites.jsx

@@ -9,7 +9,7 @@ const Sites = (props) => {
 
   //fallback to props
   return (
-    <div className="theme-sites">
+    <div className="theme-sites mobile hidden">
       <div className="logos">
         <Grid columns={5}>
           {props.sites &&

package/src/ui/Footer/Social.jsx

@@ -9,9 +9,9 @@ const Social = (props) => {
 
   return (
     <div className="social">
-      {props.social.map((item, index) => (
+      {props.social?.map((item, index) => (
         <a href={item.link} aria-label={`${item.name} link`} key={index}>
-          <Icon name={item.name}></Icon>
+          <Icon className={item.icon}></Icon>
         </a>
       ))}
     </div>

package/src/ui/Footer/SubFooter.jsx

@@ -1,9 +1,62 @@
 import React from 'react';
+import Footer from './Footer';
+
+import { Grid, Image } from 'semantic-ui-react';
 
 const SubFooter = (props) => {
   if (props.children) {
     return <div>{props.children}</div>;
   }
+
+  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>
+
+            <Grid>
+              {props.managedBy &&
+                props.managedBy.map((manager, index) => (
+                  <Grid.Column
+                    mobile={manager.columnSize.mobile}
+                    tablet={manager.columnSize.tablet}
+                    computer={manager.columnSize.computer}
+                  >
+                    <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}>
+          <div className="item">
+            <Footer.Contact
+              contacts={props.contacts}
+              header={props.contactHeader}
+              address={props.address}
+            />
+            <Footer.Social social={props.social} />
+          </div>
+        </Grid.Column>
+      </Grid>
+      <Grid.Row>
+        <Footer.Actions actions={props.actions} />
+      </Grid.Row>
+    </div>
+  );
 };
 
 export default SubFooter;

package/src/ui/Quote/Testimonial/Testimonial.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Divider from '../../Divider/Divider';
 
 import Quote from '../Quote';
-import { Grid, Card, Image } from 'semantic-ui-react';
+import { Grid, Card, Image, Divider } from 'semantic-ui-react';
 
 Testimonial.propTypes = {
   title: PropTypes.string,
@@ -12,9 +11,9 @@ Testimonial.propTypes = {
 function Testimonial({ children, ...rest }) {
   return (
     <div className="eea testimonial" {...rest}>
-      <Divider />
+      <Divider fitted className="secondary" />
       <Grid>{children}</Grid>
-      <Divider />
+      <Divider fitted className="secondary" />
     </div>
   );
 }

package/theme/theme.config

@@ -85,7 +85,6 @@
 @header      : 'eea';
 @tag        : 'eea';
 @inpageNavigation : 'eea';
-@divider     : 'eea';
 @testimonial : 'eea';
 @avatarGrid  : 'eea';
 @keyContent  : 'eea';