From 46470733f1d7a891e304e55d61217ebc309e2f91 Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Wed, 21 Jun 2023 16:24:59 +0100
Subject: [PATCH 1/3] feat: center component documentation

---
 .../content/examples/center/IconCenter.vue    | 15 ++++
 .../content/examples/center/SimpleCenter.vue  |  8 ++
 .../examples/center/SquareAndCircle.vue       | 13 ++++
 content/4.components/center.md                | 76 +++++++++++++++++++
 content/4.components/checkbox.md              |  6 +-
 5 files changed, 114 insertions(+), 4 deletions(-)
 create mode 100644 components/content/examples/center/IconCenter.vue
 create mode 100644 components/content/examples/center/SimpleCenter.vue
 create mode 100644 components/content/examples/center/SquareAndCircle.vue
 create mode 100644 content/4.components/center.md

diff --git a/components/content/examples/center/IconCenter.vue b/components/content/examples/center/IconCenter.vue
new file mode 100644
index 0000000..3d1f084
--- /dev/null
+++ b/components/content/examples/center/IconCenter.vue
@@ -0,0 +1,15 @@
+<template>
+  <c-h-stack>
+    <c-center w='40px' h='40px' bg='tomato' color='white'>
+      <c-icon name="phone" />
+    </c-center>
+    <c-center w='40px' h='40px' bg='tomato' color='white'>
+      <c-box as='span' fontWeight='bold' fontSize='lg'>
+        1
+      </c-box>
+    </c-center>
+  </c-h-stack>
+</template>
+<script setup>
+import { CCenter, CHStack, CBox } from '@chakra-ui/vue-next';
+</script>
diff --git a/components/content/examples/center/SimpleCenter.vue b/components/content/examples/center/SimpleCenter.vue
new file mode 100644
index 0000000..896addf
--- /dev/null
+++ b/components/content/examples/center/SimpleCenter.vue
@@ -0,0 +1,8 @@
+<template>
+  <c-center bg='tomato' h='100px' color='white'>
+    This is the Center
+  </c-center>
+</template>
+<script setup>
+import { CCenter } from '@chakra-ui/vue-next';
+</script>
diff --git a/components/content/examples/center/SquareAndCircle.vue b/components/content/examples/center/SquareAndCircle.vue
new file mode 100644
index 0000000..af9a2ee
--- /dev/null
+++ b/components/content/examples/center/SquareAndCircle.vue
@@ -0,0 +1,13 @@
+<template>
+  <c-h-stack>
+    <c-circle size='40px' bg='teal.800' color='white'>
+      <c-icon name="phone" />
+    </c-circle>
+    <c-square size='40px' bg='rebeccapurple' color='white'>
+      <c-icon name="phone" />
+    </c-square>
+  </c-h-stack>
+</template>
+<script setup>
+import { CSquare, CCircle, CIcon } from '@chakra-ui/vue-next';
+</script>
diff --git a/content/4.components/center.md b/content/4.components/center.md
new file mode 100644
index 0000000..a501ed3
--- /dev/null
+++ b/content/4.components/center.md
@@ -0,0 +1,76 @@
+---
+title: Center
+description: Center Component
+version: 2.0+
+---
+
+# Center
+
+Center is a layout component that centers its child within itself.
+
+## Import
+
+```js
+import { CCenter, CCircle, CSquare } from '@chakra-ui/vue-next';
+```
+
+- CCenter: centers its child given `width` and `height`
+- CSquare: centers its child given `size` (width and height)
+- CCircle: a Square with round `border-radius`
+
+## Usage
+
+Put any child element inside it, give it any `width` or/and `height`, it'll ensure the child is centered.
+
+::showcase
+  ::simple-center{width=full}
+  ::
+::
+
+```html
+<c-center bg='tomato' h='100px' color='white'>
+    This is the Center
+</c-center>
+```
+
+## With Icons
+
+CCenter can be used to create frames around icons or numbers.
+
+::showcase
+::icon-center
+::
+::
+
+```html
+<c-h-stack>
+    <c-center w='40px' h='40px' bg='tomato' color='white'>
+        <c-icon name="phone" />
+    </c-center>
+    <c-center w='40px' h='40px' bg='tomato' color='white'>
+        <c-box as='span' fontWeight='bold' fontSize='lg'>
+        1
+        </c-box>
+    </c-center>
+</c-h-stack>
+```
+
+## Square and Circle
+
+The Square and Circle components automatically centers its children given the size.
+
+::showcase
+::square-and-circle
+::
+::
+
+```html
+<c-h-stack>
+    <c-circle size='40px' bg='teal.800' color='white'>
+        <c-icon name="phone" />
+    </c-circle>
+    <c-square size='40px' bg='rebeccapurple' color='white'>
+        <c-icon name="phone" />
+    </c-square>
+</c-h-stack>
+  ```
diff --git a/content/4.components/checkbox.md b/content/4.components/checkbox.md
index aadc11d..d1e7326 100644
--- a/content/4.components/checkbox.md
+++ b/content/4.components/checkbox.md
@@ -1,8 +1,6 @@
 ---
 title: Checkbox
-description:
-  Checkbox component is used in forms when a user needs to select multiple
-  values from several options.
+description: Checkbox Component
 version: 2.0+
 ---
 
@@ -13,7 +11,7 @@ Checkbox component is used in forms when a user needs to select multiple values
 ## Import
 
 ```js
-import { CCheckbox, CCheckboxGroup } from '@chakra-ui/vue'
+import { CCheckbox, CCheckboxGroup } from '@chakra-ui/vue-next';
 ```
 
 ## Usage

