From 734998bb8f5f417ed32d3dcf8da2a1b61b519201 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Tue, 26 Mar 2024 16:30:54 +0100
Subject: [PATCH] add extensions host to story

---
 .../current-user-mfa-modal.stories.ts         | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa/current-user-mfa-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa/current-user-mfa-modal.stories.ts
index 61ef9cc5c8..3cc026603d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa/current-user-mfa-modal.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa/current-user-mfa-modal.stories.ts
@@ -1,13 +1,36 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import type { UmbCurrentUserMfaModalElement } from './current-user-mfa-modal.element.js';
 import { html } from '@umbraco-cms/backoffice/external/lit';
+import { UmbServerExtensionRegistrator } from '@umbraco-cms/backoffice/extension-api';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 
 import './current-user-mfa-modal.element.js';
 
+class UmbServerExtensionsHostElement extends UmbLitElement {
+	constructor() {
+		super();
+		new UmbServerExtensionRegistrator(this, umbExtensionsRegistry).registerAllExtensions();
+	}
+
+	render() {
+		return html`<slot></slot>`;
+	}
+}
+
+if (window.customElements.get('umb-server-extensions-host') === undefined) {
+	customElements.define('umb-server-extensions-host', UmbServerExtensionsHostElement);
+}
+
 const meta: Meta<UmbCurrentUserMfaModalElement> = {
 	title: 'Current User/MFA/Configure MFA Providers',
 	component: 'umb-current-user-mfa-modal',
-	decorators: [(Story) => html`<div style="width: 500px; height: 500px;">${Story()}</div>`],
+	decorators: [
+		(Story) =>
+			html`<umb-server-extensions-host style="display: block; width: 500px; height: 500px;">
+				${Story()}
+			</umb-server-extensions-host>`,
+	],
 	parameters: {
 		layout: 'centered',
 		actions: {