@4alldigital/foundation-ui--core 3.6.4 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4alldigital/foundation-ui--core",
-  "version": "3.6.4",
+  "version": "3.7.0",
   "description": "Foundation UI Core Component Library (source distribution)",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -32,5 +32,5 @@
   },
   "author": "Joe Mewes",
   "license": "MIT",
-  "gitHead": "3b1ed46039f81fdd9936f576f03e3981156a81c6"
+  "gitHead": "0049b7335f8f06215701846c7d2efb20d12ed15a"
 }

package/src/components/Accordion/Accordion.tsx

@@ -12,12 +12,12 @@ const AccordionItem = ({ title, content }: { title: string; content: string }) =
     <Collapsible.Root open={open} onOpenChange={setOpen} className="mb-2">
       <Collapsible.Trigger
         className={cx(
-          'accordion-trigger w-full',
+          'accordion-trigger w-full flex gap-2 items-center justify-between',
           {
             'accordion-trigger-open': open,
           },
         )}>
-        <Copy className={cx('transition-all mb-0 mr-2', { 'text-white': open })}>
+        <Copy bold className={cx('transition-all mb-0 mr-2', { 'text-body': open })}>
           {title}
         </Copy>
         <div className="">

package/src/components/Button/Button.stories.tsx

@@ -1,50 +1,279 @@
-import type { Meta, StoryObj } from '@storybook/nextjs';
-import Button from '.';
-import { BTN_VARIANTS } from './Button.types';
-
-type Story = StoryObj<typeof Button>;
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+import { BTN_VARIANTS, BTN_SIZES } from './Button.types';
+import { ChevronRight, Mail, Loader2 } from 'lucide-react';
 
 const meta: Meta<typeof Button> = {
   title: 'ATOMS/Button',
   component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary', 'link', 'outline', 'ghost', 'destructive', 'default'],
+      description: 'Button visual variant',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg', 'icon', 'small', 'medium', 'large'],
+      description: 'Button size (supports both new and legacy size names)',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state',
+    },
+    wide: {
+      control: 'boolean',
+      description: 'Wide padding variant',
+    },
+    rounded: {
+      control: 'boolean',
+      description: 'Fully rounded variant',
+    },
+    raised: {
+      control: 'boolean',
+      description: 'Add shadow effect',
+    },
+    uppercase: {
+      control: 'boolean',
+      description: 'Uppercase text',
+    },
+    outline: {
+      control: 'boolean',
+      description: 'Outline variant',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Show loading spinner',
+    },
+    asChild: {
+      control: 'boolean',
+      description: 'Merge props with child element (Radix UI Slot)',
+    },
+  },
 };
 
 export default meta;
+type Story = StoryObj<typeof Button>;
+
+// New CVA-based variants
+export const Primary: Story = {
+  args: {
+    children: 'Primary Button',
+    variant: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: 'Secondary Button',
+    variant: 'secondary',
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    children: 'Tertiary Button',
+    variant: 'tertiary',
+  },
+};
+
+export const Link: Story = {
+  args: {
+    children: 'Link Button',
+    variant: 'link',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    children: 'Outline Button',
+    outline: true,
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    children: 'Ghost Button',
+    variant: 'ghost',
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    children: 'Delete',
+    variant: 'destructive',
+  },
+};
+
+// Size variants
+export const Small: Story = {
+  args: {
+    children: 'Small Button',
+    size: 'sm',
+  },
+};
+
+export const DefaultSize: Story = {
+  args: {
+    children: 'Default Button',
+    size: 'default',
+  },
+};
 
-/* STORIES */
-export const Default: Story = {
+export const Large: Story = {
   args: {
-    children: <>Default Btn</>,
+    children: 'Large Button',
+    size: 'lg',
   },
 };
 
+// Wide variant
+export const Wide: Story = {
+  args: {
+    children: 'Wide Button',
+    wide: true,
+  },
+};
+
+// Rounded variant
+export const Rounded: Story = {
+  args: {
+    children: 'Rounded',
+    rounded: true,
+  },
+};
+
+// Raised variant
+export const Raised: Story = {
+  args: {
+    children: 'Raised Button',
+    raised: true,
+  },
+};
+
+// With icon
 export const WithIcon: Story = {
   args: {
-    variant: BTN_VARIANTS.PRIMARY,
-    children: <>Example Btn</>,
+    variant: 'primary',
+    children: 'Next',
     icon: 'carbon:arrow-right',
   },
 };
 
+export const IconFirst: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Previous',
+    icon: 'carbon:arrow-left',
+    iconFirst: true,
+  },
+};
+
 export const IconOnly: Story = {
   args: {
-    variant: BTN_VARIANTS.PRIMARY,
+    variant: 'primary',
     icon: 'carbon:arrow-right',
+    size: 'icon',
   },
 };
 
-export const AsLink: Story = {
+export const ExternalLink: Story = {
   args: {
-    variant: BTN_VARIANTS.LINK,
-    children: <>Example Link</>,
-    icon: 'carbon:arrow-right',
+    variant: 'link',
+    children: 'External Link',
+    external: true,
   },
 };
 
-export const LoadingButton: Story = {
+// Loading state
+export const Loading: Story = {
   args: {
-    variant: BTN_VARIANTS.PRIMARY,
-    children: <>Example Btn</>,
+    variant: 'primary',
+    children: 'Processing',
     isLoading: true,
   },
 };
+
+// Disabled
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled Button',
+    disabled: true,
+  },
+};
+
+// Backward compatibility - using legacy enum values
+export const LegacyPrimary: Story = {
+  name: 'Legacy: PRIMARY enum',
+  args: {
+    children: 'Legacy Primary',
+    variant: BTN_VARIANTS.PRIMARY,
+    size: BTN_SIZES.MEDIUM,
+  },
+};
+
+export const LegacySecondary: Story = {
+  name: 'Legacy: SECONDARY enum',
+  args: {
+    children: 'Legacy Secondary',
+    variant: BTN_VARIANTS.SECONDARY,
+    size: BTN_SIZES.LARGE,
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="tertiary">Tertiary</Button>
+      <Button variant="link">Link</Button>
+      <Button outline>Outline</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="destructive">Destructive</Button>
+    </div>
+  ),
+};
+
+// All sizes showcase
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <Button size="sm">Small</Button>
+      <Button size="default">Default</Button>
+      <Button size="lg">Large</Button>
+      <Button size="icon" icon="carbon:arrow-right" />
+    </div>
+  ),
+};
+
+// Complex example with multiple props
+export const ComplexExample: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex gap-4">
+        <Button variant="primary" size="lg" wide raised uppercase>
+          Call to Action
+        </Button>
+      </div>
+      <div className="flex gap-4">
+        <Button variant="secondary" icon="carbon:shopping-cart">
+          Add to Cart
+        </Button>
+        <Button variant="tertiary" icon="carbon:favorite" iconFirst>
+          Favorite
+        </Button>
+      </div>
+      <div className="flex gap-4">
+        <Button outline rounded>
+          Rounded Outline
+        </Button>
+        <Button variant="link" external>
+          Learn More
+        </Button>
+      </div>
+    </div>
+  ),
+};