Implement accordions

components/cards/challenge/_partials/Challenge.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    class="border-solid border border-gray-200 rounded-3xl mb-5 group text-gray-700 p-6"
+  >
+    <div class="text-gray-900 text-lg leading-normal capitalize">
+      <span class="text-default font-medium"
+        >ready ready to complete the challenge?</span
+      >
+      <span class="ml-1.5">Build a Celo dApp</span>
+    </div>
+
+    <div class="flex flex-row rounded-full max-w-max text-sm mt-6 space-x-8">
+      <div class="flex items-center">
+        <Coin size="medium" token="cUSD" />
+        <div class="text-base lg:pl-2 max-w-max">
+          <div class="flex text-gray-700">
+            <span class="block font-medium text-base pr-1">150</span>
+            <span class="block font-medium text-base">cUSD Rewards</span>
+          </div>
+          <div class="text-gray-400 text-xs font-normal">
+            Upon successful completion
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center">
+        <Coin size="medium" token="ETH" />
+        <div class="text-base lg:pl-2 max-w-max">
+          <div class="flex text-gray-700">
+            <span class="block font-medium text-base pr-1">150</span>
+            <span class="block font-medium text-base">cUSD Rewards</span>
+          </div>
+          <div class="text-gray-400 text-xs font-normal">
+            Upon successful completion
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="text-gray-400 sm:w-3/5 lg:w-2/3 text-base font-normal pt-6">
+      <span>Deadline</span>
+      <span class="font-medium">March 12th, 2022</span>
+    </div>
+  </div>
+</template>
+<script>
+import Coin from '@/components/ui/Coin'
+export default {
+  name: 'ChallengeCourseCard',
+  components: {
+    Coin,
+  },
+}
+</script>

components/cards/challenge/_partials/Learning.vue

@@ -0,0 +1,59 @@
+<template>
+  <div
+    class="flex flex-col relative md:w-1/2 p-6 divide-y sm:divide-y-0 sm:divide-x divide-gray-200 rounded-3xl group text-gray-700 sm:p-7 mb-4 border-solid border border-gray-200"
+  >
+    <div class="flex flex-col justify-between w-full sm:pb-0">
+      <div class="flex flex-col">
+        <div class="text-lg font-medium leading-normal text-gray-900">
+          Celo Blockchain 101
+        </div>
+        <div class="text-sm font-normal text-gray-700 mt-3 max-w-xxs pb-6">
+          In this course, you will learn the most important blockchain concepts
+          that you will need to navigate the Celo ecosystem.
+        </div>
+      </div>
+      <div class="">
+        <nuxt-link :to="localePath(path)">
+          <ArrowButton
+            :community-styles="true"
+            type="outline-primary"
+            class="font-medium text-sm"
+          >
+            {{ $t('course.challenge.button') }}
+          </ArrowButton>
+        </nuxt-link>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import ArrowButton from '@/components/ui/button/Arrow'
+
+export default {
+  name: 'LearningCard',
+  components: {
+    ArrowButton,
+  },
+  props: {
+    course: {
+      default: () => {
+        return {}
+      },
+      type: Object,
+    },
+    community: {
+      default: () => {},
+      type: Object,
+    },
+  },
+  computed: {
+    ...mapGetters({
+      colors: 'ui/colors',
+    }),
+    path() {
+      return `/communities/`
+    },
+  },
+}
+</script>

