From 61eca2b1d71577c2d300ed12c21fcee0d510754c Mon Sep 17 00:00:00 2001
From: James Brooks <jamesbrooks@spotify.com>
Date: Thu, 19 Jun 2025 09:12:33 +0100
Subject: [PATCH] Improve more story types

Signed-off-by: James Brooks <jamesbrooks@spotify.com>
---
 .../src/components/Button/Button.stories.tsx  | 37 ++++++++-----------
 1 file changed, 15 insertions(+), 22 deletions(-)

diff --git a/packages/canon/src/components/Button/Button.stories.tsx b/packages/canon/src/components/Button/Button.stories.tsx
index 7baff061b3..82709f1577 100644
--- a/packages/canon/src/components/Button/Button.stories.tsx
+++ b/packages/canon/src/components/Button/Button.stories.tsx
@@ -18,7 +18,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from './Button';
 import { Flex } from '../Flex';
 import { Text } from '../Text';
-import { ButtonProps } from './types';
 import { Icon } from '../Icon';
 
 const meta = {
@@ -167,7 +166,8 @@ export const Responsive: Story = {
   },
 };
 
-const variants: string[] = ['primary', 'secondary'];
+const variants = ['primary', 'secondary'] as const;
+const sizes = ['small', 'medium'] as const;
 
 export const Playground: Story = {
   args: {
@@ -178,25 +178,22 @@ export const Playground: Story = {
       {variants.map(variant => (
         <Flex direction="column" key={variant}>
           <Text>{variant}</Text>
-          {['small', 'medium'].map(size => (
+          {sizes.map(size => (
             <Flex align="center" key={size}>
-              <Button
-                variant={variant as ButtonProps<any>['variant']}
-                size={size as ButtonProps<any>['size']}
-              >
+              <Button variant={variant} size={size}>
                 Button
               </Button>
               <Button
                 iconStart={<Icon name="cloud" />}
-                variant={variant as ButtonProps<any>['variant']}
-                size={size as ButtonProps<any>['size']}
+                variant={variant}
+                size={size}
               >
                 Button
               </Button>
               <Button
                 iconEnd={<Icon name="chevron-right" />}
-                variant={variant as ButtonProps<any>['variant']}
-                size={size as ButtonProps<any>['size']}
+                variant={variant}
+                size={size}
               >
                 Button
               </Button>
@@ -204,30 +201,26 @@ export const Playground: Story = {
                 iconStart={<Icon name="cloud" />}
                 iconEnd={<Icon name="chevron-right" />}
                 style={{ width: '200px' }}
-                variant={variant as ButtonProps<any>['variant']}
-                size={size as ButtonProps<any>['size']}
+                variant={variant}
+                size={size}
               >
                 Button
               </Button>
-              <Button
-                variant={variant as ButtonProps<any>['variant']}
-                size={size as ButtonProps<any>['size']}
-                isDisabled
-              >
+              <Button variant={variant} size={size} isDisabled>
                 Button
               </Button>
               <Button
                 iconStart={<Icon name="cloud" />}
-                variant={variant as ButtonProps<any>['variant']}
-                size={size as ButtonProps<any>['size']}
+                variant={variant}
+                size={size}
                 isDisabled
               >
                 Button
               </Button>
               <Button
                 iconEnd={<Icon name="chevron-right" />}
-                variant={variant as ButtonProps<any>['variant']}
-                size={size as ButtonProps<any>['size']}
+                variant={variant}
+                size={size}
                 isDisabled
               >
                 Button