Merge pull request #190 from US-CBP/Dialog-update

Icon update for Panel and Card, List adjustment for icon, expand icon…
US-CBP · Aug 28, 2024 · ea74921 · ea74921
2 parents c02218f + a485621
commit ea74921
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 17 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
@@ -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
@@ -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.5rem' 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.5rem' 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.5rem' 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
@@ -52,8 +52,9 @@ cbp-expand {
   margin-bottom: var(--cbp-expand-margin-bottom);
   color:var(--cbp-expand-color);
 
-  &:not([open]) {
-    --cbp-expand-rotate-icon: rotate(-90deg);
+  // &:not([open]) {
+  &[open] {
+    --cbp-expand-rotate-icon: rotate(-180deg);
   }
 
   &:not([open]) .cbp-expand--content {

diff --git a/packages/web-components/src/components/cbp-icon/cbp-icon.scss b/packages/web-components/src/components/cbp-icon/cbp-icon.scss
@@ -6,11 +6,10 @@ cbp-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  vertical-align: text-top;
 
-  // 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
@@ -12,6 +12,7 @@ export default {
         'arrow-right',
         'bars',
         'book',
+        'caret-down',
         'check',
         'chevron-right',
         'circle',

diff --git a/packages/web-components/src/components/cbp-list/cbp-list.scss b/packages/web-components/src/components/cbp-list/cbp-list.scss
@@ -125,7 +125,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
@@ -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);