From 7cd2ab53a5eb3cfc8ee71dc0454f18e5130e1e32 Mon Sep 17 00:00:00 2001
From: Barrett Grubbs <barrettgrubbs@gmail.com>
Date: Wed, 11 Sep 2024 10:11:40 -0400
Subject: [PATCH 1/3] updates for button and segmented button

---
 .../src/components/cbp-button/cbp-button.scss |  4 +-
 .../cbp-segmented-button-group.scss           | 11 ++++++
 .../cbp-segmented-button-group.stories.tsx    | 37 +++++++++++++++++++
 3 files changed, 50 insertions(+), 2 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
index fa2e7866..97843e5c 100644
--- 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/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.scss b/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.scss
index 1789fde6..12ef2143 100644
--- a/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.scss
+++ b/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.scss
@@ -54,5 +54,16 @@ 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
+    [type='button'][disabled]  {
+      --cbp-button-color: var(--cbp-color-interactive-disabled-dark);
+      --cbp-button-color-bg: var(--cbp-color-interactive-disabled-light);
+      --cbp-button-color-border: var(--cbp-color-interactive-secondary-dark);
+    }
+
+    //read-only
+    
   }
 }
diff --git a/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx b/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx
index 24b58064..767c670f 100644
--- a/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx
+++ b/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx
@@ -65,3 +65,40 @@ 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,
+    },
+    {
+      label: '<cbp-icon name="pen-to-square"></cbp-icon>',
+      value: '2',
+      pressed: false,
+      disabled: false,
+    },
+    {
+      label: '<cbp-icon name="filter"></cbp-icon>',
+      value: '3',
+      pressed: false,
+      disabled: false,
+    },
+  ],
+};

From e6fd2805d22b3269c0b02e635d162cff4c6cc32c Mon Sep 17 00:00:00 2001
From: Barrett Grubbs <barrettgrubbs@gmail.com>
Date: Wed, 11 Sep 2024 12:55:48 -0400
Subject: [PATCH 2/3] updates from code review

---
 .../cbp-segmented-button-group.scss                   | 11 +++++------
 .../cbp-segmented-button-group.stories.tsx            |  7 +++++--
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.scss b/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.scss
index 12ef2143..50102606 100644
--- a/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.scss
+++ b/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.scss
@@ -56,14 +56,13 @@ cbp-segmented-button-group {
     }
 
     
-    //Disabled
-    [type='button'][disabled]  {
+    // Disabled
+    [disabled]  {
       --cbp-button-color: var(--cbp-color-interactive-disabled-dark);
       --cbp-button-color-bg: var(--cbp-color-interactive-disabled-light);
-      --cbp-button-color-border: var(--cbp-color-interactive-secondary-dark);
-    }
 
-    //read-only
-    
+      --cbp-button-color-dark: var(--cbp-color-interactive-disabled-dark);
+      --cbp-button-color-bg-dark: var(--cbp-color-interactive-disabled-light);
+    }
   }
 }
diff --git a/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx b/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx
index 767c670f..06065742 100644
--- a/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx
+++ b/packages/web-components/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 : 'default'}">${label}</cbp-button>`;
   });
   return html.join('');
 }
@@ -87,18 +87,21 @@ SegmentedButtonGroupIcons.args = {
       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"
     },
   ],
 };

From 2b7268731a52dd96782fac68c648840e30ccce7a Mon Sep 17 00:00:00 2001
From: Barrett Grubbs <barrettgrubbs@gmail.com>
Date: Wed, 11 Sep 2024 13:52:31 -0400
Subject: [PATCH 3/3] WIP

---
 .../cbp-segmented-button-group.stories.tsx                      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx b/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx
index 06065742..ca5f4de1 100644
--- a/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx
+++ b/packages/web-components/src/components/cbp-segmented-button-group/cbp-segmented-button-group.stories.tsx
@@ -24,7 +24,7 @@ export default {
 
 function generateButtons(buttons) {
   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 : 'default'}">${label}</cbp-button>`;
+    return `<cbp-button type="button" value="${value}" ${pressed == true ? 'pressed' : ''} ${disabled == true ? 'disabled' : ''} ${variant ? `variant=${variant}` : ''}">${label}</cbp-button>`;
   });
   return html.join('');
 }