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 Webpack for compilation and minification.

Component usage

$3

#### HTML

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

#### React

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

export class App extends React.Component {
render() {
return (



);
}
}
`

_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._

$3

#### React

To avoid having multiple verbose imports use the babel import plugin to rewrite them:

`js
import Footer from '@noths/global-components/compiled/static/react/footer';
import Header from '@noths/global-components/compiled/static/react/header';
// becomes
import { Header, Footer } from '@noths/global-components';
`

Setup the babel import plugin:

`js
// Install the plugin
npm install babel-plugin-import

// Add the following import config (you may have to update your .babelrc file to .babelrc.js):
module.exports = {
...
plugins: [
...
[
'import',
{
libraryName: '@noths/global-components',
libraryDirectory: 'compiled/static/react'
},
],
],
};
`

The following functions are available as helpers to get the CDN path for the static stylesheet and script files:

globalsUrls(env) [development, qa, staging, oldstaging, production]

Returns the global static files CDN URLs for that environment (globally shared across services e.g. css resets etc.)

`js
import { globalsUrls } from '@noths/global-components/helpers/static-files';




...

;
`

globalComponentsUrls(env) [development, qa, staging, oldstaging, production]

Returns the static files CDN URLS for the environment that includes all the components in a single bundle.

`js
import { globalComponentsUrls } from '@noths/global-components/helpers/static-files';






...