Merge pull request 'Button Component' (#5) from adilallo/ButtonComponent into main

Reviewed-on: #5

app/components/Button.js

@@ -17,6 +17,7 @@ export default function Button({
       "px-[var(--spacing-scale-006)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]",
     small:
       "px-[var(--spacing-measures-spacing-008)] py-[var(--spacing-measures-spacing-008)] gap-[var(--spacing-scale-004)]",
+    medium: "p-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]",
     large:
       "px-[var(--spacing-scale-012)] py-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]",
     xlarge:
@@ -28,6 +29,8 @@ export default function Button({
       "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
     small:
       "font-['Inter'] text-[12px] leading-[14px] font-medium tracking-[0%]",
+    medium:
+      "font-['Inter'] text-[14px] leading-[16px] font-medium tracking-[0%]",
     large:
       "font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]",
     xlarge:
@@ -36,22 +39,36 @@ export default function Button({
 
   const variantStyles = {
     default:
-      "bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:outline-[var(--border-color-default-brandprimary)] hover:outline-inset hover:scale-[1.02] hover:shadow-lg active:bg-[var(--color-surface-inverse-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:outline-[var(--border-color-default-brandprimary)] active:outline-offset-1 active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100 disabled:hover:shadow-none",
+      "bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:outline-[var(--border-color-default-brandprimary)] hover:outline-inset hover:scale-[1.02] hover:shadow-lg focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-1 focus:scale-[1.02] active:bg-[var(--color-surface-inverse-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:outline-[var(--border-color-default-brandprimary)] active:outline-offset-1 active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100 disabled:hover:shadow-none disabled:hover:outline-none",
     secondary:
-      "bg-transparent text-[var(--color-content-default-brand-primary)] hover:text-[var(--color-content-default-primary)] hover:scale-[1.02] hover:bg-[var(--color-surface-default-tertiary)] focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_#FFFDD2] focus:blur-[0px] active:outline-[1.5px] active:outline-inset active:outline-[var(--color-content-default-brand-primary)] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+      "bg-transparent text-[var(--color-content-default-brand-primary)] hover:text-[var(--color-content-default-primary)] hover:scale-[1.02] hover:bg-transparent hover:outline-none focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+    primary:
+      "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] hover:bg-[var(--color-surface-default-primary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-[var(--color-surface-default-primary)] focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+    outlined:
+      "bg-transparent text-[var(--color-content-default-primary)] border-[1.5px] border-[var(--color-content-default-primary)] hover:bg-transparent hover:text-[var(--color-content-default-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-primary)] focus:outline-none focus:border-[1.5px] focus:border-[var(--color-content-default-primary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:border-transparent active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:border-[1.5px] disabled:border-[var(--color-surface-default-secondary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+    dark: "bg-transparent text-[var(--color-content-inverse-primary)] border border-[var(--border-color-default-primary)] hover:bg-transparent hover:text-[var(--color-content-inverse-brand-primary)] hover:border hover:border-[var(--border-color-inverse-brandprimary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-inverse-primary)] focus:outline-none focus:border focus:border-[var(--border-color-default-primary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:border-transparent active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+    inverse:
+      "bg-transparent text-[var(--color-content-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:scale-[1.02] hover:bg-transparent hover:outline-none focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-tertiary)] focus:blur-[0px] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
   };
 
   const hoverOutlineStyles = {
     xsmall: "hover:outline-1",
     small: "hover:outline-1",
+    medium: "hover:outline-1",
     large: "hover:outline-2",
     xlarge: "hover:outline-[2.5px]",
   };
 
-  const focusStyles =
+  // Only apply outline styles to default and secondary variants, not primary, outlined, dark, or inverse
-    "focus:shadow-[0_0_10px_1px_#FFFDD2] focus:outline-none focus:ring-1 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-1 focus:scale-[1.02]";
+  const outlineStyles =
+    variant === "primary" ||
+    variant === "outlined" ||
+    variant === "dark" ||
+    variant === "inverse"
+      ? ""
+      : hoverOutlineStyles[size];
 
-  const baseStyles = `inline-flex items-center justify-start box-border ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${fontStyles[size]} transition-all duration-200 ease-in-out cursor-pointer ${variantStyles[variant]} ${hoverOutlineStyles[size]} ${focusStyles}`;
+  const baseStyles = `inline-flex items-center justify-start box-border ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${fontStyles[size]} transition-all duration-500 ease-in-out cursor-pointer ${variantStyles[variant]} ${outlineStyles}`;
 
   let finalVariant = variant;
   if (disabled) {

stories/Button.stories.js

@@ -15,12 +15,19 @@ export default {
   argTypes: {
     variant: {
       control: { type: "select" },
-      options: ["default", "secondary"],
+      options: [
+        "default",
+        "secondary",
+        "primary",
+        "outlined",
+        "dark",
+        "inverse",
+      ],
       description: "The visual style variant of the button",
     },
     size: {
       control: { type: "select" },
-      options: ["xsmall", "small", "large", "xlarge"],
+      options: ["xsmall", "small", "medium", "large", "xlarge"],
       description: "The size of the button",
     },
     disabled: {
@@ -56,6 +63,18 @@ export const Variants = {
         <Button {...args} variant="secondary">
           Secondary
         </Button>
+        <Button {...args} variant="primary">
+          Primary
+        </Button>
+        <Button {...args} variant="outlined">
+          Outlined
+        </Button>
+        <Button {...args} variant="dark">
+          Dark
+        </Button>
+        <Button {...args} variant="inverse">
+          Inverse
+        </Button>
       </div>
     </div>
   ),
@@ -82,6 +101,9 @@ export const Sizes = {
         <Button {...args} size="small">
           Small
         </Button>
+        <Button {...args} size="medium">
+          Medium
+        </Button>
         <Button {...args} size="large">
           Large
         </Button>
@@ -134,6 +156,7 @@ export const AllVariants = {
         <div className="space-x-4">
           <Button size="xsmall">XSmall</Button>
           <Button size="small">Small</Button>
+          <Button size="medium">Medium</Button>
           <Button size="large">Large</Button>
           <Button size="xlarge">XLarge</Button>
         </div>
@@ -148,6 +171,9 @@ export const AllVariants = {
           <Button variant="secondary" size="small">
             Small
           </Button>
+          <Button variant="secondary" size="medium">
+            Medium
+          </Button>
           <Button variant="secondary" size="large">
             Large
           </Button>
@@ -157,6 +183,90 @@ export const AllVariants = {
         </div>
       </div>
 
+      <div>
+        <h3 className="text-white font-semibold mb-3">Primary Variant</h3>
+        <div className="space-x-4">
+          <Button variant="primary" size="xsmall">
+            XSmall
+          </Button>
+          <Button variant="primary" size="small">
+            Small
+          </Button>
+          <Button variant="primary" size="medium">
+            Medium
+          </Button>
+          <Button variant="primary" size="large">
+            Large
+          </Button>
+          <Button variant="primary" size="xlarge">
+            XLarge
+          </Button>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-white font-semibold mb-3">Outlined Variant</h3>
+        <div className="space-x-4">
+          <Button variant="outlined" size="xsmall">
+            XSmall
+          </Button>
+          <Button variant="outlined" size="small">
+            Small
+          </Button>
+          <Button variant="outlined" size="medium">
+            Medium
+          </Button>
+          <Button variant="outlined" size="large">
+            Large
+          </Button>
+          <Button variant="outlined" size="xlarge">
+            XLarge
+          </Button>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-white font-semibold mb-3">Dark Variant</h3>
+        <div className="space-x-4">
+          <Button variant="dark" size="xsmall">
+            XSmall
+          </Button>
+          <Button variant="dark" size="small">
+            Small
+          </Button>
+          <Button variant="dark" size="medium">
+            Medium
+          </Button>
+          <Button variant="dark" size="large">
+            Large
+          </Button>
+          <Button variant="dark" size="xlarge">
+            XLarge
+          </Button>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-white font-semibold mb-3">Inverse Variant</h3>
+        <div className="space-x-4">
+          <Button variant="inverse" size="xsmall">
+            XSmall
+          </Button>
+          <Button variant="inverse" size="small">
+            Small
+          </Button>
+          <Button variant="inverse" size="medium">
+            Medium
+          </Button>
+          <Button variant="inverse" size="large">
+            Large
+          </Button>
+          <Button variant="inverse" size="xlarge">
+            XLarge
+          </Button>
+        </div>
+      </div>
+
       <div>
         <h3 className="text-white font-semibold mb-3">Disabled States</h3>
         <div className="space-x-4">
@@ -166,6 +276,18 @@ export const AllVariants = {
           <Button variant="secondary" size="large" disabled>
             Secondary Disabled
           </Button>
+          <Button variant="primary" size="large" disabled>
+            Primary Disabled
+          </Button>
+          <Button variant="outlined" size="large" disabled>
+            Outlined Disabled
+          </Button>
+          <Button variant="dark" size="large" disabled>
+            Dark Disabled
+          </Button>
+          <Button variant="inverse" size="large" disabled>
+            Inverse Disabled
+          </Button>
         </div>
       </div>
     </div>