ThinkDeepTech · haydenmcp · Jun 12, 2022 · Jun 8, 2022 · Jun 8, 2022 · Jun 8, 2022
diff --git a/packages/deep-card/README copy.md b/packages/deep-card/README copy.md
@@ -0,0 +1,3 @@
+# Card Component
+
+[![Vulnerabilities](https://snyk.io/test/github/ThinkDeepTech/thinkdeep/master/badge.svg?targetFile=packages/deep-card/package.json)](https://snyk.io/test/github/ThinkDeepTech/thinkdeep/master?targetFile=packages/deep-card/package.json)
diff --git a/packages/deep-card/deep-card.js b/packages/deep-card/deep-card.js
@@ -0,0 +1,70 @@
+/* eslint-disable no-unused-vars */
+
+import {html, LitElement, css} from 'lit';
+
+/**
+ * Card component.
+ */
+export class DeepCard extends LitElement {
+  /**
+   * Styles for lit component.
+   */
+  static get styles() {
+    return [
+      css`
+        :host {
+          transition: box-shadow 0.3s;
+          min-width: 60vw;
+          max-width: 90vw;
+          min-height: 22vh;
+          width: var(--width, 90vw);
+          height: var(--height, 22vh);
+          border-radius: 5px;
+          background-color: var(--background-color, white);
+        }
+
+        :host(:hover) {
+          box-shadow: 0 0 8px var(--shadow-color, gray);
+        }
+
+        .header ::slotted(*) {
+          margin-left: 15px;
+          margin-top: 15px;
+        }
+
+        .footer ::slotted(*) {
+          margin-left: 15px;
+          margin-bottom: 15px;
+          margin-top: 15px;
+        }
+
+        a {
+          display: flex;
+          flex-direction: column;
+        }
+      `,
+    ];
+  }
+
+  /**
+   * Lit render function.
+   * @return {TemplateResult}
+   */
+  render() {
+    return html`
+      <a>
+        <div class="header">
+          <slot name="header"></slot>
+        </div>
+        <div class="body">
+          <slot name="body"></slot>
+        </div>
+        <div class="footer">
+          <slot name="footer"></slot>
+        </div>
+      </a>
+    `;
+  }
+}
+
+customElements.define('deep-card', DeepCard);
diff --git a/packages/deep-card/index.html b/packages/deep-card/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en-CA">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Thinkdeep</title>
+
+    <script src="./index.js"></script>
+  </head>
+  <body>
+
+    <deep-card></deep-card>
+
+
+    <script type="module" src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+  </body>
+</html>
diff --git a/packages/deep-card/index.js b/packages/deep-card/index.js
@@ -0,0 +1 @@
+import './deep-card.js';
diff --git a/packages/deep-card/package.json b/packages/deep-card/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "@thinkdeep/deep-card",
+  "version": "0.0.8",
+  "description": "Card component.",
+  "keywords": [
+    "Lit",
+    "JavaScript",
+    "WebComponents"
+  ],
+  "author": "Hayden McParlane <hayden.mcparlane@gmail.com>",
+  "homepage": "https://github.com/ThinkDeepTech/thinkdeep#readme",
+  "license": "GPL-3.0-or-later",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ThinkDeepTech/thinkdeep.git"
+  },
+  "type": "module",
+  "scripts": {
+    "start": "web-dev-server --config ./web-dev-server.config.js --esbuild-target auto",
+    "start:watch": "web-dev-server --config ./web-dev-server.config.js --watch --esbuild-target auto",
+    "tests:e2e": "web-test-runner --config ./web-test-runner.config.js",
+    "tests:e2e:watch": "web-test-runner --config ./web-test-runner.config.js --watch",
+    "build": "rimraf build && rollup -c rollup.config.mjs"
+  },
+  "devDependencies": {
+    "@esm-bundle/chai": "^4.3.4",
+    "@open-wc/testing": "^3.1.4",
+    "@open-wc/testing-helpers": "^2.1.2",
+    "@thinkdeep/tools": "^0.0.8",
+    "@web/dev-server-esbuild": "^0.2.12",
+    "@web/dev-server-rollup": "^0.3.5",
+    "@web/test-runner": "^0.13.15",
+    "@web/test-runner-playwright": "^0.8.6",
+    "@web/test-runner-puppeteer": "^0.10.0",
+    "chai": "^4.3.4",
+    "mocha": "^9.0.2",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.72.1"
+  },
+  "dependencies": {
+    "@webcomponents/webcomponentsjs": "^2.5.0",
+    "lit": "^2.0.2"
+  },
+  "private": true
+}
diff --git a/packages/deep-card/rollup.config.mjs b/packages/deep-card/rollup.config.mjs
@@ -0,0 +1,14 @@
+import merge from 'deepmerge';
+
+// NOTE: The relative path below is required otherwise the build errors out.
+import baseConfig from "@thinkdeep/tools/rollup.config.mjs";
+
+export default merge(baseConfig, {
+  // if you use createSpaConfig, you can use your index.html as entrypoint,
+  // any <script type="module"> inside will be bundled by rollup
+  input: './index.html',
+
+  // alternatively, you can use your JS as entrypoint for rollup and
+  // optionally set a HTML template manually
+  // input: './app.js',
+});
diff --git a/packages/deep-card/test/deep-card.unit.test.js b/packages/deep-card/test/deep-card.unit.test.js
@@ -0,0 +1,6 @@
+// import {html, litFixtureSync, expect} from '@open-wc/testing';
+// import '@thinkdeep/deep-card/deep-card.js';
+
+// describe('card', () => {
+
+// });
diff --git a/packages/deep-card/web-dev-server.config.js b/packages/deep-card/web-dev-server.config.js
@@ -0,0 +1,3 @@
+import config from '@thinkdeep/tools/web-dev-server.config.js';
+
+export default config;
diff --git a/packages/deep-card/web-test-runner.config.js b/packages/deep-card/web-test-runner.config.js
@@ -0,0 +1,3 @@
+import config from '@thinkdeep/tools/web-test-runner.config.js';
+
+export default config;
diff --git a/packages/deep-economic-analyzer/deep-analyzer-page-home.js b/packages/deep-economic-analyzer/deep-analyzer-page-home.js
@@ -69,7 +69,7 @@ export class DeepAnalyzerPageHome extends i18nMixin(LitElement) {
         height: auto;
         padding: 5px;
         border-radius: 7px;
-        opacity: 0.65;
+        opacity: 0.55;
         text-align: center;
         margin-bottom: 8vh;
       }

