feat: Add new m365 icon, add brand icons page to docs, and refactor code

gulp/Documentation.js

@@ -12,64 +12,70 @@ var filePath = '';
 var build = '';
 var jsonData = [];
 var templateData,
-    hbsoptions = {
-      ignorePartials: true,
-      partials : {},
-      batch : [Config.paths.srcDocTemplateModulesComponents],
-      helpers : {}
-    }
+  hbsoptions = {
+    ignorePartials: true,
+    partials: {},
+    batch: [Config.paths.srcDocTemplateModulesComponents],
+    helpers: {}
+  }
 
 //
 // Clean/Delete Tasks
 // ----------------------------------------------------------------------------
 function documentationNuke(done) {
-    Plugins.del.sync([Config.paths.distDocumentation]);
-    done();
+  Plugins.del.sync([Config.paths.distDocumentation]);
+  done();
 };
 
 //
 // Build Documentation Styles
 // ----------------------------------------------------------------------------
 function documentationBuildStyles() {
-    return gulp.src(Config.paths.srcDocumentationCSS + '/' + 'docs.scss')
-            .pipe(Plugins.plumber(ErrorHandling.onErrorInPipe))
-            .pipe(Plugins.debug({
-              title: "Building Documentation SASS " + BuildConfig.fileExtension + " File"
-            }))
-            .pipe(Plugins.header(Banners.getBannerTemplate(), Banners.getBannerData()))
-            .pipe(Plugins.header(Banners.getCSSCopyRight(), Banners.getBannerData()))
-            .pipe(BuildConfig.processorPlugin().on('error', BuildConfig.compileErrorHandler))
-            .pipe(Plugins.rename('docs.css'))
-            .pipe(Plugins.autoprefixer({
-              cascade: false
-            }))
-            .pipe(Plugins.cssbeautify())
-            .pipe(Plugins.csscomb())
-            .pipe(gulp.dest(Config.paths.distDocumentationCSS))
-            .pipe(Plugins.rename('docs.min.css'))
-            .pipe(Plugins.cssMinify())
-            .pipe(Plugins.header(Banners.getBannerTemplate(), Banners.getBannerData()))
-            .pipe(Plugins.header(Banners.getCSSCopyRight(), Banners.getBannerData()))
-            .pipe(gulp.dest(Config.paths.distDocumentationCSS));
+  return gulp.src(Config.paths.srcDocumentationCSS + '/' + 'docs.scss')
+    .pipe(Plugins.plumber(ErrorHandling.onErrorInPipe))
+    .pipe(Plugins.debug({
+      title: "Building Documentation SASS " + BuildConfig.fileExtension + " File"
+    }))
+    .pipe(Plugins.header(Banners.getBannerTemplate(), Banners.getBannerData()))
+    .pipe(Plugins.header(Banners.getCSSCopyRight(), Banners.getBannerData()))
+    .pipe(BuildConfig.processorPlugin().on('error', BuildConfig.compileErrorHandler))
+    .pipe(Plugins.rename('docs.css'))
+    .pipe(Plugins.autoprefixer({
+      cascade: false
+    }))
+    .pipe(Plugins.cssbeautify())
+    .pipe(Plugins.csscomb())
+    .pipe(gulp.dest(Config.paths.distDocumentationCSS))
+    .pipe(Plugins.rename('docs.min.css'))
+    .pipe(Plugins.cssMinify())
+    .pipe(Plugins.header(Banners.getBannerTemplate(), Banners.getBannerData()))
+    .pipe(Plugins.header(Banners.getCSSCopyRight(), Banners.getBannerData()))
+    .pipe(gulp.dest(Config.paths.distDocumentationCSS));
 };
 
 //
 // Prepare handlebars files
 // ----------------------------------------------------------------------------
 function prepareHandlebars(cb) {
   var modelFiles = fs.readdirSync(Config.paths.srcDocumentationModels);
-  var jsonFile;
-  var jsonFileName;
+
 
   // Loop through DocumentationModels and parse JSON data
   for (var i = 0; i < modelFiles.length; i++) {
-    jsonFile = fs.readFileSync(Config.paths.srcDocumentationModels + '/' + modelFiles[i], 'utf8');
-    jsonFileName = modelFiles[i].replace('.json', '');
+    const jsonFile = fs.readFileSync(Config.paths.srcDocumentationModels + '/' + modelFiles[i], 'utf8');
+    const jsonFileName = modelFiles[i].replace('.json', '');
     jsonData[jsonFileName] = JSON.parse(jsonFile);
   }
   // Grab Icon data (in separate folder /src/data/) and parse data
-  jsonFile = fs.readFileSync(Config.paths.srcData + '/' + 'icons.json', 'utf8');
-  jsonData['icons'] = JSON.parse(jsonFile);
+  const iconData = fs.readFileSync(Config.paths.srcData + '/' + 'icons.json', 'utf8');
+  jsonData['icons'] = JSON.parse(iconData);
+
+  const brandIcons = fs.readFileSync(Config.paths.srcData + '/' + 'brand-icons.json', 'utf8');
+  jsonData['brandIcons'] = JSON.parse(brandIcons);
+
+  const fileTypeIcons = fs.readFileSync(Config.paths.srcData + '/' + 'file-type-icons.json', 'utf8');
+  jsonData['fileTypeIcons'] = JSON.parse(fileTypeIcons);
+
   templateData = jsonData;
   cb();
 };
