feat: add CvButtonSet (carbon-design-system#1123)

* feat: add CvButtonSet and tests

* chore: add CvButtonSet stories

Co-authored-by: Lee Chase <lee.chase@uk.ibm.com>

packages/v3/src/components/CvButton/CvButton.stories.js

@@ -1,6 +1,6 @@
 import { shallowRef } from '@vue/reactivity';
 
-import CvButton from './CvButton';
+import { CvButton } from './';
 import { buttonKinds, buttonSizes } from './consts.js';
 import { storybookControlsFromProps } from '../../global/storybook-utils';
 

packages/v3/src/components/CvButton/CvButton.vue

@@ -5,8 +5,7 @@
     @click="$emit('click', $event)"
   >
     <!-- @slot Default content of button -->
-    <!-- <slot v-if="!skeleton" /> -->
-    <slot></slot>
+    <slot v-if="!skeleton" />
 
     <cv-svg
       v-if="!skeleton && icon"
@@ -67,5 +66,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss"></style>

packages/v3/src/components/CvButton/CvButtonSet.stories.js

@@ -0,0 +1,21 @@
+import { CvButtonSet, CvButton } from './';
+
+export default {
+  title: 'Components/CvButtonSet',
+  component: CvButtonSet,
+};
+
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    components: { CvButtonSet, CvButton },
+    template: `
+      <cv-button-set v-bind="$props">
+        <cv-button>One</cv-button>
+        <cv-button kind="secondary">Two</cv-button>
+        <cv-button kind="danger">Three</cv-button>
+      </cv-button-set>`,
+  };
+};
+
+export const Default = Template.bind({});

packages/v3/src/components/CvButton/CvButtonSet.vue

@@ -0,0 +1,30 @@
+<template>
+  <div
+    :class="[
+      `${carbonPrefix}--btn-set`,
+      { [`${carbonPrefix}--btn-set--stacked`]: stacked },
+    ]"
+  >
+    <!-- @slot Default content of button set, expects buttons -->
+    <slot />
+  </div>
+</template>
+
+<script>
+import { carbonPrefix } from '../../global/settings';
+
+export default {
+  name: 'CvButtonSet',
+  props: {
+    /**
+     * Button set stacked vertically
+     */
+    stacked: Boolean,
+  },
+  setup() {
+    return {
+      carbonPrefix,
+    };
+  },
+};
+</script>

packages/v3/src/components/CvButton/CvIconButton.stories.js

@@ -1,6 +1,6 @@
 import { shallowRef } from '@vue/reactivity';
 
-import CvIconButton from './CvIconButton';
+import { CvIconButton } from './';
 import { buttonKinds, buttonSizes } from './consts.js';
 import { storybookControlsFromProps } from '../../global/storybook-utils';
 

packages/v3/src/components/CvButton/CvIconButton.vue

@@ -84,5 +84,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss"></style>

packages/v3/src/components/CvButton/__tests__/CvButton.spec.js

@@ -5,7 +5,6 @@ import { CvButton } from '..';
 
 describe('CvButton', () => {
   it('renders button and slot', async () => {
-    // const onClick = jest.fn();
     const slotContent = 'slot content';
     const wrapper = shallowMount(CvButton, {
       slots: {

packages/v3/src/components/CvButton/__tests__/CvButtonSet.spec.js

@@ -0,0 +1,36 @@
+import { shallowMount } from '@vue/test-utils';
+import { carbonPrefix } from '../../../global/settings';
+
+import { CvButtonSet } from '..';
+
+describe('CvButtonSeet', () => {
+  it('renders button set and slot', async () => {
+    const slotContent = 'slot content';
+    const wrapper = shallowMount(CvButtonSet, {
+      slots: {
+        default: slotContent,
+      },
+    });
+
+    const buttonSet = wrapper.find(`.${carbonPrefix}--btn-set`);
+    expect(buttonSet).not.toBeUndefined();
+    expect(buttonSet.text()).toBe(slotContent);
+  });
+
+  it('renders button set stacked and slot', async () => {
+    const slotContent = 'slot content';
+    const wrapper = shallowMount(CvButtonSet, {
+      slots: {
+        default: slotContent,
+      },
+      props: {
+        stacked: true,
+      },
+    });
+
+    const buttonSet = wrapper.find(`.${carbonPrefix}--btn-set`);
+    expect(buttonSet).not.toBeUndefined();
+    expect(buttonSet.classes()).toContain(`${carbonPrefix}--btn-set--stacked`);
+    expect(buttonSet.text()).toBe(slotContent);
+  });
+});

packages/v3/src/components/CvButton/index.js

@@ -1,6 +1,7 @@
 import CvButton from './CvButton';
 import CvIconButton from './CvIconButton';
+import CvButtonSet from './CvButtonSet';
 import CvButtonConsts from './consts';
 
-export { CvButton, CvButtonConsts, CvIconButton };
+export { CvButton, CvButtonConsts, CvButtonSet, CvIconButton };
 export default CvButton;