From 64f02933e9360fd66e3713ab310fe0549357f140 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 6 Dec 2024 13:29:52 -0500
Subject: [PATCH 1/8] chore: new link for new storage req

---
 pages/storage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/storage.vue b/pages/storage.vue
index b2bb407..b09cd78 100644
--- a/pages/storage.vue
+++ b/pages/storage.vue
@@ -84,7 +84,7 @@
       </p>
     </div>
     <div class="is-flex is-flex-wrap-wrap is-justify-content-center mb-6">
-      <a href="https://brown.atlassian.net/servicedesk/customer/portal/16/group/55/create/218">
+      <a href="https://brown.atlassian.net/servicedesk/customer/portal/16/group/55/create/263">
         <DButton
           type="button"
           name="Request Storage"

From cdeb965997497e4843c0a3fab7145a55899928aa Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 6 Dec 2024 13:49:47 -0500
Subject: [PATCH 2/8] feat: accordion component

---
 components/base/Accordion.vue           | 46 +++++++++++++++++++++++++
 components/storage/ServiceSelection.vue | 17 +++++----
 2 files changed, 54 insertions(+), 9 deletions(-)
 create mode 100644 components/base/Accordion.vue

diff --git a/components/base/Accordion.vue b/components/base/Accordion.vue
new file mode 100644
index 0000000..577f54e
--- /dev/null
+++ b/components/base/Accordion.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="column is-half">
+    <div class="card" :class="{ 'not-expanded': !this.expanded }">
+      <header class="card-header" @click="toggleCardState">
+        <p class="card-header-title">
+          {{title}}
+        </p>
+        <a class="card-header-icon">
+            <span class="icon">
+              <i class="fa fa-angle-up"></i>
+            </span>
+        </a>
+      </header>
+
+      <div class="card-content">
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: String,
+    expandAll: Boolean
+  },
+  data() {
+    return {
+      expanded: false,
+    };
+  },
+  methods: {
+    toggleCardState() {
+      this.expanded = !this.expanded;
+    },
+    closeAll() {
+      this.expanded = false;
+    }
+  },
+
+};
+</script>
diff --git a/components/storage/ServiceSelection.vue b/components/storage/ServiceSelection.vue
index ae039b7..c5b8b57 100644
--- a/components/storage/ServiceSelection.vue
+++ b/components/storage/ServiceSelection.vue
@@ -30,16 +30,10 @@
                 ]"
             /></span>
           </button>
-          <p class="is-size-5 has-text-bold">{{ humanize(s.name) }}</p>
+          <Accordion title="{{humanize(s.name)}}">
+            <div class="content" v-html="$md.render(s.description || '')"></div>
+          </Accordion>
         </div>
-        <details v-if="s.description" class="service-details mb-4 ml-4">
-          <summary>
-            <span class="icon is-medium">
-              <i class="mdi mdi-information mdi-24px" />
-            </span>
-          </summary>
-          <div class="content" v-html="$md.render(s.description || '')"></div>
-        </details>
       </div>
     </div>
   </div>
@@ -47,8 +41,13 @@
 
 <script>
 import { humanize } from '@/utils';
