Added material web components

Author: haydenmcp

packages/deep-template-analyzer/deep-analyzer-page-summary.js

@@ -1,6 +1,8 @@
 import {ApolloMutationController} from '@apollo-elements/core';
-import {ApolloQuery, html} from '@apollo-elements/lit-apollo';
+import {ApolloQuery, css, html} from '@apollo-elements/lit-apollo';
 import '@google-web-components/google-chart';
+import '@material/mwc-button';
+import '@material/mwc-textfield';
 import '@thinkdeep/deep-button/deep-button.mjs';
 import '@thinkdeep/deep-card/deep-card.mjs';
 import '@thinkdeep/deep-textbox/deep-textbox.mjs';
@@ -44,37 +46,54 @@ export default class DeepAnalyzerPageSummary extends ApolloQuery {
     this.removeEventListener('google-chart-select', this._handleChartSelection);
   }
 
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        min-height: 500px;
+      }
+    `;
+  }
+
   render() {
     return html`
       ${translate('translations:startCollectingLabel')}
-      <deep-textbox
-        placeholder="i.e, Google"
+      <mwc-textfield
+        label="Business name"
         @input="${debounce(this._setCompanyName.bind(this), 350)}"
-      ></deep-textbox>
-      <deep-button @click="${() => this.mutation.mutate()}"
-        >${translate('translations:startButtonLabel')}</deep-button
-      >
-
-      <google-chart
-        type="line"
-        options='{"title": "Sentiment as a function of time" }'
-        cols='[{"label": "Timestamp", "type": "number"}, {"label": "Sentiment", "type": "number"}]'
-        rows="[${this.data?.sentiments?.map((sentiment) =>
-          JSON.stringify([sentiment.timestamp, sentiment.score])
-        )}]"
-      >
-      </google-chart>
-
-      ${this.selectedSentiments.map((sentiment) =>
-        sentiment?.tweets?.map(
-          (tweet, index) => html`
-            <deep-card>
-              <h3>Tweet ${index}</h3>
-              <p>${tweet?.text}</p>
-            </deep-card>
-          `
+      ></mwc-textfield>
+      <mwc-button
+        raised
+        label="${translate('translations:startButtonLabel')}"
+        @click="${() => this.mutation.mutate()}"
+        icon="input"
+      ></mwc-button>
+
+      <div>
+        <google-chart
+          type="line"
+          options="{&quot;title&quot;: &quot;Sentiment as a function of time&quot; }"
+          cols="[{&quot;label&quot;: &quot;Timestamp&quot;, &quot;type&quot;: &quot;number&quot;}, {&quot;label&quot;: &quot;Sentiment&quot;, &quot;type&quot;: &quot;number&quot;}]"
+          rows="[${
+            this.data?.sentiments?.map((sentiment) =>
+              JSON.stringify([sentiment.timestamp, sentiment.score])
+            )
+          }]"
+        ></google-chart>
+      </div>
+
+      ${
+        this.selectedSentiments.map((sentiment) =>
+          sentiment?.tweets?.map(
+            (tweet, index) => html`
+              <deep-card>
+                <h3>Tweet ${index}</h3>
+                <p>${tweet?.text}</p>
+              </deep-card>
+            `
+          )
         )
-      )}
+      }
     `;
   }
 

packages/deep-template-analyzer/deep-template-analyzer.js

@@ -1,7 +1,6 @@
 import '@material/mwc-icon-button';
 import '@material/mwc-top-app-bar-fixed';
 import '@thinkdeep/deep-footer';
-import '@thinkdeep/deep-navbar';
 import {Router} from '@vaadin/router';
 import {css, html, LitElement} from 'lit';
 import {i18nMixin, translate} from 'lit-element-i18n';
@@ -122,12 +121,14 @@ export class DeepTemplateAnalyzer extends i18nMixin(LitElement) {
           background-color: var(--primary-color, #000000);
         }
 
-        deep-navbar {
+        mwc-top-app-bar-fixed {
           grid-area: header;
           height: 16vh;
         }
 
         #content {
+          display: block;
+          min-height: 500px;
           grid-area: content;
         }
 
@@ -142,11 +143,6 @@ export class DeepTemplateAnalyzer extends i18nMixin(LitElement) {
     return html`
       ${this.styles}
 
-      <!-- <deep-navbar
-        class="navbar"
-        .companyName="${this.companyName}"
-        .routes="${this.routes}"
-      ></deep-navbar> -->
       <mwc-top-app-bar-fixed>
         <mwc-icon-button icon="menu" slot="navigationIcon"></mwc-icon-button>
 

packages/deep-template-analyzer/locales/en-CA/common.js

@@ -16,7 +16,7 @@ export default {
   headline: 'Explore data.',
   buttonText: 'Log In',
   notFoundPageContent: 'Page Not Found!',
-  startCollectingLabel: 'Collect Business Data',
+  startCollectingLabel: 'Collect Data',
   startButtonLabel: 'Start',
   selectBusinessLabel: 'Select a business',
 };

packages/deep-template-analyzer/locales/en-US/common.js

@@ -14,7 +14,7 @@ export default {
   headline: 'Something different here',
   buttonText: 'Log In',
   notFoundPageContent: 'Page Still not found!',
-  startCollectingLabel: 'Collect Business Data2',
+  startCollectingLabel: 'Collect Data2',
   startButtonLabel: 'Start2',
   selectBusinessLabel: 'Select a business2',
 };

packages/deep-template-analyzer/package.json

@@ -68,7 +68,9 @@
     "@apollo-elements/lit-apollo": "^4.1.0",
     "@auth0/auth0-spa-js": "^1.19.0",
     "@google-web-components/google-chart": "^5.0.0",
+    "@material/mwc-button": "^0.25.3",
     "@material/mwc-icon-button": "^0.25.3",
+    "@material/mwc-textfield": "^0.25.3",
     "@material/mwc-top-app-bar-fixed": "^0.25.3",
     "@thinkdeep/deep-button": "^0.0.8",
     "@thinkdeep/deep-card": "^0.0.8",