From 6a67f4145a1159c83f5a454d63d16a29a448bdcc Mon Sep 17 00:00:00 2001
From: Moritz Bischof <moritz.bischof1@gmail.com>
Date: Mon, 3 May 2021 21:23:27 +0200
Subject: [PATCH] add documentation section with example

---
 docs/src/pages/components/ContextMenu.svx     |  8 ++-
 .../ContextMenu/ContextMenuInner.svelte       | 59 +++++++++++++++++++
 2 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 docs/src/pages/framed/ContextMenu/ContextMenuInner.svelte

diff --git a/docs/src/pages/components/ContextMenu.svx b/docs/src/pages/components/ContextMenu.svx
index d195fd63..d3316073 100644
--- a/docs/src/pages/components/ContextMenu.svx
+++ b/docs/src/pages/components/ContextMenu.svx
@@ -1,5 +1,5 @@
 ---
-components: ["ContextMenu", "ContextMenuGroup", "ContextMenuRadioGroup", "ContextMenuOption", "ContextMenuDivider"]
+components: ["ContextMenu", "ContextMenuInner", "ContextMenuGroup", "ContextMenuRadioGroup", "ContextMenuOption", "ContextMenuDivider"]
 ---
 
 <script>
@@ -14,4 +14,8 @@ In the examples, right click anywhere within the iframe.
 
 ### Radio groups
   
-<FileSource src="/framed/ContextMenu/ContextMenuGroups" />
\ No newline at end of file
+<FileSource src="/framed/ContextMenu/ContextMenuGroups" />
+
+### On specific element
+
+<FileSource src="/framed/ContextMenu/ContextMenuInner" />
diff --git a/docs/src/pages/framed/ContextMenu/ContextMenuInner.svelte b/docs/src/pages/framed/ContextMenu/ContextMenuInner.svelte
new file mode 100644
index 00000000..c070d0c5
--- /dev/null
+++ b/docs/src/pages/framed/ContextMenu/ContextMenuInner.svelte
@@ -0,0 +1,59 @@
+<script>
+  import {
+    ContextMenuDivider,
+    ContextMenuOption,
+    ContextMenuInner,
+  } from "carbon-components-svelte";
+  import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
+  import Cut16 from "carbon-icons-svelte/lib/Cut16";
+
+  let ref;
+  let open = false;
+  let x = 0;
+  let y = 0;
+</script>
+
+<svelte:window
+  on:click="{(e) => {
+    if (e.target.contains(ref)) open = false;
+  }}"
+  on:keydown="{(e) => {
+    if (open && e.key === 'Escape') open = false;
+  }}"
+/>
+
+<div
+  on:contextmenu|preventDefault="{(e) => {
+    x = e.x;
+    y = e.y;
+    open = true;
+  }}"
+></div>
+
+<ContextMenuInner bind:ref bind:open bind:x bind:y>
+  <ContextMenuOption
+    indented
+    labelText="Copy"
+    shortcutText="Ctrl+C"
+    icon="{CopyFile16}"
+  />
+  <ContextMenuOption
+    indented
+    labelText="Cut"
+    shortcutText="Ctrl+X"
+    icon="{Cut16}"
+  />
+  <ContextMenuDivider />
+  <ContextMenuOption indented kind="danger" labelText="Delete" />
+</ContextMenuInner>
+
+<style>
+  div {
+    position: absolute;
+    width: 50%;
+    height: 50%;
+    left: 25%;
+    top: 25%;
+    background-color: black;
+  }
+</style>