@@ -79,38 +85,38 @@ function prepareHandlebars(cb) {
 // ----------------------------------------------------------------------------
 function documentationPages() {
   return gulp.src(Config.paths.srcDocsPages + "/**/index.html")
-      .pipe(Plugins.plumber(ErrorHandling.oneErrorInPipe))
-      .pipe(Plugins.debug({
-        title: "Building Documentation Page File to " + Config.paths.distDocumentation
-      }))
-      .pipe(Plugins.handlebars(templateData, hbsoptions))
-      .pipe(Plugins.fileinclude({
-        context: {
-          filePath: filePath,
-          build: build
-        }
-      }))
-      .pipe(gulp.dest(Config.paths.distDocumentation));
+    .pipe(Plugins.plumber(ErrorHandling.oneErrorInPipe))
+    .pipe(Plugins.debug({
+      title: "Building Documentation Page File to " + Config.paths.distDocumentation
+    }))
+    .pipe(Plugins.handlebars(templateData, hbsoptions))
+    .pipe(Plugins.fileinclude({
+      context: {
+        filePath: filePath,
+        build: build
+      }
+    }))
+    .pipe(gulp.dest(Config.paths.distDocumentation));
 };
 
 //
 // Build index page
 // ----------------------------------------------------------------------------
 function documentationIndexPage() {
-    return gulp.src(Config.paths.srcTemplate + '/documentation-template.html')
-        .pipe(Plugins.plumber(ErrorHandling.oneErrorInPipe))
-        .pipe(Plugins.debug({
-          title: "Building Documentation File to " + Config.paths.distDocumentation
-        }))
-        .pipe(Plugins.handlebars(templateData, hbsoptions))
-        .pipe(Plugins.fileinclude({
-          context: {
-            filePath: filePath,
-            build: build
-          }
-        }))
-        .pipe(Plugins.rename('index.html'))
-        .pipe(gulp.dest(Config.paths.distDocumentation));
+  return gulp.src(Config.paths.srcTemplate + '/documentation-template.html')
+    .pipe(Plugins.plumber(ErrorHandling.oneErrorInPipe))
+    .pipe(Plugins.debug({
+      title: "Building Documentation File to " + Config.paths.distDocumentation
+    }))
+    .pipe(Plugins.handlebars(templateData, hbsoptions))
+    .pipe(Plugins.fileinclude({
+      context: {
+        filePath: filePath,
+        build: build
+      }
+    }))
+    .pipe(Plugins.rename('index.html'))
+    .pipe(gulp.dest(Config.paths.distDocumentation));
 };
 
 //

package.json

@@ -5,7 +5,9 @@
   "description": "The front-end framework for building experiences for Office 365.",
   "license": "MIT",
   "scripts": {
-    "test": "gulp"
+    "test": "gulp",
+    "start": "gulp watch",
+    "build": "gulp"
   },
   "browserslist": [
     "last 1 version",
@@ -56,4 +58,4 @@
     "typescript": "^2.0.3",
     "walk-sync": "^0.3.0"
   }
-}
+}

