From e12be798b8504e724a2ac74d93e79c22df7740c1 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Tue, 4 Mar 2025 14:30:00 -0500
Subject: [PATCH] Clean up utilities and formatting, replace placeholder text
 in order history

---
 docs/docs/patterns/ecommerce-order-history.md | 222 ++++++++++--------
 1 file changed, 120 insertions(+), 102 deletions(-)

diff --git a/docs/docs/patterns/ecommerce-order-history.md b/docs/docs/patterns/ecommerce-order-history.md
index dfce97e10..a12e51e69 100644
--- a/docs/docs/patterns/ecommerce-order-history.md
+++ b/docs/docs/patterns/ecommerce-order-history.md
@@ -6,80 +6,94 @@ tags: e-commerce
 ---
 
 ## List
+
 ```html {.example}
-<div class="wa-stack" style="max-width: 960px; margin: 0 auto;">
+<div class="wa-stack wa-gap-2xl">
   <h2>Order History</h2>
-  <p>Check the status of recent orders, manage returns, and download invoices.</p>
-  <div class="wa-split">
+  <p class="wa-caption-m">Check the status of recent orders, manage returns, and download invoices.</p>
+  <dl class="wa-split">
     <span class="wa-stack wa-gap-0">
-      <strong>Order number</strong>
-      <span>WU88191111</span>
+      <dt>Order number</dt>
+      <dd>WU88191111</dd>
     </span>
     <span class="wa-stack wa-gap-0">
-      <strong>Date placed</strong>
-      <span>January 22, 2021</span>
+      <dt>Date placed</dt>
+      <dd>January 22, 2021</dd>
     </span>
     <span class="wa-stack wa-gap-0">
-      <strong>Total amount</strong>
-      <span>$590.00</span>
+      <dt>Total amount</dt>
+      <dd>$590.00</dd>
     </span>
-      <span class="wa-cluster">
-        <wa-button variant="neutral" appearance="outlined">View Order</wa-button>
-        <wa-button variant="neutral" appearance="outlined">View Invoice</wa-button>
-      </span>
-  </div>
+    <span class="wa-cluster">
+      <wa-button variant="neutral" appearance="outlined">View Order</wa-button>
+      <wa-button variant="neutral" appearance="outlined">View Invoice</wa-button>
+    </span>
+  </dl>
   <wa-divider></wa-divider>
-  <div class="wa-stack">
-    <div class="wa-flank" style="border-bottom: 1px solid var(--border-color);">
-      <img src="https://img.fortawesome.com/cfa83f3c/light-fixtures.jpg" style="max-width: 215px">
-      <div>
-        <span class="wa-split">
-          <span><strong>Dome Light Fixtures</strong></span>
-          <span><strong>$215.00</strong></span>
-        </span>
-        <p class="wa-caption-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem.</p>
-        <div class="wa-split">
-          <span>
-            <wa-button size="small" appearance="plain" variant="neutral">View Product</wa-button>
-            <wa-button size="small" appearance="accent" variant="brand">Buy Again</wa-button>
-        </span>
-        <wa-badge appearance="filled" variant="success">Delivered</wa-badge>
-        </div> 
-      </div>
+  <div class="wa-flank" style="--flank-size: 12rem">
+    <div class="wa-frame wa-border-radius-s" style="aspect-ratio: 3 / 2">
+      <img 
+        src="https://img.fortawesome.com/cfa83f3c/light-fixtures.jpg"
+        alt=""
+      />
     </div>
-    <wa-divider></wa-divider>
-    <div class="wa-flank" style="border-bottom: 1px solid var(--border-color);">
-      <img src="https://img.fortawesome.com/cfa83f3c/modern-chair.jpg" style="max-width: 215px">
-      <div>
-        <span class="wa-split">
-          <span><strong>Reading Chair</strong></span>
-          <span><strong>$115.00</strong></span>
-        </span>
-        <p class="wa-caption-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem.</p>
-        <div class="wa-split">
-          <span>
+    <div class="wa-stack">
+      <div class="wa-split">
+        <span><strong>Dome Light Fixtures</strong></span>
+        <span><strong>$215.00</strong></span>
+      </div>
+      <p class="wa-caption-m">Illuminate your space with elegance and style with stunning Dome Light Fixtures. The shape of these lights complements both modern and traditional interiors.</p>
+      <div class="wa-split">
+        <wa-badge appearance="filled" variant="success">Delivered</wa-badge>
+        <div class="wa-cluster">
           <wa-button size="small" appearance="plain" variant="neutral">View Product</wa-button>
           <wa-button size="small" appearance="accent" variant="brand">Buy Again</wa-button>
-        </span>
+        </div>
+      </div> 
+    </div>
+  </div>
+  <wa-divider></wa-divider>
+  <div class="wa-flank" style="--flank-size: 12rem">
+    <div class="wa-frame wa-border-radius-s" style="aspect-ratio: 3 / 2">
+      <img
+        src="https://img.fortawesome.com/cfa83f3c/modern-chair.jpg"
+        alt=""
+      />
+    </div>
+    <div class="wa-stack">
+      <div class="wa-split">
+        <span><strong>Reading Chair</strong></span>
+        <span><strong>$115.00</strong></span>
+      </div>
+      <p class="wa-caption-m">Add a pop of color and a touch of elegance to any room with our Reading Chair featuring vibrant yellow fabric upholstery.</p>
+      <div class="wa-split">
         <wa-badge appearance="filled" variant="brand">Out for delivery</wa-badge>
+        <div class="wa-cluster">
+          <wa-button size="small" appearance="plain" variant="neutral">View Product</wa-button>
+          <wa-button size="small" appearance="accent" variant="brand">Buy Again</wa-button>
         </div>
       </div>
     </div>
-    <wa-divider></wa-divider>
-    <div class="wa-flank" style="border-bottom: 1px solid var(--border-color);">
-      <img src="https://img.fortawesome.com/cfa83f3c/sofa.jpg" style="max-width: 215px">
-      <div>
-        <span class="wa-split">
-          <span><strong>Custom Sofa</strong></span>
-          <span><strong>$260.00</strong></span>
-        </span>
-        <p class="wa-caption-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae tincidunt nulla. Suspendisse eu augue mauris. Morbi ut euismod sem.</p>
-        <div class="wa-split">
-          <span>
+  </div>
+  <wa-divider></wa-divider>
+  <div class="wa-flank" style="--flank-size: 12rem">
+    <div class="wa-frame wa-border-radius-s" style="aspect-ratio: 3 / 2">
+      <img
+        src="https://img.fortawesome.com/cfa83f3c/sofa.jpg"
+        alt=""
+      />
+    </div>
+    <div class="wa-stack">
+      <div class="wa-split">
+        <span><strong>Custom Sofa</strong></span>
+        <span><strong>$260.00</strong></span>
+      </div>
+      <p class="wa-caption-m">Experience luxury and comfort like never before with our Custom Sofa, designed to elevate any living space. This sofa features exquisite velvet upholstery for an air of sophistication.</p>
+      <div class="wa-split">
+        <wa-badge appearance="filled" variant="neutral">Preparing to ship</wa-badge>
+        <div class="wa-cluster">
           <wa-button size="small" appearance="plain" variant="neutral">View Product</wa-button>
           <wa-button size="small" appearance="accent" variant="brand">Buy Again</wa-button>
-        </span>
-         <wa-badge appearance="filled" variant="neutral">Preparing to ship</wa-badge>
         </div>
       </div>
     </div>
@@ -88,85 +102,89 @@ tags: e-commerce
 ```
 
 ## Invoice Table
