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"
+ },
+ ],
+};