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

package/src/components/Button/Button.tsx

@@ -1,117 +1,264 @@
-import cx from 'classnames';
-import { twMerge } from 'tailwind-merge';
-import { BTN_SIZES, BTN_TYPES, BTN_VARIANTS, Props } from './Button.types';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../utils';
 import Icon from '../Icon';
 import Loader from '../Loader';
+import { BTN_VARIANTS, BTN_SIZES, type ButtonProps } from './Button.types';
 
-const Button = ({
-  variant = BTN_VARIANTS.PRIMARY,
-  size = BTN_SIZES.MEDIUM,
-  type = BTN_TYPES.BUTTON,
-  wide = false,
-  rounded = false,
-  raised = false,
-  uppercase,
-  children,
-  id,
-  disabled,
-  ariaLabel,
-  onClick,
-  icon,
-  external,
-  iconFirst,
-  outline,
-  testID,
-  className,
-  isLoading,
-  offsetFont = false,
-}: Props) => {
-  const smallX = wide ? 'px-5' : 'px-3';
-  const mediumX = wide ? 'px-8' : 'px-4';
-  const largeX = wide ? 'px-11' : 'px-5';
-
-  const sizes = {
-    small: {
-      x: children && !rounded ? smallX : children ? 'px-3' : 'px-1',
-      y: 'py-1',
-      space: 'space-x-2',
-      text: 'text-sm',
-      icon: 'w-3 h-3',
-    },
-    medium: {
-      x: children && !rounded ? mediumX : children ? 'px-4' : 'px-2',
-      y: 'py-2',
-      space: 'space-x-3',
-      text: 'text-base',
-      icon: 'w-5 h-5',
-    },
-    large: {
-      x: children && !rounded ? largeX : children ? 'px-5' : 'px-3',
-      y: 'py-3',
-      space: 'space-x-4',
-      text: 'text-lg',
-      icon: 'w-6 h-6',
+const buttonVariants = cva(
+  'inline-flex items-center cursor-pointer justify-center whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        // New variants matching old Button theme colors
+        primary:
+          'text-white border border-primary bg-primary hover:bg-primary-darker',
+        secondary:
+          'text-white border border-secondary bg-secondary hover:bg-secondary-darker',
+        tertiary:
+          'text-black border border-tertiary bg-tertiary hover:bg-tertiary-darker',
+        link: 'px-0 text-body-text dark:text-body-text-dark border-transparent bg-transparent hover:bg-transparent shadow-none group-hover:invert',
+        
+        // Shadcn variants
+        default:
+          'bg-white/20 text-primary-foreground shadow hover:bg-primary/90 border-2 border-red',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        ghost: 'hover:bg-transparent hover:bg-transparent',
+        
+        // Outline is handled as compound variant
+        outline:
+          'border-primary bg-transparent text-body-text dark:text-body-text-dark hover:bg-opacity-30 border-primary-300 dark:border-primary-400 hover:border-primary-400 dark:hover:border-primary-500',
+      },
+      size: {
+        sm: 'h-8 px-3 py-1 text-xs',
+        default: 'h-9 px-6 py-2 text-base',
+        lg: 'h-10 px-5 py-3 text-lg',
+        icon: 'h-9 w-9',
+      },
+      wide: {
+        true: '',
+        false: '',
+      },
+      rounded: {
+        true: 'rounded-full leading-none',
+        false: '',
+      },
+      raised: {
+        true: 'shadow',
+        false: '',
+      },
+      uppercase: {
+        true: 'uppercase',
+        false: '',
+      },
     },
-  };
-
-  const classes = twMerge(
-    cx(
-      'button flex rounded-sm items-center cursor-pointer',
-      { shadow: raised },
-      { uppercase: uppercase },
-      { 'auto-cols-auto grid-cols-2 gap-4': isLoading || icon || external },
-      { 'flex-row-reverse': iconFirst },
-      { 'opacity-50 cursor-not-allowed': disabled },
-      `${sizes?.[size]?.y} ${sizes?.[size]?.x} ${sizes?.[size]?.text}`,
-      { 'text-white border-primary bg-primary hover:bg-primary-darker': variant === BTN_VARIANTS.PRIMARY },
-      { 'text-white border-secondary bg-secondary hover:bg-secondary-darker': variant === BTN_VARIANTS.SECONDARY },
-      { 'text-black border-tertiary bg-tertiary hover:bg-tertiary-darker': variant === BTN_VARIANTS.TERTIARY },
-      { 'border-primary bg-transparent text-body-text dark:text-body-text-dark hover:bg-opacity-30': outline },
-      { 'border-primary-300 dark:border-primary-400 hover:border-primary-400 dark:hover:border-primary-500': outline },
+    compoundVariants: [
+      // Wide variants adjust padding
       {
-        'px-0 text-body-text dark:text-body-text-dark border-transparent bg-transparent hover:bg-transparent shadow-none group-hover:invert':
-          variant === BTN_VARIANTS.LINK,
+        size: 'sm',
+        wide: true,
+        className: 'px-5',
       },
-      { 'rounded-full leading-none': rounded },
+      {
+        size: 'default',
+        wide: true,
+        className: 'px-8',
+      },
+      {
+        size: 'lg',
+        wide: true,
+        className: 'px-11',
+      },
+    ],
+    defaultVariants: {
+      variant: 'primary',
+      size: 'default',
+      wide: false,
+      rounded: false,
+      raised: false,
+      uppercase: false,
+    },
+  }
+);
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
       className,
-    ),
-  );
-
-  const iconClasses = cx(sizes?.[size]?.icon);
-
-  return (
-    <button
-      id={id}
-      data-testid={testID || id || 'Button'}
-      onClick={onClick}
-      className={classes}
-      type={type}
-      disabled={disabled}
-      aria-label={ariaLabel}
-      role="button">
-      <>
-        {offsetFont ? <span className="brand-font-offset">{children}</span>: children}
-        {icon && !external && (
-          <span className="flex items-center">
-            <Icon name={icon} className={iconClasses} />
-          </span>
-        )}
-        {external && (
-          <span className="flex items-center">
-            <Icon name="carbon:launch" className={iconClasses} />
-          </span>
-        )}
-        {isLoading && (
-          <div className="flex items-center">
-            <Loader size={4} />
-          </div>
+      variant: variantProp,
+      size: sizeProp,
+      wide = false,
+      rounded = false,
+      raised = false,
+      uppercase = false,
+      outline = false,
+      asChild = false,
+      children,
+      icon,
+      external,
+      iconFirst,
+      isLoading,
+      offsetFont = false,
+      ariaLabel,
+      testID,
+      id,
+      disabled,
+      type = 'button',
+      ...props
+    },
+    ref
+  ) => {
+    // Map legacy enum values to new string values
+    const mapVariant = (v: ButtonProps['variant']) => {
+      if (typeof v === 'object' && 'PRIMARY' in (v as typeof BTN_VARIANTS)) {
+        // Handle enum values
+        const enumValue = v as BTN_VARIANTS;
+        switch (enumValue) {
+          case BTN_VARIANTS.PRIMARY:
+            return 'primary';
+          case BTN_VARIANTS.SECONDARY:
+            return 'secondary';
+          case BTN_VARIANTS.TERTIARY:
+            return 'tertiary';
+          case BTN_VARIANTS.LINK:
+            return 'link';
+          default:
+            return 'primary';
+        }
+      }
+      // Handle string enum values
+      if (v === 'primary' || v === 'secondary' || v === 'tertiary' || v === 'link') {
+        return v;
+      }
+      // If outline prop is set, use outline variant
+      if (outline) {
+        return 'outline';
+      }
+      return v || 'primary';
+    };
+
+    const mapSize = (s: ButtonProps['size']) => {
+      if (typeof s === 'object' && 'SMALL' in (s as typeof BTN_SIZES)) {
+        // Handle enum values
+        const enumValue = s as BTN_SIZES;
+        switch (enumValue) {
+          case BTN_SIZES.SMALL:
+            return 'sm';
+          case BTN_SIZES.MEDIUM:
+            return 'default';
+          case BTN_SIZES.LARGE:
+            return 'lg';
+          default:
+            return 'default';
+        }
+      }
+      // Handle string size mapping
+      if (s === 'small') return 'sm';
+      if (s === 'medium') return 'default';
+      if (s === 'large') return 'lg';
+      return s || 'default';
+    };
+
+    const variant = mapVariant(variantProp);
+    const size = mapSize(sizeProp);
+
+    // Determine icon size based on button size
+    const getIconSize = () => {
+      switch (size) {
+        case 'sm':
+          return 'w-3 h-3';
+        case 'lg':
+          return 'w-6 h-6';
+        default:
+          return 'w-5 h-5';
+      }
+    };
+
+    const iconClasses = getIconSize();
+
+    const Comp = asChild ? Slot : 'button';
+
+    // Build content with proper ordering for icons
+    const renderContent = () => {
+      const iconElement = icon ? (
+        <span className="flex items-center">
+          <Icon name={icon} className={iconClasses} />
+        </span>
+      ) : null;
+
+      const externalIcon = external ? (
+        <span className="flex items-center">
+          <Icon name="carbon:launch" className={iconClasses} />
+        </span>
+      ) : null;
+
+      const loader = isLoading ? (
+        <div className="flex items-center">
+          <Loader size={4} />
+        </div>
+      ) : null;
+
+      const childContent = offsetFont && children ? (
+        <span className="brand-font-offset">{children}</span>
+      ) : (
+        children
+      );
+
+      // If iconFirst is true, render icon before children
+      if (iconFirst) {
+        return (
+          <>
+            {iconElement}
+            {externalIcon}
+            {childContent}
+            {loader}
+          </>
+        );
+      }
+
+      // Default: children first, then icon
+      return (
+        <>
+          {childContent}
+          {iconElement}
+          {externalIcon}
+          {loader}
+        </>
+      );
+    };
+
+    return (
+      <Comp
+        ref={ref}
+        id={id}
+        data-testid={testID || id || 'Button'}
+        className={cn(
+          buttonVariants({
+            variant,
+            size,
+            wide,
+            rounded,
+            raised,
+            uppercase,
+            className,
+          })
         )}
-      </>
-    </button>
-  );
-};
+        type={type as 'button' | 'submit' | 'reset'}
+        disabled={disabled}
+        aria-label={ariaLabel}
+        role="button"
+        {...props}
+      >
+        {renderContent()}
+      </Comp>
+    );
+  }
+);
 
 Button.displayName = 'Button';
 
 export default Button;
