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

@@ -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.ts

@@ -1,6 +1,7 @@
 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';
 
@@ -11,24 +12,26 @@ export class MyHeading extends LitElement {
 
   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.
   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.
   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;
     }
   `;
 }