Groundwork: Add OSS::TogglableSection option to remove the switch

addon/components/o-s-s/togglable-section.hbs

@@ -21,7 +21,9 @@
     {{#if (and (has-block "header-actions"))}}
       {{yield to="header-actions"}}
     {{/if}}
-    <OSS::ToggleSwitch @value={{@toggled}} @onChange={{this.noop}} @disabled={{@disabled}} />
+    {{#if this.isSwitchable}}
+      <OSS::ToggleSwitch @value={{@toggled}} @onChange={{this.noop}} @disabled={{@disabled}} />
+    {{/if}}
   </div>
   {{#if (and (has-block "contents") @toggled)}}
     <hr class="margin-px-0 width-pc-100" />

addon/components/o-s-s/togglable-section.stories.js

@@ -75,6 +75,16 @@ export default {
         type: 'boolean'
       }
     },
+    switchable: {
+      description: 'Whether the toggle switch is displayed and the section can be toggled from the header',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' }
+      },
+      control: {
+        type: 'boolean'
+      }
+    },
     size: {
       description: 'Adjust the size of the component. Currently available options are `sm` and `md`. Defaults to `md`.',
       table: {
@@ -119,6 +129,7 @@ const defaultArgs = {
   icon: '',
   size: undefined,
   disabled: undefined,
+  switchable: undefined,
   onChange: action('onChange')
 };
 
@@ -127,7 +138,7 @@ const Template = (args) => ({
     <OSS::TogglableSection
       @title={{this.title}} @subtitle={{this.subtitle}} @toggled={{this.toggled}} @iconUrl={{this.iconUrl}}
       @badgeIcon={{this.badgeIcon}} @icon={{this.icon}} @onChange={{this.onChange}}
-      @disabled={{this.disabled}} @size={{this.size}}>
+      @disabled={{this.disabled}} @size={{this.size}} @switchable={{this.switchable}}>
       <:contents>
         Setting content
       </:contents>
@@ -141,7 +152,7 @@ const WithActionsNamedBlockTemplate = (args) => ({
     <OSS::TogglableSection
       @title={{this.title}} @subtitle={{this.subtitle}} @toggled={{this.toggled}} @iconUrl={{this.iconUrl}}
       @badgeIcon={{this.badgeIcon}} @icon={{this.icon}} @onChange={{this.onChange}}
-      @disabled={{this.disabled}} @size={{this.size}}>
+      @disabled={{this.disabled}} @size={{this.size}} @switchable={{this.switchable}}>
       <:contents>
         Setting content
       </:contents>
@@ -153,8 +164,25 @@ const WithActionsNamedBlockTemplate = (args) => ({
   context: args
 });
 
+const WithoutToggleTemplate = (args) => ({
+  template: hbs`
+    <OSS::TogglableSection
+      @title={{this.title}} @subtitle={{this.subtitle}} @toggled={{this.toggled}} @iconUrl={{this.iconUrl}}
+      @badgeIcon={{this.badgeIcon}} @icon={{this.icon}} @onChange={{this.onChange}}
+      @disabled={{this.disabled}} @size={{this.size}} @switchable={{false}}>
+      <:contents>
+        Setting content
+      </:contents>
+    </OSS::TogglableSection>
+  `,
+  context: args
+});
+
 export const Default = Template.bind({});
 Default.args = defaultArgs;
 
 export const WithActionsNamedBlock = WithActionsNamedBlockTemplate.bind({});
 WithActionsNamedBlock.args = defaultArgs;
+
+export const WithoutToggle = WithoutToggleTemplate.bind({});
+WithoutToggle.args = defaultArgs;

addon/components/o-s-s/togglable-section.ts

@@ -5,6 +5,7 @@ import { action } from '@ember/object';
 interface CampaignTogglableSectionArgs {
   title: string;
   toggled: boolean;
+  switchable?: boolean;
   iconUrl?: string;
   icon?: string;
   badgeIcon?: string;
@@ -27,9 +28,13 @@ export default class CampaignTogglableSection extends Component<CampaignTogglabl
     return this.args.size === 'sm' ? 'padding-px-12' : 'padding-px-18';
   }
 
+  get isSwitchable(): boolean {
+    return this.args.switchable ?? true;
+  }
+
   @action
   onHeaderClick(): void {
-    if (this.args.disabled) return;
+    if (this.args.disabled || !this.isSwitchable) return;
     this.args.onChange(!this.args.toggled);
   }
 

tests/dummy/app/templates/index.hbs

@@ -337,8 +337,8 @@
     <div class="font-size-md font-weight-semibold">
       Togglable section
     </div>
-    <div class="fx-row fx-gap-px-36 fx-xalign-start">
-      <div class="fx-row fx-gap-px-24 fx-1">
+    <div class="fx-col fx-gap-px-24">
+      <div class="fx-row fx-gap-px-24 fx-xalign-start">
         <OSS::TogglableSection
           @title="This is a title"
           @subtitle="This is a subtitle"
@@ -400,7 +400,16 @@
           @size="sm"
         />
       </div>
-
+      <div class="fx-row fx-gap-px-24">
+        <OSS::TogglableSection
+          @title="This is a title"
+          @subtitle="This is a subtitle"
+          @badgeIcon="far fa-hourglass"
+          @toggled={{this.toggled}}
+          @onChange={{this.onToggle}}
+          @switchable={{false}}
+        />
+      </div>
     </div>
   </div>
 

tests/integration/components/o-s-s/togglable-section-test.ts

@@ -176,6 +176,34 @@ module('Integration | Component | o-s-s/togglable-section', function (hooks) {
     });
   });
 
+  module('@Switchable behaviour', () => {
+    test('If @switchable is not passed, the toggle is rendered', async function (assert) {
+      await render(
+        hbs`<OSS::TogglableSection @title={{this.title}} @toggled={{this.toggled}} @onChange={{this.onChange}} />`
+      );
+
+      assert.dom('.upf-toggle').exists();
+    });
+
+    test('If @switchable is false, the toggle is not rendered', async function (assert) {
+      await render(
+        hbs`<OSS::TogglableSection @title={{this.title}} @toggled={{this.toggled}} @onChange={{this.onChange}} @switchable={{false}} />`
+      );
+
+      assert.dom('.upf-toggle').doesNotExist();
+    });
+
+    test('If @switchable is false, clicking on the header does not call @onChange', async function (assert) {
+      this.onChange = sinon.stub();
+      await render(
+        hbs`<OSS::TogglableSection @title={{this.title}} @toggled={{this.toggled}} @onChange={{this.onChange}} @switchable={{false}} />`
+      );
+
+      await click('.inner-header');
+      assert.true(this.onChange.notCalled);
+    });
+  });
+
   test('When `header-actions` named block is passed, the content is rendered in the header', async function (assert) {
     await render(
       hbs`<OSS::TogglableSection @title={{this.title}} @toggled={{this.toggled}} @onChange={{this.onChange}} @disabled={{true}} >