feat(checkbox): Add value property to the component and foundation. (#492)

Author: Scott Hyndman

packages/mdc-checkbox/README.md

@@ -104,7 +104,7 @@ const MDCCheckboxFoundation = mdc.checkbox.MDCCheckboxFoundation;
 #### Automatic Instantiation
 
 If you do not care about retaining the component instance for the checkbox, simply call `attachTo()`
-and pass it a DOM element.  
+and pass it a DOM element.
 
 ```javascript
 mdc.checkbox.MDCCheckbox.attachTo(document.querySelector('.mdc-checkbox'));
@@ -139,6 +139,11 @@ underlying checkbox element.
 Boolean. Returns whether or not the checkbox is disabled. Setting this property will update the
 underlying checkbox element.
 
+##### MDCCheckbox.value
+
+String. Returns the checkbox's value. Setting this property will update the underlying checkbox
+element.
+
 ### Using the Foundation Class
 
 MDC Checkbox ships with an `MDCCheckboxFoundation` class that external frameworks and libraries can
@@ -189,6 +194,16 @@ Returns whether or not the underlying input is disabled. Returns false when no i
 Updates the `disabled` property on the underlying input. Does nothing when the underlying input is
 not present.
 
+##### MDCCheckboxFoundation.getValue() => string
+
+Returns the value of `adapter.getNativeControl().value`. Returns `null` if `getNativeControl()`
+does not return an object.
+
+##### MDCCheckboxFoundation.setValue(value: string) => void
+
+Sets the value of `adapter.getNativeControl().value`. Does nothing if `getNativeControl()` does
+not return an object.
+
 ## Theming
 
 > TK once mdc-theming lands.

packages/mdc-checkbox/foundation.js

@@ -97,6 +97,14 @@ export default class MDCCheckboxFoundation extends MDCFoundation {
     this.getNativeControl_().disabled = disabled;
   }
 
+  getValue() {
+    return this.getNativeControl_().value;
+  }
+
+  setValue(value) {
+    this.getNativeControl_().value = value;
+  }
+
   installPropertyChangeHooks_() {
     const nativeCb = this.getNativeControl_();
     const cbProto = Object.getPrototypeOf(nativeCb);
@@ -212,6 +220,7 @@ export default class MDCCheckboxFoundation extends MDCFoundation {
       checked: false,
       indeterminate: false,
       disabled: false,
+      value: null,
     };
   }
 }

packages/mdc-checkbox/index.js

@@ -106,9 +106,16 @@ export class MDCCheckbox extends MDCComponent {
     this.foundation_.setDisabled(disabled);
   }
 
+  get value() {
+    return this.foundation_.getValue();
+  }
+
+  set value(value) {
+    this.foundation_.setValue(value);
+  }
+
   destroy() {
     this.ripple_.destroy();
     super.destroy();
   }
-
 }

test/unit/mdc-checkbox/foundation.test.js

@@ -250,6 +250,32 @@ test('#setDisabled works when no native control is returned', () => {
   assert.doesNotThrow(() => foundation.setDisabled(true));
 });
 
+test('#getValue returns the value of nativeControl.value', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.getNativeControl()).thenReturn({value: 'value'});
+  assert.equal(foundation.getValue(), 'value');
+});
+
+test('#getValue returns null if getNativeControl() does not return anything', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.getNativeControl()).thenReturn(null);
+  assert.isNull(foundation.getValue());
+});
+
+test('#setValue sets the value of nativeControl.value', () => {
+  const {foundation, mockAdapter} = setupTest();
+  const nativeControl = {value: null};
+  td.when(mockAdapter.getNativeControl()).thenReturn(nativeControl);
+  foundation.setValue('new value');
+  assert.equal(nativeControl.value, 'new value');
+});
+
+test('#setValue exits gracefully if getNativeControl() does not return anything', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.getNativeControl()).thenReturn(null);
+  assert.doesNotThrow(() => foundation.setValue('new value'));
+});
+
 testChangeHandler('unchecked -> checked animation class', {
   checked: true,
   indeterminate: false,

test/unit/mdc-checkbox/mdc-checkbox.test.js

@@ -123,6 +123,14 @@ test('get/set disabled updates the indeterminate property on the native checkbox
   assert.equal(component.disabled, cb.disabled);
 });
 
+test('get/set value updates the value of the native checkbox element', () => {
+  const {root, component} = setupTest();
+  const cb = root.querySelector(strings.NATIVE_CONTROL_SELECTOR);
+  component.value = 'new value';
+  assert.equal(cb.value, 'new value');
+  assert.equal(component.value, cb.value);
+});
+
 test('get ripple returns a MDCRipple instance', () => {
   const {component} = setupTest();
   assert.isOk(component.ripple instanceof MDCRipple);