components/cards/challenge/_partials/RelatedLearning.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="flex flex-col relative md:w-4/12 p-6 divide-y sm:divide-y-0 sm:divide-x divide-gray-200 rounded-3xl group text-gray-700 sm:p-7 mb-4 border-solid border border-gray-200"
+  >
+    <div class="flex flex-col justify-between w-full sm:pb-0">
+      <div class="flex flex-col">
+        <div class="text-base font-medium leading-normal text-gray-900">
+          Related learning material
+        </div>
+        <div class="text-sm font-normal text-gray-700 mt-3 max-w-xxs pb-6">
+          In this course, you will learn the most important blockchain concepts
+          that you will need to navigate the Celo ecosystem.
+        </div>
+      </div>
+      <div class="">
+        <nuxt-link :to="localePath(path)">
+          <ArrowButton
+            :community-styles="true"
+            type="outline-primary"
+            class="font-medium text-sm"
+          >
+            {{ $t('course.challenge.button') }}
+          </ArrowButton>
+        </nuxt-link>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import ArrowButton from '@/components/ui/button/Arrow'
+
+export default {
+  name: 'RelatedLearningCard',
+  components: {
+    ArrowButton,
+  },
+
+  computed: {
+    ...mapGetters({
+      colors: 'ui/colors',
+    }),
+    path() {
+      return `/communities/`
+    },
+  },
+}
+</script>

components/sections/challenges/Learning.vue

@@ -0,0 +1,53 @@
+<template>
+  <Section>
+    <div class="flex justify-between cursor-pointer" @click="toggleAccordion()">
+      <H3>Learn</H3>
+      <div>
+        <span><ArrowDown /></span>
+      </div>
+    </div>
+    <div v-show="isOpen">
+      <div class="text-base font-normal text-slate-700 pt-12 pb-7 md:w-99">
+        The following learning materials will equip you with the technical
+        expertise required to successfully address the challenge.
+      </div>
+      <div class="md:flex flex-row gap-3">
+        <LearningCard />
+        <LearningCard />
+      </div>
+      <div class="flex flex-row gap-3 overflow-hidden">
+        <RelatedLearningCard />
+        <RelatedLearningCard />
+        <RelatedLearningCard />
+      </div>
+    </div>
+  </Section>
+</template>
+
+<script>
+import Section from '@/components/sections/communities/_partials/Section'
+import H3 from '~/components/ui/text/H3'
+import RelatedLearningCard from '@/components/cards/challenge/_partials/RelatedLearning'
+import LearningCard from '@/components/cards/challenge/_partials/Learning'
+import ArrowDown from '~/assets/icons/down-icon-arrow.svg?inline'
+export default {
+  name: 'Learning',
+  components: {
+    Section,
+    ArrowDown,
+    H3,
+    LearningCard,
+    RelatedLearningCard,
+  },
+  data() {
+    return {
+      isOpen: false,
+    }
+  },
+  methods: {
+    toggleAccordion() {
+      this.isOpen = !this.isOpen
+    },
+  },
+}
+</script>

components/sections/challenges/Rubric.vue

@@ -1,15 +1,27 @@
 <template>
-  <Section
-    :title="!hideTitle ? $t('communities.challenge.criteria.title') : ''"
-  >
-    <div v-for="(criteria, i) in ratingCriteria" :key="i" class="mt-8">
+  <Section>
+    <div class="flex justify-between cursor-pointer" @click="toggleAccordion()">
+      <H3>{{
+        !hideTitle ? $t('communities.challenge.criteria.title') : ''
+      }}</H3>
+      <div>
+        <span><ArrowDown /></span>
+      </div>
+    </div>
+    <div
+      v-for="(criteria, i) in ratingCriteria"
+      v-show="isOpen"
+      :key="i"
+      class="mt-8"
+    >
       <span class="block text-sm capitalize font-medium">{{
         criteria.name
       }}</span>
       <div
         class="grid grid-cols-1 space-y-4 md:space-y-0 md:grid-cols-2 lg:grid-cols-4 mt-3 gap-y-5 gap-x-5"
       >
-        <div v-for="(rubric, k) in criteria.rubric" :key="k" class="text-sm">
+
+        <div v-for="(rubric, k) in criteria.rubric" :key="k" class="text-sm rounded-3xl group border-solid border border-gray-200 p-4">
           <div
             :class="
               selected.length && !selectedRubric(rubric.id)
@@ -49,13 +61,17 @@
 /* eslint-disable no-console */
 import { mapGetters } from 'vuex'
 import Section from '@/components/sections/communities/_partials/Section.vue'
+import H3 from '~/components/ui/text/H3'
 import Checkmark from '~/assets/icons/checkmark.svg?inline'
