@myuw-web-components/myuw-app-bar
Advanced tools
Comparing version 0.0.1 to 0.1.0
{ | ||
"name": "@myuw-web-components/myuw-app-bar", | ||
"version": "0.0.1", | ||
"version": "0.1.0", | ||
"description": "Top app bar based on Material guidelines and the UW-Madison app style guide, developed with Polymer 3", | ||
"main": "myuw-app-bar.js", | ||
"main": "dist/myuw-app-bar.js", | ||
"dependencies": { | ||
@@ -12,5 +12,6 @@ "@polymer/app-layout": "^3.0.0-pre.18", | ||
"devDependencies": { | ||
"@polymer/iron-demo-helpers": "^3.0.0-pre.19", | ||
"@webcomponents/webcomponentsjs": "^2.0.0", | ||
"wct-browser-legacy": "^1.0.0" | ||
"wct-browser-legacy": "^1.0.0", | ||
"webpack": "^4.12.0", | ||
"webpack-cli": "^3.0.3" | ||
}, | ||
@@ -21,3 +22,5 @@ "directories": { | ||
"scripts": { | ||
"test": "polymer test" | ||
"test": "polymer test", | ||
"start": "npm run build && polymer serve", | ||
"build": "webpack --config webpack.config.js" | ||
}, | ||
@@ -24,0 +27,0 @@ "repository": { |
@@ -7,10 +7,63 @@ # \<myuw-app-bar\> | ||
## Development and contribution | ||
### Running locally | ||
First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. | ||
``` | ||
$ npm install | ||
$ npm start | ||
``` | ||
### Running tests | ||
``` | ||
$ polymer test | ||
``` | ||
This component is set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). | ||
## How to use | ||
There are two ways to use this component in your project: | ||
1. As a `<script>` tag in your page's `<head>` **(WIP)** | ||
2. As an npm dependency (for Node projects) | ||
### Using the script tag | ||
This method is a work in progress. | ||
### Using the NPM package | ||
Install the package as a dependency of your project: | ||
``` | ||
$ npm i --save @myuw-web-components/myuw-app-bar | ||
``` | ||
Use the tag in your HTML: | ||
```HTML | ||
<myuw-app-bar | ||
themeName="MyUW" | ||
themeUrl="" | ||
appName="" | ||
appUrl="" | ||
background="" | ||
color="" | ||
font="" | ||
> | ||
</myuw-app-bar> | ||
``` | ||
### Configurable properties | ||
- **themeName (theme-name):** Sets the theme/portal name (defaults to "MyUW") | ||
- **themeUrl (theme-url):** Sets then URL to go to when user clicks the theme name | ||
- **appName (app-name):** Sets the app name (e.g. "Bucky Backup"), empty by default | ||
- **appUrl (app-url):** Sets then URL to go to when user clicks the app name | ||
- **background:** Sets the top bar's background color (defaults to UW-Madison branding -- #c5050c) | ||
- **color:** Sets the top bar's text color (defaults to white) | ||
- **font:** Sets the CSS `font-family` attribute on the `<app-header>` element. The specified font must be included on the document, or the header will default to `Roboto, Arial, sans-serif`. | ||
@@ -35,20 +88,1 @@ ### Slots for child components | ||
``` | ||
## Development and contribution | ||
### Running locally | ||
First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. | ||
``` | ||
$ npm install | ||
$ polymer serve | ||
``` | ||
### Running tests | ||
``` | ||
$ polymer test | ||
``` | ||
This component is set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
187193
1406
87
4
1