Merge branch 'master' into viv-652-chips

__snapshots__/Side-drawer.md

@@ -4,7 +4,7 @@
 
 ```html
 <aside class="side-drawer">
- <div class="vvd-side-drawer--content">
+ <div class="side-drawer--content">
  <slot>
  </slot>
  </div>

components/side-drawer/readme.md

@@ -16,4 +16,12 @@ Represents a side drawer custom element.
 | Method | Type | Description |
 |------------------------|-----------------------------|----------------------------------------------|
 | `hide` | `(): void` | Closes the side drawer from the open state. |
-| `show` | `(): void` | Opens the side drawer from the closed state. |
+| `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-min-inline-size` | "280px" | Controls the 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 |

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

@@ -11,6 +11,12 @@ import { DocumentWithBlockingElements } from 'blocking-elements';
 const blockingElements =
  (document as DocumentWithBlockingElements).$blockingElements;
 
+/**
+ * @cssprop [side-drawer-background-color=The current theme's canvas (background) color] - Controls the background of the side drawer
+ * @cssprop [side-drawer-min-inline-size=280px] - Controls the size of the side drawer
+ * @cssprop [side-drawer-padding=16px] - Controls the padding of the side drawer
+ * @cssprop [side-drawer-z-index=6] - Controls the z-index of the side drawer
+ * */
 export class VWCSideDrawerBase extends LitElement {
  /**
  * @prop alternate - [Applies scheme alternate region](../../common/scheme/readme.md)
@@ -88,18 +94,18 @@ export class VWCSideDrawerBase extends LitElement {
  const alternate = this.alternate ? 'vvd-scheme-alternate' : undefined;
 
  const classes = {
- 'vvd-side-drawer--alternate': this.alternate,
- 'vvd-side-drawer--dismissible': dismissible,
- 'vvd-side-drawer--modal': modal,
- 'vvd-side-drawer--open': this.open,
+ 'side-drawer--alternate': this.alternate,
+ 'side-drawer--dismissible': dismissible,
+ 'side-drawer--modal': modal,
+ 'side-drawer--open': this.open,
  };
 
  const aside = html`<aside
  part="${ifDefined(alternate)}"
  class="side-drawer ${classMap(classes)}">
  ${topBar}
 
- <div class="vvd-side-drawer--content">
+ <div class="side-drawer--content">
  <slot></slot>
  </div>
  </aside>`;
@@ -123,15 +129,15 @@ export class VWCSideDrawerBase extends LitElement {
 
  private renderTopBar(): TemplateResult {
  return html`
- <div class="vvd-side-drawer--top-bar">
+ <div class="side-drawer--top-bar">
  <slot name="top-bar"></slot>
  </div>`;
  }
 
  private renderScrim(): TemplateResult {
  return html`
  <div
