feat(vwc-side-drawer): add modal support

__snapshots__/Side-drawer.md

@@ -3,7 +3,7 @@
 #### `should internal contents`
 
 ```html
-<aside class="side-drawer">
+<aside class="side-drawer vvd-side-drawer--open">
   <div class="vvd-side-drawer--content">
     <slot>
     </slot>

common/foundation/scss/mixins/_scrim.scss

@@ -0,0 +1,9 @@
+$vvd-scrim--background-color: --vvd-scrim--background-color;
+$vvd-scrim--opacity: --vvd-scrim--opacity;
+
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
+
+@mixin scrim-variables {
+	#{$vvd-scrim--background-color}: var(#{scheme-variables.$vvd-color-neutral});
+	#{$vvd-scrim--opacity}: 0.32;
+}

components/dialog/package.json

@@ -38,4 +38,4 @@
 		"@vonage/vvd-umbrella": "2.17.0",
 		"typescript": "^4.3.2"
 	}
-}
+}

components/dialog/src/vwc-dialog.scss

@@ -1,5 +1,6 @@
 @use '@vonage/vvd-typography/scss/typography' as typography;
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
+@use '@vonage/vvd-foundation/scss/mixins/scrim' as scrim-mixins;
 
 #title,
 #content,
@@ -47,8 +48,9 @@
 }
 
 .mdc-dialog .mdc-dialog__scrim {
-	--mdc-dialog-scrim-color: var(#{scheme-variables.$vvd-color-neutral});
-	opacity: 0.32;
+	--mdc-dialog-scrim-color: var(#{scrim-mixins.$vvd-scrim--background-color});
+	@include scrim-mixins.scrim-variables;
+	opacity: var(#{scrim-mixins.$vvd-scrim--opacity});
 }
 
 .dismiss-button {

components/side-drawer/src/vwc-side-drawer-base.ts

@@ -1,9 +1,16 @@
+import 'blocking-elements';
+import 'wicg-inert';
+
 import {
 	html, LitElement, TemplateResult, property,
 } from 'lit-element';
-import { nothing } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { classMap } from 'lit-html/directives/class-map';
+import { observer } from '@material/mwc-base/observer';
+import { DocumentWithBlockingElements } from 'blocking-elements';
+
+const blockingElements =
+	(document as DocumentWithBlockingElements).$blockingElements;
 
 /**
  * @slot header - The content of the header.
@@ -29,43 +36,182 @@ export class VWCSideDrawerBase extends LitElement {
 	@property({ type: Boolean, reflect: true })
 	hasTopBar?: boolean;
 
+	/**
+	 * @prop type - can be modal, dismissible or empty
+	 * accepts String value
+	 * @public
+	 * */
+	@property({ type: String, reflect: true })
+	type = '';
+
+	/**
+	 * @prop absolute - the modal can be fixed or absolute
+	 * accepts Boolean value
+	 * @public
+	 * */
+	@property({ type: Boolean, reflect: true })
+	absolute = false;
+
+	@property({ type: Boolean, reflect: true })
+	@observer(function (
+		this: VWCSideDrawerBase,
+		isOpen: boolean,
+		wasOpen: boolean
+	) {
+		if (isOpen) {
+			this.show();
+			// wasOpen helps with first render (when it is `undefined`) perf
+		} else if (wasOpen !== undefined) {
+			this.close();
+		}
+		this.openChanged(isOpen);
+	})
+	open = true;
+	/**
+	 * Invoked when the element open state is updated.
+	 *
+	 * Expressions inside this method will trigger upon open state change
+	 *
+	 * @param _isOpen Boolean of open state
+	 */ openChanged(
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		_isOpen: boolean
+		// eslint-disable-next-line @typescript-eslint/no-empty-function
+	): void {}
+
+	/**
+	 * Opens the drawer from the closed state.
+	 */
+	show(): void {
+		this.open = true;
+	}
+
+	/**
+	 * Closes the drawer from the open state.
+	 */
+	close(): void {
+		this.open = false;
+	}
+
+	/**
+	 * Side drawer finished open animation.
+	 */
+	#opened(): void {
+		this.trapFocus();
+		this.notifyOpen();
+	}
+
+	/**
+	 * Side drawer finished close animation.
+	 */
+	#closed(): void {
+		this.releaseFocus();
+		this.notifyClose();
+	}
+
+	notifyClose(): void {
+		const init: CustomEventInit = { bubbles: true, composed: true };
+		const ev = new CustomEvent('closed', init);
+		this.open = false;
+		this.dispatchEvent(ev);
+	}
+
+	notifyOpen(): void {
+		const init: CustomEventInit = { bubbles: true, composed: true };
+		const ev = new CustomEvent('opened', init);
+		this.open = true;
+		this.dispatchEvent(ev);
+	}
+
+	disconnectedCallback(): void {
+		super.disconnectedCallback();
+		this.releaseFocus();
+	}
+
+	trapFocus(): void {
+		blockingElements.push(this);
+	}
+
+	releaseFocus(): void {
+		blockingElements.remove(this);
+	}
+
+	#handleScrimClick(): void {
+		if (this.type === 'modal' && this.open) {
+			this.close();
+		}
+	}
+
+	#onKeydown({ key }: KeyboardEvent): void {
+		console.log(this.type, this.open, key);
+		if (this.type === 'modal' && this.open && key === 'Escape') {
+			this.close();
+		}
+	}
+
+	#onTransitionEnd(): void {
+		if (this.type === 'modal') {
+			// when side drawer finishes open animation
+			if (this.open) {
+				this.#opened();
+			} else {
+				// when side drawer finishes close animation
+				this.#closed();
+			}
+		}
+	}
+
 	private renderTopBar(): TemplateResult {
 		return html`<div class="vvd-side-drawer--top-bar">
 			<slot name="top-bar"></slot>
 		</div>`;
 	}
 
+	private renderScrim(): TemplateResult {
+		// eslint-disable-next-line lit-a11y/click-events-have-key-events
+		return html`<div
+			class="vvd-side-drawer--scrim ${this.absolute
+		? 'vvd-side-drawer--absolute'
+		: ''}"
+			@click="${this.#handleScrimClick}"
+		></div>`;
+	}
+
 	/**
 	 * the html markup
 	 * @internal
 	 * */
 	protected render(): TemplateResult {
-		const topBar = this.hasTopBar
-			? this.renderTopBar()
-			: nothing;
-
-		const alternate = this.alternate
-			? 'vvd-scheme-alternate'
-			: undefined;
+		const dismissible = this.type === 'dismissible' || this.type === 'modal';
+		const modal = this.type === 'modal';
+		const topBar = this.hasTopBar ? this.renderTopBar() : '';
+		const scrim = this.type === 'modal' && this.open ? this.renderScrim() : '';
+		const alternate = this.alternate ? 'vvd-scheme-alternate' : undefined;
+		const absolute = this.type === 'modal' && this.absolute;
 
 		const classes = {
 			'vvd-side-drawer--alternate': this.alternate,
-			// 'vvd-side-drawer--modal': this.modal, // !@rinaok use with modal
+			'vvd-side-drawer--dismissible': dismissible,
+			'vvd-side-drawer--modal': modal,
+			'vvd-side-drawer--open': this.open,
+			'vvd-side-drawer--absolute': absolute,
 		};
 
 		return html`
 			<aside
 				part="${ifDefined(alternate)}"
 				class="side-drawer ${classMap(classes)}"
