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>
<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 () {
}
-
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 reloadnpm test
: lint, build, and test the projectnpm run lint
: lint source and spec filesnpm run clean
: remove /dist
directorynpm run build
: lint and build the projectnpm 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