Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UIKit Nav Cleanup #1102

Merged
merged 16 commits into from
Jan 7, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/docs/src/_data/global.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
module.exports = {
random() {
const segment = () => {
// eslint-disable-next-line no-bitwise
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
};
return `${segment()}-${segment()}-${segment()}`;
Expand Down
4 changes: 2 additions & 2 deletions packages/docs/src/filters/date-filter.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Stolen from https://stackoverflow.com/a/31615643
const appendSuffix = (n) => {
var s = ['th', 'st', 'nd', 'rd'],
v = n % 100;
const s = ['th', 'st', 'nd', 'rd'];
const v = n % 100;
return n + (s[(v - 20) % 10] || s[v] || s[0]);
};

Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/js/components/theme-toggle.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ class ThemeToggle extends HTMLElement {
}

applySetting(passedSetting) {
let currentSetting = passedSetting || localStorage.getItem(this.STORAGE_KEY);
const currentSetting = passedSetting || localStorage.getItem(this.STORAGE_KEY);

if (currentSetting) {
document.documentElement.setAttribute('data-user-color-scheme', currentSetting);
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/transforms/html-min-transform.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const htmlmin = require('html-minifier');

module.exports = function htmlMinTransform(value, outputPath) {
if (outputPath.indexOf('.html') > -1) {
let minified = htmlmin.minify(value, {
const minified = htmlmin.minify(value, {
useShortDoctype: true,
removeComments: true,
collapseWhitespace: true,
Expand Down
6 changes: 2 additions & 4 deletions packages/uikit-workshop/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -74,10 +74,8 @@
"mousetrap": "^1.6.5",
"portfinder": "^1.0.28",
"postcss-loader": "^3.0.0",
"preact": "8.3.1",
"preact-compat": "3.18.4",
"preact-context": "1.1.2",
"preact-render-to-string": "^4.1.0",
"preact-render-to-string": "^5.1.1",
"preact": "^10.0.5",
"preload-webpack-plugin": "^3.0.0-beta.3",
"pretty": "^2.0.0",
"prismjs": "^1.25.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/uikit-workshop/src/sass/pattern-lab.scss
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
/*------------------------------------*\
#COMPONENTS
\*------------------------------------*/
@import '../scripts/components/pl-nav/pl-nav.scss';
@import '../scripts/components/pl-nav/index.scss';
@import '../scripts/components/pl-search/pl-search.scss';
@import 'scss/04-components/annotations';
@import 'scss/04-components/annotations-inside-modal';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@
.pl-c-pattern-state {
width: 0.5em;
height: 0.5em;
margin-bottom: 0.25em;
margin-left: 0.5em;
border-radius: 50%;
display: inline-block;
background-color: $pl-color-state-info;

&--complete {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
flex-direction: column; /* 3 */
border-bottom: 0; /* 4 */
justify-content: space-between;
--nav-item-height: 2.5rem;
}

/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,36 +16,7 @@ import { SkateElement } from './base-skate-element';

/** @jsx h */

import preact, { h, render } from 'preact';

// TODO make this a Symbol() when it's supported.
const preactNodeName = '__preactNodeName';

let oldVnode;

function newVnode(vnode) {
const fn = vnode.nodeName;
if (fn && fn.prototype instanceof HTMLElement) {
if (!fn[preactNodeName]) {
const prefix = fn.name;
customElements.define(
(fn[preactNodeName] = name(prefix)),
class extends fn {}
);
}
vnode.nodeName = fn[preactNodeName];
}
return vnode;
}

function setupPreact() {
oldVnode = preact.options.vnode;
preact.options.vnode = newVnode;
}

function teardownPreact() {
preact.options.vnode = oldVnode;
}
import { h, render } from 'preact';

export class SkatePreactElement extends SkateElement {
get props() {
Expand All @@ -55,23 +26,16 @@ export class SkatePreactElement extends SkateElement {
}

renderer(root, call) {
setupPreact();
this._renderRoot = root;
this._preactDom = render(
call(),
root,
this._preactDom || root.childNodes[0]
);
teardownPreact();
render(call(), root);
}

disconnectedCallback() {
this.disconnecting && this.disconnecting();
super.disconnectedCallback && super.disconnectedCallback();
this.disconnected && this.disconnected();
// Render null to unmount. See https://github.com/skatejs/skatejs/pull/1432#discussion_r183381359
this._preactDom = render(null, this._renderRoot, this._preactDom);
this._renderRoot = null;
render(null, this._renderRoot);

this.__storeUnsubscribe && this.__storeUnsubscribe();

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/*------------------------------------*\
#NAVIGATION
\*------------------------------------*/

@import './nav.scss';
@import './nav-link.scss';
@import './nav-list.scss';
@import './nav-dropdown.scss';
@import './nav-accordion.scss';
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
@import '../../../sass/scss/core.scss';

.pl-c-nav__accordion {
background-color: inherit; // allows the nav's children inherit from the parent header
@include listReset();
@include accordionPanel();
display: flex;
flex-flow: row wrap;
opacity: 0;
visibility: hidden;
}

.is-open ~ .pl-c-nav__accordion {
visibility: visible;
max-height: none;
transform: translateY(0);
opacity: 1;

.pl-c-body--theme-horizontal & {
overflow: auto;
}

@media all and (min-width: $pl-bp-med) {
height: auto;
max-height: calc(100vh - #{$offset-top} - 2rem); /* 1 */
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
@import '../../../sass/scss/core.scss';

/**
* Nav Dropdown
* 1) On larger screens, display as dropdowns that
* hangs over the header
*/
.pl-c-nav__dropdown {
@media all and (min-width: $pl-bp-med) {
position: absolute;
top: 100%; /* 1 */
left: 0;
min-width: 14rem;
border-radius: $pl-border-radius-med;
border-style: solid;
border-width: 1px;
box-shadow: 0 2px 5px rgba($pl-color-black, 0.1);
transition: all 0.2s ease;
transform: translateY(-12px);
z-index: 1;
transition: all $pl-animate-quick ease-out;

.pl-c-body--theme-sidebar & {
position: relative;
}
}

.pl-c-body--theme-light & {
border-color: rgba($pl-color-black, 0.2);
}

.pl-c-body--theme-dark & {
border-color: rgba($pl-color-white, 0.2);
}

.pl-c-body--theme-sidebar & {
border-width: 0;
transform: none;
box-shadow: none;
border-radius: 0;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
// this line is required for rendering even if it is note used in the code
import { h, Fragment } from 'preact';
const classNames = require('classnames');

export const NavLink = (props) => {
const classes = classNames('pl-c-nav__link', {
[`pl-c-nav__link--level-${props.level}`]: props.level !== undefined,
'pl-c-nav__link--icon-only': props.iconOnly,
'pl-c-nav__link--title': props.isTitle,
});

const Tag = props.href ? 'a' : 'button';

return (
<Tag className={`${classes}`} role="tab" {...props}>
{props.iconPos === 'before' && props.iconName && (
<span
class="pl-c-nav__link-icon"
dangerouslySetInnerHTML={{
__html: `<pl-icon name="${props.iconName}"></pl-icon>`,
}}
/>
)}
<span
className={`pl-c-nav__link-text ${
props.iconOnly ? 'is-vishidden' : ''
}`}
>
{props.children}
{props.status && (
<span
class={`pl-c-pattern-state pl-c-pattern-state--${props.status}`}
title={props.status}
/>
)}
</span>
{props.iconPos !== 'before' && props.iconName && (
<span
class="pl-c-nav__link-icon"
dangerouslySetInnerHTML={{
__html: `<pl-icon name="${props.iconName}"></pl-icon>`,
}}
/>
)}
</Tag>
);
};
Loading