+				@keydown=${this.#onKeydown}
+				@transitionend=${this.#onTransitionEnd}
 			>
-
 				${topBar}
 
 				<div class="vvd-side-drawer--content">
 					<slot></slot>
 				</div>
-
 			</aside>
+
+			${scrim}
 		`;
 	}
 }

components/side-drawer/src/vwc-side-drawer.scss

@@ -1,38 +1,99 @@
 $vvd-side-drawer--padding: --vvd-side-drawer--padding;
+$vvd-side-drawer--min-inline-size: --vvd-side-drawer--min-inline-size;
+$vvd-side-drawer--z-index: --vvd-side-drawer--z-index;
+
+$z-index-default: var(#{$vvd-side-drawer--z-index}, 6);
+$padding-default: var(#{$vvd-side-drawer--padding}, 16px);
+$min-width: 280px;
 
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
 @use '@vonage/vvd-typography/scss/typography' as typography;
+@use '@vonage/vvd-foundation/scss/mixins/scrim' as scrim-mixins;
 
 :host {
-	--vvd-side-drawer--padding: 16px;
 	display: flex;
-	min-inline-size: 280px;
+	block-size: 100%;
 }
 
 .side-drawer {
-	block-size: 100%;
-	inline-size: 100%;
-	// box-sizing: border-box;
-	// padding: 10px;
-	// margin: 0;
+	z-index: #{$z-index-default};
+	color: var(#{scheme-variables.$vvd-color-on-base});
+	min-inline-size: var(#{$vvd-side-drawer--min-inline-size}, $min-width);
 	&:not(.vvd-side-drawer--alternate):not(.vvd-side-drawer--modal) {
 		background-color: var(#{scheme-variables.$vvd-color-neutral-10});
 	}
-	&.vvd-side-drawer--alternate,
+	&.vvd-side-drawer--alternate {
+		background-color: var(#{scheme-variables.$vvd-color-base});
+	}
 	&.vvd-side-drawer--modal {
 		background-color: var(#{scheme-variables.$vvd-color-base});
+		@media screen and (prefers-reduced-motion: reduce) {
+			&.vvd-side-drawer--open {
+				transform: translateX(0%);
+				transition: none;
+			}
+		}
+
+		&.vvd-side-drawer--open {
+			transform: translateX(0%);
+			transition: transform 0.5s linear;
+		}@media screen and (prefers-reduced-motion: reduce) {
+			&:not(.vvd-side-drawer--open) {
+				transform: translateX(-100%);
+				transition: none;
+			}
+		}
+		&:not(.vvd-side-drawer--open) {
+			transform: translateX(-100%);
+			transition: transform 0.5s linear;
+		}
 	}
 }
 
 .vvd-side-drawer--top-bar {
 	display: flex;
 	align-items: center;
 	block-size: 64px;
-	padding-inline-end: var(#{$vvd-side-drawer--padding}--top-bar, var(#{$vvd-side-drawer--padding}));
-	padding-inline-start: var(#{$vvd-side-drawer--padding}--top-bar, var(#{$vvd-side-drawer--padding}));
+	padding-inline-end: var(#{$vvd-side-drawer--padding}--top-bar, #{$padding-default});
+	padding-inline-start: var(#{$vvd-side-drawer--padding}--top-bar, #{$padding-default});
 }
 
 .vvd-side-drawer--content {
-	padding-inline-end: var(#{$vvd-side-drawer--padding}--content, var(#{$vvd-side-drawer--padding}));
-	padding-inline-start: var(#{$vvd-side-drawer--padding}--content, var(#{$vvd-side-drawer--padding}));
+	padding-inline-end: var(#{$vvd-side-drawer--padding}--content, #{$padding-default});
+	padding-inline-start: var(#{$vvd-side-drawer--padding}--content, #{$padding-default});
 }
+
+.vvd-side-drawer--modal {
+	top: 0;
+	right: initial;
+	bottom: 0;
+	left: 0;
+
+	&.vvd-side-drawer--absolute {
+		position: absolute;
+	}
+	&:not(.vvd-side-drawer--absolute) {
+		position: fixed;
+	}
+}
+
+.vvd-side-drawer--scrim {
+	@include scrim-mixins.scrim-variables;
+	z-index: calc(#{$z-index-default} - 1);
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: var(#{scrim-mixins.$vvd-scrim--background-color});
+	opacity: var(#{scrim-mixins.$vvd-scrim--opacity});
+
+	&.vvd-side-drawer--absolute {
+		position: absolute;
+	}
+	&:not(.vvd-side-drawer--absolute) {
+		position: fixed;
+	}
+}
+
+
+

components/side-drawer/src/vwc-side-drawer.ts

@@ -1,6 +1,5 @@
 import '@vonage/vvd-core';
 import { customElement } from 'lit-element';
-
 import { VWCSideDrawerBase } from './vwc-side-drawer-base.js';
 import { style } from './vwc-side-drawer.css.js';