Merge pull request #792 from OfficeDev/leddie24/rtl-output-fix

Add RTL support for directional MDL2 icons
OfficeDev · Sep 8, 2016 · 180ac15 · 180ac15
2 parents 2eab5b1 + 14c9ba5
commit 180ac15
Show file tree

Hide file tree

Showing 6 changed files with 345 additions and 389 deletions.
diff --git a/gulp/Documentation.js b/gulp/Documentation.js
@@ -62,11 +62,15 @@ gulp.task('prepare-handlebars', function(cb) {
   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', '');
     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);
   templateData = jsonData;
   cb();
 });

diff --git a/gulp/modules/Config.js b/gulp/modules/Config.js
@@ -35,6 +35,7 @@ var Config = function() {
   this.paths.bundlePath = this.paths.dist + '/bundles';
 
   this.paths.srcSamples = this.paths.src + '/samples';
+  this.paths.srcData = this.paths.src + '/data';
   this.paths.srcSass = this.paths.src + '/sass';
   this.paths.srcDocs = this.paths.src + '/documentation';
   this.paths.srcDocsPages = this.paths.srcDocs + '/pages';

diff --git a/src/documentation/pages/Icons/index.html b/src/documentation/pages/Icons/index.html
@@ -4,6 +4,12 @@ <h2>Icons</h2>
   <p>Fabric uses a custom font for its iconography. This font contains glyphs that you can scale, color, and style in any way. You can even flip them for right-to-left localization. To use the icons, combine the base ms-Icon class with a modifier class for the specific icon.</p>
   <pre><code class="hljs">&#x3C;i class=&#x22;ms-Icon ms-Icon--Mail&#x22; aria-hidden=&#x22;true&#x22;&#x3E;&#x3C;/i&#x3E;</code></pre>
   <p>Note the <code>aria-hidden</code> attribute, which prevents screen readers from reading the icon. In cases where meaning is conveyed only through the icon, such as an icon-only navigation bar, be sure to apply an aria-label to the button for accessibility.</p>
-  @@include('../../templates/modules/content/icon-page.html')
+  	<div class="docs-IconList clearfix">
+    	<ul>
+    		{{#each icons.glyphs}}
+	            {{> IconPageItem this }}
+	        {{/each}}
+    	</ul>
+	</div>
 </div>
 @@include('../../templates/modules/components/DocumentationPageFooter.html')
diff --git a/src/documentation/templates/modules/components/IconPageItem.hbs b/src/documentation/templates/modules/components/IconPageItem.hbs
@@ -0,0 +1 @@
+<li><i class="ms-Icon ms-Icon--{{friendlyName}}"></i>ms-Icon--{{friendlyName}}</li>