-export type { Props };
+export { Button, buttonVariants };
+export type { ButtonProps };

package/src/components/Button/Button.types.ts

@@ -1,11 +1,19 @@
+import { type VariantProps } from 'class-variance-authority';
+import { buttonVariants } from './Button';
 import { MouseEventHandler, ReactNode } from 'react';
 
+/**
+ * @deprecated Use string literals instead: 'submit' | 'reset' | 'button'
+ */
 export enum BTN_TYPES {
   SUBMIT = 'submit',
   RESET = 'reset',
   BUTTON = 'button',
 }
 
+/**
+ * @deprecated Use ButtonProps['variant'] string literals instead: 'primary' | 'secondary' | 'tertiary' | 'link'
+ */
 export enum BTN_VARIANTS {
   PRIMARY = 'primary',
   SECONDARY = 'secondary',
@@ -13,20 +21,33 @@ export enum BTN_VARIANTS {
   LINK = 'link',
 }
 
+/**
+ * @deprecated Use ButtonProps['size'] string literals instead: 'sm' | 'default' | 'lg'
+ */
 export enum BTN_SIZES {
   SMALL = 'small',
   MEDIUM = 'medium',
   LARGE = 'large',
 }
-export interface Props {
-  variant?: BTN_VARIANTS;
-  size?: BTN_SIZES;
+
+// New CVA-based button props
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  // Radix UI Slot support
+  asChild?: boolean;
+  
+  /**
+   * Button variant. Accepts string literals or legacy BTN_VARIANTS enum values for backward compatibility.
+   */
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'link' | 'outline' | 'ghost' | 'destructive' | 'default' | BTN_VARIANTS;
+  
+  /**
+   * Size of the button. Accepts both new ('sm', 'default', 'lg') and legacy ('small', 'medium', 'large') values
+   */
+  size?: 'sm' | 'default' | 'lg' | 'icon' | 'small' | 'medium' | 'large' | BTN_SIZES;
+  
   uppercase?: boolean;
-  children?: ReactNode;
-  type?: BTN_TYPES;
-  disabled?: boolean;
-  ariaLabel?: string;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
   icon?: string;
   external?: boolean;
   iconFirst?: boolean;
@@ -34,10 +55,21 @@ export interface Props {
   outline?: boolean;
   wide?: boolean;
   rounded?: boolean;
-  id?: string;
-  testID?: string;
-  className?: string;
   isLoading?: boolean;
-  iconOnly?: boolean;
   offsetFont?: boolean;
+  ariaLabel?: string;
+  testID?: string;
+}
+
+/**
+ * @deprecated Use ButtonProps instead
+ */
+export interface Props extends Omit<ButtonProps, 'variant' | 'size'> {
+  variant?: BTN_VARIANTS;
+  size?: BTN_SIZES;
+  type?: BTN_TYPES;
+  children?: ReactNode;
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  id?: string;
 }

package/src/components/Button/index.ts

@@ -1 +1,8 @@
-export { default } from './Button';
+import ButtonComponent from './Button';
+export { Button, buttonVariants } from './Button';
+export type { ButtonProps } from './Button.types';
+export { BTN_VARIANTS, BTN_SIZES, BTN_TYPES } from './Button.types';
+export type { Props } from './Button.types';
+
+// Default export for backward compatibility
+export default ButtonComponent;

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

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Button from '.';
+import { BTN_VARIANTS } from './Button.types';
+
+type Story = StoryObj<typeof Button>;
+
+const meta: Meta<typeof Button> = {
+  title: 'DEPRECATED/ButtonDeprecated',
+  component: Button,
+  tags: ['deprecated'],
+};
+
+export default meta;
+
+/* STORIES */
+export const Default: Story = {
+  args: {
+    children: <>Default Btn</>,
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    variant: BTN_VARIANTS.PRIMARY,
+    children: <>Example Btn</>,
+    icon: 'carbon:arrow-right',
+  },
+};
+
+export const IconOnly: Story = {
+  args: {
+    variant: BTN_VARIANTS.PRIMARY,
+    icon: 'carbon:arrow-right',
+  },
+};
+
+export const AsLink: Story = {
+  args: {
+    variant: BTN_VARIANTS.LINK,
+    children: <>Example Link</>,
+    icon: 'carbon:arrow-right',
+  },
+};
+
+export const LoadingButton: Story = {
+  args: {
+    variant: BTN_VARIANTS.PRIMARY,
+    children: <>Example Btn</>,
+    isLoading: true,
+  },
+};

package/src/components/ButtonDeprecated/Button.tsx

@@ -0,0 +1,138 @@
+import cx from 'classnames';
+import { twMerge } from 'tailwind-merge';
+import { BTN_SIZES, BTN_TYPES, BTN_VARIANTS, Props } from './Button.types';
+import Icon from '../Icon';
+import Loader from '../Loader';
+import { useEffect } from 'react';
+
+/**
+ * @deprecated ButtonDeprecated is deprecated and will be removed in a future version.
+ * Please migrate to the new Button component from '@foundation-ui/core'.
+ * 
+ * Migration guide:
+ * - The new Button component is backward compatible with all existing props
+ * - No immediate changes required, but consider updating to use the new component
+ * - See BUTTON_MIGRATION.md for detailed migration instructions
+ */
+const Button = ({
+  variant = BTN_VARIANTS.PRIMARY,
+  size = BTN_SIZES.MEDIUM,
+  type = BTN_TYPES.BUTTON,
+  wide = false,
+  rounded = false,
+  raised = false,
+  uppercase,
+  children,
+  id,
+  disabled,
+  ariaLabel,
+  onClick,
+  icon,
+  external,
+  iconFirst,
+  outline,
+  testID,
+  className,
+  isLoading,
+  offsetFont = false,
+}: Props) => {
+  // Deprecation warning
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        'ButtonDeprecated is deprecated and will be removed in a future version. ' +
+        'Please migrate to the new Button component. The new Button is fully backward compatible. ' +
+        'See BUTTON_MIGRATION.md for migration instructions.'
+      );
+    }
+  }, []);
+
+  const smallX = wide ? 'px-5' : 'px-3';
+  const mediumX = wide ? 'px-8' : 'px-4';
+  const largeX = wide ? 'px-11' : 'px-5';
+
+  const sizes = {
+    small: {
+      x: children && !rounded ? smallX : children ? 'px-3' : 'px-1',
+      y: 'py-1',
+      space: 'space-x-2',
+      text: 'text-sm',
+      icon: 'w-3 h-3',
+    },
+    medium: {
+      x: children && !rounded ? mediumX : children ? 'px-4' : 'px-2',
+      y: 'py-2',
+      space: 'space-x-3',
+      text: 'text-base',
+      icon: 'w-5 h-5',
+    },
+    large: {
+      x: children && !rounded ? largeX : children ? 'px-5' : 'px-3',
+      y: 'py-3',
+      space: 'space-x-4',
+      text: 'text-lg',
+      icon: 'w-6 h-6',
+    },
+  };
+
+  const classes = twMerge(
+    cx(
+      'button flex rounded-sm items-center cursor-pointer',
+      { shadow: raised },
+      { uppercase: uppercase },
+      { 'auto-cols-auto grid-cols-2 gap-4': isLoading || icon || external },
+      { 'flex-row-reverse': iconFirst },
+      { 'opacity-50 cursor-not-allowed': disabled },
+      `${sizes?.[size]?.y} ${sizes?.[size]?.x} ${sizes?.[size]?.text}`,
+      { 'text-white border-primary bg-primary hover:bg-primary-darker': variant === BTN_VARIANTS.PRIMARY },
+      { 'text-white border-secondary bg-secondary hover:bg-secondary-darker': variant === BTN_VARIANTS.SECONDARY },
+      { 'text-black border-tertiary bg-tertiary hover:bg-tertiary-darker': variant === BTN_VARIANTS.TERTIARY },
+      { 'border-primary bg-transparent text-body-text dark:text-body-text-dark hover:bg-opacity-30': outline },
+      { 'border-primary-300 dark:border-primary-400 hover:border-primary-400 dark:hover:border-primary-500': outline },
+      {
+        'px-0 text-body-text dark:text-body-text-dark border-transparent bg-transparent hover:bg-transparent shadow-none group-hover:invert':
+          variant === BTN_VARIANTS.LINK,
+      },
+      { 'rounded-full leading-none': rounded },
+      className,
+    ),
+  );
+
+  const iconClasses = cx(sizes?.[size]?.icon);
+
+  return (
+    <button
+      id={id}
+      data-testid={testID || id || 'Button'}
+      onClick={onClick}
+      className={classes}
+      type={type}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      role="button">
+      <>
+        {offsetFont ? <span className="brand-font-offset">{children}</span>: children}
+        {icon && !external && (
+          <span className="flex items-center">
+            <Icon name={icon} className={iconClasses} />
+          </span>
+        )}
+        {external && (
+          <span className="flex items-center">
+            <Icon name="carbon:launch" className={iconClasses} />
+          </span>
+        )}
+        {isLoading && (
+          <div className="flex items-center">
+            <Loader size={4} />
+          </div>
+        )}
+      </>
+    </button>
+  );
+};
+
+Button.displayName = 'Button';
+
+export default Button;
+export type { Props };