From 9207665f0c117a3f01563e40669e73e47d42b23a Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Sat, 17 Jun 2023 09:41:10 +0100
Subject: [PATCH 1/3] feat: badge component documentation

---
 .../content/examples/badge/BaseBadge.vue      |   7 ++
 .../content/examples/badge/ColorBadge.vue     |  12 ++
 .../examples/badge/CompositionBadge.vue       |  18 +++
 .../examples/badge/CompositionBadgeTwo.vue    |  12 ++
 .../content/examples/badge/VariantBadge.vue   |  11 ++
 content/4.components/badge.md                 | 118 ++++++++++++++++++
 6 files changed, 178 insertions(+)
 create mode 100644 components/content/examples/badge/BaseBadge.vue
 create mode 100644 components/content/examples/badge/ColorBadge.vue
 create mode 100644 components/content/examples/badge/CompositionBadge.vue
 create mode 100644 components/content/examples/badge/CompositionBadgeTwo.vue
 create mode 100644 components/content/examples/badge/VariantBadge.vue
 create mode 100644 content/4.components/badge.md

diff --git a/components/content/examples/badge/BaseBadge.vue b/components/content/examples/badge/BaseBadge.vue
new file mode 100644
index 0000000..0fd36b3
--- /dev/null
+++ b/components/content/examples/badge/BaseBadge.vue
@@ -0,0 +1,7 @@
+<template>
+    <c-badge>Default</c-badge>
+</template>
+<script setup>
+import { CBadge } from '@chakra-ui/vue-next';
+</script>
+  
\ No newline at end of file
diff --git a/components/content/examples/badge/ColorBadge.vue b/components/content/examples/badge/ColorBadge.vue
new file mode 100644
index 0000000..39bf778
--- /dev/null
+++ b/components/content/examples/badge/ColorBadge.vue
@@ -0,0 +1,12 @@
+<template>
+    <c-stack direction='row'>
+        <c-badge>Default</c-badge>
+        <c-badge color-scheme='green'>Success</c-badge>
+        <c-badge color-scheme='red'>Removed</c-badge>
+        <c-badge color-scheme='purple'>New</c-badge>
+    </c-stack>
+</template>
+<script setup>
+import { CStack, CBadge } from '@chakra-ui/vue-next';
+</script>
+  
\ No newline at end of file
diff --git a/components/content/examples/badge/CompositionBadge.vue b/components/content/examples/badge/CompositionBadge.vue
new file mode 100644
index 0000000..68e6651
--- /dev/null
+++ b/components/content/examples/badge/CompositionBadge.vue
@@ -0,0 +1,18 @@
+<template>
+    <c-flex>
+        <c-avatar src="https://bit.ly/chakra-jonathan-bakebwa" />
+        <c-box ml="3">
+            <c-text font-weight="bold">
+                Jonathan Bakebwa
+                <c-badge ml="1" color-scheme="green">
+                    New
+                </c-badge>
+            </c-text>
+            <c-text font-size="sm">UI Engineer</c-text>
+        </c-box>
+    </c-flex>
+</template>
+<script setup>
+import { CBadge, CFlex, CText, CBox } from '@chakra-ui/vue-next';
+</script>
+  
\ No newline at end of file
diff --git a/components/content/examples/badge/CompositionBadgeTwo.vue b/components/content/examples/badge/CompositionBadgeTwo.vue
new file mode 100644
index 0000000..3a8f6b4
--- /dev/null
+++ b/components/content/examples/badge/CompositionBadgeTwo.vue
@@ -0,0 +1,12 @@
+<template>
+    <c-text font-weight="bold">
+        Jonathan Bakebwa
+        <c-badge ml="1" font-size="1em" color-scheme="green">
+            New
+        </c-badge>
+    </c-text>
+</template>
+<script setup>
+import { CBadge, CFlex, CText, CBox } from '@chakra-ui/vue-next';
+</script>
+  
\ No newline at end of file
diff --git a/components/content/examples/badge/VariantBadge.vue b/components/content/examples/badge/VariantBadge.vue
new file mode 100644
index 0000000..2d06aaa
--- /dev/null
+++ b/components/content/examples/badge/VariantBadge.vue
@@ -0,0 +1,11 @@
+<template>
+    <c-stack direction='row'>
+        <c-badge mx="2" variant="subtle" color-scheme="green">Subtle</c-badge>
+        <c-badge mx="2" variant="solid" color-scheme="green">Solid</c-badge>
+        <c-badge mx="2" variant="outline" color-scheme="green">Outline</c-badge>
+    </c-stack>
+</template>
+<script setup>
+import { CStack, CBadge } from '@chakra-ui/vue-next';
+</script>
+  
\ No newline at end of file
diff --git a/content/4.components/badge.md b/content/4.components/badge.md
new file mode 100644
index 0000000..cd940c9
--- /dev/null
+++ b/content/4.components/badge.md
@@ -0,0 +1,118 @@
+---
+title: Badge
+description: Badge Component
+version: 2.0+
+---
+
+# Badge
+
+The `CBadge` component is used to highlight an item's status for quick recognition.
+
+## Import
+
+```js
+import { CBadge } from '@chakra-ui/vue-next';
+```
+
+## Usage
+
+::showcase
+::base-badge
+::
+::
+
+```html
+<c-badge>Default</c-badge>
+```
+
+### Badge Color
+
+Pass the `color-scheme` prop to customize the color of the `CBadge`. `variant-color` can be any color key that exists in the `$chakra.theme.colors`. Here `$chakra.theme` is your theme object. 
+<!-- once styled system theming is up: Learn more about theming -->
+
+::showcase
+::wrap{align="center"}
+::color-badge
+::
+
+```html
+<c-stack direction='row'>
+    <c-badge>Default</c-badge>
+    <c-badge color-scheme='green'>Success</c-badge>
+    <c-badge color-scheme='red'>Removed</c-badge>
+    <c-badge color-scheme='purple'>New</c-badge>
+</c-stack>
+```
+
+### Badge Variants
+
+Pass the `variant` prop and set it to either `subtle`, `solid`, or `outline` to get a different style.
+
+::showcase
+::variant-badge
+::
+::
+
+```html
+<c-stack direction='row'>
+    <c-badge mx="2" variant="subtle" color-scheme="green">Subtle</c-badge>
+    <c-badge mx="2" variant="solid" color-scheme="green">Solid</c-badge>
+    <c-badge mx="2" variant="outline" color-scheme="green">Outline</c-badge>
+</c-stack>
+```
+
+## Compositon
+
+
+::showcase
+::composition-badge
+::
+::
+
+```html
+<c-flex>
+    <c-avatar src="https://bit.ly/chakra-jonathan-bakebwa" />
+    <c-box ml="3">
+        <c-text font-weight="bold">
+            Jonathan Bakebwa
+            <c-badge ml="1" color-scheme="green">
+                New
+            </c-badge>
+        </c-text>
+        <c-text font-size="sm">UI Engineer</c-text>
+    </c-box>
+</c-flex>
+```
+
+You can also change the size of the badge by passing `font-size` prop.
+
+::showcase
+::composition-badge-two
+::
+::
+
+```html
+<c-text font-weight="bold">
+  Jonathan Bakebwa
+  <c-badge ml="1" font-size="1em" variant-color="green">
+    New
+  </c-badge>
+</c-text>
+```
+
+## Props
+
+> The `CBadge` component composes `CBox` component so you can pass props for `Box`.
+
+| Name            | Type                         | Default  | Description                                                                    |
+|-----------------|------------------------------|----------|--------------------------------------------------------------------------------|
+| `variant`       | `solid`, `subtle`, `outline` | `subtle` | The style variant of the badge                                                 |
+| `variant-color` | `string`                     | `gray`   | The color scheme to use for the badge. Must be a key in `$chakra.theme.colors` |
+
+
+## Slots
+
+| Name | Description                |
+|---------|----------------------------|
+| default | Text rendered inside badge |
+

