Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create VTag component #3137

Merged
merged 7 commits into from
Oct 13, 2023
Merged

Create VTag component #3137

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
afbd407
create VTag component
ngken0995 Oct 4, 2023
00cd837
revise VTag and VMediaTags
ngken0995 Oct 5, 2023
c8df0a0
revise test and update VMediaTags
Oct 11, 2023
44f6545
run just lint
ngken0995 Oct 11, 2023
3726c7c
revise VTag storybook
ngken0995 Oct 11, 2023
1b5e998
revise VTag storybook
ngken0995 Oct 12, 2023
84c6d64
Update frontend/src/components/VTag/meta/VTag.stories.mdx
obulat Oct 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions frontend/src/components/VTag/VTag.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<template>
<VButton
as="VLink"
size="small"
variant="filled-gray"
class="label-bold"
:href="href"
>{{ title }}</VButton
>
</template>

<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import { defineComponent } from "@nuxtjs/composition-api"
import { defineComponent } from "vue"

We are trying to move away from @nuxtjs/composition-api wherever possible: this will make the transition to Nuxt 3 easier. This is why we only use the defineComponent imported from @nuxtjs/composition-api on pages. On a component like this, it's better to import it from vue.


import VButton from "~/components/VButton.vue"

export default defineComponent({
name: "VTag",
components: { VButton },
props: {
title: { type: String },
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This prop has to be required, too, because a tag without the title does not make sense.

href: {
type: String,
required: true,
},
},
})
</script>

<style scoped></style>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<style scoped></style>

17 changes: 17 additions & 0 deletions frontend/src/components/VTag/meta/VTag.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { Canvas, Meta, Story } from "@storybook/addon-docs"

import VTag from "~/components/VTag/VTag.vue"

export const Template = (args) => ({
template: `<VTag v-bind="args"/>`,
components: { VTag },
setup() {
return { args }
},
})

<Meta title="Components/VTag" component={VTag} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This story should have args and argTypes set up: this will allow us to set the title and the href to test in the storybook. You can see examples of how to set this up in other .mdx files.


<Canvas>
<Story name="default">{Template.bind({})}</Story>
</Canvas>