fix: add tooltip, misc bug fixes, a11y fixes

packages/fe/assets/scss/main.scss

@@ -220,6 +220,7 @@ h6, .h6 {
   line-height: 1.3;
   font-weight: 500;
   text-transform: none;
+  margin-bottom: toRem(18);
 }
 
 h1, .h1 {
@@ -319,31 +320,6 @@ p, .p1 {
 }
 
 .markdown {
-  h1, h2, h3, p, ul, ol, pre {
-    + h2, + h3 {
-      margin-top: 3.75rem;
-    }
-  }
-  h1, h2, h3 {
-    &:not(:last-child) {
-      margin-bottom: 1rem;
-    }
-    + ul, + ol {
-      margin-top: 2rem;
-    }
-  }
-  p {
-    &:not(:last-child) {
-      margin-bottom: 1rem;
-    }
-  }
-  a {
-    color: darkorange;
-    font-weight: 600;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
   pre,
   code {
     font-family: $font_Code;

packages/fe/assets/scss/variables.scss

@@ -28,6 +28,10 @@ $athensGray: #E7E9ED;
 $capeCod: #3C4748;
 $grayNurse2: #E0E7E0;
 $dodgerBlue: #3DA2FF;
+$blue: #001AFF;
+$neptune: #74C3B5;
+$iron: #DDDFE3;
+
 
 // ----------------------------------------------------------------- Breakpoints
 $breakpoint_Tiny: 25.9375rem; // 415px
@@ -57,7 +61,7 @@ $duration: 300ms;
   width: 2.1875rem;
   height: 2.1875rem;
   border-radius: 50%;
-  border: solid 1px #DDDFE3;
+  border: solid 1px $iron;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -102,7 +106,7 @@ $duration: 300ms;
 }
 
 @mixin focusBoxShadow {
-  box-shadow: 0 0 0 5px rgba(0, 123, 255, 0.5);
+  box-shadow: 0 0 0 5px rgba($dodgerBlue, 0.5) !important;
 }
 
 @mixin focusBoxShadowSmall {
@@ -249,6 +253,13 @@ $duration: 300ms;
   @return math.div($px-vw * 100vw, $base-vw);
 }
 
+@mixin truncate($rowCount) {
+  display: -webkit-box;
+  -webkit-line-clamp: $rowCount;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 // ------------------------------------------------------------------- Animation
 @mixin animation($animate...) {
   $max: length($animate);

packages/fe/components/block-builder.vue

@@ -70,6 +70,7 @@ import TextBlock from '@/components/blocks/text-block'
 import ImageBlock from '@/components/blocks/image-block'
 import MarkdownBlock from '@/components/blocks/markdown-block'
 import CategorySliderBlock from '@/components/blocks/category-slider-block'
+import CardListBlock from '@/components/blocks/card-list-block'
 import CategoryTicker from '@/components/category-ticker'
 import BlockBuilder from '@/components/block-builder'
 
@@ -83,7 +84,8 @@ export default {
     BlockBuilder,
     MarkdownBlock,
     CategorySliderBlock,
-    CategoryTicker
+    CategoryTicker,
+    CardListBlock
   },
 
   props: {

packages/fe/components/blocks/card-list-block.vue

@@ -0,0 +1,75 @@
+<template>
+  <div :class="['card-list-block', `type__${cardType}`]">
+    <div :class="['card-list', direction]">
+
+      <template v-for="(card, i) in cards">
+        <component
+          :is="cardComponent"
+          :key="`card-${i}`"
+          :index="i + 1"
+          :card="card"
+          class="card" />
+      </template>
+
+    </div>
+  </div>
+</template>
+
+<script>
+// ====================================================================== Import
+import FAQCard from '@/components/faq-card'
+
+// ====================================================================== Export
+export default {
+  name: 'CardListBlock',
+
+  components: {
+    FAQCard
+  },
+
+  props: {
+    block: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    }
+  },
+
+  computed: {
+    cardType () {
+      return this.block.card_type
+    },
+    direction () {
+      return ['row', 'column', 'row-reverse', 'column-reverse'].includes(this.block.direction) ? this.block.direction : 'row'
+    },
+    cardComponent () {
+      switch (this.cardType) {
+        case 'faq': return 'FAQCard'
+        default : return 'FAQCard'
+      }
+    },
+    cards () {
+      return this.block.cards
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// ///////////////////////////////////////////////////////////////////// General
+.card-list {
+  display: flex;
+  &.row {
+    flex-direction: row;
+  }
+  &.column {
+    flex-direction: column;
+  }
+  &.row-reverse {
+    flex-direction: row-reverse;
+  }
+  &.column-reverse {
+    flex-direction: column-reverse;
+  }
+}
+</style>

packages/fe/components/blocks/category-slider-block.vue

@@ -45,9 +45,9 @@
                 :style="{ 'background-image': `url('/images/categories/${slide.label.replaceAll(' ', '-')}.jpg')` }">
               </div>
               <div class="category">
-                <div class="text">
+                <button class="text">
                   {{ `${slide.label} (${slide.count})` }}
-                </div>
+                </button>
               </div>
             </div>
           </div>

packages/fe/components/breadcrumbs.vue

@@ -7,7 +7,6 @@
         v-if="link.url"
         :key="`link-${index}`"
         :button="link"
-        tabindex="0"
         class="breadcrumb link">
       </Button>
 
@@ -46,7 +45,8 @@ export default {
 
   data () {
     return {
-      links: false
+      links: false,
+      hidden: false
     }
   },
 
@@ -60,9 +60,6 @@ export default {
         return this.siteContent.general.breadcrumbs_mapping
       }
       return false
-    },
-    hidden () {
-      return this.links.length < 2
     }
   },
 
@@ -90,9 +87,11 @@ export default {
           url: '/',
           text: breadcrumbs.index
         }]
+        this.hidden = true
         items.forEach((item, i) => {
           const routeName = items.slice(0, i + 1).join('-')
           if (breadcrumbs.hasOwnProperty(routeName)) {
+            this.hidden = false
             const url = `/${items.slice(0, i + 1).join('/')}`
             if (i !== items.length - 1 && routeName !== 'dataset') {
               links.push({ type: 'default', url, text: breadcrumbs[routeName] })
@@ -101,6 +100,7 @@ export default {
             }
           } else {
             if (this.dataset) {
+              // single dataset
               links.push({ text: this.dataset.name })
             }
           }
@@ -130,11 +130,6 @@ export default {
 
 .breadcrumb {
   white-space: nowrap;
-  &.link {
-    &:hover {
-      text-decoration: underline;
-    }
-  }
 }
 
 .link,

packages/fe/components/buttons/button-filters.vue

@@ -9,8 +9,8 @@
 
       <div :class="['button-content', { hide: loadingForced || loading }]">
         <slot />
-        <span v-if="selected">
-          <IconClose class="close" />
+        <span v-if="selected" class="close">
+          <IconClose />
         </span>
       </div>
 
@@ -56,7 +56,7 @@ export default {
 
 <style lang="scss" scoped>
 // ///////////////////////////////////////////////////////////////////// General
-.button {
+:deep(.button) {
   position: relative;
   padding: toRem(7) toRem(15);
   border: 1px solid $rangoonGreen;
@@ -77,11 +77,28 @@ export default {
   &.selected {
     background-color: $rangoonGreen;
     color: white;
-  }
-  :deep(.close) {
-    margin-left: toRem(10);
-    path {
-      fill: white;
+    .close {
+      @include fadeOut;
+      position: absolute;
+      right: 0;
+      border-radius: toRem(20);
+      background: linear-gradient(90deg, rgba(27,31,18,0) 0%, rgba(27,31,18,1) 85%);
+      padding-right: toRem(16);
+      width: 100%;
+      height: 100%;
+      text-align: right;
+      svg {
+        top: toRem(6);
+        position: relative;
+      }
+      path {
+        fill: white;
+      }
+    }
+    &:hover {
+      .close {
+        @include fadeIn;
+      }
     }
   }
   &:not(.selected):hover {
@@ -95,39 +112,37 @@ export default {
       }
     }
   }
-}
-
-.triple-dot-loader,
-.button-content {
-  width: 100%;
-  height: 100%;
-}
 
-::v-deep .triple-dot-loader {
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  &.show {
-    opacity: 1;
+  .triple-dot-loader,
+  .button-content {
+    width: 100%;
+    height: 100%;
   }
-  .dot {
-    transition: background-color 150 ease-in-out;
+  .triple-dot-loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    &.show {
+      opacity: 1;
+    }
+    .dot {
+      transition: background-color 150 ease-in-out;
+    }
   }
-}
 
-.button-content {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  font-family: $font_Primary;
-  @include fontWeight_Medium;
-  @include fontSize_16;
-  line-height: leading(24, 16);
-  &.hide {
-    opacity: 0;
+  .button-content {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    font-family: $font_Primary;
+    @include fontWeight_Medium;
+    @include fontSize_16;
+    line-height: leading(24, 16);
+    &.hide {
+      opacity: 0;
+    }
   }
 }
-
 </style>

packages/fe/components/buttons/button-nav.vue

@@ -1,7 +1,6 @@
 <template>
   <Button
     v-bind="$props"
-    class="button-x"
     v-on="$listeners">
     <div class="button-content">
 
@@ -73,7 +72,7 @@ export default {
 
 <style lang="scss" scoped>
 // ///////////////////////////////////////////////////////////////////// General
-.button {
+:deep(.button) {
   display: inline-flex;
   flex-direction: row;
   position: relative;
@@ -89,6 +88,11 @@ export default {
   border-bottom-right-radius: toRem(5);
   position: relative;
   cursor: pointer;
+  &:focus-visible {
+    .top-notch {
+      display: none;
+    }
+  }
   &:hover {
     .tooltip {
       display: block;