+import ArrowDown from '~/assets/icons/down-icon-arrow.svg?inline'
 
 export default {
   name: 'RubricHeader',
   components: {
     Section,
     Checkmark,
+    ArrowDown,
+    H3,
   },
   props: {
     ratingCriteria: {
@@ -71,6 +87,11 @@ export default {
       type: Boolean,
     },
   },
+  data() {
+    return {
+      isOpen: false,
+    }
+  },
   computed: {
     ...mapGetters({
       community: 'communities/current',
@@ -81,6 +102,9 @@ export default {
     selectedRubric(id) {
       return this.selected.find((rubric) => rubric.id === id)
     },
+    toggleAccordion() {
+      this.isOpen = !this.isOpen
+    },
   },
 }
 </script>

components/sections/submissions/BestSubmissions.vue

@@ -1,41 +1,58 @@
 <template>
-  <Section
-    v-if="challenge.bestSubmissions && challenge.bestSubmissions.length"
-    :title="$t('communities.challenge.best-submissions.title')"
-  >
-    <p class="leading-normal text-sm capitalize w-64 pt-3">
-      {{ $t('communities.challenge.best-submissions.description') }}
-    </p>
-    <div class="text-xl md:text-.5xl px-0">
-      <div class="md:grid grid-cols-2 gap-5 pt-7 flex-wrap">
-        <SubmissionCard
-          v-for="submission in challenge.bestSubmissions"
-          :key="submission.id"
-          :submission="submission"
-        />
+  <Section v-if="challenge.bestSubmissions && challenge.bestSubmissions.length">
+    <div class="flex justify-between cursor-pointer" @click="toggleAccordion()">
+      <H3>{{ $t('communities.challenge.best-submissions.title') }}</H3>
+      <div>
+        <span><ArrowDown /></span>
       </div>
-      <div class="text-right ml-auto xl:m-0 pt-6">
-        <nuxt-link :to="localePath($navigation.community.submissionsPath())">
-          <ArrowButton :community-styles="true" type="outline-primary">
-            {{ $t('challenge.best-submissions.button') }}
-          </ArrowButton>
-        </nuxt-link>
+    </div>
+    <div v-show="isOpen">
+      <p class="leading-normal text-sm capitalize w-64 pt-3">
+        {{ $t('communities.challenge.best-submissions.description') }}
+      </p>
+      <div class="text-xl md:text-.5xl px-0">
+        <div class="md:grid grid-cols-2 gap-5 pt-7 flex-wrap">
+          <SubmissionCard
+            v-for="submission in challenge.bestSubmissions"
+            :key="submission.id"
+            :submission="submission"
+          />
+        </div>
+        <div class="text-right ml-auto xl:m-0 pt-6">
+          <nuxt-link :to="localePath($navigation.community.submissionsPath())">
+            <ArrowButton :community-styles="true" type="outline-primary">
+              {{ $t('challenge.best-submissions.button') }}
+            </ArrowButton>
+          </nuxt-link>
+        </div>
       </div>
     </div>
   </Section>
 </template>
 <script>
 import { mapGetters } from 'vuex'
 import SubmissionCard from './_partials/SubmissionCard.vue'
+import H3 from '~/components/ui/text/H3'
 import Section from '@/components/sections/communities/_partials/Section.vue'
+import ArrowDown from '~/assets/icons/down-icon-arrow.svg?inline'
 import ArrowButton from '@/components/ui/button/Arrow'
+
 export default {
   name: 'BestSubmissions',
   components: {
     Section,
     SubmissionCard,
     ArrowButton,
+    ArrowDown,
+    H3,
+  },
+
+  data() {
+    return {
+      isOpen: false,
+    }
   },
+
   computed: {
     ...mapGetters({
       colors: 'ui/colors',
@@ -52,5 +69,10 @@ export default {
       }
     },
   },
+  methods: {
+    toggleAccordion() {
+      this.isOpen = !this.isOpen
+    },
+  },
 }
 </script>