From 80ce89daced9d9915ab200dfc594564df7fa683c Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Tue, 30 May 2023 19:28:27 +0100
Subject: [PATCH 1/4] docs(box): add box documentation

---
 components/content/examples/box/AirBnbBox.vue |  50 ++++++++
 components/content/examples/box/AsBox.vue     |   5 +
 components/content/examples/box/SimpleBox.vue |  11 ++
 content/4.components/box.md                   | 110 ++++++++++++++++++
 4 files changed, 176 insertions(+)
 create mode 100644 components/content/examples/box/AirBnbBox.vue
 create mode 100644 components/content/examples/box/AsBox.vue
 create mode 100644 components/content/examples/box/SimpleBox.vue
 create mode 100644 content/4.components/box.md

diff --git a/components/content/examples/box/AirBnbBox.vue b/components/content/examples/box/AirBnbBox.vue
new file mode 100644
index 0000000..5618b82
--- /dev/null
+++ b/components/content/examples/box/AirBnbBox.vue
@@ -0,0 +1,50 @@
+<template>
+  <c-box maxW="sm" border-width="1px" rounded="lg" overflow="hidden">
+    <c-image :src="property.imageUrl" :alt="property.imageAlt" />
+    <c-box p="6">
+      <c-box d="flex" align-items="baseline">
+        <c-badge rounded="full" px="2" variant-color="green">
+          New
+        </c-badge>
+        <c-box color="gray.500" font-weight="semibold" letter-spacing="wide" font-size="xs" text-transform="uppercase"
+          ml="2">
+          {{ property.beds }} beds &bull; {{ property.baths }} baths
+        </c-box>
+      </c-box>
+      <c-box mt="1" font-weight="semibold" as="h4" line-height="tight" is-truncated>
+        {{ property.title }}
+      </c-box>
+      <c-box>
+        {{ property.formattedPrice }}
+        <c-box as="span" color="gray.600" fontSize="sm">
+          / wk
+        </c-box>
+      </c-box>
+      <c-box d="flex" mt="2" align-items="center">
+        <c-icon v-for="(_, i) in Array(5).fill('')" name="star" :key="i"
+          :color="i < property.rating ? 'green.500' : 'gray.300'" />
+        <c-box as="span" ml="2" color="gray.600" font-size="sm">
+          {{ property.reviewCount }} reviews
+        </c-box>
+      </c-box>
+    </c-box>
+  </c-box>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+
+const property = reactive(
+  {
+    imageUrl: "https://bit.ly/2Z4KKcF",
+    imageAlt: "Rear view of modern home with pool",
+    beds: 3,
+    baths: 2,
+    title: "Modern home in city center in the heart of historic Los Angeles",
+    formattedPrice: "$1,900.00",
+    reviewCount: 34,
+    rating: 4,
+  }
+)
+
+</script>
\ No newline at end of file
diff --git a/components/content/examples/box/AsBox.vue b/components/content/examples/box/AsBox.vue
new file mode 100644
index 0000000..b9cbf60
--- /dev/null
+++ b/components/content/examples/box/AsBox.vue
@@ -0,0 +1,5 @@
+<template>
+    <c-box as="button" rounded="md" bg="tomato" color="white" px="4" h="8">
+        Button
+    </c-box>
+</template>
\ No newline at end of file
diff --git a/components/content/examples/box/SimpleBox.vue b/components/content/examples/box/SimpleBox.vue
new file mode 100644
index 0000000..b02d940
--- /dev/null
+++ b/components/content/examples/box/SimpleBox.vue
@@ -0,0 +1,11 @@
+<template>
+  <c-box bg="tomato" w="100%" p="4" color="white">
+    This is the Box
+  </c-box>
+</template>
+
+<script setup>
+import {
+  CBox
+} from "@chakra-ui/vue-next"
+</script>
diff --git a/content/4.components/box.md b/content/4.components/box.md
new file mode 100644
index 0000000..db5697e
--- /dev/null
+++ b/content/4.components/box.md
@@ -0,0 +1,110 @@
+---
+title: Box
+description: Box component
+version: 2.0+
+---
+# Box
+
+Box is the most abstract component on top of which all other `@chakra-ui/vue` components are built. By default, it renders a `div` element
+
+## Import
+
+Chakra UI Vue exports 5 accordion-related components.
+```js
+import { CBox } from "@chakra-ui/vue-next"
+```
+
+## Usage
+
+The Box component is useful because it helps with three common use cases:
+- Create responsive layouts with ease.
+- Provide a shorthand way to pass styles via props (`bg` instead of `backgroundColor`).
+- Compose new component and allow for override using the `as` prop.
+
+::showcase
+:simple-box
+::
+
+
+```html
+  <c-box bg="tomato" w="100%" p="4" color="white">
+    This is the Box
+  </c-box>
+```
+
+## Composition with `CBox`
+
+::showcase
+:air-bnb-box{width=full}
+::
+
+```html
+<template>
+  <c-box maxW="sm" border-width="1px" rounded="lg" overflow="hidden">
+    <c-image :src="property.imageUrl" :alt="property.imageAlt" />
+    <c-box p="6">
+      <c-box d="flex" align-items="baseline">
+        <c-badge rounded="full" px="2" variant-color="green">
+          New
+        </c-badge>
+        <c-box color="gray.500" font-weight="semibold" letter-spacing="wide" font-size="xs" text-transform="uppercase"
+          ml="2">
+          {{ property.beds }} beds &bull; {{ property.baths }} baths
+        </c-box>
+      </c-box>
+      <c-box mt="1" font-weight="semibold" as="h4" line-height="tight" is-truncated>
+        {{ property.title }}
+      </c-box>
+      <c-box>
+        {{ property.formattedPrice }}
+        <c-box as="span" color="gray.600" fontSize="sm">
+          / wk
+        </c-box>
+      </c-box>
+      <c-box d="flex" mt="2" align-items="center">
+        <c-icon v-for="(_, i) in Array(5).fill('')" name="star" :key="i"
+          :color="i < property.rating ? 'green.500' : 'gray.300'" />
+        <c-box as="span" ml="2" color="gray.600" font-size="sm">
+          {{ property.reviewCount }} reviews
+        </c-box>
+      </c-box>
+    </c-box>
+  </c-box>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+
+const property = reactive(
+  {
+    imageUrl: "https://bit.ly/2Z4KKcF",
+    imageAlt: "Rear view of modern home with pool",
+    beds: 3,
+    baths: 2,
+    title: "Modern home in city center in the heart of historic Los Angeles",
+    formattedPrice: "$1,900.00",
+    reviewCount: 34,
+    rating: 4,
+  }
+)
+
+</script>
+```
+
+## as prop
+
+You can use the `as` prop to change the element render, just like styled-components.
+
+::showcase
+:as-box{width-full}
+::
+
+```html
+<c-box as="button" rounded="md" bg="tomato" color="white" px="4" h="8">
+  Button
+</c-box>
+```
+
+## Props
+
+See all `CBox` props in the [Style props page](/styled-system/style-props)
\ No newline at end of file

