feat(www): polish the contact view UI (#1746)

* Polish the contact view UI. * Fix test. * Update style to use rem values. * Style nits. * Wrap issue wizard questions in a card. * More style changes. * Fix test.
Jigsaw-Code · Oct 9, 2023 · afd41e0 · afd41e0
1 parent baa7b01
commit afd41e0
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 51 deletions.
diff --git a/src/www/ui_components/app-root.js b/src/www/ui_components/app-root.js
@@ -64,7 +64,12 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
     return html`
       <style>
         :host {
-          --app-toolbar-height: 40px;
+          --app-toolbar-height: 2.5rem;
+          --app-toolbar-gutter: .5rem;
+          --app-toolbar-button-gutter: .75rem;
+          --app-header-height: 3.5rem;
+          --contact-view-gutter: calc(var(--app-toolbar-gutter) + var(--app-toolbar-button-gutter));
+          --contact-view-max-width: 400px;
           --light-green: #2fbea5;
           --medium-green: #009688;
           --dark-green: #263238;
@@ -77,13 +82,13 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
         }
 
         app-header {
-          height: 56px;
+          height: var(--app-header-height);
         }
 
         app-toolbar {
           height: var(--app-toolbar-height);
           color: #fff;
-          padding: 8px;
+          padding: var(--app-toolbar-gutter);
           background: var(--dark-green);
           text-align: center;
           display: flex;
@@ -103,6 +108,7 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
         app-toolbar paper-button {
           /* make the ink color (used for tap animations) actually visible */
           --paper-icon-button-ink-color: #eff;
+          padding: var(--app-toolbar-button-gutter);
         }
 
         #app-toolbar-left,

diff --git a/src/www/views/contact_view/index.spec.ts b/src/www/views/contact_view/index.spec.ts
@@ -56,7 +56,7 @@ describe('ContactView client variant', () => {
     radioButton.click();
     await nextFrame();
 
-    const exitCard = el.shadowRoot!.querySelector('outline-card')!;
+    const exitCard = el.shadowRoot!.querySelector('outline-card.exit')!;
     expect(exitCard.textContent).toContain('experiencing high support volume');
   });
 
@@ -68,7 +68,7 @@ describe('ContactView client variant', () => {
     el.reset();
     await nextFrame();
 
-    const exitCard = el.shadowRoot!.querySelector('outline-card')!;
+    const exitCard = el.shadowRoot!.querySelector('outline-card.exit')!;
     expect(exitCard).toBeNull();
   });
 
@@ -128,7 +128,7 @@ describe('ContactView client variant', () => {
         issue.click();
         await nextFrame();
 
-        const exitCard = el.shadowRoot!.querySelector('outline-card')!;
+        const exitCard = el.shadowRoot!.querySelector('outline-card.exit')!;
         expect(exitCard.textContent).toContain(expectedMsg);
       });
     }
@@ -190,7 +190,7 @@ describe('ContactView client variant', () => {
 
         await nextFrame();
 
-        expect(el.shadowRoot?.querySelector('p')?.textContent).toContain('Tell us how we can help.');
+        expect(el.shadowRoot?.querySelector('h1')?.textContent).toContain('Tell us how we can help.');
         expect(el.shadowRoot?.querySelector('support-form')).toBeNull();
       });
     });

diff --git a/src/www/views/contact_view/index.ts b/src/www/views/contact_view/index.ts
@@ -45,9 +45,13 @@ export class ContactView extends LitElement {
   static styles = [
     css`
       :host {
+        color: var(--outline-text-color);
         display: block;
         font-family: var(--outline-font-family);
-        padding: var(--outline-gutter);
+        margin: 0 auto;
+        max-width: var(--contact-view-max-width);
+        padding: var(--contact-view-gutter, var(--outline-gutter));
+        width: 100%;
       }
 
       mwc-circular-progress {
@@ -57,11 +61,36 @@ export class ContactView extends LitElement {
         transform: translate(-50%, -50%);
       }
 
+      h1 {
+        font-size: 1rem;
+        margin-bottom: var(--contact-view-gutter, var(--outline-gutter));
+      }
+
+      outline-card {
+        width: 100%;
+      }
+
+      p {
+        margin-top: .25rem;
+      }
+
       ol {
         list-style-type: none;
+        margin: .25rem 0;
+        padding-inline-start: 0;
       }
 
       mwc-select {
+        /**
+         * The '<app-header-layout>' restricts the stacking context, which means
+         * the select dropdown will get stacked underneath the header.
+         * See https://github.com/PolymerElements/app-layout/issues/279. Setting
+         * a maximum height will make the dropdown small enough to not run into
+         * this issue.
+         */
+        --mdc-menu-max-height: 200px;
+        --mdc-menu-max-width: calc(100vw - calc(var(--outline-gutter) * 4));
+        margin-top: 1rem;
         width: 100%;
       }
 
@@ -139,9 +168,6 @@ export class ContactView extends LitElement {
       this.step = Step.EXIT;
       return;
     }
-    this.openTicketSelectionOptions.forEach(element => {
-      element.ref.value.disabled = true;
-    });
     this.showIssueSelector = true;
   }
 
@@ -164,6 +190,10 @@ export class ContactView extends LitElement {
   reset() {
     this.isFormSubmitting = false;
     this.showIssueSelector = false;
+    this.openTicketSelectionOptions.forEach(element => {
+      if (!element.ref.value) return;
+      element.ref.value.checked = false;
+    });
     this.step = Step.ISSUE_WIZARD;
     this.formValues = {};
   }
@@ -201,7 +231,7 @@ export class ContactView extends LitElement {
   }
 
   private get renderIntroTemplate(): TemplateResult {
-    return html`<p>${this.localize('contact-view-intro')}</p>`;
+    return html`<h1 class="intro">${this.localize('contact-view-intro')}</h1>`;
   }
 
   private get renderForm(): TemplateResult | typeof nothing {
@@ -230,48 +260,52 @@ export class ContactView extends LitElement {
       }
 
       case Step.EXIT: {
-        return html` <outline-card .type=${CardType.Elevated}> ${this.exitTemplate} </outline-card> `;
+        return html` <outline-card class="exit" .type=${CardType.Elevated}> ${this.exitTemplate} </outline-card> `;
       }
 
       case Step.ISSUE_WIZARD:
       default: {
         return html`
           ${this.renderIntroTemplate}
-          <p>${this.localize('contact-view-open-ticket')}</p>
-
-          <ol>
-            ${this.openTicketSelectionOptions.map(
-              element => html`
-                <li>
-                  <mwc-formfield .label=${this.localize(element.labelMsg)}>
-                    <mwc-radio
-                      name="open-ticket"
-                      .value="${element.value}"
-                      required
-                      @change=${this.selectHasOpenTicket}
-                      ${ref(element.ref)}
-                    >
-                    </mwc-radio>
-                  </mwc-formfield>
-                </li>
-              `
-            )}
-          </ol>
-
-          <mwc-select
-            .label=${this.localize('contact-view-issue')}
-            outlined
-            ?hidden=${!this.showIssueSelector}
-            @selected="${this.selectIssue}"
-          >
-            ${ContactView.ISSUES[this.variant].map(value => {
-              return html`
-                <mwc-list-item value="${value}">
-                  <span>${this.localize(`contact-view-issue-${value}`)}</span>
-                </mwc-list-item>
-              `;
-            })}
-          </mwc-select>
+
+          <outline-card .type=${CardType.Elevated}>
+            <p>${this.localize('contact-view-open-ticket')}</p>
+
+            <ol>
+              ${this.openTicketSelectionOptions.map(
+                element => html`
+                  <li>
+                    <mwc-formfield .label=${this.localize(element.labelMsg)}>
+                      <mwc-radio
+                        name="open-ticket"
+                        .value="${element.value}"
+                        required
+                        @change=${this.selectHasOpenTicket}
+                        ${ref(element.ref)}
+                      >
+                      </mwc-radio>
+                    </mwc-formfield>
+                  </li>
+                `
+              )}
+            </ol>
+
+            <mwc-select
+              .label=${this.localize('contact-view-issue')}
+              outlined
+              ?hidden=${!this.showIssueSelector}
+              ?fixedMenuPosition=${true}
+              @selected="${this.selectIssue}"
+            >
+              ${ContactView.ISSUES[this.variant].map(value => {
+                return html`
+                  <mwc-list-item value="${value}">
+                    <span>${this.localize(`contact-view-issue-${value}`)}</span>
+                  </mwc-list-item>
+                `;
+              })}
+            </mwc-select>
+          </outline-card>
         `;
       }
     }

diff --git a/src/www/views/contact_view/stories.ts b/src/www/views/contact_view/stories.ts
@@ -35,16 +35,18 @@ export default {
         defaultValue: AppType.CLIENT,
       },
     },
-    onSupportContacted: {action: 'SupportContacted'},
+    onSuccess: {action: 'success'},
+    onError: {action: 'error'},
   },
 };
 
-export const Example = ({variant, onSupportContacted}: {variant: AppType; onSupportContacted: Function}) =>
+export const Example = ({variant, onSuccess, onError}: {variant: AppType; onSuccess: Function; onError: Function}) =>
   html`
     <contact-view
       .localize=${localize}
       .variant=${variant}
       .errorReporter=${{report: console.log}}
-      @SupportContacted=${onSupportContacted}
+      @success=${onSuccess}
+      @error=${onError}
     ></contact-view>
   `;