@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
64 lines (63 loc) • 3.74 kB
TypeScript
/**
* Header module.
* @module @massds/mayflower-react/Header
* @requires module:@massds/mayflower-assets/scss/01-atoms/decorative-link
* @requires module:@massds/mayflower-assets/scss/01-atoms/button-with-icon
* @requires module:@massds/mayflower-assets/scss/01-atoms/button-search
* @requires module:@massds/mayflower-assets/scss/01-atoms/input-typeahead
* @requires module:@massds/mayflower-assets/scss/01-atoms/site-logo
* @requires module:@massds/mayflower-assets/scss/02-molecules/main-nav
* @requires module:@massds/mayflower-assets/scss/03-organisms/utility-nav
* @requires module:@massds/mayflower-assets/scss/03-organisms/utility-panel
* @requires module:@massds/mayflower-assets/scss/03-organisms/header
* @requires module:@massds/mayflower-assets/scss/03-organisms/header-hamburger
* @requires module:@massds/mayflower-assets/scss/02-molecules/main-nav-hamburger
* @requires module:@massds/mayflower-assets/scss/03-organisms/header-mixed
*/
import React from 'react';
export interface HeaderProps {
/** An uninstantiated component which handles displaying the site logo. */
Logo?: React.ElementType;
/** An uninstantiated component which handles displaying the site logo on mobile. */
MobileLogo?: React.ElementType;
/** Override default siteName rendered as the hamburger menu toggle button text and aria-label on mobile */
siteName?: string;
/** An uninstantiated component which handles search functionality. */
NavSearch?: React.ElementType;
/** An uninstantiated component that displays the site logo and search on desktop. */
Container?: React.ElementType;
/** An uninstantiated component which handles search functionality on mobile. */
MobileNavSearch?: React.ElementType;
/** An uninstantiated component which handles the display of a skip navigation link. */
SkipNav?: React.ElementType;
/** An uninstantiated component which handles displaying the utility navigation at the top of the header. */
UtilityNav?: React.ElementType;
/** An uninstantiated component which handles displaying the utility navigation at the top of the header on mobile. */
MobileUtilityNav?: React.ElementType;
/** An uninstantiated component which handles the display of individual utility items. */
UtilityItem?: React.ElementType;
/** An uninstantiated component which handles the display of individual utility items on mobile. */
MobileUtilityItem?: React.ElementType;
/** An uninstantiated component which handles the display of the main navigation and its links. */
MainNav?: React.ElementType;
/** An uninstantiated component which handles the display of the main navigation and its links on mobile. */
MobileMainNav?: React.ElementType;
/** An uninstantiated component which handles display of individual navigation items inside of the main navigation. */
NavItem?: React.ElementType;
/** An uninstantiated component which handles display of individual navigation items inside of the main navigation on mobile. */
MobileNavItem?: React.ElementType;
/** An array of items used to create the menu. */
mainItems?: {
href?: string;
text?: string;
active?: boolean;
subNav?: {
href?: string;
text?: string;
}[];
}[];
/** An array of uninstantiated components to render within the utility navigation. */
utilityItems?: React.ElementType[];
}
declare const Header: ({ Logo, MobileLogo, siteName, NavSearch, MobileNavSearch, SkipNav, UtilityNav, MobileUtilityNav, UtilityItem, MobileUtilityItem, MainNav, MobileMainNav, NavItem, MobileNavItem, Container, mainItems, utilityItems }: HeaderProps) => any;
export default Header;