From 53344c2f7771e4150fc25dc07831c914255cf199 Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Thu, 1 Jun 2023 22:23:07 +0100
Subject: [PATCH 2/4] chore: resolve code review

---
 content/4.components/box.md | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/content/4.components/box.md b/content/4.components/box.md
index db5697e..e3cb069 100644
--- a/content/4.components/box.md
+++ b/content/4.components/box.md
@@ -8,8 +8,6 @@ version: 2.0+
 Box is the most abstract component on top of which all other `@chakra-ui/vue` components are built. By default, it renders a `div` element
 
 ## Import
-
-Chakra UI Vue exports 5 accordion-related components.
 ```js
 import { CBox } from "@chakra-ui/vue-next"
 ```
@@ -27,9 +25,9 @@ The Box component is useful because it helps with three common use cases:
 
 
 ```html
-  <c-box bg="tomato" w="100%" p="4" color="white">
-    This is the Box
-  </c-box>
+<c-box bg="tomato" w="100%" p="4" color="white">
+  This is the Box
+</c-box>
 ```
 
 ## Composition with `CBox`

From 47e2b16fa919808fed3e4b8a95b45e0d6c729c94 Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Fri, 7 Jul 2023 09:15:55 +0100
Subject: [PATCH 3/4] refactor: change name casing box

