NLR-branding

NLR branding components

• NLR-branding
  • Installation
  • Components
    • Header
      • Props
    • Footer
      • Props
    • Menu
      • Props
    • ExternalMenuLink
      • Props
    • MenuLink
      • Props
    • MenuSpacer
    • SubMenu
      • Props

Installation

[!NOTE] This is still pending a repository rename, and is still currently referencing the NREL name. Also, CSS ID and class names are mostly left as nrel for now, as changing would require consumers to update their applications.

npm i nrel-branding-react

Find this on the NPM registry at https://www.npmjs.com/package/nrel-branding-react

Components

Header

The header component is a wrapper component that can be passed React components as children. Most commonly, this will be passed the Menu component included in this package along with it's corresponding children.

  <Header appTitle="NLR Application Title">
    <Menu>
      <MenuLink to="/route">Link Title</MenuLink>
      <MenuLink to="/another-route">Another Link Title</MenuLink>
    </Menu>
  </Header>

Props

| Name | Type | Default | Description | | ------------ | ------- | -------------- | ----------------------------------------------------------------------------------------- | | appTitle* | node | | The title of the application | | className | string | | Add a class to be used for styling | | logoSrc | string | NLR blue logo | The source of the logo image file. This should probably live in the public dir of the app | | logoSection | node | NLR logo | Allow the override of the default logo section with the code passed in | | children | node | | The nav bar. In general, this will be the menu component from this library | | noStick | boolean | false | Boolean determining if the menu bar should not be sticky to the top of the page | | isSlim | boolean | false | Boolean for slimmer headers. Mostly used dynamically for data-viewer pages | | hasMobileNav | boolean | false | Boolean used to turn on a mobile nav when in mobile resolutions |

* Required prop

Footer

The footer component to be set at the bottom of the page.

  <Footer />

Props

| Name | Type | Default | Description | | --------- | ------ | ------- | ---------------------------------- | | className | string | | Add a class to be used for styling |

Menu

The nav bar menu used to either navigate through the current application, link to external sites or for Auth.

  <Menu>
    <MenuLink to="/route">Link Title</MenuLink>
    <ExternalMenuLink to="https://www.nlr.gov">NLR Homepage</ExternalMenuLink>
    <MenuSpacer />
    <CustomAuthComponent />
  </Menu>

Props

| Name | Type | Default | Description | | ----------------- | ------- | ------- | ---------------------------------------------------------------------------------------------------------------- | | children* | node | | Most likely this will be a series of MenuLinks or custom components | | className | string | | Add a class to be used for styling | | isSubMenu | boolean | false | Boolean saying if the parent is the sub menu or a main menu | | noStick | boolean | false | Boolean determining if the menu bar should not be sticky to the top of the page | | scrollContainerId | string | | css selector id of container where scroll events occur on the dom. Used to apply the sticky class to the nav bar |

* Required prop

ExternalMenuLink

A navbar link to visit an external site

  <ExternalMenuLink to="https://www.nlr.gov">NLR</ExternalMenuLink>

Props

| Name | Type | Default | Description | | --------- | ------ | ------- | ------------------------------------------------------ | | to* | URL | | Link destination | | children* | node | | JSX of HTML elements, or in most cases just label text | | alt | string | | the link title (similar to an image alt tag) | | className | string | | Add a class to be used for styling |

* Required prop

MenuLink

A navbar link to visit an site

  <MenuLink to="/data-viewer">Data Viewer</MenuLink>

Props

| Name | Type | Default | Description | | --------- | ------ | ------- | ----------------------------------------------------------------------------------- | | to* | URL | | Link destination | | children* | node | | JSX of HTML elements, or in most cases just label text | | className | string | | Add a class to be used for styling | | isCurrent | bool | false | Whether or not this is active, default (undefined) will infer from the current path |

* Required prop

MenuSpacer

Adds space between menu items. Generally used between nav buttons on the left of the nav bar and the auth buttons on the right.

  <MenuSpacer />

SubMenu

A dropdown menu to show multiple links under one nav bar label.

  <SubMenu label="Key Findings">
    <MenuLink to="/key-findings/scenarios">Scenarios</MenuLink>
    <MenuLink to="/key-findings/topics">Topics</MenuLink>
  </SubMenu>

Props

| Name | Type | Default | Description | | --------- | ------ | ------- | --------------------------------------------------------------------- | | label* | string | | Nav button label | | children* | node | | Most likely this will be a series of MenuLinks or custom components | | className | string | | Add a class to be used for styling |

* Required prop