feat: more buttons

packages/@fds-design/button/Button.stories.tsx

@@ -22,18 +22,20 @@ export default {
     onFocus: action('focus'),
     onBlur: action('blur'),
     onKeyUp: action('keyup'),
-     children: 'Click Me',
+    children: 'Click Me',
+    variant: 'accent',
+    style: 'fill'
   },
   argTypes: {
     children: {
-      control: 'text', // Allows editing children via a text input in Storybook
+      control: 'text',
       description: 'Content inside the button, can be text or React elements.',
       table: {
         type: {
           summary: 'ReactNode'
         },
         defaultValue: { summary: 'Click Me' }
-      }
+      },
     },
     onPress: {
       table: {
@@ -61,11 +63,22 @@ export default {
     variant: {
       control: 'select',
       options: ['accent', 'primary', 'secondary', 'negative', 'cta', 'overBackground'],
-      defaultValue: 'accent'
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: 'accent' }
+      }
     },
     style: {
       control: 'select',
-      options: [undefined, 'fill', 'outline']
+      options: [undefined, 'fill', 'outline'],
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: 'fill' }
+      }
     },
     staticColor: {
       control: 'select',
@@ -78,10 +91,82 @@ export default {
   }
 } as Meta<SpectrumButtonProps<'button'>>;
 
-// Example Story
+// Default Primary
 export const Default: StoryObj<typeof Button> = {
   args: {
     children: 'Click Me',
     onPress: () => {alert("I'm an FDS button.")}
   }
 };
+
+// Accent
+export const Accent = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '10px' }}>
+      {/* Accent */}
+      <Button variant='accent' onPress={() => alert("I'm an FDS button.")}>Accent</Button>
+
+      {/* Accent Tertiary */}
+      <Button
+        onPress={() => alert("I'm a tertiary button.")}
+        variant="accent"
+        style="outline"
+      >
+        Accent Tertiary
+      </Button>
+
+      {/* Accent Disabled */}
+      <Button variant='accent' onPress={() => alert("I'm an FDS button.")} isDisabled>Disabled</Button>
+</div>
+  )
+};
+
+export const Secondary = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '10px' }}>
+      {/* Secondary */}
+      <Button
+        onPress={() => alert("I'm a secondary button.")}
+        variant="secondary"
+      >
+        Secondary
+      </Button>
+
+      {/* Secondary Tertiary */}
+      <Button
+        onPress={() => alert("I'm a tertiary button.")}
+        variant="secondary"
+        style="outline"
+      >
+        Secondary Tertiary
+      </Button>
+
+      <Button variant='secondary' onPress={() => alert("I'm an FDS button.")} isDisabled>Disabled</Button>
+      </div>
+  )
+}
+
+export const Negative = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '10px' }}>
+      {/* Negative */}
+      <Button
+        onPress={() => alert("I'm a tertiary button.")}
+        variant="negative"
+      >
+        Negative
+      </Button>
+
+      {/* Secondary Tertiary */}
+      <Button
+        onPress={() => alert("I'm a tertiary button.")}
+        variant="negative"
+        style="outline"
+      >
+        Secondary Tertiary
+      </Button>
+
+      <Button variant='negative' onPress={() => alert("I'm an FDS button.")} isDisabled>Disabled</Button>
+    </div>
+  ),
+};

packages/@fds-design/button/index.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
-
 import { Button as SpectrumButton, SpectrumButtonProps } from '@react-spectrum/button';
+import './styles.scss';
 
-export const Button: React.FC<SpectrumButtonProps> = (props) => {
-
-  return <SpectrumButton {...props} UNSAFE_className="fam-button"/>;
+export const Button: React.FC<SpectrumButtonProps> = (props: SpectrumButtonProps) => {
+  const defaultProps = {
+    ...props,
+    variant: props.variant ?? 'accent',
+    style: props.style ?? 'fill'
+  }
+  return <SpectrumButton {...defaultProps} UNSAFE_className="fds-button"/>;
 };

packages/@fds-design/button/styles.scss

@@ -0,0 +1,4 @@
+.fds-button{
+  --spectrum-button-border-radius: 4px;
+  height: 48px;
+}