Merge pull request #1054 from kmonahan/feature/fix-directory-naming

fix(1049): Treat folders like patterns only if they're subfolders of …

packages/core/src/lib/object_factory.js

@@ -39,7 +39,7 @@ const Pattern = function(relPath, data, patternlab) {
 
   // this is the unique name, subDir + fileName (sans extension)
   this.name = '';
-  if (info.hasDir) {
+  if (info.hasDir && info.dirLevel > 2) {
     let variant = '';
 
     if (this.fileName.indexOf('~') !== -1) {
@@ -76,23 +76,24 @@ const Pattern = function(relPath, data, patternlab) {
     .trim(); //this is the display name for the ui. strip numeric + hyphen prefixes
 
   //00-atoms if needed
-  this.patternType = this.getDirLevel(0, info);
+  this.patternType = this.getDirLevel(0);
 
   // the top-level pattern group this pattern belongs to. 'atoms'
   this.patternGroup = this.patternType.replace(patternPrefixMatcher, '');
 
   //00-colors if needed
-  this.patternSubType = this.getDirLevel(1, info);
+  this.patternSubType = this.getDirLevel(1);
 
   // the sub-group this pattern belongs to.
   this.patternSubGroup = this.patternSubType.replace(patternPrefixMatcher, ''); // 'global'
 
   // the joined pattern group and subgroup directory
-  this.flatPatternPath = info.hasDir
-    ? this.subdir
-        .replace(/[/\\]/g, '-')
-        .replace(new RegExp('-' + info.dir + '$'), '')
-    : this.subdir.replace(/[\/\\]/g, '-'); // '00-atoms-00-global'
+  this.flatPatternPath =
+    info.hasDir && info.dirLevel > 2
+      ? this.subdir
+          .replace(/[/\\]/g, '-')
+          .replace(new RegExp('-' + info.dir + '$'), '')
+      : this.subdir.replace(/[\/\\]/g, '-'); // '00-atoms-00-global'
 
   // calculated path from the root of the public directory to the generated
   // (rendered!) html file for this pattern, to be shown in the iframe
@@ -214,11 +215,8 @@ Pattern.prototype = {
     return this.engine.findPartial(partialString);
   },
 
-  getDirLevel: function(level, info) {
+  getDirLevel: function(level) {
     const items = this.subdir.split(path.sep);
-    if (info.hasDir) {
-      items.pop();
-    }
 
     if (items[level]) {
       return items[level];

packages/core/test/object_factory_tests.js

@@ -178,7 +178,7 @@ tap.test('test Pattern capitalizes patternDisplayName correctly', function(
   test.end();
 });
 
-tap.test('test Pattern get dir level no sepatated pattern directory', function(
+tap.test('test Pattern get dir level no separated pattern directory', function(
   test
 ) {
   var p = new Pattern('00-atoms/00-global/00-colors-alt.mustache', { d: 123 });
@@ -198,24 +198,36 @@ tap.test('test Pattern get dir level no sepatated pattern directory', function(
 });
 
 tap.test(
-  'test Pattern get dir level with sepatated pattern directory',
+  'test Pattern get dir level with separated pattern directory',
   function(test) {
     var p = new Pattern(
       '00-atoms/00-global/00-colors-alt/colors-alt.mustache',
       { d: 123 }
     );
     test.equals(p.getDirLevel(0, { hasDir: true, dirLevel: 3 }), '00-atoms');
     test.equals(p.getDirLevel(1, { hasDir: true, dirLevel: 3 }), '00-global');
-    test.equals(p.getDirLevel(3, { hasDir: true, dirLevel: 3 }), '');
+    test.equals(
+      p.getDirLevel(3, { hasDir: true, dirLevel: 3 }),
+      '00-colors-alt'
+    );
     var p = new Pattern('00-atoms/00-colors-alt/colors-alt.mustache', {
       d: 123,
     });
     test.equals(p.getDirLevel(0, { hasDir: true, dirLevel: 2 }), '00-atoms');
-    test.equals(p.getDirLevel(1, { hasDir: true, dirLevel: 2 }), '00-atoms');
+    test.equals(
+      p.getDirLevel(1, { hasDir: true, dirLevel: 2 }),
+      '00-colors-alt'
+    );
     test.equals(p.getDirLevel(3, { hasDir: true, dirLevel: 2 }), '');
     var p = new Pattern('00-colors-alt/colors-alt.mustache', { d: 123 });
-    test.equals(p.getDirLevel(0, { hasDir: true, dirLevel: 1 }), '');
-    test.equals(p.getDirLevel(1, { hasDir: true, dirLevel: 1 }), '');
+    test.equals(
+      p.getDirLevel(0, { hasDir: true, dirLevel: 1 }),
+      '00-colors-alt'
+    );
+    test.equals(
+      p.getDirLevel(1, { hasDir: true, dirLevel: 1 }),
+      '00-colors-alt'
+    );
     test.equals(p.getDirLevel(3, { hasDir: true, dirLevel: 1 }), '');
     test.end();
   }

packages/uikit-workshop/src/scripts/components/panels-viewer.js

@@ -106,14 +106,13 @@ export const panelsViewer = {
           const e = new XMLHttpRequest();
           // @todo: look deeper into how we can refactor this particular code block
           /* eslint-disable */
-          e.onload = (function (i, panels, patternData, iframeRequest) {
-            return function () {
-
+          e.onload = (function(i, panels, patternData, iframeRequest) {
+            return function() {
               // since non-existant files (such as .scss from plugin-tab) still return a 200, we need to instead inspect the contents
               // we look for responseText that starts with the doctype
-              let rText = this.responseText
+              let rText = this.responseText;
               if (rText.startsWith('<!DOCTYPE html>')) {
-                rText = ''
+                rText = '';
               }
 
               // use pretty to format HTML
@@ -126,7 +125,7 @@ export const panelsViewer = {
               const templateHighlighted = Prism.highlight(
                 templateFormatted,
                 Prism.languages[panels[i].name.toLowerCase()] ||
-                Prism.languages['markup']
+                  Prism.languages['markup']
                 // Prism.languages[panels[i].name.toLowerCase()],
               );