@massds/mayflower-react/dist/FooterSlim/index.mjs

React versions of Mayflower design system UI components

/**
 * FooterSlim module.
 * @module @massds/mayflower-react/FooterSlim
 * @requires module:@massds/mayflower-assets/scss/03-organisms/footer-slim
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
 * @requires module:@massds/mayflower-assets/scss/01-atoms/email
 * @requires module:@massds/mayflower-assets/scss/01-atoms/phone-number
 * @requires module:@massds/mayflower-assets/scss/01-atoms/address
 */
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
const today = new Date();
const year = today.getFullYear();

const FooterSlim = props => {
  const title = props.title,
        description = props.description,
        siteLogo = props.siteLogo,
        _props$stackedLogo = props.stackedLogo,
        stackedLogo = _props$stackedLogo === void 0 ? false : _props$stackedLogo,
        _props$links = props.links,
        links = _props$links === void 0 ? null : _props$links,
        _props$contact = props.contact,
        contact = _props$contact === void 0 ? null : _props$contact,
        _props$copyright = props.copyright,
        copyright = _props$copyright === void 0 ? year + " Commonwealth of Massachusetts." : _props$copyright;
  const containerClasses = classNames('ma__footer-slim__container ma__container', {
    'ma__footer-slim__container--stacked': stackedLogo
  });
  const logoWrapperClasses = classNames({
    'ma__footer-slim__container__logos': true,
    'ma__footer-slim__container__logos--stacked': stackedLogo
  });
  const innerWrapperClasses = classNames({
    'ma__footer-slim__container__inner': true,
    'ma__footer-slim__container__inner--stacked': stackedLogo
  });
  return /*#__PURE__*/React.createElement("footer", {
    className: "ma__footer-slim",
    id: "footer"
  }, /*#__PURE__*/React.createElement("div", {
    className: containerClasses
  }, /*#__PURE__*/React.createElement("div", {
    className: logoWrapperClasses
  }, siteLogo), /*#__PURE__*/React.createElement("div", {
    className: innerWrapperClasses
  }, /*#__PURE__*/React.createElement("div", {
    className: "ma__footer-slim__info"
  }, /*#__PURE__*/React.createElement("div", {
    className: "ma__footer-slim__title"
  }, title), /*#__PURE__*/React.createElement("p", null, description), /*#__PURE__*/React.createElement("p", {
    className: "ma__footer-slim__copyright"
  }, "\xA9", ' ', copyright)), /*#__PURE__*/React.createElement("div", {
    className: "ma__footer-slim__details"
  }, links && /*#__PURE__*/React.createElement("div", {
    className: "ma__footer-slim__links"
  }, links.map((link, linkIndex) =>
  /*#__PURE__*/

  /* eslint-disable-next-line react/no-array-index-key */
  React.createElement("a", {
    href: link.href,
    key: "footslimlinks-" + linkIndex
  }, link.title))), contact && /*#__PURE__*/React.createElement("address", {
    className: "ma__footer-slim__contact"
  }, contact.map((field, i) =>
  /*#__PURE__*/

  /* eslint-disable-next-line react/no-array-index-key */
  React.createElement("div", {
    className: "ma__footer-slim__contact__item",
    key: "filterbox-field-" + i
  }, field.icon && /*#__PURE__*/React.cloneElement(field.icon, {
    width: 20,
    height: 20
  }), field.component)))))));
};

FooterSlim.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The main title to be displayed in the footer */
  title: PropTypes.string.isRequired,

  /** Bolded copyright info starting with © (Defaults to matching Mass.gov) */
  copyright: PropTypes.string,

  /** A short description */
  description: PropTypes.string.isRequired,

  /** Additional links for key information */
  links: PropTypes.arrayOf(PropTypes.shape({
    href: PropTypes.string,
    title: PropTypes.string
  })),

  /** Contact details for the responsible authority */
  contact: PropTypes.arrayOf(PropTypes.shape({
    icon: PropTypes.element,
    component: PropTypes.node
  })),

  /** One or multiple logos rendered at the footer */
  siteLogo: PropTypes.node.isRequired,

  /** Whether logo(s) should be stacked on top of footer title */
  stackedLogo: PropTypes.bool
} : {};
export default FooterSlim;