pattern-lab · bmuenzenmeyer · Oct 27, 2018 · Sep 22, 2018 · Sep 23, 2018 · Sep 23, 2018
@@ -1,5 +1,5 @@
 // .rc config file allowing users to customize folder locations, etc that are wired up to be configurable in the build process (via cosmic config) -- this example lives in the root of UIKit however can live in a higher-level parent as part of your project's config!
 
 module.exports = {
-  // buildDir: '../../../www/pattern-lab',
+  // buildDir: __dirname + '/www/pattern-lab',
 }
@@ -1,12 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html class="pl-c-html">
 
 <head>
   <title id="title">Pattern Lab</title>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width" />
+  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
   <meta name="theme-color" content="#ababab" />
-
   <link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />
 
 </head>
@@ -20,7 +19,13 @@
 
     <nav class="pl-c-nav pl-js-nav-target pl-js-nav-container" role="navigation">
 
-        <input class="pl-c-typeahead pl-js-typeahead" id="typeahead" type="text" placeholder="Find Pattern" />
+        <!-- 
+            @todo: as a next step, implement <pl-search> as a customizable slot in the new <pl-header> for customization via available props
+
+            Example of always hiding the search's clear button
+            <pl-search max-results="10" placeholder="Find a Pattern" hide-clear-button></pl-search>
+        -->
+        <pl-search max-results="10" placeholder="Find a Pattern"></pl-search>
 
         <ol class="pl-c-nav__list pl-js-pattern-nav-target">
             <!-- pattern lab nav will be inserted here -->
@@ -77,16 +82,20 @@
     <div class="pl-c-modal__toolbar">
         <div class="pl-c-modal__resizer pl-js-modal-resizer"></div>
         <div class="pl-c-modal__toolbar-controls">
