Skip to content
This repository has been archived by the owner on Jun 18, 2024. It is now read-only.

Commit

Permalink
feat: Add new m365 icon, add brand icons page to docs, and refactor c…
Browse files Browse the repository at this point in the history 
…ode (#1290)

* add npm scripts for serve and build

* add brand icons and file type icons to local dev site

* updating cdn link

* adding missing variable

* add some items

* add m365 icons

* creating a file for cdn variables and updating imports

* removing odp, ods, and odt icons

* adding requested changeS

Co-authored-by: Micah Godbolt <mgodbolt@microsoft.com>
  • Loading branch information
@sopranopillow @micahgodbolt
sopranopillow and micahgodbolt authored Dec 9, 2022
1 parent 853373f commit 0b7f567
Show file tree
Hide file tree
Showing 14 changed files with 369 additions and 135 deletions.
126 changes: 66 additions & 60 deletions gulp/Documentation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
};
Expand All @@ -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));
};

//
Expand Down
6 changes: 4 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -56,4 +58,4 @@
"typescript": "^2.0.3",
"walk-sync": "^0.3.0"
}
}
}
44 changes: 44 additions & 0 deletions src/data/brand-icons.json
View file
Original file line number Diff line number Diff line change
@@ -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"
}
]
134 changes: 134 additions & 0 deletions src/data/file-type-icons.json
View file
Original file line number Diff line number Diff line change
@@ -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"
}
]
21 changes: 21 additions & 0 deletions src/documentation/pages/BrandIcons/index.html
View file
Original file line number Diff line number Diff line change
@@ -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')
Loading

0 comments on commit 0b7f567

Please sign in to comment.