+import Accordion from '~/components/base/Accordion.vue';
 
 export default {
+  comments: {
+    Accordion,
+  },
+  components: { Accordion },
   props: {
     services: {
       type: Array,

From f3a3cd9c29eb8194d6c0339b91d875f6abdbf74e Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 6 Dec 2024 13:51:20 -0500
Subject: [PATCH 3/8] chore: prettier

---
 components/base/Accordion.vue | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/components/base/Accordion.vue b/components/base/Accordion.vue
index 577f54e..703b571 100644
--- a/components/base/Accordion.vue
+++ b/components/base/Accordion.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="column is-half">
-    <div class="card" :class="{ 'not-expanded': !this.expanded }">
+    <div class="card" :class="{ 'not-expanded': !expanded }">
       <header class="card-header" @click="toggleCardState">
         <p class="card-header-title">
-          {{title}}
+          {{ title }}
         </p>
         <a class="card-header-icon">
-            <span class="icon">
-              <i class="fa fa-angle-up"></i>
-            </span>
+          <span class="icon">
+            <i class="fa fa-angle-up"></i>
+          </span>
         </a>
       </header>
 
@@ -17,7 +17,6 @@
           <slot></slot>
         </div>
       </div>
-
     </div>
   </div>
 </template>
@@ -26,7 +25,7 @@
 export default {
   props: {
     title: String,
-    expandAll: Boolean
+    expandAll: Boolean,
   },
   data() {
     return {
@@ -39,8 +38,7 @@ export default {
     },
     closeAll() {
       this.expanded = false;
-    }
+    },
   },
-
 };
 </script>

From a52e5ee2a4def9180784f10e8f79e3c3833b96b4 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 6 Dec 2024 14:05:52 -0500
Subject: [PATCH 4/8] style: add animation and align content

---
 components/base/Accordion.vue           | 37 ++++++++++++++++++++++++-
 components/storage/ServiceSelection.vue |  4 +--
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/components/base/Accordion.vue b/components/base/Accordion.vue
index 703b571..e2295c0 100644
--- a/components/base/Accordion.vue
+++ b/components/base/Accordion.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="column is-half">
+  <div>
     <div class="card" :class="{ 'not-expanded': !expanded }">
       <header class="card-header" @click="toggleCardState">
         <p class="card-header-title">
@@ -42,3 +42,38 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.card {
+  margin-bottom: 10px;
+  width: 100%;
+
+  .card-header {
+    cursor: pointer;
+
+    .icon {
+      transform: rotate(180deg);
+      transition: transform 150ms ease-out;
+    }
+  }
+
+  .card-content {
+    transition: all 150ms ease;
+  }
+}
+
+.card.not-expanded {
+  .card-header {
+    .icon {
+      transform: rotate(0deg);
+    }
+  }
+  .card-content {
+    transform: scaleY(0);
+    transform-origin: top;
+    opacity: 0;
+    height: 0;
+    padding: 0;
+  }
+}
+</style>
diff --git a/components/storage/ServiceSelection.vue b/components/storage/ServiceSelection.vue
index c5b8b57..1d1d63c 100644
--- a/components/storage/ServiceSelection.vue
+++ b/components/storage/ServiceSelection.vue
@@ -10,7 +10,7 @@
           matchingServices[i] ? 'has-background-info' : 'has-background-light',
         ]"
       >
-        <div>
+        <div class="is-flex">
           <button
             class="button-nostyle"
             type="button"
@@ -30,7 +30,7 @@
                 ]"
             /></span>
           </button>
-          <Accordion title="{{humanize(s.name)}}">
+          <Accordion :title="humanize(s.name)">
             <div class="content" v-html="$md.render(s.description || '')"></div>
           </Accordion>
         </div>

From 57e4946cee017206d1e50e5c687128b1df7bab1b Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 6 Dec 2024 14:17:51 -0500
Subject: [PATCH 5/8] style: match colors

---
 components/base/Accordion.vue           | 8 ++++++--
 components/storage/ServiceSelection.vue | 4 ++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/base/Accordion.vue b/components/base/Accordion.vue
index e2295c0..1c96bd1 100644
--- a/components/base/Accordion.vue
+++ b/components/base/Accordion.vue
@@ -1,13 +1,16 @@
 <template>
   <div>
-    <div class="card" :class="{ 'not-expanded': !expanded }">
+    <div
+      class="card has-background-"
+      :class="{ 'not-expanded': !expanded, 'has-background-': backgroundColor }"
+    >
       <header class="card-header" @click="toggleCardState">
         <p class="card-header-title">
           {{ title }}
         </p>
         <a class="card-header-icon">
           <span class="icon">
-            <i class="fa fa-angle-up"></i>
+            <i class="mdi mdi-information-outline mdi-24px" />
           </span>
         </a>
       </header>
@@ -25,6 +28,7 @@
 export default {
   props: {
     title: String,
+    backgroundColor: String,
     expandAll: Boolean,
   },
   data() {
diff --git a/components/storage/ServiceSelection.vue b/components/storage/ServiceSelection.vue
index 1d1d63c..c74b536 100644
--- a/components/storage/ServiceSelection.vue
+++ b/components/storage/ServiceSelection.vue
@@ -10,7 +10,7 @@
           matchingServices[i] ? 'has-background-info' : 'has-background-light',
         ]"
       >
-        <div class="is-flex">
+        <div class="is-flex is-align-items-center">
           <button
             class="button-nostyle"
             type="button"
@@ -30,7 +30,7 @@
                 ]"
             /></span>
           </button>
-          <Accordion :title="humanize(s.name)">
+          <Accordion :title="humanize(s.name)" background-color="info">
             <div class="content" v-html="$md.render(s.description || '')"></div>
           </Accordion>
         </div>

From bdfe61e426bc3cb355ee65dd85b0047b906d22f7 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Mon, 9 Dec 2024 13:22:16 -0500
Subject: [PATCH 6/8] style: mdi menu up icon

---
 components/base/Accordion.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/base/Accordion.vue b/components/base/Accordion.vue
index 1c96bd1..0e7def6 100644
--- a/components/base/Accordion.vue
+++ b/components/base/Accordion.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <div
-      class="card has-background-"
-      :class="{ 'not-expanded': !expanded, 'has-background-': backgroundColor }"
+      class="card has-background-info"
+      :class="{ 'not-expanded': !expanded}"
     >
       <header class="card-header" @click="toggleCardState">
         <p class="card-header-title">
@@ -10,7 +10,7 @@
         </p>
         <a class="card-header-icon">
           <span class="icon">
-            <i class="mdi mdi-information-outline mdi-24px" />
+            <i class="mdi mdi-menu-up mdi-24px" />
           </span>
         </a>
       </header>

From d1f85845b04997783fc491aa21b3818d655ea396 Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Mon, 9 Dec 2024 16:27:43 -0500
Subject: [PATCH 7/8] style: plus/minus icons

---
 components/base/Accordion.vue           | 15 ++++++---------
 components/storage/ServiceSelection.vue |  2 +-
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/components/base/Accordion.vue b/components/base/Accordion.vue
index 0e7def6..c9802d6 100644
--- a/components/base/Accordion.vue
+++ b/components/base/Accordion.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="card has-background-info"
+      class="card has-background-info is-hoverable"
       :class="{ 'not-expanded': !expanded}"
     >
       <header class="card-header" @click="toggleCardState">
@@ -9,8 +9,11 @@
           {{ title }}
         </p>
         <a class="card-header-icon">
-          <span class="icon">
-            <i class="mdi mdi-menu-up mdi-24px" />
+          <span v-if="expanded === false" class="icon">
+            <i class="mdi mdi-plus mdi-24px" />
+          </span>
+          <span v-else class="icon">
+            <i class="mdi mdi-minus mdi-24px" />
           </span>
         </a>
       </header>
@@ -28,7 +31,6 @@
 export default {
   props: {
     title: String,
-    backgroundColor: String,
     expandAll: Boolean,
   },
   data() {
@@ -54,11 +56,6 @@ export default {
 
   .card-header {
     cursor: pointer;
-
-    .icon {
-      transform: rotate(180deg);
-      transition: transform 150ms ease-out;
-    }
   }
 
   .card-content {
diff --git a/components/storage/ServiceSelection.vue b/components/storage/ServiceSelection.vue
index c74b536..55eaf88 100644
--- a/components/storage/ServiceSelection.vue
+++ b/components/storage/ServiceSelection.vue
@@ -30,7 +30,7 @@
                 ]"
             /></span>
           </button>
-          <Accordion :title="humanize(s.name)" background-color="info">
+          <Accordion :title="humanize(s.name)">
             <div class="content" v-html="$md.render(s.description || '')"></div>
           </Accordion>
         </div>

From 09c974cc4475a39dc06feca05d57d89415ea93ee Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Fri, 10 Jan 2025 14:13:54 -0500
Subject: [PATCH 8/8] refactor: truthy value in if else

---
 components/base/Accordion.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/base/Accordion.vue b/components/base/Accordion.vue
index c9802d6..9a81da7 100644
--- a/components/base/Accordion.vue
+++ b/components/base/Accordion.vue
@@ -9,11 +9,11 @@
           {{ title }}
         </p>
         <a class="card-header-icon">
-          <span v-if="expanded === false" class="icon">
-            <i class="mdi mdi-plus mdi-24px" />
+          <span v-if="expanded" class="icon">
+            <i class="mdi mdi-minus mdi-24px" />
           </span>
           <span v-else class="icon">
-            <i class="mdi mdi-minus mdi-24px" />
+            <i class="mdi mdi-plus mdi-24px" />
           </span>
         </a>
       </header>