Merge pull request #200 from US-CBP/notice-ux-review-update

update notice title based on ux review
US-CBP · Sep 12, 2024 · 0c6c1c8 · 0c6c1c8
2 parents e11068a + 1ddc54b
commit 0c6c1c8
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/packages/web-components/src/components/cbp-notice/cbp-notice.scss b/packages/web-components/src/components/cbp-notice/cbp-notice.scss
@@ -5,6 +5,8 @@
 :root {  
   --cbp-notice-color-text: var(--cbp-color-text-darkest);
   --cbp-notice-color-text-dark: var(--cbp-color-text-lightest);
+  --cbp-notice-color-title: var(--cbp-color-text-darker);
+  --cbp-notice-color-title-dark: var(--cbp-color-text-lighter);
   --cbp-notice-color-background: var(--cbp-color-info-lighter);
   --cbp-notice-color-background-dark: var(--cbp-color-info-dark);
   --cbp-notice-color-border: var(--cbp-color-info-base);
@@ -15,6 +17,7 @@
 [data-cbp-theme=light] cbp-notice[context*=dark]:not([context=light-always]),
 [data-cbp-theme=dark] cbp-notice:not([context=dark-inverts]):not([context=light-always]) {
   --cbp-notice-color-text: var(--cbp-notice-color-text-dark);
+  --cbp-notice-color-title: var(--cbp-notice-color-title-dark);
   --cbp-notice-color-background: var(--cbp-notice-color-background-dark);
   --cbp-notice-color-border: var(--cbp-notice-color-border-dark);
 }
@@ -30,6 +33,12 @@ cbp-notice {
   [slot=cbp-notice-title]{
     display: inline-block;
     margin-block-end: var(--cbp-space-2x); 
+
+    *{
+      font-weight: var(--cbp-font-weight-bold);
+      color: var(--cbp-notice-color-title);
+      margin-bottom: 0;
+    }
   }
 
   &[color="success"]{

diff --git a/packages/web-components/src/components/cbp-notice/cbp-notice.stories.tsx b/packages/web-components/src/components/cbp-notice/cbp-notice.stories.tsx
@@ -38,8 +38,8 @@ export default {
         ${context && context != 'light-inverts' ? `context=${context}` : ''}
         ${sx ? `sx=${JSON.stringify(sx)}` : ''}
       >
-        <cbp-typography tag='h4' slot="cbp-notice-title" context=${context}>
-            ${withIcon ? `<cbp-icon name='circle-info' size='1.25rem'></cbp-icon>` : ''}
+        <cbp-typography tag='p' slot="cbp-notice-title" context=${context}>
+            ${withIcon ? `<cbp-icon name='circle-info' size='1.25rem' sx='{"vertical-align":"bottom"}'></cbp-icon>` : ''}
             ${title}
         </cbp-typography>
         ${content}