Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rbarilani/solution-center-header
Reusable header for software connecting to the Zalando Solution Center
https://github.com/rbarilani/solution-center-header
Last synced: 21 days ago
JSON representation
Reusable header for software connecting to the Zalando Solution Center
- Host: GitHub
- URL: https://github.com/rbarilani/solution-center-header
- Owner: rbarilani
- License: mit
- Created: 2016-04-29T07:57:25.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-04-29T11:46:21.000Z (over 8 years ago)
- Last Synced: 2024-11-09T07:31:50.428Z (3 months ago)
- Language: JavaScript
- Size: 129 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Solution Center Header
Reusable header for software connecting to the Zalando Solution Center
[](https://travis-ci.org/zalando/solution-center-header)
### Installation
Install via bower
```shell
bower install solution-center-header
```
Install via npm
```shell
npm install solution-center-header
```
### Usage
1. Load the script in your `` from Bower:
```html
```
Or from NPM:
```html
```
2. Include the `solutionCenter` module as a dependency in your app.
3. Insert the directive at the top of your app:
```html
```
###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 }` OR `{ name: "John 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/#/"```
### Style
The solution center header is intended to be used with the [dress code](https://github.com/zalando/dress-code) style. That package is included as a dependency.
Follow these steps to ensure you are using the right style for the header:
1. Follow the [usage instructions for the dress code](https://github.com/zalando/dress-code#usage).
2. Load the header styles. Add this to your ``:
``````
Or for NPM:
``````
3. For sizing, be sure the header is inside a `` with class `dc-body`, and your `` 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:
```shell
npm install
bower install
```
Install Gulp via npm if you don't have it
```shell
npm install -g gulp
```
#### Available commands
* `gulp`: build and test the project
* `gulp build`: build the project and make new files in`dist`
* `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