[Cl-10] Button group (#3031)

* chore: setup initial bit-button-group using bitButton as template

* feat: working radio group with preliminary styling

* chore: cleanup

* feat: implement proper basic styling

* feat: implement focus handling and keyboard navigation

* feat: implement size support

* feat: add labeling support

* feat: add input for button selection

* feat: implement output handler on radio button interaction

* feat: implement internal input/output seletion handling

* feat: add external input support

* feat: add external output support

* chore: simplify storybook example a bit

* fix: module imports

* refactor: simplify both components

* feat: remove size

* chore: rename button-group to toggle-group

* chore: rename toggle-group-element to toggle-group-button

* chore: update story example

* fix: compatibility with web vault

* fix: imports in tests after rename

* fix: remove unnecessary inject decorator

* fix: clarify field names and html tags

* feat: add badge centering fix

* feat: set pointer cursor on label

* chore: comment on special css rules

* chore: remove focusable option from button

* Update libs/components/src/toggle-group/toggle-group-button.component.ts

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* chore: rename to `bit-toggle`

* fix: remove unecessary aria label function

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

libs/components/src/toggle-group/toggle-group.stories.ts

@@ -0,0 +1,54 @@
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+import { BadgeModule } from "../badge";
+
+import { ToggleGroupComponent } from "./toggle-group.component";
+import { ToggleComponent } from "./toggle.component";
+
+export default {
+  title: "Component Library/Toggle Group",
+  component: ToggleGroupComponent,
+  args: {
+    selected: "all",
+  },
+  decorators: [
+    moduleMetadata({
+      declarations: [ToggleGroupComponent, ToggleComponent],
+      imports: [BadgeModule],
+    }),
+  ],
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=1881%3A17157",
+    },
+  },
+} as Meta;
+
+const Template: Story<ToggleGroupComponent> = (args: ToggleGroupComponent) => ({
+  props: args,
+  template: `
+    <bit-toggle-group [(selected)]="selected" aria-label="People list filter">
+      <bit-toggle value="all">
+        All <span bitBadge badgeType="info">3</span>
+      </bit-toggle>
+
+      <bit-toggle value="invited">
+        Invited
+      </bit-toggle>
+
+      <bit-toggle value="accepted">
+        Accepted <span bitBadge badgeType="info">2</span>
+      </bit-toggle>
+
+      <bit-toggle value="deactivated">
+        Deactivated
+      </bit-toggle>
+    </bit-toggle-group>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  selected: "all",
+};