WIP shoelace integration

thescientist13 · Dec 8, 2024 · 3d78faa · 3d78faa
1 parent 0e65869
commit 3d78faa
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "start": "pnpm run serve"
   },
   "dependencies": {
+    "@shoelace-style/shoelace": "^2.18.0",
     "lit": "^3.2.1"
   },
   "devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/card.js b/src/components/card.js
@@ -76,7 +76,7 @@ export class Card extends LitElement {
       <div>
         <h3>${title}</h3>
         <img src="${thumbnail}" alt="${title}" loading="lazy" width="100%">
-        <button @click="${this.selectItem}">View Item Details</button>
+        <sl-button variant="neutral" @click="${this.selectItem}">View Item Details</sl-button>
       </div>
     `;
   }

diff --git a/src/components/modal.js b/src/components/modal.js
@@ -56,7 +56,7 @@ export class Modal extends LitElement {
   }
 
   firstUpdated() {
-    const button = this.shadowRoot.querySelector('button')
+    const button = this.shadowRoot.querySelector('sl-button')
     const dialog = this.shadowRoot.querySelector('dialog');
 
     button.addEventListener("click", () => dialog.close());
@@ -68,7 +68,7 @@ export class Modal extends LitElement {
     return html`
       <dialog>
         <h3 id="content">${content}</h3>
-        <button autofocus>Close</button>
+        <sl-button variant="neutral" autofocus>Close</sl-button>
       </dialog>
     `;
   }

diff --git a/src/layouts/app.html b/src/layouts/app.html
@@ -8,8 +8,11 @@
     <link rel="shortcut icon" href="/favicon.ico"/>
     <link rel="icon" href="/favicon.ico"/>
 
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
-    <link rel="stylesheet" href="../styles/main.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"/>
+    <link rel="stylesheet" href="/node_modules/@shoelace-style/shoelace/dist/themes/light.css" />
+    <link rel="stylesheet" href="../styles/main.css"/>
+
+    <script type="module" src="/node_modules/@shoelace-style/shoelace/dist/shoelace.js"></script>
     <script type="module" src="../components/card.js"></script>
     <script type="module" src="../components/modal.js"></script>
   </head>

diff --git a/src/pages/index.html b/src/pages/index.html
@@ -41,17 +41,17 @@ <h2>JSON API</h2>
       <p>This is an example of a Greenwood API Route returning JSON when fetched on-submit of the form to display a message on the page.  You can see it fire in the network tab as <i>/api/greeting</i></p>
       <form>
         <label>
-          <input type="text" name="name" placeholder="your name..." required/>
+          <sl-input type="text" name="name" placeholder="your name..." required></sl-input>
         </label>
-        <button type="submit">Click me for a greeting!</button>
+        <sl-button variant="neutral" type="submit">Click me for a greeting!</sl-button>
       </form>
       <h2 id="greeting-output"></h2>
     </article>
     <article>
       <h2>Fragments API (w/ Lit+SSR)</h2>
       <p>This is an example of a Greenwood API route returning an HTML response that is generated by server-rendering a Web Component (with Declarative Shadow DOM).  This same component is loaded on the client-side too, so that when you click the <i>Product Details</i> button, state and interactivity can still be resumed. You can see it fire in the network tab as <i>/api/fragment</i></p>
       <div id="load-products-output" class="products-cards-container" aria-live="polite"></div>
-      <button id="load-products">Load More Products</button>
+      <sl-button id="load-products" variant="neutral">Load More Products</sl-button>
     </article>
   </body>
 </html>
diff --git a/src/pages/search.html b/src/pages/search.html
@@ -31,9 +31,9 @@ <h2>Search API (w/ Lit+SSR)</h2>
       <p>This is an example of a Greenwood API leveraging the FormData API and returning an HTML response that is generated by server-rendering a Web Component (with Declarative Shadow DOM).  This same component is loaded on the client-side too, so that when you click the <i>Item Details</i> button, state and interactivity can still be resumed. You can see it fire in the network tab as <i>/api/search</i></p>
       <form id="search">
         <label for="term">
-          <input type="search" name="term" placeholder="a product..." required/>
+          <sl-input size="small" type="search" name="term" placeholder="a product..." required></sl-input>
         </label>
-        <button type="submit">Search</button>
+        <sl-button type="submit" variant="neutral">Search</sl-button>
       </form>
       <div id="search-products-output" class="products-cards-container" aria-live="polite"></div>
     </article>

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -60,20 +60,11 @@ h2 {
   text-decoration: underline;
 }
 
-button {
-  background: var(--color-accent);
-  color: var(--color-white);
-  padding: 1rem 2rem;
-  border: 0;
-  font-size: 1rem;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-input {
+sl-input {
   padding: 1rem;
   margin: 0 10px;
   font-size: 16px;
+  display: inline-block;
 }
 
 label {