@heroku/ember-hk-components 0.17.0-beta.1 → 0.20.0

package/CHANGELOG.md

@@ -1,3 +1,56 @@
+## 0.20.0 (2022-02-01)
+
+#### :rocket: Enhancement
+* [#188](https://github.com/heroku/ember-hk-components/pull/188) hk-slide-panel up the confirmable documentation runnable example ([@fivetanley](https://github.com/fivetanley))
+
+#### :house: Internal
+* [#205](https://github.com/heroku/ember-hk-components/pull/205) Update supported node versions to include 14 ([@eablack](https://github.com/eablack))
+* [#199](https://github.com/heroku/ember-hk-components/pull/199) Update `app.json` to heroku-20 stack ([@cafreeman](https://github.com/cafreeman))
+
+#### Committers: 3
+- Chris Freeman ([@cafreeman](https://github.com/cafreeman))
+- Eric ([@eablack](https://github.com/eablack))
+- Stanley Stuart ([@fivetanley](https://github.com/fivetanley))
+
+## 0.19.0 (2020-10-06)
+
+#### :rocket: Enhancement
+* [#180](https://github.com/heroku/ember-hk-components/pull/180) Associate validation error status with hk-form-group ([@brettgoulder](https://github.com/brettgoulder))
+* [#181](https://github.com/heroku/ember-hk-components/pull/181) Utilize Dashboard test devmode and UI ([@brettgoulder](https://github.com/brettgoulder))
+
+#### Committers: 1
+- Brett Goulder ([@brettgoulder](https://github.com/brettgoulder))
+
+## 0.18.0 (2020-08-10)
+
+#### :bug: Bug Fix
+* [#177](https://github.com/heroku/ember-hk-components/pull/177) fix: Malibu icon upgrade + fix accessibility violations ([@fivetanley](https://github.com/fivetanley))
+
+#### :memo: Documentation
+* [#172](https://github.com/heroku/ember-hk-components/pull/172) Update release documentation ([@samarao](https://github.com/samarao))
+
+#### Committers: 2
+- Sama ([@samarao](https://github.com/samarao))
+- Stanley Stuart ([@fivetanley](https://github.com/fivetanley))
+
+#### :memo: Documentation
+* [#172](https://github.com/heroku/ember-hk-components/pull/172) Update release documentation ([@samarao](https://github.com/samarao))
+
+#### Committers: 2
+- Sama ([@samarao](https://github.com/samarao))
+- Stanley Stuart ([@fivetanley](https://github.com/fivetanley))
+
+## 0.17.0 (2020-05-27)
+
+#### :rocket: Enhancement
+* [#170](https://github.com/heroku/ember-hk-components/pull/170) Set the trap focus default to true for hk-slide-panel ([@samarao](https://github.com/samarao))
+
+#### :house: Internal
+* [#169](https://github.com/heroku/ember-hk-components/pull/169) Bump jquery from 3.4.1 to 3.5.0 ([@dependabot[bot]](https://github.com/apps/dependabot))
+
+#### Committers: 1
+- Sama ([@samarao](https://github.com/samarao))
+
 ## 0.16.0 (2020-04-16)
 
 #### :house: Internal

package/README.md

@@ -77,11 +77,10 @@ This library does its best to follow the principles of [Semantic Versioning](htt
 
 #### Changelog
 
-This project's changelog is generated using `lerna-changelog`.  You can find instructions on how to setup your local environment for this in [the project's Readme](https://github.com/lerna/lerna-changelog#usage). Note that the Personal access token you use must be SSO-enabled for this to work.
+This project's changelog is generated using `lerna-changelog`.  You can find instructions on how to setup your local environment for this in [the project's Readme](https://github.com/lerna/lerna-changelog#github-token). Note that the Personal access token you use must be [SSO-enabled](https://help.github.com/en/github/authenticating-to-github/authorizing-a-personal-access-token-for-use-with-saml-single-sign-on) for this to work.
 
 `lerna-changelog` works off a system of labels defined in [this project's package.json](https://github.com/heroku/ember-hk-components/blob/9bdcf240e2294b48cac2e4f99ac5b706b7b17214/package.json#L61-L70).  Pull requests will be collated into the changelog based on which label has been applied to them.
 
-
 #### Making a New Release
 
 Once you are ready to make a new release follow these steps:
@@ -93,6 +92,8 @@ Once you are ready to make a new release follow these steps:
 * Copy the output of that command into Changelog.md
 * Commit your changes and open a PR
 
-Once the PR is approved and merged you can then tag and publish your new version to npm with the command `npm publish` 🎉
+Once the PR is approved and merged you can then tag your new version by running `git tag x.x.x` where `x.x.x` is the new version number. Push your tag to GitHub using `git push origin --tags`.
+
+Publish your new version to npm with the command `npm publish` 🎉
 
 _Note that you must have publish access to the @heroku npm organization to successfully publish_

package/addon/components/hk-form-group.js

@@ -4,9 +4,12 @@ import { computed } from '@ember/object';
 
 export default FieldValidations.extend({
   layout,
-  fieldType: 'hk-input',
+  fieldType: "hk-input",
   groupId: computed(function() {
-    return `hk-form-field-${this.get('elementId')}`;
+    return `hk-form-field-${this.get("elementId")}`;
+  }),
+  errorsListId: computed("groupId", function() {
+    return `${this.groupId}-errors-list`;
   }),
   isRequired: false
 });

package/addon/components/hk-input-with-validation-status.js

@@ -6,6 +6,7 @@ import layout from '@heroku/ember-hk-components/templates/components/hk-input-wi
 export default Component.extend({
   layout,
   tagName: '',
+  supportsDataTestProperties: true,
   isFieldChanged: false,
   inputValue: oneWay('value'),
   isFieldNotEmpty: notEmpty('value'),

package/addon/components/hk-input.js

@@ -2,6 +2,7 @@ import TextField from '@ember/component/text-field';
 import { run } from '@ember/runloop';
 
 export default TextField.extend({
+  attributeBindings: ['aria-describedby'],
   classNameBindings: ['isValid:b--light-green', 'isValid:hk-focus-ring--green', 'isInvalid:b--light-red', 'isInvalid:hk-focus-ring--red', 'disabled:hk-input--disabled', 'readonly:hk-input--read-only'],
   classNames: ['hk-input'],
 

package/addon/components/hk-slide-panel.js

@@ -53,7 +53,7 @@ export default Component.extend({
 
   clickOverlayToClose: true,
 
-  trapFocus: false,
+  trapFocus: true,
 
   isTest: computed(function() {
     const config = getOwner(this).resolveRegistration('config:environment');

package/addon/templates/components/hk-button.hbs

@@ -1,9 +1,11 @@
 {{#if isPending}}
-  {{malibu-icon name="loading-16" size="16" iconClass='fill-gray v-mid'}}
+  <MalibuIcon @name="loading-16" @size={{16}} @iconClass='fill-gray v-mid' @title="Loading" />
 {{else}}
   {{#if hasBlock}}
     {{yield}}
   {{else}}
+    {{!-- TODO: remove this... when we figure out when apps stop putting HTML here... --}}
+    {{!-- template-lint-disable no-triple-curlies --}}
     {{{text}}}
   {{/if}}
 {{/if}}

package/addon/templates/components/hk-form-group.hbs

@@ -1,6 +1,6 @@
 {{yield (hash
   value=value
   label=(component 'hk-label' for=groupId isRequired=isRequired data-test-target=(concat 'form-group-label-' property))
-  field=(component fieldType id=groupId value=value isValid=isValid isInvalid=isInvalid isValidating=isValidating data-test-target=(concat 'form-group-field-' property))
-  errorsList=(component 'hk-validation-errors-list' validationErrors=validationErrors property=property)
-)}}
+  field=(component fieldType id=groupId value=value isValid=isValid isInvalid=isInvalid isValidating=isValidating aria-describedby=(concat groupId '-errors-list') data-test-target=(concat 'form-group-field-' property))
+  errorsList=(component 'hk-validation-errors-list' validationErrors=validationErrors property=property errorsListId=errorsListId)
+)}}

package/addon/templates/components/hk-input-with-validation-status.hbs

@@ -11,20 +11,22 @@
     disabled=disabled
     maxlength=maxlength
     placeholder=placeholder
-    readonly=readonly}}
+    readonly=readonly
+    aria-describedby=errorsListId
+    }}
 
   {{#if isShowingStatus}}
     {{#if isValidating}}
       <div class="flex items-center bg-light-silver br1 br--right bt br bb b--light-gray ph2" data-test-target="loading-icon">
-        {{malibu-icon name="loading-16" iconClass="malibu-fill-gradient-dark-gray" size="16"}}
+        <MalibuIcon @name="loading-16" @iconClass="malibu-fill-gradient-dark-gray" @size={{16}} @title="Loading" />
       </div>
     {{else if isValid}}
       <div class="flex items-center bg-lightest-green br1 br--right bt br bb b--light-green ph2" data-test-target="valid-icon">
-        {{malibu-icon name="success-badge-16" iconClass="malibu-fill-gradient-green" size="16"}}
+        <MalibuIcon @name="success-badge-16" @iconClass="malibu-fill-gradient-green" @size={{16}} @title="{{name}} is valid" />
       </div>
     {{else}}
       <div class="flex items-center bg-lightest-red br1 br--right bt br bb b--light-red ph2" data-test-target="invalid-icon">
-        {{malibu-icon name="failure-badge-16" iconClass="malibu-fill-gradient-red" size="16"}}
+        <MalibuIcon @name="failure-badge-16" @iconClass="malibu-fill-gradient-red" @size={{16}} @title="{{name}} is invalid" />
       </div>
     {{/if}}
   {{/if}}

package/addon/templates/components/hk-search-input.hbs

@@ -1,2 +1,2 @@
-{{malibu-icon name='search-16' size='16' iconClass='fill-gray absolute ml2 mt1 nudge-down--3' role='presentation' title=''}}
+<MalibuIcon @name='search-16' @size={{16}} @iconClass='fill-gray absolute ml2 mt1 nudge-down--3' aria-hidden="true" />
 {{input id=inputId value=value placeholder=placeholder class='hk-search-input w-100' autocapitalize='off' autocorrect='off' autocomplete='off' spellcheck='false'}}

package/addon/templates/components/hk-slide-panel/breakout.hbs

@@ -1,6 +1,7 @@
 <div
   class="hk-slide-panel-breakout-overlay"
   data-test-target="slide-panel-breakout-overlay"
+  {{!-- template-lint-disable no-invalid-interactive --}}
   onclick={{action onClickOverlay (action dismiss)}}
 ></div>
 

package/addon/templates/components/hk-slide-panel/header.hbs

@@ -13,5 +13,5 @@
   data-test-target="slide-panel-dismiss"
   aria-label={{this.shownDismissLabel}}
 >
-  {{malibu-icon name="delete-16" iconClass="fill-gray" size="16" title=this.shownDismissLabel}}
+  <MalibuIcon @name="delete-16" @iconClass="fill-gray" @size={{16}} @title={{this.shownDismissLabel}} />
 </button>

package/addon/templates/components/hk-validation-errors-list.hbs

@@ -1,7 +1,8 @@
-{{#if hasValidationErrors}}
-	<ul class="list pl0 red mv2 f5 normal lh-copy" data-test-target={{concat 'validation-errors-' property}}>
-  	{{#each validationErrorMessages as |message|}}
-  		<li>{{message}}</li>
-  	{{/each}}
-  </ul>
-{{/if}}
+<ul
+  class="list pl0 red mv2 f5 normal lh-copy {{unless hasValidationErrors 'clip'}}"
+  id={{errorsListId}}
+  data-test-target={{concat 'validation-errors-' property}}>
+  {{#each validationErrorMessages as |message|}}
+    <li>{{message}}</li>
+  {{/each}}
+</ul>

package/app.json

@@ -1,6 +1,7 @@
 {
   "name": "ember-hk-components",
   "description": "Ember Hk Components",
+  "stack": "heroku-20",
   "buildpacks": [
     { "url": "heroku/nodejs" },
     { "url": "https://github.com/heroku/heroku-buildpack-ember-cli" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heroku/ember-hk-components",
-  "version": "0.17.0-beta.1",
+  "version": "0.20.0",
   "description": "Ember HK Components",
   "keywords": [
     "ember-addon"
@@ -13,57 +13,66 @@
   },
   "scripts": {
     "build": "ember build",
+    "lint:hbs": "ember-template-lint .",
     "lint:js": "eslint .",
+    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*",
+    "lint:hbs:fix": "ember-template-lint . --fix",
     "start": "ember server",
-    "test": "ember test",
-    "changelog": "lerna-changelog",
-    "test:all": "ember try:each"
+    "test": "npm-run-all lint:* test:ember",
+    "test:ember": "ember test",
+    "test:ember-compatibility": "ember try:each",
+    "changelog": "lerna-changelog"
   },
   "dependencies": {
-    "@heroku/ember-malibu-icon": "^1.3.0",
+    "@heroku/ember-malibu-icon": "^1.6.0",
+    "ember-auto-import": "^1.12.1",
     "body-scroll-lock": "^2.6.1",
-    "ember-auto-import": "^1.5.2",
     "ember-changeset": "^1.4.0",
     "ember-changeset-validations": "^1.2.8",
-    "ember-cli-babel": "^7.7.3",
-    "ember-cli-htmlbars": "^5.1.2",
+    "ember-cli-babel": "^7.21.0",
+    "ember-cli-htmlbars": "^5.2.0",
     "ember-focus-trap": "^0.3.2",
     "ember-wormhole": "^0.5.5",
     "emberx-select": "^4.0.0-beta.2"
   },
   "devDependencies": {
-    "@ember/optional-features": "^0.7.0",
+    "@ember/optional-features": "^1.3.0",
+    "@glimmer/component": "^1.0.1",
+    "@glimmer/tracking": "^1.0.0",
+    "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "chai": "^4.2.0",
     "ember-a11y-testing": "^2.0.0",
-    "ember-cli": "~3.12.0",
+    "ember-cli": "~3.20.2",
     "ember-cli-chai": "^0.5.0",
-    "ember-cli-dependency-checker": "^3.1.0",
-    "ember-cli-eslint": "^5.1.0",
+    "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-eyeglass": "^6.4.2",
-    "ember-cli-inject-live-reload": "^1.8.2",
+    "ember-cli-inject-live-reload": "^2.0.2",
     "ember-cli-sri": "^2.1.1",
-    "ember-cli-uglify": "^2.1.0",
+    "ember-cli-uglify": "^3.0.0",
     "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-export-application-global": "^2.0.0",
+    "ember-export-application-global": "^2.0.1",
     "ember-freestyle": "^0.11.9",
-    "ember-load-initializers": "^2.0.0",
+    "ember-load-initializers": "^2.1.1",
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-mocha": "^0.16.2",
-    "ember-resolver": "^5.0.1",
+    "ember-resolver": "^8.0.0",
     "ember-sinon": "^2.1.0",
-    "ember-source": "~3.12.0",
-    "ember-source-channel-url": "^1.1.0",
+    "ember-source": "~3.20.7",
+    "ember-source-channel-url": "^2.0.1",
+    "ember-template-lint": "^2.10.0",
     "ember-test-selectors": "^0.3.6",
-    "ember-try": "^1.0.0",
-    "eslint-plugin-ember": "^6.2.0",
-    "eslint-plugin-node": "^9.0.1",
+    "ember-try": "^1.4.0",
+    "eslint": "^7.5.0",
+    "eslint-plugin-ember": "^8.9.1",
+    "eslint-plugin-node": "^11.1.0",
     "lerna-changelog": "^0.8.0",
     "loader.js": "^4.7.0",
+    "npm-run-all": "^4.1.5",
     "sinon-chai": "^3.2.0"
   },
   "engines": {
-    "node": "8.* || 10.* || 12.*"
+    "node": "12.* || 14.*"
   },
   "changelog": {
     "repo": "heroku/ember-hk-components",
@@ -75,6 +84,9 @@
       "internal": ":house: Internal"
     }
   },
+  "ember": {
+    "edition": "octane"
+  },
   "ember-addon": {
     "configPath": "tests/dummy/config"
   }

package/addon/components/fix-snippets.js

@@ -1,6 +0,0 @@
-import Component from '@ember/component';
-import layout from '../templates/components/fix-snippets';
-
-export default Component.extend({
-  layout
-});

package/addon/templates/components/fix-snippets.hbs

@@ -1 +0,0 @@
-{{yield}}

package/app/components/fix-snippets.js

@@ -1 +0,0 @@
-export { default } from '@heroku/ember-hk-components/components/fix-snippets';

package/jsconfig.json

@@ -1 +0,0 @@
-{"compilerOptions":{"target":"es6","experimentalDecorators":true},"exclude":["node_modules","bower_components","tmp","vendor",".git","dist"]}