Update example to use colors

Author: augustjk

packages/lit-dev-content/samples/examples/context-consume-provide/level-context.ts

@@ -1,5 +1,5 @@
 import {createContext} from '@lit/context';
 
-export type Level = {level: number; prefix: string};
+export type Level = {level: number; color: string};
 
-export const levelContext = createContext<Level>(Symbol('prefix'));
+export const levelContext = createContext<Level>(Symbol('level'));

packages/lit-dev-content/samples/examples/context-consume-provide/my-app.ts

@@ -6,12 +6,12 @@ import './my-heading.js';
 @customElement('my-app')
 export class MyApp extends LitElement {
   render() {
-    // <my-heading> adjusts what heading tag to use based on the level context
-    // provided to it and prefixes with a provided numbering.
-
     // <my-section> serves as both context provider and consumer. It provides a
     // level value that is 1 greater than what's provided to it. This allows
     // nested <my-section> to provide a different value based on its depth.
+
+    // <my-heading> adjusts what heading tag to use and the color based on the
+    // level context.
     return html`
       <my-section>
         <my-heading>Heading level 1</my-heading>
@@ -51,6 +51,9 @@ export class MyApp extends LitElement {
             <my-heading>Heading level 3</my-heading>
             <my-section>
               <my-heading>Heading level 4</my-heading>
+              <my-section>
+                <my-heading>Heading level 5</my-heading>
+              </my-section>
             </my-section>
           </my-section>
         </my-section>

packages/lit-dev-content/samples/examples/context-consume-provide/my-heading.js

@@ -1,32 +1,38 @@
 import {LitElement} from 'lit';
 import {html, literal} from 'lit/static-html.js';
+import {styleMap} from 'lit/directives/style-map.js';
 import {ContextConsumer} from '@lit/context';
 import {levelContext} from './level-context.js';
 
 export class MyHeading extends LitElement {
   _levelContext = new ContextConsumer(this, {context: levelContext});
 
   get _tag() {
-    switch (this._levelContext.value.level) {
-      case 1:
+    switch (this._levelContext.value?.level) {
+      case 0:
         return literal`h1`;
-      case 2:
+      case 1:
         return literal`h2`;
-      case 3:
+      case 2:
         return literal`h3`;
-      case 4:
+      case 3:
         return literal`h4`;
-      case 5:
+      case 4:
         return literal`h5`;
-      case 6:
+      case 5:
         return literal`h6`;
       default:
         return literal`p`;
     }
   }
 
   render() {
-    return html`<${this._tag}><slot></slot></${this._tag}>`;
+    return html`
+      <${this._tag}
+        style=${styleMap({color: this._levelContext.value?.color})}
+      >
+        <slot></slot>
+      </${this._tag}>`;
   }
 }
 customElements.define('my-heading', MyHeading);

packages/lit-dev-content/samples/examples/context-consume-provide/my-heading.ts

@@ -1,34 +1,39 @@
 import {LitElement} from 'lit';
 import {html, literal} from 'lit/static-html.js';
 import {customElement} from 'lit/decorators.js';
+import {styleMap} from 'lit/directives/style-map.js';
 import {consume} from '@lit/context';
 import {levelContext, type Level} from './level-context.js';
 
 @customElement('my-heading')
 export class MyHeading extends LitElement {
+  // Consume the level and color from parent provider
   @consume({context: levelContext})
   private _level?: Level;
 
   private get _tag() {
     switch (this._level?.level) {
-      case 1:
+      case 0:
         return literal`h1`;
-      case 2:
+      case 1:
         return literal`h2`;
-      case 3:
+      case 2:
         return literal`h3`;
-      case 4:
+      case 3:
         return literal`h4`;
-      case 5:
+      case 4:
         return literal`h5`;
-      case 6:
+      case 5:
         return literal`h6`;
       default:
         return literal`p`;
     }
   }
 
   render() {
-    return html`<${this._tag}>${this._level?.prefix} <slot></slot></${this._tag}>`;
+    return html`
+      <${this._tag} style=${styleMap({color: this._level?.color})}>
+        <slot></slot>
+      </${this._tag}>`;
   }
 }

packages/lit-dev-content/samples/examples/context-consume-provide/my-section.ts

@@ -3,47 +3,38 @@ import {customElement} from 'lit/decorators.js';
 import {ContextProvider, ContextConsumer} from '@lit/context';
 import {levelContext} from './level-context.js';
 
+const COLORS = ['blue', 'orange', 'green', 'purple'];
+
 @customElement('my-section')
 export class MySection extends LitElement {
-  // Serve as a context provider with an initial level 1 and numbering prefix
-  // based on its numbering among siblings.
+  // Serve as a context provider with an initial level 1 and the color for that
+  // level
   private _provider = new ContextProvider(this, {
     context: levelContext,
-    initialValue: {
-      level: 1,
-      prefix: String(this._siblingNumber) + '.',
-    },
+    initialValue: {level: 0, color: COLORS[0]},
   });
 
   // Consumes level context from a parent provider. If a parent provider is
   // found, update own provider level to be 1 greater than provided value and
-  // append its sibling number.
+  // its corresponding color.
   private _consumer = new ContextConsumer(this, {
     context: levelContext,
-    callback: ({level, prefix}) => {
+    callback: ({level}) => {
       this._provider.setValue({
         level: level + 1,
-        prefix: prefix + String(this._siblingNumber) + '.',
+        color: COLORS[(level + 1) % COLORS.length],
       });
     },
   });
 
-  private get _siblingNumber() {
-    return (
-      Array.from(this.parentNode!.children)
-        .filter((el) => el instanceof MySection)
-        .indexOf(this) + 1
-    );
-  }
-
   render() {
     return html`<section><slot></slot></section>`;
   }
 
   static styles = css`
     :host {
       display: block;
-      margin-left: 1rem;
+      text-align: center;
     }
   `;
 }