Merge branch 'dev' into feature/pseudo-pattern-config

Author: sghoweri

.github/CONTRIBUTING.md

@@ -2,7 +2,7 @@
 
 If you'd like to contribute to Pattern Lab Node, please do so! There is always a lot of ground to cover and something for your wheelhouse.
 
-No pull request is too small. Check out any [help wanted 🆘](https://github.com/pattern-lab/patternlab-node/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted+%3Asos%3A%22) or [good first issues 🎓](https://github.com/pattern-lab/patternlab-node/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue+%3Amortar_board%3A%22)as a good way to get your feet wet, or add some more unit tests.
+No pull request is too small. Check out any [help wanted 🆘](https://github.com/pattern-lab/patternlab-node/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted+%3Asos%3A%22) or [good first issues 🎓](https://github.com/pattern-lab/patternlab-node/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue+%3Amortar_board%3A%22) as a good way to get your feet wet, or add some more unit tests.
 
 ## Prerequisites
 

packages/core/docs/events.md

@@ -77,7 +77,7 @@ Emitted after global `data.json` and `listitems.json` are read, and the supporti
 Emitted before all data is merged prior to a Pattern's render. Global `data.json` is merged with any pattern `.json`. Global `listitems.json` is merged with any pattern `.listitems.json`.
 
 **Kind**: inner property of [<code>EVENTS</code>](#exp_module_Events--EVENTS)  
-**See**: [Pattern](https://github.com/pattern-lab/patternlab-node/blob/master/src/lib/object_factory.js#L16)  
+**See**: [Pattern](https://github.com/pattern-lab/patternlab-node/blob/master/packages/core/src/lib/object_factory.js#L16)
 **Properties**
 
 | Name       | Type                 | Description       |
@@ -92,7 +92,7 @@ Emitted before all data is merged prior to a Pattern's render. Global `data.json
 Emitted before a pattern's template, HTML, and encoded HTML files are written to their output location
 
 **Kind**: inner property of [<code>EVENTS</code>](#exp_module_Events--EVENTS)  
-**See**: [Pattern](https://github.com/pattern-lab/patternlab-node/blob/master/src/lib/object_factory.js#L16)  
+**See**: [Pattern](https://github.com/pattern-lab/patternlab-node/blob/master/packages/core/src/lib/object_factory.js#L16)
 **Properties**
 
 | Name       | Type                 | Description       |
@@ -107,7 +107,7 @@ Emitted before a pattern's template, HTML, and encoded HTML files are written to
 Emitted after a pattern's template, HTML, and encoded HTML files are written to their output location
 
 **Kind**: inner property of [<code>EVENTS</code>](#exp_module_Events--EVENTS)  
-**See**: [Pattern](https://github.com/pattern-lab/patternlab-node/blob/master/src/lib/object_factory.js#L16)  
+**See**: [Pattern](https://github.com/pattern-lab/patternlab-node/blob/master/packages/core/src/lib/object_factory.js#L16)
 **Properties**
 
 | Name       | Type                 | Description       |

packages/core/src/lib/events.js

@@ -39,23 +39,23 @@ const EVENTS = Object.freeze({
    * @desc Emitted before all data is merged prior to a Pattern's render. Global `data.json` is merged with any pattern `.json`. Global `listitems.json` is merged with any pattern `.listitems.json`.
    * @property {object} patternlab - global data store
    * @property {Pattern} pattern - current pattern
-   * @see {@link https://github.com/pattern-lab/patternlab-node/blob/master/src/lib/object_factory.js#L16|Pattern}
+   * @see {@link https://github.com/pattern-lab/patternlab-node/blob/master/packages/core/src/lib/object_factory.js#L16|Pattern}
    */
   PATTERNLAB_PATTERN_BEFORE_DATA_MERGE: 'patternlab-pattern-before-data-merge',
 
   /**
    * @desc Emitted before a pattern's template, HTML, and encoded HTML files are written to their output location
    * @property {object} patternlab - global data store
    * @property {Pattern} pattern - current pattern
-   * @see {@link https://github.com/pattern-lab/patternlab-node/blob/master/src/lib/object_factory.js#L16|Pattern}
+   * @see {@link https://github.com/pattern-lab/patternlab-node/blob/master/packages/core/src/lib/object_factory.js#L16|Pattern}
    */
   PATTERNLAB_PATTERN_WRITE_BEGIN: 'patternlab-pattern-write-begin',
 
   /**
    * @desc Emitted after a pattern's template, HTML, and encoded HTML files are written to their output location
    * @property {object} patternlab - global data store
    * @property {Pattern} pattern - current pattern
-   * @see {@link https://github.com/pattern-lab/patternlab-node/blob/master/src/lib/object_factory.js#L16|Pattern}
+   * @see {@link https://github.com/pattern-lab/patternlab-node/blob/master/packages/core/src/lib/object_factory.js#L16|Pattern}
    */
   PATTERNLAB_PATTERN_WRITE_END: 'patternlab-pattern-write-end',
 

packages/docs/src/docs/advanced-config-options.md

@@ -238,19 +238,38 @@ These template and page patterns would still be accessible via navigation.
 
 ### theme
 
-Sets the theme options for the styleguide. There are three options: 'color', 'density', and 'layout'.
+Sets the theme options for the styleguide. There are five options:
+* `"color"`
+* `"density"`
+* `"layout"`
+* `"noViewAll"` (optional)
+* `"logo"` (optional)
 
 Available values are:
 
 ```javascript
 "theme" : {
   "color" : "dark" | "light",
   "density" : "compact" | "cozy" | "comfortable",
-  "layout" : "horizontal" | "vertical"
+  "layout" : "horizontal" | "vertical",
+  "noViewAll" : true | false,
+  "logo": {
+    "text": "Pattern Lab",
+    "altText": "Pattern Lab Logo",
+    "url": "/",
+    "srcLight": "styleguide/images/pattern-lab-logo--on-light.svg",
+    "srcDark": "styleguide/images/pattern-lab-logo--on-dark.svg",
+    "width": "187",
+    "height": "185"
+  }
 }
 ```
 
-See the [initial release notes](https://github.com/pattern-lab/styleguidekit-assets-default/releases/tag/v4.0.0-alpha.2) for the theme feature for example output.
+See the [initial release notes](https://github.com/pattern-lab/styleguidekit-assets-default/releases/tag/v4.0.0-alpha.2) for the theme feature for example output on `"color"`, `'density"` and `"layout"`.
+
+`"noViewAll"` provides the possibility to hide the "View All" pages and links within the navigation.
+
+And `"logo"` lets you finetune the different aspects of the logo displayed on the left top corner of the styleguide.
 
 **default**:
 
@@ -288,8 +307,7 @@ Introduced in Pattern Lab Node v3, UIKits are a new term in the Pattern Lab [Eco
 
 - `enabled`: quickly turn on or off the building of this UIKit
 - `excludedPatternStates`: tell Pattern Lab not to include patterns with these states in this UIKit's output
-- `excludedPatternTags`: tell Pattern Lab not to include patterns with these tags in this UIKit's output
-  - [currently not supported](https://github.com/pattern-lab/patternlab-node/issues/844)
+- `excludedTags`: tell Pattern Lab not to include patterns with these tags in this UIKit's output
 
 Important details:
 

packages/docs/src/docs/pattern-documenting.md

@@ -18,7 +18,14 @@ title: Title for my pattern
 This is a *Markdown* description of my pattern.
 ```
 
-The `title` attribute is used in Pattern Lab's navigation as well as in the styleguide views. The `description` is used in the styleguide views.
+Attributes overview:
+* The `title` attribute is used in Pattern Lab's navigation as well as in the styleguide views. Format: `string`
+* Pattern `tags` has to be an array, like `tags: [new, relaunch, dev]`
+* [Pattern `states`](/docs/using-pattern-states/) are defined like `state: incomplete` and [provide a simple visual indication](/docs/using-pattern-states/)
+
+Both `tags` and `states` could be used for [not including patterns in a UIKit specific build](/docs/editing-the-configuration-options/#heading-uikits).
+
+The `description` is used in the styleguide views.
 
 Pattern documentation needs to have a `.md` file extension and match the name of the pattern it's documenting. For example, to document the following pattern:
 
@@ -46,5 +53,5 @@ We'd name our documentation file:
 
 ## Adding More Attributes to the Front Matter
 
-A future update of Pattern Lab will support more front matter attributes including: state, order, hidden, links and tags.
+A future update of Pattern Lab will support more front matter attributes including: excludeFromStyleguide, order, hidden and links.
 It will also support adding custom attributes that could be utilized by plugins. For example, GitHub issues related to patterns.

packages/docs/src/js/primary-nav.js

@@ -9,75 +9,77 @@
  * 4) If the nav dropdown trigger parent does not have an active class, add it.
  */
 (function() {
-  var navDropdownListItem = document.querySelector('.js-nav-dropdown');
-  var navLink = document.querySelectorAll('.js-nav-dropdown-trigger'); /* 1 */
+	var navDropdownListItem = document.querySelector('.js-nav-dropdown');
+	var navLink = document.querySelectorAll('.js-nav-dropdown-trigger'); /* 1 */
 
-  for (i = 0; i < navLink.length; i++) {
-    /* 1 */
+	for (i = 0; i < navLink.length; i++) {
+		/* 1 */
 
-    navLink[i].addEventListener('click', function(event) {
-      /* 2 */
-      event.preventDefault();
-      var navLinkParent = this.parentNode; /* 2 */
+		navLink[i].addEventListener('click', function(event) {
+			/* 2 */
+			event.preventDefault();
+			var navLinkParent = this.parentNode; /* 2 */
 
-      if (navLinkParent.classList.contains('is-active')) {
-        /* 3 */
-        navLinkParent.classList.remove('is-active');
-        
-        this.setAttribute("aria-expanded", "false");
-      } else {
-        /* 4 */
-        navLinkParent.classList.add('is-active');
-       
-        this.setAttribute("aria-expanded", "true");
-      }
-      
-    });
-  }
+			if (navLinkParent.classList.contains('is-active')) {
+				/* 3 */
+				navLinkParent.classList.remove('is-active');
 
-  /**
-   * Expose docs dropdown if on a docs page
-   */
-  if (window.location.href.indexOf('docs') > -1) {
-    navDropdownListItem.classList.add('is-active');
-  }
+				this.setAttribute('aria-expanded', 'false');
+			} else {
+				/* 4 */
+				navLinkParent.classList.add('is-active');
 
-  var pathName = location.pathname;
+				this.setAttribute('aria-expanded', 'true');
+			}
+		});
+	}
 
-  var navLinks = document.querySelectorAll('.c-tree-nav a');
+	/**
+	 * Expose docs dropdown if on a docs page
+	 */
+	if (window.location.href.indexOf('docs') > -1) {
+		navDropdownListItem.classList.add('is-active');
+	}
 
-  for (i = 0; i < navLinks.length; i++) {
-    var subnavLink = navLinks[i].getAttribute('href');
-    if (subnavLink == pathName) {
-      navLinks[i].classList.add('is-active');
-    }
-  }
+	var pathName = location.pathname;
 
-  /**
-   * Toggles active class on the primary nav panel
-   * 1) Select all nav triggers and cycle through them
-   * 2) On click, find the nav panel within the header
-   * 3) If the navPanel already has active class, remove it on click.
-   * 4) If the navPanel does not have an active class, add it on click.
-   */
-  var navToggle = document.querySelectorAll('.js-nav-trigger'); /* 1 */
+	var navLinks = document.querySelectorAll('.c-tree-nav a');
 
-  for (i = 0; i < navToggle.length; i++) {
-    /* 1 */
+	for (i = 0; i < navLinks.length; i++) {
+		var subnavLink = navLinks[i].getAttribute('href');
+		if (subnavLink == pathName) {
+			navLinks[i].classList.add('is-active');
+		}
+	}
 
-    navToggle[i].addEventListener('click', function(event) {
-      /* 2 */
-      event.preventDefault();
-      var navToggleParent = this.parentNode; /* 2 */
-      var navPanel = navToggleParent.querySelector('.js-nav-panel'); /* 2 */
+	/**
+	 * Toggles active class on the primary nav panel
+	 * 1) Select all nav triggers and cycle through them
+	 * 2) On click, find the nav panel within the header
+	 * 3) If the navPanel already has active class, remove it on click, as well as the aria-expanded attributes value.
+	 * 4) If the navPanel does not have an active class, add it on click, as well as the aria-expanded attributes value.
+	 */
+	var navToggle = document.querySelectorAll('.js-nav-trigger'); /* 1 */
 
-      if (navPanel.classList.contains('is-active')) {
-        /* 3 */
-        navPanel.classList.remove('is-active');
-      } else {
-        /* 4 */
-        navPanel.classList.add('is-active');
-      }
-    });
-  }
+	for (i = 0; i < navToggle.length; i++) {
+		/* 1 */
+
+		navToggle[i].addEventListener('click', function(event) {
+			/* 2 */
+			event.preventDefault();
+			var navToggleElement = this;
+			var navToggleParent = navToggleElement.parentNode; /* 2 */
+			var navPanel = navToggleParent.querySelector('.js-nav-panel'); /* 2 */
+
+			if (navPanel.classList.contains('is-active')) {
+				/* 3 */
+				navPanel.classList.remove('is-active');
+				navToggleElement.setAttribute('aria-expanded', 'false');
+			} else {
+				/* 4 */
+				navPanel.classList.add('is-active');
+				navToggleElement.setAttribute('aria-expanded', 'true');
+			}
+		});
+	}
 })();

packages/docs/src/scss/abstracts/_mixins.scss

@@ -91,6 +91,9 @@
 		z-index: 0;
 		content: attr(data-text);
 
+		// Mitigating the positioning by 4px from the left to not have the words break incorrectly (see #GH-1158)
+		margin-right: -4px;
+
 		background-image: radial-gradient(
 			$color-brand-purple 0%,
 			$color-brand-purple 60%,

packages/docs/src/scss/components/_header.scss

@@ -47,6 +47,18 @@
 .c-header__nav-btn {
 	margin-left: auto;
 
+	// Pseudo / breakout element that enables clicking/tabbing outside of the menu to close it
+	&[aria-expanded="true"]::after {
+		position: fixed;
+		top: 0;
+		left: 0;
+
+		content: "";
+
+		width: 100vw;
+		height: 100vh;
+  }
+
 	@media all and (min-width: $bp-large) {
 		display: none;
 	}

packages/edition-node-gulp/README.md

@@ -5,7 +5,7 @@
 
 # Pattern Lab Node - Gulp Edition
 
-The Gulp wrapper around [Pattern Lab Node Core](https://github.com/pattern-lab/patternlab-node/tree/master/packages/core)), the default PatternEngine, and supporting frontend assets.
+The Gulp wrapper around [Pattern Lab Node Core](https://github.com/pattern-lab/patternlab-node/tree/master/packages/core), the default PatternEngine, and supporting frontend assets.
 
 [Online Demo of Pattern Lab Output](https://demo.patternlab.io/)
 

packages/starterkit-handlebars-demo/package.json

@@ -18,7 +18,7 @@
   "bugs": {
     "url": "https://github.com/pattern-lab/patternlab-node/issues"
   },
-  "homepage": "https://github.com/pattern-lab/patternlab-node/tree/master/packages/starterkit-handebars-demo",
+  "homepage": "https://github.com/pattern-lab/patternlab-node/tree/master/packages/starterkit-handlebars-demo",
   "publishConfig": {
     "access": "public"
   },