extract maps out

experimental/responsive-design/src/lib/components/app-ribbon.js

@@ -20,7 +20,7 @@ export class AppRibbon extends LightDOMLitElement {
         this.resizeObserver = new ResizeObserver((entries) => {
             for (const entry of entries) {
                 const width = entry.contentRect.width;
-                this.updateVisibleButtons(width);
+                this._updateVisibleButtons(width);
             }
         });
         this.resizeObserver.observe(this);
@@ -32,7 +32,7 @@ export class AppRibbon extends LightDOMLitElement {
             this.resizeObserver.disconnect();
     }
 
-    updateVisibleButtons(width) {
+    _updateVisibleButtons(width) {
         const breakpoints = [
             { minWidth: 1120, buttons: 12 },
             { minWidth: 1069, buttons: 11 },
@@ -50,17 +50,19 @@ export class AppRibbon extends LightDOMLitElement {
         this.requestUpdate();
     }
 
+    _getVisibleButtonsTemplate() {
+        return this.visibleButtons.map(
+            (button, index) => html`
+                <ribbon-button id="${button.id}" text="${button.text}" variant="${button.variant}" iconPosition="${button.iconPosition}"></ribbon-button>
+                ${index === 0 ? html`<div class="mx-0.5 h-6 border-l border-gray-300"></div>` : ""}
+            `
+        );
+    }
+
     render() {
         return html`
             <nav class="mt-1 flex items-center justify-between p-1">
-                <div class="flex flex-nowrap items-baseline overflow-x-hidden">
-                    ${this.visibleButtons.map(
-        (button, index) => html`
-                            <ribbon-button id="${button.id}" text="${button.text}" variant="${button.variant}" iconPosition="${button.iconPosition}"></ribbon-button>
-                            ${index === 0 ? html`<div class="mx-0.5 h-6 border-l border-gray-300"></div>` : ""}
-                        `
-    )}
-                </div>
+                <div class="flex flex-nowrap items-baseline overflow-x-hidden">${this._getVisibleButtonsTemplate()}</div>
                 <div class="3xl:hidden">
                     <button class="mx-1 inline-flex rounded-md bg-gray-200 px-2 py-1 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-300">
                         <!-- Heroicons are MIT licensed. See https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->

experimental/responsive-design/src/lib/components/article-grid.js

@@ -13,15 +13,17 @@ class ArticleGrid extends LightDOMLitElement {
         this.articles = articles;
     }
 
+    _getArticlesTemplate() {
+        return this.articles.map((article) => {
+            return html`<article-card title="${article.title}" description="${article.description}" author="${article.author}" image="${article.image}" .tags="${article.tags}"></article-card>`;
+        });
+    }
+
     render() {
         return html`
             <div class="flex flex-col p-2">
                 <section-heading title="Articles" subtitle="Read insightful articles about food, cooking tips, and more."></section-heading>
-                <div class="content-auto grid grid-cols-1 gap-6 p-4 lg:grid-cols-1">
-                    ${this.articles.map((article) => {
-        return html`<article-card title="${article.title}" description="${article.description}" author="${article.author}" image="${article.image}" .tags="${article.tags}"></article-card>`;
-    })}
-                </div>
+                <div class="content-auto grid grid-cols-1 gap-6 p-4 lg:grid-cols-1">${this._getArticlesTemplate()}</div>
             </div>
         `;
     }

experimental/responsive-design/src/lib/components/chat-messages.js

@@ -28,18 +28,22 @@ class ChatMessages extends LightDOMLitElement {
         }
     }
 
+    _getMessagesTemplate() {
+        return this.messages.map(
+            (message) => html`
+                <li class="${message.user ? "justify-end" : "justify-start"} flex">
+                    <div class="${message.user ? "bg-teal-100 text-teal-900 md:max-w-36" : "bg-gray-200 text-gray-900 md:max-w-48"} text-pretty rounded-md px-3 py-2 text-xs">
+                        ${message.user || message.bot} ${message.imageUrl ? html` <img src="${message.imageUrl}" alt="${message.imageAlt}" class="mt-2 h-32 w-full rounded-md" /> ` : ""}
+                    </div>
+                </li>
+            `
+        );
+    }
+
     render() {
         return html`
             <ul ${ref(this.scrollContainerRef)} class="flex max-h-[345px] flex-1 flex-col space-y-2 overflow-y-auto p-2">
-                ${this.messages.map(
-        (message) => html`
-                        <li class="${message.user ? "justify-end" : "justify-start"} flex">
-                            <div class="${message.user ? "bg-teal-100 text-teal-900 md:max-w-36" : "bg-gray-200 text-gray-900 md:max-w-48"} text-pretty rounded-md px-3 py-2 text-xs">
-                                ${message.user || message.bot} ${message.imageUrl ? html` <img src="${message.imageUrl}" alt="${message.imageAlt}" class="mt-2 h-32 w-full rounded-md" /> ` : ""}
-                            </div>
-                        </li>
-                    `
-    )}
+                ${this._getMessagesTemplate()}
             </ul>
         `;
     }

experimental/responsive-design/src/lib/components/chat-window.js

@@ -56,30 +56,38 @@ class ChatWindow extends LitElement {
         this._currentChat = e.target.value;
     }
 
+    _getOptionsTemplate() {
+        return html`
+            <div class="flex flex-1 flex-col items-center justify-center gap-4 p-4">
+                <button id="resume-previous-chat-btn" @click="${this._resumePreviousChat}" class="w-full rounded-md bg-teal-600/50 px-4 py-2 text-white hover:bg-teal-600 focus:outline-none">Resume Previous Chat</button>
+                <button @click="${this._startNewChat}" class="w-full rounded-md bg-orange-500/50 px-4 py-2 text-white hover:bg-orange-500 focus:outline-none">Start a New Conversation</button>
+            </div>
+        `;
+    }
+
+    _getChatTemplate() {
+        return html`
+            <div class="flex flex-1 flex-col">
+                <chat-messages class="flex-1 overflow-y-auto" .messages="${this.messages}"></chat-messages>
+                <chat-input .value="${this._currentChat}" @input="${this._handleInputChange}" @send-chat="${this._handleSendChat}"></chat-input>
+            </div>
+        `;
+    }
+
+    _getContentTemplate() {
+        if (!this._isExpanded)
+            return null;
+        return this._showOptions ? this._getOptionsTemplate() : this._getChatTemplate();
+    }
+
     render() {
         return html`
             <div id="chat-window" class="${this._isExpanded ? "h-[440px]" : "h-12"} bottom-2 right-2 m-auto flex flex-col rounded-lg border-2 border-solid bg-gray-50 shadow-lg sm:sticky sm:w-full md:fixed md:w-64 lg:w-96">
                 <div class="${this._isExpanded ? "rounded-t-lg" : "rounded-lg"} flex items-center justify-between bg-teal-600/75 px-4 py-2 text-white shadow-md">
                     <p class="text-lg font-semibold">Chef AI</p>
                     <button id="expand-chat-btn" @click="${this._toggleExpand}" class="rounded-full bg-white px-2 py-1 text-sm text-teal-600/75 hover:bg-teal-100 focus:outline-none">${this._isExpanded ? "Collapse" : "Expand"}</button>
                 </div>
-                ${this._isExpanded
-        ? html`
-                          ${this._showOptions
-        ? html`
-                                    <div class="flex flex-1 flex-col items-center justify-center gap-4 p-4">
-                                        <button id="resume-previous-chat-btn" @click="${this._resumePreviousChat}" class="w-full rounded-md bg-teal-600/50 px-4 py-2 text-white hover:bg-teal-600 focus:outline-none">Resume Previous Chat</button>
-                                        <button @click="${this._startNewChat}" class="w-full rounded-md bg-orange-500/50 px-4 py-2 text-white hover:bg-orange-500 focus:outline-none">Start a New Conversation</button>
-                                    </div>
-                                `
-        : html`
-                                    <div class="flex flex-1 flex-col">
-                                        <chat-messages class="flex-1 overflow-y-auto" .messages="${this.messages}"></chat-messages>
-                                        <chat-input .value="${this._currentChat}" @input="${this._handleInputChange}" @send-chat="${this._handleSendChat}"></chat-input>
-                                    </div>
-                                `}
-                      `
-        : null}
+                ${this._getContentTemplate()}
             </div>
         `;
     }

experimental/responsive-design/src/lib/components/chef-tips.js

@@ -13,20 +13,22 @@ class ChefTips extends LightDOMLitElement {
         this.chefTips = chefTips;
     }
 
+    _getChefTipsTemplate() {
+        return this.chefTips.map((tip) => {
+            return html`
+                <blockquote class="rounded-lg bg-gray-100 p-4 shadow-md">
+                    <p class="italic text-gray-700">"${tip.quote}"</p>
+                    <footer class="mt-2 text-right text-sm text-gray-500">- ${tip.author}</footer>
+                </blockquote>
+            `;
+        });
+    }
+
     render() {
         return html`
             <div class="p-4">
                 <section-heading title="Chef's Tips"></section-heading>
-                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-                    ${this.chefTips.map((tip) => {
-        return html`
-                            <blockquote class="rounded-lg bg-gray-100 p-4 shadow-md">
-                                <p class="italic text-gray-700">"${tip.quote}"</p>
-                                <footer class="mt-2 text-right text-sm text-gray-500">- ${tip.author}</footer>
-                            </blockquote>
-                        `;
-    })}
-                </div>
+                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">${this._getChefTipsTemplate()}</div>
             </div>
         `;
     }

experimental/responsive-design/src/lib/components/information-window.js

@@ -83,33 +83,39 @@ class InformationWindow extends LitElement {
         this.requestUpdate();
     }
 
+    _getExpandedTemplate() {
+        return html`
+            <div class="relative w-full overflow-hidden">
+                <button
+                    class="absolute left-2 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 transform cursor-pointer items-center justify-center rounded-full border-0 bg-black bg-opacity-50 p-2 text-white disabled:cursor-not-allowed disabled:opacity-50"
+                    @click="${this.previousCard}"
+                    ?disabled="${this._currentIndex === 0}"
+                >
+                    &lt;
+                </button>
+                <div class="card-row flex w-full">
+                    ${this.restaurants.map((restaurant) => html` <restaurant-card title="${restaurant.title}" distance="${restaurant.distance}" rating="${restaurant.rating}" class="box-border w-full flex-none p-2"></restaurant-card> `)}
+                </div>
+                <button
+                    class="absolute right-2 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 transform cursor-pointer items-center justify-center rounded-full border-0 bg-black bg-opacity-50 p-2 text-white disabled:cursor-not-allowed disabled:opacity-50"
+                    @click="${this.nextCard}"
+                    ?disabled="${this._currentIndex === this.restaurants.length - 1}"
+                >
+                    &gt;
+                </button>
+            </div>
+        `;
+    }
+
+    _getGridTemplate() {
+        return html` <div class="grid grid-cols-2 gap-4">${this.restaurants.map((restaurant) => html` <restaurant-card title="${restaurant.title}" distance="${restaurant.distance}" rating="${restaurant.rating}"></restaurant-card> `)}</div> `;
+    }
+
     render() {
         return html`
             <div class="p-1">
                 <h4 class="my-1 mb-1 text-base font-semibold text-gray-700">Restaurants Near You</h4>
-                ${this._isChatExpanded
-        ? html`
-                          <div class="relative w-full overflow-hidden">
-                              <button
-                                  class="absolute left-2 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 transform cursor-pointer items-center justify-center rounded-full border-0 bg-black bg-opacity-50 p-2 text-white disabled:cursor-not-allowed disabled:opacity-50"
-                                  @click="${this.previousCard}"
-                                  ?disabled="${this._currentIndex === 0}"
-                              >
-                                  &lt;
-                              </button>
-                              <div class="card-row flex w-full">
-                                  ${this.restaurants.map((restaurant) => html` <restaurant-card title="${restaurant.title}" distance="${restaurant.distance}" rating="${restaurant.rating}" class="box-border w-full flex-none p-2"></restaurant-card> `)}
-                              </div>
-                              <button
-                                  class="absolute right-2 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 transform cursor-pointer items-center justify-center rounded-full border-0 bg-black bg-opacity-50 p-2 text-white disabled:cursor-not-allowed disabled:opacity-50"
-                                  @click="${this.nextCard}"
-                                  ?disabled="${this._currentIndex === this.restaurants.length - 1}"
-                              >
-                                  &gt;
-                              </button>
-                          </div>
-                      `
-        : html` <div class="grid grid-cols-2 gap-4">${this.restaurants.map((restaurant) => html` <restaurant-card title="${restaurant.title}" distance="${restaurant.distance}" rating="${restaurant.rating}"></restaurant-card> `)}</div> `}
+                ${this._isChatExpanded ? this._getExpandedTemplate() : this._getGridTemplate()}
             </div>
         `;
     }

experimental/responsive-design/src/lib/components/recipe-card.js

@@ -38,6 +38,36 @@ class RecipeCard extends LightDOMLitElement {
         );
     }
 
+    _getStepsTemplate() {
+        return this.steps.map(
+            (step, index) => html`
+                <li class="flex items-center space-x-2 text-xs">
+                    <span class="flex h-6 w-6 items-center justify-center rounded-full bg-orange-200 font-bold text-orange-800">${index + 1}</span>
+                    <span>${step}</span>
+                </li>
+            `
+        );
+    }
+
+    _getExpandedTemplate() {
+        return html`
+            <div class="flex justify-between p-2">
+                <div>
+                    <h4 class="text-xs font-semibold text-gray-700">Ingredients:</h4>
+                    <ul class="list-inside list-disc space-y-1 pl-4 text-xs text-gray-600">
+                        ${this.ingredients.map((ingredient) => html`<li>${ingredient}</li>`)}
+                    </ul>
+                </div>
+                <div class="text-xs">
+                    <h4 class="font-semibold text-gray-700">Steps:</h4>
+                    <ol class="list-inside list-decimal space-y-1 pl-4 text-gray-600">
+                        ${this._getStepsTemplate()}
+                    </ol>
+                </div>
+            </div>
+        `;
+    }
+
     render() {
         return html`
             <div class="row-span-6 grid grid-rows-subgrid rounded-lg bg-gradient-to-br from-blue-50 to-green-50 text-left shadow-md">
@@ -54,30 +84,7 @@ class RecipeCard extends LightDOMLitElement {
                 <div class="absolute -top-4 left-0 right-0 flex justify-center space-x-2 p-2">
                     ${this.tags.map((tag) => html`<span class="inline-flex items-center rounded-md bg-orange-100 px-1 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-orange-500/10">${tag}</span> `)}
                 </div>
-                ${this.isExpanded
-        ? html`
-                          <div class="flex justify-between p-2">
-                              <div>
-                                  <h4 class="text-xs font-semibold text-gray-700">Ingredients:</h4>
-                                  <ul class="list-inside list-disc space-y-1 pl-4 text-xs text-gray-600">
-                                      ${this.ingredients.map((ingredient) => html`<li>${ingredient}</li>`)}
-                                  </ul>
-                              </div>
-                              <div class="text-xs">
-                                  <h4 class="font-semibold text-gray-700">Steps:</h4>
-                                  <ol class="list-inside list-decimal space-y-1 pl-4 text-gray-600">
-                                      ${this.steps.map(
-        (step, index) =>
-            html`<li class="flex items-center space-x-2 text-xs">
-                                                  <span class="flex h-6 w-6 items-center justify-center rounded-full bg-orange-200 font-bold text-orange-800">${index + 1}</span>
-                                                  <span>${step}</span>
-                                              </li>`
-    )}
-                                  </ol>
-                              </div>
-                          </div>
-                      `
-        : ""}
+                ${this.isExpanded ? this._getExpandedTemplate() : ""}
                 <button @click="${this._toggleExpand}" class="show-more-btn w-28 justify-self-end border-none bg-transparent p-1 text-sm text-blue-400 hover:text-blue-900">${this.isExpanded ? "Show Less" : "Show More..."}</button>
             </div>
         `;

experimental/responsive-design/src/lib/components/recipe-carousel.js

@@ -36,6 +36,16 @@ class RecipeCarousel extends LightDOMLitElement {
         }
     }
 
+    _getCarouselItemsTemplate() {
+        return this.carouselItems.map(
+            (item) => html`
+                <div class="mr-4 h-36 w-1/3 flex-none snap-center overflow-hidden rounded-lg">
+                    <img src="${item.image}" alt="${item.alt}" class="h-full w-44 rounded-t-lg object-cover drop-shadow-xl" />
+                </div>
+            `
+        );
+    }
+
     render() {
         return html`
             <div class="box-border w-full bg-gray-100 shadow-md">
@@ -49,15 +59,7 @@ class RecipeCarousel extends LightDOMLitElement {
                         &lt;
                     </button>
                     <div class="px-5 pb-1">
-                        <div class="carousel scrollbar-hide flex w-full snap-x overflow-x-scroll scroll-smooth">
-                            ${this.carouselItems.map(
-        (item) => html`
-                                    <div class="mr-4 h-36 w-1/3 flex-none snap-center overflow-hidden rounded-lg">
-                                        <img src="${item.image}" alt="${item.alt}" class="h-full w-44 rounded-t-lg object-cover drop-shadow-xl" />
-                                    </div>
-                                `
-    )}
-                        </div>
+                        <div class="carousel scrollbar-hide flex w-full snap-x overflow-x-scroll scroll-smooth">${this._getCarouselItemsTemplate()}</div>
                     </div>
                     <button
                         @click="${this.nextItem}"