Solution Center Header
Reusable header for software connecting to the Zalando Solution Center
Installation
Install via bower or npm
bower install solution-center-headernpm install solution-center-header
Usage
-
Load the script in your
<head>
:<!-- OR --> -
Include the
solutioncenter.header
module as a dependency in your app. -
Insert the directive at the top of your app:
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.
{// 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 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