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

__snapshots__/Side-drawer.md

@@ -3,13 +3,13 @@
 #### `should internal contents`
 
 ```html
-<aside class="side-drawer">
+<aside class="side-drawer side-drawer--start">
   <div class="side-drawer--content">
     <slot>
     </slot>
   </div>
 </aside>
-<div class="side-drawer--app-content">
+<div class="side-drawer--app-content side-drawer--start">
   <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' = 'start';
+
 	/**
 	 * Opens the side drawer from the closed state.
 	 * @public
@@ -93,32 +108,38 @@ 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 start = this.position === 'start';
+		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--start': start,
+			'side-drawer--end': end,
+		};
+
+		const contentClassed = {
+			'side-drawer--start': start,
+			'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">
 					<slot></slot>
 				</div>
-
 			</aside>
-
-			<div class="side-drawer--app-content">
+			
+			<div class="side-drawer--app-content ${classMap(contentClassed)}">
 				<slot name="app-content"></slot>
 			</div>
-
+			
 			${scrim}
 		`;
 	}
@@ -132,11 +153,7 @@ export class VWCSideDrawerBase extends LitElement {
 
 	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});
@@ -32,9 +36,14 @@ $inline-size: var(#{variables.$side-drawer-inline-size}, 280px);
 
 	&.side-drawer--modal,
 	&.side-drawer--dismissible {
-
+		transform: translateX(0%);
 		&:not(.side-drawer--open) {
-			transform: translateX(-100%);
+			&.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);
@@ -46,6 +55,10 @@ $inline-size: var(#{variables.$side-drawer-inline-size}, 280px);
 		+ .side-drawer--app-content {
 			@include typography.typography-cat-shorthand(body-1);
 			margin-inline-start: #{$inline-size};
+			&.side-drawer--end {
+				margin-inline-end: var(--side-drawer-inline-size, 280px);
+				margin-inline-start: 0;
+			}
 			::slotted(vwc-top-app-bar),
 			::slotted(vwc-top-app-bar-fixed) {
 				--mdc-top-app-bar-width: calc(100% - #{$inline-size});
@@ -75,10 +88,12 @@ $inline-size: var(#{variables.$side-drawer-inline-size}, 280px);
 
 .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 {

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 start')
+				.to
+				.equal('start');
 		});
 	});
 
@@ -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', () => {

ui-tests/tests/vwc-side-drawer/index.js

@@ -36,7 +36,7 @@ export async function createElementVariations(wrapper) {
 
 	<div>
 		<div id="demo">
-			<vwc-side-drawer id="side-drawer">
+			<vwc-side-drawer id="side-drawer" position="end">
 				<span slot="top-bar">
 					<vwc-icon type="vonage-mono"></vwc-icon> VONAGE
 				</span>