feat(jumbotron): Convert to functional component (#932)

* feat(jumbotron): Convert to functional component

* Use FC version of jumbotron

* ESLint

* Delete jumbotron.vue

* typo fix

* Update demo.html

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update demo.html

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Merge dev into branch (#935)

* fix(docs): feedback doc in form group (#934)

* feat(b-col): restore `.offset-*` col classes + new b-container and b-row components 🍾🍻🎉 (#929)

* feat(col): BS4 column component

* feat(col): getting column working

* fixed index.js from merge

* feat(col): restore .offset-* col classes 🍾

* feat(test): added b-col test suite

* [b-col] Update to docs

* feat(b-row): New functional component

* Make b-row component available

* docs:(componentvdoc.vue): Handle pages that don't have a main component

* Rename docs page

* Rename docs/components/col/README.md to docs/components/grid/README.md

* Rename docs/components/col/index.js to docs/components/grid/index.js

* Rename docs/components/col/meta.json to docs/components/grid/meta.json

* Update index.js

* Update README.md

* feat(b-conatiner): new functional component

b-container component that supports optional fluid prop

* make b-container available

* [b-container]: ESLint

* Update meta.json

* Update README.md

* [b-row] Add no-cgutters prop

* Update README.md

* Update README.md

* Rename docs/components/grid/README.md to docs/components/layout/README.md

* Rename docs/components/grid/index.js to docs/components/layout/index.js

* Rename docs/components/grid/meta.json to docs/components/layout/meta.json

* rename /docs/grid to /docs/layout

* Update meta.json

* Update meta.json

* [b-row]: demo.html fixture

* [b-row] demo.js

* Update demo.html

* [b-row] Tests

* [b-container] demo.html

* [b-container] demo.js

* [b-container] tests

* Update container.spec.js

* docs typo

* fix(jumbotron): continer wrapper only needed in fluid mode

* fix(jumbotron): minor update

* revert(jumbotron): Wrong branch :p

* fix(docs): toggle navbar @md to keep content from wrapping

* feat(docs): add BS4 docs to Layout page

* Update jumbotron.js

* Update jumbotron.js

* Update jumbotron.spec.js

* Update demo.html

* Update jumbotron.spec.js

* Update jumbotron.spec.js

* Attempt  last part of tests

* Update demo.html

* Final tests

lib/components/index.js

@@ -36,7 +36,7 @@ import bFormInput from "./form-input.vue";
 import bFormTextarea from "./form-textarea.vue";
 import bFormFile from "./form-file.vue";
 import bFormSelect from "./form-select.vue";
-import bJumbotron from "./jumbotron.vue";
+import bJumbotron from "./jumbotron";
 import bLink from "./link";
 import bListGroup from "./list-group";
 import bListGroupItem from "./list-group-item";

lib/components/jumbotron.js

@@ -0,0 +1,94 @@
+import { mergeData } from "../utils";
+import { assign } from "../utils/object";
+import Container from './container';
+
+export const props = {
+    fluid: {
+        type: Boolean,
+        default: false
+    },
+    containerFluid: {
+        type: Boolean,
+        default: false
+    },
+    header: {
+        type: String,
+        default: null
+    },
+    headerTag: {
+        type: String,
+        default: 'h1'
+    },
+    headerLevel: {
+        type: Number,
+        default: 3
+    },
+    lead: {
+        type: String,
+        default: null
+    },
+    leadTag: {
+        type: String,
+        default: 'p'
+    },
+    tag: {
+        type: String,
+        default: 'div'
+    }
+};
+
+export default {
+    functional: true,
+    props,
+    render(h, { props, data, slots }) {
+        // The order of the conditionals matter.
+        // We are building the component markup in order.
+        let childNodes = [];
+
+        // Header
+        if (props.header || slots().header) {
+            childNodes.push(h(
+                props.headerTag,
+                {
+                    class: {
+                        [`display-${props.headerLevel}`]: Boolean(props.headerLevel)
+                    }
+                },
+                slots().header || props.header
+            ));
+        }
+
+        // Lead
+        if (props.lead || slots().lead) {
+            childNodes.push(h(
+                props.leadTag,
+                { staticClass: 'lead' },
+                slots().lead || props.lead
+            ));
+        }
+
+        // Default slot
+        if (slots().default) {
+            childNodes.push(slots().default);
+        }
+
+        // If fluid, wrap content in a container/container-fluid
+        if (props.fluid) {
+            // Children become a child of a container
+            childNodes = [h(
+                Container,
+                { props: { 'fluid': props.containerFluid } },
+                childNodes
+            )];
+        }
+        // Return the jumbotron
+        return h(
+            props.tag,
+            mergeData(data, {
+                staticClass: "jumbotron",
+                class: { 'jumbotron-fluid': props.fluid }
+            }),
+            childNodes
+        );
+    }
+};

tests/components/jumbotron.spec.js

@@ -3,4 +3,172 @@ import {loadFixture, testVM} from '../helpers';
 describe('jumbotron', async() => {
     beforeEach(loadFixture('jumbotron'));
     testVM();
-});
+
+    it("All examples should contain base class", async () => {
+        const { app: { $refs } } = window;
+        ['default','tags','level','slots','content','fluid','containerFluid'].forEach(ref => {
+           expect($refs[ref]).toHaveClass("jumbotron");
+        });
+    });
+
+    it("fluid and containerFluid should contain jumbotron-fluid  class", async () => {
+        const { app: { $refs } } = window;
+        ['fluid','containerFluid'].forEach(ref => {
+           expect($refs[ref]).toHaveClass("jumbotron-fluid");
+        });
+    });
+
+    it("All others should not contain jumbotron-fluid  class", async () => {
+        const { app: { $refs } } = window;
+        ['default','tags','level','slots','content'].forEach(ref => {
+           expect($refs[ref]).not.toHaveClass("jumbotron-fluid");
+        });
+    });
+
+    it("All examples except tags should have root elemwnt of type 'div'", async () => {
+        const { app: { $refs } } = window;
+        ['default','level','slots','content','fluid','containerFluid'].forEach(ref => {
+           expect($refs[ref]).toBeElement("div");
+        });
+        expect($refs.tags).not.toBeElement("div");
+    });
+
+    it("default should have first child h1 with content and class 'display-3'", async () => {
+        const { app: { $refs } } = window;
+        const h1 = $refs.default.children[0];
+        expect(h1).toBeDefined();
+        expect(h1).toBeElement("h1");
+        expect(h1).toHaveClass("display-3");
+        expect(h1.textContent).toContain("header prop");
+    });
+
+    it("default should have second child with tag p with class lead and have content", async () => {
+        const { app: { $refs } } = window;
+        const p = $refs.default.children[1];
+        expect(p).toBeDefined();
+        expect(p).toBeElement("p");
+        expect(p).toHaveClass("lead");
+        expect(p.textContent).toContain("lead prop");
+    });
+
+    it("default should have third child with content", async () => {
+        const { app: { $refs } } = window;
+        const p = $refs.default.children[2];
+        expect(p).toBeDefined();
+        expect(p).toBeElement("p");
+        expect(p.textContent).toContain("content");
+    });
+
+    it("slots should have first child h1 with content", async () => {
+        const { app: { $refs } } = window;
+        const h1 = $refs.slots.children[0];
+        expect(h1).toBeDefined();
+        expect(h1).toBeElement("h1");
+        expect(h1.textContent).toContain("header slot");
+    });
+
+    it("slots should have second child with tag p with class lead and have content", async () => {
+        const { app: { $refs } } = window;
+        const p = $refs.slots.children[1];
+        expect(p).toBeDefined();
+        expect(p).toBeElement("p");
+        expect(p).toHaveClass("lead");
+        expect(p.textContent).toContain("lead slot");
+    });
+
+    it("slots should have third child with content", async () => {
+        const { app: { $refs } } = window;
+        const p = $refs.slots.children[2];
+        expect(p).toBeDefined();
+        expect(p).toBeElement("p");
+        expect(p.textContent).toContain("content");
+    });
+
+    it("level should have first child h1 with content and class 'display-4'", async () => {
+        const { app: { $refs } } = window;
+        const level = $refs.level;
+        expect(level).toBeDefined();
+        const h1 = level.children[0];
+        expect(h1).toBeDefined();
+        expect(h1).toBeElement("h1");
+        expect(h1).toHaveClass("display-4");
+        expect(h1.textContent).toContain("header prop");
+    });
+
+    it("tags should have custom root tag of 'article'", async () => {
+        const { app: { $refs } } = window;
+        const tags = $refs.tags;
+        expect(tags).toBeDefined();
+        expect(tags).toBeElement("article");
+    });
+
+    it("tags should have custom header tag of 'h2' with content", async () => {
+        const { app: { $refs } } = window;
+        const header = $refs.tags.children[0];
+        expect(header).toBeDefined();
+        expect(header).toBeElement("h2");
+        expect(header).toHaveClass("display-3");
+        expect(header.textContent).toContain("header prop");
+    });
+
+    it("tags should have custom lead tag of 'div' with content and class 'lead'", async () => {
+        const { app: { $refs } } = window;
+        const lead = $refs.tags.children[1];
+        expect(lead).toBeDefined();
+        expect(lead).toBeElement("div");
+        expect(lead).toHaveClass("lead");
+        expect(lead.textContent).toContain("lead prop");
+    });
+
+    it("content should have one child with tag p and text 'content'", async () => {
+        const { app: { $refs } } = window;
+        const content = $refs.content;
+        expect(content).toBeDefined();
+        expect(content.children.length).toBe(1);
+        expect(content.children[0]).toBeElement("p");
+        expect(content.children[0].textContent).toContain("content");
+    });
+
+    it("fluid should have child with class 'container`", async () => {
+        const { app: { $refs } } = window;
+        const fluid = $refs.fluid;
+        expect(fluid).toBeDefined();
+        expect(fluid.children.length).toBe(1);
+        const container = fluid.children[0];
+        expect(container).toBeDefined();
+        expect(container).toBeElement("div");
+        expect(container).toHaveClass("container");
+    });
+
+   it("containerFluid should have child with class 'container-fluid`", async () => {
+        const { app: { $refs } } = window;
+        const fluid = $refs.containerFluid;
+        expect(fluid).toBeDefined();
+        expect(fluid.children.length).toBe(1);
+        const container = fluid.children[0];
+        expect(container).toBeDefined();
+        expect(container).toBeElement("div");
+        expect(container).toHaveClass("container-fluid");
+    });
+
+    it("fluid should have child 'container' with content", async () => {
+        const { app: { $refs } } = window;
+        const fluid = $refs.fluid;
+        const container = fluid.children[0];
+        expect(container.children.length).toBe(3);
+        expect(container.children[0].textContent).toContain("header");
+        expect(container.children[1].textContent).toContain("lead");
+        expect(container.children[2].textContent).toContain("content");
+    });
+
+    it("containerFluid should have child 'container-fluid' with content", async () => {
+        const { app: { $refs } } = window;
+        const fluid = $refs.containerFluid;
+        const container = fluid.children[0];
+        expect(container.children.length).toBe(3);
+        expect(container.children[0].textContent).toContain("header");
+        expect(container.children[1].textContent).toContain("lead");
+        expect(container.children[2].textContent).toContain("content");
+    });
+
+});

tests/fixtures/jumbotron/demo.html

@@ -1,7 +1,38 @@
 <div id="app">
-    <b-jumbotron header="BootstrapVue"
-                 lead="Bootstrap 4 Components for Vue.js 2" >
-        <p>For more information visit website</p>
-        <b-btn variant="primary" href="#">Docs</b-btn>
+    <!-- default -->
+    <b-jumbotron ref="default" header="header prop" lead="lead prop">
+        <p>content</p>
     </b-jumbotron>
+    <br>
+
+    <!-- tags -->
+    <b-jumbotron ref="tags" tag="article" header-tag="h2" header="header prop" lead-tag="div" lead="lead prop">
+        <p>content</p>
+    </b-jumbotron>
+    <br>
+
+    <!-- header level -->
+    <b-jumbotron ref="level" :header-level="4" header="header prop" lead="lead prop">
+        <p>content</p>
+    </b-jumbotron>
+    <br>
+
+    <!-- slots -->
+    <b-jumbotron ref="slots" header="header prop" lead="lead prop">
+        <template slot="header">header slot</template>
+        <template slot="lead">lead slot</template>
+        <p>content</p>
+    </b-jumbotron>
+    <br>
+
+    <!-- content only -->
+    <b-jumbotron ref="content"><p>content</p></b-jumbotron>
+    <br>
+
+    <!-- fluid only -->
+    <b-jumbotron ref="fluid" fluid header="header" lead="lead"><p>content</p></b-jumbotron>
+    <br>
+
+    <!-- containerfluid -->
+    <b-jumbotron ref="containerFluid" fluid container-fluid header="header" lead="lead"><p>content</p></b-jumbotron>
 </div>