{ "file": "addon/components/fountainhead-button.js", "content": "
/* Source: https://github.com/healthsparq/ember-radical/blob/master/addon/components/core-button/component.js */\n\nimport Component from 'ember-component';\nimport computed from 'ember-computed';\nimport hbs from 'htmlbars-inline-precompile';\n\n/**\n * Fountainhead button component pulled from `ember-radical` addon.\n * TODO: One day use nested addons, _trepidation_\n *\n * Here, this is a button:\n *\n * ```glimmer\n * {{#fountainhead-button}}Check me out{{/fountainhead-button}}\n * ```\n *\n * This button will not get auto-rendered, as it is just an example:\n *\n * ```handlebars\n * {{#fountainhead-button}}NO DICE, HOMBRE{{/fountainhead-button}}\n * ```\n *\n * @class FountainheadButton\n * @constructor\n * @extends Ember.Component\n */\n\nexport default Component.extend({\n\n  // Passed Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * Pass a brand to have `btn-${brand}` class applied\n   * @property brand\n   * @type {string}\n   * @passed\n   * @optional\n   * @default ''\n   */\n  brand: '',\n  /**\n   * Pass true to create a button that looks and behaves like a link. This is\n   * useful for creating accessible interaction targets.\n   * @property link\n   * @type {Boolean}\n   * @passed\n   * @optional\n   * @default false\n   */\n  link: false,\n\n  // Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * Computed css class bound to component. Handled by component to allow for\n   * flexibility in future updates to branding class names\n   * @property brandClass\n   * @type {string}\n   * @param 'brand'\n   */\n  brandClass: computed('brand', function() {\n    return this.get('brand') ? `btn-${this.get('brand')}` : null;\n  }),\n\n  // Ember Props\n  // ---------------------------------------------------------------------------\n  /**\n   * ALLLLLLLLLLL the attributes you might need.\n   * NOTE: `role` should not be bound here. You can set the role of a button\n   * by passing an [ariaRole](http://emberjs.com/api/classes/Ember.Component.html#property_ariaRole) prop.\n   * @property attributeBindings\n   * @type {Array}\n   */\n  attributeBindings: [\n    'aria-controls',\n    'aria-describedby',\n    'aria-expanded',\n    'aria-hidden',\n    'aria-label',\n    'aria-labelledby',\n    'data-test',\n    'disabled',\n    'type'\n  ],\n  /**\n   * Bind standard core classname for component: `fountainhead-button`\n   * @property classNames\n   * @type {Array}\n   * @default ['fh-button', 'btn']\n   */\n  classNames: [\n    'fh-button',\n    'btn'\n  ],\n  /**\n   * Handle binding brand and link related css class names\n   * @property classNameBindings\n   * @type {Array}\n   */\n  classNameBindings: [\n    'brandClass',\n    'link:btn-link'\n  ],\n  /**\n   * Button DOM element\n   * @property tagName\n   * @type {string}\n   * @default 'button'\n   */\n  tagName: 'button',\n  /**\n   * Include type button for usability.\n   * @property type\n   * @type {string}\n   * @default 'button'\n   */\n  type: 'button',\n\n  // Events\n  // ---------------------------------------------------------------------------\n  /**\n   * The `mouseDown` event is used for some utility/housekeeping methods because\n   * we use the `click` event to pass in actions.\n   *\n   * Handle setting the outline on this element to `none` because we know this\n   * event is only triggered by actual mouse clicks. Keyboard events don't trigger\n   * it, which is a convenient way to know we're good to hide the outline and\n   * maintain usability for keyboard users. A++ accessibility!\n   *\n   * Handle checking for a tagging category and if one exists, fire a tag.\n   *\n   * If you need to override this event, be sure to call `this._super();`\n   * @event mouseDown\n   * @return {undefined}\n   */\n  mouseDown() {\n    // Hide outline b/c this was a legit mouse click\n    // On blur, remove outline style in case the user switches to keyboard\n    this.$().css({ outline: 'none' });\n    this.$().on('blur', () => {\n      // If this button instance is destroying/destroyed, don't bother\n      // (This is an issue with instances of `{{fountainhead-alert}}`)\n      if (this.get('isDestroying') || this.get('isDestroyed')) { return; }\n      this.$().off('blur').css('outline', '');\n    });\n  },\n\n  // Layout\n  // ---------------------------------------------------------------------------\n  layout: hbs`{{{yield}}}`\n});\n
" }