Component: VTag

[obulat]

Description

The new VTag component will be used for clickable tags. The current, non-clickable, VMediaTag component will be replaced with it.

To create a new component, run just frontend/run create:component VTag. This will run the component generator and will create the new component file, a Storybook story, unit and Playwright tests. The unit and playwright tests can be deleted.

API

Props

Name	Type	Description
title	string	The tag text
href	string	The url the tag should link to

Code samples

<VButton
  as="VLink"
  size="small"
  variant="filled-gray"
  class="label-bold"
  :href="href"
>{{ title }}</VButton>

• Figma: https://www.figma.com/file/niWnCgB7K0Y4e4mgxMrnRC/Additional-search-views?type=design&node-id=1263-62874&mode=design&t=WRJSFZNUbmpYERx8-4

[Vanshika-Aggarwal]

Hey, I am new to open-source contributions, can I work on this issue?

[obulat]

Hi, @Vanshika-Aggarwal, sure! I'm assigning the issue to you 🚀 Please let me know if you need any help. Please be sure to create a separate branch, not the main branch, in your fork of the Openverse repository for the PR.

[krysal]

Hey @Vanshika-Aggarwal! Hope you're doing well! Do you still plan to work on this? Do you need help with the project setup or anything? Remember to check the guidelines (1) (2). If you need further help (get in touch!) or don't plan to continue this effort, let us know in any case.

[Vanshika-Aggarwal]

Hey..sorry for going awol,I would totally like to work on this issue, I just thought this branch was dormant and didn't go through my emails. I am working on this issue now.

[krysal]

Thank you for confirming! That sounds great 😄

[ngken0995]

Hello @krysal and @obulat,

Can I work on this issue?

[ngken0995]

@obulat and @krysal I created a VTag component. What is the href suppose to do? For example, user click on the "cat" tag then the href is https://openverse.org/search/?q=cat. How can I implement that into the codebase? I tried :href="`search/${tag}`" and I get https://openverse.org/image/search/?q=cat which lead to an unusable homepage.

[obulat]

@ngken0995 , VTag should accept href as a prop, and should use that prop as the href:

<template>
<VButton
  as="VLink"
  size="small"
  variant="filled-gray"
  class="label-bold"
  :href="href"
>{{ title }}</VButton>

<script lang="ts"> ... props: { title: { .... }, href: { type: String, required: true, } } ... </script> ```

[ngken0995]

@obulat There is a VMediaTags component which takes the VMediaTag. What should the href be when I pass the prop in VTags once replace VMediaTag in VMediaTags?

[obulat]

@obulat There is a VMediaTags component which takes the VMediaTag. What should the href be when I pass the prop in VTags once replace VMediaTag in VMediaTags?

VTag should be a completely separate component, @ngken0995 . You don't need to do anything with VMediaTag.

[ngken0995]

@obulat I misunderstood the task. I thought I would have create a VTag and replace it with VMediaTag on the same PR.