From 96144079d8009d145ba026bb7637d1f6d6f2559b Mon Sep 17 00:00:00 2001
From: Barrett Grubbs <barrettgrubbs@gmail.com>
Date: Fri, 23 Aug 2024 08:03:18 -0400
Subject: [PATCH 1/2] updates for badge, chip, panel, and card

---
 .../src/components/cbp-badge/cbp-badge.scss   |  2 +-
 .../src/components/cbp-card/cbp-card.scss     |  7 ++--
 .../components/cbp-card/cbp-card.stories.tsx  | 36 ++++++++++++++-----
 .../src/components/cbp-chip/cbp-chip.scss     | 10 +++---
 .../src/components/cbp-chip/cbp-chip.tsx      |  2 +-
 .../src/components/cbp-panel/cbp-panel.scss   |  2 +-
 .../cbp-panel/cbp-panel.stories.tsx           |  2 +-
 7 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/packages/web-components/src/components/cbp-badge/cbp-badge.scss b/packages/web-components/src/components/cbp-badge/cbp-badge.scss
index 43dd57e6..9c07e8cb 100644
--- a/packages/web-components/src/components/cbp-badge/cbp-badge.scss
+++ b/packages/web-components/src/components/cbp-badge/cbp-badge.scss
@@ -7,7 +7,7 @@
  */
 :root{
   --cbp-badge-color: var(--cbp-color-text-lightest);
-  --cbp-badge-color-dark: var(--cbp-color-text-darkest);
+  --cbp-badge-color-dark: var(--cbp-color-info-darker);
   --cbp-badge-color-background: var(--cbp-color-info-base);
   --cbp-badge-color-background-dark: var( --cbp-color-interactive-secondary-lighter); 
 }
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 d18651a6..a9048f85 100644
--- a/packages/web-components/src/components/cbp-card/cbp-card.scss
+++ b/packages/web-components/src/components/cbp-card/cbp-card.scss
@@ -81,6 +81,9 @@ cbp-card {
     font-weight: var(--cbp-font-weight-medium);
     font-size: var(--cbp-font-size-heading-lg);
     line-height: var(--cbp-line-height-sm);
+  }
+
+  &[variant=decision] [slot=cbp-card-title] {
     margin-bottom: var(--cbp-space-2x);
   }
 
@@ -161,7 +164,7 @@ cbp-card {
         }
   
         button, a {
-          padding-block: var(--cbp-space-3x);
+          padding-block: var(--cbp-space-2x);
           width: 100%;
         }
       }