From 44ddd14f5b25a7b15c9e834c7b7f2baec79e671e Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Fri, 7 Jul 2023 09:04:53 +0100
Subject: [PATCH 2/3] refactor: change name casing badge

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

diff --git a/content/4.components/badge.md b/content/4.components/badge.md
index cd940c9..5c5a961 100644
--- a/content/4.components/badge.md
+++ b/content/4.components/badge.md
@@ -22,7 +22,7 @@ import { CBadge } from '@chakra-ui/vue-next';
 ::
 
 ```html
-<c-badge>Default</c-badge>
+<CBadge>Default</CBadge>
 ```
 
 ### Badge Color
@@ -36,12 +36,12 @@ Pass the `color-scheme` prop to customize the color of the `CBadge`. `variant-co
 ::
 
 ```html
-<c-stack direction='row'>
-    <c-badge>Default</c-badge>
-    <c-badge color-scheme='green'>Success</c-badge>
-    <c-badge color-scheme='red'>Removed</c-badge>
-    <c-badge color-scheme='purple'>New</c-badge>
-</c-stack>
+<CStack direction='row'>
+    <CBadge>Default</CBadge>
+    <CBadge color-scheme='green'>Success</CBadge>
+    <CBadge color-scheme='red'>Removed</CBadge>
+    <CBadge color-scheme='purple'>New</CBadge>
+</CStack>
 ```
 
 ### Badge Variants
@@ -54,11 +54,11 @@ Pass the `variant` prop and set it to either `subtle`, `solid`, or `outline` to
 ::
 
 ```html
