feat(side-drawer): add end and start positions (#1146)

* add side property

* update to inset

* add story

* update tests

* update readme

* update snapshot

* update ui test

__snapshots__/Side-drawer.md → __snapshots__/side-drawer.md

@@ -4,12 +4,12 @@
 
 ```html
 <aside class="side-drawer">
-  <div class="side-drawer--content">
+  <div class="side-drawer-content">
     <slot>
     </slot>
   </div>
 </aside>
-<div class="side-drawer--app-content">
+<div class="side-drawer-app-content">
   <slot name="app-content">
   </slot>
 </div>

components/side-drawer/readme.md

@@ -4,12 +4,13 @@ Represents a side drawer custom element.
 
 ## Properties
 
-| Property    | Attribute   | Type                   | Default |
-| ----------- | ----------- | ---------------------- | ------- |
-| `alternate` | `alternate` | `boolean`              | false   |
-| `hasTopBar` | `hasTopBar` | `boolean \| undefined` |         |
-| `open`      | `open`      | `boolean`              | false   |
-| `type`      | `type`      | `string`               | ""      |
+| Property    | Attribute   | Type                                    | Default | Description |
+| ----------- | ----------- | --------------------------------------- | ------- | ----------- |
+| `alternate` | `alternate` | `boolean`                               | false   |             |
+| `hasTopBar` | `hasTopBar` | `boolean \| undefined`                  |         |             |
+| `open`      | `open`      | `boolean`                               | false   |             |
+| `position`  | `position`  | `"start" \| "end" \| undefined`         | "start" |             |
+| `type`      | `type`      | `"modal" \| "dismissible" \| undefined` |         |             |
 
 ## Methods
 
@@ -19,9 +20,13 @@ Represents a side drawer custom element.
 | `show` | `(): void` | Opens the side drawer from the closed state. |
 
 
-| Property                       | Default                                         | Description                                 |
-| ------------------------------ | ----------------------------------------------- | ------------------------------------------- |
-| `side-drawer-background-color` | "The current theme's canvas (background) color" | Controls the background of the side drawer  |
-| `side-drawer-inline-size`      | "280px"                                         | Controls the inline size of the side drawer |
-| `side-drawer-padding`          | "16px"                                          | Controls the padding of the side drawer     |
-| `side-drawer-z-index`          | 6                                               | Controls the z-index of the side drawer     |
+## CSS Custom Properties
+
+| Property                       | Default                                     | Description                                       |
+| ------------------------------ | ------------------------------------------- | ------------------------------------------------- |
+| `side-drawer-background-color` | "Current theme's canvas (background) color" | Controls the background of the side drawer        |
+| `side-drawer-color`            | "Current theme's on-canvas (text) color"    | Controls the color of the side drawer             |
+| `side-drawer-inline-size`      | "280px"                                     | Controls the inline size of the side drawer       |
+| `side-drawer-padding-body`     | "16px"                                      | Controls the padding of the side drawer's body    |
+| `side-drawer-padding-top-bar`  | "16px"                                      | Controls the padding of the side drawer's top bar |
+| `side-drawer-z-index`          | 6                                           | Controls the z-index of the side drawer           |

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

@@ -54,12 +54,27 @@ export class VWCSideDrawerBase extends LitElement {
 	})
 		type?: 'modal' | 'dismissible';
 
+	/**
+	* @prop open - indicates whether the side drawer is open
+	* accepts boolean value
+	* */
 	@property({
 		type: Boolean,
 		reflect: true
 	})
 		open = false;
 
+	/**
+	 * @prop side - sets the side of the side drawer
+	 * accepts "start" | "end"
+	 * @public
+	 * */
+	@property({
+		type: String,
+		reflect: true
+	})
+		position?: 'start' | 'end';
+
 	/**
 	 * Opens the side drawer from the closed state.
 	 * @public
@@ -93,50 +108,45 @@ 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 end = this.position === 'end';
 
 		const classes = {
-			'side-drawer--alternate': this.alternate,
-			'side-drawer--dismissible': dismissible,
-			'side-drawer--modal': modal,
-			'side-drawer--open': this.open,
+			'side-drawer-alternate': this.alternate,
+			'side-drawer-dismissible': dismissible,
+			'side-drawer-modal': modal,
+			'side-drawer-open': this.open,
+			'side-drawer-end': end,
 		};
 
 		return html`
-			<aside
-				part="${ifDefined(alternate)}"
-				class="side-drawer ${classMap(classes)}"
+			<aside part="${ifDefined(alternate)}" class="side-drawer ${classMap(classes)}"
 				@transitionend=${this.#handleTransitionEnd}>
-
+			
 				${topBar}
-
-				<div class="side-drawer--content">
+			
+				<div class="side-drawer-content">
 					<slot></slot>
 				</div>
-
 			</aside>
-
-			<div class="side-drawer--app-content">
+			
+			<div class="side-drawer-app-content">
 				<slot name="app-content"></slot>
 			</div>
-
+			
 			${scrim}
 		`;
 	}
 
 	private renderTopBar(): TemplateResult {
 		return html`
-			<header class="side-drawer--top-bar">
+			<header class="side-drawer-top-bar">
 				<slot name="top-bar"></slot>
 			</header>`;
 	}
 
 	private renderScrim(): TemplateResult {
 		return html`
-			<div
-				class="side-drawer--scrim"
-				@click="${this.#handleScrimClick}"
-				@keydown="${this.#handleScrimClick}"
-			></div>`;
+			<div class="side-drawer-scrim" @click="${this.#handleScrimClick}" @keydown="${this.#handleScrimClick}"></div>`;
 	}
 
 	#handleScrimClick(): void {

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

@@ -14,6 +14,10 @@ $inline-size: var(#{variables.$side-drawer-inline-size}, 280px);
 	block-size: 100vh;
 }
 
+:host([position='end']) {
+	flex-direction: row-reverse;
+}
+
 .side-drawer {
 	position: fixed;
 	z-index: var(#{variables.$side-drawer-z-index}, #{$z-index-default});
@@ -26,35 +30,46 @@ $inline-size: var(#{variables.$side-drawer-inline-size}, 280px);
 	color: var(#{variables.$side-drawer-color}, var(#{scheme-variables.$vvd-color-on-canvas}));
 	inline-size: #{$inline-size};
 
-	&.side-drawer--alternate {
+	&.side-drawer-alternate {
 		background-color: var(#{scheme-variables.$vvd-color-canvas});
 	}
 
-	&.side-drawer--modal,
-	&.side-drawer--dismissible {
-
-		&:not(.side-drawer--open) {
-			transform: translateX(-100%);
+	&.side-drawer-modal,
+	&.side-drawer-dismissible {
+		transform: translateX(0%);
+		&:not(.side-drawer-open) {
+			&.side-drawer-end {
+				transform: translateX(100%);
+			}
+			&:not(.side-drawer-end) {
+				transform: translateX(-100%);
+			}
 		}
 		@media (prefers-reduced-motion: no-preference) {
 			transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 		}
 	}
 
-	&.side-drawer--dismissible.side-drawer--open,
-	&:not(.side-drawer--dismissible):not(.side-drawer--modal) {
-		+ .side-drawer--app-content {
+	&.side-drawer-dismissible.side-drawer-open,
+	&:not(.side-drawer-dismissible):not(.side-drawer-modal) {
+		+ .side-drawer-app-content {
 			@include typography.typography-cat-shorthand(body-1);
 			margin-inline-start: #{$inline-size};
 			::slotted(vwc-top-app-bar),
 			::slotted(vwc-top-app-bar-fixed) {
 				--mdc-top-app-bar-width: calc(100% - #{$inline-size});
 			}
 		}
+		&.side-drawer-end {
+			+ .side-drawer-app-content {
+				margin-inline-end: var(--side-drawer-inline-size, 280px);
+				margin-inline-start: 0;
+			}
+		}
 	}
 }
 
-.side-drawer--top-bar {
+.side-drawer-top-bar {
 	$gutter: var(#{variables.$side-drawer-padding-top-bar}, #{$padding-default});
 	@include typography.typography-cat-shorthand(subtitle-1);
 	display: flex;
@@ -65,23 +80,27 @@ $inline-size: var(#{variables.$side-drawer-inline-size}, 280px);
 	padding-inline-start: #{$gutter};
 }
 
-.side-drawer--content {
+.side-drawer-content {
 	$gutter: var(#{variables.$side-drawer-padding-body}, #{$padding-default});
 	background-color: inherit;
 	overflow-y: auto;
 	padding-inline-end: #{$gutter};
 	padding-inline-start: #{$gutter};
 }
 
-.side-drawer--modal {
+.side-drawer-modal {
 	position: fixed;
 	top: 0;
-	right: initial;
 	bottom: 0;
-	left: 0;
+	&:not(.side-drawer-end) {
+		inset-inline-start: 0;
+	}
+	&.side-drawer-end {
+		inset-inline-end: 0;
+	}
 }
 
-.side-drawer--scrim {
+.side-drawer-scrim {
 	@include scrim-mixins.scrim-variables;
 	position: fixed;
 	z-index: calc(#{$z-index-default} - 1);

components/side-drawer/stories/arg-types.js

@@ -10,6 +10,13 @@ export const argTypes = {
 	open: {
 		control: booleanControl
 	},
+	position: {
+		defaultValue: 'start',
+		control: {
+			type: 'select',
+			options: ['start', 'end'],
+		}
+	},
 	type: {
 		control: {
 			type: 'select',

components/side-drawer/stories/side-drawer-basic.stories.js

@@ -93,6 +93,9 @@ Alternate.args = { alternate: true };
 export const TopBar = Template.bind({});
 TopBar.args = { hasTopBar: true };
 
+export const PositionEnd = Template.bind({});
+PositionEnd.args = { position: 'end' };
+
 let prevActivatedItem;
 function onClick(e) {
 	// only list items can be activated

components/side-drawer/test/side-drawer.test.js

@@ -53,6 +53,9 @@ describe('side-drawer', () => {
 			expect(actualElement.hasTopBar, 'hasTopBar should be undefined')
 				.to
 				.equal(undefined);
+			expect(actualElement.position, 'position should be undefined')
+				.to
+				.equal(undefined);
 		});
 	});
 
@@ -82,6 +85,19 @@ describe('side-drawer', () => {
 					.equal(type);
 			}
 		});
+
+		it('should reflect (position) from attribute to property', async () => {
+			const COMPONENT_POSITIONS = ['start', 'end'];
+			for await (const position of COMPONENT_POSITIONS) {
+				const [actualElement] = addElement(
+					textToDomToParent(`<${COMPONENT_NAME} position=${position}></${COMPONENT_NAME}>`)
+				);
+				await actualElement.updateComplete;
+				expect(actualElement.position)
+					.to
+					.equal(position);
+			}
+		});
 	});
 
 	describe('Modal side drawer events', () => {
@@ -134,7 +150,7 @@ describe('side-drawer', () => {
 
 			sideDrawerEl.open = true;
 			await sideDrawerEl.updateComplete;
-			const scrim = sideDrawerEl.shadowRoot.querySelector('.side-drawer--scrim');
+			const scrim = sideDrawerEl.shadowRoot.querySelector('.side-drawer-scrim');
 
 			const eventListenerPromise = new Promise((res) => {
 				sideDrawerEl.addEventListener('closed', () => {