@myuw-web-components/myuw-app-bar
Advanced tools
@myuw-web-components/myuw-app-bar - npm Package Compare versions
Comparing version 0.2.1 to 1.0.0
| { | ||
| "name": "@myuw-web-components/myuw-app-bar", | ||
| "version": "0.2.1", | ||
| "description": "Top app bar based on Material guidelines and the UW-Madison app style guide, developed with Polymer 3", | ||
| "main": "dist/myuw-app-bar.js", | ||
| "dependencies": { | ||
| "@polymer/app-layout": "^3.0.0-pre.18", | ||
| "@polymer/paper-styles": "^3.0.0-pre.19", | ||
| "@polymer/polymer": "^3.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@webcomponents/webcomponentsjs": "^2.0.0", | ||
| "wct-browser-legacy": "^1.0.0", | ||
| "webpack": "^4.12.0", | ||
| "webpack-cli": "^3.0.3" | ||
| }, | ||
| "directories": { | ||
| "test": "test" | ||
| }, | ||
| "version": "1.0.0", | ||
| "description": "A material top app bar designed for use with other MyUW web components", | ||
| "main": "myuw-app-bar.html", | ||
| "scripts": { | ||
| "test": "polymer test", | ||
| "start": "npm run build && polymer serve", | ||
| "build": "webpack --config webpack.config.js" | ||
| "start": "superstatic --port 8080 --host 127.0.0.1" | ||
| }, | ||
@@ -34,3 +18,6 @@ "repository": { | ||
| }, | ||
| "homepage": "https://github.com/myuw-web-components/myuw-app-bar#readme" | ||
| "homepage": "https://github.com/myuw-web-components/myuw-app-bar#readme", | ||
| "devDependencies": { | ||
| "superstatic": "^5.0.1" | ||
| } | ||
| } |
@@ -1,14 +0,10 @@ | ||
| # \<myuw-app-bar\> | ||
| # `<myuw-app-bar>` | ||
|  | ||
| A material top app bar designed for use with other MyUW web components | ||
| Top app bar based on Material guidelines and the UW-Madison app style guide, developed with [Polymer 3](https://www.polymer-project.org/). | ||
| ## Development and contribution | ||
| ### Running locally | ||
| To run the demo app locally and test the component, run the following commands: | ||
| 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. | ||
| ``` | ||
| ```bash | ||
| $ npm install | ||
@@ -18,39 +14,12 @@ $ npm start | ||
| ### Running tests | ||
| ## Getting Started | ||
| ``` | ||
| $ polymer test | ||
| ``` | ||
| Use the component's HTML tag wherever you want: | ||
| This component is set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). | ||
| ## How to use | ||
| 1. Include the component as a dependency (either via CDN or as a project dependency via node) | ||
| 2. Add a script tag to the document `<head>` to get the `myuw-app-bar.js` file | ||
| ### Using a CDN | ||
| Include the following script tag in your document `<head>`: | ||
| ```html | ||
| <script src="https://unpkg.com/@myuw-web-components/myuw-app-bar@0.1.1"> | ||
| ``` | ||
| ### Using the NPM package | ||
| Install the package as a dependency of your project (then use a script tag point to /node_modules): | ||
| ``` | ||
| $ npm i --save @myuw-web-components/myuw-app-bar | ||
| ``` | ||
| ### Then use the tag in your HTML | ||
| ```HTML | ||
| <myuw-app-bar | ||
| themeName="MyUW" | ||
| themeUrl="" | ||
| appName="" | ||
| appUrl="" | ||
| theme-name="MyUW" | ||
| theme-url="" | ||
| app-name="" | ||
| app-url="" | ||
| background="" | ||
@@ -62,15 +31,23 @@ color="" | ||
| #### Configurable properties | ||
| ### 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 | ||
| - **appName (app-name):** Sets the app name (e.g. "Bucky Backup") | ||
| - **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) | ||
| - **background:** Sets the top bar's background color | ||
| - **color:** Sets the top bar's text color (defaults to white) | ||
| #### Slots for child components | ||
| ### Configuration / child components | ||
| *Note: These slots are meant to be used with components in the "myuw" namespace. The child components listed below are works in progress.* | ||
| Use the named `<slot>` tags to include child components of the top-app-bar: | ||
| ```html | ||
| <myuw-app-bar> | ||
| <your-navigation-drawer-component slot="myuw-navigation"></your-navigation-drawer-component> | ||
| <your-notifications-component slot="myuw-notifications"></your-notifications-component> | ||
| </myuw-app-bar> | ||
| ``` | ||
| **Available slots:** | ||
| - **myuw-navigation**: Insert the `<myuw-navigation-drawer>` component | ||
@@ -81,10 +58,2 @@ - **myuw-help**: Insert the `<myuw-help-and-feedback>` component | ||
| **Using slots**: | ||
| To insert a component into the appropriate slot, add a "slot" attribute to your component's HTML tag with the corresponding slot name. For example: | ||
| ```HTML | ||
| <myuw-app-bar> | ||
| <myuw-navigation slot="myuw-navigation"></myuw-navigation> | ||
| </myuw-app-bar> | ||
| ``` | ||
| *Note: Child components are a WIP* |
Sorry, the diff of this file is not supported yet
New alerts
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
Empty package
Supply chain riskPackage does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.
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
Fixed alerts
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
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-100%
0
- Dev dependency count
- decreased by-75%
1
- Number of low quality alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-91.92%
15203
- Number of package files
- decreased by-63.64%
4
- Lines of code
- decreased by-100%
0
- Number of lines in readme file
- decreased by-36.36%
56
- Number of medium supply chain risk alerts
- increased byInfinity%
2
Dependency changes
- Removed@polymer/app-layout@^3.0.0-pre.18
- Removed@polymer/paper-styles@^3.0.0-pre.19
- Removed@polymer/polymer@^3.0.0
- Removed@polymer/app-layout@3.1.0(transitive)
- Removed@polymer/font-roboto@3.0.2(transitive)
- Removed@polymer/iron-flex-layout@3.0.1(transitive)
- Removed@polymer/iron-media-query@3.0.1(transitive)
- Removed@polymer/iron-resizable-behavior@3.0.1(transitive)
- Removed@polymer/iron-scroll-target-behavior@3.0.1(transitive)
- Removed@polymer/paper-styles@3.0.1(transitive)
- Removed@polymer/polymer@3.5.2(transitive)
- Removed@webcomponents/shadycss@1.11.2(transitive)