@mskcc/carbon-react/es/components/MskFooter/Footer.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import * as React from 'react';
import PropTypes from 'prop-types';

var _span;
const Footer = _ref => {
  let {
    className,
    children,
    logo,
    logoSrc,
    maxWidth,
    navItems,
    bottomSection,
    ...other
  } = _ref;
  const widthClass = () => {
    const classPrefix = ' msk-footer-container-';
    switch (maxWidth) {
      case 'fluid':
        return classPrefix + 'fluid';
      case 'max':
        return classPrefix + '2400';
      default:
        return '';
    }
  };
  const YEAR = new Date();
  const footerClasses = `msk-footer ${className}`.trim();
  const footerWidthClasses = `msk-footer-container ${widthClass()}`.trim();
  return /*#__PURE__*/React.createElement("footer", _extends({
    role: "contentinfo",
    className: footerClasses
  }, other), /*#__PURE__*/React.createElement("div", {
    className: footerWidthClasses
  }, /*#__PURE__*/React.createElement("div", {
    className: "msk-footer-section msk-footer-base"
  }, children ?? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "msk-footer-base-group"
  }, /*#__PURE__*/React.createElement("div", {
    className: "msk-footer-logo-container"
  }, logo ? logo : _span || (_span = /*#__PURE__*/React.createElement("span", {
    className: "msk-footer--logo"
  }))), !!navItems && navItems.length > 0 && /*#__PURE__*/React.createElement("ul", {
    className: "msk-footer-base-link-group"
  }, navItems.map((item, index) => /*#__PURE__*/React.createElement("li", {
    key: index,
    className: "msk-footer-base-link"
  }, item.type === 'button' || item.buttonProps ? /*#__PURE__*/React.createElement("button", _extends({
    type: "button",
    className: "msk-link msk-link-button"
  }, item.buttonProps), item.label) : /*#__PURE__*/React.createElement("a", _extends({
    href: item.href,
    className: "msk-link"
  }, item.linkProps), item.label))))), /*#__PURE__*/React.createElement("div", {
    className: "msk-footer-copyright"
  }, "\xA9", YEAR.getFullYear(), " Memorial Sloan Kettering Cancer Center"), bottomSection && /*#__PURE__*/React.createElement("div", {
    className: "msk-footer-copyright msk-footer-bottom-section"
  }, bottomSection)))));
};
Footer.displayName = 'Footer';
Footer.propTypes = {
  /**
   * Render an bottom section at the bottom of the footer
   */
  bottomSection: PropTypes.node,
  /**
   * Specify the contents of the footer
   */
  children: PropTypes.node,
  /**
   * Add custom class
   */
  className: PropTypes.string,
  /**
   * Render a custom logo
   */
  logo: PropTypes.node,
  /**
   * Specify the location of the logo file
   */
  logoSrc: PropTypes.string,
  /**
   * Specify the max width of the contents inside the footer
   */
  maxWidth: PropTypes.oneOf(['default', 'fluid', 'max']),
  /**
   * Pass an array of right side navigation items with a pre-defined data structure.
   */
  navItems: PropTypes.arrayOf(PropTypes.shape({
    type: PropTypes.oneOf(['link', 'button']),
    label: PropTypes.node,
    linkProps: PropTypes.object,
    // For link attributes
    buttonProps: PropTypes.object // For button attributes
  }))
};

export { Footer, Footer as default };