button group component

.storybook/preview.js

@@ -28,6 +28,8 @@ export const parameters = {
             ['Documentation', 'Live', 'Without style', 'Class based'],
             'Button',
             ['Documentation', 'Live', 'Without style', 'Class based'],
+            'ButtonGroup',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
             'CharacterCount',
             ['Documentation', 'Live', 'Without style', 'Class based'],
             'Checkbox',
@@ -73,17 +75,16 @@ export const parameters = {
           ],
           'Layout',
           [
-          'Accordion',
-          ['Documentation', 'Live', 'Without style', 'Class based'],
-          'Breadcrumb',
-          ['Documentation', 'Live', 'Without style', 'Class based'],
-          'Details',
-          ['Documentation', 'Live', 'Without style', 'Class based'],
-          'Tabs',
-          ['Documentation', 'Live', 'Without style', 'Class based'],
-          'Table',
-          ['Documentation', 'Live', 'Without style', 'Class based'],
-
+            'Accordion',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Breadcrumb',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Details',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Tabs',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Table',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
           ],
           'Typography',
           [

example/src/components/ButtonGroupDemo.scss

@@ -0,0 +1,9 @@
+.active-class{
+    background-color: yellow;
+}
+
+.dcx-button-group-layout--vertical {
+    display: flex;
+    flex-direction: column; 
+    align-items: flex-start; 
+ }

example/src/components/ButtonGroupDemo.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { ButtonGroup, Button } from '@capgeminiuk/dcx-react-library';
+import './ButtonGroupDemo.scss';
+
+export const ButtonGroupDemo = () => {
+  const handleClick = (
+    evt: React.MouseEvent<HTMLButtonElement>,
+    selected: (string | number)[]
+  ) => {
+    console.log('Event:', evt);
+    console.log('Selected:', selected);
+  };
+
+  return (
+    <>
+      <h2>ButtonGroup example when no type provided</h2>
+      <ButtonGroup buttonsVariant="primary" onClick={handleClick}>
+        <Button label="Button 1" id="123" />
+        <Button label="Button 2" value={'abc'} />
+        <Button label="Button 3" />
+      </ButtonGroup>
+
+      <h2>ButtonGroup example when type is Single toggle</h2>
+      <ButtonGroup buttonsVariant="secondary" type="single">
+        <Button label="Button 1" />
+        <Button label="Button 2" />
+        <Button label="Button 3" />
+      </ButtonGroup>
+
+      <h2>ButtonGroup example when type is Multiple toggle</h2>
+      <ButtonGroup type="multiple">
+        <Button label="Button 1" />
+        <Button label="Button 2" />
+        <Button label="Button 3" />
+      </ButtonGroup>
+
+      <h2>ButtonGroup example when layout is vertical</h2>
+      <ButtonGroup layout="vertical">
+        <Button label="Button 1" id="123" />
+        <Button label="Button 2" value={'abc'} />
+        <Button label="Button 3" />
+      </ButtonGroup>
+
+      <h2>
+        ButtonGroup example with multiple toggle when Id and value attributes
+        are provided
+      </h2>
+      <ButtonGroup
+        buttonsVariant="secondary"
+        type="multiple"
+        onClick={handleClick}
+      >
+        <Button label="Button 1" id="123" />
+        <Button label="Button 2" value={'abc'} />
+        <Button label="Button 3" />
+      </ButtonGroup>
+
+      <h2>ButtonGroup example with ButtonsClassname prop</h2>
+      <ButtonGroup
+        buttonsVariant="secondary"
+        type="multiple"
+        buttonsClassName="test"
+      >
+        <Button label="Button 1" id="123" />
+        <Button label="Button 2" value={'abc'} />
+        <Button label="Button 3" />
+      </ButtonGroup>
+
+      <h2>ButtonGroup example with selected prop</h2>
+      <ButtonGroup type="multiple" selected={[2, 'abc', '123']}>
+        <Button label="Button 1" id="123" />
+        <Button label="Button 2" value={'abc'} />
+        <Button label="Button 3" />
+      </ButtonGroup>
+
+      <h2>ButtonGroup example with disabled prop</h2>
+      <ButtonGroup buttonsVariant="secondary" type="multiple" disabled>
+        <Button label="Button 1" id="123" />
+        <Button label="Button 2" value={'abc'} />
+        <Button label="Button 3" />
+      </ButtonGroup>
+
+      <h2>ButtonGroup example with buttonGroupProps prop</h2>
+      <ButtonGroup buttonGroupProps={{ style: { color: 'red' } }}>
+        <Button label="Button 1" id="123" />
+        <Button label="Button 2" value={'abc'} />
+        <Button label="Button 3" />
+      </ButtonGroup>
+
+      <div style={{ marginBottom: 50 }}></div>
+    </>
+  );
+};

example/src/components/index.ts

@@ -24,3 +24,4 @@ export { ListDemo } from './ListDemo';
 export { BreadcrumbDemo } from './BreadcrumbDemo';
 export { AccordionDemo } from './AccordionDemo';
 export * from './library-candidates';
+export { ButtonGroupDemo } from './ButtonGroupDemo';

example/src/index.tsx

@@ -25,6 +25,7 @@ import {
   LinkDemo,
   ListDemo,
   AccordionDemo,
+  ButtonGroupDemo,
 } from './components';
 import './global-styles.scss';
 import { Login } from './pages/Login';
@@ -72,6 +73,7 @@ const App = () => (
         <Route path="/descriptionList" element={<DescriptionListDemo />} />
         <Route path="/breadcrumb" element={<BreadcrumbDemo />} />
         <Route path="/accordion" element={<AccordionDemo />} />
+        <Route path="/buttonGroup" element={<ButtonGroupDemo />} />
       </Routes>
     </BrowserRouter>
   </div>

src/accordion/Accordion.tsx

@@ -7,12 +7,12 @@ interface AccordionProps {
   /**
    * Allows multiple sections of the accordion to be open at the same time
    */
-  multipleOpen: boolean;
+  multipleOpen?: boolean;
 
   /**
    * Specifies which sections of the accordion should be expanded by default
    */
-  expanded: string[];
+  expanded?: string[];
 
   /**
    * Customizes the icons displayed when the accordion sections are expanded
@@ -51,8 +51,8 @@ interface AccordionProps {
 }
 
 export const Accordion = ({
-  multipleOpen,
-  expanded,
+  multipleOpen = false,
+  expanded = [],
   children,
   expandIcon,
   collapsedIcon,