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

1.2.0

Source

npm

Version published: 8 years ago

Weekly downloads: 14; increased by75%

Maintainers: 4

Install size: 2.53 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

bower install solution-center-header

Install via npm

npm install solution-center-header

Usage

Load the script in your <head> from Bower:

<script src="../bower_components/solution-center-header/dist/solution-center-header.js"></script>

Or from NPM:

<script src="../node_modules/solution-center-header/dist/solution-center-header.js"></script>

Include the solutionCenter module as a dependency in your app.

Insert the directive at the top of your app:

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

###Parameters

All parameters are optional. The Zalando logo and the help widget always appear. Other elements appear only if the respective parameter is populated.

user: A user object. Controls the display of the user name with submenu allowing access to a user account page and logout.

user = { firstName: "John", lastName: "Doe }
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 }
modules: An array of module objects. Controls the display of the module menu with links to modules that the user has permission to access.
```
modules = [ { name: "name", url: "example.com" }, 
            { name: "name", url: "example.com" } ]
```
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/#/"
current-module: A number representing the id of the current module displayed, in order to highlight it in the header

current-module = 0

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/solution-center header.css">

Or for NPM:

<link rel="stylesheet" href="../node_modules/solution-center-header/dist/solution-center header.css">
For sizing, be sure the header is inside a <body> with class dc-body, and your <html> has class dc-html.

Demo

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

Develop

Clone the repository, then run:

npm install
bower install

Install Gulp via npm if you don't have it

npm install -g gulp

Available commands

gulp: build and test the project
gulp build: build the project and make new files indist
gulp serve: start a server to serve the demo page and launch a browser then watches for changes in src files to reload the page
gulp test: run tests
gulp serve-test: runs tests and keep test browser open for development. Watches for changes in source and test files to re-run the tests

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 27 Jun 2016

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