-```html{.example}
-<div class="wa-stack" style="max-width: 960px; margin: 0 auto;">
-  <div class="wa-split wa-callout wa-outlined wa-neutral">
-    <dl class="wa-grid" style="grid-template-columns: repeat(3, 1fr); --wa-space-xl: 0;">
-      <div>
-        <dt>Date Placed</dt>
-        <dd style="--wa-space-m: 0;">
-          <time datetime="2021-01-22">January 22, 2021</time>
-        </dd>
-      </div>
-      <div>
-        <dt>Order Number</dt>
-        <dd style="--wa-space-m: 0;">
-          WU88191111
-        </dd>
-      </div>
-      <div>
-        <dt>Total Amount</dt>
-        <dd style="--wa-space-m: 0;">
-          $590.00
-        </dd>
-      </div>
-    </dl>
-    <wa-button>View Invoice</wa-button>
-  </div>
-  <table class="wa-brand">
+
+```html {.example}
+<div class="wa-stack wa-gap-2xl">
+  <wa-callout appearance="filled" variant="neutral">
+    <div class="wa-flank:end wa-align-items-center">
+      <dl class="wa-grid">
+        <div class="wa-stack wa-gap-0">
+          <dt>Date Placed</dt>
+          <dd>
+            <wa-format-date date="2021-01-22" month="long" day="numeric" year="numeric"></wa-format-date>
+          </dd>
+        </div>
+        <div class="wa-stack wa-gap-0">
+          <dt>Order Number</dt>
+          <dd>WU88191111</dd>
+        </div>
+        <div class="wa-stack wa-gap-0">
+          <dt>Total Amount</dt>
+          <dd>$590.00</dd>
+        </div>
+      </dl>
+      <wa-button>View Invoice</wa-button>
+    </div>
+  </wa-callout>
+  <table>
     <thead>
       <tr>
         <th>Product</th>
         <th>Price</th>
         <th>Status</th>
