From 6f6c2dce3c8f365376f53c451d1f0dbab8bcefd9 Mon Sep 17 00:00:00 2001
From: Kelsey Jackson <kelseythej@gmail.com>
Date: Tue, 30 Apr 2024 15:24:39 -0500
Subject: [PATCH] commiting to pull in next branch

---
 docs/src/content/docs/patterns/app.md       | 218 ++++++++++++++++++++
 docs/src/content/docs/patterns/ecommerce.md |  32 ++-
 2 files changed, 244 insertions(+), 6 deletions(-)

diff --git a/docs/src/content/docs/patterns/app.md b/docs/src/content/docs/patterns/app.md
index 6d97bd534..734cae0b5 100644
--- a/docs/src/content/docs/patterns/app.md
+++ b/docs/src/content/docs/patterns/app.md
@@ -2,3 +2,221 @@
 title: App
 description: TODO
 ---
+
+TODO Page Description
+
+## Examples
+
+### Action Plan
+
+```html:preview
+<wa-card>
+  <h3>Manage subscription</h3>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae voluptatibus corrupti atque repudiandae nam.</p>
+  <wa-button>Change Plan</wa-button>
+</wa-card>
+```
+
+### Feeds
+
+```html:preview
+<div class="activity-feed">
+  <div class="activity-group">
+    <span class="connector"></span>
+    <div class="activity">
+      <wa-icon name="user-circle" class="fa-fw"></wa-icon>
+      <p>Kicked ass and <strong>chewed bubblegum</strong></p>
+      <span style="margin-left: auto"><em>Oct. 31st</em></span>
+    </div>
+  </div>
+  <div class="activity-group">
+    <span class="connector"></span>
+    <div class="activity">
+      <wa-icon name="thumbs-up" style="color: blue" class="fa-fw"></wa-icon>
+      <p>Kicked ass and <strong>chewed bubblegum</strong></p>
+      <span style="margin-left: auto"><em>Oct. 31st</em></span>
+    </div>
+  </div>
+  <div class="activity-group">
+    <span class="connector"></span>
+    <div class="activity">
+      <wa-icon name="crown" class="fa-fw"></wa-icon>
+      <p>Kicked ass and <strong>chewed bubblegum</strong></p>
+      <span style="margin-left: auto"><em>Oct. 31st</em></span>
+    </div>
+  </div>
+  <div class="activity-group">
+    <span class="connector"></span>
+    <div class="activity">
+      <wa-icon name="turtle" style="color: green" class="fa-fw"></wa-icon>
+      <p>Kicked ass and <strong>chewed bubblegum</strong></p>
+      <span style="margin-left: auto"><em>Oct. 31st</em></span>
+    </div>
+  </div>
+
+</div>
+
+<style>
+  :root {
+    --border-color: var(--wa-color-surface-border);
+  }
+  .activity-feed {
+    wa-icon {
+      margin-right: 1rem;
+      font-size: 32px;
+    }
+    .fa-fw {
+      text-align: center;
+      width: 1.25em;
+    }
+    .activity {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+    }
+
+    .activity-group:not(:first-child) {
+          margin-top: .5rem;
+    }
+    .activity-group {
+      position: relative;
+    }
+
+    .connector {
+      position: absolute;
+    background-color: var(--border-color);
+    height: 25%;
+    width: 0.125rem;
+    margin-left: -1px;
+    top: 2.5rem;
+    left: 1rem;
+    }
+
+    .activity-group:last-of-type .connector {
+      display: none;
+    }
+  }
+</style>
+```
+
+### Grid
+
+```html:preview
+  <div>
+    <ul class="grid-list">
+      <li>
+        <wa-card>
+          <div class="card-top">
+            <div><strong>John Carpenter</strong> <wa-badge variant="brand" style="    --background: var(--wa-color-brand-border-subtle);
+    --border-color: var(--wa-color-brand-text-on-surface);
+    --content-color: var(--wa-color-brand-text-on-surface);
+}" pill>Brand</wa-badge><p>Master of Horror</p></div>
+          <div><wa-avatar
+  image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
+  label="Avatar of a gray tabby kitten looking down"
+></wa-avatar></div>
+          </div>
+
+          <div class="contact-info">
+            <div><wa-icon name="envelope"></wa-icon> Email</div>
+            <div><wa-icon name="phone"></wa-icon> Phone</div>
+          </div>
+        </wa-card>
+      </li>
+      <li>
+        <wa-card>
+          <div class="card-top">
+            <div><strong>John Carpenter</strong> <wa-badge variant="brand" style="    --background: var(--wa-color-brand-border-subtle);
+    --border-color: var(--wa-color-brand-text-on-surface);
+    --content-color: var(--wa-color-brand-text-on-surface);
+}" pill>Brand</wa-badge><p>Master of Horror</p></div>
+          <div><wa-avatar
+  image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
+  label="Avatar of a gray tabby kitten looking down"
+></wa-avatar></div>
+          </div>
+
+          <div class="contact-info">
+            <div><wa-icon name="envelope"></wa-icon> Email</div>
+            <div><wa-icon name="phone"></wa-icon> Phone</div>
+          </div>
+        </wa-card>
+      </li>
+      <li>
+        <wa-card>
+          <div class="card-top">
+            <div><strong>John Carpenter</strong> <wa-badge variant="brand" style="    --background: var(--wa-color-brand-border-subtle);
+    --border-color: var(--wa-color-brand-text-on-surface);
+    --content-color: var(--wa-color-brand-text-on-surface);
+}" pill>Brand</wa-badge><p>Master of Horror</p></div>
+          <div><wa-avatar
+  image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
+  label="Avatar of a gray tabby kitten looking down"
+></wa-avatar></div>
+          </div>
+
+          <div class="contact-info">
+            <div><wa-icon name="envelope"></wa-icon> Email</div>
+            <div><wa-icon name="phone"></wa-icon> Phone</div>
+          </div>
+        </wa-card>
+      </li>
+
+
+    </ul>
+  </div>
+
+  <style>
+    .grid-list {
+      wa-card {
+        display: flex;
+        flex-direction: column;
+      }
+      wa-card::part(body) {
+        padding: 0;
+      }
+
+      .card-top {
+        padding: var(--wa-space-xl);
+        border-bottom: 1px solid var(--wa-color-surface-border);
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .contact-info {
+        div {
+          width: 50%;
+          padding: var(--wa-space-xl);
+          display: flex;
+          align-items: center;
+          wa-icon {
+            margin-right: .5rem;
+          }
+        }
+
+        div:first-of-type {
+          border-right: .25px solid var(--wa-color-surface-border);
+        }
+        div:last-of-type {
+          border-left: .25px solid var(--wa-color-surface-border);
+        }
+        display: flex;
+      }
+
+
+      display: grid;
+      grid-template-columns: 1fr;
+      list-style-type: none;
+    }
+
+    @media (min-width: 1024px) {
+      .grid-list {
+        display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      list-style-type: none;
+      }
+    }
+
+
+  </style>
+```
diff --git a/docs/src/content/docs/patterns/ecommerce.md b/docs/src/content/docs/patterns/ecommerce.md
index ceda6aa12..96e5c2e6b 100644
--- a/docs/src/content/docs/patterns/ecommerce.md
+++ b/docs/src/content/docs/patterns/ecommerce.md
@@ -223,6 +223,9 @@ TODO Page Description
 </wa-card>
 
 <style>
