feat: create the BentoFilterMenu

package.json

@@ -33,6 +33,5 @@
   },
   "engines": {
     "pnpm": "^9.12.1"
-  },
-  "packageManager": "[email protected]"
+  }
 }

packages/vue-component-library/src/lib-components/BentoFilterMenu.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import SmartLink from '@/lib-components/SmartLink.vue'
+import { useTheme } from '@/composables/useTheme'
+
+// Props
+interface BentoFilterMenuItem {
+  label: string
+  to: string
+}
+interface BentoFilterMenuProps {
+  items: BentoFilterMenuItem[]
+}
+
+defineProps<BentoFilterMenuProps>()
+
+// Imports
+const theme = useTheme()
+// Data
+
+// Computed
+const classes = computed(() => {
+  return ['bento-filter-menu', theme?.value || '']
+})
+</script>
+
+<template>
+  <ul :class="classes">
+    <li
+      v-for="item in items"
+      :key="item.label"
+      class="bento-filter-menu-item"
+    >
+      <SmartLink
+        :to="item.to"
+        class="bento-filter-menu-link"
+      >
+        {{ item.label }}
+      </SmartLink>
+    </li>
+  </ul>
+</template>
+
+<style lang="scss" scoped>
+@import "@/styles/dlc/_bento-filter-menu.scss";
+</style>

packages/vue-component-library/src/stories/BentoFilterMenu.spec.js

@@ -0,0 +1,8 @@
+describe('Funkhaus / Bento Filter Menu', () => {
+  it('Default story: renders with theme and all filter items', () => {
+    cy.visit(
+      '/iframe.html?id=funkhaus-bento-filter-menu--default&viewMode=story'
+    )
+    cy.get('.bento-filter-menu').should('exist')
+  })
+})

packages/vue-component-library/src/stories/BentoFilterMenu.stories.js

@@ -0,0 +1,36 @@
+import { computed } from 'vue'
+import BentoFilterMenu from '@/lib-components/BentoFilterMenu.vue'
+
+export default {
+  title: 'Funkhaus / Bento Filter Menu',
+  component: BentoFilterMenu,
+}
+
+export function Default() {
+  return {
+    components: { BentoFilterMenu },
+    provide() {
+      return {
+        theme: computed(() => 'dlc'),
+      }
+    },
+    template: `
+  <div style="padding: 40px; background: #f5f5f5;">
+    <bento-filter-menu :items="items" />
+  </div>
+`,
+    data() {
+      return {
+        items: [
+          { label: 'Everything', to: '/search' },
+          { label: 'Images', to: '/search?type=images' },
+          { label: 'Videos', to: '/search?type=videos' },
+          { label: 'Manuscripts', to: '/search?type=manuscripts' },
+          { label: 'Books', to: '/search?type=books' },
+          { label: 'Audio', to: '/search?type=audio' },
+          { label: '3D Art', to: '/search?type=3d-art' },
+        ]
+      }
+    }
+  }
+}

packages/vue-component-library/src/styles/dlc/_bento-filter-menu.scss

@@ -0,0 +1,71 @@
+.dlc.bento-filter-menu,
+.bento-filter-menu {
+    --gap: 60px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--gap);
+
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    .bento-filter-menu-item {
+        position: relative;
+
+        &:after {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            right: calc(var(--gap) * -0.5);
+            width: 1px;
+            height: 100%;
+            background-color: var(--color-secondary-grey-02);
+        }
+
+        &:last-child:after {
+            display: none;
+        }
+    }
+
+    .bento-filter-menu-link {
+        font-size: 20px;
+        font-family: var(--font-primary);
+        line-height: 1;
+        font-weight: 400;
+        color: var(--color-primary-blue-05);
+
+        &.exact-active {
+            color: var(--color-primary-blue-03);
+        }
+
+        &:after {
+            content: "";
+            position: absolute;
+            bottom: 1px;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background-color: var(--color-primary-blue-03);
+            border: none;
+            box-sizing: border-box;
+            opacity: 0;
+            @include animate-normal;
+        }
+    }
+
+    // Hovers
+    @media #{$has-hover} {
+        .bento-filter-menu-link:hover {
+            color: var(--color-primary-blue-03);
+            &:after {
+                opacity: 1;
+            }
+        }
+    }
+
+    // Breakpoints
+    @media #{$small} {
+        --gap: 24px;
+    }
+}