fix: IconButton story + NuxtLink stub #137

.storybook/preview.ts

@@ -1,5 +1,6 @@
 import { setup } from '@storybook/vue3'
 import type { Preview } from '@storybook/vue3'
+import { action } from '@storybook/addon-actions'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faStar as fasStar } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -19,6 +20,20 @@ setup((app) => {
   library.add(fasStar)
   app.use(i18n)
   app.component('font-awesome-icon', FontAwesomeIcon)
+  app.component('NuxtLink', {
+    props: {
+      to: {
+        type: String,
+        required: true,
+      },
+    },
+    methods: {
+      log() {
+        action('link target')(this.to)
+      },
+    },
+    template: '<a @click="log"><slot></slot></a>',
+  })
 })
 
 const globalTypes = {

components/UI/IconButton.stories.ts

@@ -1,29 +1,30 @@
-import IconButton from '~/components/UI/IconButton.vue'
-import { bind } from '~/lib/storybook-types'
-import '@teritorio/font-teritorio/teritorio/teritorio.css'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import IconButton from './IconButton.vue'
 
-export default {
-  title: 'UI/IconButton',
+const meta: Meta<typeof IconButton> = {
   component: IconButton,
 }
 
-const defaultProps = {
-  label: 'Plop',
+export default meta
+type Story = StoryObj<typeof IconButton>
+
+export const Default: Story = {
+  args: {
+    default: 'ABC',
+    label: 'Plop',
+  },
 }
 
-export const DefaultButton = bind(
-  IconButton,
-  {
-    ...defaultProps,
+export const InternalLink: Story = {
+  args: {
+    ...Default.args,
+    href: 'test/1',
   },
-  { slots: 'ABC' },
-)
+}
 
-export const DefaultLink = bind(
-  IconButton,
-  {
-    ...defaultProps,
+export const ExternalLink: Story = {
+  args: {
+    ...Default.args,
     href: 'https://www.teritorio.fr/',
   },
-  { slots: 'ABC' },
-)
+}

components/UI/IconButton.vue

@@ -1,24 +1,9 @@
-<script lang="ts">
-import type { PropType } from 'vue'
-
-import { defineNuxtComponent } from '#app'
-
-export default defineNuxtComponent({
-  props: {
-    label: {
-      type: String as PropType<string>,
-      required: true,
-    },
-    href: {
-      type: String as PropType<string | undefined>,
-      default: undefined,
-    },
-    target: {
-      type: String as PropType<string | undefined>,
-      default: undefined,
-    },
-  },
-})
+<script setup lang="ts">
+defineProps<{
+  label: string
+  href?: string
+  target?: string
+}>()
 </script>
 
 <template>