Merge pull request #198 from US-CBP/button-fixes-3

updates for button and segmented button
US-CBP · Sep 11, 2024 · 70109a4 · 70109a4
2 parents 3a5d2eb + 2b72687
commit 70109a4
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 4 deletions.
diff --git a/packages/web-components/src/components/cbp-button/cbp-button.scss b/packages/web-components/src/components/cbp-button/cbp-button.scss
@@ -261,7 +261,7 @@ cbp-button {
       --cbp-button-color: var(--cbp-color-interactive-primary-dark);
       --cbp-button-color-bg-hover: var(--cbp-color-interactive-primary-dark);
       --cbp-button-color-border: var(--cbp-color-interactive-primary-dark);
-      --cbp-button-color-border-hover: var(--cbp-color-interactive-primary-darker);
+      --cbp-button-color-border-hover: var(--cbp-color-interactive-primary-dark);
 
       --cbp-button-color-dark: var(--cbp-color-interactive-primary-light);
       --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-primary-light);
@@ -278,7 +278,7 @@ cbp-button {
       --cbp-button-color-dark: var(--cbp-color-interactive-secondary-lighter);
       --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-secondary-lighter);
       --cbp-button-color-border-dark: var(--cbp-color-interactive-secondary-lighter);
-      --cbp-button-color-border-hover-dark: var(--cbp-color-interactive-secondary-darker);
+      --cbp-button-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);
     }
 
     &[color=tertiary] {

diff --git a/.../web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.scss b/.../web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.scss
@@ -54,5 +54,15 @@ cbp-segmented-button-group {
       --cbp-button-color-dark: var(--cbp-color-text-darkest);
       --cbp-button-color-bg-dark: var(--cbp-color-interactive-selected-light);
     }
+
+
+    // Disabled
+    [disabled]  {
+      --cbp-button-color: var(--cbp-color-interactive-disabled-dark);
+      --cbp-button-color-bg: var(--cbp-color-interactive-disabled-light);
+
+      --cbp-button-color-dark: var(--cbp-color-interactive-disabled-dark);
+      --cbp-button-color-bg-dark: var(--cbp-color-interactive-disabled-light);
+    }
   }
 }
diff --git a/...mponents/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx b/...mponents/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx
@@ -23,8 +23,8 @@ export default {
 };
 
 function generateButtons(buttons) {
-  const html = buttons.map(({ label, value, pressed, disabled }) => {
-    return `<cbp-button type="button" value="${value}" ${pressed == true ? 'pressed' : ''} ${disabled == true ? 'disabled' : ''}>${label}</cbp-button>`;
+  const html = buttons.map(({ label, value, pressed, disabled, variant }) => {
+    return `<cbp-button type="button" value="${value}" ${pressed == true ? 'pressed' : ''} ${disabled == true ? 'disabled' : ''} ${variant ? `variant=${variant}` : ''}">${label}</cbp-button>`;
   });
   return html.join('');
 }
@@ -65,3 +65,43 @@ SegmentedButtonGroup.args = {
     },
   ],
 };
+
+const IconTemplate = ({ buttons, multiple, accessibilityText, disabled, sx }) => {
+  return ` 
+        <cbp-segmented-button-group
+          ${multiple ? `multiple=${multiple}` : ''}
+          ${accessibilityText ? `accessibility-text=${accessibilityText}` : ''}
+          ${disabled ? `disabled=${disabled}` : ''}
+          ${sx ? `sx=${JSON.stringify(sx)}` : ''}
+        >
+          ${generateButtons(buttons)}
+        </cbp-segmented-button-group>
+      `;
+};
+
+export const SegmentedButtonGroupIcons = IconTemplate.bind({});
+SegmentedButtonGroupIcons.args = {
+  buttons: [
+    {
+      label: '<cbp-icon name="user"></cbp-icon>',
+      value: '1',
+      pressed: false,
+      disabled: false,
+      variant: "square"
+    },
+    {
+      label: '<cbp-icon name="pen-to-square"></cbp-icon>',
+      value: '2',
+      pressed: false,
+      disabled: false,
+      variant: "square"
+    },
+    {
+      label: '<cbp-icon name="filter"></cbp-icon>',
+      value: '3',
+      pressed: false,
+      disabled: false,
+      variant: "square"
+    },
+  ],
+};