fix(dialog): dialog design fixes (#616)

* Typography

* Take care of padding

* Some design stuff

* Final design fixes

* Set height in case of removing buttons

* Update the dialog's snapshot

* Prettier and linting

* Fix heading padding without icon

* Fix content distance without heading

* CR fixes

* Fix depcheck

* Update snapshot

* remove unneeded selector

* Add vvd-core

Co-authored-by: Yuri Guller <gullerya@gmail.com>

__snapshots__/Dialog.md

@@ -12,8 +12,12 @@
 >
   <div class="mdc-dialog__container">
     <div class="mdc-dialog__surface">
+      <div id="dialog_icon">
+        <slot name="icon">
+        </slot>
+      </div>
       <div
-        class="mdc-dialog__content"
+        class="last mdc-dialog__content"
         id="content"
       >
         <slot id="contentSlot">

components/dialog/package.json

@@ -27,8 +27,11 @@
 	},
 	"dependencies": {
 		"@material/mwc-dialog": "^0.20.0",
+		"@vonage/vvd-core": "^1.1.3",
+		"@vonage/vvd-design-tokens": "^1.1.3",
 		"@vonage/vvd-foundation": "^1.1.3",
 		"@vonage/vvd-style-coupling": "^1.1.3",
+		"@vonage/vvd-typography": "^1.1.3",
 		"lit-element": "^2.4.0",
 		"tslib": "^2.0.3"
 	},

components/dialog/src/vwc-dialog.scss

@@ -1,6 +1,44 @@
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
 @use '@vonage/vvd-foundation/scss/variable-names/color-semantic-variable-names' as color-semantic;
-@use '@vonage/vvd-foundation/scss/mixins/color-connotation-mixins';
+@use '@vonage/vvd-typography/scss/typography' as typography;
 
-:host {
+#title, #content, #actions, #dialog_icon {
+	padding-right: 0;
+	padding-left: 0;
+	display: flex;
+}
+
+::slotted([slot=icon]) {
+	margin-bottom: 18px;
+}
+
+#title {
+	@include typography.typography-cat-shorthand('subtitle-2');
+	padding-bottom: 0;
+	margin-bottom: 8px;
+}
+
+#content {
+	@include typography.typography-cat-shorthand('body-2');
+}
+
+#actions {
+	@include typography.typography-cat-shorthand('body-2-bold');
+	padding-bottom: 0;
+}
+
+.mdc-dialog__surface {
+	padding: 32px;
+}
+
+.mdc-dialog .mdc-dialog__content {
+	padding-top: 0;
+}
+
+.mdc-dialog__content.last {
+	padding-bottom: 0;
+}
 
+.mdc-dialog__title::before {
+	height: 0;
 }

components/dialog/src/vwc-dialog.ts

@@ -1,26 +1,44 @@
-import { customElement } from 'lit-element';
+import { customElement, PropertyValues } 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';
+import '@vonage/vvd-core';
 
 declare global {
 	interface HTMLElementTagNameMap {
 		'vwc-dialog': VWCDialog;
 	}
 }
 
+const iconTemplate = document.createElement('template');
+iconTemplate.innerHTML = `
+	<div id="dialog_icon">
+		<slot name="icon"></slot>
+</div>
+`;
+
 /* 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();
-	}
+	protected updated(_changedProperties: PropertyValues): void {
+		super.updated(_changedProperties);
+		if (!this.renderRoot.querySelector('#dialog_icon')) {
+			this.renderRoot
+				.querySelector('.mdc-dialog__surface')
+				?.prepend(iconTemplate.content.cloneNode(true));
+		}
 
-	disconnectedCallback(): void {
-		super.disconnectedCallback();
+		if (_changedProperties.has('hideActions')) {
+			const contentElement = this.renderRoot.querySelector('#content');
+			if (contentElement) {
+				_changedProperties.get('hideActions')
+					? contentElement.classList.remove('last')
+					: contentElement.classList.add('last');
+			}
+		}
 	}
 }

components/dialog/stories/dialog.stories.js

@@ -27,12 +27,33 @@ const Template = args => html`
 	</vwc-dialog>
 `;
 
+const IconTemplate = args => html`
+	<vwc-button @click="${handleOpenDialogClick}">Open dialog</vwc-button>
+	<vwc-dialog ...=${spread(args)}>
+		<div>This is the modal's content.</div>
+		<vwc-icon slot="icon" size="large" type="home"></vwc-icon>
+		<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 Icon = IconTemplate.bind({});
+Icon.args = { id: 'dialog-a', heading: 'Homey feeling'};
+
 export const Stacked = Template.bind({});
 Stacked.args = { id: 'dialog-a', stacked: ''};