From 5dabccebe2139c4e863a7216236f43baba3ed567 Mon Sep 17 00:00:00 2001
From: kj <kj@begin.com>
Date: Fri, 17 Nov 2023 15:17:06 -0800
Subject: [PATCH] Adds context documentation

---
 app/docs/md/elements/state/context.md     | 77 +++++++++++++++++++++++
 app/docs/md/elements/state/instance-id.md |  5 ++
 app/docs/nav-data.mjs                     | 10 ++-
 3 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 app/docs/md/elements/state/context.md
 create mode 100644 app/docs/md/elements/state/instance-id.md

diff --git a/app/docs/md/elements/state/context.md b/app/docs/md/elements/state/context.md
new file mode 100644
index 00000000..07d2d941
--- /dev/null
+++ b/app/docs/md/elements/state/context.md
@@ -0,0 +1,77 @@
+---
+title: Context
+---
+
+The context object enables passing state to child elements without needing to resort to passing attributes down through multiple elements.
+
+## Update context
+
+The context object is passed as a key on the state object. Add data to the context object and it will be available to child elements.
+
+[Follow along by checking out the context demo from GitHub](https://github.com/enhance-dev/context-demo)
+
+Given this markup you can use the context object to pass state directly to a deeply nested child element.
+
+<doc-code filename="app/pages/index.html">
+
+```html
+<context-parent>
+  <my-container>
+    <my-contaier>
+      <my-contaier>
+        <context-heading></context-heading>
+      </my-contaier>
+    </my-contaier>
+  </my-container>
+</context-parent>
+```
+
+</doc-code>
+
+
+Add a heading key to context in the parent element
+
+<doc-code filename="app/pages/index.html">
+
+```javascript
+export default function ContextParent({ html, state }) {
+  const { context } = state
+  context.heading = 'Heading set via context'
+  return html`
+<style>
+ :host {
+   display: block;
+   height: 100dvh;
+   padding-top: 3rem;
+   text-align: center;
+   font-family: sans-serif;
+ }
+</style>
+<slot></slot>
+  `
+}
+```
+
+</doc-code>
+
+Render the heading passed via context in the deeply nested child element
+<doc-code filenam="app/elements/context/heading.mjs">
+
+```javascript
+export default function ContextHeading({ html, state }) {
+  const { context } = state
+  const { heading='Default heading' } = context
+  return html`
+<style>
+  :host > h1 {
+    font-size: 1.5rem;
+  }
+</style>
+<h1>${heading}</h1>
+  `
+}
+```
+
+</doc-code>
+
+
diff --git a/app/docs/md/elements/state/instance-id.md b/app/docs/md/elements/state/instance-id.md
new file mode 100644
index 00000000..ec8d9b30
--- /dev/null
+++ b/app/docs/md/elements/state/instance-id.md
@@ -0,0 +1,5 @@
+---
+title: Instance ID
+---
+
+
diff --git a/app/docs/nav-data.mjs b/app/docs/nav-data.mjs
index f1f4adf1..0524d959 100644
--- a/app/docs/nav-data.mjs
+++ b/app/docs/nav-data.mjs
@@ -82,7 +82,15 @@ export const data = [
         path: '/docs/elements/state/',
         label: 'State',
         hasChildren: true,
-        items: ['attributes', 'store'],
+        items: [
+          'attributes',
+          'store',
+          {
+            slug: 'instance-id',
+            label: 'Instance ID',
+          },
+          'context',
+        ],
       },
     ],
   },