feat(vwc-side-drawer): remove absolute support (#1029)

* 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 * remove absolute * split modal story * match svg to modal side drawer * remove absolute from ui test * remove story duplications * yarn * add modal UI test Co-authored-by: yinonov <yinon@hotmail.com> Co-authored-by: tveinfeld <67224311+tveinfeld@users.noreply.github.com>
Vonage · Aug 25, 2021 · b00ded7 · b00ded7
1 parent 6cf366c
commit b00ded7
Show file tree

Hide file tree

Showing 12 changed files with 195 additions and 167 deletions.
diff --git a/components/side-drawer/readme.md b/components/side-drawer/readme.md
@@ -6,7 +6,6 @@ Represents a side drawer custom element.
 
 | Property    | Attribute   | Type                   | Default |
 |-------------|-------------|------------------------|---------|
-| `absolute`  | `absolute`  | `boolean`              | false   |
 | `alternate` | `alternate` | `boolean`              | false   |
 | `hasTopBar` | `hasTopBar` | `boolean \| undefined` |         |
 | `open`      | `open`      | `boolean`              | false   |

diff --git a/components/side-drawer/src/vwc-side-drawer-base.ts b/components/side-drawer/src/vwc-side-drawer-base.ts
@@ -45,17 +45,6 @@ export class VWCSideDrawerBase extends LitElement {
 	})
 	type = '';
 
-	/**
-	 * @prop absolute - the modal and dismissible can be fixed or absolute
-	 * accepts Boolean value
-	 * @public
-	 * */
-	@property({
-		type: Boolean,
-		reflect: true
-	})
-	absolute = true;
-
 	@property({
 		type: Boolean,
 		reflect: true
@@ -97,14 +86,12 @@ export class VWCSideDrawerBase extends LitElement {
 		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--dismissible': dismissible,
 			'vvd-side-drawer--modal': modal,
 			'vvd-side-drawer--open': this.open,
-			'vvd-side-drawer--absolute': absolute,
 		};
 
 		const aside = html`<aside
@@ -143,11 +130,11 @@ export class VWCSideDrawerBase extends LitElement {
 
 	private renderScrim(): TemplateResult {
 		return html`
-				<div
-						class="vvd-side-drawer--scrim ${this.absolute ? 'vvd-side-drawer--absolute' : ''}"
-						@click="${this.#handleScrimClick}"
-						@keydown="${this.#handleScrimClick}"
-				></div>`;
+			<div
+				class="vvd-side-drawer--scrim"
+				@click="${this.#handleScrimClick}"
+				@keydown="${this.#handleScrimClick}"
+			></div>`;
 	}
 
 	#handleScrimClick(): void {

diff --git a/components/side-drawer/src/vwc-side-drawer.scss b/components/side-drawer/src/vwc-side-drawer.scss
@@ -88,17 +88,11 @@ $min-width: 280px;
 }
 
 .vvd-side-drawer--modal {
+	position: fixed;
 	top: 0;
 	right: initial;
 	bottom: 0;
 	left: 0;
-
-	&.vvd-side-drawer--absolute {
-		position: absolute;
-	}
-	&:not(.vvd-side-drawer--absolute) {
-		position: fixed;
-	}
 }
 
 .aside-container {
@@ -108,20 +102,14 @@ $min-width: 280px;
 
 .vvd-side-drawer--scrim {
 	@include scrim-mixins.scrim-variables;
+	position: fixed;
 	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;
-	}
 }
 
 

diff --git a/components/side-drawer/stories/arg-types.js b/components/side-drawer/stories/arg-types.js
@@ -19,7 +19,4 @@ export const argTypes = {
 	hasTopBar: {
 		control: booleanControl
 	},
-	absolute: {
-		control: booleanControl
-	}
 };