+  :root {
+    --border-color: var(--wa-color-surface-border);
+  }
   .two-column {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
@@ -244,7 +247,7 @@ TODO Page Description
 
        &:not(:last-of-type) {
       padding-bottom: 1rem;
-      border-bottom: 1px solid rgb(48, 50, 59);
+      border-bottom: 1px solid var(--border-color);
     }
 
 
@@ -336,6 +339,9 @@ TODO Page Description
   </div>
 </div>
 <style>
+  :root {
+    --border-color: var(--wa-color-surface-border);
+  }
   .single-column {
     .cart-item {
       display: grid;
@@ -345,7 +351,7 @@ TODO Page Description
 
        &:not(:last-of-type) {
       padding-bottom: 1rem;
-      border-bottom: 1px solid rgb(48, 50, 59);
+      border-bottom: 1px solid var(--border-color);
     }
 
     img {
@@ -422,21 +428,21 @@ TODO Page Description
   </div>
   <div style="margin-top: 1rem;">
     <div>
-      <div style="border-bottom: 1px solid #eee; margin-bottom: 1rem;">
+      <div class="customer-list-item">
         <span style="display: flex; align-items: center;">
           <wa-avatar image="https://source.unsplash.com/bman-wearing-henley-top-portrait-7YVZYZeITc8" label="man-wearing-henley" style="margin-right: 1rem;"></wa-avatar>
           <span style="display: flex; flex-direction: column">Mark Henry <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating></span>
         </span>
         <p><em>I initially had my doubts, but once I got the widgets and played around with them, I became a believer.</em></p>
       </div>
-      <div style="border-bottom: 1px solid #eee; margin-bottom: 1rem;">
+      <div class="customer-list-item">
         <span style="display: flex; align-items: center;">
           <wa-avatar image="https://source.unsplash.com/woman-wearing-black-crew-neck-shirt-3TLl_97HNJo" label="lady-in-turtleneck" style="margin-right: 1rem;"></wa-avatar>
           <span style="display: flex; flex-direction: column">Liz Michaels <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating></span>
         </span>
         <p><em>I'd definitely but these again.</em></p>
       </div>
-      <div style="border-bottom: 1px solid #eee; margin-bottom: 1rem;">
+      <div class="customer-list-item">
         <span style="display: flex; align-items: center;">
           <wa-avatar image="https://source.unsplash.com/man-with-index-finger-on-lips-RukI4qZGlQs" label="man-with-hair" style="margin-right: 1rem;"></wa-avatar>
           <span style="display: flex; flex-direction: column">Todd Smith <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating></span>
@@ -446,6 +452,17 @@ TODO Page Description
     </div>
   </div>
 </div>
+
+<style>
+  :root {
+    --border-color: var(--wa-color-surface-border);
+  }
+
+  .customer-list-item {
+    border-bottom: 1px solid var(--border-color);
+    margin-bottom: 1rem;
+  }
+</style>
 ```
 
 ### Order History
@@ -521,6 +538,9 @@ TODO Page Description
   </div>
 </div>
 <style>
+   :root {
+    --border-color: var(--wa-color-surface-border);
+  }
   .order-history-meta {
     display: flex;
     justify-content: space-between;
@@ -537,7 +557,7 @@ TODO Page Description
         display: grid;
     grid-template-columns: 18% 79%;
     column-gap: 1rem;
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid var(--border-color);
     padding-bottom: 1rem;
   }
 </style>