-<c-stack direction='row'>
-    <c-badge mx="2" variant="subtle" color-scheme="green">Subtle</c-badge>
-    <c-badge mx="2" variant="solid" color-scheme="green">Solid</c-badge>
-    <c-badge mx="2" variant="outline" color-scheme="green">Outline</c-badge>
-</c-stack>
+<CStack direction='row'>
+    <CBadge mx="2" variant="subtle" color-scheme="green">Subtle</CBadge>
+    <CBadge mx="2" variant="solid" color-scheme="green">Solid</CBadge>
+    <CBadge mx="2" variant="outline" color-scheme="green">Outline</CBadge>
+</CStack>
 ```
 
 ## Compositon
@@ -70,18 +70,18 @@ Pass the `variant` prop and set it to either `subtle`, `solid`, or `outline` to
 ::
 
 ```html
-<c-flex>
-    <c-avatar src="https://bit.ly/chakra-jonathan-bakebwa" />
-    <c-box ml="3">
-        <c-text font-weight="bold">
+<CFlex>
+    <CAvatar src="https://bit.ly/chakra-jonathan-bakebwa" />
+    <CBox ml="3">
+        <CText font-weight="bold">
             Jonathan Bakebwa
-            <c-badge ml="1" color-scheme="green">
+            <CBadge ml="1" color-scheme="green">
                 New
-            </c-badge>
-        </c-text>
-        <c-text font-size="sm">UI Engineer</c-text>
-    </c-box>
-</c-flex>
+            </CBadge>
+        </CText>
+        <CText font-size="sm">UI Engineer</CText>
+    </CBox>
+</CFlex>
 ```
 
 You can also change the size of the badge by passing `font-size` prop.
@@ -92,12 +92,12 @@ You can also change the size of the badge by passing `font-size` prop.
 ::
 
 ```html
-<c-text font-weight="bold">
+<CText font-weight="bold">
   Jonathan Bakebwa
-  <c-badge ml="1" font-size="1em" variant-color="green">
+  <CBadge ml="1" font-size="1em" variant-color="green">
     New
