all files / components/ Footer.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
2×
 
6×
 
6×
 
 
 
 
7×
 
 
 
7×
 
 
 
 
7×
 
 
 
 
 
 
 
 
21×
 
 
 
 
 
28×
7×
 
 
 
 
 
21×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1×
 
 
1×
 
 
 
 
 
import React from 'react';IEE
import PropTypes from 'prop-types';
import { Link } from 'react-router';EIII
 
class Footer extends React.Component {
  componentDidMount() {
    // some logic here - we only test if the method is called
  }
  render() {
    const footerItemStyle = {
      textDecoration: 'underline',
      color: 'white',
    };
    const footerMailToStyle = {
      textDecoration: 'underline',
      color: 'white',
      cursor: 'pointer',
    };
    return (
      <footer id="footer" className="print--hide" style={{ position: 'absolute', left: 0, right: 0, overflow: 'hidden' }}>
        <h2 className="visuallyhidden">Footer links</h2>
        <div className="footer">
          <div className="wrapper">
            <nav>
              <div className="footer-nav col-wrap">
                {
                  this.props.footerSection.map((section) => {
                    return (
                      <div key={section.title} className="col col--lg-one-third col--md-one-third">
                        <h3 className="footer-nav__heading">{section.title}</h3>
                        <ul className="footer-nav__list">
                          {
                            section.items.map((item) => {
                              if (item.emailHref) {
                                return (
                                  <li key={item.text} className="footer-nav__item" style={footerMailToStyle} onClick={() => (window.location.href = item.emailHref)}>
                                    {item.text}
                                  </li>
                                );
                              }
                              return (
                                <Link key={item.text} to={item.link}>
                                  <li className="footer-nav__item" style={footerItemStyle}>
                                    {item.text}
                                  </li>
                                </Link>
                              );
                            })
                          }
                        </ul>
                      </div>);
                  })
                }
              </div>
            </nav>
          </div>
        </div>
      </footer>
    );
  }
}
 
Footer.propTypes = {
  footerSection: PropTypes.array.isRequired,
};
 
export default Footer;