From 9eafb7473a986409285e4b3f49277e1c398319a1 Mon Sep 17 00:00:00 2001
From: carwack <sybren.willemot@gmail.com>
Date: Sun, 8 Oct 2023 00:04:12 +0200
Subject: [PATCH] fix(components): Add as prop examples

---
 packages/layout/examples/base-container.vue | 21 +++++-----
 packages/layout/examples/base-stack.vue     |  3 +-
 packages/layout/examples/base-text.vue      | 43 +++++++++++----------
 3 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/packages/layout/examples/base-container.vue b/packages/layout/examples/base-container.vue
index e15e7fb4..2692c0e8 100644
--- a/packages/layout/examples/base-container.vue
+++ b/packages/layout/examples/base-container.vue
@@ -1,17 +1,16 @@
 <template>
-  <c-container>
+  <CContainer>
     There are many benefits to a joint design and development system. Not only
     does it bring benefits to the design team, but it also brings benefits to
     engineering teams. It makes sure that our experiences have a consistent look
     and feel, not just in our design specs, but in production
-  </c-container>
-  <c-v-stack my="4">
-    <c-container max-w="container.xl">Extra-Large Container</c-container>
-    <c-container max-w="container.lg">Large Container</c-container>
-    <c-container max-w="container.md">Medium Container</c-container>
-    <c-container max-w="container.sm">Small Container</c-container>
-  </c-v-stack>
+  </CContainer>
+  <CVStack my="4">
+    <CContainer max-w="container.xl">Extra-Large Container</CContainer>
+    <CContainer max-w="container.lg">Large Container</CContainer>
+    <CContainer max-w="container.md">Medium Container</CContainer>
+    <CContainer max-w="container.sm">Small Container</CContainer>
+  </CVStack>
+
+  <CContainer as="span"> As prop span </CContainer>
 </template>
-<script setup>
-import { CVStack } from "../src"
-</script>
diff --git a/packages/layout/examples/base-stack.vue b/packages/layout/examples/base-stack.vue
index e4d1f564..158cefb4 100644
--- a/packages/layout/examples/base-stack.vue
+++ b/packages/layout/examples/base-stack.vue
@@ -39,7 +39,6 @@
   </chakra.div>
 </template>
 
-<script lang="ts" setup>
-import { CHStack, CVStack } from "../src"
+<script setup lang="ts">
 import { chakra } from "../../system/src"
 </script>
diff --git a/packages/layout/examples/base-text.vue b/packages/layout/examples/base-text.vue
index 744e5309..74a1509d 100644
--- a/packages/layout/examples/base-text.vue
+++ b/packages/layout/examples/base-text.vue
@@ -1,27 +1,30 @@
 <template>
-  <c-stack spacing="{3}">
-    <c-text fontSize="6xl">(6xl) In love with React & Next</c-text>
-    <c-text fontSize="5xl">(5xl) In love with React & Next</c-text>
-    <c-text fontSize="4xl">(4xl) In love with React & Next</c-text>
-    <c-text fontSize="3xl">(3xl) In love with React & Next</c-text>
-    <c-text fontSize="2xl">(2xl) In love with React & Next</c-text>
-    <c-text fontSize="xl">(xl) In love with React & Next</c-text>
-    <c-text fontSize="lg">(lg) In love with React & Next</c-text>
-    <c-text fontSize="md">(md) In love with React & Next</c-text>
-    <c-text fontSize="sm">(sm) In love with React & Next</c-text>
-    <c-text fontSize="xs">(xs) In love with React & Next</c-text>
-  </c-stack>
-  <c-divider my="4" />
-  <c-text>truncated:</c-text>
-  <c-text maxW="sm" isTruncated>
+  <CStack spacing="{3}">
+    <CText fontSize="6xl">(6xl) In love with React & Next</CText>
+    <CText fontSize="5xl">(5xl) In love with React & Next</CText>
+    <CText fontSize="4xl">(4xl) In love with React & Next</CText>
+    <CText fontSize="3xl">(3xl) In love with React & Next</CText>
+    <CText fontSize="2xl">(2xl) In love with React & Next</CText>
+    <CText fontSize="xl">(xl) In love with React & Next</CText>
+    <CText fontSize="lg">(lg) In love with React & Next</CText>
+    <CText fontSize="md">(md) In love with React & Next</CText>
+    <CText fontSize="sm">(sm) In love with React & Next</CText>
+    <CText fontSize="xs">(xs) In love with React & Next</CText>
+  </CStack>
+  <CDivider my="4" />
+  <CText>truncated:</CText>
+  <CText maxW="sm" isTruncated>
     Lorem ipsum is placeholder text commonly used in the graphic, print, and
     publishing industries for previewing layouts and visual mockups.
-  </c-text>
-  <c-divider my="4" />
-  <c-text>line clamp:</c-text>
-  <c-text :noOfLines="[1, 2, 3]" maxW="sm">
+  </CText>
+  <CDivider my="4" />
+  <CText>line clamp:</CText>
+  <CText :noOfLines="[1, 2, 3]" maxW="sm">
     "The quick brown fox jumps over the lazy dog" is an English-language
     pangram—a sentence that contains all of the letters of the English alphabet.
     Owing to its existence, Chakra was created.
-  </c-text>
+  </CText>
+  <CDivider my="4" />
+  <CText>As prop:</CText>
+  <CText as="h1" fontSize="xl"> As prop H1 </CText>
 </template>