feat(vwc-surface): viv-510 iss-859 complex menu surface

__snapshots__/dropdown.md

@@ -0,0 +1,31 @@
+# `dropdown`
+
+#### `should have internal contents`
+
+```html
+<vwc-surface
+ class="mdc-menu mdc-menu-surface"
+ hidden=""
+>
+ <div class="dropdown-content">
+ <div class="header section">
+ <slot name="header">
+ </slot>
+ </div>
+ <div class="body section">
+ <slot>
+ </slot>
+ </div>
+ <div class="actions section">
+ <slot name="actions">
+ </slot>
+ </div>
+ <div class="footer section">
+ <slot name="footer">
+ </slot>
+ </div>
+ </div>
+</vwc-surface>
+
+```
+

__snapshots__/vwc-menu.md

@@ -3,18 +3,18 @@
 #### `should have internal contents`
 
 ```html
-<mwc-menu-surface
+<vwc-surface
  class="mdc-menu mdc-menu-surface"
  hidden=""
 >
- <mwc-list
- class="mdc-deprecated-list"
+ <vwc-list
+ class="mdc-deprecated-list vwc-menu-list"
  roottabbable=""
  >
  <slot>
  </slot>
- </mwc-list>
-</mwc-menu-surface>
+ </vwc-list>
+</vwc-surface>
 
 ```
 

components/datepicker/test/datepicker.test.js

@@ -21,14 +21,6 @@ describe('datepicker', () => {
  );
  });
 
