Skip to content

Commit 20170e6

Browse files
bmuenzenmeyerbmuenzenmeyer
authored
Merge pull request #949 from sghoweri/feature/uikit-refactor-p6--search-component
UIKit Refactor Part 6: Refactor Search / Typeahead Component, Bug Fixes, and Improved Scrolling
2 parents e56de43 + c46fd2e commit 20170e6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+2516
-756
lines changed

‎packages/uikit-workshop/.patternlabrc.js renamed to ‎packages/uikit-workshop/.patternlabrc.example.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// .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!
22

33
module.exports = {
4-
// buildDir: '../../../www/pattern-lab',
4+
// buildDir: __dirname + '/www/pattern-lab',
55
}

‎packages/uikit-workshop/dist/index.html

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html class="pl-c-html">
33

44
<head>
55
<title id="title">Pattern Lab</title>
66
<meta charset="UTF-8">
7-
<meta name="viewport" content="width=device-width" />
7+
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
88
<meta name="theme-color" content="#ababab" />
9-
109
<link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />
1110

1211
</head>
@@ -20,7 +19,13 @@
2019

2120
<nav class="pl-c-nav pl-js-nav-target pl-js-nav-container" role="navigation">
2221

23-
<input class="pl-c-typeahead pl-js-typeahead" id="typeahead" type="text" placeholder="Find Pattern" />
22+
<!--
23+
@todo: as a next step, implement <pl-search> as a customizable slot in the new <pl-header> for customization via available props
24+
25+
Example of always hiding the search's clear button
26+
<pl-search max-results="10" placeholder="Find a Pattern" hide-clear-button></pl-search>
27+
-->
28+
<pl-search max-results="10" placeholder="Find a Pattern"></pl-search>
2429

2530
<ol class="pl-c-nav__list pl-js-pattern-nav-target">
2631
<!-- pattern lab nav will be inserted here -->
@@ -77,16 +82,20 @@
7782
<div class="pl-c-modal__toolbar">
7883
<div class="pl-c-modal__resizer pl-js-modal-resizer"></div>
7984
<div class="pl-c-modal__toolbar-controls">
85+
<!-- @todo: revisit to see if slotted content might make sense here (ex. to have an extra toggle for switching the layout -->
86+
<pl-toggle-layout></pl-toggle-layout>
87+
8088
<button class="pl-c-modal__close-btn pl-js-modal-close-btn" title="Hide pattern info">
8189
<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">
8290
<title>Close</title>
8391
<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>
8492
</svg>
8593
</button>
86-
<pl-toggle-layout></pl-toggle-layout>
8794
</div>
8895
</div>
89-
<div class="pl-c-modal__content pl-js-modal-content"></div>
96+
<div class="pl-c-modal__content-wrapper">
97+
<div class="pl-c-modal__content pl-js-modal-content"></div>
98+
</div>
9099
</div>
91100

92101
</div>
@@ -97,16 +106,16 @@
97106
{{# patternTypes }}
98107
<li class="pl-c-nav__item pl-c-nav__item--{{ patternTypeLC }}">
99108

100-
<a class="pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle" tabindex="0" role="tab" aria-controls="{{ patternTypeLC }}">{{ patternTypeUC }}</a>
109+
<button class="pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle" role="tab" aria-controls="{{ patternTypeLC }}">{{ patternTypeUC }}</button>
101110

102111
<ol class="pl-c-nav__sublist pl-c-nav__sublist--dropdown pl-js-acc-panel" id="{{ patternTypeLC }}">
103112

104113
{{# patternTypeItems }}
105114
<li class="pl-c-nav__item pl-c-nav__item--{{ patternSubtypeLC }}">
106115

107-
<a class="pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle">{{ patternSubtypeUC }}</a>
116+
<button class="pl-c-nav__link pl-c-nav__link--dropdown pl-js-acc-handle" aria-controls="{{ patternSubtypeUC }}" role="tab">{{ patternSubtypeUC }}</button>
108117

109-
<ol class="pl-c-nav__subsublist pl-c-nav__subsublist--dropdown pl-js-acc-panel">
118+
<ol id="{{ patternSubtypeUC }}" class="pl-c-nav__subsublist pl-c-nav__subsublist--dropdown pl-js-acc-panel">
110119

111120
{{# patternSubtypeItems }}
112121
<li class="pl-c-nav__item">

‎packages/uikit-workshop/dist/styleguide/css/pattern-lab.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/uikit-workshop/dist/styleguide/js/patternlab-pattern.js

Lines changed: 67 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/uikit-workshop/dist/styleguide/js/patternlab-viewer.js

Lines changed: 1424 additions & 205 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/uikit-workshop/dist/styleguide/js/pl-styleguide-chunk-85e03ab5a5e04e29c9b7.js

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/uikit-workshop/dist/styleguide/js/pl-styleguide-chunk-ce3b9184d507e2353d7d.js

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎packages/uikit-workshop/dist/styleguide/js/vendors~pl-styleguide-chunk-b65f4f06f9bee3623b7d.js

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎packages/uikit-workshop/package.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,10 @@
7373
"node": ">=10.0"
7474
},
7575
"dependencies": {
76+
"@reach/visually-hidden": "^0.1.1",
77+
"react-html-parser": "^2.0.2",
78+
"fuse.js": "^3.2.1",
79+
"react-autosuggest": "^9.4.2",
7680
"classnames": "^2.2.6",
7781
"react-animate-height": "^2.0.4",
7882
"@skatejs/renderer-preact": "^0.3.3",
@@ -86,6 +90,7 @@
8690
"fg-loadcss": "^2.0.1",
8791
"fg-loadjs": "^1.0.0",
8892
"hogan.js": "^3.0.2",
93+
"iframe-resizer": "^3.6.2",
8994
"jquery": "^3.3.1",
9095
"js-cookie": "^2.2.0",
9196
"jshint": "^2.9.5",
@@ -96,12 +101,12 @@
96101
"prismjs": "^1.15.0",
97102
"pwa-helpers": "^0.8.3",
98103
"redux-thunk": "^2.3.0",
104+
"react-animate-height": "^2.0.4",
99105
"redux": "^4.0.0",
100106
"reselect": "^3.0.1",
101107
"scriptjs": "^2.5.8",
102108
"scroll-js": "^1.9.1",
103109
"skatejs": "^5.2.4",
104-
"typeahead.js": "^0.11.1",
105110
"whendefined": "^0.0.1",
106111
"wolfy87-eventemitter": "^5.2.4"
107112
}

‎packages/uikit-workshop/src/favicon.ico

32.2 KB
Binary file not shown.

0 commit comments

Comments
 (0)