diff --git a/components/side-drawer/stories/side-drawer-modal.stories.js b/components/side-drawer/stories/side-drawer-modal.stories.js
@@ -0,0 +1,29 @@
+import { html } from 'lit-element';
+import { argTypes } from './arg-types.js';
+import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
+import { pageContentMock } from '../../../scripts/storybook/svg_templates';
+import { Basic } from './side-drawer.stories.js';
+
+export default {
+	title: 'Alpha/Components/Side Drawer/Modal',
+	component: 'vwc-side-drawer',
+	argTypes
+};
+
+const Template = args => html`
+	<style>
+		div#demo {
+			top: 0px;
+			position: fixed;
+			display: flex;
+			width: 100%;
+			height: 100%;
+		}
+	</style>
+	<div id="demo">
+		${Basic(args)}
+		${unsafeSVG(pageContentMock('100%', '100%', 'xMinYMin slice'))}
+	</div>`;
+
+export const Modal = Template.bind({});
+Modal.args = { type: 'modal', open: true };
diff --git a/components/side-drawer/stories/side-drawer.stories.js b/components/side-drawer/stories/side-drawer.stories.js
@@ -13,8 +13,6 @@ export default {
 	argTypes
 };
 
-let prevActivatedItem;
-
 const titleStyles = {
 	color: "#C0C0C0",
 	fontWeight: "bold",
@@ -39,12 +37,17 @@ const Template = args => html`
 			height: 100%;
 		}
 		div#default > svg {
-						width: 100%;
-						height: 100%;
-					}
+			width: 100%;
+			height: 100%;
+		}
 	</style>
-
 	<div id="demo">
+		${Basic(args)}
+		<div id="default"></div>
+		${unsafeSVG(pageContentMock())}
+	</div>`;
+
+const SideDrawerTemplate = args => html`
 		<vwc-side-drawer id="side-drawer" ...=${spread(args)} @click="${onClick}">
 			<span slot="top-bar">
 				<vwc-icon type="vonage-mono"></vwc-icon> VONAGE
@@ -88,15 +91,21 @@ const Template = args => html`
 					<vwc-list-item shape="rounded">2nd level item</vwc-list-item>
 				</vwc-list-expansion-panel>
 			</vwc-list>
+		</vwc-side-drawer>`;
 
-		</vwc-side-drawer>
+export const Basic = SideDrawerTemplate.bind({});
+Basic.args = { };
 
-		<div id="default"></div>
-		${unsafeSVG(pageContentMock())}
+export const Alternate = Template.bind({});
+Alternate.args = { alternate: true };
 
-	</div>
-`;
+export const TopBar = Template.bind({});
+TopBar.args = { hasTopBar: true };
 
+export const Dismissible = Template.bind({});
+Dismissible.args = { type: 'dismissible', open: true };
+
+let prevActivatedItem;
 function onClick(e) {
 	// only list items can be activated
 	if (e.target.localName !== "vwc-list-item") {
@@ -111,18 +120,3 @@ function onClick(e) {
 	prevActivatedItem = e.target;
 	prevActivatedItem.activated = true;
 }
-
-export const Basic = Template.bind({});
-Basic.args = { };
-
-export const Alternate = Template.bind({});
-Alternate.args = { alternate: true };
-
-export const TopBar = Template.bind({});
-TopBar.args = { hasTopBar: true };
-
-export const Dismissible = Template.bind({});
-Dismissible.args = { type: 'dismissible', open: true };
-
-export const Modal = Template.bind({});
-Modal.args = { type: 'modal', open: true };
diff --git a/components/side-drawer/test/side-drawer.test.js b/components/side-drawer/test/side-drawer.test.js
@@ -53,15 +53,12 @@ describe('Side-drawer', () => {
 			expect(actualElement.hasTopBar, 'hasTopBar should be undefined')
 				.to
 				.equal(undefined);
-			expect(actualElement.absolute, 'absolute should be false')
-				.to
-				.equal(true);
 		});
 	});
 
 	describe('Side drawer attributes', () => {
 		it('should reflect from attribute to property', async () => {
-			const COMPONENT_PROPERTIES = ['open', 'alternate', 'hasTopBar', 'absolute'];
+			const COMPONENT_PROPERTIES = ['open', 'alternate', 'hasTopBar'];
 			for await (const property of COMPONENT_PROPERTIES) {
 				const [actualElement] = addElement(
 					textToDomToParent(`<${COMPONENT_NAME} ${property}></${COMPONENT_NAME}>`)

diff --git a/scripts/storybook/svg_templates.js b/scripts/storybook/svg_templates.js
@@ -1,7 +1,7 @@
 module.exports = {
-	pageContentMock: function (width = 782, height = 754) {
+	pageContentMock: function (width = '782', height = '754', preserveAspectRatio = 'xMidYMin') {
 		return `
-		<svg width='${width}' height='${height}' viewBox='0 0 ${width} ${height}' preserveAspectRatio='xMidYMin' fill='none' xmlns='http://www.w3.org/2000/svg'>
+		<svg width=${width} height=${height} viewBox='0 0 782 754' preserveAspectRatio='${preserveAspectRatio}' fill='none' xmlns='http://www.w3.org/2000/svg'>
 \t<style>
 \t\t.scheme_1 {
 \t\t\tfill: var(--vvd-color-neutral-10, #eee);

diff --git a/ui-tests/snapshots/vwc-side-drawer-modal.png b/ui-tests/snapshots/vwc-side-drawer-modal.png
diff --git a/ui-tests/snapshots/vwc-side-drawer.png b/ui-tests/snapshots/vwc-side-drawer.png
diff --git a/ui-tests/tests/vwc-side-drawer-modal/index.js b/ui-tests/tests/vwc-side-drawer-modal/index.js
@@ -0,0 +1,70 @@
+import '@vonage/vwc-side-drawer';
+import '@vonage/vwc-list/vwc-list-expansion-panel.js';
+import '@vonage/vwc-list/vwc-list.js';
+import '@vonage/vwc-list/vwc-list-item.js';
+import '@vonage/vwc-icon/vwc-icon.js';
+import { snapshotTheWholePage } from '../../utils/testPageUtils';
+import { pageContentMock } from '../../../scripts/storybook/svg_templates';
+
+export async function createElementVariations(wrapper) {
+	snapshotTheWholePage(wrapper);
+	const elementWrapper = document.createElement('div');
+	elementWrapper.innerHTML = `
+	<style>
+		div#demo {
+			top: 0px;
+			position: fixed;
+			display: flex;
+			width: 100%;
+			height: 100%;
+		}
+	</style>
+
+	<div>
+		<div id="demo">
+			<vwc-side-drawer id="side-drawer" type="modal" hasTopBar open>
+				<span slot="top-bar">
+					<vwc-icon type="vonage-mono"></vwc-icon> VONAGE
+				</span>
+
+				<vwc-list
+						innerRole="navigation"
+						innerAriaLabel="Primary navigation"
+						itemRoles="link"
+					>
+					<vwc-list-item shape="rounded" graphic="icon">
+						<vwc-icon slot="graphic" type="home-line"></vwc-icon>1st level item
+					</vwc-list-item>
+
+					<p>SECTION TITLE</p>
+
+					<vwc-list-item shape="rounded" graphic="icon">
+						<vwc-icon slot="graphic" type="chat-line"></vwc-icon>1st level item
+					</vwc-list-item>
+
+					<vwc-list-expansion-panel open>
+						<vwc-list-item slot="header" shape="rounded" graphic="icon">
+							<vwc-icon slot="graphic" type="chat-line"></vwc-icon>1st level item
+						</vwc-list-item>
+						<vwc-list-expansion-panel open>
+							<vwc-list-item slot="header" shape="rounded"
+								>2nd level item</vwc-list-item
+							>
+							<vwc-list-item shape="rounded">3rd level item</vwc-list-item>
+							<vwc-list-item shape="rounded">3rd level item</vwc-list-item>
+						</vwc-list-expansion-panel>
+					</vwc-list-expansion-panel>
+				</vwc-list>
+
+			</vwc-side-drawer>
+
+			<div id="default"></div>
+			${pageContentMock('100%', '100%', 'xMinYMin slice')}
+
+		</div>
+	</div>
+`;
+wrapper.appendChild(elementWrapper);
+}
+
+