feat(dialog): add vwc-dialog

__snapshots__/Dialog.md

@@ -0,0 +1,42 @@
+# `Dialog`
+
+#### `should internal contents`
+
+```html
+<div
+ aria-describedby="content"
+ aria-labelledby="title"
+ aria-modal="true"
+ class="mdc-dialog"
+ role="alertdialog"
+>
+ <div class="mdc-dialog__container">
+ <div class="mdc-dialog__surface">
+ <div
+ class="mdc-dialog__content"
+ id="content"
+ >
+ <slot id="contentSlot">
+ </slot>
+ </div>
+ <footer
+ class="mdc-dialog__actions"
+ id="actions"
+ >
+ <span>
+ <slot name="secondaryAction">
+ </slot>
+ </span>
+ <span>
+ <slot name="primaryAction">
+ </slot>
+ </span>
+ </footer>
+ </div>
+ </div>
+ <div class="mdc-dialog__scrim">
+ </div>
+</div>
+
+```
+

common/foundation/src/form-association/submit-on-enter-key.ts

@@ -2,18 +2,18 @@ import { requestSubmit } from '../form-association';
 import { getFormByIdOrClosest } from './common';
 
 export function submitOnEnter(element: HTMLInputElement): void {
- element.addEventListener('keydown', function (
- this: HTMLInputElement,
- event: KeyboardEvent
- ) {
- const form = getFormByIdOrClosest(this);
- if (!form) {
- return;
- }
+ element.addEventListener(
+ 'keydown',
+ function (this: HTMLInputElement, event: KeyboardEvent) {
+ const form = getFormByIdOrClosest(this);
+ if (!form) {
+ return;
+ }
 
- if (event.key === 'Enter') {
- event.preventDefault();
- requestSubmit(form);
+ if (event.key === 'Enter') {
+ event.preventDefault();
+ requestSubmit(form);
+ }
  }
- });
+ );
 }

components/dialog/package.json

@@ -0,0 +1,32 @@
+{
+ "name": "@vonage/vwc-dialog",
+ "version": "1.0.2",
+ "description": "dialog component",
+ "homepage": "https://github.com/Vonage/vivid/tree/master/components/dialog#readme",
+ "license": "ISC",
+ "main": "vwc-dialog.js",
+ "module": "vwc-dialog.js",
+ "files": [
+ "*.js",
+ "*.ts",
+ "*.map"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/vonage/vivid.git",
+ "directory": "components/dialog"
+ },
+ "scripts": {
+ "test": "echo \"Error: run tests from root\" && exit 1"
+ },
+ "bugs": {
+ "url": "https://github.com/Vonage/vivid/issues"
+ },
+ "dependencies": {
+ "@material/mwc-dialog": "^0.20.0",
+ "@vonage/vvd-style-coupling": "1.0.2",
+ "@vonage/vvd-foundation": "1.0.2",
+ "lit-element": "^2.4.0",
+ "tslib": "^2.0.3"
+ }
+}

components/dialog/readme.md

@@ -0,0 +1,15 @@
+# vwc-dialog
+
+Add a description of vwc-dialog.
+
+## Properties
+
+| Property | Type |
+|---------------------------|-------------------------------------------|
+| `prop ` | `propType` |
+
+## Methods
+
+| Method | Type |
+|---------|------------|
+| `method`| `(): void` |

components/dialog/src/vwc-dialog.scss

@@ -0,0 +1,6 @@
+@use '@vonage/vvd-foundation/scss/variable-names/color-semantic-variable-names' as color-semantic;
+@use '@vonage/vvd-foundation/scss/mixins/color-connotation-mixins';
+
+:host {
+
+}

components/dialog/src/vwc-dialog.ts

@@ -0,0 +1,26 @@
+import { customElement } from 'lit-element';
+import { style } from './vwc-dialog.css';
+import { Dialog as MWCDialog } from '@material/mwc-dialog';
+import { style as mwcDialogStyle } from '@material/mwc-dialog/mwc-dialog-css';
+import { style as styleCoupling } from '@vonage/vvd-style-coupling';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'vwc-dialog': VWCDialog;
+ }
+}
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-ignore
+MWCDialog.styles = [styleCoupling, mwcDialogStyle, style];
+
+@customElement('vwc-dialog')
+export class VWCDialog extends MWCDialog {
+ connectedCallback(): void {
+ super.connectedCallback();
+ }
+
+ disconnectedCallback(): void {
+ super.disconnectedCallback();
+ }
+}

components/dialog/stories/arg-types.js

@@ -0,0 +1,15 @@
+export const argTypes = {
+ connotation: {
+ control: {
+ type: 'select',
+ options: ['primary', 'cta', 'success', 'error', 'info', 'announcement'],
+ }
+ },
+ disabled: {
+ control: {
+ type: 'inline-radio',
+ options: { 'true': '', 'false': undefined }
+ }
+ },
+ styles: { table: { disable: true } },
+}

