feat: add compact mode

ICIJ · Sep 10, 2024 · eff3e46 · eff3e46
1 parent dc8caed
commit eff3e46
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/components/Button/ButtonToggleFilters.vue b/src/components/Button/ButtonToggleFilters.vue
@@ -2,12 +2,17 @@
 import { computed } from 'vue'
 
 import ButtonIcon from '@/components/Button/ButtonIcon'
+import { useBreakpoints } from '@/composables/breakpoints'
 
 const active = defineModel('active', { type: Boolean })
 
-defineProps({
+const props = defineProps({
   loading: {
     type: Boolean
+  },
+  compactBreakpoint: {
+    type: String,
+    default: 'sm'
   }
 })
 
@@ -18,13 +23,21 @@ const toggle = () => {
 const variant = computed(() => {
   return active.value ? 'action' : 'outline-tertiary'
 })
+
+const { breakpointDown } = useBreakpoints()
+
+const compact = computed(() => {
+  return breakpointDown.value[props.compactBreakpoint]
+})
 </script>
 
 <template>
   <button-icon
     class="button-toggle-filters"
     :label="$t('buttonToggleFilters.label')"
     icon-left="funnel"
+    :square="compact"
+    :hide-label="compact"
     :loading="loading"
     :variant="variant"
     @click="toggle"

diff --git a/src/stories/components/Project/ProjectLink.stories.js b/src/stories/components/Project/ProjectLink.stories.js
@@ -5,7 +5,7 @@ import ProjectLink from '@/components/Project/ProjectLink'
 const routes = [
   {
     path: '/project/:name',
-    name: 'project.view'
+    name: 'project.view.insights'
   }
 ]