+            <!-- @todo: revisit to see if slotted content might make sense here (ex. to have an extra toggle for switching the layout -->
+            <pl-toggle-layout></pl-toggle-layout>
+
             <button class="pl-c-modal__close-btn pl-js-modal-close-btn" title="Hide pattern info">
                 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" class="pl-c-modal__close-btn-icon">
                     <title>Close</title>
                     <path fill="currentColor" d="M11.8905,9.6405 L11.8905,9.6405 L8.25,6 L11.8905,2.3595 L11.8905,2.3595 C11.9295,2.3205 11.958,2.27475 11.976,2.226 C12.0255,2.0925 11.997,1.9365 11.8905,1.82925 L10.17075,0.1095 C10.0635,0.00225 9.9075,-0.02625 9.774,0.024 C9.72525,0.042 9.6795,0.0705 9.6405,0.1095 L9.6405,0.1095 L6,3.75 L2.3595,0.1095 L2.3595,0.1095 C2.3205,0.0705 2.27475,0.042 2.226,0.024 C2.0925,-0.0255 1.9365,0.00225 1.82925,0.1095 L0.1095,1.82925 C0.00225,1.9365 -0.02625,2.0925 0.024,2.226 C0.042,2.27475 0.0705,2.3205 0.1095,2.3595 L0.1095,2.3595 L3.75,6 L0.1095,9.6405 L0.1095,9.6405 C0.0705,9.6795 0.042,9.72525 0.024,9.774 C-0.0255,9.9075 0.00225,10.0635 0.1095,10.17075 L1.82925,11.8905 C1.9365,11.99775 2.0925,12.02625 2.226,11.976 C2.27475,11.958 2.3205,11.9295 2.3595,11.8905 L2.3595,11.8905 L6,8.25 L9.6405,11.8905 L9.6405,11.8905 C9.6795,11.9295 9.72525,11.958 9.774,11.976 C9.9075,12.0255 10.0635,11.99775 10.17075,11.8905 L11.8905,10.17075 C11.99775,10.0635 12.02625,9.9075 11.976,9.774 C11.958,9.72525 11.9295,9.6795 11.8905,9.6405 L11.8905,9.6405 Z"></path>
                 </svg>
             </button>
-            <pl-toggle-layout></pl-toggle-layout>
         </div>
     </div>
-    <div class="pl-c-modal__content pl-js-modal-content"></div>
+    <div class="pl-c-modal__content-wrapper">
+        <div class="pl-c-modal__content pl-js-modal-content"></div>
+    </div>
 </div>
 
     </div>
@@ -97,16 +106,16 @@
     {{# patternTypes }}
 <li class="pl-c-nav__item pl-c-nav__item--{{ patternTypeLC }}">
 
-    <a class="pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle" tabindex="0" role="tab" aria-controls="{{ patternTypeLC }}">{{ patternTypeUC }}</a>
+    <button class="pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle" role="tab" aria-controls="{{ patternTypeLC }}">{{ patternTypeUC }}</button>
 
     <ol class="pl-c-nav__sublist pl-c-nav__sublist--dropdown pl-js-acc-panel" id="{{ patternTypeLC }}">
 
         {{# patternTypeItems }}
         <li class="pl-c-nav__item pl-c-nav__item--{{ patternSubtypeLC }}">
 
-            <a class="pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle">{{ patternSubtypeUC }}</a>
+            <button class="pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle" aria-controls="{{ patternSubtypeUC }}" role="tab">{{ patternSubtypeUC }}</button>
 
-            <ol class="pl-c-nav__subsublist pl-c-nav__subsublist--dropdown pl-js-acc-panel">
+            <ol id="{{ patternSubtypeUC }}" class="pl-c-nav__subsublist pl-c-nav__subsublist--dropdown pl-js-acc-panel">
 
                 {{# patternSubtypeItems }}
                 <li class="pl-c-nav__item">

@@ -73,6 +73,10 @@
     "node": ">=10.0"
   },
   "dependencies": {
+    "@reach/visually-hidden": "^0.1.1",
+    "react-html-parser": "^2.0.2",
+    "fuse.js": "^3.2.1",
+    "react-autosuggest": "^9.4.2",
     "classnames": "^2.2.6",
     "react-animate-height": "^2.0.4",
     "@skatejs/renderer-preact": "^0.3.3",
@@ -86,6 +90,7 @@
     "fg-loadcss": "^2.0.1",
     "fg-loadjs": "^1.0.0",
     "hogan.js": "^3.0.2",
+    "iframe-resizer": "^3.6.2",
     "jquery": "^3.3.1",
     "js-cookie": "^2.2.0",
     "jshint": "^2.9.5",
@@ -96,12 +101,12 @@
     "prismjs": "^1.15.0",
     "pwa-helpers": "^0.8.3",
     "redux-thunk": "^2.3.0",
+    "react-animate-height": "^2.0.4",
     "redux": "^4.0.0",
     "reselect": "^3.0.1",
     "scriptjs": "^2.5.8",
     "scroll-js": "^1.9.1",
     "skatejs": "^5.2.4",
-    "typeahead.js": "^0.11.1",
     "whendefined": "^0.0.1",
     "wolfy87-eventemitter": "^5.2.4"
   }

@@ -1,12 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html class="pl-c-html">
 
 <head>
   <title id="title">Pattern Lab</title>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width" />
+  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
   <meta name="theme-color" content="#ababab" />
-
   <link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />
 
 </head>

@@ -4,7 +4,13 @@
 
 	<nav class="pl-c-nav pl-js-nav-target pl-js-nav-container" role="navigation">
 
-		<input class="pl-c-typeahead pl-js-typeahead" id="typeahead" type="text" placeholder="Find Pattern" />
+		<!-- 
+			@todo: as a next step, implement <pl-search> as a customizable slot in the new <pl-header> for customization via available props
+
+			Example of always hiding the search's clear button
+			<pl-search max-results="10" placeholder="Find a Pattern" hide-clear-button></pl-search>
+		-->
+		<pl-search max-results="10" placeholder="Find a Pattern"></pl-search>
 
 		<ol class="pl-c-nav__list pl-js-pattern-nav-target">
 			<!-- pattern lab nav will be inserted here -->

@@ -3,14 +3,18 @@
     <div class="pl-c-modal__toolbar">
         <div class="pl-c-modal__resizer pl-js-modal-resizer"></div>
         <div class="pl-c-modal__toolbar-controls">
+            <!-- @todo: revisit to see if slotted content might make sense here (ex. to have an extra toggle for switching the layout -->
+            <pl-toggle-layout></pl-toggle-layout>
+
             <button class="pl-c-modal__close-btn pl-js-modal-close-btn" title="Hide pattern info">
                 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" class="pl-c-modal__close-btn-icon">
                     <title>Close</title>
                     <path fill="currentColor" d="M11.8905,9.6405 L11.8905,9.6405 L8.25,6 L11.8905,2.3595 L11.8905,2.3595 C11.9295,2.3205 11.958,2.27475 11.976,2.226 C12.0255,2.0925 11.997,1.9365 11.8905,1.82925 L10.17075,0.1095 C10.0635,0.00225 9.9075,-0.02625 9.774,0.024 C9.72525,0.042 9.6795,0.0705 9.6405,0.1095 L9.6405,0.1095 L6,3.75 L2.3595,0.1095 L2.3595,0.1095 C2.3205,0.0705 2.27475,0.042 2.226,0.024 C2.0925,-0.0255 1.9365,0.00225 1.82925,0.1095 L0.1095,1.82925 C0.00225,1.9365 -0.02625,2.0925 0.024,2.226 C0.042,2.27475 0.0705,2.3205 0.1095,2.3595 L0.1095,2.3595 L3.75,6 L0.1095,9.6405 L0.1095,9.6405 C0.0705,9.6795 0.042,9.72525 0.024,9.774 C-0.0255,9.9075 0.00225,10.0635 0.1095,10.17075 L1.82925,11.8905 C1.9365,11.99775 2.0925,12.02625 2.226,11.976 C2.27475,11.958 2.3205,11.9295 2.3595,11.8905 L2.3595,11.8905 L6,8.25 L9.6405,11.8905 L9.6405,11.8905 C9.6795,11.9295 9.72525,11.958 9.774,11.976 C9.9075,12.0255 10.0635,11.99775 10.17075,11.8905 L11.8905,10.17075 C11.99775,10.0635 12.02625,9.9075 11.976,9.774 C11.958,9.72525 11.9295,9.6795 11.8905,9.6405 L11.8905,9.6405 Z"></path>
                 </svg>
             </button>
-            <pl-toggle-layout></pl-toggle-layout>
         </div>
     </div>
-    <div class="pl-c-modal__content pl-js-modal-content"></div>
+    <div class="pl-c-modal__content-wrapper">
+        <div class="pl-c-modal__content pl-js-modal-content"></div>
+    </div>
 </div>
@@ -1,16 +1,16 @@
 {{# patternTypes }}
 <li class="pl-c-nav__item pl-c-nav__item--{{ patternTypeLC }}">
 
-	<a class="pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle" tabindex="0" role="tab" aria-controls="{{ patternTypeLC }}">{{ patternTypeUC }}</a>
+	<button class="pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle" role="tab" aria-controls="{{ patternTypeLC }}">{{ patternTypeUC }}</button>
 
 	<ol class="pl-c-nav__sublist pl-c-nav__sublist--dropdown pl-js-acc-panel" id="{{ patternTypeLC }}">
 
 		{{# patternTypeItems }}
 		<li class="pl-c-nav__item pl-c-nav__item--{{ patternSubtypeLC }}">
 
-			<a class="pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle">{{ patternSubtypeUC }}</a>
+			<button class="pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle" aria-controls="{{ patternSubtypeUC }}" role="tab">{{ patternSubtypeUC }}</button>
 
-			<ol class="pl-c-nav__subsublist pl-c-nav__subsublist--dropdown pl-js-acc-panel">
+			<ol id="{{ patternSubtypeUC }}" class="pl-c-nav__subsublist pl-c-nav__subsublist--dropdown pl-js-acc-panel">
 
 				{{# patternSubtypeItems }}
 				<li class="pl-c-nav__item">

@@ -38,7 +38,6 @@
 /*------------------------------------*\
     #VENDOR
 \*------------------------------------*/
-@import 'scss/03-vendor/typeahead';
 @import 'scss/03-vendor/prism';
 
 /*------------------------------------*\
@@ -48,6 +47,8 @@
 /**
  * Pattern Lab Header
  */
+@import '../scripts/components/pl-search/pl-search.scss';
+@import '../scripts/components/pl-layout/pl-layout.scss';
 @import 'scss/04-components/header';
 @import 'scss/04-components/logo';
 @import 'scss/04-components/navigation';

@@ -37,6 +37,8 @@
   transition: background-color $pl-animate-quick ease-out,
     color $pl-animate-quick ease-out;
   cursor: pointer;
+  outline-offset: -3px;
+  outline-width: 2px;
 
   &:hover {
     color: $pl-color-white;
@@ -57,6 +59,15 @@
   .pl-c-body--theme-light & {
     background-color: $pl-color-white;
     color: $pl-color-gray-70;
+
+    &:hover {
+      background-color: $pl-color-gray-07;
+    }
+
+    &:active,
+    &:focus {
+      background-color: $pl-color-gray-13;
+    }
   }
 
   /**
@@ -85,24 +96,22 @@
   transition: max-height $pl-animate-quick ease-out;
 
   /**
-     * Active is when accordion panel is open
-     */
+  * Active styles for when the accordion panel is open
+  * 1. WIP -- part of broader UI refactor
+  */
   &.pl-is-active {
-    max-height: none;
+    max-height: calc(100vh - #{$offset-top} - 1rem);
+    max-height: calc(
+      var(--pl-viewport-height, calc(100vh - #{$offset-top})) - 1rem
+    ); /* [1] */
     overflow: auto;
-    @include hideScrollBar();
-
-    @media all and (min-width: $pl-bp-med) {
-      max-height: 120rem;
-      // WIP -- part of broader UI refactor
-      max-height: calc(var(--pl-viewport-height) - 1rem, 120rem);
-    }
+    -webkit-overflow-scrolling: touch;
   }
 }
 
-@mixin noSelect(){
-  -webkit-user-select: none;  /* Chrome all / Safari all */
-  -moz-user-select: none;     /* Firefox all */
-  -ms-user-select: none;      /* IE 10+ */
-  user-select: none;          /* Likely future */  
+@mixin noSelect() {
+  -webkit-user-select: none; /* Chrome all / Safari all */
+  -moz-user-select: none; /* Firefox all */
+  -ms-user-select: none; /* IE 10+ */
+  user-select: none; /* Likely future */
 }
@@ -7,11 +7,13 @@
 * 1) These exist indepenedent of any project-specific styles
 * 2) Styled as IDs to avoid collisions with user <body> tag
 */
+.pl-c-html {
+  min-height: 100%;
+}
+
 .pl-c-body {
   margin: 0;
   padding: 0;
   -webkit-text-size-adjust: 100%;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
+  display: flex; // Required for IE 11 to display overall PL layout correctly
 }
@@ -16,6 +16,7 @@ pre[class*='language-'] {
   word-spacing: normal;
   word-break: normal;
   line-height: 1.5;
+  word-wrap: normal; // fixes issue in Safari where code blocks can't scroll due to the code breaking into multiple lines unexpectedly
 
   -moz-tab-size: 4;
   -o-tab-size: 4;

@@ -20,6 +20,12 @@
   color: $pl-color-gray-50;
   font-family: $pl-font;
   font-size: $pl-font-size-sm;
+  min-height: 30px; // magic number -- needed for initial skeleton screen styles used in the critical CSS
+
+  @supports(padding: max(0px)) {
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+  }
 }
 
 /**