Solution-center-header NPM

Solution Center Header

Reusable header for software connecting to the Zalando Solution Center

Installation

Install via bower or npm

bower install solution-center-header
npm install solution-center-header

Usage

Load the script in your <head>:

<script src="../bower_components/solution-center-header/dist/solutioncenter.header.js"></script>
<!-- OR -->
<script src="../node_modules/solution-center-header/dist/solutioncenter.header.js"></script>

Include the solutioncenter.header module as a dependency in your app.

Insert the directive at the top of your app:

<sc-header
    user="user"
    modules="modules"
    current-module="moduleId"
    brand="brand"
    logout="logout()"
    solution-center-url="url">
</sc-header>

###Parameters

The following parameters are required for the header to work as expected.

user: A user object. Controls the display of the user name with submenu allowing access to a user account pages. Additionally it's used for determining whether the brand switcher is shown, based on the number of merchants the user has access to.
```
user = { firstName: "John", lastName: "Doe", merchants: [1, 34, 76] }
```
modules: An array of module objects. Controls the display of the navigation with links to modules that the user has permission to access.
```
modules = [ { name: "name", url: "example.com" },
            { name: "name", url: "example.com" } ]
```
current-module: A number representing the id of the current module displayed, in order to highlight it in the header
```
current-module = 0
```

The following parameters are optional, allowing further customization of the header.

brand: A brand object. Controls the display of the brand switcher with a submenu allowing access to the brand page and switching to another brand.
```
brand = { name: "name", id: 1 }
```
logout: A function that is called when a user clicks the logout link.
```
logout = function () { 
  // handle logout 
}
```
solution-center-url: A URL override for the solution center. This URL is used to construct the links for the user account, brand account, and brand switcher pages. The URL should have a trailing /#/. If no URL is provided, the solution center production URL is used by default.
```
solution-center-url = "https://www.example.com/#/"
```
debug-config: Configuration object for debugging purposes
```
debug-config = "{ showFeature: true }"
```

Style

The solution center header is intended to be used with the dress code style. That package is included as a dependency.

Follow these steps to ensure you are using the right style for the header:

Follow the usage instructions for the dress code.
Load the header styles. Add this to your <head>:
<link rel="stylesheet" href="../bower_components/solution-center-header/dist/solutioncenter.header.css">
Or for NPM:
<link rel="stylesheet" href="../node_modules/solution-center-header/dist/solutioncenter.header.css">

Demo

See the demo folder. To run the demo locally, follow the Develop instructions below.

Develop

Clone the repository, then run:

npm install

Available commands

npm run dev: open the demo in a browser, watches for changes to trigger build, tests, and reload
npm test: lint, build, and test the project
npm run lint: lint source and spec files
npm run clean: remove /dist directory
npm run build: lint and build the project
npm run release [major|minor|patch]: release a new version of the header to npm and bower