fff-global-nav

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