From 448deded7886f7488473569c396d5b0081e4479c Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Sun, 25 Jun 2023 22:18:41 +0100
Subject: [PATCH 1/3] feat: collapse component documentation and change
 markdown link in new tab

---
 .../examples/collapse/ExpandedStyle.vue       | 22 ++++++
 .../examples/collapse/HeightCollapse.vue      | 24 ++++++
 .../examples/collapse/SimpleCollapse.vue      | 23 ++++++
 components/content/prose/ProseA.vue           | 42 ++++++++--
 content/4.components/collapse.md              | 76 +++++++++++++++++++
 5 files changed, 182 insertions(+), 5 deletions(-)
 create mode 100644 components/content/examples/collapse/ExpandedStyle.vue
 create mode 100644 components/content/examples/collapse/HeightCollapse.vue
 create mode 100644 components/content/examples/collapse/SimpleCollapse.vue
 create mode 100644 content/4.components/collapse.md

diff --git a/components/content/examples/collapse/ExpandedStyle.vue b/components/content/examples/collapse/ExpandedStyle.vue
new file mode 100644
index 0000000..256051a
--- /dev/null
+++ b/components/content/examples/collapse/ExpandedStyle.vue
@@ -0,0 +1,22 @@
+<template>
+  <c-accordion>
+    <c-accordion-item>
+      <c-accordion-button :_expanded="{ bg: 'purple', color: 'white' }">
+        <c-v-stack align="flex-start" w="full">
+          Watercraft
+        </c-v-stack>
+        <c-accordion-icon element="c-accordion-item" />
+      </c-accordion-button>
+      <c-accordion-panel> Sample accordion content </c-accordion-panel>
+    </c-accordion-item>
+  </c-accordion>
+</template>
+
+<script setup>
+import {
+  CAccordion,
+  CAccordionItem,
+  CAccordionButton,
+  CAccordionPanel,
+} from "@chakra-ui/vue-next"
+</script>
diff --git a/components/content/examples/collapse/HeightCollapse.vue b/components/content/examples/collapse/HeightCollapse.vue
new file mode 100644
index 0000000..38db2aa
--- /dev/null
+++ b/components/content/examples/collapse/HeightCollapse.vue
@@ -0,0 +1,24 @@
+<template>
+  <c-box>
+    <c-button mb="4" variant-color="blue" @click="show = !show">
+      Show {{ show ? 'Less' : 'More' }}
+    </c-button>
+    <c-collapse :is-open="show" :starting-height="20">
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+      standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
+      type specimen book.
+    </c-collapse>
+  </c-box>
+</template>
+
+
+<script setup>
+import {
+  CBox,
+  CButton,
+  CCollapse,
+} from "@chakra-ui/vue-next";
+import { ref } from 'vue';
+
+const show = ref(false);
+</script>
diff --git a/components/content/examples/collapse/SimpleCollapse.vue b/components/content/examples/collapse/SimpleCollapse.vue
new file mode 100644
index 0000000..3fca6bd
--- /dev/null
+++ b/components/content/examples/collapse/SimpleCollapse.vue
@@ -0,0 +1,23 @@
+<template>
+  <c-box>
+    <c-button mb="4" variant-color="blue" @click="show = !show">
+      Toggle
+    </c-button>
+    <c-collapse :is-open="show">
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+      standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
+      type specimen book.
+    </c-collapse>
+  </c-box>
+</template> 
+
+<script setup>
+import {
+  CBox,
+  CButton,
+  CCollapse,
+} from "@chakra-ui/vue-next";
+import { ref } from 'vue';
+
+const show = ref(false);
+</script>
diff --git a/components/content/prose/ProseA.vue b/components/content/prose/ProseA.vue
index 71de7bd..b189f87 100644
--- a/components/content/prose/ProseA.vue
+++ b/components/content/prose/ProseA.vue
@@ -1,14 +1,46 @@
-<template>
-  <NuxtLink prefetch>
-    <slot />
-  </NuxtLink>
-</template>
+<script setup>
+const props = defineProps({
+  href: {
+    type: String,
+    default: ''
+  },
+  blank: {
+    type: Boolean,
+    default: false
+  }
+})
+function isHttpUrl(string) {
+  let url;
+  try {
+    url = new URL(string);
+  } catch (_) {
+    return false;
+  }
+  return url.protocol === "http:" || url.protocol === "https:";
+}
+const isExternal = isHttpUrl(props.href)
+let bindProps = {
+  to: props.href
+}
+if (isExternal || props.blank) {
+  bindProps.target = '_blank'
+}
+</script>
 
 <style scoped>
 a {
   color: var(--chakra-colors-green-600);
 }
