Add ButtonGroup component

Author: jackdomleo7

src/components/ButtonGroup/ButtonGroup.spec.ts

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import ButtonGroup from './ButtonGroup.vue';
+
+describe('ButtonGroup', () => {
+  it('renders a button group', () => {
+    const wrapper = shallowMount(ButtonGroup, {
+      slots: {
+        default: '<button>Save</button><button>Edit</button><button>Delete</button>'
+      }
+    });
+
+    expect(wrapper.findAll('button')).toHaveLength(3);
+  });
+});

src/components/ButtonGroup/ButtonGroup.stories.ts

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import ButtonGroup from './ButtonGroup.vue';
+import Button from '../Button/Button.vue';
+
+const meta = {
+  title: 'Components/ButtonGroup',
+  component: ButtonGroup
+} satisfies Meta<typeof ButtonGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Group1: Story = {
+  render: (args) => ({
+    components: { ButtonGroup, Button },
+    setup() {
+      return { args };
+    },
+    template: `<ButtonGroup v-bind="args">
+      <Button status="info">Save</Button>
+      <Button status="info">Edit</Button>
+      <Button status="info">Delete</Button>
+    </ButtonGroup>`
+  })
+};
+
+export const Group2: Story = {
+  render: (args) => ({
+    components: { ButtonGroup, Button },
+    setup() {
+      const iconSrc = new URL('@/docs/assets/ChevronRight.svg', import.meta.url).href;
+      return { args, iconSrc };
+    },
+    template: `<ButtonGroup v-bind="args">
+      <Button status="info" round>Save</Button>
+      <Button status="info" round>Edit</Button>
+      <Button status="info" round>Delete</Button>
+    </ButtonGroup>`
+  })
+};
+
+export const Group3: Story = {
+  render: (args) => ({
+    components: { ButtonGroup, Button },
+    setup() {
+      const iconSrc = new URL('@/docs/assets/ChevronDown.svg', import.meta.url).href;
+      return { args, iconSrc };
+    },
+    template: `<ButtonGroup v-bind="args">
+      <Button status="info">Save</Button>
+      <Button status="info" :icon="{ src: iconSrc, position: 'icon-only' }">More</Button>
+    </ButtonGroup>`
+  })
+};

src/components/ButtonGroup/ButtonGroup.vue

@@ -0,0 +1,27 @@
+<template>
+  <div role="group" class="j-btn-group">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+.j-btn-group {
+  display: flex;
+  gap: 0;
+  flex-wrap: nowrap;
+
+  :deep(> *) {
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}
+</style>