open-index/open-npm huggingface dataset:
npm package: @morteza-jamali/brand-colors
Description: A collection of branding colors of all the major companies.
Author: Piérre Reimertz
Latest version: 1.0.3

<div  align="center">
  <h2>Brand Colors</h2>
</div>

Collection of brand colors available in SASS, LESS, CSS, Javascript + **Typescript**

### Installation

```text

npm install @morteza-jamali/brand-colors



yarn add @morteza-jamali/brand-colors

```

### Usage

#### SASS, SCSS

In SASS each brand variable is a list of colors .

```sass

@user "sass:list";

@import "~@morteza-jamali/dist/scss/brandColors.scss";



.a-div {

color: list.nth($bcAdidas, 0);

}

```

#### LESS

In LESS each brand is a map of colors .

```less
@import "~@morteza-jamali/brand-colors/dist/less/brandColors.less";

.a-div {
  color: #bcAdidas[0];
}
```

#### CSS

```css

<link rel="stylesheet" href="node_modules/@morteza-jamali/brand-colors/dist/css/brandColors.css">

<style>
  .bc-adidas {
    color: var(--bcAdidas-0);
    background-color: var(--bcAdidas-1);
  }
</style>

<span class="bc-adidas">This is a test text</span>

```

#### Javascript , Typescript (ES6 Syntax)

In Javascript each brand is an array of colors .

```javascript
import { bcAdidas } from "@morteza-jamali/brand-colors";

console.log(bcAdidas);

/* Will print ["#000000","#be0027","#cf8d2e","#e4e932",
"#2c9f45","#371777","#52325d","#511378"] */
```

> Minified files for CSS and Javascript are available .
npm package: @mortonprod/react-fade-background-component
Description: This component will place background behind children. The fade in should complete before the bottom of background image is at the botton of viewport.
Author: Alexander Morton
Latest version: 1.0.1

# react-fade-background-component

This component will place background behind children.
The fade in should complete before the bottom of background image is at the botton of viewport.
The background image size is determined from the size of the viewport. It uses width to centre and changes with media queries to get the correct height.
The background fill covers all the children.
Child should not rerender since props/state internal have not changed. 
Furthermore, the virtual dom will mitigate any perf impact.
Overflow should be hidden so we can't scroll oto side. Must not attach to main div so we can scroll app passed as child.
MUST SPECIFY POSITION TO USE OVER-FLOW WITH ABSOLUTE AND RELATIVE ELEMENTS
 
## Installation
To install this component into your project run:

`npm install @mortonprod/react-fade-background-component`

## Usage

Import the component like so: 

`
import Product from @mortonprod/react-fade-background-component
`


then import the css:


`
import @mortonprod/react-fade-background-component/dist/index.css
` 

Note you must pull the css independently of the component. 

## Contributing

You are free to contribute to this component if you wish.
npm package: @mortonprod/react-nav-component
Description: A react router with auth0 and share buttons built in
Author: Alexander Morton
Latest version: 2.0.3

# Introduction
[![Build Status](https://travis-ci.org/mortonprod/react-nav-component.svg?branch=master)](https://travis-ci.org/mortonprod/react-nav-component)
[![Coverage Status](https://coveralls.io/repos/github/mortonprod/react-nav-component/badge.svg?branch=master)](https://coveralls.io/github/mortonprod/react-nav-component?branch=master)
[![npm version](https://badge.fury.io/js/%40mortonprod%2Freact-nav-component.svg)](https://badge.fury.io/js/%40mortonprod%2Freact-nav-component)
[![Dependecies](https://david-dm.org/mortonprod/react-nav-component.svg)](https://david-dm.org/mortonprod/react-nav-component.svg)

This opinionated react router component. It adds share buttons, signin and route creation. 

As arguments it takes. 

* Routes
    * name
    * location
    * function or element.
* Authentication

The authentication is passed as a separate argument. This is done so we can access this information from
our components. 

## NPM
To install this component into your project run:

`npm install @mortonprod/react-nav-component`

Import the component like so: 

`
import {CreateRouter,Auth} from @mortonprod/react-nav-component
`

You will initialise Auth and then pass this to the router and any routes you like. 
Check out the render.js file in src as an example of how to do this.


We then import the css:

`
import @mortonprod/react-nav-component/dist/index.css
` 

Note you must pull the css independently of the component so you can easily style the component differently.

# Build Github

Get all the dependencies
 
```
npm run install
```

You will need to add your own config.js file to run this repository from github. 
I don't want to add my auth0 credentials to my github :-). Check out [auth0](https://auth0.com/) for more
details.

Once you have added this you can run webpack-dev-server:

```
npm run start
```

and link to [localhost:8080/webpack-dev-server/](http://localhost:8080/webpack-dev-server/).


The tests are run with

```
npm run test
```
or to run with watchman

```
npm run test:watch
```

Documentation is create and displayed with jsdocs and node js:

```
npm run docs
```

then connect to the node server with [localhost:3001](https://localhost:3001) to see all the documentation.

## Contributing

You are free to contribute to this component if you wish.

## Note to Self 

Be careful when you use webpack resolve for this project. Since the css, tests and js are named the same. Webpack
will just import the first file which matches the extension. This means you import css and dev tools just cryptically complains you have not exported from the file. Nightmare.
npm package: @mortonprod/react-product-component
Description: This is a small react component to display product information
Author: Alexander Morton
Latest version: 1.3.3

# react-product-component

This component displays a picture along with name, description and price passed through props.
The main function of this component is to correctly render variable size images. We want to be able to display variables aspect ratio photos.
All photos must have the same height or they will leave large gaps when grouped together. They also must be about 300px width for mobile.

## Installation
To install this component into your project run:

`npm install @mortonprod/react-product-component`

## Usage

Import the component like so:

`
import Product from @mortonprod/react-product-component
`


then import the css:


`
import @mortonprod/react-product-component/dist/index.css
` 

Note you must pull the css independently of the component. 

## Contributing

You are free to contribute to this component if you wish.
npm package: @mortonprod/react-product-up-component
Description: This component works with react-product-component. As you scroll down it exposes more and more elements from the bottom of the screen.
Author: Alexander Morton
Latest version: 1.3.4

# react-product-up-component

This component works with react-product-component. As you scroll down it exposes more and more elements from the bottom of the screen.

## Installation
To install this component into your project run:

`npm install @mortonprod/react-product-up-component`

## Usage

Import the component like so:

`
import Product from @mortonprod/react-product-up-component
`


then import the css:


`
import @mortonprod/react-product-up-component/dist/index.css
` 

Note you must pull the css independently of the component. 

## Contributing

You are free to contribute to this component if you wish.
npm package: @mortonprod/react-products-component
Description: This is a small react component to display multiple products information
Author: Alexander Morton
Latest version: 1.0.1

# react-products-component


This component is used with the react-product-component but can easily be exanded to hold any other component.
It takes makes a list of products and displays them in scrollable div.
## Installation
To install this component into your project run:

`npm install @mortonprod/react-products-component`

## Usage

Import the component like so:

`
import Product from @mortonprod/react-products-component
`


then import the css:


`
import @mortonprod/react-products-component/dist/index.css
` 

Note you must pull the css independently of the component. 

## Contributing

You are free to contribute to this component if you wish.