src/data/brand-icons.json

@@ -0,0 +1,44 @@
+[
+  {
+    "name": "access"
+  },
+  {
+    "name": "excel"
+  },
+  {
+    "name": "infopath"
+  },
+  {
+    "name": "m365"
+  },
+  {
+    "name": "office"
+  },
+  {
+    "name": "onedrive"
+  },
+  {
+    "name": "onenote"
+  },
+  {
+    "name": "outlook"
+  },
+  {
+    "name": "powerpoint"
+  },
+  {
+    "name": "project"
+  },
+  {
+    "name": "sharepoint"
+  },
+  {
+    "name": "teams"
+  },
+  {
+    "name": "visio"
+  },
+  {
+    "name": "word"
+  }
+]

src/data/file-type-icons.json

@@ -0,0 +1,134 @@
+[
+  {
+    "name": "accdb"
+  },
+  {
+    "name": "archive"
+  },
+  {
+    "name": "audio"
+  },
+  {
+    "name": "code"
+  },
+  {
+    "name": "csv"
+  },
+  {
+    "name": "docset"
+  },
+  {
+    "name": "docx"
+  },
+  {
+    "name": "dotx"
+  },
+  {
+    "name": "email"
+  },
+  {
+    "name": "exe"
+  },
+  {
+    "name": "folder"
+  },
+  {
+    "name": "font"
+  },
+  {
+    "name": "genericfile"
+  },
+  {
+    "name": "html"
+  },
+  {
+    "name": "link"
+  },
+  {
+    "name": "listitem"
+  },
+  {
+    "name": "model"
+  },
+  {
+    "name": "mpp"
+  },
+  {
+    "name": "mpt"
+  },
+  {
+    "name": "one"
+  },
+  {
+    "name": "onepkg"
+  },
+  {
+    "name": "onetoc"
+  },
+  {
+    "name": "pdf"
+  },
+  {
+    "name": "photo"
+  },
+  {
+    "name": "potx"
+  },
+  {
+    "name": "ppsx"
+  },
+  {
+    "name": "pptx"
+  },
+  {
+    "name": "pub"
+  },
+  {
+    "name": "rtf"
+  },
+  {
+    "name": "sharedfolder"
+  },
+  {
+    "name": "spo"
+  },
+  {
+    "name": "sysfile"
+  },
+  {
+    "name": "txt"
+  },
+  {
+    "name": "vector"
+  },
+  {
+    "name": "video"
+  },
+  {
+    "name": "vsdx"
+  },
+  {
+    "name": "vssx"
+  },
+  {
+    "name": "vstx"
+  },
+  {
+    "name": "xlsx"
+  },
+  {
+    "name": "xls"
+  },
+  {
+    "name": "xltx"
+  },
+  {
+    "name": "xml"
+  },
+  {
+    "name": "xsn"
+  },
+  {
+    "name": "zip"
+  }
+]

src/documentation/pages/BrandIcons/index.html

@@ -0,0 +1,21 @@
+@@include('../../templates/modules/components/DocumentationPageHeader.html')
+<div class="docs-Styles-section" id="brand-icons">
+  <h2>Brand and File type Icons</h2>
+  <div class="docs-IconList">
+    <h3>Brand Icons</h3>
+    <ul>
+      {{#each brandIcons}}
+      {{> BrandIconPageItem this }}
+      {{/each}}
+    </ul>
+  </div>
+  <div class="docs-IconList">
+    <h3>File Type Icons</h3>
+    <ul>
+      {{#each fileTypeIcons}}
+      {{> BrandIconPageItem this }}
+      {{/each}}
+    </ul>
+  </div>
+</div>
+@@include('../../templates/modules/components/DocumentationPageFooter.html')