feat(ecosystem): tier filters and new header

components/Ecosystem/EcosystemJoin.vue

@@ -0,0 +1,86 @@
+<template>
+  <section class="cds--grid">
+    <div class="cds--row">
+      <article
+        class="cds--col-lg-4 cds--col-md-4 ecosystem-join__feature ecosystem-join__intro"
+      >
+        <p>
+          The Ecosystem consists of projects, tools, utilities, libraries and
+          tutorials from a broad community of developers and researchers. The
+          goal of the Ecosystem is to celebrate, support and accelerate
+          development of quantum technologies using Qiskit.
+        </p>
+        <UiCta
+          is-wider
+          :label="EcosystemJoinLink.label"
+          :segment="EcosystemJoinLink.segment"
+          :url="EcosystemJoinLink.url"
+        />
+      </article>
+      <div
+        v-for="tier in tiers"
+        :key="tier.name"
+        class="cds--col-lg-4 cds--col-md-4 ecosystem-join__feature"
+      >
+        <UiCompactFeature
+          :description="tier.description"
+          :icon="tier.icon"
+          :title="tier.name"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { EcosystemJoinLink } from "~/constants/links";
+
+const tiers = [
+  {
+    name: "Main",
+    description: "The main Qiskit packages maintained by IBM Quantum.",
+    icon: "quantum.svg",
+  },
+  {
+    name: "Extensions",
+    description: "IBM Quantum supported Qiskit extensions.",
+    icon: "transform--02.svg",
+  },
+  {
+    name: "Community",
+    description:
+      "Software packages supported by the Qiskit community, not maintained by IBM Quantum.",
+    icon: "group.svg",
+  },
+];
+</script>
+
+<style lang="scss" scoped>
+@use "~/assets/scss/carbon.scss";
+
+.ecosystem-join {
+  &__feature {
+    @include carbon.breakpoint-down(lg) {
+      margin-bottom: carbon.$spacing-07;
+    }
+
+    @include carbon.breakpoint-up(md) {
+      height: 14rem;
+    }
+
+    @include carbon.breakpoint-up(lg) {
+      height: 16.5rem;
+    }
+
+    @include carbon.breakpoint-up(xlg) {
+      height: 14rem;
+    }
+  }
+
+  &__intro {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+}
+</style>

constants/links.ts

@@ -38,4 +38,10 @@ const SocialMedia: { [key: string]: TextLink } = {
   },
 } as const;
 
-export { LearnStartLearningUrl, SocialMedia };
+const EcosystemJoinLink: TextLink = {
+  url: "https://github.com/qiskit-community/ecosystem#ecosystem--",
+  label: "Join the ecosystem",
+  segment: { cta: "join-the-ecosystem", location: "ecosystem" },
+};
+
+export { LearnStartLearningUrl, SocialMedia, EcosystemJoinLink };

pages/ecosystem.vue

@@ -11,46 +11,24 @@
       <br />
       Qiskit community
     </LayoutLeadSpaceFixed>
+    <EcosystemJoin />
     <section id="ecosystem" class="cds--grid ecosystem-page">
-      <h2>Ecosystem Resources</h2>
-      <div class="cds--row">
-        <p class="cds--col-md-5 cds--col-lg-8 cds--col-xlg-7 cds--col-max-6">
-          The Ecosystem consists of projects, tools, utilities, libraries and
-          tutorials from a broad community of developers and researchers. The
-          goal of the Ecosystem is to celebrate, support and accelerate
-          development of quantum technologies using Qiskit.
-        </p>
-      </div>
-      <UiCta
-        class="ecosystem-page__header__cta"
-        :label="joinAction.label"
-        :url="joinAction.url"
-      />
-      <div class="ecosystem-page__tiers">
-        <client-only>
-          <bx-tabs
-            class="ecosystem-page__tiers__tabs"
-            trigger-content="Select an item"
-            value="Main"
-            @bx-tabs-selected="updateSelectedTab($event.target.value)"
-          >
-            <bx-tab
-              v-for="tierName in tiersNames"
-              :id="`tab${tierName}`"
-              :key="tierName"
-              :target="`panel${tierName}`"
-              :value="`${tierName}`"
-            >
-              {{ `${tierName} (${filteredMembersByTier[tierName].length})` }}
-            </bx-tab>
-          </bx-tabs>
-          <div class="ecosystem-page__tiers__description">
-            {{ selectedTierDescription }}
-          </div>
-        </client-only>
-      </div>
-      <UiFiltersResultsLayout>
+      <UiFiltersResultsLayout class="ecosystem-page__results">
         <template #filters-on-m-l-screen>
