feat(ec-footer): apply new specs - INNO-1157

src/systems/ec/implementations/react/packages/footer/Footer.jsx

@@ -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>
+
+    {/* European 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;

src/systems/ec/implementations/react/packages/footer/package.json

@@ -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"
+  }
+}

src/systems/ec/implementations/react/packages/footer/stories/Index.jsx

@@ -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} />);

src/systems/ec/implementations/vanilla/packages/ec-component-footer/README.md

@@ -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