-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
14 changed files
with
545 additions
and
156 deletions.
There are no files selected for viewing
151 changes: 151 additions & 0 deletions
151
src/systems/ec/implementations/react/packages/footer/Footer.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import classnames from 'classnames'; | ||
|
|
||
| import Link from '@ecl/ec-react-component-link/Link'; | ||
|
|
||
| const Footer = ({ identity, sections, common, className, ...props }) => ( | ||
| <footer {...props} className={classnames(className, 'ecl-footer')}> | ||
| {/* Site identity */} | ||
| <section className="ecl-footer__identity"> | ||
| <div className="ecl-container"> | ||
| <div className="ecl-row"> | ||
| <div className="ecl-col-12 ecl-col-md-4"> | ||
| <h1 className="ecl-footer__identity-title">{identity.title}</h1> | ||
| </div> | ||
|
|
||
| <div className="ecl-footer__identity-follow ecl-col-12 ecl-col-md-4"> | ||
| <span className="ecl-footer__identity-label"> | ||
| {identity.follow.label} | ||
| </span> | ||
| {identity.follow.links.map(link => ( | ||
| <Link | ||
| {...link} | ||
| key={link.label} | ||
| className={classnames( | ||
| link.className, | ||
| 'ecl-footer__identity-link' | ||
| )} | ||
| /> | ||
| ))} | ||
| </div> | ||
|
|
||
| <div className="ecl-footer__identity-info ecl-col-12 ecl-col-md-4"> | ||
| {identity.info.map(link => ( | ||
| <Link | ||
| {...link} | ||
| key={link.label} | ||
| className={classnames( | ||
| link.className, | ||
| 'ecl-footer__identity-link' | ||
| )} | ||
| /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| {/* Eurooean Commission */} | ||
| <div className="ecl-footer__sections"> | ||
| <div className="ecl-container"> | ||
| <div className="ecl-row"> | ||
| <section className="ecl-footer__section ecl-col-12 ecl-col-md-4"> | ||
| <h1 className="ecl-footer__section-title">{sections[0].title}</h1> | ||
|
|
||
| <ul className="ecl-footer__section-list"> | ||
| {sections[0].links.map(link => ( | ||
| <li className="ecl-footer__section-item" key={link.label}> | ||
| <Link | ||
| {...link} | ||
| className={classnames( | ||
| link.className, | ||
| 'ecl-footer__section-link' | ||
| )} | ||
| /> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </section> | ||
|
|
||
| <section className="ecl-footer__section ecl-col-12 ecl-col-md-4"> | ||
| <h1 className="ecl-footer__section-title">{sections[1].title}</h1> | ||
|
|
||
| <ul className="ecl-footer__section-list ecl-footer__section-list--inline"> | ||
| {sections[1].links.map(link => ( | ||
| <li className="ecl-footer__section-item" key={link.label}> | ||
| <Link | ||
| {...link} | ||
| className={classnames( | ||
| link.className, | ||
| 'ecl-footer__section-link' | ||
| )} | ||
| /> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </section> | ||
|
|
||
| <section className="ecl-footer__section ecl-col-12 ecl-col-md-4"> | ||
| <h1 className="ecl-footer__section-title">{sections[2].title}</h1> | ||
|
|
||
| <ul className="ecl-footer__section-list"> | ||
| {sections[2].links.map(link => ( | ||
| <li className="ecl-footer__section-item" key={link.label}> | ||
| <Link | ||
| {...link} | ||
| className={classnames( | ||
| link.className, | ||
| 'ecl-footer__section-link' | ||
| )} | ||
| /> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </section> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Common */} | ||
| <section className="ecl-footer__common"> | ||
| <div className="ecl-container ecl-footer__common-container"> | ||
| {common.map(link => ( | ||
| <Link | ||
| {...link} | ||
| key={link.label} | ||
| className={classnames(link.className, 'ecl-footer__common-link')} | ||
| /> | ||
| ))} | ||
| </div> | ||
| </section> | ||
| </footer> | ||
| ); | ||
|
|
||
| Footer.propTypes = { | ||
| identity: PropTypes.shape({ | ||
| title: PropTypes.string, | ||
| follow: PropTypes.shape({ | ||
| label: PropTypes.string, | ||
| links: PropTypes.arrayOf(PropTypes.shape(Link.propTypes)), | ||
| }), | ||
| info: PropTypes.arrayOf(PropTypes.shape(Link.propTypes)), | ||
| }), | ||
| sections: PropTypes.arrayOf( | ||
| PropTypes.shape({ | ||
| title: PropTypes.string, | ||
| links: PropTypes.arrayOf(PropTypes.shape(Link.propTypes)), | ||
| }) | ||
| ), | ||
| common: PropTypes.arrayOf(PropTypes.shape(Link.propTypes)), | ||
| className: PropTypes.string, | ||
| }; | ||
|
|
||
| Footer.defaultProps = { | ||
| identity: {}, | ||
| sections: [], | ||
| common: [], | ||
| className: '', | ||
| }; | ||
|
|
||
| export default Footer; |
35 changes: 35 additions & 0 deletions
35
src/systems/ec/implementations/react/packages/footer/package.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| { | ||
| "name": "@ecl/ec-react-component-footer", | ||
| "author": "European Commission", | ||
| "license": "EUPL-1.1", | ||
| "version": "2.0.0-alpha.0", | ||
| "description": "ECL EC React Footer", | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/ec-europa/europa-component-library.git" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/ec-europa/europa-component-library/issues" | ||
| }, | ||
| "homepage": "https://github.com/ec-europa/europa-component-library", | ||
| "keywords": [ | ||
| "ecl", | ||
| "europa-component-library", | ||
| "design-system", | ||
| "react" | ||
| ], | ||
| "dependencies": { | ||
| "@ecl/ec-component-footer": "^2.0.0-alpha.0", | ||
| "@ecl/ec-layout-grid": "^2.0.0-alpha.0", | ||
| "@ecl/ec-react-component-link": "^2.0.0-alpha.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "classnames": "^2.2.6", | ||
| "react": "^16.4.2", | ||
| "react-dom": "^16.4.2", | ||
| "prop-types": "^15.6.2" | ||
| } | ||
| } |
12 changes: 12 additions & 0 deletions
12
src/systems/ec/implementations/react/packages/footer/stories/Index.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| /* eslint-disable import/no-extraneous-dependencies */ | ||
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { withKnobs } from '@storybook/addon-knobs'; | ||
|
|
||
| import demoContent from '@ecl/ec-specs-footer/demo/data'; | ||
|
|
||
| import Footer from '../Footer'; | ||
|
|
||
| storiesOf('Footer', module) | ||
| .addDecorator(withKnobs) | ||
| .add('default', () => <Footer {...demoContent} />); |
56 changes: 25 additions & 31 deletions
56
src/systems/ec/implementations/vanilla/packages/ec-component-footer/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,43 @@ | ||
| # Footers | ||
| # EC Footer | ||
|
|
||
| ## Why and how to use this component | ||
|
|
||
| The footer offers access to copyright information, disclaimer and terms of use, | ||
| privacy and cookies policy. It allows the user to navigate to corporate social | ||
| media profiles. | ||
| The footer offers access to copyright information, disclaimer and terms of use, privacy and cookies policy. It allows the user to navigate to corporate social media profiles. | ||
|
|
||
| ### Corporate footer | ||
|
|
||
| * information about the European Commission and European Union: links to easily | ||
| navigate between the Political/Information sites | ||
| * information on how to connect to social platforms of the European Commission | ||
| * external links to European Union sites | ||
| * about the Commission's new web presence | ||
| * resources for partners | ||
| * cookies | ||
| * legal notice: a text area notifying the end user of legal information with an | ||
| inline link for more information | ||
| * contact | ||
| This is the part of the footer below the blue dividing line. | ||
|
|
||
| ### Custom footer (non mandatory) | ||
| - information about all EU relevant contacts | ||
| - information on how to Find EU social media accounts | ||
| - work for the European Union | ||
| - site map | ||
| - about this site | ||
| - cookies | ||
| - legal notice: a text area notifying the end user of legal information with an inline link for more information | ||
|
|
||
| In exceptional circumstances, a custom footer can be added. | ||
| ### Custom footer (non mandatory) | ||
|
|
||
| A custom footer should be used only if the corporate footer does not satisfy all | ||
| the page's requirements. | ||
| This is the part of the footer above the blue dividing line. | ||
|
|
||
| In exceptional circumstances, a custom footer can be added. | ||
| A custom footer should be used only if the corporate footer does not satisfy all the page's requirements. | ||
| There can be no overlap with other links in the corporate footer. | ||
|
|
||
| * identification of the site name | ||
| * information on how to connect to social platforms | ||
| * contact | ||
| * other relevant information, such as a link to the site map | ||
| - identification of the site name | ||
| - information on how to connect to social platforms | ||
| - other relevant information, such as a contact | ||
|
|
||
| ### When to use this component | ||
|
|
||
| | Corporate footer | Custom footer | | ||
| | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | All EC sites | Improved sites | | ||
| | Mandatory component | Optional component | | ||
| | <ul class="ecl-list"><li>on every page of every Commission website.</li></ul> | <ul class="ecl-list"><li>consistent on all pages</li><li>should be approved by DTT before implementation</li><li>On every page of every Commission website.</li></ul> | | ||
| | Corporate footer | Custom footer | | ||
| | ----------------------------------------------------------------------------------- | ----------------------------------------------------------- | | ||
| | Mandatory component | Optional component | | ||
| | <ul class="ecl-list"><li>on every page of Europa Inter-instituional sites</li></ul> | <ul class="ecl-list"><li>consistent on all pages.</li></ul> | | ||
|
|
||
| ### Do not use this component | ||
| ## When to use this component | ||
|
|
||
| **Custom footer** | ||
| Custom footer | ||
|
|
||
| * do not try to reflect the navigation structure of the site in the footer | ||
| * don't exceed 2 lines of links | ||
| - do not try to reflect the navigation structure of the site in the footer | ||
| - don't exceed 2 lines of links |
Oops, something went wrong.