solution-center-header

Dependencies

Maintainers

Versions

Alerts

File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

solution-center-header

Reusable header for the Zalando Solution Center

2.3.1

latest

source

npm

Version published: 7 years ago

Weekly downloads: 22; decreased by-24.14%

Maintainers: 5

Install size: 2.36 MB

Created: 8 years ago

Weekly downloads

Readme

Source

Solution Center Header

Reusable header for software connecting to the Zalando Solution Center

Changelog

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

License

MIT

Changelog

You can check the new changes implemented in every version in the changelog

Keywords

FAQs

What is solution-center-header?

Is solution-center-header popular?

Is solution-center-header well maintained?

Last updated on 11 Apr 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install