feat(btn-group): functional component for button-group (#822)

* feat(btn-group): functional component

* fix(aria): rename aria-role to role

examples/button-group/demo.html

@@ -2,26 +2,26 @@
     <div class="row">
 
         <div class="col">
-            <b-button-group vertical>
-                <b-button variant="success">Top</b-button>
-                <b-button variant="info">Middle</b-button>
-                <b-button variant="primary">Bottom</b-button>
-            </b-button-group>
+            <b-btn-group ref="vertical" vertical>
+                <b-btn variant="success">Top</b-btn>
+                <b-btn variant="info">Middle</b-btn>
+                <b-btn variant="primary">Bottom</b-btn>
+            </b-btn-group>
         </div>
 
         <div class="col">
-            <b-button-group>
-                <b-button>Left</b-button>
-                <b-button>Middle</b-button>
-                <b-button>Right</b-button>
-            </b-button-group>
+            <b-btn-group ref="basic">
+                <b-btn>Left</b-btn>
+                <b-btn>Middle</b-btn>
+                <b-btn>Right</b-btn>
+            </b-btn-group>
         </div>
         <div class="col">
-            <b-button-group size="sm">
-                <b-button>Left</b-button>
-                <b-button>Middle</b-button>
-                <b-button>Right</b-button>
-            </b-button-group>
+            <b-btn-group ref="size" size="sm">
+                <b-btn>Left</b-btn>
+                <b-btn>Middle</b-btn>
+                <b-btn>Right</b-btn>
+            </b-btn-group>
         </div>
     </div>
 </div>

lib/components/button-group.js

@@ -0,0 +1,41 @@
+import { mergeData } from "../utils";
+import { arrayIncludes } from "../utils/array";
+
+export const props = {
+    vertical: {
+        type: Boolean,
+        default: false
+    },
+    size: {
+        type: String,
+        default: null,
+        validator: size => arrayIncludes(["sm", "", "lg"], size)
+    },
+    tag: {
+        type: String,
+        default: "div"
+    },
+    ariaRole: {
+        type: String,
+        default: "group"
+    }
+};
+
+export default {
+    functional: true,
+    props,
+    render(h, { props, data, children }) {
+        return h(
+            props.tag,
+            mergeData(data, {
+                staticClass: "btn-group",
+                class: {
+                    "btn-group-vertical": props.vertical,
+                    [`btn-group-${props.size}`]: Boolean(props.size)
+                },
+                attrs: { "role": props.ariaRole }
+            }),
+            children
+        );
+    }
+};

lib/components/index.js

@@ -3,7 +3,7 @@ import bBadge from './badge';
 import bBreadcrumb from './breadcrumb.vue';
 import bButton from './button.vue';
 import bButtonToolbar from './button-toolbar.vue';
-import bButtonGroup from './button-group.vue';
+import bButtonGroup from './button-group';
 import bInputGroup from './input-group.vue';
 import bInputGroupAddon from './input-group-addon.vue';
 import bInputGroupButton from './input-group-button.vue';

tests/components/button-group.spec.js

@@ -1,6 +1,28 @@
-import {loadFixture, testVM} from '../helpers';
+import { loadFixture, testVM } from "../helpers";
 
-describe('button-group', async() => {
-    beforeEach(loadFixture('button-group'));
+describe("button-group", async () => {
+    beforeEach(loadFixture("button-group"));
     testVM();
-});
+
+    const btnRefs = ["basic", "vertical", "size"];
+
+    it("should contain base class", async () => {
+        const { app: { $refs } } = window;
+
+        btnRefs.forEach(ref => {
+            expect($refs[ref]).toHaveClass("btn-group");
+        });
+    });
+
+    it("should apply vertical class", async () => {
+        const { app: { $refs } } = window;
+
+        expect($refs.vertical).toHaveClass("btn-group-vertical");
+    });
+
+    it("should apply size class", async () => {
+        const { app: { $refs } } = window;
+
+        expect($refs.size).toHaveClass("btn-group-sm");
+    });
+});