From a363e4169b7c0a1d2730860c24eeaa3fc8af5c85 Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Thu, 8 Jul 2021 16:25:37 -0700
Subject: [PATCH] docs(date-picker): extract single type to iframe

---
 docs/src/pages/components/DatePicker.svx                 | 4 +---
 docs/src/pages/framed/DatePicker/DatePickerSingle.svelte | 7 +++++++
 2 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 docs/src/pages/framed/DatePicker/DatePickerSingle.svelte

diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx
index 41a58813..6ea1ea8c 100644
--- a/docs/src/pages/components/DatePicker.svx
+++ b/docs/src/pages/components/DatePicker.svx
@@ -57,9 +57,7 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
 
 ### Single
 
-<DatePicker datePickerType="single" on:change>
-  <DatePickerInput labelText="Schedule a meeting" placeholder="mm/dd/yyyy" />
-</DatePicker>
+<FileSource src="/framed/DatePicker/DatePickerSingle" />
 
 ### Range
 
diff --git a/docs/src/pages/framed/DatePicker/DatePickerSingle.svelte b/docs/src/pages/framed/DatePicker/DatePickerSingle.svelte
new file mode 100644
index 00000000..36b8f60a
--- /dev/null
+++ b/docs/src/pages/framed/DatePicker/DatePickerSingle.svelte
@@ -0,0 +1,7 @@
+<script>
+  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
+</script>
+
+<DatePicker datePickerType="single" on:change>
+  <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
+</DatePicker>