+
 a:hover {
   text-decoration: underline;
 }
 </style>
+
+
+<template>
+  <NuxtLink v-bind="bindProps">
+    <slot />
+  </NuxtLink>
+</template>
+
diff --git a/content/4.components/collapse.md b/content/4.components/collapse.md
new file mode 100644
index 0000000..1a2e719
--- /dev/null
+++ b/content/4.components/collapse.md
@@ -0,0 +1,76 @@
+---
+title: Collapse
+description: Collapse component
+version: 2.0+
+---
+# Collapse
+
+The Collapse component is used to create regions of content that can expand/collapse with a basic animation. It helps to hide content that's not immediately relevant to the user.
+
+This component leverages [animejs](https://animejs.com/){target="_blank"}, and composes the Box component.
+
+## Import
+
+```js
+import { CCollapse } from "@chakra-ui/vue-next";
+```
+
+## Usage
+
+::showcase
+:simple-collapse{width=full}
+::
+
+
+```html
+<c-box>
+  <c-button mb="4" variant-color="blue" @click="show = !show">
+    Toggle
+  </c-button>
+  <c-collapse :is-open="show">
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
+    type specimen book.
+  </c-collapse>
+</c-box>
+```
+
+## Change the Starting Height
+
+::showcase
+:height-collapse{width=full}
+::
+
+
+```html
+<c-box>
+  <c-button mb="4" variant-color="blue" @click="show = !show">
+    Show {{ show ? 'Less' : 'More' }}
+  </c-button>
+  <c-collapse :is-open="show" :starting-height="20">
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
+    type specimen book.
+  </c-collapse>
+</c-box>
+```
+
+## Props
+
+This component doesn't have any custom props.
+
+| Name           | Type      | Description                                                                                                                                       |
+|----------------|-----------|---------------------------------------------------------------------------------------------------------------------------------------------------|
+| isOpen         | `boolean` | If `true`, the content will be visible                                                                                                            |
+| animateOpacity | `boolean` | If `true`, the opacity of the content will be animated                                                                                            |
+| duration       | `number`  | The animation duration as it expands                                                                                                              |
+| startingHeight | `number`  | he height you want the content in it's collapsed state. Set to `0` by default                                                                     |
+| endingHeight   | `number`  | The height you want the content in it's expanded state. Set to `auto` by default                                                                  |
+| easing         | `string`  | Add easing function for entering and leaving state. Accepts easing props from [animejs](https://animejs.com/documentation/#linearEasing){target="_blank"}. Set to `easeInOutSine` by default. |
+
+## Events
+
+| Name           | Payload      | Description                                                                                                                                       |
+|----------------|-----------|---------------------------------------------------------------------------------------------------------------------------------------------------|
+| `@start`         | `Event` | 	The event to be called when the collapse animation starts.                                                                                                            |
+| `@finish` | `Event` | The event to be called when the collapse animation ends.                                                                                            |

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

---
 content/4.components/collapse.md | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/content/4.components/collapse.md b/content/4.components/collapse.md
index 1a2e719..678f310 100644
--- a/content/4.components/collapse.md
+++ b/content/4.components/collapse.md
@@ -23,16 +23,16 @@ import { CCollapse } from "@chakra-ui/vue-next";
 
 
 ```html
-<c-box>
-  <c-button mb="4" variant-color="blue" @click="show = !show">
+<CBox>
+  <CButton mb="4" variant-color="blue" @click="show = !show">
     Toggle
-  </c-button>
-  <c-collapse :is-open="show">
+  </CButton>
+  <CCollapse :is-open="show">
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
     standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
     type specimen book.
-  </c-collapse>
-</c-box>
+  </CCollapse>
+</CBox>
 ```
 
 ## Change the Starting Height
@@ -43,16 +43,16 @@ import { CCollapse } from "@chakra-ui/vue-next";
 
 
 ```html
-<c-box>
-  <c-button mb="4" variant-color="blue" @click="show = !show">
+<CBox>
+  <CButton mb="4" variant-color="blue" @click="show = !show">
     Show {{ show ? 'Less' : 'More' }}
-  </c-button>
-  <c-collapse :is-open="show" :starting-height="20">
+  </CButton>
+  <CCollapse :is-open="show" :starting-height="20">
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
     standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
     type specimen book.
-  </c-collapse>
-</c-box>
+  </CCollapse>
+</CBox>
 ```
 
 ## Props

From 6b994d515b2ec6c976915dd64fc0cb83227a494c Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Fri, 14 Jul 2023 13:33:37 +0100
Subject: [PATCH 3/3] refactor: change name casing collapse

---
 .../examples/collapse/ExpandedStyle.vue       | 22 -------------------
 .../examples/collapse/HeightCollapse.vue      | 17 +++++---------
 .../examples/collapse/SimpleCollapse.vue      | 17 +++++---------
 3 files changed, 12 insertions(+), 44 deletions(-)
 delete mode 100644 components/content/examples/collapse/ExpandedStyle.vue

diff --git a/components/content/examples/collapse/ExpandedStyle.vue b/components/content/examples/collapse/ExpandedStyle.vue
deleted file mode 100644
index 256051a..0000000
--- a/components/content/examples/collapse/ExpandedStyle.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <c-accordion>
-    <c-accordion-item>
-      <c-accordion-button :_expanded="{ bg: 'purple', color: 'white' }">
-        <c-v-stack align="flex-start" w="full">
-          Watercraft
-        </c-v-stack>
-        <c-accordion-icon element="c-accordion-item" />
-      </c-accordion-button>
-      <c-accordion-panel> Sample accordion content </c-accordion-panel>
-    </c-accordion-item>
-  </c-accordion>
-</template>
-
-<script setup>
-import {
-  CAccordion,
-  CAccordionItem,
-  CAccordionButton,
-  CAccordionPanel,
-} from "@chakra-ui/vue-next"
-</script>
diff --git a/components/content/examples/collapse/HeightCollapse.vue b/components/content/examples/collapse/HeightCollapse.vue
index 38db2aa..cc30773 100644
--- a/components/content/examples/collapse/HeightCollapse.vue
+++ b/components/content/examples/collapse/HeightCollapse.vue
@@ -1,23 +1,18 @@
 <template>
-  <c-box>
-    <c-button mb="4" variant-color="blue" @click="show = !show">
+  <CBox>
+    <CButton mb="4" variant-color="blue" @click="show = !show">
       Show {{ show ? 'Less' : 'More' }}
-    </c-button>
-    <c-collapse :is-open="show" :starting-height="20">
+    </CButton>
+    <CCollapse :is-open="show" :starting-height="20">
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
       standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
       type specimen book.
-    </c-collapse>
-  </c-box>
+    </CCollapse>
+  </CBox>
 </template>
 
 
 <script setup>
-import {
-  CBox,
-  CButton,
-  CCollapse,
-} from "@chakra-ui/vue-next";
 import { ref } from 'vue';
 
 const show = ref(false);
diff --git a/components/content/examples/collapse/SimpleCollapse.vue b/components/content/examples/collapse/SimpleCollapse.vue
index 3fca6bd..b7edc40 100644
--- a/components/content/examples/collapse/SimpleCollapse.vue
+++ b/components/content/examples/collapse/SimpleCollapse.vue
@@ -1,22 +1,17 @@
 <template>
-  <c-box>
-    <c-button mb="4" variant-color="blue" @click="show = !show">
+  <CBox>
+    <CButton mb="4" variant-color="blue" @click="show = !show">
       Toggle
-    </c-button>
-    <c-collapse :is-open="show">
+    </CButton>
+    <CCollapse :is-open="show">
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
       standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
       type specimen book.
-    </c-collapse>
-  </c-box>
+    </CCollapse>
+  </CBox>
 </template> 
 
 <script setup>
-import {
-  CBox,
-  CButton,
-  CCollapse,
-} from "@chakra-ui/vue-next";
 import { ref } from 'vue';
 
 const show = ref(false);