- // it('should have internal contents', async () => {
- // const [actualElement] = addElement(
- // textToDomToParent(`<${COMPONENT_NAME}></${COMPONENT_NAME}>`)
- // );
- // await actualElement.onReady;
- // expect(actualElement.shadowRoot.innerHTML).to.equalSnapshot();
- // });
-
  it('should have lit-flatpickr instance in DOM', async () => {
  const [actualElement] = addElement(
  textToDomToParent(`<${COMPONENT_NAME}></${COMPONENT_NAME}>`)
@@ -75,7 +67,8 @@ describe('datepicker', () => {
  await waitNextTask();
 
  const vwcMenu = actualElement.shadowRoot.querySelector('vwc-menu');
- const mwcMenuSurface = vwcMenu.shadowRoot.querySelector('mwc-menu-surface');
+ console.log(vwcMenu.shadowRoot);
+ const mwcMenuSurface = vwcMenu.shadowRoot.querySelector('vwc-surface');
  const menuSurface = mwcMenuSurface.shadowRoot.querySelector('.mdc-menu-surface');
 
  assertComputedStyle(menuSurface, { position: 'fixed' });

components/dropdown/package.json

@@ -0,0 +1,39 @@
+{
+ "name": "@vonage/vwc-dropdown",
+ "version": "2.9.1",
+ "description": "dropdown component",
+ "homepage": "https://github.com/Vonage/vivid/tree/master/components/dropdown#readme",
+ "license": "ISC",
+ "main": "vwc-dropdown.js",
+ "module": "vwc-dropdown.js",
+ "files": [
+ "*.js",
+ "*.ts",
+ "*.map"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/vonage/vivid.git",
+ "directory": "components/dropdown"
+ },
+ "scripts": {
+ "test": "echo \"Error: run tests from root\" && exit 1",
+ "build:typescript": "tsc -b",
+ "build:styles": "umbrella-style-modules",
+ "build": "yarn run build:styles && yarn run build:typescript"
+ },
+ "bugs": {
+ "url": "https://github.com/Vonage/vivid/issues"
+ },
+ "dependencies": {
+ "@vonage/vvd-core": "2.9.1",
+ "@vonage/vwc-menu": "2.9.1",
+ "@vonage/vwc-surface": "2.9.1",
+ "lit-element": "^2.4.0",
+ "tslib": "^2.0.3"
+ },
+ "devDependencies": {
+ "@vonage/vvd-umbrella": "2.9.1",
+ "typescript": "^4.1.3"
+ }
+}

components/dropdown/readme.md

@@ -0,0 +1,75 @@
+### `vwc-dropdown`
+
+`vwc-dropdown` is a surfacing content component, dropdown, showing up on demand, eg upon user action.
+`vwc-dropdown`, in contrast to `vwc-menu`, allows a free content provided by consumer, while structuring the internal body with slots: `header`, `footer` and the default content.
+
+### Usage
+
+Usage example:
+```html
+<vwc-menu>
+ <vwc-textfield slot="header">Item 1</vwc-textfield>
+ <div>
+ any HTML content can go here as main body
+ </div>
+ <vwc-button slot="footer">Done</vwc-button>
+</vwc-menu>
+```
+
+Initiate `vwc-dropdown` to be available in your component/application:
+```javascript
+import '@vonage/vwc-dropdown';
+
+// or, to be able to use casting in TypeScript, do
+
+import { VWCDropdown } from '@vonage/vwc-dropdown';
+```
+
+### API
+
+`vwc-dropdown` exposes several APIs to provide its fuctionality, namely properties, methods and events.
+
+#### Properties
+
+| Property | Modifiers | Type | Description |
+|---------------------------|-----------|--------------------------------------------------|--------------------------------------------------|
+| `absolute` | | `boolean` | |
+| `activatable` | | `boolean` | |
+| `anchor` | | `HTMLElement \| null` | |
+| `corner` | | `"TOP_LEFT" \| "TOP_RIGHT" \| "BOTTOM_LEFT" \| "BOTTOM_RIGHT" \| "TOP_START" \| "TOP_END" \| "BOTTOM_START" \| "BOTTOM_END"` | |
+| `defaultFocus` | | `"NONE" \| "LIST_ROOT" \| "FIRST_ITEM" \| "LAST_ITEM"` | |
+| `fixed` | | `boolean` | |
+| `forceGroupSelection` | | `boolean` | |
+| `fullwidth` | | `boolean` | |
+| `index` | readonly | `MWCListIndex` | |
+| `innerRole` | | `"menu" \| "listbox"` | |
+| `items` | readonly | `ListItemBase[]` | |
+| `menuCorner` | | `MenuCorner` | |
+| `multi` | | `boolean` | |
+| `open` | | `boolean` | |
+| `quick` | | `boolean` | |
+| `selected` | readonly | `ListItemBase \| ListItemBase[] \| null` | |
+| `slotElement` | | `HTMLSlotElement \| null` | |
+| `wrapFocus` | | `boolean` | |
+| `x` | | `number \| null` | |
+| `y` | | `number \| null` | |
+
+#### Methods
+
+| Method | Type |
+|-----------------------|----------------------------------------------|
+| `close` | `(): void` |
+| `focusItemAtIndex` | `(index: number): void` |
+| `getFocusedItemIndex` | `(): number` |
+| `layout` | `(updateItems?: boolean \| undefined): void` |
+| `select` | `(index: MWCListIndex): void` |
+| `show` | `(): void` |
+
+#### Events
+
+| Event | Description |
+|-----------------|------------------|
+| `action` | {ActionDetail} |
+| `closed` | |
+| `opened` | |
+| `selected` | {SelectedDetail} |

components/dropdown/src/vwc-dropdown.scss

@@ -0,0 +1,23 @@
+.dropdown-content {
+ padding: 24px;
+}
+
+.section {
+ display: flex;
+}
+
+.section.body {
+ display: block;
+ width: calc(100% + 48px);
+ margin-inline-start: -24px;
+}
+
+// actions
+.section.actions {
+ display: flex;
+ justify-content: flex-end;
+
+ ::slotted(vwc-button) {
+ margin-inline-start: 8px;
+ }
+}

components/dropdown/src/vwc-dropdown.ts

@@ -0,0 +1,63 @@
+import '@vonage/vvd-core';
+import '@vonage/vwc-surface';
+import { VWCMenu } from '@vonage/vwc-menu';
+import { customElement, html } from 'lit-element';
+import { style as vwcDropdownStyle } from './vwc-dropdown.css';
+
+export const COMPONENT_NAME = 'vwc-dropdown';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ [COMPONENT_NAME]: VWCDropdown;
+ }
+}
+
+/**
+ * This component is an extension of [<vwc-menu>](https://github.com/Vonage/vivid/tree/master/components/menu)
+ */
+@customElement('vwc-dropdown')
+export class VWCDropdown extends VWCMenu {
+ static styles = [vwcDropdownStyle];
+
+ constructor() {
+ super();
+ this.multi = true;
+ }
+
+ render() {
+ return html`
+ <vwc-surface
+ ?hidden=${!this.open}
+ .anchor=${this.anchor}
+ .open=${this.open}
+ .quick=${this.quick}
+ .corner=${this.corner}
+ .x=${this.x}
+ .y=${this.y}
+ .absolute=${this.absolute}
+ .fixed=${this.fixed}
+ .fullwidth=${this.fullwidth}
+ .menuCorner=${this.menuCorner}
+ ?stayOpenOnBodyClick=${this.stayOpenOnBodyClick}
+ class="mdc-menu mdc-menu-surface"
+ @closed=${this.onClosed}
+ @opened=${this.onOpened}
+ @keydown=${this.onKeydown}>
+ <div class="dropdown-content">
+ <div class="section header">
+ <slot name="header"></slot>
+ </div>
+ <div class="section body">
+ <slot></slot>
+ </div>
+ <div class="section actions">
+ <slot name="actions"></slot>
+ </div>
+ <div class="section footer">
+ <slot name="footer"></slot>
+ </div>
+ </div>
+ </vwc-surface>
+ `;
+ }
+}

components/dropdown/stories/arg-types.js

@@ -0,0 +1 @@
+export { argTypes } from '@vonage/vwc-menu/stories/arg-types.js';

components/dropdown/stories/dropdown-all.stories.js

@@ -0,0 +1,9 @@
+import { argTypes } from './arg-types.js';
+
+export default {
+ title: 'Alpha/Components/Dropdown',
+ component: 'vwc-dropdown',
+ argTypes
+}
+
+export { ComplexContent } from './dropdown-basic.js';

components/dropdown/stories/dropdown-basic.js

@@ -0,0 +1,53 @@
+import '@vonage/vwc-dropdown';
+import '@vonage/vwc-button';
+import '@vonage/vwc-list/vwc-list-item.js';
+import '@vonage/vwc-list/vwc-check-list-item.js';
+import { html } from 'lit-element';
+import { spread } from '@open-wc/lit-helpers';
+
+const TemplateA = args => html`
+ <style>
+ html, body {
+ height: 100%;
+ }
+ </style>
+ <div style="position: relative">
+ <vwc-button id="button" label="Open dropdown" @click="${anchorClickHandler}"></vwc-button>
+ <vwc-dropdown id="dropdown" ...=${spread(args)}>
+ <vwc-textfield slot="header" label="Do something..."></vwc-textfield>
+ <vwc-list multi>
+ <vwc-check-list-item left>
+ Basic item 1
+ </vwc-check-list-item>
+ <vwc-check-list-item left>
+ Basic item 2
+ </vwc-check-list-item>
+ <vwc-check-list-item left>
+ Basic item 3
+ </vwc-check-list-item>
+ <vwc-check-list-item left>
+ Basic item 4
+ </vwc-check-list-item>
+ </vwc-list>
+ <vwc-button slot="actions" @click="${actionClickHandler}">Cancel</vwc-button>
+ <vwc-button slot="actions" layout="filled" @click="${actionClickHandler}">Done</vwc-button>
+ </vwc-dropdown>
+ </div>
+`;
+
+export const ComplexContent = TemplateA.bind({});
+ComplexContent.args = {
+ corner: 'BOTTOM_START'
+}
+
+function anchorClickHandler() {
+ const anchor = document.querySelector('#button');
+ const dropdown = document.querySelector('#dropdown');
+ dropdown.anchor = anchor;
+ dropdown.open = true;
+}
+
+function actionClickHandler() {
+ const dropdown = document.querySelector('#dropdown');
+ dropdown.open = false;
+}

components/dropdown/stories/dropdown-introduction.config.mjs

@@ -0,0 +1,14 @@
+export default {
+ sourcePath: '../readme.md',
+ outputName: 'dropdown-introduction',
+ story: {
+ title: 'Alpha/Components/Dropdown/Introduction',
+ name: 'Introduction',
+ parameters: {
+ options: {
+ showPanel: false,
+ isToolshown: false
+ }
+ }
+ }
+};

components/dropdown/test/dropdown.a11y.test.js

@@ -0,0 +1,29 @@
+import '@vonage/vwc-list/vwc-list-item';
+import { COMPONENT_NAME } from '../vwc-dropdown.js';
+import {
+ isolatedElementsCreation,
+ waitNextTask,
+ textToDomToParent
+} from '../../../test/test-helpers.js';
+import { chaiA11yAxe } from 'chai-a11y-axe';
+
+chai.use(chaiA11yAxe);
+
+describe('menu a11y', () => {
+ const addElement = isolatedElementsCreation();
+
+ it('should have 0 accessibility violations', async () => {
+ const [actualElement] = addElement(
+ textToDomToParent(`
+ <${COMPONENT_NAME}>
+ <vwc-list-item>Item 0</vwc-list-item>
+ <vwc-list-item>Item 1</vwc-list-item>
+ <vwc-list-item>Item 2</vwc-list-item>
+ </${COMPONENT_NAME}>
+ `)
+ );
+ await waitNextTask();
+
+ await expect(actualElement).shadowDom.to.be.accessible();
+ });
+});