Add support for disabled and loading states to polaris-setting-toggle

CHANGELOG.md

@@ -1,12 +1,15 @@
 # ember-polaris Changelog
 
-### v.1.7.7 (october 8, 2018)
+### Unreleased
+- [199](https://github.com/smile-io/ember-polaris/pull/199) [ENHANCEMENT] Add support for disabled and loading states to `polaris-setting-toggle`.
+
+### v.1.7.7 (October 8, 2018)
 - [189](https://github.com/smile-io/ember-polaris/pull/189) [FIX] Detect length of decimal places in number as per expectations.
 
-### v.1.7.6 (october 5, 2018)
+### v.1.7.6 (October 5, 2018)
 - [#181](https://github.com/smile-io/ember-polaris/pull/181) [internal] autofix code to use our latest eslint rules.
 
-### v.1.7.5 (october 4, 2018)
+### v.1.7.5 (October 4, 2018)
 - [#173](https://github.com/smile-io/ember-polaris/pull/173) [internal] setup eslint, prettier & ember-template-lint.
 
 ### v.1.7.4 (September 17, 2018)

addon/templates/components/polaris-setting-toggle.hbs

@@ -12,6 +12,8 @@
       {{#if action}}
         {{polaris-button
           text=action.text
+          disabled=action.disabled
+          loading=action.loading
           primary=enabled
           onClick=(action "fireAction" action)
         }}

docs/setting-toggle.md

@@ -14,6 +14,7 @@ Inline usage:
   enabled=enabled
   action=(hash
     text="Toggle it!"
+    loading=isToggleSettingRunning
     onAction=(action "toggleSetting")
   )
 }}
@@ -29,6 +30,9 @@ Block usage:
     onAction=(action (mut enabled) false)
   )
 }}
-  This setting is currently <strong>{{if enabled "enabled" "disabled"}}</strong>
+  This setting is currently
+  {{polaris-text-style variation="strong"}}
+    {{if enabled "enabled" "disabled"}}
+  {{/polaris-text-style}}
 {{/polaris-setting-toggle}}
 ```

tests/integration/components/polaris-setting-toggle-test.js

@@ -145,7 +145,7 @@ test('it handles the enabled attribute correctly', function(assert) {
   );
 });
 
-test('it handles the suppied action correctly', function(assert) {
+test('it handles the supplied action correctly', function(assert) {
   this.set('actionFired', false);
   this.render(hbs`
     {{polaris-setting-toggle
@@ -160,3 +160,41 @@ test('it handles the suppied action correctly', function(assert) {
   click(settingActionButtonSelector);
   assert.ok(this.get('actionFired'), 'fires the action when button clicked');
 });
+
+test("it obeys the passed-in action hash's loading and disabled flags", function(assert) {
+  this.setProperties({
+    isLoading: true,
+    isDisabled: false,
+  });
+
+  this.render(hbs`
+    {{polaris-setting-toggle
+      action=(hash
+        text="Toggle"
+        loading=isLoading
+        disabled=isDisabled
+        onAction=(action (mut dummy))
+      )
+    }}
+  `);
+
+  let button = find(settingActionButtonSelector);
+  assert.ok(
+    button.classList.contains('Polaris-Button--loading'),
+    'button is in loading state when loading is true'
+  );
+
+  this.setProperties({
+    isLoading: false,
+    isDisabled: true,
+  });
+
+  assert.ok(
+    button.classList.contains('Polaris-Button--disabled'),
+    'button is in disabled state when disabled is true'
+  );
+  assert.notOk(
+    button.classList.contains('Polaris-Button--loading'),
+    'button is not in loading state when loading is false'
+  );
+});