feat(vwc-side-drawer): add dismissible support (#1025)

* feat(vwc-side-drawer): 1st draft * story added * story added * semi-transparent content model * alternate scheme * alternate * devider check * working example * this will break * this will not break * slot="navigation" * margin list * side drawer bigger inline size * side drawer position * appContent inlined * documentation, header, image * vvd-umbrella under devDependencies * @prop * readme * Update package.json * Update package.json * Update package.json * Update package.json * Update package.json * add border and shadow to side drawer * activated * style * Extension panel should not be activated * wider side drawer * slots documentation * restore yarn.lock * refer correct tokens * refactor * declartiveness * correct module import * ESlint * refactor names * update readme * dismissible * aside container- display flex * absolute default true * fix bugs * add tests * fix test * moved keydown listener to document * swtich cover to svg * esc on document instead of on side drawer * update ui test * ui test screenshot Co-authored-by: yinonov <yinon@hotmail.com> Co-authored-by: tveinfeld <67224311+tveinfeld@users.noreply.github.com>
Vonage · Aug 22, 2021 · 65c38d1 · 65c38d1
1 parent 518496e
commit 65c38d1
Show file tree

Hide file tree

Showing 7 changed files with 182 additions and 67 deletions.
diff --git a/components/side-drawer/readme.md b/components/side-drawer/readme.md
@@ -14,18 +14,7 @@ Represents a side drawer custom element.
 
 ## Methods
 
-| Method                 | Type                             | Description                                      |
-|------------------------|----------------------------------|--------------------------------------------------|
-| `#closed`              | `(): void`                       | Side drawer finished close animation.            |
-| `#createDispatchEvent` | `(eventName: string): void`      | DispatchEvent creator.                           |
-| `#notifyClose`         | `(): void`                       | Notify close.                                    |
-| `#notifyOpen`          | `(): void`                       | Notify open.                                     |
-| `#opened`              | `(): void`                       | Side drawer finished open animation.             |
-| `#releaseFocus`        | `(): void`                       | Releases focus trap from root element which was set by `trapFocus`.<br /><br />Notify release focus. |
-| `#trapFocus`           | `(): void`                       | Traps focus on root element and focuses the active navigation element.<br /><br />Notify trap focus. |
-| `close`                | `(): void`                       | Closes the side drawer from the open state.      |
-| `handleScrimClick`     | `(): void`                       | Click handler to close side drawer when scrim is clicked. |
-| `onKeydown`            | `({ key }: KeyboardEvent): void` | Keydown handler to close side drawer when key is escape. |
-| `onTransitionEnd`      | `(): void`                       | Handles the `transitionend` event when the side drawer finishes opening/closing. |
-| `openChanged`          | `(_isOpen: boolean): void`       | Invoked when the element open state is updated.<br /><br />Expressions inside this method will trigger upon open state change.<br /><br />**_isOpen**: Boolean of open state |
-| `show`                 | `(): void`                       | Opens the side drawer from the closed state.     |
+| Method                 | Type                        | Description                                  |
+|------------------------|-----------------------------|----------------------------------------------|
+| `hide`                 | `(): void`                  | Closes the side drawer from the open state.  |
+| `show`                 | `(): void`                  | Opens the side drawer from the closed state. |
diff --git a/components/side-drawer/src/vwc-side-drawer-base.ts b/components/side-drawer/src/vwc-side-drawer-base.ts
@@ -46,15 +46,15 @@ export class VWCSideDrawerBase extends LitElement {
 	type = '';
 
 	/**
-	 * @prop absolute - the modal can be fixed or absolute
+	 * @prop absolute - the modal and dismissible can be fixed or absolute
 	 * accepts Boolean value
 	 * @public
 	 * */
 	@property({
 		type: Boolean,
 		reflect: true
 	})
-	absolute = false;
+	absolute = true;
 
 	@property({
 		type: Boolean,
@@ -78,24 +78,24 @@ export class VWCSideDrawerBase extends LitElement {
 		this.open = false;
 	}
 
-	connectedCallback() {
+	connectedCallback(): void {
 		super.connectedCallback();
-		this.addEventListener('transitionend', this.#onTransitionEnd);
-		this.addEventListener('keydown', this.#onKeydown);
+		this.addEventListener('transitionend', this.#handleTransitionEnd);
+		document.addEventListener('keydown', this.#handleKeydown);
 	}
 
 	disconnectedCallback(): void {
 		super.disconnectedCallback();
 		this.#releaseFocus();
-		this.removeEventListener('transitionend', this.#onTransitionEnd);
-		this.removeEventListener('keydown', this.#onKeydown);
+		this.removeEventListener('transitionend', this.#handleTransitionEnd);
+		document.removeEventListener('keydown', this.#handleKeydown);
 	}
 
 	protected render(): TemplateResult {
-		const dismissible = this.type === 'dismissible' || this.type === 'modal';
+		const dismissible = this.type === 'dismissible';
 		const modal = this.type === 'modal';
 		const topBar = this.hasTopBar ? this.renderTopBar() : '';
-		const scrim = this.type === 'modal' && this.open ? this.renderScrim() : '';
+		const scrim = (this.type === 'modal' && this.open) ? this.renderScrim() : '';
 		const alternate = this.alternate ? 'vvd-scheme-alternate' : undefined;
 		const absolute = this.type === 'modal' && this.absolute;
 
@@ -107,22 +107,33 @@ export class VWCSideDrawerBase extends LitElement {
 			'vvd-side-drawer--absolute': absolute,
 		};
 
-		return html`
-			<aside
-				part="${ifDefined(alternate)}"
-				class="side-drawer ${classMap(classes)}"
-			>
-				${topBar}
+		const aside = html`<aside
+							part="${ifDefined(alternate)}"
+							class="side-drawer ${classMap(classes)}">
+							${topBar}
 
-				<div class="vvd-side-drawer--content">
-					<slot></slot>
-				</div>
-			</aside>
+							<div class="vvd-side-drawer--content">
+								<slot></slot>
+							</div>
+						</aside>`;
 
+		return html`
+			${dismissible ? this.renderDismissible(aside) : aside}
 			${scrim}
 		`;
 	}
 
+	private renderDismissible(template: TemplateResult): TemplateResult {
+		const classes = {
+			'aside-container--open': this.open,
+		};
+
+		return html`
+			<div class="aside-container ${classMap(classes)}">
+				${template}
+			</div>`;
+	}
+
 	private renderTopBar(): TemplateResult {
 		return html`
 			<div class="vvd-side-drawer--top-bar">
@@ -145,14 +156,14 @@ export class VWCSideDrawerBase extends LitElement {
 		}
 	}
 
-	#onKeydown = ({ key }: KeyboardEvent): void => {
-		if (this.type === 'modal' && this.open && key === 'Escape') {
+	#handleKeydown = ({ key }: KeyboardEvent): void => {
+		if ((this.type === 'modal' || this.type === 'dismissible') && this.open && key === 'Escape') {
 			this.hide();
 		}
 	};
 
-	#onTransitionEnd = (): void => {
-		if (this.type === 'modal') {
+	#handleTransitionEnd = (): void => {
+		if (this.type === 'modal' || this.type === 'dismissible') {
 			// when side drawer finishes open animation
 			if (this.open) {
 				this.#opened();
@@ -164,16 +175,20 @@ export class VWCSideDrawerBase extends LitElement {
 	};
 
 	#opened(): void {
-		this.#trapFocus();
+		if (this.type === 'modal') {
+			this.#trapFocus();
+		}
 		this.#notifyOpen();
 	}
 
 	#closed(): void {
-		this.#releaseFocus();
+		if (this.type === 'modal') {
+			this.#releaseFocus();
+		}
 		this.#notifyClose();
 	}
 
-	#createDispatchEvent(eventName: string) {
+	#createDispatchEvent(eventName: string): void {
 		const init: CustomEventInit = {
 			bubbles: true,
 			composed: true

diff --git a/components/side-drawer/src/vwc-side-drawer.scss b/components/side-drawer/src/vwc-side-drawer.scss
@@ -48,6 +48,30 @@ $min-width: 280px;
 			transition: transform 0.5s linear;
 		}
 	}
+
+	&.vvd-side-drawer--dismissible {
+		background-color: var(#{scheme-variables.$vvd-color-canvas});
+		@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 {
@@ -77,6 +101,11 @@ $min-width: 280px;
 	}
 }
 
+.aside-container {
+	display: flex;
+	&:not(&--open) {width: 0;}
+}
+
 .vvd-side-drawer--scrim {
 	@include scrim-mixins.scrim-variables;
 	z-index: calc(#{$z-index-default} - 1);

diff --git a/components/side-drawer/stories/side-drawer.stories.js b/components/side-drawer/stories/side-drawer.stories.js
@@ -4,6 +4,8 @@ import { styleMap } from 'lit-html/directives/style-map';
 import { html } from 'lit-element';
 import { spread } from '@open-wc/lit-helpers';
 import { argTypes } from './arg-types.js';
+import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
+import { pageContentMock } from '../../../scripts/storybook/svg_templates';
 
 export default {
 	title: 'Alpha/Components/Side Drawer',
@@ -36,12 +38,10 @@ const Template = args => html`
 			flex: 0 0 auto;
 			height: 100%;
 		}
-		div#default {
-			padding: 20px;
-			width: 960px;
-			background-image: url("data:image/svg+xml,%3Csvg width='782' height='754' viewBox='0 0 782 754' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='782' height='754' fill='%23F2F2F2'/%3E%3Crect x='23' y='80' width='733' height='248' rx='6' fill='white'/%3E%3Crect x='393' y='198' width='324' height='12' fill='%23B3B3B3'/%3E%3Crect x='393' y='230' width='324' height='12' fill='%23B3B3B3'/%3E%3Crect x='393' y='262' width='324' height='12' fill='%23B3B3B3'/%3E%3Crect x='393' y='134' width='142' height='12' fill='%23B3B3B3'/%3E%3Crect x='393' y='166' width='324' height='12' fill='%23B3B3B3'/%3E%3Crect x='53' y='120' width='290' height='168' rx='6' fill='%23CCCCCC'/%3E%3Crect width='782' height='59' fill='%23E1E1E1'/%3E%3Crect x='23' y='16' width='500' height='28' rx='3' fill='%23C4C4C4'/%3E%3Ccircle cx='646' cy='30' r='14' fill='%23C4C4C4'/%3E%3Ccircle cx='694' cy='30' r='14' fill='%23C4C4C4'/%3E%3Ccircle cx='742' cy='30' r='14' fill='%23C4C4C4'/%3E%3Crect x='23' y='348' width='733' height='240' rx='6' fill='white'/%3E%3Crect x='90' y='513' width='141' height='12' fill='%23B3B3B3'/%3E%3Crect x='90' y='539' width='141' height='12' fill='%23B3B3B3'/%3E%3Crect x='319' y='513' width='141' height='12' fill='%23B3B3B3'/%3E%3Crect x='319' y='539' width='141' height='12' fill='%23B3B3B3'/%3E%3Crect x='548' y='513' width='141' height='12' fill='%23B3B3B3'/%3E%3Crect x='548' y='539' width='141' height='12' fill='%23B3B3B3'/%3E%3Crect x='70' y='388' width='182.667' height='94' rx='6' fill='%23CCCCCC'/%3E%3Crect x='298.667' y='388' width='182.667' height='94' rx='6' fill='%23CCCCCC'/%3E%3Crect x='527.333' y='388' width='182.667' height='94' rx='6' fill='%23CCCCCC'/%3E%3Crect x='23' y='608' width='733' height='125' rx='6' fill='white'/%3E%3Crect x='81' y='651' width='618' height='12' fill='%23B3B3B3'/%3E%3Crect x='81' y='683' width='618' height='12' fill='%23B3B3B3'/%3E%3C/svg%3E%0A");
-			background-size: cover;
-		}
+		div#default > svg {
+						width: 100%;
+						height: 100%;
+					}
 	</style>
 
 	<div id="demo">
@@ -92,6 +92,8 @@ const Template = args => html`
 		</vwc-side-drawer>
 
 		<div id="default"></div>
+		${unsafeSVG(pageContentMock())}
+
 	</div>
 `;