-
Notifications
You must be signed in to change notification settings - Fork 211
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add a counter to filter button and tab (#826)
* Add filter tab and filter button stories and tests * Update audio count in search-types.spec.ts * Update button snapshot * Revert tab line-height changes * Fix snapshots * Add a counter to filter button and tab * Add storybook tests for VFilterTab * Fix tab focusing in test * Remove duplicate key * Update snapshots * Revert unnecesary changes * Update snapshots * Update snapshot * Add requested changes * Use font-weight 400 for Clear filters * Update snapshots * Fix snapshot
- Loading branch information
Showing
95 changed files
with
22,157 additions
and
6,508 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| <template> | ||
| <VIcon v-if="showIcon" :icon-path="filterIcon" /> | ||
| <p | ||
| v-else | ||
| class="flex h-6 w-6 items-center justify-center rounded-sm" | ||
| :class="pressed ? 'bg-tx' : 'bg-dark-charcoal-10'" | ||
| > | ||
| {{ appliedFilterCount }} | ||
| </p> | ||
| </template> | ||
| <script lang="ts"> | ||
| import { computed, defineComponent } from "@nuxtjs/composition-api" | ||
| import VIcon from "~/components/VIcon/VIcon.vue" | ||
| import filterIcon from "~/assets/icons/filter.svg" | ||
| export default defineComponent({ | ||
| name: "VFilterIconOrCounter", | ||
| components: { VIcon }, | ||
| props: { | ||
| appliedFilterCount: { | ||
| type: Number, | ||
| default: 0, | ||
| }, | ||
| pressed: { | ||
| type: Boolean, | ||
| default: false, | ||
| }, | ||
| }, | ||
| setup(props) { | ||
| const showIcon = computed(() => props.appliedFilterCount === 0) | ||
| return { | ||
| showIcon, | ||
| filterIcon, | ||
| } | ||
| }, | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
frontend/src/components/VHeader/VHeaderMobile/VFilterTab.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <template> | ||
| <VTab id="filters" size="medium" class="gap-x-2"> | ||
| <VFilterIconOrCounter :applied-filter-count="appliedFilterCount" /> | ||
| <h2 class="label-regular">{{ $t("filters.title") }}</h2> | ||
| </VTab> | ||
| </template> | ||
| <script lang="ts"> | ||
| import VFilterIconOrCounter from "~/components/VHeader/VFilterIconOrCounter.vue" | ||
| import VTab from "~/components/VTabs/VTab.vue" | ||
| export default { | ||
| name: "VFilterTab", | ||
| components: { VFilterIconOrCounter, VTab }, | ||
| props: { | ||
| appliedFilterCount: { | ||
| type: Number, | ||
| default: 0, | ||
| }, | ||
| }, | ||
| } | ||
| </script> |
58 changes: 58 additions & 0 deletions
58
frontend/src/components/VHeader/VHeaderMobile/meta/VFilterTab.stories.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import { | ||
| ArgsTable, | ||
| Canvas, | ||
| Description, | ||
| Meta, | ||
| Story, | ||
| } from "@storybook/addon-docs" | ||
| import VFilterTab from "~/components/VHeader/VHeaderMobile/VFilterTab.vue" | ||
| import VTab from "~/components/VTabs/VTab.vue" | ||
| import VTabs from "~/components/VTabs/VTabs.vue" | ||
|
|
||
| <Meta | ||
| title="Components/VHeader/VHeaderMobile/VFilterTab" | ||
| component={VFilterTab} | ||
| argTypes={{ | ||
| appliedFilterCount: { | ||
| type: "number", | ||
| }, | ||
| isSelected: { | ||
| type: "boolean", | ||
| }, | ||
| }} | ||
| /> | ||
|
|
||
| export const Template = (args, { argTypes }) => ({ | ||
| template: ` | ||
| <div class="p-2"> | ||
| <VTabs label="tabs" | ||
| :selected-id="args.selected" id="wrapper" variant="plain" | ||
| tablist-style="ps-6 pe-2 gap-x-4" class="flex min-h-0" | ||
| > | ||
| <template #tabs> | ||
| <VTab id="tab1" label="Tab 1" size="medium">Tab1</VTab> | ||
| <VFilterTab v-bind="args" v-on="args" /> | ||
| </template> | ||
| </VTabs> | ||
| <div class="border-t border-dark-charcoal-20 h-2 w-full" /> | ||
| </div>`, | ||
| components: { VFilterTab, VTabs, VTab }, | ||
| props: Object.keys(argTypes), | ||
| setup() { | ||
| args["selected"] = args.isSelected ? "filters" : "tab1" | ||
| return { args } | ||
| }, | ||
| }) | ||
|
|
||
| # Filter tab | ||
|
|
||
| <Description of={VFilterTab} /> | ||
|
|
||
| <ArgsTable of={VFilterTab} /> | ||
|
|
||
| The tab button on the mobile modal that opens the filters tab. It shows how many | ||
| filters are applied, or a filters icon. | ||
|
|
||
| <Canvas> | ||
| <Story name="Default">{Template.bind({})}</Story> | ||
| </Canvas> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file removed
BIN
-28.6 KB
...ilters-sidebar.spec.ts-snapshots/filters-sidebar-filters-selected-rtl-linux.png
Binary file not shown.
Oops, something went wrong.