chore: new accordion design for storage page

components/base/Accordion.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <div
+      class="card has-background-info is-hoverable"
+      :class="{ 'not-expanded': !expanded}"
+    >
+      <header class="card-header" @click="toggleCardState">
+        <p class="card-header-title">
+          {{ title }}
+        </p>
+        <a class="card-header-icon">
+          <span v-if="expanded" class="icon">
+            <i class="mdi mdi-minus mdi-24px" />
+          </span>
+          <span v-else class="icon">
+            <i class="mdi mdi-plus mdi-24px" />
+          </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>
+
+<style lang="scss" scoped>
+.card {
+  margin-bottom: 10px;
+  width: 100%;
+
+  .card-header {
+    cursor: pointer;
+  }
+
+  .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>

components/storage/ServiceSelection.vue

@@ -10,7 +10,7 @@
           matchingServices[i] ? 'has-background-info' : 'has-background-light',
         ]"
       >
-        <div>
+        <div class="is-flex is-align-items-center">
           <button
             class="button-nostyle"
             type="button"
@@ -30,25 +30,24 @@
                 ]"
             /></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>
 </template>
 
 <script>
 import { humanize } from '@/utils';
+import Accordion from '~/components/base/Accordion.vue';
 
 export default {
+  comments: {
+    Accordion,
+  },
+  components: { Accordion },
   props: {
     services: {
       type: Array,

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"