@design.estate/dees-catalog 9.3.0 → 9.4.0

package/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.demo.ts

@@ -1,332 +1,67 @@
-import { html, css, cssManager } from '@design.estate/dees-element';
-import '@design.estate/dees-element/demotools';
-import '../../00group-layout/dees-panel/dees-panel.js';
-import type { DeesShoppingProductcard } from '../dees-shopping-productcard/dees-shopping-productcard.js';
-
-export const demoFunc = () => html`
-  <dees-demowrapper>
-    <style>
-      ${css`
-        .demo-container {
-          display: flex;
-          flex-direction: column;
-          gap: 24px;
-          padding: 24px;
-          max-width: 1200px;
-          margin: 0 auto;
-        }
-        
-        .product-grid {
-          display: grid;
-          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-          gap: 20px;
-        }
-
-        .cart-summary {
-          margin-top: 24px;
-          padding: 20px;
-          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
-          border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 21.8%)')};
-          border-radius: 8px;
-        }
-
-        .cart-summary-title {
-          font-size: 18px;
-          font-weight: 600;
-          margin-bottom: 16px;
-          color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        }
-
-        .cart-item {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 8px 0;
-          font-size: 14px;
-          color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(217.9 10.6% 74.9%)')};
-        }
-
-        .cart-total {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding-top: 16px;
-          margin-top: 16px;
-          border-top: 2px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-          font-size: 18px;
-          font-weight: 600;
-          color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        }
-
-        .selected-products {
-          padding: 16px;
-          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
-          border-radius: 6px;
-          font-size: 14px;
-          color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(217.9 10.6% 74.9%)')};
-        }
-      `}
-    </style>
-    
-    <div class="demo-container">
-      <dees-panel .title=${'Basic Product Cards'} .subtitle=${'Simple product display with various configurations'}>
-        <div class="product-grid">
-          <dees-shopping-productcard
-            .productData=${{
-              name: 'Wireless Bluetooth Headphones',
-              category: 'Audio',
-              description: 'Premium sound quality with active noise cancellation',
-              price: 149.99,
-              originalPrice: 199.99,
-              iconName: 'lucide:headphones'
-            }}
-            .quantity=${1}
-          ></dees-shopping-productcard>
-
-          <dees-shopping-productcard
-            .productData=${{
-              name: 'Smart Watch Series 7',
-              category: 'Wearables',
-              description: 'Track your fitness and stay connected on the go',
-              price: 399.00,
-              iconName: 'lucide:watch'
-            }}
-            .quantity=${1}
-          ></dees-shopping-productcard>
-
-          <dees-shopping-productcard
-            .productData=${{
-              name: 'USB-C Hub',
-              category: 'Accessories',
-              price: 49.99,
-              iconName: 'lucide:usb',
-              inStock: false
-            }}
-            .quantity=${0}
-          ></dees-shopping-productcard>
-        </div>
-      </dees-panel>
-
-      <dees-panel .title=${'Interactive Shopping Cart'} .subtitle=${'Product cards with dynamic cart calculation'} .runAfterRender=${async (elementArg: HTMLElement) => {
-        const products = [
-          { id: 'laptop', element: null as DeesShoppingProductcard | null, data: { name: 'MacBook Pro 14"', category: 'Computers', description: 'M3 Pro chip with 18GB RAM', price: 1999, originalPrice: 2199, iconName: 'lucide:laptop' }},
-          { id: 'tablet', element: null as DeesShoppingProductcard | null, data: { name: 'Tablet Air', category: 'Tablets', description: '10.9" high-resolution display', price: 599, iconName: 'lucide:tablet' }},
-          { id: 'keyboard', element: null as DeesShoppingProductcard | null, data: { name: 'Magic Keyboard', category: 'Accessories', description: 'Wireless keyboard with Touch ID', price: 149, iconName: 'lucide:keyboard' }}
-        ];
-
-        const updateCartSummary = () => {
-          let total = 0;
-          const items: string[] = [];
-          
-          products.forEach(product => {
-            const element = elementArg.querySelector(`#${product.id}`) as DeesShoppingProductcard;
-            if (element && element.quantity > 0) {
-              const subtotal = product.data.price * element.quantity;
-              total += subtotal;
-              items.push(`
-                <div class="cart-item">
-                  <span>${product.data.name} (${element.quantity})</span>
-                  <span>$${subtotal.toFixed(2)}</span>
-                </div>
-              `);
-            }
-          });
-          
-          const summary = elementArg.querySelector('#interactive-cart-summary');
-          if (summary) {
-            summary.innerHTML = `
-              ${items.join('')}
-              ${items.length === 0 ? '<div class="cart-item" style="text-align: center; color: #999;">Your cart is empty</div>' : ''}
-              <div class="cart-total">
-                <span>Total</span>
-                <span>$${total.toFixed(2)}</span>
-              </div>
-            `;
-          }
-        };
-        
-        // Initial update
-        setTimeout(updateCartSummary, 100);
-        
-        // Set up listeners
-        elementArg.querySelectorAll('dees-shopping-productcard').forEach(card => {
-          card.addEventListener('quantityChange', updateCartSummary);
-        });
-      }}>
-        <div class="product-grid">
-          <dees-shopping-productcard
-            id="laptop"
-            .productData=${{
-              name: 'MacBook Pro 14"',
-              category: 'Computers',
-              description: 'M3 Pro chip with 18GB RAM',
-              price: 1999,
-              originalPrice: 2199,
-              iconName: 'lucide:laptop'
-            }}
-            .quantity=${1}
-          ></dees-shopping-productcard>
-
-          <dees-shopping-productcard
-            id="tablet"
-            .productData=${{
-              name: 'Tablet Air',
-              category: 'Tablets', 
-              description: '10.9" high-resolution display',
-              price: 599,
-              iconName: 'lucide:tablet'
-            }}
-            .quantity=${0}
-          ></dees-shopping-productcard>
-
-          <dees-shopping-productcard
-            id="keyboard"
-            .productData=${{
-              name: 'Magic Keyboard',
-              category: 'Accessories',
-              description: 'Wireless keyboard with Touch ID',
-              price: 149,
-              iconName: 'lucide:keyboard'
-            }}
-            .quantity=${2}
-          ></dees-shopping-productcard>
-        </div>
-
-        <div class="cart-summary">
-          <h3 class="cart-summary-title">Shopping Cart</h3>
-          <div id="interactive-cart-summary">
-            <!-- Dynamically updated -->
-          </div>
-        </div>
-      </dees-panel>
-
-      <dees-panel .title=${'Selectable Product Cards'} .subtitle=${'Click cards or checkboxes to select products'}>
-        <div class="product-grid">
-          <dees-shopping-productcard
-            .productData=${{
-              name: 'Sony Alpha 7 IV',
-              category: 'Cameras',
-              description: 'Full-frame mirrorless camera',
-              price: 2498,
-              iconName: 'lucide:camera'
-            }}
-            .selectable=${true}
-            .showQuantitySelector=${false}
-            @selectionChange=${(e: CustomEvent) => {
-              const output = document.querySelector('#selection-output');
-              if (output) {
-                const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]');
-                const selectedProducts: string[] = [];
-                (selectedCards as NodeListOf<DeesShoppingProductcard>).forEach((card) => {
-                  if (card.selected) {
-                    selectedProducts.push(card.productData.name);
-                  }
-                });
-                output.textContent = selectedProducts.length > 0 
-                  ? `Selected: ${selectedProducts.join(', ')}` 
-                  : 'No products selected';
-              }
-            }}
-          ></dees-shopping-productcard>
-
-          <dees-shopping-productcard
-            .productData=${{
-              name: 'DJI Mini 3 Pro',
-              category: 'Drones',
-              description: 'Lightweight drone with 4K camera',
-              price: 759,
-              iconName: 'lucide:plane'
-            }}
-            .selectable=${true}
-            .showQuantitySelector=${false}
-            @selectionChange=${(e: CustomEvent) => {
-              const output = document.querySelector('#selection-output');
-              if (output) {
-                const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]');
-                const selectedProducts: string[] = [];
-                (selectedCards as NodeListOf<DeesShoppingProductcard>).forEach((card) => {
-                  if (card.selected) {
-                    selectedProducts.push(card.productData.name);
-                  }
-                });
-                output.textContent = selectedProducts.length > 0 
-                  ? `Selected: ${selectedProducts.join(', ')}` 
-                  : 'No products selected';
-              }
-            }}
-          ></dees-shopping-productcard>
-
-          <dees-shopping-productcard
-            .productData=${{
-              name: 'GoPro HERO12',
-              category: 'Action Cameras',
-              description: '5.3K video with HyperSmooth 6.0',
-              price: 399,
-              originalPrice: 449,
-              iconName: 'lucide:video'
-            }}
-            .selectable=${true}
-            .showQuantitySelector=${false}
-            @selectionChange=${(e: CustomEvent) => {
-              const output = document.querySelector('#selection-output');
-              if (output) {
-                const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]');
-                const selectedProducts: string[] = [];
-                (selectedCards as NodeListOf<DeesShoppingProductcard>).forEach((card) => {
-                  if (card.selected) {
-                    selectedProducts.push(card.productData.name);
-                  }
-                });
-                output.textContent = selectedProducts.length > 0 
-                  ? `Selected: ${selectedProducts.join(', ')}` 
-                  : 'No products selected';
-              }
-            }}
-          ></dees-shopping-productcard>
-        </div>
-        
-        <div class="selected-products" id="selection-output" style="margin-top: 16px;">
-          No products selected
-        </div>
-      </dees-panel>
-
-      <dees-panel .title=${'Product Variations'} .subtitle=${'Different states and configurations'}>
-        <div class="product-grid">
-          <dees-shopping-productcard
-            .productData=${{
-              name: 'Limited Edition Sneakers',
-              category: 'Footwear',
-              description: 'Exclusive colorway - Only 500 pairs',
-              price: 299,
-              iconName: 'lucide:footprints',
-              inStock: false,
-              stockText: 'Sold Out'
-            }}
-            .quantity=${0}
-          ></dees-shopping-productcard>
-
-          <dees-shopping-productcard
-            .productData=${{
-              name: 'Minimalist Wallet',
-              price: 39.99,
-              iconName: 'lucide:wallet'
-            }}
-            .quantity=${1}
-          ></dees-shopping-productcard>
-
-          <dees-shopping-productcard
-            .productData=${{
-              name: 'Premium Coffee Beans',
-              category: 'Food & Beverage',
-              description: 'Single origin, medium roast',
-              price: 18.50,
-              iconName: 'lucide:coffee',
-              currency: '€'
-            }}
-            .quantity=${2}
-          ></dees-shopping-productcard>
-        </div>
-      </dees-panel>
-    </div>
-  </dees-demowrapper>
-`;
+import { html, css, cssManager, customElement, state, DeesElement } from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import { demoPage } from '../../../demos/templates.js';
+import type { IProductData } from './dees-shopping-productcard.js';
+import '../../00group-input/dees-input-multitoggle/dees-input-multitoggle.js';
+import '../../00group-button/dees-button/dees-button.js';
+
+// Small original vector product studies keep this fixture sharp and self-contained.
+const illustration = (content: string) => `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect width="400" height="300" fill="#e8e6e1"/>${content}</svg>`)}`;
+const products: IProductData[] = [
+  { name: 'Studio headphones', category: 'Sound', description: 'A quiet space, wherever you work.', price: 179, originalPrice: 219, iconName: 'lucide:headphones', imageUrl: illustration('<path d="M125 172v-40a75 75 0 0 1 150 0v40" fill="none" stroke="#383a3c" stroke-width="17"/><path d="M135 136v-5a65 65 0 0 1 130 0v5" fill="none" stroke="#b4b1ab" stroke-width="7"/><rect x="106" y="130" width="42" height="88" rx="20" fill="#343638"/><rect x="124" y="130" width="30" height="88" rx="15" fill="#616467"/><rect x="252" y="130" width="42" height="88" rx="20" fill="#343638"/><rect x="246" y="130" width="30" height="88" rx="15" fill="#616467"/>') },
+  { name: 'Everyday keyboard', category: 'Desk', description: 'Low-profile keys. A little more focus.', price: 89, iconName: 'lucide:keyboard', imageUrl: illustration('<rect x="54" y="109" width="292" height="111" rx="14" fill="#a6a4a0"/><rect x="54" y="101" width="292" height="111" rx="14" fill="#cecbc4"/>' + Array.from({ length: 3 }, (_, row) => Array.from({ length: 11 }, (_, col) => `<rect x="${67 + col * 24}" y="${112 + row * 23}" width="19" height="17" rx="4" fill="#f6f5f1"/>`).join('')).join('') + '<rect x="67" y="181" width="42" height="17" rx="4" fill="#f6f5f1"/><rect x="115" y="181" width="165" height="17" rx="4" fill="#f6f5f1"/><rect x="286" y="181" width="43" height="17" rx="4" fill="#f6f5f1"/>') },
+  { name: 'Pocket notebook', category: 'Ideas', description: 'For the ideas that start on paper.', price: 24, iconName: 'lucide:notebook', imageUrl: illustration('<rect x="122" y="51" width="156" height="210" rx="8" fill="#a7ada5"/><rect x="116" y="43" width="156" height="210" rx="8" fill="#737e6d"/><path d="M129 43v210" stroke="#596750" stroke-width="3"/><path d="M248 43v210" stroke="#485541" stroke-width="7"/><rect x="151" y="94" width="72" height="1" fill="#aeb6a6"/><rect x="151" y="103" width="50" height="1" fill="#aeb6a6"/><path d="M207 252v18l8-5 8 5v-18" fill="#c0b391"/>') },
+  { name: 'Desktop hub', category: 'Connections', description: 'One cable. Everything connected.', price: 69, inStock: false, stockText: 'Back soon', iconName: 'lucide:usb', imageUrl: illustration('<path d="M253 135h30q37 0 37-40v-8" fill="none" stroke="#53565a" stroke-width="10"/><rect x="307" y="58" width="25" height="35" rx="5" fill="#33383d"/><rect x="76" y="130" width="220" height="73" rx="19" fill="#646a71"/><rect x="76" y="118" width="220" height="67" rx="19" fill="#adb3ba"/><rect x="97" y="159" width="40" height="9" rx="3" fill="#33383d"/><rect x="151" y="159" width="40" height="9" rx="3" fill="#33383d"/><rect x="217" y="159" width="31" height="9" rx="4" fill="#33383d"/><circle cx="268" cy="163" r="3" fill="#d4dddc"/>') },
+];
+const money = (value: number) => `$${value.toFixed(2)}`;
+
+@customElement('dees-demo-simple-shop')
+class DeesDemoSimpleShop extends DeesElement {
+  @state() private accessor mode = 'shop';
+  @state() private accessor quantities = products.map(() => 0);
+  @state() private accessor selected: number[] = [];
+  @state() private accessor restocked = false;
+  @state() private accessor result = 'Add a few essentials to your bag, or build a kit.';
+  private get inventory(): IProductData[] { return products.map(product => product.inStock === false && this.restocked ? { ...product, inStock: true, stockText: 'In stock' } : product); }
+  public static styles = [themeDefaultStyles, cssManager.defaultStyles, css`
+    :host { display: grid; gap: 24px; container-type: inline-size; font: 13px/1.5 var(--dees-font-family); }
+    .toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
+    .layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
+    .products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
+    .bag { position: sticky; top: 20px; display: grid; gap: 20px; padding: 24px; border-radius: var(--dees-radius-2xl); corner-shape: var(--dees-corner-shape); background: var(--dees-color-bg-primary); border: 1px solid var(--dees-color-border-subtle); }
+    h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
+    p { margin: 0; color: var(--dees-color-text-secondary); }
+    .empty { display: grid; justify-items: start; gap: 12px; padding: 16px 0; color: var(--dees-color-text-secondary); }
+    .lines { display: grid; gap: 16px; }
+    .line, .total { display: flex; gap: 16px; justify-content: space-between; }
+    .line small { display: block; color: var(--dees-color-text-secondary); margin-top: 3px; }
+    .line > span, .total { font-variant-numeric: tabular-nums; }
+    .total { border-top: 1px solid var(--dees-color-border-subtle); padding-top: 16px; font-weight: 600; }
+    .kit { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--dees-color-border-subtle); }
+    output { padding: 14px 16px; border-radius: var(--dees-radius-lg); background: var(--dees-color-bg-secondary); color: var(--dees-color-text-secondary); }
+    @container (max-width: 760px) { .layout { grid-template-columns: minmax(0, 1fr); } .bag { position: static; } }
+    @container (max-width: 500px) { .products { grid-template-columns: minmax(0, 1fr); } }
+  `];
+  public render() {
+    const inventory = this.inventory;
+    const count = this.quantities.reduce((sum, quantity) => sum + quantity, 0);
+    const total = this.quantities.reduce((sum, quantity, index) => sum + quantity * inventory[index].price, 0);
+    return html`<div class="toolbar"><dees-input-multitoggle aria-label="Shopping mode" .options=${[{ key: 'shop', label: 'Shop essentials' }, { key: 'kit', label: 'Build a kit' }]} .value=${this.mode}
+      @change=${(event: CustomEvent) => { this.mode = event.detail.value; }}></dees-input-multitoggle>
+      <dees-button type="ghost" text=${this.restocked ? 'Hub restocked' : 'Restock hub'} .disabled=${this.restocked} @clicked=${() => { this.restocked = true; this.result = 'Desktop hub is available again.'; }}></dees-button></div>
+    <div class="layout"><div class="products">${inventory.map((product, index) => html`<dees-shopping-productcard .productData=${product} .quantity=${this.quantities[index]}
+      .selectable=${this.mode === 'kit' && product.inStock !== false} .selected=${this.mode === 'kit' && this.selected.includes(index)} .showQuantitySelector=${product.inStock !== false}
+      @quantityChange=${(event: CustomEvent<{ quantity: number }>) => { this.quantities = this.quantities.map((value, i) => i === index ? event.detail.quantity : value); this.result = `${product.name}: ${event.detail.quantity} in your bag.`; }}
+      @selectionChange=${(event: CustomEvent<{ selected: boolean }>) => { this.selected = event.detail.selected ? [...this.selected, index] : this.selected.filter(i => i !== index); this.result = `${this.selected.length} essentials selected for your kit.`; }}></dees-shopping-productcard>`)}</div>
+      <aside class="bag" aria-label="Shopping bag"><h2>Your bag${count ? ` · ${count}` : ''}</h2>
+        ${count ? html`<div class="lines">${inventory.map((product, index) => this.quantities[index] ? html`<div class="line"><div>${product.name}<small>Quantity ${this.quantities[index]}</small></div><span>${money(product.price * this.quantities[index])}</span></div>` : '')}</div>` : html`<div class="empty"><dees-icon icon="lucide:shoppingBag" iconSize="28"></dees-icon><p>A few good essentials.<br>A space that feels like yours.</p></div>`}
+        <div class="total"><span>Subtotal</span><span>${money(total)}</span></div>
+        <dees-button full-width type="accent" text="Review bag" .disabled=${count === 0} @clicked=${() => { this.result = `Your sample bag has ${count} items, totaling ${money(total)}. No order has been placed.`; }}></dees-button>
+        ${count ? html`<dees-button type="ghost" size="sm" text="Clear bag" @clicked=${() => { this.quantities = products.map(() => 0); this.result = 'Your bag is empty.'; }}></dees-button>` : ''}
+        ${this.mode === 'kit' ? html`<div class="kit"><p>${this.selected.length} items selected for your kit.</p><dees-button full-width type="outline" text="Add kit to bag" .disabled=${!this.selected.length}
+          @clicked=${() => { this.quantities = this.quantities.map((quantity, index) => quantity + (this.selected.includes(index) ? 1 : 0)); this.result = 'One of each selected essential was added to your bag.'; }}></dees-button></div>` : ''}
+      </aside>
+    </div><output role="status">${this.result}</output>`;
+  }
+}
+export const demoFunc = () => demoPage('Good things for good work.', 'A considered set of desk essentials. Find your favorites and build a kit that works together.', html`<dees-demo-simple-shop></dees-demo-simple-shop>`);