Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@code.gov/code-gov-style
Advanced tools
@code.gov/code-gov-style - npm Package Compare versions
Comparing version 1.15.0-0 to 1.15.0
@@ -519,5 +519,5 @@ 'use strict'; | ||
| category = 'low'; | ||
| } else if (rounded >= 4 && rounded < 7) { | ||
| } else if (rounded >= 4 && rounded < 6) { | ||
| category = 'medium'; | ||
| } else if (rounded >= 7) { | ||
| } else if (rounded >= 6) { | ||
| category = 'high'; | ||
@@ -528,3 +528,3 @@ } else { | ||
| this.innerHTML = "<div class=\"corner-tag ".concat(category, "\"><div class=\"corner-tag-value\">").concat(rounded, "</div></div>"); | ||
| this.innerHTML = "<div aria-label=\"".concat(category, "\" class=\"corner-tag ").concat(category, "\"><div class=\"corner-tag-value\">").concat(rounded, "</div></div>"); | ||
| } | ||
@@ -531,0 +531,0 @@ }], [{ |
@@ -11,4 +11,4 @@ --- | ||
| <div class="card"> | ||
| <div class="corner-tag high"> | ||
| <div class="corner-tag-value">10.6</div> | ||
| <div aria-label="high" class="corner-tag high"> | ||
| <div class="corner-tag-value">7.6</div> | ||
| </div> | ||
@@ -21,4 +21,4 @@ <p>High Value Card</p> | ||
| <div class="card"> | ||
| <div class="corner-tag high"> | ||
| <div class="corner-tag-value">10.6</div> | ||
| <div aria-label="high" class="corner-tag high"> | ||
| <div class="corner-tag-value">7.6</div> | ||
| </div> | ||
@@ -33,4 +33,4 @@ <p>High Value Card</p> | ||
| <div class="card"> | ||
| <div class="corner-tag medium"> | ||
| <div class="corner-tag-value">6.5</div> | ||
| <div aria-label="medium" class="corner-tag medium"> | ||
| <div class="corner-tag-value">5.5</div> | ||
| </div> | ||
@@ -43,4 +43,4 @@ <p>Medium Value Card</p> | ||
| <div class="card"> | ||
| <div class="corner-tag medium"> | ||
| <div class="corner-tag-value">6.5</div> | ||
| <div aria-label="medium" class="corner-tag medium"> | ||
| <div class="corner-tag-value">5.5</div> | ||
| </div> | ||
@@ -56,3 +56,3 @@ <p>Medium Value Card</p> | ||
| <div class="card"> | ||
| <div class="corner-tag low"> | ||
| <div aria-label="low" class="corner-tag low"> | ||
| <div class="corner-tag-value">3.5</div> | ||
@@ -66,3 +66,3 @@ </div> | ||
| <div class="card"> | ||
| <div class="corner-tag low"> | ||
| <div aria-label="low" class="corner-tag low"> | ||
| <div class="corner-tag-value">3.5</div> | ||
@@ -77,5 +77,12 @@ </div> | ||
| # Web Component | ||
| The `quality-tag` component will determine the corner tag to add (either high, medium, or low) based on the `score` value passed. The range for these is: | ||
| - low: a score below 4 | ||
| - medium: a score greater than or equal to 4 and less than 6 | ||
| - high: a score higher than or equal to 6 | ||
| See [quality_tag.js](https://github.com/GSA/code-gov-style/blob/55fca596622a4aed83c690fcc82758ac8c3170d1/src/quality_tag.js) to view the code for this logic. | ||
| <div style="max-width: 400px"> | ||
| <div class="card"> | ||
| <quality-tag score="6.81"></quality-tag> | ||
| <quality-tag score="2.5"></quality-tag> | ||
| <p>Card with Quality Tag as Web Component</p> | ||
@@ -87,3 +94,3 @@ </div> | ||
| <div class="card"> | ||
| <quality-tag score="6.81"></quality-tag> | ||
| <quality-tag score="2.5"></quality-tag> | ||
| <p>Card with Quality Tag as Web Component</p> | ||
@@ -90,0 +97,0 @@ </div> |
@@ -17,2 +17,2 @@ # Contributing | ||
| ### Updating Font | ||
| code-gov-style depends on the font from [code-gov-font](https://github.com/GSA/code-gov-style). In order to use a new version of [code-gov-font](https://github.com/GSA/code-gov-style), update the version in the [package.json](https://github.com/GSA/code-gov-style/blob/master/package.json), run `npm install`, and then run `npm run update-font`. `npm run update-font` basically copies over the relevant font files from the installed package, so they're in the places that Jekyll expects. | ||
| code-gov-style depends on the font from [code-gov-font](https://github.com/GSA/code-gov-font). In order to use a new version of [code-gov-font](https://github.com/GSA/code-gov-font), update the version in the [package.json](https://github.com/GSA/code-gov-style/blob/master/package.json), run `npm install`, and then run `npm run update-font`. `npm run update-font` basically copies over the relevant font files from the installed package, so they're in the places that Jekyll expects. |
@@ -519,5 +519,5 @@ 'use strict'; | ||
| category = 'low'; | ||
| } else if (rounded >= 4 && rounded < 7) { | ||
| } else if (rounded >= 4 && rounded < 6) { | ||
| category = 'medium'; | ||
| } else if (rounded >= 7) { | ||
| } else if (rounded >= 6) { | ||
| category = 'high'; | ||
@@ -528,3 +528,3 @@ } else { | ||
| this.innerHTML = "<div class=\"corner-tag ".concat(category, "\"><div class=\"corner-tag-value\">").concat(rounded, "</div></div>"); | ||
| this.innerHTML = "<div aria-label=\"".concat(category, "\" class=\"corner-tag ").concat(category, "\"><div class=\"corner-tag-value\">").concat(rounded, "</div></div>"); | ||
| } | ||
@@ -531,0 +531,0 @@ }], [{ |
| { | ||
| "name": "@code.gov/code-gov-style", | ||
| "version": "1.15.0-0", | ||
| "version": "1.15.0", | ||
| "description": "Style for code.gov including buttons, banners, and cards. Inspired by and somewhat based on USWDS.", | ||
@@ -12,3 +12,3 @@ "main": "index.js", | ||
| "update-all": "npm i && npm run update-font && npm run update-custom-elements && npm run update-polyfills && npm run update-code-gov-web-components && npm run update-assets", | ||
| "update-assets": "cp dist/js/* assets/js/. && cp node_modules/prismjs/prism.js assets/js/. && cp node_modules/prismjs/themes/prism.css assets/css/. && cp node_modules/@webcomponents/custom-elements/custom-elements.min.js.map assets/js/.", | ||
| "update-assets": "cp dist/js/* assets/js/. && cp node_modules/prismjs/prism.js assets/js/. && cp node_modules/@webcomponents/custom-elements/custom-elements.min.js.map assets/js/.", | ||
| "update-custom-elements": "npm install -S @webcomponents/custom-elements && cd node_modules/@webcomponents/custom-elements && npm install && npm build", | ||
@@ -39,3 +39,3 @@ "update-font": "cd bash_scripts && bash update-font.sh", | ||
| "@code.gov/code-gov-font": "0.7.1", | ||
| "@webcomponents/custom-elements": "^1.2.1", | ||
| "@webcomponents/custom-elements": "^1.2.4", | ||
| "custom-event-polyfill": "^1.0.6", | ||
@@ -42,0 +42,0 @@ "prismjs": "^1.15.0" |
@@ -16,6 +16,8 @@ # code-gov-style | ||
| The repository is distributed with [npm](https://www.npmjs.com/). After [installing npm](https://docs.npmjs.com/getting-started/installing-node), you can install `code-gov-style` with this command: | ||
| ```sh | ||
| $ npm i @code.gov/code-gov-style | ||
| ``` | ||
| Clone the `code-gov-style` repository locally. After cloning locally, follow these steps: | ||
| - In your terminal, run `npm install` to install all dependencies | ||
| - In your terminal, run `bundle install` to add all ruby gems | ||
| - (Note - your Bundler version should be >1.17.3. To install Bundler, run `gem intall bundler` from your terminal) | ||
| - To serve the [Code.gov Style Guide](https://gsa.github.io/code-gov-style/) locally, in your terminal, run `npm run-script serve` | ||
| - This should output what the server address is on your local machine. | ||
@@ -38,4 +40,10 @@ ## Usage | ||
| ## Testing | ||
| Our continuous integration pipeline runs linting and accessibility tests on every pull request. Be sure to test your code by running `npm lint` and `npm test-pa11y`. | ||
| Our continuous integration pipeline runs linting and accessibility tests on every pull request. Be sure to test your code by doing the following: | ||
| 1. Use the `npm run lint` command to lint your `.scss` files. | ||
| 2. To run web accessibility testing do the following: | ||
| a. Make sure [ruby](https://www.ruby-lang.org/en/documentation/installation/) and the [bundler gem](https://bundler.io/) are installed on your computer. | ||
| b. Start a server by running `npm run serve`. | ||
| c. Use the `npm run test-pa11y` command to run the accessibility test. | ||
| The accessibility testing configuration is located in the .pa11yci file. We follow the WCAG2AA standard. For more info on the rules being tested checkout the [pa11y wiki](https://github.com/pa11y/pa11y/wiki/HTML-CodeSniffer-Rules) | ||
@@ -45,3 +53,3 @@ | ||
| The https://gsa.github.io/code-gov-style/ site is built using GitHub pages from the `master` branch. Any merges to the `master` branch will update the site within a few minutes. | ||
| The https://gsa.github.io/code-gov-style/ site is built using GitHub pages from the `master` branch. Any merges to the `master` branch will update the site within a few minutes. | ||
@@ -62,2 +70,5 @@ In order for any style guide changes to be reflected on the `code-gov-front-end`, they must be deplyed to [NPM](https://www.npmjs.com/package/@code.gov/code-gov-style) and the package version that `code-gov-front-end` uses needs to be incremented. | ||
| Contact Daniel J. Dufour at daniel.dufour@gsa.gov if you have any questions | ||
| Twitter: [@CodeDotGov](https://twitter.com/CodeDotGov) | ||
| Email: [code@gsa.gov](mailto:code@gsa.gov) | ||
| LinkedIn: [code-gov](https://www.linkedin.com/company/code-gov/) | ||
| Join our #opensource-public Slack channel: [https://chat.18f.gov/](https://chat.18f.gov/) |
@@ -30,5 +30,5 @@ 'use strict'; | ||
| category = 'low'; | ||
| } else if (rounded >= 4 && rounded < 7) { | ||
| } else if (rounded >= 4 && rounded < 6) { | ||
| category = 'medium' | ||
| } else if (rounded >= 7) { | ||
| } else if (rounded >= 6) { | ||
| category = 'high'; | ||
@@ -38,3 +38,3 @@ } else { | ||
| } | ||
| this.innerHTML = `<div class="corner-tag ${category}"><div class="corner-tag-value">${rounded}</div></div>`; | ||
| this.innerHTML = `<div aria-label="${category}" class="corner-tag ${category}"><div class="corner-tag-value">${rounded}</div></div>`; | ||
| } | ||
@@ -41,0 +41,0 @@ |
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
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
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
- Total package byte prevSize
- increased by1.05%
1231934
- Number of package files
- increased by0.79%
128
- Number of low quality alerts
- decreased by-33.33%
2
- Number of lines in readme file
- increased by18.33%
71
Worsened metrics
- Number of medium maintenance alerts
- increased byInfinity%
1