Merge pull request pattern-lab#1143 from JosefBredereck/dev

Update pattern discovery and fix "view all" issues

Author: sghoweri

packages/uikit-workshop/src/sass/scss/04-components/_pattern-category.scss

@@ -10,11 +10,15 @@
 */
 .pl-c-category {
   margin-top: 6rem;
-  font: $pl-font !important;
+  font-family: $pl-font !important;
 
   &:first-of-type {
     margin-top: 2rem;
   }
+
+  & + & {
+    margin-top: 2rem;
+  }
 }
 
 /**
@@ -25,13 +29,18 @@
   color: $pl-color-gray-87 !important;
   margin: 0 0 0.2rem;
   text-transform: capitalize;
+
+  &:hover {
+    color: $pl-color-gray-70 !important;
+  }
 }
 
 /**
  * Pattern Category Link 
  */
 .pl-c-category__title-link {
   transition: color $pl-animate-quick ease-out;
+  color: inherit;
 }
 
 /**

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

@@ -269,7 +269,8 @@ class Nav extends BaseComponent {
                   return (
                     <NavList
                       elem={this.elem}
-                      category={patternSubtype.patternSubtypeUC}
+                      category={patternSubtype.patternSubtypeLC}
+                      categoryName={patternSubtype.patternSubtypeUC}
                     >
                       {patternSubtype.patternSubtypeItems}
                     </NavList>
@@ -296,19 +297,20 @@ class Nav extends BaseComponent {
         {(window.ishControls === undefined ||
           window.ishControls.ishControlsHide === undefined ||
           (window.ishControls.ishControlsHide['views-all'] !== true &&
-            window.ishControls.ishControlsHide.all !== true)) && (
-          <NavItem>
-            <a
-              onClick={e => this.handleClick(e, 'all')}
-              href="styleguide/html/styleguide.html"
-              class="pl-c-nav__link pl-c-nav__link--pattern"
-              data-patternpartial="all"
-              tabindex="0"
-            >
-              All
-            </a>
-          </NavItem>
-        )}
+            window.ishControls.ishControlsHide.all !== true)) &&
+          !this.noViewAll && (
+            <NavItem>
+              <a
+                onClick={e => this.handleClick(e, 'all')}
+                href="styleguide/html/styleguide.html"
+                class="pl-c-nav__link pl-c-nav__link--pattern"
+                data-patternpartial="all"
+                tabindex="0"
+              >
+                All
+              </a>
+            </NavItem>
+          )}
       </ol>
     );
   }

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

@@ -7,16 +7,16 @@ export const NavLink = props => {
       href={`patterns/${props.item.patternPath}`}
       className={`pl-c-nav__link pl-c-nav__link--sublink
             ${
-              props.item.patternName === 'View All'
+              props.item.isDocPattern
                 ? 'pl-c-nav__link--overview'
                 : 'pl-c-nav__link--subsublink'
             }
           `}
       onClick={e => props.elem.handleClick(e, props.item.patternPartial)}
       data-patternpartial={props.item.patternPartial}
     >
-      {props.item.patternName === 'View All' && props.category
-        ? `${props.category}`
+      {props.item.isDocPattern && props.category
+        ? `${props.categoryName}`
         : props.item.patternName}
       {props.item.patternState && (
         <PatternState variant={props.item.patternState} />

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

@@ -5,18 +5,17 @@ import { NavItem } from './NavItem';
 import { NavButton } from './NavButton';
 
 export const NavList = props => {
-  const { children, category, elem } = props;
+  const { children, category, categoryName, elem } = props;
   const reorderedChildren = [];
 
   const nonViewAllItems = elem.noViewAll
-    ? children.filter(item => item.patternName !== 'View All')
+    ? children.filter(item => !item.isDocPattern)
     : children.filter(
-        item =>
-          item.patternName !== 'View All' && !item.patternName.includes(' Docs')
+        item => !item.isDocPattern && !item.patternName.includes(' Docs')
       );
   const viewAllItems = elem.noViewAll
     ? []
-    : children.filter(item => item.patternName === 'View All');
+    : children.filter(item => item.isDocPattern);
 
   reorderedChildren.push(...viewAllItems, ...nonViewAllItems);
 
@@ -27,6 +26,7 @@ export const NavList = props => {
           <div class="pl-c-nav__link--overview-wrapper">
             <NavLink
               category={category}
+              categoryName={categoryName}
               item={patternSubtypeItem}
               elem={elem}
             />
@@ -43,7 +43,7 @@ export const NavList = props => {
         ))
       ) : (
         <NavButton aria-controls={category} onClick={elem.toggleNavPanel}>
-          {category}
+          {categoryName}
         </NavButton>
       )}
 
@@ -57,6 +57,7 @@ export const NavList = props => {
             <NavItem>
               <NavLink
                 category={category}
+                categoryName={categoryName}
                 item={patternSubtypeItem}
                 elem={elem}
               />