ButtonGroup

[daniele-zurico]

As a developer I want to be able to use a ButtonGroup component so that I can easily group multiple buttons

The component should contains:

• [ ] Embedded className called dcx-button-group
• [ ] Relevant classes for shared / reusable styling
• [ ] Add the ability to specify other props (...props)

The final user will use in this way:

<ButtonGroup className="button-group" {...props}>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

behind the scenes the buttonGroup component is a div with role group:

<div role="group" ...>

Important: you don't need to reimplement the Button component given is already available in the library

Tasks:

• [ ] Add unit tests
• [ ] Add Application code with commented props
• [ ] Add Demo use of component
• [ ] Add to storybook documentation file with examples (.mdx) in a section called Form
• [ ] Add to live demo

Please follow the below to create your branch

git checkout release/1.0.0
git pull
git checkout -b 'feature/button-group'

[alexwbbr]

The base component and tests are here for a simple button group that groups buttons together into one pill shape. https://github.com/Capgemini/dcx-react-library/pull/541

However after several talks with @daniele-zurico he wishes the button group to behave a bit more like the angular material button group: https://material.angular.io/components/button-toggle/overview

where after you have clicked a button in the group a class gets added to the button the user last interacted with, which can be used to change how that button looks.

My original branch can be used as a starting point, the component would need to keep track of the button the user last clicked in the group along with adding a class to that button.

In particular, we want:

• single toggle
• multiple toggle
• onClick event that will say the elements that are currently active

[daniele-zurico]

Closed by #541