From d0155b57c13ac6afef8712912b3a0c8e0de8f661 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Sat, 25 Apr 2020 10:52:41 -0400 Subject: [PATCH 1/4] refactor: split apart existing Nav UI into smaller, more manageable pieces --- .../src/scripts/components/pl-nav/pl-nav.js | 203 ++---------------- .../components/pl-nav/src/NavButton.js | 19 ++ .../scripts/components/pl-nav/src/NavItem.js | 8 + .../scripts/components/pl-nav/src/NavLink.js | 26 +++ .../scripts/components/pl-nav/src/NavList.js | 68 ++++++ .../scripts/components/pl-nav/src/NavTitle.js | 19 ++ .../components/pl-nav/src/NavToggle.js | 19 ++ .../components/pl-nav/src/PatternState.js | 10 + 8 files changed, 184 insertions(+), 188 deletions(-) create mode 100644 packages/uikit-workshop/src/scripts/components/pl-nav/src/NavButton.js create mode 100644 packages/uikit-workshop/src/scripts/components/pl-nav/src/NavItem.js create mode 100644 packages/uikit-workshop/src/scripts/components/pl-nav/src/NavLink.js create mode 100644 packages/uikit-workshop/src/scripts/components/pl-nav/src/NavList.js create mode 100644 packages/uikit-workshop/src/scripts/components/pl-nav/src/NavTitle.js create mode 100644 packages/uikit-workshop/src/scripts/components/pl-nav/src/NavToggle.js create mode 100644 packages/uikit-workshop/src/scripts/components/pl-nav/src/PatternState.js diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js index af3d0bf26..be453beac 100644 --- a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js +++ b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js @@ -10,161 +10,10 @@ import { BaseComponent } from '../base-component.js'; import Mousetrap from 'mousetrap'; import 'url-search-params-polyfill'; -const SubSubList = props => { - const { children, category, elem } = props; - const reorderedChildren = []; - - 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); - - return ( -
  • - {viewAllItems.length > 0 ? ( - viewAllItems.map(patternSubtypeItem => ( -
    - - elem.handleClick(e, patternSubtypeItem.patternPartial) - } - data-patternpartial={patternSubtypeItem.patternPartial} - > - {patternSubtypeItem.patternName === 'View All' - ? `${category}` - : patternSubtypeItem.patternName} - {patternSubtypeItem.patternState && ( - - )} - - - {nonViewAllItems.length >= 1 && ( - - {category} - - )} -
    - )) - ) : ( - - )} - - {((viewAllItems.length && nonViewAllItems.length) || - viewAllItems.length === 0) && ( -
      - {nonViewAllItems.map(patternSubtypeItem => ( -
    1. - - elem.handleClick(e, patternSubtypeItem.patternPartial) - } - data-patternpartial={patternSubtypeItem.patternPartial} - > - {patternSubtypeItem.patternName === 'View All' - ? `${category} Overview` - : patternSubtypeItem.patternName} - {patternSubtypeItem.patternState && ( - - )} - -
      2. - ))} -
    - )} -
    • - ); -}; - -const SpecialButton = props => { - return ( - - ); -}; - -const Button = props => { - return ( - - ); -}; - -const ButtonTitle = props => { - return ( - - ); -}; +import { NavTitle } from './src/NavTitle'; +import { NavList } from './src/NavList'; +import { NavLink } from './src/NavLink'; +import { NavItem } from './src/NavItem'; @define class Nav extends BaseComponent { @@ -393,32 +242,28 @@ class Nav extends BaseComponent { return (
      {patternTypes.map((item, i) => { - const classes = classNames({ - [`pl-c-nav__item pl-c-nav__item--${item.patternTypeLC}`]: true, - }); - const patternItems = item.patternItems; return ( -
    1. - + {item.patternTypeUC} - +
        {item.patternTypeItems.map((patternSubtype, i) => { return ( - {patternSubtype.patternSubtypeItems} - + ); })} @@ -428,31 +273,13 @@ class Nav extends BaseComponent { patternItem.patternPartial.includes('viewall') ? ( '' ) : ( -
      1. - - this.handleClick(e, patternItem.patternPartial) - } - data-patternpartial={patternItem.patternPartial} - tabindex="0" - > - {patternItem.patternName === 'View All' - ? patternItem.patternName + ' ' + item.patternTypeUC - : patternItem.patternName} - {patternItem.patternState && ( - - )} - -
        2. + + + ); })}
      -
      2. + ); })} @@ -461,7 +288,7 @@ class Nav extends BaseComponent { window.ishControls.ishControlsHide === undefined || (window.ishControls.ishControlsHide['views-all'] !== true && window.ishControls.ishControlsHide.all !== true)) && ( -
    2. + this.handleClick(e, 'all')} href="styleguide/html/styleguide.html" @@ -471,7 +298,7 @@ class Nav extends BaseComponent { > All -
      3. + )}
    ); diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavButton.js b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavButton.js new file mode 100644 index 000000000..3ce1ee00d --- /dev/null +++ b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavButton.js @@ -0,0 +1,19 @@ +import { h } from 'preact'; + +export const NavButton = props => { + return ( + + ); +}; diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavItem.js b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavItem.js new file mode 100644 index 000000000..b346cd3e9 --- /dev/null +++ b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavItem.js @@ -0,0 +1,8 @@ +import { h } from 'preact'; +import cx from 'classnames'; + +export const NavItem = props => { + const classes = cx('pl-c-nav__item', props.className); + + return
  • {props.children}
    • ; +}; diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavLink.js b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavLink.js new file mode 100644 index 000000000..80f3b26d9 --- /dev/null +++ b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavLink.js @@ -0,0 +1,26 @@ +import { h } from 'preact'; +import { PatternState } from './PatternState'; + +export const NavLink = props => { + return ( + props.elem.handleClick(e, props.item.patternPartial)} + data-patternpartial={props.item.patternPartial} + > + {props.item.patternName === 'View All' && props.category + ? `${props.category}` + : props.item.patternName} + {props.item.patternState && ( + + )} + + ); +}; diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavList.js b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavList.js new file mode 100644 index 000000000..0f5269041 --- /dev/null +++ b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavList.js @@ -0,0 +1,68 @@ +import { h } from 'preact'; +import { NavToggle } from './NavToggle'; +import { NavLink } from './NavLink'; +import { NavItem } from './NavItem'; + +export const NavList = props => { + const { children, category, elem } = props; + const reorderedChildren = []; + + 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); + + return ( + + {viewAllItems.length > 0 ? ( + viewAllItems.map(patternSubtypeItem => ( +
    + + + {nonViewAllItems.length >= 1 && ( + + {category} + + )} +
    + )) + ) : ( + + )} + + {((viewAllItems.length && nonViewAllItems.length) || + viewAllItems.length === 0) && ( +
      + {nonViewAllItems.map(patternSubtypeItem => ( + + + + ))} +
    + )} +     + ); +}; diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavTitle.js b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavTitle.js new file mode 100644 index 000000000..1ecc22548 --- /dev/null +++ b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavTitle.js @@ -0,0 +1,19 @@ +import { h } from 'preact'; + +export const NavTitle = props => { + return ( + + ); +}; diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavToggle.js b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavToggle.js new file mode 100644 index 000000000..cf238ee1a --- /dev/null +++ b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavToggle.js @@ -0,0 +1,19 @@ +import { h } from 'preact'; + +export const NavToggle = props => { + return ( + + ); +}; diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/src/PatternState.js b/packages/uikit-workshop/src/scripts/components/pl-nav/src/PatternState.js new file mode 100644 index 000000000..37a78093d --- /dev/null +++ b/packages/uikit-workshop/src/scripts/components/pl-nav/src/PatternState.js @@ -0,0 +1,10 @@ +import { h } from 'preact'; + +export const PatternState = props => { + return ( + + ); +}; From 409bef37165260d9b728013ac33e7aa67541c832 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Sat, 25 Apr 2020 10:53:08 -0400 Subject: [PATCH 2/4] fix: only allow one top level nav item to be open at a time while rendering as a dropdown menu --- .../src/scripts/components/pl-nav/pl-nav.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js index be453beac..8a20f29c9 100644 --- a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js +++ b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js @@ -219,7 +219,22 @@ class Nav extends BaseComponent { toggleNavPanel(e) { const target = e.target; - target.classList.toggle('pl-is-active'); + + // when the Nav renders as a dropdown menu, only allow one menu to be open at a time to prevent overlap + if (this.layoutMode !== 'vertical' && window.innerWidth > 670) { + target.classList.toggle('pl-is-active'); + + this.topLevelTriggers = document.querySelectorAll( + '.pl-c-nav__link--title.pl-is-active' + ); + + this.topLevelTriggers.forEach(trigger => { + if (trigger !== target) { + trigger.classList.remove('pl-is-active'); + trigger.nextSibling.classList.remove('pl-is-active'); + } + }); + } } rendered() { From 6da41a14feea034f891c745dfeb062fa3b196235 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Sat, 25 Apr 2020 12:25:48 -0400 Subject: [PATCH 3/4] fix: re-try Netlify preview to debug local vs prod rendering differences --- .../src/scripts/components/pl-nav/pl-nav.js | 2 +- yarn.lock | 53 +++++++++++++++++++ 2 files changed, 54 insertions(+), 1 deletion(-) diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js index 8a20f29c9..7e5ad273e 100644 --- a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js +++ b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js @@ -220,7 +220,7 @@ class Nav extends BaseComponent { toggleNavPanel(e) { const target = e.target; - // when the Nav renders as a dropdown menu, only allow one menu to be open at a time to prevent overlap + // when the Nav renders as a dropdown menu, only allow one top-level menu item to be open at a time to prevent overlap issues if (this.layoutMode !== 'vertical' && window.innerWidth > 670) { target.classList.toggle('pl-is-active'); diff --git a/yarn.lock b/yarn.lock index 3feda9025..ed1c1a551 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1770,6 +1770,11 @@ once "^1.4.0" universal-user-agent "^4.0.0" +"@pattern-lab/starterkit-mustache-base@3.0.3": + version "3.0.3" + resolved "https://registry.yarnpkg.com/@pattern-lab/starterkit-mustache-base/-/starterkit-mustache-base-3.0.3.tgz#8ce9bc8e0d2254ee970a09c4bdc76d4f6131c91d" + integrity sha512-AALdLim5L4ODDjUevRGBY/omhzTU38tSJMRRLaCnwoZ9dxn2QOZNampxj5T7Fhn4oTQnyjhawslVbqVekoViig== + "@pattern-lab/starterkit-mustache-demo@^5.0.0": version "5.0.0" resolved "https://registry.yarnpkg.com/@pattern-lab/starterkit-mustache-demo/-/starterkit-mustache-demo-5.0.0.tgz#40320e474d23b3f2473b1715712f7330802c46f3" @@ -2546,6 +2551,14 @@ ansi-styles@^4.0.0: "@types/color-name" "^1.1.1" color-convert "^2.0.1" +ansi-styles@^4.1.0: + version "4.2.1" + resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359" + integrity sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA== + dependencies: + "@types/color-name" "^1.1.1" + color-convert "^2.0.1" + ansi-styles@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.0.0.tgz#cb102df1c56f5123eab8b67cd7b98027a0279178" @@ -4071,6 +4084,14 @@ chalk@^0.4.0: has-color "~0.1.0" strip-ansi "~0.1.0" +chalk@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.0.0.tgz#6e98081ed2d17faab615eb52ac66ec1fe6209e72" + integrity sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A== + dependencies: + ansi-styles "^4.1.0" + supports-color "^7.1.0" + change-case@^3.0.1: version "3.1.0" resolved "https://registry.yarnpkg.com/change-case/-/change-case-3.1.0.tgz#0e611b7edc9952df2e8513b27b42de72647dd17e" @@ -8502,6 +8523,11 @@ has-flag@^3.0.0: resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0= +has-flag@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b" + integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ== + has-gulplog@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/has-gulplog/-/has-gulplog-0.1.0.tgz#6414c82913697da51590397dafb12f22967811ce" @@ -15852,6 +15878,26 @@ standard-version@4.3.0: semver "^5.1.0" yargs "^8.0.1" +starterkit-mustache-acidtest@0.0.3: + version "0.0.3" + resolved "https://registry.yarnpkg.com/starterkit-mustache-acidtest/-/starterkit-mustache-acidtest-0.0.3.tgz#8ad2b69f955b487ce60415b4d2b0e2177aa0af29" + integrity sha1-itK2n5VbSHzmBBW00rDiF3qgryk= + +starterkit-mustache-bootstrap@0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/starterkit-mustache-bootstrap/-/starterkit-mustache-bootstrap-0.1.1.tgz#1cc0b988a8e6fc084dbb9604bf166af17b4216e6" + integrity sha1-HMC5iKjm/AhNu5YEvxZq8XtCFuY= + +starterkit-mustache-foundation@0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/starterkit-mustache-foundation/-/starterkit-mustache-foundation-0.1.1.tgz#083bf6c1cf6a605ce8729555d502726fa419fd01" + integrity sha1-CDv2wc9qYFzocpVV1QJyb6QZ/QE= + +starterkit-mustache-materialdesign@0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/starterkit-mustache-materialdesign/-/starterkit-mustache-materialdesign-0.1.2.tgz#1806fa26c87a79ed343cffc139d215a634b7994a" + integrity sha1-GAb6Jsh6ee00PP/BOdIVpjS3mUo= + static-extend@^0.1.1: version "0.1.2" resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6" @@ -16247,6 +16293,13 @@ supports-color@^5.3.0, supports-color@^5.4.0: dependencies: has-flag "^3.0.0" +supports-color@^7.1.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1" + integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g== + dependencies: + has-flag "^4.0.0" + svg-baker-runtime@1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/svg-baker-runtime/-/svg-baker-runtime-1.4.1.tgz#d3f77dffdf1f1a8b8f1e84ef67d2c1b53d60d770" From 7a8b418bfcbd200ef8b2802b1a07964a9995bf9f Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Sat, 25 Apr 2020 13:06:50 -0400 Subject: [PATCH 4/4] fix: make sure the top-level Dropdown menus always open/close --- .../uikit-workshop/src/scripts/components/pl-nav/pl-nav.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js index 7e5ad273e..3b09cdab0 100644 --- a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js +++ b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js @@ -220,10 +220,10 @@ class Nav extends BaseComponent { toggleNavPanel(e) { const target = e.target; + target.classList.toggle('pl-is-active'); + // when the Nav renders as a dropdown menu, only allow one top-level menu item to be open at a time to prevent overlap issues if (this.layoutMode !== 'vertical' && window.innerWidth > 670) { - target.classList.toggle('pl-is-active'); - this.topLevelTriggers = document.querySelectorAll( '.pl-c-nav__link--title.pl-is-active' );