- class="vvd-side-drawer--scrim"
+ class="side-drawer--scrim"
  @click="${this.#handleScrimClick}"
  @keydown="${this.#handleScrimClick}"
  ></div>`;

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

@@ -1,10 +1,11 @@
-$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;
+$side-drawer-padding: --side-drawer-padding;
+$side-drawer-min-inline-size: --side-drawer-min-inline-size;
+$side-drawer-z-index: --side-drawer-z-index;
+$side-drawer-background-color: --side-drawer-background-color;
 
-$z-index-default: var(#{$vvd-side-drawer--z-index}, 6);
-$padding-default: var(#{$vvd-side-drawer--padding}, 16px);
-$min-width: 280px;
+$z-index-default: 6;
+$padding-default: 16px;
+$min-inline-size-default: 280px;
 
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
 @use '@vonage/vvd-typography/scss/typography' as typography;
@@ -16,41 +17,41 @@ $min-width: 280px;
 }
 
 .side-drawer {
- z-index: #{$z-index-default};
- background-color: var(#{scheme-variables.$vvd-color-canvas});
+ z-index: var(#{$side-drawer-z-index}, #{$z-index-default});
+ background-color: var(#{$side-drawer-background-color}, var(#{scheme-variables.$vvd-color-canvas}));
  color: var(#{scheme-variables.$vvd-color-on-canvas});
- min-inline-size: var(#{$vvd-side-drawer--min-inline-size}, $min-width);
+ min-inline-size: var(#{$side-drawer-min-inline-size}, #{$min-inline-size-default});
 
- &:not(.vvd-side-drawer--alternate):not(.vvd-side-drawer--modal) {
- background-color: var(#{scheme-variables.$vvd-color-neutral-10});
+ &.side-drawer--alternate {
+ background-color: var(#{scheme-variables.$vvd-color-canvas});
  }
 
- &.vvd-side-drawer--modal,
- &.vvd-side-drawer--dismissible {
+ &.side-drawer--modal,
+ &.side-drawer--dismissible {
  @media (prefers-reduced-motion: no-preference) {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
 
- &:not(.vvd-side-drawer--open) {
+ &:not(.side-drawer--open) {
  transform: translateX(-100%);
  }
  }
 }
 
-.vvd-side-drawer--top-bar {
+.side-drawer--top-bar {
  display: flex;
  align-items: center;
  block-size: 64px;
- padding-inline-end: var(#{$vvd-side-drawer--padding}--top-bar, #{$padding-default});
- padding-inline-start: var(#{$vvd-side-drawer--padding}--top-bar, #{$padding-default});
+ padding-inline-end: var(#{$side-drawer-padding}--top-bar, #{$padding-default});
+ padding-inline-start: var(#{$side-drawer-padding}--top-bar, #{$padding-default});
 }
 
-.vvd-side-drawer--content {
- padding-inline-end: var(#{$vvd-side-drawer--padding}--content, #{$padding-default});
- padding-inline-start: var(#{$vvd-side-drawer--padding}--content, #{$padding-default});
+.side-drawer--content {
+ padding-inline-end: var(#{$side-drawer-padding}--content, #{$padding-default});
+ padding-inline-start: var(#{$side-drawer-padding}--content, #{$padding-default});
 }
 
-.vvd-side-drawer--modal {
+.side-drawer--modal {
  position: fixed;
  top: 0;
  right: initial;
@@ -63,7 +64,7 @@ $min-width: 280px;
  &:not(&--open) {width: 0;}
 }
 
-.vvd-side-drawer--scrim {
+.side-drawer--scrim {
  @include scrim-mixins.scrim-variables;
  position: fixed;
  z-index: calc(#{$z-index-default} - 1);
@@ -74,6 +75,3 @@ $min-width: 280px;
  background-color: var(#{scrim-mixins.$vvd-scrim--background-color});
  opacity: var(#{scrim-mixins.$vvd-scrim--opacity});
 }
-
-
-

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

@@ -26,7 +26,6 @@ const Template = args => html`
  width: 960px;
  height: 540px;
  margin: auto;
- background-color: #eee;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
@@ -35,6 +34,7 @@ const Template = args => html`
  vwc-side-drawer#side-drawer {
  flex: 0 0 auto;
  height: 100%;
+ --side-drawer-background-color: var(--vvd-color-neutral-10);
  }
  div#default > svg {
  width: 100%;

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

@@ -148,7 +148,7 @@ describe('Side-drawer', () => {
 
  sideDrawerEl.open = true;
  await sideDrawerEl.updateComplete;
- const scrim = sideDrawerEl.shadowRoot.querySelector('.vvd-side-drawer--scrim');
+ const scrim = sideDrawerEl.shadowRoot.querySelector('.side-drawer--scrim');
 
  const eventListenerPromise = new Promise((res) => {
  sideDrawerEl.addEventListener('closed', () => {

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

@@ -17,7 +17,6 @@ export async function createElementVariations(wrapper) {
  width: 960px;
  height: 400px;
  margin: 10px;
- background-color: #eee;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
@@ -26,6 +25,7 @@ export async function createElementVariations(wrapper) {
  vwc-side-drawer#side-drawer {
  flex: 0 0 auto;
  height: 100%;
+ --side-drawer-background-color: var(--vvd-color-neutral-10);
  }
  div#default > svg {
  width: 100%;