From f1bc9f9ff5bb294945d53c9e885816d84f4d88a4 Mon Sep 17 00:00:00 2001
From: leo zhang <zdlm@users.noreply.github.com>
Date: Mon, 28 Oct 2019 11:49:53 +0100
Subject: [PATCH] Use spinner in the aside (#173)

---
 index.html                                     |  2 +-
 packages/components/aside/src/aside.css        | 18 ++++++++++++++++++
 packages/components/aside/src/aside.js         | 16 +++++++++++++++-
 .../components/aside/stories/aside.stories.js  |  9 ++++++---
 packages/components/spinner/src/spinner.css    |  5 +----
 5 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index c83435320..942cf81e2 100644
--- a/index.html
+++ b/index.html
@@ -640,7 +640,7 @@ <h2>Typography</h2>
 				<h2>Spinner</h2>
 				<ts-spinner data-visible data-size="medium" data-color="mono"> </ts-spinner>
 			</article>
-			<ts-aside data-title="hello" id="my-aside">
+			<ts-aside data-title="hello" data-busy id="my-aside">
 				<ts-note slot="note">
 					Takimata gubergren sadipscing sed consetetur gubergren , nonumy diam clita aliquyam consetetur sadipscing,
 					vero amet sea consetetur sit diam sit dolor.
diff --git a/packages/components/aside/src/aside.css b/packages/components/aside/src/aside.css
index 4df81d313..395c6ac2a 100644
--- a/packages/components/aside/src/aside.css
+++ b/packages/components/aside/src/aside.css
@@ -19,6 +19,24 @@
 	display: none;
 }
 