From 75ae863acc20c7b8591142dfd97f4760b2d0c598 Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Fri, 7 Jul 2023 08:58:16 +0100
Subject: [PATCH 2/3] refactor: change name casing center

---
 content/4.components/center.md | 38 +++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/content/4.components/center.md b/content/4.components/center.md
index a501ed3..3044dbf 100644
--- a/content/4.components/center.md
+++ b/content/4.components/center.md
@@ -28,9 +28,9 @@ Put any child element inside it, give it any `width` or/and `height`, it'll ensu
 ::
 
 ```html
-<c-center bg='tomato' h='100px' color='white'>
+<CCenter bg='tomato' h='100px' color='white'>
     This is the Center
-</c-center>
+</CCenter>
 ```
 
 ## With Icons
@@ -43,16 +43,16 @@ CCenter can be used to create frames around icons or numbers.
 ::
 
 ```html
-<c-h-stack>
-    <c-center w='40px' h='40px' bg='tomato' color='white'>
-        <c-icon name="phone" />
-    </c-center>
-    <c-center w='40px' h='40px' bg='tomato' color='white'>
-        <c-box as='span' fontWeight='bold' fontSize='lg'>
+<CHStack>
+    <CCenter w='40px' h='40px' bg='tomato' color='white'>
+        <CIcon name="phone" />
+    </CCenter>
+    <CCenter w='40px' h='40px' bg='tomato' color='white'>
+        <CBox as='span' fontWeight='bold' fontSize='lg'>
         1
-        </c-box>
-    </c-center>
-</c-h-stack>
+        </CBox>
+    </CCenter>
+</CHStack>
 ```
 
 ## Square and Circle
@@ -65,12 +65,12 @@ The Square and Circle components automatically centers its children given the si
 ::
 
 ```html
-<c-h-stack>
-    <c-circle size='40px' bg='teal.800' color='white'>
-        <c-icon name="phone" />
-    </c-circle>
-    <c-square size='40px' bg='rebeccapurple' color='white'>
-        <c-icon name="phone" />
-    </c-square>
-</c-h-stack>
+<CHStack>
+    <CCircle size='40px' bg='teal.800' color='white'>
+        <CIcon name="phone" />
+    </CCircle>
+    <CSquare size='40px' bg='rebeccapurple' color='white'>
+        <CIcon name="phone" />
+    </CSquare>
+</CHStack>
   ```

From ac6a84274d43098e2359658f4e17b80b9660ae68 Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Fri, 14 Jul 2023 13:15:02 +0100
Subject: [PATCH 3/3] refactor: change name casing center

---
 .../content/examples/center/IconCenter.vue    | 22 +++++++++----------
 .../content/examples/center/SimpleCenter.vue  |  7 ++----
 .../examples/center/SquareAndCircle.vue       | 21 ++++++++----------
 3 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/components/content/examples/center/IconCenter.vue b/components/content/examples/center/IconCenter.vue
index 3d1f084..a62a0e2 100644
--- a/components/content/examples/center/IconCenter.vue
+++ b/components/content/examples/center/IconCenter.vue
@@ -1,15 +1,13 @@
 <template>
-  <c-h-stack>
-    <c-center w='40px' h='40px' bg='tomato' color='white'>
-      <c-icon name="phone" />
-    </c-center>
-    <c-center w='40px' h='40px' bg='tomato' color='white'>
-      <c-box as='span' fontWeight='bold' fontSize='lg'>
+  <CHStack>
+    <CCenter w='40px' h='40px' bg='tomato' color='white'>
+      <CIcon name="phone" />
+    </CCenter>
+    <CCenter w='40px' h='40px' bg='tomato' color='white'>
+      <CBox as='span' fontWeight='bold' fontSize='lg'>
         1
-      </c-box>
-    </c-center>
-  </c-h-stack>
+      </CBox>
+    </CCenter>
+  </CHStack>
 </template>
-<script setup>
-import { CCenter, CHStack, CBox } from '@chakra-ui/vue-next';
-</script>
+
diff --git a/components/content/examples/center/SimpleCenter.vue b/components/content/examples/center/SimpleCenter.vue
index 896addf..1547b66 100644
--- a/components/content/examples/center/SimpleCenter.vue
+++ b/components/content/examples/center/SimpleCenter.vue
@@ -1,8 +1,5 @@
 <template>
-  <c-center bg='tomato' h='100px' color='white'>
+  <CCenter bg='tomato' h='100px' color='white'>
     This is the Center
-  </c-center>
+  </CCenter>
 </template>
-<script setup>
-import { CCenter } from '@chakra-ui/vue-next';
-</script>
diff --git a/components/content/examples/center/SquareAndCircle.vue b/components/content/examples/center/SquareAndCircle.vue
index af9a2ee..73216c1 100644
--- a/components/content/examples/center/SquareAndCircle.vue
+++ b/components/content/examples/center/SquareAndCircle.vue
@@ -1,13 +1,10 @@
 <template>
-  <c-h-stack>
-    <c-circle size='40px' bg='teal.800' color='white'>
-      <c-icon name="phone" />
-    </c-circle>
-    <c-square size='40px' bg='rebeccapurple' color='white'>
-      <c-icon name="phone" />
-    </c-square>
-  </c-h-stack>
-</template>
-<script setup>
-import { CSquare, CCircle, CIcon } from '@chakra-ui/vue-next';
-</script>
+  <CHStack>
+    <CCircle size='40px' bg='teal.800' color='white'>
+      <CIcon name="phone" />
+    </CCircle>
+    <CSquare size='40px' bg='rebeccapurple' color='white'>
+      <CIcon name="phone" />
+    </CSquare>
+  </CHStack>
+</template>
\ No newline at end of file