diff --git a/CHANGELOG.md b/CHANGELOG.md index 3742d31d..35b14076 100644 --- 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 index 0fbe8c6b..a90570b5 100644 --- 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 new file mode 100644 index 00000000..65bc560b --- /dev/null +++ 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 new file mode 100644 index 00000000..a0929dff --- /dev/null +++ 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 ; +}; + +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 new file mode 100644 index 00000000..c6c31be9 --- /dev/null +++ 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 ( + + The EEA also contributes to + + + +
+ + +
+
+ EEA Logo +

An agency of the European Union

+
+ +
+ EIONET Logo +

+ European Environment +
+ Information and +
+ Observation Network +

+
+
+ + +
+ + +
+ + + + + + + + + +
+ + + ); +}; + +export default Footer; diff --git a/src/customizations/volto/components/theme/Header/Header.jsx b/src/customizations/volto/components/theme/Header/Header.jsx new file mode 100644 index 00000000..14937fb7 --- /dev/null +++ b/src/customizations/volto/components/theme/Header/Header.jsx @@ -0,0 +1,127 @@ +/** + * Header component. + * @module components/theme/Header/Header + */ + +import React, { Component } from 'react'; + +import EEAHeader from '@eeacms/volto-eea-design-system/ui/Header/Header'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import config from '@plone/volto/registry'; +import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers'; +import { getNavigation } from '@plone/volto/actions'; + +const linksDropdown = { + title: 'Environmental information systems', + links: [ + { + title: 'Biodiversity Information System for Europe', + href: 'https://biodiversity.europa.eu/', + }, + { + title: 'Climate Adaptation Platform', + href: 'https://climate-adapt.eea.europa.eu/', + }, + { + title: 'Copernicus in situ component', + href: 'https://insitu.copernicus.eu/', + }, + { + title: 'European Industrial Emissions Portal', + href: 'https://industry.eea.europa.eu/', + }, + { + title: 'Forest Information System for Europe', + href: 'https://forest.eea.europa.eu/', + }, + { + title: 'Information Platform for Chemical Monitoring', + href: 'https://ipchem.jrc.ec.europa.eu/RDSIdiscovery/ipchem/index.html', + }, + { + title: 'Marine Water Information System for Europe', + href: 'https://water.europa.eu/marine', + }, + { + title: 'Fresh Water Information System for Europe', + href: 'https://water.europa.eu/freshwater', + }, + ], +}; + +/** + * Header component class. + * @class Header + * @extends Component + */ +class Header extends Component { + /** + * Property types. + * @property {Object} propTypes Property types. + * @static + */ + static propTypes = { + token: PropTypes.string, + pathname: PropTypes.string.isRequired, + }; + + /** + * Default properties. + * @property {Object} defaultProps Default properties. + * @static + */ + static defaultProps = { + token: null, + }; + + componentDidMount() { + const { settings } = config; + if (!hasApiExpander('navigation', getBaseUrl(this.props.pathname))) { + this.props.getNavigation( + getBaseUrl(this.props.pathname), + settings.navDepth, + ); + } + } + + componentDidUpdate(prevProps, prevState) { + const { settings } = config; + if ( + prevProps.pathname !== this.props.pathname || + prevProps.token !== this.props.token + ) { + if (!hasApiExpander('navigation', getBaseUrl(this.props.pathname))) { + this.props.getNavigation( + getBaseUrl(prevProps.pathname), + settings.navDepth, + ); + } + } + } + + /** + * Render method. + * @method render + * @returns {string} Markup for the component. + */ + render() { + const menuItems = this.props.items; + return ( + + ); + } +} + +export default connect( + (state) => ({ + token: state.userSession.token, + items: state.navigation.items, + }), + { getNavigation }, +)(Header); diff --git a/theme/theme.config b/theme/theme.config new file mode 100644 index 00000000..76717994 --- /dev/null +++ b/theme/theme.config @@ -0,0 +1,110 @@ +/* + +████████╗██╗ ██╗███████╗███╗ ███╗███████╗███████╗ +╚══██╔══╝██║ ██║██╔════╝████╗ ████║██╔════╝██╔════╝ + ██║ ███████║█████╗ ██╔████╔██║█████╗ ███████╗ + ██║ ██╔══██║██╔══╝ ██║╚██╔╝██║██╔══╝ ╚════██║ + ██║ ██║ ██║███████╗██║ ╚═╝ ██║███████╗███████║ + ╚═╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚══════╝╚══════╝ + +*/ + +/******************************* + Theme Selection +*******************************/ + +/* To override a theme for an individual element + specify theme name below +*/ + +/* Global */ +@site : 'eea'; +@reset : 'eea'; + +/* Elements */ +@button : 'eea'; +@container : 'eea'; +@divider : 'eea'; +@flag : 'eea'; +@header : 'eea'; +@icon : 'eea'; +@image : 'eea'; +@input : 'eea'; +@label : 'eea'; +@list : 'eea'; +@loader : 'eea'; +@placeholder : 'eea'; +@rail : 'eea'; +@reveal : 'eea'; +@segment : 'eea'; +@step : 'eea'; + +/* Collections */ +@breadcrumb : 'eea'; +@form : 'eea'; +@grid : 'eea'; +@menu : 'eea'; +@message : 'eea'; +@table : 'eea'; + +/* Modules */ +@accordion : 'eea'; +@checkbox : 'eea'; +@dimmer : 'eea'; +@dropdown : 'eea'; +@embed : 'eea'; +@modal : 'eea'; +@nag : 'eea'; +@popup : 'eea'; +@progress : 'eea'; +@rating : 'eea'; +@search : 'eea'; +@shape : 'eea'; +@sidebar : 'eea'; +@sticky : 'eea'; +@tab : 'eea'; +@transition : 'eea'; + +/* Views */ +@ad : 'eea'; +@card : 'eea'; +@comment : 'eea'; +@feed : 'eea'; +@item : 'eea'; +@statistic : 'eea'; + +/* Extras */ +@main : 'eea'; +@custom : 'eea'; +/* EEA Design system custom components */ +@blockquote : 'eea'; +@pullquote : 'eea'; +@banner : 'eea'; +@timeline : 'eea'; +@footer : 'eea'; +@header : 'eea'; +@inpageNavigation : 'eea'; + +/******************************* + Folders +*******************************/ + +/* Path to theme packages */ +@themesFolder: '~volto-themes'; + +/* Path to site override folder */ +@siteFolder: '~eea-design-system-theme'; + +/******************************* + Import Theme +*******************************/ +@import (multiple) "~eea-volto-theme-folder/theme.less"; + +@fontPath: "~volto-themes/default/assets/fonts"; + +.loadAddonOverrides() { + @import (optional) "@{siteFolder}/@{addon}/@{addontype}s/@{addonelement}.overrides"; +} + + +/* End Config */ \ No newline at end of file