Merge pull request #72 from webcomponents-preview/feature/70-preview-…

…toggle-editor-link-debugger Feature/70 preview toggle editor link debugger
webcomponents-preview · Aug 15, 2023 · 1007f63 · 1007f63
2 parents 6587fef + 76a8fbc
commit 1007f63
Show file tree

Hide file tree

Showing 58 changed files with 559 additions and 222 deletions.
diff --git a/.barrelsby.json b/.barrelsby.json
@@ -2,7 +2,7 @@
   "directory": "src",
   "delete": true,
   "flat": true,
-  "include": ["components", "utils"],
+  "include": ["components", "plugins", "utils"],
   "exclude": [".*\\.test\\.ts$"],
   "singleQuotes": true
 }
diff --git a/src/components/features/markdown-example/markdown-example.component.ts b/src/components/features/markdown-example/markdown-example.component.ts
@@ -52,7 +52,7 @@ export class MarkdownExample extends ColorSchemable(LitElement) {
 
   protected override render(): TemplateResult {
     return html`
-      <wcp-tabs .tabs="${MARKDOWN_EXAMPLE_TABS}" active-tab="${ifDefined(this.#config.initialCodePreviewTab)}">
+      <wcp-tabs .tabs="${MARKDOWN_EXAMPLE_TABS}" active-tab="${ifDefined(this.#config?.initialCodePreviewTab)}">
         ${map(Object.keys(MARKDOWN_EXAMPLE_TABS), (tab) => html`<slot name="${tab}" slot="${tab}"></slot>`)}
       </wcp-tabs>
     `;

diff --git a/src/components/features/preview/preview.component.ts b/src/components/features/preview/preview.component.ts
@@ -72,7 +72,7 @@ export class Preview extends ColorSchemable(LitElement) {
         () => html`
           <nav>
             ${map(
-              this.#config.previewPlugins ?? [],
+              this.#config?.previewPlugins ?? [],
               (plugin, index) => html`
                 ${when(index > 0, () => html`<hr />`)} ${staticHtml`
                   <${unsafeStatic(plugin)}

diff --git a/src/components/features/stage/stage.component.ts b/src/components/features/stage/stage.component.ts
@@ -1,11 +1,12 @@
 import { LitElement, type TemplateResult, html, unsafeCSS } from 'lit';
-import { customElement, eventOptions, property, state } from 'lit/decorators.js';
+import { customElement, eventOptions, property, queryAssignedElements, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { map } from 'lit/directives/map.js';
 import { when } from 'lit/directives/when.js';
 
 import { ColorSchemable } from '@/mixins/color-schemable.mixin.js';
-import { type StagePlugin, findAllPlugins } from '@/utils/plugin.utils.js';
+import { log } from '@/utils/log.utils.js';
+import { isStagePlugin, type StagePlugin } from '@/utils/plugin.utils.js';
 
 import styles from './stage.component.scss';
 
@@ -34,6 +35,9 @@ import styles from './stage.component.scss';
 export class Stage extends ColorSchemable(LitElement) {
   static override readonly styles = unsafeCSS(styles);
 
+  @queryAssignedElements()
+  private readonly assignedPlugins!: HTMLElement[];
+
   @state()
   private _plugins: StagePlugin[] = [];
 
@@ -54,9 +58,9 @@ export class Stage extends ColorSchemable(LitElement) {
   }
 
   @eventOptions({ passive: true })
-  protected handleSlotChange(event: Event) {
-    const slot = event.target as HTMLSlotElement;
-    const plugins = findAllPlugins(slot);
+  protected handleSlotChange() {
+    const plugins = this.assignedPlugins.filter(isStagePlugin);
+    log.info(`Found ${plugins.length} stage plugins.`)
 
     // once the plugins are slotted into their respective targets, the slot
     // change listener may be called again with an empty result set

diff --git a/src/components/features/toggle-color-scheme/README.md b/src/components/features/toggle-color-scheme/README.md
@@ -15,9 +15,3 @@ Shows a button to toggle the desired color-scheme.
 | Method              | Type       |
 |---------------------|------------|
 | `handleButtonClick` | `(): void` |
-
-## Events
-
-| Event                     |
-|---------------------------|
-| `wcp-color-scheme:toggle` |
diff --git a/src/components/features/toggle-color-scheme/toggle-color-scheme.component.ts b/src/components/features/toggle-color-scheme/toggle-color-scheme.component.ts
@@ -2,6 +2,7 @@ import { LitElement, type TemplateResult, html, unsafeCSS } from 'lit';
 import { customElement, eventOptions } from 'lit/decorators.js';
 
 import { ColorSchemable } from '@/mixins/color-schemable.mixin.js';
+import { persist } from '@/utils/state.utils.js';
 
 import styles from './toggle-color-scheme.component.scss';
 
@@ -19,9 +20,8 @@ export class ToggleColorScheme extends ColorSchemable(LitElement) {
 
   @eventOptions({ passive: true })
   handleButtonClick() {
-    const detail = this.colorScheme === 'dark' ? 'light' : 'dark';
-    const event = new CustomEvent('wcp-color-scheme:toggle', { detail });
-    window.dispatchEvent(event);
+    const colorScheme = this.colorScheme === 'dark' ? 'light' : 'dark';
+    persist('color-scheme', colorScheme);
   }
 
   protected override render(): TemplateResult {

diff --git a/src/components/features/toggle-sidebar/README.md b/src/components/features/toggle-sidebar/README.md
@@ -13,9 +13,3 @@ Shows a button to toggle sidebar.
 | Method              | Type       |
 |---------------------|------------|
 | `handleButtonClick` | `(): void` |
-
-## Events
-
-| Event              |
-|--------------------|
-| `wcp-aside:toggle` |
diff --git a/src/components/features/toggle-sidebar/toggle-sidebar.component.ts b/src/components/features/toggle-sidebar/toggle-sidebar.component.ts
@@ -1,6 +1,8 @@
 import { LitElement, type TemplateResult, html, unsafeCSS } from 'lit';
 import { customElement, eventOptions } from 'lit/decorators.js';
 
+import { persist, read } from '@/utils/state.utils.js';
+
 import styles from './toggle-sidebar.component.scss';
 
 /**
@@ -17,7 +19,7 @@ export class ToggleSidebar extends LitElement {
 
   @eventOptions({ passive: true })
   handleButtonClick() {
-    window.dispatchEvent(new CustomEvent('wcp-aside:toggle'));
+    persist('aside-visible', !read('aside-visible'));
   }
 
   protected override render(): TemplateResult {

diff --git a/src/components/layout/aside/README.md b/src/components/layout/aside/README.md
@@ -15,15 +15,14 @@ window.dispatchEvent(new CustomEvent('wcp-aside:toggle', { detail: true }));
 
 | Property            | Attribute | Type      | Default                                          | Description                                      |
 |---------------------|-----------|-----------|--------------------------------------------------|--------------------------------------------------|
-| `hidden`            | `hidden`  | `boolean` | false                                            | Used to toggle the width of the aside bar        |
-| `listenAsideToggle` |           |           | "(({ detail }: CustomEvent<boolean \| null>) => {\n    this.hidden = detail ?? !this.hidden;\n    this.emitToggled();\n  }).bind(this)" |                                                  |
+| `hidden`            | `hidden`  | `boolean` | true                                             | Used to toggle the width of the aside bar        |
+| `listenAsideToggle` |           |           | "(({ detail }: CustomEvent<boolean>) => {\n    this.hidden = !detail;\n  }).bind(this)" |                                                  |
 | `role`              | `role`    | `string`  | "complementary"                                  | Presets the aria role to `complementary` as we do not use te aside element directly |
 
 ## Methods
 
 | Method              | Type       |
 |---------------------|------------|
-| `emitToggled`       | `(): void` |
 | `handleButtonClick` | `(): void` |
 
 ## Events

diff --git a/src/components/layout/aside/aside.component.ts b/src/components/layout/aside/aside.component.ts
@@ -2,6 +2,7 @@ import { LitElement, type TemplateResult, html, unsafeCSS } from 'lit';
 import { customElement, eventOptions, property } from 'lit/decorators.js';
 
 import { ColorSchemable } from '@/mixins/color-schemable.mixin.js';
+import { persist, read } from '@/utils/state.utils.js';
 
 import styles from './aside.component.scss';
 
@@ -38,7 +39,7 @@ export class Aside extends ColorSchemable(LitElement) {
    * Used to toggle the width of the aside bar
    */
   @property({ type: Boolean, reflect: true })
-  override hidden = false;
+  override hidden = !read('aside-visible');
 
   /**
    * Presets the aria role to `complementary` as we do not use te aside element directly
@@ -47,35 +48,23 @@ export class Aside extends ColorSchemable(LitElement) {
   @property({ type: String, reflect: true })
   override role = 'complementary';
 
-  emitToggled() {
-    const event = new CustomEvent('wcp-aside:toggled', {
-      bubbles: true,
-      cancelable: true,
-      composed: true,
-      detail: this.hidden,
-    });
-    this.dispatchEvent(event);
-  }
-
   @eventOptions({ passive: true })
   handleButtonClick() {
-    this.hidden = true;
-    this.emitToggled();
+    persist('aside-visible', false);
   }
 
-  listenAsideToggle = (({ detail }: CustomEvent<boolean | null>) => {
-    this.hidden = detail ?? !this.hidden;
-    this.emitToggled();
+  listenAsideToggle = (({ detail }: CustomEvent<boolean>) => {
+    this.hidden = !detail;
   }).bind(this);
 
   override connectedCallback() {
     super.connectedCallback();
-    window.addEventListener('wcp-aside:toggle', this.listenAsideToggle, false);
+    window.addEventListener('wcp-state-changed:aside-visible', this.listenAsideToggle, false);
   }
 
   override disconnectedCallback() {
     super.disconnectedCallback();
-    window.removeEventListener('wcp-aside:toggle', this.listenAsideToggle, false);
+    window.removeEventListener('wcp-state-changed:aside-visible', this.listenAsideToggle, false);
   }
 
   protected override render(): TemplateResult {
@@ -94,11 +83,8 @@ export class Aside extends ColorSchemable(LitElement) {
 }
 
 declare global {
-  interface WindowEventMap {
-    'wcp-aside:toggle': CustomEvent<boolean | null>;
-  }
-  interface HTMLElementEventMap {
-    'wcp-aside:toggled': CustomEvent<boolean>;
+  interface State {
+    ['aside-visible']: boolean;
   }
   interface HTMLElementTagNameMap {
     'wcp-aside': Aside;

diff --git a/src/components/layout/layout/README.md b/src/components/layout/layout/README.md
@@ -1,5 +1,7 @@
 # wcp-layout
 
+**Mixins:** ColorSchemable
+
 ## Example
 
 ```html

diff --git a/src/components/layout/layout/layout.component.scss b/src/components/layout/layout/layout.component.scss
@@ -1,9 +1,28 @@
 @use '@/styles/utils' as utils;
 
+// prettier-ignore
+:host {
+  ---wcp-layout-dark-background: var(--wcp-layout-dark-background, var(--wcp-color-blue-17));
+  ---wcp-layout-dark-color: var(--wcp-layout-dark-color, var(--wcp-color-grey-96));
+
+  ---wcp-layout-light-background: var(--wcp-layout-light-background, var(--wcp-color-blue-80));
+  ---wcp-layout-light-color: var(--wcp-layout-light-color, var(--wcp-color-grey-96));
+}
+
+:host {
+  @include utils.color-scheme() using ($color-scheme) {
+    ---wcp-layout-background: var(---wcp-layout-#{$color-scheme}-background);
+    ---wcp-layout-color: var(---wcp-layout-#{$color-scheme}-color);
+  }
+}
+
 :host {
   display: flex;
   flex-direction: row;
 
   height: 100%;
   overflow: hidden;
+
+  background-color: var(---wcp-layout-background);
+  color: var(---wcp-layout-color);
 }
diff --git a/src/components/layout/layout/layout.component.ts b/src/components/layout/layout/layout.component.ts
@@ -1,6 +1,8 @@
 import { LitElement, type TemplateResult, html, unsafeCSS } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
+import { ColorSchemable } from '@/mixins/color-schemable.mixin.js';
+
 import styles from './layout.component.scss';
 
 /**
@@ -17,7 +19,7 @@ import styles from './layout.component.scss';
  * @slot - Receives the content of the main section
  */
 @customElement('wcp-layout')
-export class Layout extends LitElement {
+export class Layout extends ColorSchemable(LitElement) {
   static override readonly styles = unsafeCSS(styles);
 
   protected override render(): TemplateResult {

diff --git a/src/components/root/README.md b/src/components/root/README.md
@@ -1,22 +1,20 @@
 # wcp-root
 
-**Mixins:** ColorSchemable
-
 ## Properties
 
-| Property          | Attribute      | Modifiers | Type                  | Default     | Description                                      |
-|-------------------|----------------|-----------|-----------------------|-------------|--------------------------------------------------|
-| `configUrl`       | `config-url`   |           | `string \| undefined` |             | Allows to set a url to load a config file from.  |
-| `inline`          | `inline`       |           | `boolean`             | false       | Flags the component to be displayed inline and not standalone. Requires the surrounding<br />layout to provide the necessary styles like for any other block element. |
-| `manifestUrl`     | `manifest-url` |           | `string`              |             | Defines the location of the custom element manifest file. |
-| `navigationItems` |                |           |                       | "new Map()" |                                                  |
-| `navigationRef`   |                | readonly  |                       |             |                                                  |
+| Property        | Attribute      | Modifiers | Type                  | Default | Description                                      |
+|-----------------|----------------|-----------|-----------------------|---------|--------------------------------------------------|
+| `configUrl`     | `config-url`   |           | `string \| undefined` |         | Allows to set a url to load a config file from.  |
+| `inline`        | `inline`       |           | `boolean`             | false   | Flags the component to be displayed inline and not standalone. Requires the surrounding<br />layout to provide the necessary styles like for any other block element. |
+| `manifestUrl`   | `manifest-url` |           | `string`              |         | Defines the location of the custom element manifest file. |
+| `navigationRef` |                | readonly  |                       |         |                                                  |
 
 ## Methods
 
-| Method              | Type                      |
-|---------------------|---------------------------|
-| `handleSearchInput` | `({ detail }: any): void` |
+| Method                      | Type                      |
+|-----------------------------|---------------------------|
+| `handleSearchInput`         | `({ detail }: any): void` |
+| `handleSplashTransitionEnd` | `(event: any): void`      |
 
 ## Events
 

diff --git a/src/components/root/root-splash/README.md b/src/components/root/root-splash/README.md
@@ -0,0 +1,32 @@
+# wcp-root-splash
+
+Shows a splash screen whilst initializing the application.
+
+## Example
+
+# Basic usage
+
+```html
+<wcp-root-splash>Loading...</wcp-root-splash>
+```
+
+## Properties
+
+| Property | Type      | Description                                      |
+|----------|-----------|--------------------------------------------------|
+| `hidden` | `boolean` | Use the global hidden attribute to fade out the splash screen. |
+
+## Slots
+
+| Name | Description                                      |
+|------|--------------------------------------------------|
+|      | The text content to be displayed in the splash screen. |
+
+## CSS Custom Properties
+
+| Property                                   | Description                                      |
+|--------------------------------------------|--------------------------------------------------|
+| `--wcp-root-splash-dark-background-color`  | The background color of the splash screen in dark mode. |
+| `--wcp-root-splash-dark-color`             | The text color of the splash screen in dark mode. |
+| `--wcp-root-splash-light-background-color` | The background color of the splash screen in light mode. |
+| `--wcp-root-splash-light-color`            | The text color of the splash screen in light mode. |
diff --git a/src/components/root/root-splash/root-splash.component.scss b/src/components/root/root-splash/root-splash.component.scss
@@ -0,0 +1,41 @@
+@use '@/styles/utils' as utils;
+
+:host {
+  ---wcp-root-splash-dark-background-color: var(--wcp-root-splash-dark-background-color, var(--wcp-color-blue-17));
+  ---wcp-root-splash-dark-color: var(--wcp-root-splash-dark-color, var(--wcp-color-grey-96));
+  ---wcp-root-splash-light-background-color: var(--wcp-root-splash-light-background-color, var(--wcp-color-grey-96));
+  ---wcp-root-splash-light-color: var(--wcp-root-splash-light-color, var(--wcp-color-blue-80));
+
+  @media (prefers-color-scheme: dark) {
+    ---wcp-root-splash-background-color: var(---wcp-root-splash-dark-background-color);
+    ---wcp-root-splash-color: var(---wcp-root-splash-dark-color);
+  }
+
+  @media (prefers-color-scheme: light) {
+    ---wcp-root-splash-background-color: var(---wcp-root-splash-light-background-color);
+    ---wcp-root-splash-color: var(---wcp-root-splash-light-color);
+  }
+}
+
+:host {
+  position: fixed;
+  inset: 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  background-color: var(---wcp-root-splash-background-color);
+  color: var(---wcp-root-splash-color);
+  font: var(--wcp-font-family);
+
+  transition: opacity 1s ease-in-out;
+
+  // prevent user interaction with splash screen
+  pointer-events: none;
+}
+
+:host([hidden]) {
+  opacity: 0;
+}