feat: add the ability to disable Pattern Lab viewall links in the navigation

Author: sghoweri

packages/uikit-workshop/.patternlabrc.example.js

@@ -2,4 +2,5 @@
 
 module.exports = {
   // buildDir: __dirname + '/www/pattern-lab',
+  noViewAll: true, // uncomment to disable displaying viewAll links in Pattern Lab
 };

packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js

@@ -12,12 +12,15 @@ const SubSubList = props => {
   const { children, category, elem } = props;
   const reorderedChildren = [];
 
-  const nonViewAllItems = children.filter(
-    item =>
-      item.patternName !== 'View All' && !item.patternName.includes(' Docs')
-  );
-  // const nonViewAllItems = children.filter((item => (item.patternName !== 'View All')));
-  const viewAllItems = children.filter(item => item.patternName === 'View All');
+  const nonViewAllItems = elem.noViewAll
+    ? children.filter(item => item.patternName !== 'View All')
+    : children.filter(
+        item =>
+          item.patternName !== 'View All' && !item.patternName.includes(' Docs')
+      );
+  const viewAllItems = elem.noViewAll
+    ? []
+    : children.filter(item => item.patternName === 'View All');
 
   reorderedChildren.push(...viewAllItems, ...nonViewAllItems);
 
@@ -419,6 +422,10 @@ class Nav extends BaseComponent {
       ...props.boolean,
       ...{ default: true },
     },
+    noViewAll: {
+      ...props.boolean,
+      ...{ default: patternLab.noViewAll || false },
+    },
   };
 
   toggleSpecialNavPanel(e) {
@@ -542,7 +549,10 @@ class Nav extends BaseComponent {
 
                 {patternItems &&
                   patternItems.map((patternItem, i) => {
-                    return (
+                    return this.noViewAll &&
+                      patternItem.patternPartial.includes('viewall') ? (
+                      ''
+                    ) : (
                       <li class="pl-c-nav__item">
                         <a
                           href={`patterns/${patternItem.patternPath}`}

packages/uikit-workshop/webpack.config.js

@@ -9,6 +9,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const selectorImporter = require('node-sass-selector-importer');
 const PrerenderSPAPlugin = require('prerender-spa-plugin');
+const webpack = require('webpack');
 const CopyPlugin = require('copy-webpack-plugin');
 const path = require('path');
 const argv = require('yargs').argv;
@@ -23,6 +24,8 @@ const defaultConfig = {
   sourceMaps: true,
   publicPath: './styleguide/',
   copy: [{ from: './src/images/**', to: 'images', flatten: true }],
+  // noViewAll: false,
+  noViewAll: false,
 };
 
 module.exports = async function() {
@@ -254,6 +257,11 @@ module.exports = async function() {
           : [],
       },
       plugins: [
+        new webpack.DefinePlugin({
+          patternLab: {
+            noViewAll: JSON.stringify(config.noViewAll),
+          },
+        }),
         new CopyPlugin(config.copy),
         new PrerenderSPAPlugin({
           // Required - The path to the webpack-outputted app to prerender.