+          <UiFieldset class="ecosystem-page__categories" label="Tier">
+            <client-only>
+              <bx-checkbox
+                v-for="tier in tiersNames"
+                :key="tier"
+                :checked="isTierFilterChecked(tier)"
+                :label-text="tier"
+                :value="tier"
+                @bx-checkbox-changed="
+                  updateTierFilter(tier, $event.target.checked)
+                "
+              />
+            </client-only>
+          </UiFieldset>
           <UiFieldset class="ecosystem-page__categories" label="Category">
             <client-only>
               <bx-checkbox
@@ -67,6 +45,14 @@
           </UiFieldset>
         </template>
         <template #filters-on-s-screen>
+          <div class="ecosystem-page__tiers__multiselect">
+            <UiMultiSelect
+              label="Tiers"
+              :options="tiersNames"
+              :value="tierFiltersAsString"
+              @change-selection="updateTierFilters($event)"
+            />
+          </div>
           <div class="ecosystem-page__categories__multiselect">
             <UiMultiSelect
               label="Category"
@@ -97,30 +83,17 @@
             </bx-dropdown>
           </div>
           <div class="ecosystem-page__tier-panel">
-            <div
-              v-for="tierName in tiersNames"
-              :id="`panel${tierName}`"
-              :key="tierName"
-              role="tabpanel"
-              :aria-labelledby="`tab${tierName}`"
-            >
-              <template v-if="selectedTab === tierName">
-                <p
-                  v-if="filteredMembersFromSelectedTier.length === 0"
-                  class="cds--col"
-                >
-                  Try using wider search criteria, or consider
-                  <UiLink v-bind="joinAction">joining the ecosystem.</UiLink>
-                </p>
-                <div v-else class="cds--row ecosystem-page__members">
-                  <EcosystemCard
-                    v-for="member in filteredMembersFromSelectedTierSorted"
-                    :key="member.name"
-                    class="cds--col-sm-4 cds--col-xlg-8"
-                    :member="member"
-                  />
-                </div>
-              </template>
+            <p v-if="filteredMembersSorted.length === 0" class="cds--col">
+              Try using wider search criteria, or consider
+              <UiLink v-bind="EcosystemJoinLink">joining the ecosystem.</UiLink>
+            </p>
+            <div v-else class="cds--row ecosystem-page__members">
+              <EcosystemCard
+                v-for="member in filteredMembersSorted"
+                :key="member.name"
+                class="cds--col-sm-4 cds--col-xlg-8"
+                :member="member"
+              />
             </div>
           </div>
         </template>
@@ -133,20 +106,11 @@
 import rawMembers from "~/content/ecosystem/members.json";
 import rawTiers from "~/content/ecosystem/tiers.json";
 import { Member, Tier } from "~/types/ecosystem";
-import { TextLink } from "~/types/links";
-
-interface MembersByTier {
-  [key: string]: Member[];
-}
+import { EcosystemJoinLink } from "~/constants/links";
 
 const members = rawMembers as Member[];
 const config = useRuntimeConfig();
 