---
 content/4.components/box.md | 52 ++++++++++++++++++-------------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/content/4.components/box.md b/content/4.components/box.md
index e3cb069..53492b2 100644
--- a/content/4.components/box.md
+++ b/content/4.components/box.md
@@ -25,9 +25,9 @@ The Box component is useful because it helps with three common use cases:
 
 
 ```html
-<c-box bg="tomato" w="100%" p="4" color="white">
+<CBox bg="tomato" w="100%" p="4" color="white">
   This is the Box
-</c-box>
+</CBox>
 ```
 
 ## Composition with `CBox`
@@ -38,36 +38,36 @@ The Box component is useful because it helps with three common use cases:
 
 ```html
 <template>
-  <c-box maxW="sm" border-width="1px" rounded="lg" overflow="hidden">
-    <c-image :src="property.imageUrl" :alt="property.imageAlt" />
-    <c-box p="6">
-      <c-box d="flex" align-items="baseline">
-        <c-badge rounded="full" px="2" variant-color="green">
+  <CBox maxW="sm" border-width="1px" rounded="lg" overflow="hidden">
+    <CImage :src="property.imageUrl" :alt="property.imageAlt" />
+    <CBox p="6">
+      <CBox d="flex" align-items="baseline">
+        <CBadge rounded="full" px="2" variant-color="green">
           New
-        </c-badge>
-        <c-box color="gray.500" font-weight="semibold" letter-spacing="wide" font-size="xs" text-transform="uppercase"
+        </CBadge>
+        <CBox color="gray.500" font-weight="semibold" letter-spacing="wide" font-size="xs" text-transform="uppercase"
           ml="2">
           {{ property.beds }} beds &bull; {{ property.baths }} baths
-        </c-box>
-      </c-box>
-      <c-box mt="1" font-weight="semibold" as="h4" line-height="tight" is-truncated>
+        </CBox>
+      </CBox>
+      <CBox mt="1" font-weight="semibold" as="h4" line-height="tight" is-truncated>
         {{ property.title }}
-      </c-box>
-      <c-box>
+      </CBox>
+      <CBox>
         {{ property.formattedPrice }}
-        <c-box as="span" color="gray.600" fontSize="sm">
+        <CBox as="span" color="gray.600" fontSize="sm">
           / wk
-        </c-box>
-      </c-box>
-      <c-box d="flex" mt="2" align-items="center">
-        <c-icon v-for="(_, i) in Array(5).fill('')" name="star" :key="i"
+        </CBox>
+      </CBox>
+      <CBox d="flex" mt="2" align-items="center">
+        <CIcon v-for="(_, i) in Array(5).fill('')" name="star" :key="i"
           :color="i < property.rating ? 'green.500' : 'gray.300'" />
-        <c-box as="span" ml="2" color="gray.600" font-size="sm">
+        <CBox as="span" ml="2" color="gray.600" font-size="sm">
           {{ property.reviewCount }} reviews
-        </c-box>
-      </c-box>
-    </c-box>
-  </c-box>
+        </CBox>
+      </CBox>
+    </CBox>
+  </CBox>
 </template>
 
 <script setup>
@@ -98,9 +98,9 @@ You can use the `as` prop to change the element render, just like styled-compone
 ::
 
 ```html
-<c-box as="button" rounded="md" bg="tomato" color="white" px="4" h="8">
+<CBox as="button" rounded="md" bg="tomato" color="white" px="4" h="8">
   Button
