Use spinner in the aside (#173)

Tradeshift · Oct 28, 2019 · f1bc9f9 · f1bc9f9
1 parent 88dce9a
commit f1bc9f9
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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);
 }