UNPKG

@massds/mayflower-react

Version:

React versions of Mayflower design system UI components

52 lines 2.22 kB
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /** * SiteLogo module. * @module @massds/mayflower-react/SiteLogo * @requires module:@massds/mayflower-assets/scss/01-atoms/site-logo * @requires module:@massds/mayflower-assets/scss/01-atoms/image */ import React from "react"; import PropTypes from "prop-types"; import Image from "../Image/index.mjs"; import getFallbackComponent from "../utilities/getFallbackComponent.mjs"; const SiteLogo = _ref => { let url = _ref.url, image = _ref.image, siteName = _ref.siteName, title = _ref.title, Wrapper = _ref.Wrapper; const RenderedWrapper = getFallbackComponent(Wrapper, React.Fragment); // Remove title attribute and use alt attribute for image as screen reader label. const computedAlt = title || 'Mass.gov home'; return /*#__PURE__*/React.createElement(RenderedWrapper, null, /*#__PURE__*/React.createElement("div", { className: "ma__site-logo" }, /*#__PURE__*/React.createElement("a", { href: (url === null || url === void 0 ? void 0 : url.domain) || '/' }, (image === null || image === void 0 ? void 0 : image.src) && /*#__PURE__*/React.createElement(Image, _extends({}, image, { alt: computedAlt })), siteName && /*#__PURE__*/React.createElement("span", { "aria-hidden": "true" }, siteName)))); }; SiteLogo.propTypes = process.env.NODE_ENV !== "production" ? { /** The URL for the site */ url: PropTypes.shape({ /** The URL for the site root */ domain: PropTypes.string.isRequired }), /** The site logo image to display. */ image: PropTypes.shape(Image.propTypes), /** An optional label to display next to the site logo. */ siteName: PropTypes.string, /** The screen reader label for the site logo link. */ title: PropTypes.string, /** An uninstantiated component for rendering a wrapper around the site logo div. */ Wrapper: PropTypes.elementType } : {}; SiteLogo.defaultProps = { image: { width: 45, height: 45 } }; export default SiteLogo;