From 831f3bfe76297d5af9fe28315b6ff0beb84dc478 Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Sat, 20 Mar 2021 06:01:34 -0700
Subject: [PATCH] docs(context-menu): add examples and test

---
 docs/src/pages/components/ContextMenu.svx     | 17 ++++++
 .../framed/ContextMenu/ContextMenu.svelte     | 45 ++++++++++++++
 .../ContextMenu/ContextMenuGroups.svelte      | 23 ++++++++
 tests/ContextMenu.test.svelte                 | 58 +++++++++++++++++++
 4 files changed, 143 insertions(+)
 create mode 100644 docs/src/pages/components/ContextMenu.svx
 create mode 100644 docs/src/pages/framed/ContextMenu/ContextMenu.svelte
 create mode 100644 docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte
 create mode 100644 tests/ContextMenu.test.svelte

diff --git a/docs/src/pages/components/ContextMenu.svx b/docs/src/pages/components/ContextMenu.svx
new file mode 100644
index 00000000..d195fd63
--- /dev/null
+++ b/docs/src/pages/components/ContextMenu.svx
@@ -0,0 +1,17 @@
+---
+components: ["ContextMenu", "ContextMenuGroup", "ContextMenuRadioGroup", "ContextMenuOption", "ContextMenuDivider"]
+---
+
+<script>
+    import Preview from "../../components/Preview.svelte";
+</script>
+
+In the examples, right click anywhere within the iframe.
+  
+### Default
+  
+<FileSource src="/framed/ContextMenu/ContextMenu" />
+
+### Radio groups
+  
+<FileSource src="/framed/ContextMenu/ContextMenuGroups" />
\ No newline at end of file
diff --git a/docs/src/pages/framed/ContextMenu/ContextMenu.svelte b/docs/src/pages/framed/ContextMenu/ContextMenu.svelte
new file mode 100644
index 00000000..8ea32eb9
--- /dev/null
+++ b/docs/src/pages/framed/ContextMenu/ContextMenu.svelte
@@ -0,0 +1,45 @@
+<script>
+  import {
+    ContextMenu,
+    ContextMenuDivider,
+    ContextMenuGroup,
+    ContextMenuOption,
+  } from "carbon-components-svelte";
+  import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
+  import Cut16 from "carbon-icons-svelte/lib/Cut16";
+
+  let selectedIds = [];
+
+  $: console.log("selectedIds", selectedIds);
+</script>
+
+<ContextMenu>
+  <ContextMenuOption
+    indented
+    labelText="Copy"
+    shortcutText="⌘C"
+    icon="{CopyFile16}"
+  />
+  <ContextMenuOption
+    indented
+    labelText="Cut"
+    shortcutText="⌘X"
+    icon="{Cut16}"
+  />
+  <ContextMenuDivider />
+  <ContextMenuOption indented labelText="Export as">
+    <ContextMenuGroup labelText="Export options" bind:selectedIds>
+      <ContextMenuOption id="pdf" labelText="PDF" />
+      <ContextMenuOption id="txt" labelText="TXT" />
+      <ContextMenuOption id="mp3" labelText="MP3" />
+    </ContextMenuGroup>
+  </ContextMenuOption>
+  <ContextMenuDivider />
+  <ContextMenuOption selectable labelText="Remove metadata" />
+  <ContextMenuDivider />
+  <ContextMenuGroup labelText="Style options">
+    <ContextMenuOption id="0" labelText="Font smoothing" selected />
+    <ContextMenuOption id="1" labelText="Reduce noise" />
+    <ContextMenuOption id="2" labelText="Auto-sharpen" />
+  </ContextMenuGroup>
+</ContextMenu>
diff --git a/docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte b/docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte
new file mode 100644
index 00000000..06257114
--- /dev/null
+++ b/docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte
@@ -0,0 +1,23 @@
+<script>
+  import {
+    ContextMenu,
+    ContextMenuDivider,
+    ContextMenuOption,
+    ContextMenuRadioGroup,
+  } from "carbon-components-svelte";
+
+  let selectedId = "0";
+
+  $: console.log("selectedId", selectedId);
+</script>
+
+<ContextMenu>
+  <ContextMenuOption indented labelText="Open" />
+  <ContextMenuDivider />
+  <ContextMenuRadioGroup bind:selectedId labelText="Radio group">
+    <ContextMenuOption id="0" labelText="Set as foreground" />
+    <ContextMenuOption id="1" labelText="Set as background" />
+  </ContextMenuRadioGroup>
+  <ContextMenuDivider />
+  <ContextMenuOption selectable labelText="Lock layer" />
+</ContextMenu>
diff --git a/tests/ContextMenu.test.svelte b/tests/ContextMenu.test.svelte
new file mode 100644
index 00000000..fec21aa5
--- /dev/null
+++ b/tests/ContextMenu.test.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import {
+    ContextMenu,
+    ContextMenuDivider,
+    ContextMenuOption,
+    ContextMenuRadioGroup,
+    ContextMenuGroup,
+  } from "../types";
+  import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16";
+  import Cut16 from "carbon-icons-svelte/lib/Cut16";
+
+  let selectedId = "0";
+  let selectedIds = [];
+
+  $: console.log("selectedId", selectedId);
+</script>
+
+<ContextMenu>
+  <ContextMenuOption
+    indented
+    labelText="Copy"
+    shortcutText="⌘C"
+    icon="{CopyFile16}"
+  />
+  <ContextMenuOption
+    indented
+    labelText="Cut"
+    shortcutText="⌘X"
+    icon="{Cut16}"
+  />
+  <ContextMenuDivider />
+  <ContextMenuOption indented labelText="Export as">
+    <ContextMenuGroup labelText="Export options" bind:selectedIds>
+      <ContextMenuOption id="pdf" labelText="PDF" />
+      <ContextMenuOption id="txt" labelText="TXT" />
+      <ContextMenuOption id="mp3" labelText="MP3" />
+    </ContextMenuGroup>
+  </ContextMenuOption>
+  <ContextMenuDivider />
+  <ContextMenuOption selectable labelText="Remove metadata" />
+  <ContextMenuDivider />
+  <ContextMenuGroup labelText="Style options">
+    <ContextMenuOption id="0" labelText="Font smoothing" selected />
+    <ContextMenuOption id="1" labelText="Reduce noise" />
+    <ContextMenuOption id="2" labelText="Auto-sharpen" />
+  </ContextMenuGroup>
+</ContextMenu>
+
+<ContextMenu on:open on:close>
+  <ContextMenuOption indented labelText="Open" />
+  <ContextMenuDivider />
+  <ContextMenuRadioGroup bind:selectedId labelText="Radio group">
+    <ContextMenuOption id="0" labelText="Set as foreground" />
+    <ContextMenuOption id="1" labelText="Set as background" />
+  </ContextMenuRadioGroup>
+  <ContextMenuDivider />
+  <ContextMenuOption indented labelText="Lock layer" />
+</ContextMenu>