Merge pull request #69 from umbraco/fix/upgraderstory

Fix/upgraderstory

src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.element.ts

@@ -89,11 +89,7 @@ export class UmbUpgraderView extends LitElement {
 	}
 
 	render() {
-		return html` <umb-installer-layout>
-			<div id="container" class="uui-text">
-				${this.fetching ? html`<div class="center"><uui-loader></uui-loader></div>` : this._renderLayout()}
-			</div>
-		</umb-installer-layout>`;
+		return html` ${this.fetching ? html`<div class="center"><uui-loader></uui-loader></div>` : this._renderLayout()} `;
 	}
 
 	_handleSubmit = async (e: SubmitEvent) => {

src/Umbraco.Web.UI.Client/src/upgrader/upgrader.element.ts

@@ -29,12 +29,14 @@ export class UmbUpgrader extends LitElement {
 	}
 
 	render() {
-		return html`<umb-upgrader-view
-			.fetching=${this.fetching}
-			.upgrading=${this.upgrading}
-			.settings=${this.upgradeSettings}
-			.errorMessage=${this.errorMessage}
-			@onAuthorizeUpgrade=${this._handleSubmit}></umb-upgrader-view>`;
+		return html`<umb-installer-layout>
+			<umb-upgrader-view
+				.fetching=${this.fetching}
+				.upgrading=${this.upgrading}
+				.settings=${this.upgradeSettings}
+				.errorMessage=${this.errorMessage}
+				@onAuthorizeUpgrade=${this._handleSubmit}></umb-upgrader-view>
+		</umb-installer-layout>`;
 	}
 
 	private async _setup() {

src/Umbraco.Web.UI.Client/src/upgrader/upgrader.stories.ts

@@ -24,6 +24,13 @@ export default {
 			handles: ['onAuthorizeUpgrade'],
 		},
 	},
+	decorators: [
+		(story) =>
+			html`<div
+				style="margin:2rem; max-width:400px;border:1px solid #ccc;border-radius:30px 0px 0px 30px;padding:var(--uui-size-layout-4) var(--uui-size-layout-4) var(--uui-size-layout-2) var(--uui-size-layout-4);">
+				${story()}
+			</div>`,
+	],
 } as Meta<UmbUpgraderView>;
 
 const Template: Story<UmbUpgraderView> = ({ upgrading, errorMessage, settings, fetching }) =>
@@ -40,13 +47,12 @@ Upgrading.args = {
 	upgrading: true,
 };
 
-export const fetching = Template.bind({});
-fetching.args = {
-	fetching: true
-}
+export const Fetching = Template.bind({});
+Fetching.args = {
+	fetching: true,
+};
 
 export const Error = Template.bind({});
 Error.args = {
 	errorMessage: 'Something went wrong',
 };
-