Merge pull request #2 from Vaz-Tiago/advanced

Advanced
Vaz-Tiago · May 16, 2022 · d80c5fb · d80c5fb
2 parents b6cc509 + 099b248
commit d80c5fb
Show file tree

Hide file tree

Showing 14 changed files with 615 additions and 36 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1 @@
+AV_TOKEN=
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,9 +30,11 @@
   },
   "devDependencies": {
     "@types/jest": "^27.0.3",
+    "@types/node": "^17.0.33",
     "jest": "^27.4.5",
     "jest-cli": "^27.4.5",
-    "puppeteer": "^10.0.0"
+    "puppeteer": "^10.0.0",
+    "rollup-plugin-dotenv": "^0.3.0"
   },
   "license": "MIT"
 }
diff --git a/src/_index.html b/src/_index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <title>Stencil Component Starter</title>
+
+    <script type="module" src="/build/stencil.esm.js"></script>
+    <script nomodule src="/build/stencil.js"></script>
+
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+
+      .side-nav ul {
+        list-style: none;
+      }
+
+      .side-nav a {
+        text-decoration: none;
+        color: #a2c8e7;
+      }
+
+      .side-nav li {
+        margin: 1rem 0;
+      }
+    </style>
+  </head>
+  <body>
+    <button id="side-menu-button">Open Side Menu</button>
+    <vaz-side-drawer title-menu="My Menu">
+      <nav class="side-nav">
+        <ul>
+          <li><a href="#">A Link</a></li>
+          <li><a href="#">Another Link</a></li>
+          <li><a href="#">A Third Link</a></li>
+        </ul>
+      </nav>
+    </vaz-side-drawer>
+
+    <p>Hi there, try my new tooltip component <vaz-tooltip text="This is a tooltip!!" /></p>
+
+    <script>
+      const sideMenuButton = document.querySelector('#side-menu-button');
+      const sideMenu = document.querySelector('vaz-side-drawer');
+      sideMenuButton.addEventListener('click', () => {
+        if (!sideMenuButton.opened) {
+          sideMenu.open();
+        }
+      });
+    </script>
+  </body>
+</html>