Merge pull request #49 from chakra-ui/docs/sandbox-example

Docs: Code Sandbox example on homepage

Author: codebender828

.changeset/neat-rules-cry.md

@@ -0,0 +1,28 @@
+---
+'@chakra-ui/c-accordion': minor
+'@chakra-ui/c-alert': minor
+'@chakra-ui/c-badge': minor
+'@chakra-ui/c-button': minor
+'@chakra-ui/c-close-button': minor
+'@chakra-ui/c-color-mode': minor
+'@chakra-ui/c-flex': minor
+'@chakra-ui/c-icon': minor
+'@chakra-ui/c-modal': minor
+'@chakra-ui/c-popper': minor
+'@chakra-ui/c-portal': minor
+'@chakra-ui/c-reset': minor
+'@chakra-ui/c-spinner': minor
+'@chakra-ui/c-theme-provider': minor
+'@chakra-ui/c-visually-hidden': minor
+'@chakra-ui/vue-next': minor
+'@chakra-ui/nuxt-next': minor
+'@chakra-ui/vue-system': minor
+'@chakra-ui/vue-test-utils': minor
+'@chakra-ui/vue-theme': minor
+'@chakra-ui/vue-theme-tools': minor
+'@chakra-ui/vue-utils': minor
+'@chakra-ui/vue-auto-import': minor
+'@chakra-ui/vue-docs': minor
+---
+
+Add Iframe to Dom Element list

packages/system/src/system.utils.ts

@@ -35,6 +35,7 @@ export const domElements = [
   'h6',
   'header',
   'hr',
+  'iframe',
   'img',
   'input',
   'kbd',

website/src/components/SandboxExample.vue

@@ -0,0 +1,22 @@
+<template>
+  <chakra.div :mx="[0, 10, 12]" :mt="[4, 10, 10]" shadow="lg">
+    <chakra.iframe
+      title="Chakra UI Vue Starter Template for Vue 2"
+      src="https://codesandbox.io/embed/chakra-ui-vue-starter-template-for-vue-2-2sy0g?autoresize=1&codemirror=1&fontsize=12&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark"
+      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+      tabindex="0"
+      width="100%"
+      bg="white"
+      height="600px"
+    />
+  </chakra.div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'SandboxExample',
+})
+</script>

website/src/pages/index.vue

@@ -7,6 +7,7 @@
     bg="vue.50"
   >
     <Hero />
+    <SandboxExample />
     <PilersHero />
     <Footer />
   </chakra.main>
@@ -18,6 +19,7 @@ import Hero from '../components/home/Hero.vue'
 import PilersHero from '../components/home/PilersHero.vue'
 import Navbar from '../components/Navbar.vue'
 import Footer from '../components/home/Footer.vue'
+import SandboxExample from '../components/SandboxExample.vue'
 
 export default defineComponent({
   name: 'Index',
@@ -26,6 +28,7 @@ export default defineComponent({
     PilersHero,
     Navbar,
     Footer,
+    SandboxExample,
   },
 })
 </script>