Merge pull request #414 from lyytioy/next

Version 1.5.2

package.json

@@ -2,7 +2,7 @@
   "name": "@lyyti/design-system",
   "description": "Lyyti Design System",
   "homepage": "https://lyytioy.github.io/lyyti-design-system",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "engines": {
     "node": "^18",
     "npm": "^8"

src/components/ToggleButtonGroup.tsx

@@ -1,8 +1,7 @@
-import { useTheme } from '@mui/material/styles';
 import { ToggleButtonGroup as MuiToggleButtonGroup, ToggleButton as MuiToggleButton, type SxProps as MuiSxProps, type ToggleButtonGroupProps as MuiToggleButtonGroupProps } from "@mui/material"
 
 export interface ToggleButtonOption {
-    value: number | string;
+    value: string;
     text: string;
     sx?: MuiSxProps;
     ariaLabel?: string;
@@ -26,23 +25,22 @@ const ToggleButtonGroup = ({
   testId,
   ...props
 }: ToggleButtonGroupProps) => {
-  const theme = useTheme();
-
   return <MuiToggleButtonGroup
     data-testid={testId}
     value={value}
     exclusive
     onChange={onChange}
     aria-label={ariaLabel ?? 'toggle button group'}
     sx={{
-      color: `${theme.palette.primary.main} !important`,
+      color: theme => theme.palette.primary.main,
       height: '40px',
-      border: `1px solid ${theme.palette.primary.main}`,
+      border: theme => `1px solid ${theme.palette.primary.main}`,
       '& .MuiToggleButton-root': {
-        width: '130px', color:theme.palette.primary.main 
+        width: '130px', 
+        color: theme => theme.palette.primary.main 
       },
       '& .Mui-selected, & .Mui-selected:hover': {
-        bgcolor: `${theme.palette.primary.main} !important`,
+        bgcolor: theme => `${theme.palette.primary.main} !important`,
         color: 'white !important',
       },
       ...sx
@@ -56,7 +54,7 @@ const ToggleButtonGroup = ({
       value={option.value} 
       aria-label={option.ariaLabel ?? `toggle button ${option.value}`}
     >
-      {option.value}
+      {option.text}
     </MuiToggleButton>
     )}
   </MuiToggleButtonGroup>

stories/Inputs/ToggleButtonGroup.stories.tsx

@@ -1,11 +1,11 @@
 import { Story, Meta } from '@storybook/react/types-6-0';
-import ToggleButtonGroup, { ToggleButtonGroupProps } from '../../src/components/ToggleButtonGroup';
+import ToggleButtonGroup, { ToggleButtonGroupProps, ToggleButtonOption } from '../../src/components/ToggleButtonGroup';
 
-const options = [
-  { value: 1, text: 'Option 1' },
-  { value: 2, text: 'Option 2' },
-  { value: 3, text: 'Option 3' },
-  { value: 4, text: 'Option 4' }
+const options: ToggleButtonOption[] = [
+  { value: '1', text: 'Option 1' },
+  { value: '2', text: 'Option 2' },
+  { value: '3', text: 'Option 3' },
+  { value: '4', text: 'Option 4' }
 ];
 
 export default {
@@ -18,7 +18,6 @@ export default {
 
 const Template: Story<ToggleButtonGroupProps> = (args) => <ToggleButtonGroup {...args} />;
 
-
 export const Basic = Template.bind({});
 Basic.args = {
   options: options,