+/* Spinner........................................................ */
+.spinner-overlay {
+	position: absolute;
+	top: var(--ts-unit-triple);
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: rgba(255, 255, 255, 0.7);
+}
+
+.aside-container ts-spinner {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin-top: calc(-0.5 * var(--spinner-size-large));
+	margin-left: calc(-0.5 * var(--spinner-size-large));
+}
+
 /* Header......................................................... */
 
 .aside-container header {
diff --git a/packages/components/aside/src/aside.js b/packages/components/aside/src/aside.js
index e5e0645d9..eebc7b88b 100644
--- a/packages/components/aside/src/aside.js
+++ b/packages/components/aside/src/aside.js
@@ -2,6 +2,7 @@ import { TSElement, unsafeCSS, html, customElementDefineHelper } from '@tradeshi
 import css from './aside.css';
 import '@tradeshift/elements.button';
 import '@tradeshift/elements.cover';
+import '@tradeshift/elements.spinner';
 import { customEventNames } from './utils';
 
 customElementDefineHelper(
@@ -15,6 +16,7 @@ customElementDefineHelper(
 			return {
 				title: { type: String, attribute: 'data-title' },
 				visible: { type: Boolean, attribute: 'data-visible', reflect: true },
+				busy: { type: String, attribute: 'data-busy', reflect: true },
 				hasFoot: { type: Boolean },
 				hasPlatformObject: { type: Boolean }
 			};
@@ -53,6 +55,17 @@ customElementDefineHelper(
 			return `${pre}-${mid}-${dir}`;
 		}
 
+		get spinner() {
+			if (this.busy === undefined || this.busy === null) {
+				return '';
+			}
+			return html`
+				<div class="spinner-overlay">
+					<ts-spinner data-visible data-message="${this.busy}"></ts-spinner>
+				</div>
+			`;
+		}
+
 		render() {
 			return html`
 				<div dir="${this.direction}" class="aside-container ${this.slide} ${this.hasFoot ? 'has-footer' : ''}">
@@ -65,7 +78,7 @@ customElementDefineHelper(
 					<div class="aside-note">
 						<slot name="note" class="note-in-aside"></slot>
 					</div>
-					<div class="aside-platform-object ${this.hasPlatformObject ? '' : 'hidden'}"">
+					<div class="aside-platform-object ${this.hasPlatformObject ? '' : 'hidden'}">
 						<slot name="platform-object" @slotchange="${this.platformObjectSlot}"></slot>
 					</div>
 					<main class="aside-main">
@@ -74,6 +87,7 @@ customElementDefineHelper(
 					<footer>
 						<slot name="footer" @slotchange="${this.footerSlot}"></slot>
 					</footer>
+					${this.spinner}
 				</div>
 				<ts-cover class="ts-aside-cover" ?data-visible=${this.visible} @click="${this.close}"></ts-cover>
 			`;
diff --git a/packages/components/aside/stories/aside.stories.js b/packages/components/aside/stories/aside.stories.js
index 77bdab088..a02d18caa 100644
--- a/packages/components/aside/stories/aside.stories.js
+++ b/packages/components/aside/stories/aside.stories.js
@@ -12,8 +12,9 @@ storiesOf('ts-aside', module)
 		() => {
 			const title = text('Title', 'Aside');
 			const visible = boolean('Visible', true);
+			const busy = boolean('Busy', false);
 			return html`
-				<ts-aside data-title="${title}" ?data-visible="${visible}">
+				<ts-aside data-title="${title}" ?data-busy="${busy}" ?data-visible="${visible}">
 					<ts-panel slot="main">
 						These oft shamed not mothernot now harolds tear congealed virtues. To hall riot awake parasites ye his
 						mirthful beyond. Such sighed his start glee had soon yes if, domestic days for labyrinth her within in
@@ -33,8 +34,9 @@ storiesOf('ts-aside', module)
 		() => {
 			const title = text('Title', 'Aside');
 			const visible = boolean('Visible', true);
+			const busy = boolean('Busy', false);
 			return html`
-				<ts-aside data-title="${title}" ?data-visible="${visible}">
+				<ts-aside data-title="${title}" ?data-busy="${busy}" ?data-visible="${visible}">
 					<ts-panel slot="main">
 						Forse donne speranza siamo esperienza mentre seguitando sé nostro l'uomo, dare e di da prestasse noi non.
 						Mentre di alcun vita forza siamo sua io in sogiacere, ciascheduna reputiamo primo forse porgiamo dovendo
@@ -52,8 +54,9 @@ storiesOf('ts-aside', module)
 		'With note',
 		() => {
 			const visible = boolean('Visible', true);
+			const busy = boolean('Busy', false);
 			return html`
-				<ts-aside data-title="Aside with note" ?data-visible="${visible}">
+				<ts-aside data-title="Aside with note" ?data-busy="${busy}" ?data-visible="${visible}">
 					<ts-note slot="note">
 						Takimata sed sea lorem kasd sit est.
 					</ts-note>
diff --git a/packages/components/spinner/src/spinner.css b/packages/components/spinner/src/spinner.css
index 169ca1500..b132762a2 100644
--- a/packages/components/spinner/src/spinner.css
+++ b/packages/components/spinner/src/spinner.css
@@ -6,7 +6,7 @@
 
 :host .spinner {
 	border: var(--spinner-border-large) solid var(--spinner-border-color);
-	border-top: var(--spinner-border-large) solid var(--spinner-color-blue);
+	border-top-color: var(--spinner-color-blue);
 	border-radius: 50%;
 	width: var(--spinner-size-large);
 	height: var(--spinner-size-large);
@@ -23,7 +23,6 @@
 
 :host([data-size='large']) .spinner {
 	border-width: var(--spinner-border-large);
-	border-top-width: var(--spinner-border-large);
 	width: var(--spinner-size-large);
 	height: var(--spinner-size-large);
 }
@@ -35,7 +34,6 @@
 
 :host([data-size='medium']) .spinner {
 	border-width: var(--spinner-border-medium);
-	border-top-width: var(--spinner-border-medium);
 	width: var(--spinner-size-medium);
 	height: var(--spinner-size-medium);
 }
@@ -47,7 +45,6 @@
 
 :host([data-size='small']) .spinner {
 	border-width: var(--spinner-border-small);
-	border-top-width: var(--spinner-border-small);
 	width: var(--spinner-size-small);
 	height: var(--spinner-size-small);
 }