-        <th>info</th>
+        <th>Info</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>
-          <div class="wa-flank wa-align-items-start">
-            <img src="https://img.fortawesome.com/cfa83f3c/light-fixtures.jpg" style="width: calc(1rem * 8);" />
-            <div>
-              <div>Dome Light Fixtures</div>
+          <div class="wa-cluster wa-align-items-start">
+            <div class="wa-frame:landscape wa-border-radius-s" style="max-width: 8rem">
+              <img
+                src="https://img.fortawesome.com/cfa83f3c/light-fixtures.jpg"
+                alt=""
+              />
             </div>
+            <span>Dome Light Fixtures</span>
           </div>
         </td>
         <td>$215.00</td>
         <td>Delivered Jan 25, 2021</td>
-        <td><a href="#">View</a></td>
+        <td><a href="">View</a></td>
       </tr>
       <tr>
         <td>
-          <div class="wa-flank wa-align-items-start">
-            <img src="https://img.fortawesome.com/cfa83f3c/modern-chair.jpg" style="width: calc(1rem * 8);" />
-            <div>
-              <div>Reading Chair</div>
+          <div class="wa-cluster wa-align-items-start">
+            <div class="wa-frame:landscape wa-border-radius-s" style="max-width: 8rem">
+              <img
+                src="https://img.fortawesome.com/cfa83f3c/modern-chair.jpg"
+                alt=""
+              />
             </div>
+            <span>Reading Chair</span>
           </div>
         </td>
         <td>$115.00</td>
         <td>Delivered Jan 25, 2021</td>
-        <td><a href="#">View</a></td>
+        <td><a href="">View</a></td>
       </tr>
       <tr>
         <td>
-          <div class="wa-flank wa-align-items-start">
-            <img src="https://img.fortawesome.com/cfa83f3c/sofa.jpg" style="width: calc(1rem * 8);" />
-            <div>
-              <div>Custom Sofa</div>   
+          <div class="wa-cluster wa-align-items-start">
+            <div class="wa-frame:landscape wa-border-radius-s" style="max-width: 8rem">
+              <img
+                src="https://img.fortawesome.com/cfa83f3c/sofa.jpg"
+                alt=""
+              />
             </div>
+            <span>Custom Sofa</span>
           </div>
         </td>
         <td>$260.00</td>
         <td>Delivered Jan 25, 2021</td>
-        <td><a href="#">View</a></td>
+        <td><a href="">View</a></td>
       </tr>
     </tbody>
   </table>
 </div>
 ```
-
-<!-- ## List with Quick Actions
-```html{.example}
-``` -->