Merge pull request #186 from US-CBP/Badge-Update

updates for badge, chip, panel, and card
US-CBP · Aug 23, 2024 · 9cbc471 · 9cbc471
2 parents efbc267 + 49d209f
commit 9cbc471
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 17 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
@@ -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
@@ -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
@@ -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":"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":"var(--cbp-space-2x)"}'></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":"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":"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":"var(--cbp-space-2x)"}'></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":"var(--cbp-space-2x)"}'></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
@@ -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;
@@ -129,6 +130,7 @@ cbp-chip {
       > .cbp-chip__label + cbp-icon {
         background-color: var(--cbp-chip-icon-color-background-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
@@ -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='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
@@ -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.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
@@ -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="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>