feat: improved fd-tile and fd-virtualized-list

.vscode/settings.json

@@ -11,7 +11,7 @@
   },
   "debug.node.autoAttach": "on",
   "eslint.alwaysShowStatus": true,
-  "eslint.enable": false,
+  "eslint.enable": true,
   "eslint.packageManager": "yarn",
   "jest.debugMode": true,
   "jest.pathToConfig": "jest.config.js",

bili.config.js

@@ -15,8 +15,8 @@ module.exports = {
     commonjs: true
   },
   output: {
-    // Virtualized List needs CSS but we want to include it.
-    extractCSS: false
+    // This will generate a single css file for all the custom styles we need in Fundamental Vue.
+    extractCSS: true
   },
   runtimeHelpers: true,
   globals: {

src/components/Modal/Modal.vue

@@ -131,3 +131,7 @@ export default {
   }
 };
 </script>
+
+<style lang="scss">
+@import "./modal";
+</style>

src/components/Tile/Tile.vue

@@ -2,48 +2,56 @@
   <div
     class="fd-tile"
     :class="classes"
-    :role="role"
-    :aria-disabled="disabled"
-    v-fd-background-color="backgroundColor"
+    :role="isButton ? 'button' : null"
+    :aria-disabled="String(disabled)"
+    v-on="listeners"
   >
-    <div v-if="$slots.media" class="fd-tile__media">
-      <slot name="media" />
-    </div>
-    <div class="fd-tile__content">
-      <h2 v-if="title != null" class="fd-tile__title">{{ title }}</h2>
-      <p v-if="description != null">{{ description }}</p>
-    </div>
-    <div v-if="$slots.actions" class="fd-tile__actions">
-      <slot name="actions" />
-    </div>
+    <slot />
   </div>
 </template>
-
 <script>
-import backgroundColor from "./../../directives/background-color";
-
+// A tile component can be used to display information in a simple container format. This component is ideal for displaying collection data when a grid or list layout is preferred. See `fd-tile-grid` and `fd-virtualized-list`.
 export default {
   name: "FdTile",
-  directives: { "fd-background-color": backgroundColor },
   props: {
-    title: { type: String, default: null },
-    description: { type: String, default: null },
-    rowSpan: { type: Number, default: null },
-    colSpan: { type: Number, default: null },
-    backgroundColor: { type: String, default: null },
+    // If true, the file has no background color – it becomes transparent. This is used in combination with fd-virtualized-list in order to render rows. Since this prop relies on custom styles you have to include the Fundamental Vue supporting styles.
+    transparent: { type: Boolean, default: false },
+    // If true, the tile behaves like a button and emits `click` is not disabled.
     isButton: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false }
+    // Disables the tile.
+    disabled: { type: Boolean, default: false },
+    // Number of rows this tile spans when used inside `fd-tile-grid`
+    rowSpan: { type: Number, default: null },
+    // Number of columns this tile spans when used inside `fd-tile-grid`
+    colSpan: { type: Number, default: null }
+  },
+  methods: {
+    handleClick(event) {
+      if (this.disabled || !this.isButton) {
+        return;
+      }
+      // Fired only for button-tiles (`is-button` must be `true`).
+      this.$emit("click", event);
+    }
   },
   computed: {
-    role() {
-      return this.isButton ? "button" : null;
+    listeners() {
+      return {
+        ...this.$listeners,
+        click: this.handleClick
+      };
     },
     classes() {
       return [
+        this.transparent ? "fdv-tile--transparent" : "",
         this.rowSpan != null ? `fd-has-grid-row-span-${this.rowSpan}` : "",
         this.colSpan != null ? `fd-has-grid-column-span-${this.colSpan}` : ""
       ];
     }
   }
 };
 </script>
+
+<style lang="scss">
+@import "./tile";
+</style>

src/components/Tile/__tests__/Tile.test.js

@@ -1,130 +1,41 @@
-import { mount } from "@vue/test-utils";
-import Tile from "../Tile.vue";
-import Identifier from "@/components/Identifier";
+import { mount, createLocalVue } from "@vue/test-utils";
+import FundamentalVue from "./../../../index";
 
 describe("Tile", () => {
-  const title = "Title";
-  const description = "Description";
-
-  const wrapper = mount(Tile, {
-    propsData: {
-      title,
-      description
-    }
+  let wrapper;
+  beforeEach(() => {
+    const localVue = createLocalVue();
+    localVue.use(FundamentalVue);
+    wrapper = mount(
+      {
+        data() {
+          return {
+            disabled: false,
+            isButton: false
+          };
+        },
+        template: `
+      <fd-tile :is-button="isButton" :disabled="disabled">
+        <fd-tile-content>
+          <fd-tile-title>Title</fd-tile-title>
+          <p>Description</p>
+        </fd-tile-content>
+      </fd-tile>`
+      },
+      { localVue }
+    );
   });
 
   it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
-  it("renders correct props", () => {
-    expect(wrapper.find(".fd-tile__title").text()).toEqual(title);
-    expect(wrapper.find(".fd-tile__content p").text()).toEqual(description);
-  });
-
-  describe("With Background Color", () => {
-    const backgroundColor = "accent-2";
-    const wrapper = mount(Tile, {
-      propsData: {
-        title,
-        description,
-        backgroundColor
-      }
-    });
-
-    it("renders correctly", () => {
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
-    it("renders correct background color", () => {
-      expect(
-        wrapper.classes(`fd-has-background-color-${backgroundColor}`)
-      ).toBe(true);
-    });
-  });
-
-  describe("As Button", () => {
-    const wrapper = mount(Tile, {
-      propsData: {
-        title,
-        description,
-        isButton: true
-      }
-    });
-
-    it("renders correctly", () => {
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
-    it("has role as a button", () => {
-      expect(wrapper.attributes("role")).toEqual("button");
-    });
+    expect(wrapper.element).toMatchSnapshot("default tile");
   });
 
-  describe("Disabled", () => {
-    const wrapper = mount(Tile, {
-      propsData: {
-        title,
-        description,
-        disabled: true
-      }
-    });
-
-    it("renders correctly", () => {
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
-    it("is disabled", () => {
-      expect(wrapper.attributes("aria-disabled")).toEqual("true");
-    });
+  it("renders correctly when disabled", () => {
+    expect(wrapper.element).toMatchSnapshot("renders disabled correctly");
   });
 
-  describe("With Slot Media", () => {
-    const wrapper = mount(Tile, {
-      propsData: {
-        title,
-        description
-      },
-      slots: {
-        media: {
-          render(h) {
-            return h(Identifier);
-          }
-        }
-      }
-    });
-
-    it("renders correctly", () => {
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
-    it("has media slot", () => {
-      expect(wrapper.contains(".fd-tile__media")).toBe(true);
-    });
-  });
-
-  describe("Row Col Span", () => {
-    const rowSpan = 3;
-    const colSpan = 5;
-
-    const wrapper = mount(Tile, {
-      propsData: {
-        title,
-        description,
-        rowSpan,
-        colSpan
-      }
-    });
-
-    it("renders correctly", () => {
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
-    it("renders correct row & col span", () => {
-      expect(wrapper.contains(`.fd-has-grid-row-span-${rowSpan}`)).toBe(true);
-      expect(wrapper.contains(`.fd-has-grid-column-span-${colSpan}`)).toBe(
-        true
-      );
-    });
+  it("renders correctly as button", () => {
+    wrapper.vm.isButton = true;
+    expect(wrapper.element).toMatchSnapshot("button tile");
   });
 });