feat(dialog): the dialog component (#580)

__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" },