components/dialog/stories/dialog.stories.js

@@ -0,0 +1,41 @@
+import '@vonage/vwc-dialog/vwc-dialog.js';
+import '@vonage/vwc-button';
+import { html } from 'lit-element';
+import { spread } from '@open-wc/lit-helpers';
+import { argTypes } from './arg-types.js';
+
+export default {
+ title: 'Components/Atoms/Dialog',
+ component: 'vwc-dialog',
+ argTypes
+};
+
+const Template = args => html`
+ <vwc-button @click="${handleOpenDialogClick}">Open dialog</vwc-button>
+ <vwc-dialog ...=${spread(args)}>
+ <div>This is the modal's content.</div>
+ <vwc-button
+ slot="primaryAction"
+ dialogAction="discard">
+ Discard
+ </vwc-button>
+ <vwc-button
+ slot="secondaryAction"
+ dialogAction="cancel">
+ Cancel
+ </vwc-button>
+ </vwc-dialog>
+`;
+
+export const Basic = Template.bind({});
+Basic.args = { id: 'dialog-a' };
+
+export const Heading = Template.bind({});
+Heading.args = { id: 'dialog-a', heading: 'Hello Modal!'};
+
+export const Stacked = Template.bind({});
+Stacked.args = { id: 'dialog-a', stacked: ''};
+
+function handleOpenDialogClick(e) {
+ e.target.parentNode.querySelector('#dialog-a').show();
+}

components/dialog/test/dialog.test.js

@@ -0,0 +1,28 @@
+import '../vwc-dialog.js';
+import {
+ waitNextTask,
+ textToDomToParent,
+ isolatedElementsCreation,
+} from '../../../test/test-helpers.js';
+import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
+
+chai.use(chaiDomDiff);
+
+const COMPONENT_NAME = 'vwc-dialog';
+
+describe('Dialog', () => {
+ let addElement = isolatedElementsCreation();
+
+ it(`${COMPONENT_NAME} is defined as a custom element`, async () => {
+ assert.exists(customElements.get(COMPONENT_NAME));
+ });
+
+ it('should internal contents', async () => {
+ const addedElements = addElement(
+ textToDomToParent(`<${COMPONENT_NAME}>Button Text</${COMPONENT_NAME}>`)
+ );
+ const actualElement = addedElements[0];
+ await waitNextTask();
+ expect(actualElement.shadowRoot.innerHTML).to.equalSnapshot();
+ });
+});

components/dialog/tsconfig.json

@@ -0,0 +1,26 @@
+{
+ "extends": "../../tsconfig.settings.json",
+ "compilerOptions": {
+ "composite": true,
+ "rootDir": "src",
+ "outDir": "./",
+ "tsBuildInfoFile": ".tsbuildinfo"
+ },
+ "include": [
+ "src/*.ts"
+ ],
+ "exclude": [
+ "src/test/*.ts"
+ ],
+ "references": [
+ {
+ "path": "../../common/core"
+ },
+ {
+ "path": "../../common/foundation"
+ },
+ {
+ "path": "../../common/style-coupling"
+ }
+ ]
+}

karma.conf.spec.js

@@ -0,0 +1,10 @@
+const fetchOriginalConfig = require('./karma.conf');
+
+const browsers = [process.env.RUN === 'CI' ? 'ChromeHeadless' : 'Chrome'];
+module.exports = config => {
+ const originalConfig = fetchOriginalConfig(config);
+ originalConfig.browsers = browsers;
+ originalConfig.autoWatch = true;
+ originalConfig.singleRun = false;
+ return originalConfig;
+};

package.json

@@ -22,7 +22,8 @@
  "test:chrome": "karma start --coverage --browsers=ChromeHeadless",
  "test:firefox": "karma start --coverage --browsers=FirefoxHeadless",
  "test:safari": "karma start --coverage --browsers=SafariNative",
- "test:dev": "yarn compile && concurrently \"yarn tsc:watch\" \"karma start --auto-watch=true --single-run=false --browsers=Chrome\"",
+ "test:dev": "yarn compile && concurrently \"yarn tsc:watch\" \"karma start karma.conf.spec.js\"",
+ "test:dev:ci": "yarn compile && concurrently \"yarn tsc:watch\" \"RUN=CI karma start karma.conf.spec.js\"",
  "test:update-snapshots": "karma start --update-snapshots",
  "test:prune-snapshots": "karma start --prune-snapshots",
  "test:bs": "karma start karma.bs.config.js --coverage",

tsconfig.json

@@ -15,6 +15,7 @@
  { "path": "components/checkbox" },
  { "path": "components/chips" },
  { "path": "components/circular-progress" },
+ { "path": "components/dialog" },
  { "path": "components/drawer" },
  { "path": "components/expansion-panel" },
  { "path": "components/fab" },