Merge pull request #1 from eea/develop

Design system theme config and add Footer, Header components
eea · Mar 1, 2022 · 74e7d0d · 74e7d0d
2 parents 6995e9e + dc8fe52
commit 74e7d0d
Show file tree

Hide file tree

Showing 7 changed files with 497 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,26 @@
-# Changelog
+### Changelog
 
-## 0.1.0
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
-- Initial release
+Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+
+#### [0.1.1](https://github.com/eea/volto-eea-website-theme/compare/0.1.0...0.1.1)
+
+- add custom breadcrumbs [`b2f4bdc`](https://github.com/eea/volto-eea-website-theme/commit/b2f4bdc6aac35cded6e4223bea274abc1e2bf39f)
+- eslint [`72eb35a`](https://github.com/eea/volto-eea-website-theme/commit/72eb35a87dd8f3acc0e653a69cb136fadaa25faa)
+- don't use breadcrumbs for now [`3752d96`](https://github.com/eea/volto-eea-website-theme/commit/3752d966fec094a22e93d6c7dc5e70a696796304)
+- add header and breadcrumbs [`68da038`](https://github.com/eea/volto-eea-website-theme/commit/68da0389fb6dd8b24eecb5e31e14f0ffcba2656b)
+- Adjust footer [`edf0f84`](https://github.com/eea/volto-eea-website-theme/commit/edf0f84f301e7895f293bd3d7bf8529cafdadc32)
+- point to latest design-system release [`69df5de`](https://github.com/eea/volto-eea-website-theme/commit/69df5deb8476ba7c49ce6e77a0bf7370772138ae)
+- make it ready for development [`1b395a4`](https://github.com/eea/volto-eea-website-theme/commit/1b395a49c5199f62e42b2cec84977985d0951eaf)
+- ...include in addons as well [`58a7cfe`](https://github.com/eea/volto-eea-website-theme/commit/58a7cfe5b0ccaf3ad3422e7fa0ecf713331db5c4)
+- include design system as a dep [`ad9e7c3`](https://github.com/eea/volto-eea-website-theme/commit/ad9e7c325300fb553865f5c347f097b2ac271a92)
+- remove theme packages, import it from design system directly [`705288b`](https://github.com/eea/volto-eea-website-theme/commit/705288bdc39e5ba8e24e225b0db165e7427c1efc)
+- update: eea-design-system footer [`70adb5a`](https://github.com/eea/volto-eea-website-theme/commit/70adb5a4ffb22bd0e1a0b8b926743b19aa569cfa)
+- add footer and updated theme import [`11a9a98`](https://github.com/eea/volto-eea-website-theme/commit/11a9a98edc75532de6f8df308e7956025a82165f)
+
+#### 0.1.0
+
+> 21 February 2022
+
+- Initial commit [`6a9c03a`](https://github.com/eea/volto-eea-website-theme/commit/6a9c03a7cebe71ca87e82cf58c42904063e9d8d3)
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -12,12 +12,16 @@
     "plone",
     "react"
   ],
+  "addons": [
+    "@eeacms/volto-eea-design-system"
+  ],
   "repository": {
     "type": "git",
     "url": "git@github.com:eea/volto-eea-website-theme.git"
   },
   "dependencies": {
-    "@plone/scripts": "*"
+    "@plone/scripts": "*",
+    "@eeacms/volto-eea-design-system": "*"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

diff --git a/razzle.extend.js b/razzle.extend.js
@@ -0,0 +1,28 @@
+const path = require('path');
+const plugins = (defaultPlugins) => {
+  return defaultPlugins;
+};
+const modify = (config, { target, dev }, webpack) => {
+  const themeConfigPath = `${__dirname}/theme/theme.config`;
+  config.resolve.alias['../../theme.config$'] = themeConfigPath;
+  config.resolve.alias['../../theme.config'] = themeConfigPath;
+  const projectRootPath = path.resolve('.');
+  const themeLessPath = `${projectRootPath}/node_modules/@eeacms/volto-eea-design-system/theme`;
+
+  config.resolve.alias['eea-design-system-theme'] = dev
+    ? `${projectRootPath}/src/addons/volto-eea-design-system/theme/themes/eea`
+    : `${themeLessPath}/themes/eea`;
+
+  const semanticLessPath = `${projectRootPath}/node_modules/semantic-ui-less`;
+  const hasDesignSystemInstalled = config.resolve.alias['eea-volto-themes'];
+  config.resolve.alias['eea-volto-theme-folder'] = hasDesignSystemInstalled
+    ? themeLessPath
+    : semanticLessPath;
+
+  return config;
+};
+
+module.exports = {
+  plugins,
+  modify,
+};
diff --git a/src/customizations/volto/components/theme/Breadcrumbs/Breadcrumbs.jsx b/src/customizations/volto/components/theme/Breadcrumbs/Breadcrumbs.jsx
@@ -0,0 +1,19 @@
+/**
+ * Breadcrumbs components.
+ * @module components/theme/Breadcrumbs/Breadcrumbs
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import EEABreadcrumbs from '@eeacms/volto-eea-design-system/ui/Breadcrumbs/Breadcrumbs.jsx';
+
+/**
+ * Breadcrumbs container method.
+ */
+const BreadcrumbsComponent = ({ pathname }) => {
+  return <EEABreadcrumbs pathname={pathname} />;
+};
+
+export default connect((state) => ({
+  pathname: state.router?.location?.pathname,
+}))(BreadcrumbsComponent);
diff --git a/src/customizations/volto/components/theme/Footer/Footer.jsx b/src/customizations/volto/components/theme/Footer/Footer.jsx
@@ -0,0 +1,183 @@
+/**
+ * Footer component.
+ * @module components/theme/Footer/Footer
+ */
+
+import React from 'react';
+import EEAFooter from '@eeacms/volto-eea-design-system/ui/Footer/Footer';
+import { Grid, Image } from 'semantic-ui-react';
+import Logo1 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group.svg';
+import Logo2 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group-3.svg';
+import Logo3 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group-154.svg';
+import Logo4 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group-95.svg';
+import Logo5 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group-2.svg';
+import Logo6 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group-98.svg';
+import Logo7 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group-5.svg';
+import Logo8 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group-96.svg';
+import Logo9 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group-4.svg';
+import Logo10 from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/Extras/Group-1.svg';
+import EIONETLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/EIONETLogo.png';
+import EEALogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Footer/EEA-Logo-white.svg';
+
+const Footer = (props) => {
+  const defaultProps = {
+    actions: [
+      {
+        link: 'https://www.eea.europa.eu/login_form',
+        title: 'CMS Login',
+        copy: false,
+      },
+      {
+        link: '/sitemap',
+        title: 'Sitemap',
+        copy: false,
+      },
+      {
+        link: '/privacy',
+        title: 'Privacy',
+        copy: false,
+      },
+      {
+        link: '/copyright',
+        title: 'Copyright',
+        copy: true,
+      },
+    ],
+    sites: [
+      {
+        link: 'https://biodiversity.europa.eu/',
+        src: Logo1,
+        alt: 'Biodiversity',
+      },
+      {
+        link: 'https://climate-energy.eea.europa.eu/',
+        src: Logo2,
+        alt: 'Climate and energy in the EU',
+      },
+      {
+        link: 'https://insitu.copernicus.eu/',
+        src: Logo3,
+        alt: 'Copernicus in situ',
+      },
+      {
+        link: 'https://ipchem.jrc.ec.europa.eu/RDSIdiscovery/ipchem/index.html',
+        src: Logo4,
+        alt: 'Information platform for chemical monitoring',
+      },
+      {
+        link: 'https://water.europa.eu/freshwater',
+        src: Logo5,
+        alt: 'WISE freshwater',
+      },
+      {
+        link: 'https://forest.eea.europa.eu/',
+        src: Logo6,
+        alt: 'Forest information system for europe',
+      },
+      {
+        link: 'https://climate-adapt.eea.europa.eu/',
+        src: Logo7,
+        alt: 'Climate adapt',
+      },
+      {
+        link: 'https://land.copernicus.eu/',
+        src: Logo8,
+        alt: 'Copernicus land monitoring service',
+      },
+      {
+        link: 'https://industry.eea.europa.eu/',
+        src: Logo9,
+        alt: 'European industrial emissions portal',
+      },
+      {
+        link: 'https://water.europa.eu/marine',
+        src: Logo10,
+        alt: 'WISE marine',
+      },
+    ],
+    social: [
+      {
+        name: 'twitter',
+        link: 'https://twitter.com/euenvironment',
+      },
+      {
+        name: 'facebook',
+        link: 'https://www.facebook.com/European.Environment.Agency',
+      },
+      {
+        name: 'linkedin',
+        link: 'https://www.linkedin.com/company/european-environment-agency',
+      },
+      {
+        name: 'youtube',
+        link: 'https://www.youtube.com/user/EEAvideos',
+      },
+      {
+        name: 'rss',
+        link: '/subscription/news-feeds',
+      },
+    ],
+    contacts: {
+      header: 'Contact Us',
+      contacts: [
+        {
+          icon: 'comment outline',
+          text: 'Ask your question',
+        },
+        {
+          icon: 'envelope outline',
+          text: 'Sign up to our newsletter',
+        },
+      ],
+      address: 'Kongens Nytorv 6 1050 Copenhagen K (+45) 33 36 71 00',
+    },
+    ...props,
+  };
+  return (
+    <EEAFooter>
+      <EEAFooter.Header>The EEA also contributes to</EEAFooter.Header>
+      <EEAFooter.Sites sites={defaultProps.sites} />
+
+      <EEAFooter.SubFooter>
+        <div className="subfooter">
+          <Grid>
+            <Grid.Column mobile={6} tablet={7} computer={8}>
+              <div className="item">
+                <div className="site logo">
+                  <Image src={EEALogo} alt="EEA Logo"></Image>
+                  <p className="description">An agency of the European Union</p>
+                </div>
+
+                <div className="eionet logo">
+                  <Image src={EIONETLogo} alt="EIONET Logo"></Image>
+                  <p className="description">
+                    European Environment
+                    <br />
+                    Information and
+                    <br />
+                    Observation Network
+                  </p>
+                </div>
+              </div>
+            </Grid.Column>
+            <Grid.Column mobile={6} tablet={5} computer={4}>
+              <div className="item">
+                <EEAFooter.Contact contacts={defaultProps.contacts} />
+                <EEAFooter.Social social={defaultProps.social} />
+              </div>
+            </Grid.Column>
+          </Grid>
+          <Grid>
+            <Grid.Row>
+              <Grid.Column>
+                <EEAFooter.Actions actions={defaultProps.actions} />
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </div>
+      </EEAFooter.SubFooter>
+    </EEAFooter>
+  );
+};
+
+export default Footer;