Merge pull request #194 from US-CBP/tab-update

Tab update
US-CBP · Sep 4, 2024 · 75914fb · 75914fb
2 parents 72d1b95 + f91f9d9
commit 75914fb
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 7 deletions.
diff --git a/packages/web-components/src/components/cbp-dialog/cbp-dialog.scss b/packages/web-components/src/components/cbp-dialog/cbp-dialog.scss
@@ -50,7 +50,7 @@ cbp-dialog {
     flex-direction: column;
     position: fixed;
     overflow-y: auto;
-    z-index: 9;
+    z-index: var(--cbp-z-index-level-top);
     width: var(--cbp-dialog-width);
     height: var(--cbp-dialog-height);
     max-width: 100%;

diff --git a/packages/web-components/src/components/cbp-drawer/cbp-drawer.tsx b/packages/web-components/src/components/cbp-drawer/cbp-drawer.tsx
@@ -116,7 +116,7 @@ export class CbpDrawer {
             controls={this.uid}
             context="dark-always"
           >
-            <cbp-icon name="circle-xmark"></cbp-icon>
+            <cbp-icon name="circle-xmark" size="1rem"></cbp-icon>
           </cbp-button>
 
           <slot />

diff --git a/packages/web-components/src/components/cbp-tab/cbp-tab.scss b/packages/web-components/src/components/cbp-tab/cbp-tab.scss
@@ -21,6 +21,9 @@
   --cbp-tab-color-border-focus: var(--cbp-tab-color-border-focus-dark);
   --cbp-tab-color-border-active: var(--cbp-tab-color-border-active-dark);
   --cbp-tab-color-border-selected: var(--cbp-tab-color-border-selected-dark);
+
+  --cbp-tab-color-outline-focus: var(--cbp-tab-color-outline-focus-dark);
+
 }
 
 cbp-tab {
@@ -59,6 +62,7 @@ cbp-tab {
       --cbp-tab-color: var(--cbp-tab-color-focus);
       --cbp-tab-color-bg: var(--cbp-tab-color-bg-focus);
       --cbp-tab-color-border: var(--cbp-tab-color-border-focus);
+      --cbp-button-color-outline-focus: var(--cbp-tab-color-outline-focus);
       outline-style: solid;
     }
 
@@ -71,7 +75,7 @@ cbp-tab {
   }
 
   &[color=danger] {
-    --cbp-tab-color: var(--cbp-color-danger-base);
+    --cbp-tab-color: var(--cbp-color-danger-dark);
     --cbp-tab-color-dark: var(--cbp-color-danger-light);
 
     --cbp-tab-color-hover: var(--cbp-color-danger-base);

diff --git a/packages/web-components/src/components/cbp-tabs/cbp-tabs.scss b/packages/web-components/src/components/cbp-tabs/cbp-tabs.scss
@@ -81,6 +81,9 @@
   --cbp-tab-color-border-selected-dark: var(--cbp-color-interactive-active-light);
 
   --cbp-tab-border-radius: 0;
+
+  --cbp-tab-color-outline-focus: var(--cbp-color-white);
+  --cbp-tab-color-outline-focus-dark: var(--cbp-color-black);
 }
 
 /* 

diff --git a/packages/web-components/src/components/cbp-tabs/cbp-tabs.stories.tsx b/packages/web-components/src/components/cbp-tabs/cbp-tabs.stories.tsx
@@ -10,6 +10,12 @@ export default {
     accessibilityText: {
       control: 'text',
     },
+    withIcon: {
+      control: 'boolean',
+    },
+    withBadge: {
+      control: 'boolean',
+    },
     context : {
       control: 'select',
       options: [ "light-inverts", "light-always", "dark-inverts", "dark-always"]
@@ -21,16 +27,18 @@ export default {
   },
 };
 
-function createTabs(tabs) {
-  const html = tabs.map(({ name, label, color, accessibilityText, selected }) => {
+function createTabs(tabs, withIcon, withBadge,) {
+  const html = tabs.map(({ name, label, color, accessibilityText,  selected }) => {
     return `
       <cbp-tab 
         name="${name}"
         ${color !== 'default' ? `color=${color}` : ''}
         ${accessibilityText ? `accessibility-text=${accessibilityText}}` : ''}
         ${selected == true ? 'selected' : ''}
       >
+        ${withIcon ? `<cbp-icon name='check' sx='{"padding-inline-end":"var(--cbp-space-2x)"}'></cbp-icon>` : ''}
         ${label}
+        ${withBadge ? `<cbp-badge sx='{"margin-inline-start":"var(--cbp-space-2x)"}'>22</cbp-badge>` : ''}
       </cbp-tab>
     `;
   });
@@ -47,14 +55,14 @@ function createTabPanels(tabs) {
   return html.join('');
 }
 
-const Template = ({ tabs, accessibilityText, context, sx }) => {
+const Template = ({ tabs, accessibilityText, withIcon, withBadge,context, sx }) => {
   return ` 
     <cbp-tabs
       ${accessibilityText ? `accessibility-text="${accessibilityText}"` : ''}
       ${context && context != 'light-inverts' ? `context=${context}` : ''}
       ${sx ? `sx=${JSON.stringify(sx)}` : ''}
     >
-      ${createTabs(tabs)}
+      ${createTabs(tabs, withIcon, withBadge)}
     </cbp-tabs>
     ${createTabPanels(tabs)}
  `;
@@ -71,6 +79,8 @@ Tabs.args = {
       color: 'default',
       panelContent: 'Tab panel 1 content.',
       selected: false,
+      withIcon: true,
+      withBadge: true
     },
     {
       name: 'tab2',