From 6a6def73f97669a8fcc7edd6a8be8fc91b4fcf82 Mon Sep 17 00:00:00 2001
From: Barrett Grubbs <barrettgrubbs@gmail.com>
Date: Tue, 27 Aug 2024 15:50:05 -0400
Subject: [PATCH 1/2] Icon update for Panel and Card, List adjustment for icon,
 expand icon update

---
 .../src/components/cbp-card/cbp-card.stories.tsx            | 6 +++---
 .../src/components/cbp-expand/cbp-expand.scss               | 2 +-
 .../web-components/src/components/cbp-expand/cbp-expand.tsx | 2 +-
 .../web-components/src/components/cbp-icon/cbp-icon.scss    | 4 +---
 .../src/components/cbp-icon/cbp-icon.stories.tsx            | 2 ++
 .../web-components/src/components/cbp-icon/cbp-icon.tsx     | 5 +++++
 .../web-components/src/components/cbp-list/cbp-list.scss    | 6 +++++-
 .../web-components/src/components/cbp-panel/cbp-panel.scss  | 2 +-
 8 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx b/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx
index c723d927..8fa6d164 100644
--- a/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx
+++ b/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx
@@ -86,7 +86,7 @@ const GeneralTemplate = ({ color, title, bodyText, withIcon, context, sx }) => {
       ${sx ? 'sx=' + JSON.stringify(sx) : ''}
     >
       <h4 slot="cbp-card-title">
-        ${withIcon ? `<cbp-icon name='triangle-exclamation' size='1.5rem' sx='{"display":"inline"}'></cbp-icon>` : ''}
+        ${withIcon ? `<cbp-icon name='triangle-exclamation' size='1.25rem' sx='{"display":"inline"}'></cbp-icon>` : ''}
         ${title}
       </h4>
       <p>${bodyText}</p>
@@ -103,7 +103,7 @@ const DecisionTemplate = ({ title, color, bodyText, actionsLayout, actionsConfig
       ${sx ? 'sx=' + JSON.stringify(sx) : ''}
     >
       <h4 slot="cbp-card-title" id="card-heading-1">
-        ${withIcon ? `<cbp-icon name='triangle-exclamation' size='1.5rem' sx='{"display":"inline"}'></cbp-icon>` : ''}
+        ${withIcon ? `<cbp-icon name='triangle-exclamation' size='1.25rem' sx='{"display":"inline"}'></cbp-icon>` : ''}
         ${title}
       </h4>
       <p>${bodyText}</p>  
@@ -121,7 +121,7 @@ const BannerTemplate = ({ title, color, bodyText, withIcon, context, sx }) => {
       ${sx ? 'sx=' + JSON.stringify(sx) : ''}
     >
       <h4 slot="cbp-card-title">
-        ${withIcon ? `<cbp-icon name='triangle-exclamation' size='1.5rem' sx='{"display":"inline"}'></cbp-icon>` : ''}
+        ${withIcon ? `<cbp-icon name='triangle-exclamation' size='1.25rem' sx='{"display":"inline"}'></cbp-icon>` : ''}
         ${title}
       </h4>
       <p>${bodyText}</p>  
diff --git a/packages/web-components/src/components/cbp-expand/cbp-expand.scss b/packages/web-components/src/components/cbp-expand/cbp-expand.scss
index 1080da6b..0f6818d3 100644
--- a/packages/web-components/src/components/cbp-expand/cbp-expand.scss
+++ b/packages/web-components/src/components/cbp-expand/cbp-expand.scss
@@ -53,7 +53,7 @@ cbp-expand {
   color:var(--cbp-expand-color);
 
   &:not([open]) {
-    --cbp-expand-rotate-icon: rotate(-90deg);
+    --cbp-expand-rotate-icon: rotate(-180deg);
   }
 
   &:not([open]) .cbp-expand--content {
diff --git a/packages/web-components/src/components/cbp-expand/cbp-expand.tsx b/packages/web-components/src/components/cbp-expand/cbp-expand.tsx
index edecf847..dee426da 100644
--- a/packages/web-components/src/components/cbp-expand/cbp-expand.tsx
+++ b/packages/web-components/src/components/cbp-expand/cbp-expand.tsx
@@ -87,7 +87,7 @@ export class CbpExpand {
               aria-describedby={this.headingId}
               ref={el => (this.control = el)}
             >
-              <cbp-icon name="caret-down" color="currentColor"></cbp-icon>
+              <cbp-icon name="caret-up" color="currentColor"></cbp-icon>
             </cbp-button>
           </cbp-flex-item>
 
diff --git a/packages/web-components/src/components/cbp-icon/cbp-icon.scss b/packages/web-components/src/components/cbp-icon/cbp-icon.scss
index 432b4810..f5a11191 100644
--- a/packages/web-components/src/components/cbp-icon/cbp-icon.scss
+++ b/packages/web-components/src/components/cbp-icon/cbp-icon.scss
@@ -7,10 +7,8 @@ cbp-icon {
   align-items: center;
   justify-content: center;
 
-  // TechDebt: figure out what makes for the most consistent display since icons are not square proportions
   svg {
-    //width: var(--cbp-icon-size);
-    width: auto;
+    width: var(--cbp-icon-size);
     height: var(--cbp-icon-size);
     fill: var(--cbp-icon-color);
     vertical-align: top;
diff --git a/packages/web-components/src/components/cbp-icon/cbp-icon.stories.tsx b/packages/web-components/src/components/cbp-icon/cbp-icon.stories.tsx
index af19cfd2..86afef13 100644
--- a/packages/web-components/src/components/cbp-icon/cbp-icon.stories.tsx
+++ b/packages/web-components/src/components/cbp-icon/cbp-icon.stories.tsx
@@ -12,6 +12,8 @@ export default {
         'arrow-right',
         'bars',
         'book',
+        'caret-down',
+        'caret-up',
         'check',
         'chevron-right',
         'circle',
diff --git a/packages/web-components/src/components/cbp-icon/cbp-icon.tsx b/packages/web-components/src/components/cbp-icon/cbp-icon.tsx
index 14af9481..454d1a67 100644
--- a/packages/web-components/src/components/cbp-icon/cbp-icon.tsx
+++ b/packages/web-components/src/components/cbp-icon/cbp-icon.tsx
@@ -60,6 +60,11 @@ export class CbpIcon {
       viewbox: "0 0 320 512",
       path: "M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z",
     },
+    'caret-up': {
+      name: "caret-up",
+      viewbox: "0 0 320 512",
+      path: "M288.7 352H31.3c-17.8 0-26.7-21.5-14.1-34.1l128.7-128.7c7.8-7.8 20.5-7.8 28.3 0l128.7 128.7c12.6 12.6 3.7 34.1-14.1 34.1z",
+    },
     'check': {
       name: "check",
       viewbox: "0 0 448 512",
diff --git a/packages/web-components/src/components/cbp-list/cbp-list.scss b/packages/web-components/src/components/cbp-list/cbp-list.scss
index 96f10646..6edf423b 100644
--- a/packages/web-components/src/components/cbp-list/cbp-list.scss
+++ b/packages/web-components/src/components/cbp-list/cbp-list.scss
@@ -51,6 +51,10 @@ cbp-list {
       padding-block: var(--cbp-list-item-padding-block);
     }
 
+    cbp-icon{
+      vertical-align: text-top;
+    }
+
     &[size="large"]{
     --cbp-list-font-size: var(--cbp-font-size-heading-sm);
     --cbp-list-item-line-height: var(--cbp-line-height-md);
@@ -125,7 +129,7 @@ cbp-list {
         
         cbp-icon{
           margin-inline-start: var(--cbp-link-list-icon-margin);
-          padding-inline-end: var(--cbp-space-1x);
+          margin-inline-end: var(--cbp-space-1x);
         }
       }
     }
diff --git a/packages/web-components/src/components/cbp-panel/cbp-panel.scss b/packages/web-components/src/components/cbp-panel/cbp-panel.scss
index c3aab0e0..690df39a 100644
--- a/packages/web-components/src/components/cbp-panel/cbp-panel.scss
+++ b/packages/web-components/src/components/cbp-panel/cbp-panel.scss
@@ -60,7 +60,7 @@ cbp-panel {
     border-bottom: solid var(--cbp-border-size-xl) var(--cbp-panel-header-color-bottom-border);
     border-radius: var(--cbp-panel-border-radius) var(--cbp-panel-border-radius) 0 0;
     
-    & :where(h1,h2,h3,h4,h5,h6) {
+    & cbp-typography :where(h1,h2,h3,h4,h5,h6) {
       color: inherit;
       font-size: var(--cbp-font-size-heading-lg);
       font-weight: var(--cbp-font-weight-medium);

From a48562170194bebf2af213a3f97e16b2cc3b72e4 Mon Sep 17 00:00:00 2001
From: Barrett Grubbs <barrettgrubbs@gmail.com>
Date: Wed, 28 Aug 2024 08:37:39 -0400
Subject: [PATCH 2/2] updates from code review

---
 .../src/components/cbp-card/cbp-card.scss     |  2 +-
 .../components/cbp-card/cbp-card.stories.tsx  | 22 +++++++++++--------
 .../src/components/cbp-expand/cbp-expand.scss |  3 ++-
 .../src/components/cbp-expand/cbp-expand.tsx  |  2 +-
 .../src/components/cbp-icon/cbp-icon.scss     |  1 +
 .../components/cbp-icon/cbp-icon.stories.tsx  |  1 -
 .../src/components/cbp-icon/cbp-icon.tsx      |  5 -----
 .../src/components/cbp-list/cbp-list.scss     |  4 ----
 8 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/packages/web-components/src/components/cbp-card/cbp-card.scss b/packages/web-components/src/components/cbp-card/cbp-card.scss
index a9048f85..352e37ea 100644
--- a/packages/web-components/src/components/cbp-card/cbp-card.scss
+++ b/packages/web-components/src/components/cbp-card/cbp-card.scss
@@ -179,7 +179,7 @@ cbp-card {
     border-color: var(--cbp-banner-card-color);
 
 
-    [slot=cbp-card-title] {
+    [slot=cbp-card-title] > * {
       background-color: var(--cbp-banner-card-color);
       color: var(--cbp-banner-card-color-title);
       font-size: var(--cbp-font-size-heading-md);
diff --git a/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx b/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx
index 8fa6d164..1f058166 100644
--- a/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx
+++ b/packages/web-components/src/components/cbp-card/cbp-card.stories.tsx
@@ -85,10 +85,10 @@ const GeneralTemplate = ({ color, title, bodyText, withIcon, context, sx }) => {
       ${context && context != 'light-inverts' ? `context=${context}` : ''}      
       ${sx ? 'sx=' + JSON.stringify(sx) : ''}
     >
-      <h4 slot="cbp-card-title">
-        ${withIcon ? `<cbp-icon name='triangle-exclamation' size='1.25rem' sx='{"display":"inline"}'></cbp-icon>` : ''}
+      <cbp-typography tag='h4' slot="cbp-card-title">
+        ${withIcon ? `<cbp-icon name='triangle-exclamation' size='1.25rem'></cbp-icon>` : ''}
         ${title}
-      </h4>
+      </cbp-typography>
       <p>${bodyText}</p>
     </cbp-card>
   `;
@@ -102,14 +102,18 @@ const DecisionTemplate = ({ title, color, bodyText, actionsLayout, actionsConfig
       ${context && context != 'light-inverts' ? `context=${context}` : ''}
       ${sx ? 'sx=' + JSON.stringify(sx) : ''}
     >
-      <h4 slot="cbp-card-title" id="card-heading-1">
-        ${withIcon ? `<cbp-icon name='triangle-exclamation' size='1.25rem' sx='{"display":"inline"}'></cbp-icon>` : ''}
+      <cbp-typography tag='h4' slot="cbp-card-title" id="card-heading-1">
+        ${withIcon ? `<cbp-icon name='triangle-exclamation' size='1.25rem'></cbp-icon>` : ''}
         ${title}
-      </h4>
+      </cbp-typography>
       <p>${bodyText}</p>  
       ${renderActions(actionsLayout, color,context, withIcon, actionsConfig)}
     </cbp-card>
   `;
+  // <h4 slot="cbp-card-title" id="card-heading-1">
+  //       ${withIcon ? `<cbp-icon name='triangle-exclamation' size='1.25rem'></cbp-icon>` : ''}
+  //       ${title}
+  //     </h4>
 };
 
 const BannerTemplate = ({ title, color, bodyText, withIcon, context, sx }) => {
@@ -120,10 +124,10 @@ const BannerTemplate = ({ title, color, bodyText, withIcon, context, sx }) => {
       ${context && context != 'light-inverts' ? `context=${context}` : ''}
       ${sx ? 'sx=' + JSON.stringify(sx) : ''}
     >
-      <h4 slot="cbp-card-title">
-        ${withIcon ? `<cbp-icon name='triangle-exclamation' size='1.25rem' sx='{"display":"inline"}'></cbp-icon>` : ''}
+      <cbp-typography tag='h4' slot="cbp-card-title">
+        ${withIcon ? `<cbp-icon name='triangle-exclamation' size='1.25rem'></cbp-icon>` : ''}
         ${title}
-      </h4>
+      </cbp-typography>
       <p>${bodyText}</p>  
     </cbp-card>
   `;
diff --git a/packages/web-components/src/components/cbp-expand/cbp-expand.scss b/packages/web-components/src/components/cbp-expand/cbp-expand.scss
index 0f6818d3..e8cfb194 100644
--- a/packages/web-components/src/components/cbp-expand/cbp-expand.scss
+++ b/packages/web-components/src/components/cbp-expand/cbp-expand.scss
@@ -52,7 +52,8 @@ cbp-expand {
   margin-bottom: var(--cbp-expand-margin-bottom);
   color:var(--cbp-expand-color);
 
-  &:not([open]) {
+  // &:not([open]) {
+  &[open] {
     --cbp-expand-rotate-icon: rotate(-180deg);
   }
 
diff --git a/packages/web-components/src/components/cbp-expand/cbp-expand.tsx b/packages/web-components/src/components/cbp-expand/cbp-expand.tsx
index dee426da..edecf847 100644
--- a/packages/web-components/src/components/cbp-expand/cbp-expand.tsx
+++ b/packages/web-components/src/components/cbp-expand/cbp-expand.tsx
@@ -87,7 +87,7 @@ export class CbpExpand {
               aria-describedby={this.headingId}
               ref={el => (this.control = el)}
             >
-              <cbp-icon name="caret-up" color="currentColor"></cbp-icon>
+              <cbp-icon name="caret-down" color="currentColor"></cbp-icon>
             </cbp-button>
           </cbp-flex-item>
 
diff --git a/packages/web-components/src/components/cbp-icon/cbp-icon.scss b/packages/web-components/src/components/cbp-icon/cbp-icon.scss
index f5a11191..8a507c23 100644
--- a/packages/web-components/src/components/cbp-icon/cbp-icon.scss
+++ b/packages/web-components/src/components/cbp-icon/cbp-icon.scss
@@ -6,6 +6,7 @@ cbp-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  vertical-align: text-top;
 
   svg {
     width: var(--cbp-icon-size);
diff --git a/packages/web-components/src/components/cbp-icon/cbp-icon.stories.tsx b/packages/web-components/src/components/cbp-icon/cbp-icon.stories.tsx
index 86afef13..6cbc5aed 100644
--- a/packages/web-components/src/components/cbp-icon/cbp-icon.stories.tsx
+++ b/packages/web-components/src/components/cbp-icon/cbp-icon.stories.tsx
@@ -13,7 +13,6 @@ export default {
         'bars',
         'book',
         'caret-down',
-        'caret-up',
         'check',
         'chevron-right',
         'circle',
diff --git a/packages/web-components/src/components/cbp-icon/cbp-icon.tsx b/packages/web-components/src/components/cbp-icon/cbp-icon.tsx
index 454d1a67..14af9481 100644
--- a/packages/web-components/src/components/cbp-icon/cbp-icon.tsx
+++ b/packages/web-components/src/components/cbp-icon/cbp-icon.tsx
@@ -60,11 +60,6 @@ export class CbpIcon {
       viewbox: "0 0 320 512",
       path: "M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z",
     },
-    'caret-up': {
-      name: "caret-up",
-      viewbox: "0 0 320 512",
-      path: "M288.7 352H31.3c-17.8 0-26.7-21.5-14.1-34.1l128.7-128.7c7.8-7.8 20.5-7.8 28.3 0l128.7 128.7c12.6 12.6 3.7 34.1-14.1 34.1z",
-    },
     'check': {
       name: "check",
       viewbox: "0 0 448 512",
diff --git a/packages/web-components/src/components/cbp-list/cbp-list.scss b/packages/web-components/src/components/cbp-list/cbp-list.scss
index 6edf423b..3a7c289b 100644
--- a/packages/web-components/src/components/cbp-list/cbp-list.scss
+++ b/packages/web-components/src/components/cbp-list/cbp-list.scss
@@ -51,10 +51,6 @@ cbp-list {
       padding-block: var(--cbp-list-item-padding-block);
     }
 
-    cbp-icon{
-      vertical-align: text-top;
-    }
-
     &[size="large"]{
     --cbp-list-font-size: var(--cbp-font-size-heading-sm);
     --cbp-list-item-line-height: var(--cbp-line-height-md);