-const joinAction: TextLink = {
-  url: "https://github.com/qiskit-community/ecosystem#ecosystem--",
-  label: "Join the ecosystem",
-};
-
 definePageMeta({
   layout: "default-max",
   pageTitle: "Qiskit Ecosystem",
@@ -173,19 +137,6 @@ useSeoMeta({
  */
 const tiers = rawTiers as Tier[];
 const tiersNames = tiers.map((tier) => tier.name);
-const selectedTab = ref<string>("Main");
-
-const selectedTier = computed<Tier | undefined>(() => {
-  return tiers.find((tier) => tier.name === selectedTab.value);
-});
-
-const selectedTierDescription = computed<string>(() => {
-  return selectedTier.value?.description ?? "";
-});
-
-function updateSelectedTab(tab: string) {
-  selectedTab.value = tab;
-}
 
 /**
  * Category filters
@@ -197,6 +148,8 @@ const categoryFilterOptionsSorted = [
 
 const categoryFilters = ref<string[]>([]);
 const categoryFiltersAsString = computed(() => categoryFilters.value.join(","));
+const tierFilters = ref<string[]>([]);
+const tierFiltersAsString = computed(() => tierFilters.value.join(","));
 
 function updateCategoryFilter(filterValue: string, isChecked: boolean) {
   if (isChecked) {
@@ -219,6 +172,27 @@ function isCategoryFilterChecked(filterValue: string): boolean {
   return categoryFilters.value.includes(filterValue);
 }
 
+function updateTierFilter(filterValue: string, isChecked: boolean) {
+  if (isChecked) {
+    tierFilters.value.push(filterValue);
+  } else {
+    const index = tierFilters.value.indexOf(filterValue);
+    if (index !== -1) {
+      tierFilters.value.splice(index, 1);
+    }
+  }
+}
+
+function updateTierFilters(newTierFilters: string) {
+  const newTierFiltersAsArray =
+    newTierFilters === "" ? [] : newTierFilters.split(",");
+  tierFilters.value = newTierFiltersAsArray;
+}
+
+function isTierFilterChecked(filterValue: string): boolean {
+  return tierFiltersAsString.value.includes(filterValue);
+}
+
 /**
  * Search term
  */
@@ -248,6 +222,13 @@ const filteredMembers = computed<Member[]>(() => {
 
   let filteredMembers = members;
 
+  // Tier filter
+  if (tierFilters.value.length > 0) {
+    filteredMembers = filteredMembers.filter((member) =>
+      tierFilters.value.some((filter) => member.tier.includes(filter))
+    );
+  }
+
   // Category filter
   if (categoryFilters.value.length > 0) {
     filteredMembers = filteredMembers.filter((member) =>
@@ -269,31 +250,12 @@ const filteredMembers = computed<Member[]>(() => {
   return filteredMembers;
 });
 
-const filteredMembersByTier = computed<MembersByTier>(() => {
-  const result: MembersByTier = {};
-
-  tiersNames.forEach((tierName) => {
-    result[tierName] = filteredMembers.value.filter(
-      (member) => member.tier === tierName
-    );
-  });
-
-  return result;
-});
-
-const filteredMembersFromSelectedTier = computed<Member[]>(() => {
-  return filteredMembersByTier.value[selectedTab.value];
-});
-
-const filteredMembersFromSelectedTierSorted = computed<Member[]>(() => {
+const filteredMembersSorted = computed<Member[]>(() => {
   if (selectedSortingOption.value === "stars") {
-    return filteredMembersFromSelectedTier.value.sort(
-      (a, b) => b.stars - a.stars
-    );
+    return filteredMembers.value.sort((a, b) => b.stars - a.stars);
   }
 
-  // The list of members is sorted by name by default.
-  return filteredMembersFromSelectedTier.value;
+  return filteredMembers.value.sort((a, b) => a.name.localeCompare(b.name));
 });
 </script>
 
@@ -302,14 +264,6 @@ const filteredMembersFromSelectedTierSorted = computed<Member[]>(() => {
 @use "~/assets/scss/helpers/classes.scss";
 
 .ecosystem-page {
-  &__tiers {
-    margin-top: carbon.$spacing-10;
-
-    &__description {
-      padding-top: carbon.$spacing-05;
-    }
-  }
-
   &__tier-panel {
     margin-top: carbon.$spacing-07;
   }
@@ -328,12 +282,8 @@ const filteredMembersFromSelectedTierSorted = computed<Member[]>(() => {
     }
   }
 
-  &__toolbar {
-    margin-top: carbon.$spacing-06;
-
-    @include carbon.breakpoint-down(md) {
-      margin-top: initial;
-    }
+  &__results {
+    margin-top: carbon.$spacing-07;
   }
 
   &__search {