@@ -217,7 +220,7 @@ cbp-card {
     &[color=danger] {
       --cbp-banner-card-color: var(--cbp-color-danger-dark);
       --cbp-banner-card-color-body-background: var(--cbp-color-danger-lighter);
-      --cbp-banner-card-color-title: var(--cbp-color-text-darkest);
+      --cbp-banner-card-color-title: var(--cbp-color-text-lighter);
 
       --cbp-banner-card-color-dark: var(--cbp-color-danger-light);
       --cbp-banner-card-color-body-background-dark: var(--cbp-color-danger-darker);
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 4fbf2f30..e108df33 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
@@ -33,26 +33,46 @@ export default {
   },
 };
 
-const renderActions = (layout, context, { btn1, btn2, btn3 }) => {
+const renderActions = (layout, color, context, withIcon, { btn1, btn2, btn3 }) => {
+  
+  
   if (layout === 'double') {
     return `
       <div slot="cbp-card-actions">
-        <cbp-button tag="${btn1.tag}" ${btn1.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn1.color}" context="${context}" aria-describedby="card-heading-1">${btn1.label}</cbp-button>
-        <cbp-button tag="${btn2.tag}" ${btn2.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn2.color}" context="${context}" aria-describedby="card-heading-1">${btn2.label}</cbp-button>
+        <cbp-button tag="${btn2.tag}" ${btn2.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn2.color}" context="${context}" aria-describedby="card-heading-1">
+          ${withIcon ? `<cbp-icon name='arrow-right' sx='{"display":"inline", "padding-inline-end":"0.5rem"}'></cbp-icon>` : ''}
+          ${btn2.label}
+        </cbp-button>
+        <cbp-button tag="${btn1.tag}" ${btn1.tag == 'a' ? `href="#"` : ''} fill="solid" color="${color == 'danger' ? 'danger' : btn1.color}" context="${context}" aria-describedby="card-heading-1">
+          ${withIcon ? `<cbp-icon name='check' sx='{"display":"inline", "padding-inline-end":"0.5rem"}'></cbp-icon>` : ''}
+          ${btn1.label}
+        </cbp-button>
       </div>
     `;
   } else if (layout === 'triple') {
     return `
       <div slot="cbp-card-actions">
-        <cbp-button tag="${btn1.tag}" ${btn1.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn1.color}" context="${context}" aria-describedby="card-heading-1">${btn1.label}</cbp-button>
-        <cbp-button tag="${btn2.tag}" ${btn2.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn2.color}" context="${context}" aria-describedby="card-heading-1">${btn2.label}</cbp-button>
-        <cbp-button tag="${btn3.tag}" ${btn3.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn3.color}" context="${context}" aria-describedby="card-heading-1">${btn3.label}</cbp-button>
+        <cbp-button tag="${btn3.tag}" ${btn3.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn3.color}" context="${context}" aria-describedby="card-heading-1">
+          ${withIcon ? `<cbp-icon name='eye' sx='{"display":"inline", "padding-inline-end":"0.5rem"}'></cbp-icon>` : ''} 
+          ${btn3.label}
+        </cbp-button>
+        <cbp-button tag="${btn2.tag}" ${btn2.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn2.color}" context="${context}" aria-describedby="card-heading-1">
+          ${withIcon ? `<cbp-icon name='arrow-right' sx='{"display":"inline", "padding-inline-end":"0.5rem"}'></cbp-icon>` : ''}
+          ${btn2.label}
+        </cbp-button>
+        <cbp-button tag="${btn1.tag}" ${btn1.tag == 'a' ? `href="#"` : ''} fill="solid" color="${color == 'danger' ? 'danger' : btn1.color}" context="${context}" aria-describedby="card-heading-1">
+          ${withIcon ? `<cbp-icon name='check' sx='{"display":"inline", "padding-inline-end":"0.5rem"}'></cbp-icon>` : ''}
+          ${btn1.label}
+        </cbp-button>
       </div>
     `;
   } else {
     return `
       <div slot="cbp-card-actions">
-        <cbp-button tag="${btn1.tag}" ${btn1.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn1.color}" context="${context}" aria-describedby="card-heading-1">${btn1.label}</cbp-button>
+        <cbp-button tag="${btn1.tag}" ${btn1.tag == 'a' ? `href="#"` : ''} fill="solid" color="${color == 'danger' ? 'danger' : btn1.color}" context="${context}" aria-describedby="card-heading-1">
+          ${withIcon ? `<cbp-icon name='check' sx='{"display":"inline", "padding-inline-end":"0.5rem"}'></cbp-icon>` : ''}
+          ${btn1.label}
+        </cbp-button>
       </div>
     `;
   }
@@ -87,7 +107,7 @@ const DecisionTemplate = ({ title, color, bodyText, actionsLayout, actionsConfig
         ${title}
       </h4>
       <p>${bodyText}</p>  
-      ${renderActions(actionsLayout, context, actionsConfig)}
+      ${renderActions(actionsLayout, color,context, withIcon, actionsConfig)}
     </cbp-card>
   `;
 };
diff --git a/packages/web-components/src/components/cbp-chip/cbp-chip.scss b/packages/web-components/src/components/cbp-chip/cbp-chip.scss
index 56691146..93252b82 100644
--- a/packages/web-components/src/components/cbp-chip/cbp-chip.scss
+++ b/packages/web-components/src/components/cbp-chip/cbp-chip.scss
@@ -22,7 +22,7 @@
  */
 :root { 
   --cbp-chip-color-text: var(--cbp-color-text-lightest);
-  --cbp-chip-color-text-dark: var(--cbp-color-text-darker);
+  --cbp-chip-color-text-dark: var(--cbp-color-text-darkest);
   --cbp-chip-color-text-hover: var(--cbp-color-text-lightest);
   --cbp-chip-color-text-hover-dark: var(--cbp-color-text-lightest);
   --cbp-chip-color-text-focus: var(--cbp-color-text-lightest);
@@ -40,7 +40,7 @@
   --cbp-chip-icon-color-background-focus: transparent;
   --cbp-chip-icon-color-background-focus-dark: var(--cbp-color-interactive-focus-dark);
   --cbp-chip-color-background-pressed: var(--cbp-color-interactive-selected-dark);
-  --cbp-chip-color-background-pressed-dark: var(--cbp-color-interactive-focus-light);
+  --cbp-chip-color-background-pressed-dark: var(--cbp-color-interactive-selected-light);
   
   --cbp-chip-icon-color-outline-focus: var(--cbp-color-white);
   --cbp-chip-icon-color-outline-focus-dark: transparent;
@@ -76,6 +76,7 @@ cbp-chip {
     border-radius: var(--cbp-border-radius-pill);
     text-transform: uppercase;
     line-height: var(--cbp-space-7x);
+    font-size: var(--cbp-font-size-subhead);
     font-weight: var(--cbp-font-weight-medium);
     max-width: 100%;
     white-space: nowrap;
@@ -128,8 +129,9 @@ cbp-chip {
 
       > .cbp-chip__label + cbp-icon {
         background-color: var(--cbp-chip-icon-color-background-focus);
-        border-color: var(--cbp-color-white);
-        outline: var(--cbp-border-size-md) solid var(--cbp-chip-icon-color-outline-focus);
+        // border-color: var(--cbp-color-white);
+        border: var(--cbp-space-half-x) solid var(--cbp-chip-color-background-focus);
+        // outline: var(--cbp-border-size-md) solid var(--cbp-chip-icon-color-outline-focus);
         color: var(--cbp-color-text-lightest);
         outline-offset: -4px;
       }
diff --git a/packages/web-components/src/components/cbp-chip/cbp-chip.tsx b/packages/web-components/src/components/cbp-chip/cbp-chip.tsx
index 0a6eacb9..66d90374 100644
--- a/packages/web-components/src/components/cbp-chip/cbp-chip.tsx
+++ b/packages/web-components/src/components/cbp-chip/cbp-chip.tsx
@@ -70,7 +70,7 @@ export class CbpChip {
           <span class="cbp-chip__label">
             <slot />
           </span>
-          <cbp-icon name="plus"></cbp-icon>
+          <cbp-icon name="plus" size='0.75rem'></cbp-icon>
         </button>
       </Host>
     );
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 017884d7..c3aab0e0 100644
--- a/packages/web-components/src/components/cbp-panel/cbp-panel.scss
+++ b/packages/web-components/src/components/cbp-panel/cbp-panel.scss
@@ -63,7 +63,7 @@ cbp-panel {
     & :where(h1,h2,h3,h4,h5,h6) {
       color: inherit;
       font-size: var(--cbp-font-size-heading-lg);
-      font-weight: normal;
+      font-weight: var(--cbp-font-weight-medium);
       line-height: var(--cbp-space-7x);
     }
   }
diff --git a/packages/web-components/src/components/cbp-panel/cbp-panel.stories.tsx b/packages/web-components/src/components/cbp-panel/cbp-panel.stories.tsx
index ead481f0..7963919e 100644
--- a/packages/web-components/src/components/cbp-panel/cbp-panel.stories.tsx
+++ b/packages/web-components/src/components/cbp-panel/cbp-panel.stories.tsx
@@ -62,7 +62,7 @@ const PanelTemplate = ({ role, headingLevel, header, headerId, content, ariaLabe
         variant="heading-lg"
         ${headerId ? `id="${headerId}"` : ''}
       >
-        ${showIcon ? '<cbp-icon name="star" sx=\'{"margin-right":"var(--cbp-space-4x)"}\'></cbp-icon>' : ''}${header}
+        ${showIcon ? '<cbp-icon name="star" size="1.5rem" sx=\'{"margin-right":"var(--cbp-space-4x)", "vertical-align":"text-top"}\'></cbp-icon>' : ''}${header}
       </cbp-typography
       <div class="cbp-panel__content">
         <p>${content}</p>

From 49d209f6128e94c5b9d8515af1d5f608cd2e95e5 Mon Sep 17 00:00:00 2001
From: Barrett Grubbs <barrettgrubbs@gmail.com>
Date: Fri, 23 Aug 2024 11:51:26 -0400
Subject: [PATCH 2/2] updates from code review, adding changes to link

---
 .../src/components/cbp-card/cbp-card.stories.tsx     | 12 ++++++------
 .../src/components/cbp-chip/cbp-chip.scss            |  4 ++--
 .../src/components/cbp-chip/cbp-chip.tsx             |  2 +-
 .../src/components/cbp-link/cbp-link.scss            |  2 +-
 .../src/components/cbp-panel/cbp-panel.stories.tsx   |  2 +-
 5 files changed, 11 insertions(+), 11 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 e108df33..c723d927 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
@@ -40,11 +40,11 @@ const renderActions = (layout, color, context, withIcon, { btn1, btn2, btn3 }) =
     return `
       <div slot="cbp-card-actions">
         <cbp-button tag="${btn2.tag}" ${btn2.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn2.color}" context="${context}" aria-describedby="card-heading-1">
-          ${withIcon ? `<cbp-icon name='arrow-right' sx='{"display":"inline", "padding-inline-end":"0.5rem"}'></cbp-icon>` : ''}
+          ${withIcon ? `<cbp-icon name='arrow-right' sx='{"display":"inline", "padding-inline-end":"var(--cbp-space-2x)"}'></cbp-icon>` : ''}
           ${btn2.label}
         </cbp-button>
         <cbp-button tag="${btn1.tag}" ${btn1.tag == 'a' ? `href="#"` : ''} fill="solid" color="${color == 'danger' ? 'danger' : btn1.color}" context="${context}" aria-describedby="card-heading-1">
-          ${withIcon ? `<cbp-icon name='check' sx='{"display":"inline", "padding-inline-end":"0.5rem"}'></cbp-icon>` : ''}
+          ${withIcon ? `<cbp-icon name='check' sx='{"display":"inline", "padding-inline-end":"var(--cbp-space-2x)"}'></cbp-icon>` : ''}
           ${btn1.label}
         </cbp-button>
       </div>
@@ -53,15 +53,15 @@ const renderActions = (layout, color, context, withIcon, { btn1, btn2, btn3 }) =
     return `
       <div slot="cbp-card-actions">
         <cbp-button tag="${btn3.tag}" ${btn3.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn3.color}" context="${context}" aria-describedby="card-heading-1">
-          ${withIcon ? `<cbp-icon name='eye' sx='{"display":"inline", "padding-inline-end":"0.5rem"}'></cbp-icon>` : ''} 
+          ${withIcon ? `<cbp-icon name='eye' sx='{"display":"inline", "padding-inline-end":"var(--cbp-space-2x)"}'></cbp-icon>` : ''} 
           ${btn3.label}
         </cbp-button>
         <cbp-button tag="${btn2.tag}" ${btn2.tag == 'a' ? `href="#"` : ''} fill="solid" color="${btn2.color}" context="${context}" aria-describedby="card-heading-1">
-          ${withIcon ? `<cbp-icon name='arrow-right' sx='{"display":"inline", "padding-inline-end":"0.5rem"}'></cbp-icon>` : ''}
+          ${withIcon ? `<cbp-icon name='arrow-right' sx='{"display":"inline", "padding-inline-end":"var(--cbp-space-2x)"}'></cbp-icon>` : ''}
           ${btn2.label}
         </cbp-button>
         <cbp-button tag="${btn1.tag}" ${btn1.tag == 'a' ? `href="#"` : ''} fill="solid" color="${color == 'danger' ? 'danger' : btn1.color}" context="${context}" aria-describedby="card-heading-1">
-          ${withIcon ? `<cbp-icon name='check' sx='{"display":"inline", "padding-inline-end":"0.5rem"}'></cbp-icon>` : ''}
+          ${withIcon ? `<cbp-icon name='check' sx='{"display":"inline", "padding-inline-end":"var(--cbp-space-2x)"}'></cbp-icon>` : ''}
           ${btn1.label}
         </cbp-button>
       </div>
@@ -70,7 +70,7 @@ const renderActions = (layout, color, context, withIcon, { btn1, btn2, btn3 }) =
     return `
       <div slot="cbp-card-actions">
         <cbp-button tag="${btn1.tag}" ${btn1.tag == 'a' ? `href="#"` : ''} fill="solid" color="${color == 'danger' ? 'danger' : btn1.color}" context="${context}" aria-describedby="card-heading-1">
-          ${withIcon ? `<cbp-icon name='check' sx='{"display":"inline", "padding-inline-end":"0.5rem"}'></cbp-icon>` : ''}
+          ${withIcon ? `<cbp-icon name='check' sx='{"display":"inline", "padding-inline-end":"var(--cbp-space-2x)"}'></cbp-icon>` : ''}
           ${btn1.label}
         </cbp-button>
       </div>
diff --git a/packages/web-components/src/components/cbp-chip/cbp-chip.scss b/packages/web-components/src/components/cbp-chip/cbp-chip.scss
index 93252b82..cbae53a8 100644
--- a/packages/web-components/src/components/cbp-chip/cbp-chip.scss
+++ b/packages/web-components/src/components/cbp-chip/cbp-chip.scss
@@ -129,9 +129,9 @@ cbp-chip {
 
       > .cbp-chip__label + cbp-icon {
         background-color: var(--cbp-chip-icon-color-background-focus);
-        // border-color: var(--cbp-color-white);
+        border-color: var(--cbp-color-white);
         border: var(--cbp-space-half-x) solid var(--cbp-chip-color-background-focus);
-        // outline: var(--cbp-border-size-md) solid var(--cbp-chip-icon-color-outline-focus);
+        outline: var(--cbp-border-size-md) solid var(--cbp-chip-icon-color-outline-focus);
         color: var(--cbp-color-text-lightest);
         outline-offset: -4px;
       }
diff --git a/packages/web-components/src/components/cbp-chip/cbp-chip.tsx b/packages/web-components/src/components/cbp-chip/cbp-chip.tsx
index 66d90374..edcbe7f1 100644
--- a/packages/web-components/src/components/cbp-chip/cbp-chip.tsx
+++ b/packages/web-components/src/components/cbp-chip/cbp-chip.tsx
@@ -70,7 +70,7 @@ export class CbpChip {
           <span class="cbp-chip__label">
             <slot />
           </span>
-          <cbp-icon name="plus" size='0.75rem'></cbp-icon>
+          <cbp-icon name="plus" size='var(--cbp-space-3x)'></cbp-icon>
         </button>
       </Host>
     );
diff --git a/packages/web-components/src/components/cbp-link/cbp-link.scss b/packages/web-components/src/components/cbp-link/cbp-link.scss
index f8a773c7..f6932b1e 100644
--- a/packages/web-components/src/components/cbp-link/cbp-link.scss
+++ b/packages/web-components/src/components/cbp-link/cbp-link.scss
@@ -62,7 +62,7 @@ cbp-link {
     }
 
     &:visited {
-      --cbp-link-color: var(--cbp-link-color-visited);
+      color: var(--cbp-link-color-visited); //:visited restricts what properties can be set for security reasons , setting color directly to support visible change
     }
 
     &:hover {
diff --git a/packages/web-components/src/components/cbp-panel/cbp-panel.stories.tsx b/packages/web-components/src/components/cbp-panel/cbp-panel.stories.tsx
index 7963919e..98583d0b 100644
--- a/packages/web-components/src/components/cbp-panel/cbp-panel.stories.tsx
+++ b/packages/web-components/src/components/cbp-panel/cbp-panel.stories.tsx
@@ -62,7 +62,7 @@ const PanelTemplate = ({ role, headingLevel, header, headerId, content, ariaLabe
         variant="heading-lg"
         ${headerId ? `id="${headerId}"` : ''}
       >
-        ${showIcon ? '<cbp-icon name="star" size="1.5rem" sx=\'{"margin-right":"var(--cbp-space-4x)", "vertical-align":"text-top"}\'></cbp-icon>' : ''}${header}
+        ${showIcon ? '<cbp-icon name="star" size="var(--cbp-space-6x)" sx=\'{"margin-right":"var(--cbp-space-4x)", "vertical-align":"text-top"}\'></cbp-icon>' : ''}${header}
       </cbp-typography
       <div class="cbp-panel__content">
         <p>${content}</p>