diff --git a/packages/deep-economic-analyzer/deep-analyzer-page-summary.js b/packages/deep-economic-analyzer/deep-analyzer-page-summary.js
@@ -11,6 +11,7 @@ import '@material/mwc-list/mwc-list';
 import '@material/mwc-list/mwc-list-item';
 import '@material/mwc-select';
 import '@material/mwc-textfield';
+import '@thinkdeep/deep-card';
 import './deep-site-configuration.js';
 import CollectEconomicData from './graphql/CollectEconomicData.mutation.graphql';
 import GetSentiment from './graphql/GetSentiment.query.graphql';
@@ -128,23 +129,28 @@ export default class DeepAnalyzerPageSummary extends LitElement {
   static get styles() {
     return css`
       :host {
-        height: auto;
-        width: 100vw;
+        display: block;
+        height: 100%;
+        width: 100%;
       }
 
       .grid-container {
         display: grid;
         grid-template-columns: 1fr;
-        min-height: 80vh;
         background-color: var(--secondary-color);
         justify-items: center;
+        align-items: center;
+        height: 100%;
+        width: 100%;
       }
 
       .input,
       google-chart,
-      mwc-list {
+      mwc-list,
+      deep-card {
         width: 90vw;
         max-width: 90vw;
+        margin: 8px;
       }
 
       mwc-button {
@@ -156,6 +162,12 @@ export default class DeepAnalyzerPageSummary extends LitElement {
         overflow: hidden;
       }
 
+      .summary {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+      }
+
       [hidden] {
         display: none;
       }

diff --git a/packages/deep-economic-analyzer/deep-economic-analyzer.js b/packages/deep-economic-analyzer/deep-economic-analyzer.js
@@ -140,8 +140,8 @@ export class DeepEconomicAnalyzer extends i18nMixin(LitElement) {
       css`
         :host {
           display: block;
-          height: 100vh;
-          width: 100vw;
+          width: 100%;
+          height: 100%;
         }
 
         .grid-container {
@@ -150,6 +150,7 @@ export class DeepEconomicAnalyzer extends i18nMixin(LitElement) {
           grid-template-areas:
             'header'
             'content';
+          height: 100%;
         }
 
         mwc-top-app-bar-fixed {

diff --git a/packages/deep-economic-analyzer/index.html b/packages/deep-economic-analyzer/index.html
@@ -45,10 +45,10 @@
     }
 
     html, body {
-      max-height: 100vh;
-      max-width: 100vw;
+      height: 100%;
       width: 100vw;
       display: block;
+      background-color: var(--primary-color);
     }
     </style>
 

diff --git a/packages/deep-economic-analyzer/package.json b/packages/deep-economic-analyzer/package.json
@@ -46,7 +46,7 @@
     "@material/mwc-select": "^0.25.3",
     "@material/mwc-textfield": "^0.25.3",
     "@material/mwc-top-app-bar-fixed": "^0.25.3",
-    "@spectrum-web-components/card": "^0.10.11",
+    "@thinkdeep/deep-card": "0.0.8",
     "@thinkdeep/deep-footer": "^0.0.8",
     "@vaadin/router": "^1.7.4",
     "@webcomponents/webcomponentsjs": "^2.5.0",

diff --git a/packages/tools/web-dev-server.config.js b/packages/tools/web-dev-server.config.js
@@ -30,6 +30,7 @@ export default {
       'process.env.PREDECOS_MICROSERVICE_SUBSCRIPTION_URL': JSON.stringify(
         process.env.PREDECOS_MICROSERVICE_SUBSCRIPTION_URL
       ),
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
     }),
     graphql(),
   ],

diff --git a/packages/tools/web-test-runner.config.js b/packages/tools/web-test-runner.config.js
@@ -83,6 +83,7 @@ export default {
       PREDECOS_TEST_AUTH_CLIENT_SECRET:
         process.env.PREDECOS_TEST_AUTH_CLIENT_SECRET,
       PREDECOS_TEST_AUTH_LOGIN_URL: `https://${process.env.PREDECOS_TEST_AUTH_DOMAIN}/oauth/token`,
+      NODE_ENV: process.env.NODE_ENV,
     }),
   ],
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Card Component

		[![Vulnerabilities](https://snyk.io/test/github/ThinkDeepTech/thinkdeep/master/badge.svg?targetFile=packages/deep-card/package.json)](https://snyk.io/test/github/ThinkDeepTech/thinkdeep/master?targetFile=packages/deep-card/package.json)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import config from '@thinkdeep/tools/web-dev-server.config.js';

		export default config;