From 799eb49e56c347187b7df7d49007f43d47907cdb Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 20 Jun 2024 22:02:36 +0200
Subject: [PATCH] add mockFn and descriptions to button example

---
 examples/Button.stories.svelte | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/examples/Button.stories.svelte b/examples/Button.stories.svelte
index 1ebd56e..5981d32 100644
--- a/examples/Button.stories.svelte
+++ b/examples/Button.stories.svelte
@@ -5,9 +5,12 @@
     type Args,
     type StoryContext,
   } from '@storybook/addon-svelte-csf';
+  import { fn } from '@storybook/test';
 
   import Button from './components/Button.svelte';
 
+  const onclickFn = fn().mockName('onclick');
+
   /**
    * These are the stories for the `Button` component.
    * It's the default button we use throughout our application.
@@ -17,6 +20,7 @@
     tags: ['autodocs'],
     args: {
       children: 'Click me',
+      onclick: onclickFn,
     },
     argTypes: {
       backgroundColor: { control: 'color' },
@@ -37,15 +41,16 @@
   <Button {...args}>{children}</Button>
 {/snippet}
 
-<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
+<!-- Only use this sparingly as the main CTA. -->
 <Story name="Primary" args={{ primary: true }} />
 
 <Story name="Secondary" />
 
 <Story name="Large" args={{ size: 'large' }} />
 
+<!-- This is _tiny_ 🤏 -->
 <Story name="Small" args={{ size: 'small' }} />
 
 <Story name="Long content">
-  <Button>The content</Button>
+  <Button onclick={onclickFn}>The very long content</Button>
 </Story>