All files / lib/Footer index.js

100% Statements 7/7
100% Branches 11/11
100% Functions 1/1
100% Lines 7/7
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 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152                        5x 5x     5x                             5x                         89x                             89x                 89x                                                                                                                                                                      
/**
 * @category layout
 * @component footer
 * @variations collab-ui-react
 */
 
import React from 'react';
import PropTypes from 'prop-types';
 
export default class Footer extends React.Component {
 
  render() {
    const { color, logo, copyright, social, className, children } = this.props;
    const footerTopSection =  children && (
      <section className='cui-footer__top'>{children}</section>
    );
    const footerBottomSection = (logo || copyright || social) && (
      <section className='cui-footer__bottom'>
        {
          (logo || copyright) &&
            <span className='cui-footer__bottom--position-left'>
              <span className='cui-footer__logo'>{logo}</span>
              {copyright}
            </span>
        }
        {
          social && <span className='cui-footer__bottom--position-right'>{social}</span>
        }
      </section>
    );
 
    return (
      <footer className={
        `cui-footer` +
        ` cui-footer--${color}` +
        ` ${className}`
      }>
        {footerTopSection}
        {footerBottomSection}
      </footer>
    );
  }
}
 
Footer.propTypes = {
  /** @prop Children nodes to render inside the Footer | null */
  children: PropTypes.node,
  /** @prop Optional css class string | '' */
  className: PropTypes.string,
  /** @prop Optional color css styling | 'dark' */
  color: PropTypes.string,
  /** @prop Set the copyright within the Footer | '' */
  copyright: PropTypes.string,
  /** @prop Set the logo within the Footer | null */
  logo: PropTypes.node,
  /** @prop Node containing social media links | null */
  social: PropTypes.node
};
 
Footer.defaultProps = {
  children: null,
  className: '',
  color: 'dark',
  copyright: '',
  logo: null,
  social: null
};
 
Footer.displayName = 'Footer';
 
/**
* @name Footer
* @description default footer
*
* @category layout
* @component footer
* @section default
*
* @js
import {
  Icon,
  Footer,
  List,
  ListItem,
  SocialList,
} from '@collab-ui/react';
 
export default class DefaultFooter extends React.PureComponent {
  render() {
    const copyright = '2018 Cisco and /or its affiliate';
    const social = (
      <SocialList>
        <List tabType='horizontal' className='social-list'>
          <ListItem link='https://www.facebook.com'>
            <i className='icon icon-facebook-circle_24' />
          </ListItem>
          <ListItem link='https://www.twitter.com'>
            <i className='icon icon-twitter-circle_24' />
          </ListItem>
          <ListItem link='https://www.linkedin.com'>
            <i className='icon icon-linkedin-circle_24' />
          </ListItem>
        </List>
      </SocialList>
    );
 
    return (
      <div className='row'>
        <Footer
          logo={<i className='icon icon-cisco-logo' />}
          copyright='2018 Cisco and /or its affiliate'
          social={social}
        >
          <div className='columns medium-3'>
            <h5 className='cui-footer__list-item-title'>Connect</h5>
            <List>
              <ListItem label='24/7 Support' />
              <ListItem label='Developer Events' />
              <ListItem label='Contact Sales' />
            </List>
          </div>
          <div className='columns medium-3'>
            <h5 className='cui-footer__list-item-title'>Handy Links</h5>
            <List>
              <ListItem label='Cisco Webex Ambassadors' />
              <ListItem label='Cisco Webex Control Hub' />
              <ListItem label='Cisco Webex Innovation Fund' />
            </List>
          </div>
          <div className='columns medium-3'>
            <h5 className='cui-footer__list-item-title'>Resources</h5>
            <List>
              <ListItem label='Open Source Bot Starter Kits' />
              <ListItem label='Download Cisco Webex Teams' />
              <ListItem label='Devnet Learning Labs' />
            </List>
          </div>
          <div className='columns medium-3'>
            <List>
              <ListItem label='Terms Of Service' />
              <ListItem label='Privacy Policy' />
              <ListItem label='Cookie Policy' />
              <ListItem label='Trademarks' />
            </List>
          </div>
        </Footer>
      </div>
    );
  }
}
**/