@heroku/ember-malibu-icon - npm Package Compare versions

Comparing version 1.3.3 to 1.4.0-beta.1

app.json

@@ -18,2 +18,7 @@ {
     "test": {
+      "formation": {
+        "test": {
+          "quantity": 9
+        }
+      },
       "env": {
@@ -23,2 +28,5 @@ "EMBER_ENV": "test",
       },
+      "scripts": {
+        "test": "yarn test:ci"
+      },
       "buildpacks": [
@@ -25,0 +33,0 @@ { "url": "https://github.com/heroku/heroku-buildpack-google-chrome" },

package.json

 {
   "name": "@heroku/ember-malibu-icon",
-  "version": "1.3.3",
+  "version": "1.4.0-beta.1",
   "description": "Ember Malibu Icons",
@@ -15,41 +15,52 @@ "keywords": [
   "scripts": {
-    "build": "ember build",
+    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*",
     "lint:hbs": "ember-template-lint .",
     "lint:js": "eslint .",
     "start": "ember serve",
-    "test": "ember test",
-    "test:all": "ember try:each"
+    "test": "npm-run-all lint:* test:*",
+    "test:ci": "npm-run-all lint:* && ./bin/test-ci",
+    "test:ember": "ember test",
+    "test:ember-compatibility": "ember try:each"
   },
   "dependencies": {
-    "ember-cli-babel": "^7.7.3"
+    "@babel/core": "^7.0.0",
+    "ember-cli-babel": "^7.20.5",
+    "ember-cli-htmlbars": "^5.1.2"
   },
   "devDependencies": {
-    "@ember/optional-features": "^0.7.0",
+    "@ember/jquery": "^1.1.0",
+    "@ember/optional-features": "^1.3.0",
+    "@glimmer/component": "^1.0.0",
+    "@glimmer/tracking": "^1.0.0",
+    "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-cli": "~3.10.1",
+    "ember-cli": "~3.19.0",
     "ember-cli-chai": "^0.4.3",
-    "ember-cli-dependency-checker": "^3.1.0",
-    "ember-cli-eslint": "^5.1.0",
-    "ember-cli-htmlbars": "^3.0.1",
-    "ember-cli-htmlbars-inline-precompile": "^2.1.0",
-    "ember-cli-inject-live-reload": "^1.8.2",
-    "ember-cli-mocha": "^0.15.0",
+    "ember-cli-dependency-checker": "^3.2.0",
+    "ember-cli-inject-live-reload": "^2.0.2",
     "ember-cli-sass": "^10.0.0",
-    "ember-cli-template-lint": "^1.0.0-beta.1",
-    "ember-cli-uglify": "^2.1.0",
-    "ember-load-initializers": "^2.0.0",
+    "ember-cli-uglify": "^3.0.0",
+    "ember-compatibility-helpers": "^1.2.1",
+    "ember-load-initializers": "^2.1.1",
     "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-resolver": "^5.0.1",
-    "ember-source": "~3.10.0",
-    "ember-source-channel-url": "^1.1.0",
+    "ember-mocha": "^0.16.2",
+    "ember-resolver": "^8.0.0",
+    "ember-source": "~3.19.0",
+    "ember-source-channel-url": "^2.0.1",
+    "ember-template-lint": "^2.8.0",
     "ember-test-selectors": "^0.3.8",
-    "ember-try": "^1.0.0",
-    "eslint-plugin-ember": "^6.2.0",
-    "eslint-plugin-node": "^9.0.1",
+    "ember-try": "^1.4.0",
+    "eslint": "^7.1.0",
+    "eslint-plugin-ember": "^8.6.0",
+    "eslint-plugin-node": "^11.1.0",
     "loader.js": "^4.7.0",
+    "npm-run-all": "^4.1.5",
     "sass": "^1.17.0"
   },
   "engines": {
-    "node": "8.* || >= 10.*"
+    "node": "10.* || >= 12"
   },
+  "ember": {
+    "edition": "octane"
+  },
   "ember-addon": {
@@ -56,0 +67,0 @@ "configPath": "tests/dummy/config"

README.md

@@ -1,4 +0,4 @@
-# Ember Malibu 🌴 Icon
+# Ember Malibu Icon
 
-This Ember addon injects the [Malibu](https://hk-malibu.herokuapp.com/) svg sprite into your Ember application and provides a helper to insert icons into your templates. You can explore how this helper works in this addon's [demo app](https://ember-malibu-icon.herokuapp.com/).
+This Ember addon injects the [Malibu](https://hk-malibu.herokuapp.com/) svg sprite into your Ember application and provides a helper to insert icons into your templates. You can explore how this helper works in this addon's [demo app and documentation](https://ember-malibu-icon.herokuapp.com/).
 
@@ -24,7 +24,39 @@ _Note that it will be helpful if you also use [Purple 3](https://purple3.herokuapp.com/) for styling_
 ### From a Handlebars (.hbs) file
-```hanblebars
-{{malibu-icon size='28' iconClass='gradient-dark-gray' name='app-28' title="Optional Title"}}
+
+#### Accessibility
+
+**Accessibility** When rendering `MalibuIcon`, you must pass declare the icon as either:
+
+* **informational**: Pass a non-empty string to `@title` argument. This will read the text to the screenreader instead of being announced as "Image".
+* **presentational**: Pass `role="presentation"` to the component. This will hide the icon from assistive technology. This should only be used for icons that don't convey additional meaning and are being used for aesthtic/design reasons.
+
+#### Informational Usage Example
+
+Use this when when you want text to be announced to the screenreader. This is most common when you have icons that are used for buttons or links but lack text rendered next to the icon to describe it.
+
+```handlebars
+<MalibuIcon @title="Add Buildpack {{buildpackName}}" size='28' iconClass='gradient-dark-gray' name='app-28' />
 ```
 
-### From a javascript file
+For example:
+
+![Image showing a list of domains. Each row has a pencil icon which is rendered by Malibu. There is no matching text which is an example of a use case for passing the `@title` argument.](/docs/images/informational.png)
+
+Given this screenshot, note the pencil icon. There is no text next to it to describe its intended purpose to the screenreader (in this case, "Edit"). `@title="Edit {{domain}}` would be a require improvement in this scenario.
+
+#### Presentational Usage
+
+Use this when the icon does not convey additional meaning. There should be visual text accompanying the icon. **Never use this when only the icon is rendered**.
+
+For example:
+
+![Image showing the text "GitHub" next to an SVG icon of the GitHub logo.](/docs/images/presentational.png)
+
+In this example, the GitHub logo is "presentational" because it does not convey additional meaning already presented to the user via the "GitHub" text next to it.
+
+```handlebars
+<MalibuIcon size='28' iconClass='gradient-dark-gray' name='app-28' role="presentation"/>
+```
+
+### From a javascript file (not recommended/deprecated)
 ```js
@@ -31,0 +63,0 @@ import { malibuIcon } from '@heroku/ember-malibu-icon/helpers/malibu-icon';

New alerts

No v1

Quality

Package 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

51231

increased by588.77%

Number of package files

14

increased by100%

Lines of code

185

increased by63.72%

Number of lines in readme file

111

increased by40.51%

Worsened metrics

Dependency count

3

increased by200%

Dev dependency count

28

increased by16.67%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Added@babel/core@^7.0.0

• + Addedember-cli-htmlbars@^5.1.2

• + Added@ember/edition-utils@1.2.0(transitive)

• + Addedarray-buffer-byte-length@1.0.1(transitive)

• + Addedarraybuffer.prototype.slice@1.0.3(transitive)

• + Addedasync-disk-cache@2.1.0(transitive)

• + Addedavailable-typed-arrays@1.0.7(transitive)

• + Addedbabel-plugin-htmlbars-inline-precompile@5.3.1(transitive)

• + Addedbroccoli-node-api@1.7.0(transitive)

• + Addedbroccoli-node-info@2.2.0(transitive)

• + Addedbroccoli-output-wrapper@3.2.5(transitive)

• + Addedbroccoli-persistent-filter@3.1.3(transitive)

• + Addedbroccoli-plugin@4.0.7(transitive)

• + Addedcommon-tags@1.8.2(transitive)

• + Addeddata-view-buffer@1.0.1(transitive)

• + Addeddata-view-byte-length@1.0.1(transitive)

• + Addeddata-view-byte-offset@1.0.0(transitive)

• + Addeddefine-properties@1.2.1(transitive)

• + Addededitions@2.3.1(transitive)

• + Addedember-cli-htmlbars@5.7.2(transitive)

• + Addedember-cli-version-checker@5.1.2(transitive)

• + Addederrlop@2.2.0(transitive)

• + Addedes-abstract@1.23.3(transitive)

• + Addedes-object-atoms@1.0.0(transitive)

• + Addedes-set-tostringtag@2.0.3(transitive)

• + Addedes-to-primitive@1.2.1(transitive)

• + Addedfor-each@0.3.3(transitive)

• + Addedfs-extra@8.1.0(transitive)

• + Addedfs-merger@3.2.1(transitive)

• + Addedfunction.prototype.name@1.1.6(transitive)

• + Addedfunctions-have-names@1.2.3(transitive)

• + Addedget-symbol-description@1.0.2(transitive)

• + Addedglobalthis@1.0.4(transitive)

• + Addedhas-bigints@1.0.2(transitive)

• + Addedhas-tostringtag@1.0.2(transitive)

• + Addedinternal-slot@1.0.7(transitive)

• + Addedis-array-buffer@3.0.4(transitive)

• + Addedis-bigint@1.0.4(transitive)

• + Addedis-boolean-object@1.1.2(transitive)

• + Addedis-callable@1.2.7(transitive)

• + Addedis-data-view@1.0.1(transitive)

• + Addedis-date-object@1.0.5(transitive)

• + Addedis-negative-zero@2.0.3(transitive)

• + Addedis-number-object@1.0.7(transitive)

• + Addedis-regex@1.1.4(transitive)

• + Addedis-shared-array-buffer@1.0.3(transitive)

• + Addedis-string@1.0.7(transitive)

• + Addedis-symbol@1.0.4(transitive)

• + Addedis-typed-array@1.1.13(transitive)

• + Addedis-weakref@1.0.2(transitive)

• + Addedisarray@1.0.0(transitive)

• + Addedisobject@2.1.0(transitive)

• + Addedistextorbinary@2.6.0(transitive)

• + Addedline-column@1.0.2(transitive)

• + Addedmagic-string@0.25.9(transitive)

• + Addedobject-inspect@1.13.2(transitive)

• + Addedobject.assign@4.1.5(transitive)

• + Addedparse-static-imports@1.1.0(transitive)

• + Addedpossible-typed-array-names@1.0.0(transitive)

• + Addedpromise-map-series@0.3.0(transitive)

• + Addedregexp.prototype.flags@1.5.2(transitive)

• + Addedsafe-array-concat@1.1.2(transitive)

• + Addedsafe-regex-test@1.0.3(transitive)

• + Addedsemver@7.6.2(transitive)

• + Addedset-function-name@2.0.2(transitive)

• + Addedside-channel@1.0.6(transitive)

• + Addedsourcemap-codec@1.4.8(transitive)

• + Addedstring.prototype.matchall@4.0.11(transitive)

• + Addedstring.prototype.trim@1.2.9(transitive)

• + Addedstring.prototype.trimend@1.0.8(transitive)

• + Addedstring.prototype.trimstart@1.0.8(transitive)

• + Addedstrip-bom@4.0.0(transitive)

• + Addedsync-disk-cache@2.1.0(transitive)

• + Addedtyped-array-buffer@1.0.2(transitive)

• + Addedtyped-array-byte-length@1.0.1(transitive)

• + Addedtyped-array-byte-offset@1.0.2(transitive)

• + Addedtyped-array-length@1.0.6(transitive)

• + Addedunbox-primitive@1.0.2(transitive)

• + Addedwalk-sync@2.2.0(transitive)

• + Addedwhich-boxed-primitive@1.0.2(transitive)

• + Addedwhich-typed-array@1.1.15(transitive)

• Updatedember-cli-babel@^7.20.5