NOTHS Global Components

Frontend global components used at www.notonthehighstreet.com

Components included

• NOTHS Header
• NOTHS Footer
• NOTHS Copyright statement
• NOTHS Navigation and Mega Dropdown

Background & context

Global components are components which will be on most pages of the site.

These components use mainly vanilla javascript and do not use any framework. This is to reduce the footprint on the consuming application.

The components are written in ES2015 and use Rollup for compilation and minification.

Component usage

Consuming

HTML

The NPM module includes pre bundled HTML files for Header, Navigation, Footer and Copyright components. To include these copy the file contents from node_modules/noths-global-components/compiled/dist/[header|navigation|footer|copyright].html and insert into your page where required.

React

import React from 'react';
import { Header, Navigation, Footer, Copyright } from 'noths-global-components';

export class App extends React.Component {
  render() {
    return (
      <div id="app">
        <Header />
        <Navigation />
          <h1>hello world</h1>
        <Footer />
        <Copyright />
      </div>
    );
  }
}

NOTE: These components are created using dangerouslySetInnerHTML of their counterpart HTML component. There is no JS logic in them, it's simply a wrapper to aid integrating components into React apps.

Triggering the Mobile Navigation

The Header components handles triggering the Mobile navigation when the burger menu is click by default. But if you need to toggle the Mobile navigation from another element you will need to fire a TOGGLE_NAVIGATION event.

Here is an example:

  const event = document.createEvent('Event');
  event.initEvent('TOGGLE_NAVIGATION', true, true):
  document.dispatchEvent(event);

Tracking / GTM / Analytics

A Google Tag Manager (GTM) container has been set up to track global component events (Global Components - GTM-WJKV2N3). To ensure that these events continue to track in your service, you will need to push a dataLayer variable with the environment your service is running on as soon as possible on the page. This allows us to know which Google Analytics account to send the tracked event to.

You will need something like the following in your service:

<script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({ environment: '<development|staging|production>' });
</script>

Installation

Prerequisites

• NodeJS 8

Setup & run

Install dependencies

npm install

Build and start

npm run build_and_start

Build and start for development which will watch your files and rebuild if there are any changes.

npm run watch

Testing

There are two different types of tests in the project.

Unit tests

Unit tests use Mocha and Chai.

To run unit tests:

npm run test:specs

End to end tests (e2e)

End to end tests use Nightwatch.

To run e2e tests:

npm run test:features

Mocks

There are a number of API's that get mocked as part of the e2e tests. Theses mocks are stored in server/dev-mocks.js and these are primed using Simulado.

Releases

The project is hosted on NPM with the name noths-global-components.

Releasing a new verson

When merging, add [release:(major|minor|patch)] to the bottom of your merge description.

Doing so will automatically release a new version once merged to master.

Example:

TODO

• Still using styles-toolkit even though the repo has been deprecated and deleting
• No support for static assets i.e. pushing images to a CDN