ember-do-forms/addon/components/do-hint.js

ember-do-forms handles the icky parts of forms that you don't want to, and leaves the rest to you.

import Component from '@ember/component';
import { get } from '@ember/object';
import { inject as service } from '@ember/service';
import { isEmpty } from '@ember/utils';
import layout from '../templates/components/do-hint';
import hasOnlyEmberView from '../utils/has-only-ember-view';
import setDataTestSelector from '../utils/set-data-test-selector';

const DoHintComponent = Component.extend({
  layout,
  config: service('ember-do-forms/config'),

  tagName: 'small',
  text: '',

  init() {
    setDataTestSelector(this, {
      testSelector: 'do-hint',
      autoTestSelector: get(this, 'config.autoDataTestSelectors'),
      testSelectorValue: get(this, 'propertyName')
    });

    this._super(...arguments);
    let defaultClasses = get(this, 'config.defaultClasses.hint');

    if (isEmpty(this.classNames) || hasOnlyEmberView(this.classNames)) {
      this.classNames = this.classNames.concat(defaultClasses);
    }
  }

});

export default DoHintComponent;