As a DS designer and developer, I want to have a new toggle button group component available, because it is needed in the Simple Query Builder.

ACs

• The toggle button group component is implemented according to the Figma specs and follows the behavior and accessibility principles defined in the component documentation.
• The toggle button's component-level tokens are created according to the naming convention used to style the component
• The toggle button and toggle button group are shown in Storybook according to the specifications (see below)

States

Both selected and unselected toggle buttons have the following states (as seen in the specs):

• Default state
• Hover
• Active
• Focus
• Selected
• Selected - focus
• Disabled

Storybook:

This component has its own pages in Storybook, included by alphabetical order (see structure):

• A Basic page including only the enabled toggle button controls: they allow users to enter custom text to replace the default label
• An All page including the toggle button and its disabled version
• A Group page including the toggle button group and its disabled version

Notes:

• Work on this component can be continued from an existing Pull request that was created after an investigation process

• Initial approach to tackle button grouping (currently in discussion): The grouping of the buttons will be achieved using a grouping mixin. This mixin will be internal and not advertised as a usable output. POC available in this sandbox. Implementation of the mixin to be copied and adjusted as needed: vue-components/src/styles/mixins/ButtonGroup.scss