Global Nav

Components

GlobalNav

Properties

| Prop | Required | Info | | ------ | -------- | ------------------------------------------------------------------------------------------------------------------ | | env | yes | string, which testing environment are you on; possible options: "dev", "load", "load01", "qa", "staging", "prod" | | others | no | see https://www.npmjs.com/package/fff-cart |

Example Usage

import { GlobalNav } from 'fff-global-nav';

<GlobalNav env="dev" />;

NewMemberNav

Properties

| Prop | Required | Info | | ------ | -------- | ------------------------------------------------------------------------------------------------------------ | | step | yes | string, which step of NMF are you on; possible options: "shipping", "intro", "survey", "customize", "done" |

Example Usage

import React from 'react';
import { NewMemberNav } from 'fff-global-nav';

() => <NewMemberNav step="customize" />;

NewMemberNavTemplate

Basic template for the new member nav/header. Contains header components (with NMF preset), TimerBar, and NewMemberNav.

Properties

| Prop | Required | Info | | ------ | -------- | ------------------------------------------------------------------------------------------------------------------ | | env | yes | string, which testing environment are you on; possible options: "dev", "load", "load01", "qa", "staging", "prod" | | step | yes | string, which step of NMF are you on; possible options: "shipping", "intro", "survey", "customize", "done" |

Example Usage

import React from 'react';
import { NewMemberNavTemplate } from 'fff-global-nav';

() => <NewMemberNavTemplate env="dev" step="customize" />;

TimerBar

Properties

None yet, all values hard coded until further notice

Example Usage

import React from 'react';
import { TimerBar } from 'fff-global-nav';

() => <TimerBar />;

Getting Started

This project supports npm and yarn. Just keep in mind for local tests not to remove or install the library using yarn, because if the version does not change; yarn will use its cache and the changes will not be displayed.

Install dependencies

npm dependencies must be installed with the installation script. node and npm can be installed with a command line tool such as homebrew or can be downloaded directly. For the installation script to run successfully you need access to bitsrc.

$ npm install

Start script

Run the start script to serve the application in the browser at local.fff-dev.com.

$ sudo npm start

The page will reload if you make edits. You will also see any lint errors in the console.

Unit Test script

$ npm test

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

Publishing

Run the build script to generate the bundle

$ npm run build

To test publishing the package and importing it locally:

//in cart
$ npm pack
$ cp fff-global-nav-<version>.tgz ~
//in application you are importing cart into
$ npm install ~/fff-global-nav-<version>.tgz

We do not recommend using yarn link, as this project uses hooks and this can present issues about the number of React instances (https://github.com/facebook/react/issues/13991)

ES6+

If an ES6+ feature breaks compilation, then that particular feature may need an additional babel dependency requiring both installation and webpack configuration.

Rollup

The bundle is generated using rollup for more information on the available plugins and configuration modification go to the following link https://github.com/rollup/plugins.

Integration with FFF Apps

In addition to installing the package, it is necessary to copy the contents of the src/assets/webfonts folder to the public/webfonts folder of the destination project.

Find the NPM package here: https://www.npmjs.com/package/fff-global-nav