From e304328613d8216a8b2852267a72ee78317c84c4 Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Sun, 4 Jun 2023 21:10:09 +0100
Subject: [PATCH 1/4] docs(container): add container documentation

---
 .../examples/container/ContainerCenter.vue    | 14 ++++
 .../examples/container/ContainerSize.vue      | 17 ++++
 .../examples/container/SimpleContainer.vue    | 12 +++
 content/4.components/container.md             | 78 +++++++++++++++++++
 4 files changed, 121 insertions(+)
 create mode 100644 components/content/examples/container/ContainerCenter.vue
 create mode 100644 components/content/examples/container/ContainerSize.vue
 create mode 100644 components/content/examples/container/SimpleContainer.vue
 create mode 100644 content/4.components/container.md

diff --git a/components/content/examples/container/ContainerCenter.vue b/components/content/examples/container/ContainerCenter.vue
new file mode 100644
index 0000000..d4156da
--- /dev/null
+++ b/components/content/examples/container/ContainerCenter.vue
@@ -0,0 +1,14 @@
+<template>
+    <c-container maxW='2xl' bg='blue.600' centerContent>
+        <c-box padding='4' bg='blue.400' color='black' maxW='md'>
+            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-box>
+    </c-container>
+</template>
+
+<script setup>
+import { CContainer, CBox } from '@chakra-ui/vue-next';
+</script>
diff --git a/components/content/examples/container/ContainerSize.vue b/components/content/examples/container/ContainerSize.vue
new file mode 100644
index 0000000..0a67ee0
--- /dev/null
+++ b/components/content/examples/container/ContainerSize.vue
@@ -0,0 +1,17 @@
+<template>
+    <c-v-stack w="2xl" align-items="center">
+        <c-container maxW='md' bg='blue.600' color='white'>
+            "md" Container
+        </c-container>
+        <c-container maxW='550px' bg='purple.600' color='white'>
+            "550px" Container
+        </c-container>
+        <c-container maxW='container.sm' bg='green.400' color='#262626'>
+            "container.sm" Container
+        </c-container>
+    </c-v-stack>
+</template>
+
+<script setup>
+import { CContainer, CVStack } from '@chakra-ui/vue-next';
+</script>
diff --git a/components/content/examples/container/SimpleContainer.vue b/components/content/examples/container/SimpleContainer.vue
new file mode 100644
index 0000000..386c715
--- /dev/null
+++ b/components/content/examples/container/SimpleContainer.vue
@@ -0,0 +1,12 @@
+<template>
+    <c-container>
+        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>
+</template>
+
+<script setup>
+import { CContainer } from '@chakra-ui/vue-next';
+</script>
diff --git a/content/4.components/container.md b/content/4.components/container.md
new file mode 100644
index 0000000..a366b16
--- /dev/null
+++ b/content/4.components/container.md
@@ -0,0 +1,78 @@
+---
+title: Container
+description:
+  Container component is used to constrain a content's width to the current breakpoint, while keeping it fluid.
+version: 2.0+
+---
+
+# Container
+
+Containers are used to constrain a content's width to the current breakpoint, while keeping it fluid.
+
+## Import
+
+```js
+import { CContainer } from '@chakra-ui/vue-next'
+```
+
+## Usage
+
+To contain any piece of content, wrap it in the `Container` component.
+
+::showcase
+  ::simple-container
+  ::
+::
+
+```html
+<c-container>
+    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>
+```
+
+### Container Size
+
+By default, the `Container` component sets the `maxWidth` of the content to 60 characters (`60ch`) but you can customize this by passing custom `maxWidth` values or changing the size tokens.
+
+> * About the default value: The `ch` unit is a relative unit defined by the rendered typeface's "0" character width. This width varies by the shape and style of the font. 
+> * If you are curious about the reason for this default value of `60` characters, consider this explanation about [line length](https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/#line-length) from Better Web Type.
+
+::showcase
+  ::container-size
+  ::
+::
+
+```html
+<c-v-stack w="2xl" align-items="center">
+    <c-container maxW='md' bg='blue.600' color='white'>
+        "md" Container
+    </c-container>
+    <c-container maxW='550px' bg='purple.600' color='white'>
+        "550px" Container
+    </c-container>
+    <c-container maxW='container.sm' bg='green.400' color='#262626'>
+        "container.sm" Container
+    </c-container>
+</c-v-stack>
+```
+
+### Centering the children
+
+In some cases, the width of the content can be smaller than the container's width. You can use the `centerContent` prop to center the content. It renders a flexbox with `flexDirection` set to `column` and `alignItems` set to `center`.
+::showcase
+  ::container-center
+::
+
+```html
+<c-container maxW='2xl' bg='blue.600' centerContent>
+    <c-box padding='4' bg='blue.400' color='black' maxW='md'>
+        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-box>
+</c-container>
+```

From 724625d64d0e39e63f416a09ec1a7550bc2280c0 Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Fri, 9 Jun 2023 16:15:24 +0100
Subject: [PATCH 2/4] chore: PR fixes

---
 .../examples/container/ContainerCenter.vue       |  4 ++--
 .../content/examples/container/ContainerSize.vue |  6 +++---
 content/4.components/container.md                | 16 ++++++++--------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/components/content/examples/container/ContainerCenter.vue b/components/content/examples/container/ContainerCenter.vue
index d4156da..863c7d5 100644
--- a/components/content/examples/container/ContainerCenter.vue
+++ b/components/content/examples/container/ContainerCenter.vue
@@ -1,6 +1,6 @@
 <template>
-    <c-container maxW='2xl' bg='blue.600' centerContent>
-        <c-box padding='4' bg='blue.400' color='black' maxW='md'>
+    <c-container max-w='2xl' bg='blue.600' center-content>
+        <c-box padding='4' bg='blue.400' color='black' max-w='md'>
             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
diff --git a/components/content/examples/container/ContainerSize.vue b/components/content/examples/container/ContainerSize.vue
index 0a67ee0..4704e85 100644
--- a/components/content/examples/container/ContainerSize.vue
+++ b/components/content/examples/container/ContainerSize.vue
@@ -1,12 +1,12 @@
 <template>
     <c-v-stack w="2xl" align-items="center">
-        <c-container maxW='md' bg='blue.600' color='white'>
+        <c-container max-w='md' bg='blue.600' color='white'>
             "md" Container
         </c-container>
-        <c-container maxW='550px' bg='purple.600' color='white'>
+        <c-container max-w='550px' bg='purple.600' color='white'>
             "550px" Container
         </c-container>
-        <c-container maxW='container.sm' bg='green.400' color='#262626'>
+        <c-container max-w='container.sm' bg='green.400' color='#262626'>
             "container.sm" Container
         </c-container>
     </c-v-stack>
diff --git a/content/4.components/container.md b/content/4.components/container.md
index a366b16..88450b9 100644
--- a/content/4.components/container.md
+++ b/content/4.components/container.md
@@ -17,7 +17,7 @@ import { CContainer } from '@chakra-ui/vue-next'
 
 ## Usage
 
-To contain any piece of content, wrap it in the `Container` component.
+To contain any piece of content, wrap it in the `CContainer` component.
 
 ::showcase
   ::simple-container
@@ -35,7 +35,7 @@ To contain any piece of content, wrap it in the `Container` component.
 
 ### Container Size
 
-By default, the `Container` component sets the `maxWidth` of the content to 60 characters (`60ch`) but you can customize this by passing custom `maxWidth` values or changing the size tokens.
+By default, the `CContainer` component sets the `max-width` of the content to 60 characters (`60ch`) but you can customize this by passing custom `max-width` values or changing the size tokens.
 
 > * About the default value: The `ch` unit is a relative unit defined by the rendered typeface's "0" character width. This width varies by the shape and style of the font. 
 > * If you are curious about the reason for this default value of `60` characters, consider this explanation about [line length](https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/#line-length) from Better Web Type.
@@ -47,13 +47,13 @@ By default, the `Container` component sets the `maxWidth` of the content to 60 c
 
 ```html
 <c-v-stack w="2xl" align-items="center">
-    <c-container maxW='md' bg='blue.600' color='white'>
+    <c-container max-w='md' bg='blue.600' color='white'>
         "md" Container
     </c-container>
-    <c-container maxW='550px' bg='purple.600' color='white'>
+    <c-container max-w='550px' bg='purple.600' color='white'>
         "550px" Container
     </c-container>
-    <c-container maxW='container.sm' bg='green.400' color='#262626'>
+    <c-container max-w='container.sm' bg='green.400' color='#262626'>
         "container.sm" Container
     </c-container>
 </c-v-stack>
@@ -61,14 +61,14 @@ By default, the `Container` component sets the `maxWidth` of the content to 60 c
 
 ### Centering the children
 
-In some cases, the width of the content can be smaller than the container's width. You can use the `centerContent` prop to center the content. It renders a flexbox with `flexDirection` set to `column` and `alignItems` set to `center`.
+In some cases, the width of the content can be smaller than the container's width. You can use the `center-content` prop to center the content. It renders a flexbox with `flex-direction` set to `column` and `align-items` set to `center`.
 ::showcase
   ::container-center
 ::
 
 ```html
-<c-container maxW='2xl' bg='blue.600' centerContent>
-    <c-box padding='4' bg='blue.400' color='black' maxW='md'>
+<c-container max-w='2xl' bg='blue.600' center-content>
+    <c-box padding='4' bg='blue.400' color='black' max-w='md'>
         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

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

---
 content/4.components/container.md | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/content/4.components/container.md b/content/4.components/container.md
index 88450b9..2e6b2f5 100644
--- a/content/4.components/container.md
+++ b/content/4.components/container.md
@@ -25,12 +25,12 @@ To contain any piece of content, wrap it in the `CContainer` component.
 ::
 
 ```html
-<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>
+</CContainer>
 ```
 
 ### Container Size
@@ -46,17 +46,17 @@ By default, the `CContainer` component sets the `max-width` of the content to 60
 ::
 
 ```html
-<c-v-stack w="2xl" align-items="center">
-    <c-container max-w='md' bg='blue.600' color='white'>
+<CVStack w="2xl" align-items="center">
+    <CContainer max-w='md' bg='blue.600' color='white'>
         "md" Container
-    </c-container>
-    <c-container max-w='550px' bg='purple.600' color='white'>
+    </CContainer>
+    <CContainer max-w='550px' bg='purple.600' color='white'>
         "550px" Container
-    </c-container>
-    <c-container max-w='container.sm' bg='green.400' color='#262626'>
+    </CContainer>
+    <CContainer max-w='container.sm' bg='green.400' color='#262626'>
         "container.sm" Container
-    </c-container>
-</c-v-stack>
+    </CContainer>
+</CVStack>
 ```
 
 ### Centering the children
@@ -67,12 +67,12 @@ In some cases, the width of the content can be smaller than the container's widt
 ::
 
 ```html
-<c-container max-w='2xl' bg='blue.600' center-content>
-    <c-box padding='4' bg='blue.400' color='black' max-w='md'>
+<CContainer max-w='2xl' bg='blue.600' center-content>
+    <CBox padding='4' bg='blue.400' color='black' max-w='md'>
         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-box>
-</c-container>
+    </CBox>
+</CContainer>
 ```

From 162c5cdb33a4effaf5f14b5670a63ad5cf0f8d7d Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Fri, 14 Jul 2023 13:37:15 +0100
Subject: [PATCH 4/4] refactor: change name casing container

---
 .../examples/container/ContainerCenter.vue    | 14 +++++-------
 .../examples/container/ContainerSize.vue      | 22 ++++++++-----------
 .../examples/container/SimpleContainer.vue    | 10 +++------
 3 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/components/content/examples/container/ContainerCenter.vue b/components/content/examples/container/ContainerCenter.vue
index 863c7d5..d337914 100644
--- a/components/content/examples/container/ContainerCenter.vue
+++ b/components/content/examples/container/ContainerCenter.vue
@@ -1,14 +1,10 @@
 <template>
-    <c-container max-w='2xl' bg='blue.600' center-content>
-        <c-box padding='4' bg='blue.400' color='black' max-w='md'>
+    <CContainer max-w='2xl' bg='blue.600' center-content>
+        <CBox padding='4' bg='blue.400' color='black' max-w='md'>
             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-box>
-    </c-container>
-</template>
-
-<script setup>
-import { CContainer, CBox } from '@chakra-ui/vue-next';
-</script>
+        </CBox>
+    </CContainer>
+</template>
\ No newline at end of file
diff --git a/components/content/examples/container/ContainerSize.vue b/components/content/examples/container/ContainerSize.vue
index 4704e85..6b349c3 100644
--- a/components/content/examples/container/ContainerSize.vue
+++ b/components/content/examples/container/ContainerSize.vue
@@ -1,17 +1,13 @@
 <template>
-    <c-v-stack w="2xl" align-items="center">
-        <c-container max-w='md' bg='blue.600' color='white'>
+    <CVStack w="2xl" align-items="center">
+        <CContainer max-w='md' bg='blue.600' color='white'>
             "md" Container
-        </c-container>
-        <c-container max-w='550px' bg='purple.600' color='white'>
+        </CContainer>
+        <CContainer max-w='550px' bg='purple.600' color='white'>
             "550px" Container
-        </c-container>
-        <c-container max-w='container.sm' bg='green.400' color='#262626'>
+        </CContainer>
+        <CContainer max-w='container.sm' bg='green.400' color='#262626'>
             "container.sm" Container
-        </c-container>
-    </c-v-stack>
-</template>
-
-<script setup>
-import { CContainer, CVStack } from '@chakra-ui/vue-next';
-</script>
+        </CContainer>
+    </CVStack>
+</template>
\ No newline at end of file
diff --git a/components/content/examples/container/SimpleContainer.vue b/components/content/examples/container/SimpleContainer.vue
index 386c715..97b5719 100644
--- a/components/content/examples/container/SimpleContainer.vue
+++ b/components/content/examples/container/SimpleContainer.vue
@@ -1,12 +1,8 @@
 <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>
-</template>
-
-<script setup>
-import { CContainer } from '@chakra-ui/vue-next';
-</script>
+    </CContainer>
+</template>
\ No newline at end of file