From 3d791877c819f7776e29e93f4224ce0752dac31b Mon Sep 17 00:00:00 2001 From: Elliott Marquez <5981958+e111077@users.noreply.github.com> Date: Fri, 8 Dec 2023 18:19:00 -0800 Subject: [PATCH] docs: make page for full stories --- .../shortcodes/playground-example.cjs | 3 +- catalog/site/_includes/default.html | 7 +- catalog/site/css/syntax-highlight.css | 1 + catalog/site/stories/stories.html | 68 ++++++ catalog/src/components/drag-playground.ts | 201 ++++++++++++++++++ catalog/src/components/nav-drawer.ts | 48 +++-- catalog/src/pages/stories.ts | 1 + catalog/src/ssr.ts | 1 + .../stories/components/knob-ui-components.ts | 71 ++++--- 9 files changed, 356 insertions(+), 45 deletions(-) create mode 100644 catalog/site/stories/stories.html create mode 100644 catalog/src/components/drag-playground.ts create mode 100644 catalog/src/pages/stories.ts diff --git a/catalog/eleventy-helpers/shortcodes/playground-example.cjs b/catalog/eleventy-helpers/shortcodes/playground-example.cjs index d40df7df58..787ba765ce 100644 --- a/catalog/eleventy-helpers/shortcodes/playground-example.cjs +++ b/catalog/eleventy-helpers/shortcodes/playground-example.cjs @@ -51,7 +51,7 @@ function playgroundExample(eleventyConfig) { - Expand interactive demo. + View interactive demo inline. +

Open interactive demo in new tab.

`; }); } diff --git a/catalog/site/_includes/default.html b/catalog/site/_includes/default.html index ffb00091e0..fea6233560 100644 --- a/catalog/site/_includes/default.html +++ b/catalog/site/_includes/default.html @@ -49,7 +49,10 @@ {% inlinejs "ssr-utils/dsd-polyfill.js" %} - + {% block topappbar %}{{ topappbar | safe }}{% endblock %} @@ -97,7 +100,7 @@ {{ file.data.name }} diff --git a/catalog/site/css/syntax-highlight.css b/catalog/site/css/syntax-highlight.css index 831441a71f..78b0050c46 100644 --- a/catalog/site/css/syntax-highlight.css +++ b/catalog/site/css/syntax-highlight.css @@ -50,6 +50,7 @@ /* Formats the code boxes themselves */ .example playground-file-editor, +playground-file-editor, pre[class*='language-'] { padding: var(--__code-block-font-size); /* Remove the extra hard coded 3px from line number padding. */ diff --git a/catalog/site/stories/stories.html b/catalog/site/stories/stories.html new file mode 100644 index 0000000000..8969c909ff --- /dev/null +++ b/catalog/site/stories/stories.html @@ -0,0 +1,68 @@ +---js +{ + pagination: { + data: "collections.component", + size: 1, + alias: "component", + before: components => { + // remove any components that don't have a dirname + return components.filter(component => component.data.dirname) + } + }, + permalink: "components/{{component.data.page.fileSlug}}/stories/index.html", + fullHeightContent: "true", + collections: ["stories"], + eleventyComputed: { + dirname: ({component}) => component.data.dirname, + name: ({component}) => component.data.name, + tabUrl: ({component}) => component.data.page.url, + } +} +--- + +{% extends 'default.html' %} {% block head %} + + + + + + +{% endblock %} {% block content %} + + + + + + +
+ +
+ +{% endblock %} diff --git a/catalog/src/components/drag-playground.ts b/catalog/src/components/drag-playground.ts new file mode 100644 index 0000000000..d03b7c3ae2 --- /dev/null +++ b/catalog/src/components/drag-playground.ts @@ -0,0 +1,201 @@ +import { LitElement, css, html } from 'lit'; +import { customElement, state, query } from 'lit/decorators.js'; +import { classMap } from 'lit/directives/class-map.js'; +import { styleMap } from 'lit/directives/style-map.js'; +import '@material/web/icon/icon.js'; + +/** + * A playground preview + editor with a draggable handle. + */ +@customElement('drag-playground') +export class DragPlayground extends LitElement { + static styles = css` + :host { + display: block; + --_drag-bar-height: 24px; + --_drag-bar-border-width: 1px; + --_half-drag-bar-height: calc( + (var(--_drag-bar-height) / 2) + var(--_drag-bar-border-width) + ); + } + + #wrapper { + display: flex; + flex-direction: column; + } + + :host, + #wrapper, + ::slotted(*) { + height: 100%; + } + + slot { + display: block; + overflow: hidden; + } + + [name='preview'] { + height: max( + calc( + 100% - var(--editor-percentage, 0%) - var(--_half-drag-bar-height) + ), + 0px + ); + } + + [name='editor'] { + height: max( + calc(var(--editor-percentage, 0px) - var(--_half-drag-bar-height)), + 0px + ); + } + + #drag-bar { + touch-action: none; + background-color: var(--md-sys-color-surface-container); + color: var(--md-sys-color-on-surface); + border: var(--_drag-bar-border-width) solid var(--md-sys-color-outline); + border-radius: 12px; + height: var(--_drag-bar-height); + display: flex; + justify-content: center; + align-items: center; + -webkit-user-select: none; + user-select: none; + } + + #drag-bar.isDragging { + background-color: var(--md-sys-color-inverse-surface); + color: var(--md-sys-color-inverse-on-surface); + } + `; + + /** + * Whether or not we are in the "dragging" state. + */ + @state() private isDragging = false; + + /** + * The percentage of the editor height. + */ + @state() private editorHeightPercent = 0; + + @query('#wrapper') private wrapperEl!: HTMLElement; + + /** + * A set of pointer IDs in the case that the user is dragging with multiple + * pointers. + */ + private pointerIds: Set = new Set(); + + render() { + return html`
+ +
+ +
+ +
`; + } + + private onFocus() { + this.isDragging = true; + } + + private onBlur() { + this.isDragging = false; + } + + private onKeydown(event: KeyboardEvent) { + const { key } = event; + switch (key) { + case 'ArrowRight': + case 'ArrowUp': + this.editorHeightPercent = Math.min(this.editorHeightPercent + 1, 100); + break; + case 'ArrowLeft': + case 'ArrowDown': + this.editorHeightPercent = Math.max(this.editorHeightPercent - 1, 0); + break; + case 'PageUp': + this.editorHeightPercent = Math.min(this.editorHeightPercent + 10, 100); + break; + case 'PageDown': + this.editorHeightPercent = Math.max(this.editorHeightPercent - 10, 0); + break; + case 'Home': + this.editorHeightPercent = 0; + break; + case 'End': + this.editorHeightPercent = 100; + break; + } + } + + private onPointerdown(event: PointerEvent) { + this.isDragging = true; + + if (this.pointerIds.has(event.pointerId)) return; + + this.pointerIds.add(event.pointerId); + (event.target as HTMLElement).setPointerCapture(event.pointerId); + } + + private onPointerup(event: PointerEvent) { + this.pointerIds.delete(event.pointerId); + (event.target as HTMLElement).releasePointerCapture(event.pointerId); + + if (this.pointerIds.size === 0) { + this.isDragging = false; + } + } + + private onPointermove(event: PointerEvent) { + if (!this.isDragging) return; + + const { clientY: mouseY } = event; + const { top: wrapperTop, bottom: wrapperBottom } = + this.wrapperEl.getBoundingClientRect(); + + // The height of the wrapper + const height = wrapperBottom - wrapperTop; + + // Calculate the percentage of the editor height in which the pointer is + // located + const editorHeightPercent = 100 - ((mouseY - wrapperTop) / height) * 100; + + // Clamp the percentage between 0 and 100 + this.editorHeightPercent = Math.min(Math.max(editorHeightPercent, 0), 100); + } +} + +declare global { + interface HTMLElementTagNameMap { + 'drag-playground': DragPlayground; + } +} diff --git a/catalog/src/components/nav-drawer.ts b/catalog/src/components/nav-drawer.ts index de9da1c4b2..9331891c13 100644 --- a/catalog/src/components/nav-drawer.ts +++ b/catalog/src/components/nav-drawer.ts @@ -4,14 +4,14 @@ * SPDX-License-Identifier: Apache-2.0 */ -import {animate, fadeIn, fadeOut} from '@lit-labs/motion'; -import {EASING} from '@material/web/internal/motion/animation.js'; -import {LitElement, PropertyValues, css, html, nothing} from 'lit'; -import {customElement, property, state} from 'lit/decorators.js'; +import { animate, fadeIn, fadeOut } from '@lit-labs/motion'; +import { EASING } from '@material/web/internal/motion/animation.js'; +import { LitElement, PropertyValues, css, html, nothing } from 'lit'; +import { customElement, property, state } from 'lit/decorators.js'; -import {drawerOpenSignal} from '../signals/drawer-open-state.js'; -import {inertContentSignal, inertSidebarSignal} from '../signals/inert.js'; -import {SignalElement} from '../signals/signal-element.js'; +import { drawerOpenSignal } from '../signals/drawer-open-state.js'; +import { inertContentSignal, inertSidebarSignal } from '../signals/inert.js'; +import { SignalElement } from '../signals/signal-element.js'; /** * A layout element that positions the top-app-bar, the main page content, and @@ -31,9 +31,15 @@ export class NavDrawer extends SignalElement(LitElement) { /** * Whether or not the TOC should be rendered. */ - @property({type: Boolean, attribute: 'has-toc'}) hasToc = false; + @property({ type: Boolean, attribute: 'has-toc' }) hasToc = false; - @property({attribute: 'page-title'}) pageTitle = ''; + /** + * Whether or not the content should be full height. rather than scrollable. + */ + @property({ type: Boolean, attribute: 'full-height-content', reflect: true }) + fullHeightContent = false; + + @property({ attribute: 'page-title' }) pageTitle = ''; private lastDrawerOpen = drawerOpenSignal.value; @@ -66,7 +72,8 @@ export class NavDrawer extends SignalElement(LitElement) { }, in: fadeIn, out: fadeOut, - })}>` + })} + >` : nothing} @@ -100,7 +109,8 @@ export class NavDrawer extends SignalElement(LitElement) { private renderContent(showModal: boolean) { return html`
+ ?inert=${showModal || inertContentSignal.value} + >
@@ -116,7 +126,8 @@ export class NavDrawer extends SignalElement(LitElement) { return html`
+ ?inert=${showModal || inertContentSignal.value} + >

On this page:

${this.pageTitle}

@@ -151,7 +162,7 @@ export class NavDrawer extends SignalElement(LitElement) { ) { ( this.querySelector( - 'md-list.nav md-list-item[tabindex="0"]', + 'md-list.nav md-list-item[tabindex="0"]' ) as HTMLElement )?.focus(); } @@ -280,6 +291,13 @@ export class NavDrawer extends SignalElement(LitElement) { box-sizing: border-box; } + :host([full-height-content]) .scroll-wrapper, + :host([full-height-content]) .content, + .content ::slotted(*) { + height: 100%; + max-height: 100%; + } + .pane .scroll-wrapper { padding-block: var(--catalog-spacing-xl); } diff --git a/catalog/src/pages/stories.ts b/catalog/src/pages/stories.ts new file mode 100644 index 0000000000..ab2625c96e --- /dev/null +++ b/catalog/src/pages/stories.ts @@ -0,0 +1 @@ +import '../components/drag-playground.js'; \ No newline at end of file diff --git a/catalog/src/ssr.ts b/catalog/src/ssr.ts index 52ea560e72..998a5f7944 100644 --- a/catalog/src/ssr.ts +++ b/catalog/src/ssr.ts @@ -12,5 +12,6 @@ import './components/catalog-component-header-title.js'; import './components/nav-drawer.js'; import './components/theme-changer.js'; import './components/top-app-bar.js'; +import './components/drag-playground.js'; // 🤫 import '@material/web/labs/item/item.js'; diff --git a/catalog/stories/components/knob-ui-components.ts b/catalog/stories/components/knob-ui-components.ts index afa51ddd8e..84839b5046 100644 --- a/catalog/stories/components/knob-ui-components.ts +++ b/catalog/stories/components/knob-ui-components.ts @@ -13,11 +13,11 @@ import '@material/web/select/filled-select.js'; import '@material/web/select/select-option.js'; import '@material/web/textfield/filled-text-field.js'; -import {css, html, LitElement} from 'lit'; -import {customElement, property} from 'lit/decorators.js'; -import {StyleInfo, styleMap} from 'lit/directives/style-map.js'; +import { css, html, LitElement } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { StyleInfo, styleMap } from 'lit/directives/style-map.js'; -import {Knob, KnobUi} from '../knobs.js'; +import { Knob, KnobUi } from '../knobs.js'; /** * A boolean Knob UI. @@ -36,7 +36,8 @@ export function boolInput(): KnobUi { touch-target="none" style="margin-inline-end: 16px;" .checked=${!!knob.latestValue} - @change="${valueChanged}"> + @change="${valueChanged}" + > ${knob.name} @@ -51,7 +52,7 @@ export function boolInput(): KnobUi { */ @customElement('knob-color-selector') export class KnobColorSelector extends LitElement { - static override styles = css` + static styles = css` :host { display: inline-block; position: relative; @@ -111,7 +112,7 @@ export class KnobColorSelector extends LitElement { private internalValue = ''; - @property({type: Boolean}) hasAlpha = false; + @property({ type: Boolean }) hasAlpha = false; set value(val: string) { const oldVal = this.internalValue; @@ -119,12 +120,12 @@ export class KnobColorSelector extends LitElement { this.requestUpdate('value', oldVal); } - @property({type: String, reflect: true}) + @property({ type: String, reflect: true }) get value() { return this.internalValue; } - override render() { + render() { return html` ${this.hasAlpha ? this.renderTextInput() : this.renderColorInput()} @@ -132,7 +133,8 @@ export class KnobColorSelector extends LitElement { { this.hasAlpha = !this.hasAlpha; - }}> + }} + > ${this.hasAlpha ? 'rgba' : 'rgb'} `; @@ -143,7 +145,8 @@ export class KnobColorSelector extends LitElement { style=${styleMap(sharedTextFieldStyles)} .value=${this.value} @change=${this.propagateEvt} - @input=${this.onInput}>`; + @input=${this.onInput} + >`; } private renderColorInput() { @@ -158,7 +161,8 @@ export class KnobColorSelector extends LitElement { id="color-picker" .value=${this.value} @change=${this.propagateEvt} - @input=${this.onInput} /> + @input=${this.onInput} + /> `; } @@ -176,17 +180,17 @@ export class KnobColorSelector extends LitElement { this.dispatchEvent(newEvt); } - override click() { + click() { const input = this.renderRoot!.querySelector( - 'input,md-filled-text-field', + 'input,md-filled-text-field' ) as HTMLElement; input.click(); input.focus(); } - override focus() { + focus() { const input = this.renderRoot!.querySelector( - 'input,md-filled-text-field', + 'input,md-filled-text-field' ) as HTMLElement; input.focus(); } @@ -226,7 +230,8 @@ export function colorPicker(opts?: ColorPickerOpts): KnobUi { + @input=${valueChanged} + > ${knob.name}
@@ -245,7 +250,7 @@ const sharedTextFieldStyles: StyleInfo = { '--md-filled-field-trailing-space': '8px', '--md-filled-field-top-space': '4px', '--md-filled-field-bottom-space': '4px', - 'width': '150px', + width: '150px', 'min-width': '150px', }; @@ -272,7 +277,8 @@ export function textInput(options?: TextInputOptions): KnobUi { + @input="${valueChanged}" + > ${knob.name}
@@ -313,7 +319,8 @@ export function numberInput(opts?: NumberInputOpts): KnobUi { type="number" step="${config.step}" .value="${knob.latestValue ? knob.latestValue.toString() : '0'}" - @input="${valueChanged}"> + @input="${valueChanged}" + > ${knob.name}
@@ -333,7 +340,7 @@ export function button(): KnobUi { const count = knob.latestValue ?? 0; onChange(count + 1); }; - const styles = styleMap({display: 'inline-block'}); + const styles = styleMap({ display: 'inline-block' }); return html` ${knob.name} @@ -344,7 +351,10 @@ export function button(): KnobUi { } interface RadioSelectorConfig { - readonly options: ReadonlyArray<{readonly value: T; readonly label: string}>; + readonly options: ReadonlyArray<{ + readonly value: T; + readonly label: string; + }>; readonly name: string; } @@ -365,7 +375,8 @@ export function radioSelector({ name="${name}" value="${value}" @change="${valueChanged}" - ?checked="${knob.latestValue === option.value}"> + ?checked="${knob.latestValue === option.value}" + > ${option.label} `; }); @@ -375,7 +386,10 @@ export function radioSelector({ } interface SelectDropdownConfig { - readonly options: ReadonlyArray<{readonly value: T; readonly label: string}>; + readonly options: ReadonlyArray<{ + readonly value: T; + readonly label: string; + }>; } /** A select dropdown Knob UI. */ @@ -391,14 +405,17 @@ export function selectDropdown({ return html``; + > +
${option.label}
+ `; }); return html`