update fileIcon API + add doc + add export

components.js

@@ -4,6 +4,7 @@ export { default as BIMDataCard } from "./dist/js/BIMDataComponents/BIMDataCard.
 export { default as BIMDataCheckbox } from "./dist/js/BIMDataComponents/BIMDataCheckbox.js";
 export { default as BIMDataDropdownList } from "./dist/js/BIMDataComponents/BIMDataDropdownList.js";
 export { default as BIMDataDropdownMenu } from "./dist/js/BIMDataComponents/BIMDataDropdownMenu.js";
+export { default as BIMDataFileIcon } from "./dist/js/BIMDataComponents/BIMDataFileIcon.js";
 export { default as BIMDataIcon } from "./dist/js/BIMDataComponents/BIMDataIcon.js";
 export { default as BIMDataIllustration } from "./dist/js/BIMDataComponents/BIMDataIllustration.js";
 export { default as BIMDataInput } from "./dist/js/BIMDataComponents/BIMDataInput.js";

src/BIMDataComponents/BIMDataFileIcon/BIMDataFileIcon.vue

@@ -12,19 +12,33 @@ import icons from "./file-icons/index.js";
 
 export default {
   props: {
-    name: {
+    fileName: {
       type: String,
-      default: "unknown",
+      default: "",
     },
     size: {
-      type: [String, Number],
-      default: "35",
+      type: Number,
+      default: 35,
     },
   },
   computed: {
+    name() {
+      return this.getFileExtension(this.fileName) || "unknown";
+    },
     imageUrl() {
       return icons[`icon_${this.name}`] || icons.icon_unknown;
     },
   },
+  methods: {
+    getFileExtension(fileName = "") {
+      const match = fileName.match(/\.([0-9a-z]+$)/);
+      const extension = match && match[1];
+      if (extension && extension.toLowerCase() === "ifczip") {
+        return "ifc";
+      } else {
+        return extension;
+      }
+    },
+  },
 };
 </script>

src/BIMDataSmartComponents/BIMDataFileManager/components/FileCard/FileCard.vue

@@ -53,7 +53,7 @@
           <BIMDataIcon name="folder" size="xxl" fill color="primary" />
         </template>
         <template v-else>
-          <BIMDataFileIcon :name="getFileExtension(file)" />
+          <BIMDataFileIcon :fileName="file.name" />
         </template>
       </div>
       <div class="file-card__menu" v-if="menuDisplayed" v-clickaway="away">
@@ -107,8 +107,6 @@ import BIMDataCheckbox from "../../../../BIMDataComponents/BIMDataCheckbox/BIMDa
 import BIMDataFileIcon from "../../../../BIMDataComponents/BIMDataFileIcon/BIMDataFileIcon.vue";
 import clickaway from "../../../../BIMDataDirectives/click-away.js";
 
-import { getFileExtension } from "../../utils/files";
-
 import PieProgressSpinner from "../PieProgressSpinner.vue";
 
 export default {
@@ -231,9 +229,6 @@ export default {
         this.menuDisplayed = false;
       }
     },
-    getFileExtension(...args) {
-      return getFileExtension(...args);
-    },
     onRenameClick() {
       this.menuDisplayed = false;
       this.$emit("rename");

src/BIMDataSmartComponents/BIMDataFileManager/utils/files.js

@@ -86,14 +86,4 @@ async function downloadFiles(files, apiInfos = {}) {
   }
 }
 
-function getFileExtension(file) {
-  const match = file.name.match(/\.([0-9a-z]+$)/);
-  const extension = match && match[1];
-  if (extension && extension.toLowerCase() === "ifczip") {
-    return "ifc";
-  } else {
-    return extension;
-  }
-}
-
-export { downloadFiles, getFileExtension };
+export { downloadFiles };

src/store.js

@@ -154,6 +154,13 @@ export default new Vuex.Store({
           text: "Dropdown component shows a simple menu.",
           btn: "View dropdown menu",
         },
+        {
+          title: "FileIcon",
+          img: require("./web/assets/img/icon-icons.svg"),
+          path: "fileicon",
+          text: "FileIcon is used to provide file visual context.",
+          btn: "View FileIcon",
+        },
         {
           title: "Icons",
           img: require("./web/assets/img/icon-icons.svg"),

src/web/router/router.js

@@ -27,6 +27,7 @@ import Card from "../views/Components/Card/Card.vue";
 import Checkbox from "../views/Components/Checkbox/Checkbox.vue";
 import DropdownMenu from "../views/Components/DropdownMenu/DropdownMenu.vue";
 import DropdownList from "../views/Components/DropdownList/DropdownList.vue";
+import FileIcon from "../views/Components/FileIcon/FileIcon.vue";
 import Icons from "../views/Components/Icons/Icons.vue";
 import Illustrations from "../views/Components/Illustrations/Illustrations.vue";
 import Input from "../views/Components/Input/Input.vue";
@@ -171,6 +172,11 @@ const routes = [
         name: "dropdownmenu",
         component: DropdownMenu,
       },
+      {
+        path: "fileicon",
+        name: "fileicon",
+        component: FileIcon,
+      },
       {
         path: "icons",
         name: "icons",

src/web/views/Components/FileIcon/FileIcon.vue

@@ -0,0 +1,97 @@
+<template>
+  <main class="article article-input">
+    <div class="article-wrapper">
+      <BIMDataText component="h1" color="color-primary">{{
+        $route.name
+      }}</BIMDataText>
+      <ComponentCode :componentTitle="$route.name" language="javascript">
+        <template #module>
+          <BIMDataFileIcon :fileName="fileName" :size="+size" />
+        </template>
+
+        <template #parameters>
+          <div>
+            <BIMDataText
+              component="h5"
+              color="color-primary"
+              margin="15px 0 10px"
+              >File name</BIMDataText
+            >
+            <BIMDataInput
+              v-model="fileName"
+              placeholder="Change fileName"
+            ></BIMDataInput>
+          </div>
+          <div>
+            <BIMDataText
+              component="h5"
+              color="color-primary"
+              margin="15px 0 10px"
+              >Size</BIMDataText
+            >
+            <BIMDataInput
+              v-model="size"
+              placeholder="Change size"
+            ></BIMDataInput>
+          </div>
+        </template>
+
+        <template #import>
+          import BIMDataInput from
+          "@bimdata/design-system/dist/js/BIMDataComponents/BIMDataInput.js";
+        </template>
+
+        <template #code>
+          <pre>
+            &lt;BIMDataFileIcon
+              :fileName="{{ fileName }}"
+              :size="{{ size }}"/&gt;
+          </pre>
+        </template>
+      </ComponentCode>
+
+      <div class="m-t-12">
+        <BIMDataText component="h5" color="color-primary" margin="15px 0 0"
+          >Props:</BIMDataText
+        >
+        <BIMDataTable :columns="propsData[0]" :rows="propsData.slice(1)" />
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
+
+import BIMDataTable from "../../../../BIMDataComponents/BIMDataTable/BIMDataTable.vue";
+import BIMDataInput from "../../../../BIMDataComponents/BIMDataInput/BIMDataInput.vue";
+import BIMDataFileIcon from "../../../../BIMDataComponents/BIMDataFileIcon/BIMDataFileIcon.vue";
+import BIMDataText from "../../../../BIMDataComponents/BIMDataText/BIMDataText.vue";
+
+export default {
+  components: {
+    ComponentCode,
+    BIMDataTable,
+    BIMDataInput,
+    BIMDataFileIcon,
+    BIMDataText,
+  },
+  data() {
+    return {
+      fileName: "test.jpg",
+      size: 35,
+      // Props documentation
+      propsData: [
+        ["Props", "Type", "Default value", "Description"],
+        [
+          "fileName",
+          "String",
+          "''",
+          "The file name to get the extension from.",
+        ],
+        ["size", "Number", "35", "The size of the icon in px."],
+      ],
+    };
+  },
+};
+</script>