-</c-box>
+</CBox>
 ```
 
 ## Props

From 180852eb52707557bafac7f36a3e546aebf1ec61 Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Fri, 14 Jul 2023 12:49:20 +0100
Subject: [PATCH 4/4] refactor: change name casing box

---
 components/content/examples/box/AirBnbBox.vue | 44 +++++++++----------
 components/content/examples/box/AsBox.vue     |  4 +-
 components/content/examples/box/SimpleBox.vue |  4 +-
 3 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/components/content/examples/box/AirBnbBox.vue b/components/content/examples/box/AirBnbBox.vue
index 5618b82..ce0cd46 100644
--- a/components/content/examples/box/AirBnbBox.vue
+++ b/components/content/examples/box/AirBnbBox.vue
@@ -1,34 +1,34 @@
 <template>
-  <c-box maxW="sm" border-width="1px" rounded="lg" overflow="hidden">
-    <c-image :src="property.imageUrl" :alt="property.imageAlt" />
-    <c-box p="6">
-      <c-box d="flex" align-items="baseline">
-        <c-badge rounded="full" px="2" variant-color="green">
+  <CBox maxW="sm" border-width="1px" rounded="lg" overflow="hidden">
+    <CImage :src="property.imageUrl" :alt="property.imageAlt" />
+    <CBox p="6">
+      <CBox d="flex" align-items="baseline">
+        <CBadge rounded="full" px="2" variant-color="green">
           New
-        </c-badge>
-        <c-box color="gray.500" font-weight="semibold" letter-spacing="wide" font-size="xs" text-transform="uppercase"
+        </CBadge>
+        <CBox color="gray.500" font-weight="semibold" letter-spacing="wide" font-size="xs" text-transform="uppercase"
           ml="2">
           {{ property.beds }} beds &bull; {{ property.baths }} baths
-        </c-box>
-      </c-box>
-      <c-box mt="1" font-weight="semibold" as="h4" line-height="tight" is-truncated>
+        </CBox>
+      </CBox>
+      <CBox mt="1" font-weight="semibold" as="h4" line-height="tight" is-truncated>
         {{ property.title }}
-      </c-box>
-      <c-box>
+      </CBox>
+      <CBox>
         {{ property.formattedPrice }}
-        <c-box as="span" color="gray.600" fontSize="sm">
+        <CBox as="span" color="gray.600" fontSize="sm">
           / wk
-        </c-box>
-      </c-box>
-      <c-box d="flex" mt="2" align-items="center">
-        <c-icon v-for="(_, i) in Array(5).fill('')" name="star" :key="i"
+        </CBox>
+      </CBox>
+      <CBox d="flex" mt="2" align-items="center">
+        <CIcon v-for="(_, i) in Array(5).fill('')" name="star" :key="i"
           :color="i < property.rating ? 'green.500' : 'gray.300'" />
-        <c-box as="span" ml="2" color="gray.600" font-size="sm">
+        <CBox as="span" ml="2" color="gray.600" font-size="sm">
           {{ property.reviewCount }} reviews
-        </c-box>
-      </c-box>
-    </c-box>
-  </c-box>
+        </CBox>
+      </CBox>
+    </CBox>
+  </CBox>
 </template>
 
 <script setup>
diff --git a/components/content/examples/box/AsBox.vue b/components/content/examples/box/AsBox.vue
index b9cbf60..987166d 100644
--- a/components/content/examples/box/AsBox.vue
+++ b/components/content/examples/box/AsBox.vue
@@ -1,5 +1,5 @@
 <template>
-    <c-box as="button" rounded="md" bg="tomato" color="white" px="4" h="8">
+    <CBox as="button" rounded="md" bg="tomato" color="white" px="4" h="8">
         Button
-    </c-box>
+    </CBox>
 </template>
\ No newline at end of file
diff --git a/components/content/examples/box/SimpleBox.vue b/components/content/examples/box/SimpleBox.vue
index b02d940..2782a7d 100644
--- a/components/content/examples/box/SimpleBox.vue
+++ b/components/content/examples/box/SimpleBox.vue
@@ -1,7 +1,7 @@
 <template>
-  <c-box bg="tomato" w="100%" p="4" color="white">
+  <CBox bg="tomato" w="100%" p="4" color="white">
     This is the Box
-  </c-box>
+  </CBox>
 </template>
 
 <script setup>