all files / addon/components/ polaris-radio-button.js

100% Statements 3/3
100% Branches 4/4
80% Functions 4/5
100% Lines 3/3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131                                                                                                                                                                                                                                                  15×       16× 16×        
import Component from '@ember/component';
import { computed } from '@ember/object';
import { guidFor } from '@ember/object/internals';
import layout from '../templates/components/polaris-radio-button';
 
/**
 * Polaris radio button component.
 * See https://polaris.shopify.com/components/forms/radio-button
 */
export default Component.extend({
  // Tagless component, renders a `polaris-choice` component internally.
  tagName: '',
 
  layout,
 
  /*
   * Public attributes.
   */
  /**
   * Label for the radio button
   *
   * @property label
   * @type {string}
   * @default null
   */
  label: null,
 
  /**
   * Visually hide the label
   *
   * @property labelHidden
   * @type {boolean}
   * @default false
   */
  labelHidden: false,
 
  /**
   * Radio button is selected
   *
   * @property checked
   * @type {boolean}
   * @default false
   */
  checked: false,
 
  /**
   * Additional text to aid in use
   *
   * @property helpText
   * @type {string or React.ReactNode}
   * @default null
   */
  helpText: null,
 
  /**
  * ID for form input
  *
   * @property inputId
   * @type {string}
   * @default null
   */
  inputId: null,
 
  /**
   * Name for form input
   *
   * @property name
   * @type {string}
   * @default null
   */
  name: null,
 
  /**
   * Value for form input
   *
   * @property value
   * @type {string}
   * @default null
   */
  value: null,
 
  /**
   * Disable the radio button
   *
   * @property disabled
   * @type {boolean}
   * @default false
   */
  disabled: false,
 
  /**
   * Callback when radio button is toggled
   *
   * @property onChange
   * @type {function}
   * @default noop
   */
  onChange() {},
 
  /**
   * Callback when radio button is focussed
   *
   * @property onFocus
   * @type {function}
   * @default noop
   */
  onFocus() {},
 
  /**
   * Callback when focus is removed
   *
   * @property onBlur
   * @type {function}
   * @default noop
   */
  onBlur() {},
 
  /*
   * Internal properties.
   */
  _id: computed('inputId', function() {
    return this.get('inputId') || `polaris-radio-button-${ guidFor(this) }`;
  }).readOnly(),
 
  describedBy: computed('helpText', '_id', function() {
    const helpText = this.get('helpText');
    return helpText ? `${ this.get('_id') }HelpText` : null;
  }).readOnly(),
});