-  </c-badge>
-</c-text>
+  </CBadge>
+</CText>
 ```
 
 ## Props

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

---
 .../content/examples/badge/BaseBadge.vue      |  6 +----
 .../content/examples/badge/ColorBadge.vue     | 17 +++++-------
 .../examples/badge/CompositionBadge.vue       | 26 ++++++++-----------
 .../examples/badge/CompositionBadgeTwo.vue    | 14 ++++------
 .../content/examples/badge/VariantBadge.vue   | 13 ++++------
 5 files changed, 29 insertions(+), 47 deletions(-)

diff --git a/components/content/examples/badge/BaseBadge.vue b/components/content/examples/badge/BaseBadge.vue
index 0fd36b3..1c7b521 100644
--- a/components/content/examples/badge/BaseBadge.vue
+++ b/components/content/examples/badge/BaseBadge.vue
@@ -1,7 +1,3 @@
 <template>
-    <c-badge>Default</c-badge>
+    <CBadge>Default</CBadge>
 </template>
-<script setup>
-import { CBadge } from '@chakra-ui/vue-next';
-</script>
-  
\ No newline at end of file
diff --git a/components/content/examples/badge/ColorBadge.vue b/components/content/examples/badge/ColorBadge.vue
index 39bf778..2b141b7 100644
--- a/components/content/examples/badge/ColorBadge.vue
+++ b/components/content/examples/badge/ColorBadge.vue
@@ -1,12 +1,9 @@
 <template>
-    <c-stack direction='row'>
-        <c-badge>Default</c-badge>
-        <c-badge color-scheme='green'>Success</c-badge>
-        <c-badge color-scheme='red'>Removed</c-badge>
-        <c-badge color-scheme='purple'>New</c-badge>
-    </c-stack>
-</template>
-<script setup>
-import { CStack, CBadge } from '@chakra-ui/vue-next';
-</script>
+    <CStack direction='row'>
+        <CBadge>Default</CBadge>
+        <CBadge color-scheme='green'>Success</CBadge>
+        <CBadge color-scheme='red'>Removed</CBadge>
+        <CBadge color-scheme='purple'>New</CBadge>
+    </CStack>
+</template> 
   
\ No newline at end of file
diff --git a/components/content/examples/badge/CompositionBadge.vue b/components/content/examples/badge/CompositionBadge.vue
index 68e6651..172bf27 100644
--- a/components/content/examples/badge/CompositionBadge.vue
+++ b/components/content/examples/badge/CompositionBadge.vue
@@ -1,18 +1,14 @@
 <template>
-    <c-flex>
-        <c-avatar src="https://bit.ly/chakra-jonathan-bakebwa" />
-        <c-box ml="3">
-            <c-text font-weight="bold">
+    <CFlex>
+        <CAvatar src="https://bit.ly/chakra-jonathan-bakebwa" />
+        <CBox ml="3">
+            <CText font-weight="bold">
                 Jonathan Bakebwa
-                <c-badge ml="1" color-scheme="green">
+                <CBadge ml="1" color-scheme="green">
                     New
-                </c-badge>
-            </c-text>
-            <c-text font-size="sm">UI Engineer</c-text>
-        </c-box>
-    </c-flex>
-</template>
-<script setup>
-import { CBadge, CFlex, CText, CBox } from '@chakra-ui/vue-next';
-</script>
-  
\ No newline at end of file
+                </CBadge>
+            </CText>
+            <CText font-size="sm">UI Engineer</CText>
+        </CBox>
+    </CFlex>
+</template>  
\ No newline at end of file
diff --git a/components/content/examples/badge/CompositionBadgeTwo.vue b/components/content/examples/badge/CompositionBadgeTwo.vue
index 3a8f6b4..7fa6809 100644
--- a/components/content/examples/badge/CompositionBadgeTwo.vue
+++ b/components/content/examples/badge/CompositionBadgeTwo.vue
@@ -1,12 +1,8 @@
 <template>
-    <c-text font-weight="bold">
+    <CText font-weight="bold">
         Jonathan Bakebwa
-        <c-badge ml="1" font-size="1em" color-scheme="green">
+        <CBadge ml="1" font-size="1em" color-scheme="green">
             New
-        </c-badge>
-    </c-text>
-</template>
-<script setup>
-import { CBadge, CFlex, CText, CBox } from '@chakra-ui/vue-next';
-</script>
-  
\ No newline at end of file
+        </CBadge>
+    </CText>
+</template> 
\ No newline at end of file
diff --git a/components/content/examples/badge/VariantBadge.vue b/components/content/examples/badge/VariantBadge.vue
index 2d06aaa..ac9faf1 100644
--- a/components/content/examples/badge/VariantBadge.vue
+++ b/components/content/examples/badge/VariantBadge.vue
@@ -1,11 +1,8 @@
 <template>
-    <c-stack direction='row'>
-        <c-badge mx="2" variant="subtle" color-scheme="green">Subtle</c-badge>
-        <c-badge mx="2" variant="solid" color-scheme="green">Solid</c-badge>
-        <c-badge mx="2" variant="outline" color-scheme="green">Outline</c-badge>
-    </c-stack>
+    <CStack direction='row'>
+        <CBadge mx="2" variant="subtle" color-scheme="green">Subtle</CBadge>
+        <CBadge mx="2" variant="solid" color-scheme="green">Solid</CBadge>
+        <CBadge mx="2" variant="outline" color-scheme="green">Outline</CBadge>
+    </CStack>
 </template>
-<script setup>
-import { CStack, CBadge } from '@chakra-ui/vue-next';
-</script>
   
\ No newline at end of file