From 78d9df240bb598d30bc94d3cb56e9317a7558706 Mon Sep 17 00:00:00 2001
From: Olympe Lespagnon <olympe.lespagnon@upfluence.com>
Date: Tue, 4 Aug 2026 17:00:02 +0200
Subject: [PATCH 1/2] Groundwork: Add OSS::TogglableSection option to remove
 the switch

---
 addon/components/o-s-s/togglable-section.hbs  |  4 ++-
 .../o-s-s/togglable-section.stories.js        | 32 +++++++++++++++++--
 addon/components/o-s-s/togglable-section.ts   |  7 +++-
 tests/dummy/app/templates/index.hbs           | 15 +++++++--
 .../o-s-s/togglable-section-test.ts           | 28 ++++++++++++++++
 5 files changed, 79 insertions(+), 7 deletions(-)

diff --git a/addon/components/o-s-s/togglable-section.hbs b/addon/components/o-s-s/togglable-section.hbs
index 23d4d6c5b..eeff9b0e9 100644
--- a/addon/components/o-s-s/togglable-section.hbs
+++ b/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" />
diff --git a/addon/components/o-s-s/togglable-section.stories.js b/addon/components/o-s-s/togglable-section.stories.js
index fd1cc269d..94e43b0f9 100644
--- a/addon/components/o-s-s/togglable-section.stories.js
+++ b/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;
diff --git a/addon/components/o-s-s/togglable-section.ts b/addon/components/o-s-s/togglable-section.ts
index 3016ff975..b7f83aa95 100644
--- a/addon/components/o-s-s/togglable-section.ts
+++ b/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 !== false;
+  }
+
   @action
   onHeaderClick(): void {
-    if (this.args.disabled) return;
+    if (this.args.disabled || !this.isSwitchable) return;
     this.args.onChange(!this.args.toggled);
   }
 
diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs
index e9fb8380f..4083cfe4b 100644
--- a/tests/dummy/app/templates/index.hbs
+++ b/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>
 
diff --git a/tests/integration/components/o-s-s/togglable-section-test.ts b/tests/integration/components/o-s-s/togglable-section-test.ts
index e7a44943b..140c69e27 100644
--- a/tests/integration/components/o-s-s/togglable-section-test.ts
+++ b/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}} >

From 56849bb7b7bed69954d09a5fced16d16211140d1 Mon Sep 17 00:00:00 2001
From: Olympe Lespagnon <80198185+olxmpe@users.noreply.github.com>
Date: Wed, 5 Aug 2026 14:47:50 +0200
Subject: [PATCH 2/2] Update addon/components/o-s-s/togglable-section.ts

Co-authored-by: Julien "HolyDeath" Vannier <julien.vannier66@gmail.com>
---
 addon/components/o-s-s/togglable-section.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addon/components/o-s-s/togglable-section.ts b/addon/components/o-s-s/togglable-section.ts
index b7f83aa95..a6cdbe1b0 100644
--- a/addon/components/o-s-s/togglable-section.ts
+++ b/addon/components/o-s-s/togglable-section.ts
@@ -29,7 +29,7 @@ export default class CampaignTogglableSection extends Component<CampaignTogglabl
   }
 
   get isSwitchable(): boolean {
-    return this.args.switchable !== false;
+    return this.args.switchable ?? true;
   }
 
   @action