fix: update base Button [MDS-718] (#2440)

docs/app/components/server/accordion/page.tsx

@@ -3,24 +3,18 @@ import { Default } from '@/app/components/server/accordion/examples/Default';
 import { Disabled } from '@/app/components/server/accordion/examples/Disabled';
 import { Sizes } from '@/app/components/server/accordion/examples/Sizes';
 import ExampleSection from '@/app/components/shared/ExampleSection';
+import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
 
-function QuickNav({ items }: {items: string[]}) {
-  return <ul>
-    {items.map(item => <li key={item}><a href={`#${item}`}>{item}</a></li>)}
-  </ul>
-}
-
 export default async function Home() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.accordion.examples);
-
   return (
-    <div className="max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
       <h1 className="font-medium text-moon-32">Accordion</h1>
       <MDX markdown={server.accordion.description} />
-      <QuickNav items={examplesList}/>
+      <QuickNav items={examplesList} />
       <ExampleSection
         title="Default"
         component={<Default />}

docs/app/components/server/button/description.md

@@ -0,0 +1,8 @@
+Buttons allow users to take actions, and make choices, with a single tap.
+
+Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:
+
+Modal windows
+Forms
+Cards
+Toolbars

docs/app/components/server/button/examples/Animations.tsx

@@ -0,0 +1,18 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Animations = () => (
+  <>
+    <Button animation="progress" variant="outline">
+      Progress
+    </Button>
+    <Button animation="success" variant="outline">
+      Success
+    </Button>
+    <Button animation="error" variant="outline">
+      Error
+    </Button>
+    <Button animation="pulse" variant="outline">
+      Pulse
+    </Button>
+  </>
+);

docs/app/components/server/button/examples/Default.tsx

@@ -0,0 +1,3 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Default = () => <Button>Default</Button>;

docs/app/components/server/button/examples/Disabled.tsx

@@ -0,0 +1,3 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Disabled = () => <Button disabled>Disabled</Button>;

docs/app/components/server/button/examples/FullWidth.tsx

@@ -0,0 +1,8 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+import { OtherFrame } from '@heathmont/moon-icons-tw';
+
+export const FullWidth = () => (
+  <Button iconRight={<OtherFrame />} fullWidth>
+    Full width
+  </Button>
+);

docs/app/components/server/button/examples/Icons.tsx

@@ -0,0 +1,9 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+import { OtherFrame } from '@heathmont/moon-icons-tw';
+
+export const Icons = () => (
+  <>
+    <Button iconLeft={<OtherFrame />}>IconLeft</Button>
+    <Button iconRight={<OtherFrame />}>IconRight</Button>
+  </>
+);

docs/app/components/server/button/examples/Multiline.tsx

@@ -0,0 +1,12 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Multiline = () => (
+  <Button size="xl" className="py-3">
+    <span className="flex flex-col gap-1">
+      <span className="leading-none">Button text</span>
+      <span className="text-moon-9 font-normal leading-[12px]">
+        Placeholder text
+      </span>
+    </span>
+  </Button>
+);

docs/app/components/server/button/examples/Sizes.tsx

@@ -0,0 +1,11 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Sizes = () => (
+  <>
+    <Button size="xs">Size XS</Button>
+    <Button size="sm">Size SM</Button>
+    <Button>Default size MD</Button>
+    <Button size="lg">Size LG</Button>
+    <Button size="xl">Size XL</Button>
+  </>
+);

docs/app/components/server/button/examples/Variants.tsx

@@ -0,0 +1,9 @@
+import Button from '@heathmont/moon-base-tw/lib/button/Button';
+
+export const Variants = () => (
+  <>
+    <Button>Default is Fill</Button>
+    <Button variant="outline">Outline</Button>
+    <Button variant="ghost">Ghost</Button>
+  </>
+);

docs/app/components/server/button/page.tsx

@@ -0,0 +1,64 @@
+import { Animations } from '@/app/components/server/button/examples/Animations';
+import { Default } from '@/app/components/server/button/examples/Default';
+import { Disabled } from '@/app/components/server/button/examples/Disabled';
+import { FullWidth } from '@/app/components/server/button/examples/FullWidth';
+import { Icons } from '@/app/components/server/button/examples/Icons';
+import { Multiline } from '@/app/components/server/button/examples/Multiline';
+import { Sizes } from '@/app/components/server/button/examples/Sizes';
+import { Variants } from '@/app/components/server/button/examples/Variants';
+import ExampleSection from '@/app/components/shared/ExampleSection';
+import QuickNav from '@/app/components/shared/QuickNav';
+import { getExamples } from '@/app/utils/getExamples';
+import { MDX } from '@/components/MDX';
+
+export default async function Home() {
+  const { server } = await getExamples();
+  const examplesList = Object.keys(server.button.examples);
+  return (
+    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+      <h1 className="font-medium text-moon-32">Button</h1>
+      <MDX markdown={server.button.description} />
+      <QuickNav items={examplesList} />
+      <ExampleSection
+        title="Default"
+        component={<Default />}
+        code={server.button.examples.Default}
+      />
+      <ExampleSection
+        title="Sizes"
+        component={<Sizes />}
+        code={server.button.examples.Sizes}
+      />
+      <ExampleSection
+        title="Variants"
+        component={<Variants />}
+        code={server.button.examples.Variants}
+      />
+      <ExampleSection
+        title="Icons"
+        component={<Icons />}
+        code={server.button.examples.Icons}
+      />
+      <ExampleSection
+        title="FullWidth"
+        component={<FullWidth />}
+        code={server.button.examples.FullWidth}
+      />
+      <ExampleSection
+        title="Disabled"
+        component={<Disabled />}
+        code={server.button.examples.Disabled}
+      />
+      <ExampleSection
+        title="Animations"
+        component={<Animations />}
+        code={server.button.examples.Animations}
+      />
+      <ExampleSection
+        title="Multiline"
+        component={<Multiline />}
+        code={server.button.examples.Multiline}
+      />
+    </div>
+  );
+}

docs/app/components/shared/QuickNav.tsx

@@ -0,0 +1,11 @@
+const QuickNav = ({ items }: { items: string[] }) => (
+  <ul>
+    {items.map((item) => (
+      <li key={item}>
+        <a href={`#${item}`}>{item}</a>
+      </li>
+    ))}
+  </ul>
+);
+
+export default QuickNav;

docs/app/components/types.ts

@@ -1,46 +1,59 @@
 export interface Examples {
-  "client": {
-    "accordion": {
-      "description": "string",
-      "examples": {
-        "Default": "string"
-      }
-    },
-    "button": {
-      "description": "string",
-      "examples": {
-        "Default": "string"
-      }
-    }
-  },
-  "server": {
-    "accordion": {
-      "description": "string",
-      "examples": {
-        "ContentOutsideSizes": "string",
-        "Default": "string",
-        "Disabled": "string",
-        "Sizes": "string"
-      }
-    },
-    "avatar": {
-      "description": "string",
-      "examples": {
-        "Active": "string",
-        "Default": "string"
-      }
-    },
-    "tag": {
-      "description": "string",
-      "examples": {
-        "Default": "string"
-      }
-    }
-  },
-  "shared": {
-    "fonts": {
-      "DMSans-Regular": "string",
-      "DMSans-Semibold": "string"
-    }
-  }
-};
+  client: {
+    accordion: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+      };
+    };
+    button: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+      };
+    };
+  };
+  server: {
+    accordion: {
+      description: 'string';
+      examples: {
+        ContentOutsideSizes: 'string';
+        Default: 'string';
+        Disabled: 'string';
+        Sizes: 'string';
+      };
+    };
+    button: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+        Sizes: 'string';
+        Variants: 'string';
+        Icons: 'string';
+        FullWidth: 'string';
+        Disabled: 'string';
+        Animations: 'string';
+        Multiline: 'string';
+      };
+    };
+    avatar: {
+      description: 'string';
+      examples: {
+        Active: 'string';
+        Default: 'string';
+      };
+    };
+    tag: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+      };
+    };
+  };
+  shared: {
+    fonts: {
+      'DMSans-Regular': 'string';
+      'DMSans-Semibold': 'string';
+    };
+  };
+}

workspaces/base/src/button/Button.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import mergeClassnames from '../mergeClassnames/mergeClassnames';
+import type ButtonProps from './private/types/ButtonProps';
+import type ButtonVariants from './private/types/ButtonVariants';
 import AnimationContent from './private/utils/buttonAnimations/AnimationContent';
 import getButtonSize from './private/utils/buttonSizes/getButtonSize';
 import ButtonComponent from './styles/ButtonComponent';
 import Hover from './styles/Hover';
 import IconLeft from './styles/IconLeft';
 import IconRight from './styles/IconRight';
-import type ButtonProps from './private/types/ButtonProps';
-import type ButtonVariants from './private/types/ButtonVariants';
+import mergeClassnames from '../mergeClassnames/mergeClassnames';
 
 export type Props<C extends React.ElementType> = React.PropsWithChildren<
   ButtonProps<C>
@@ -16,7 +16,7 @@ export type Props<C extends React.ElementType> = React.PropsWithChildren<
 
 const Button = <C extends React.ElementType = 'button'>({
   children,
-  variant = 'primary',
+  variant = 'fill',
   size = 'md',
   iconLeft,
   iconRight,
@@ -31,7 +31,7 @@ const Button = <C extends React.ElementType = 'button'>({
     animation === 'progress' || animation === 'success';
   if (!children) {
     return (
-      <span className="relative cursor-pointer [&_.hover]:hover:bg-bulma/[.07]">
+      <span className="relative cursor-pointer [&_.hover]:hover:bg-heles">
         <ButtonComponent
           size={size}
           variant={variant as ButtonVariants}
@@ -79,6 +79,7 @@ const Button = <C extends React.ElementType = 'button'>({
           animation={animation}
           size={size}
           fullWidth={fullWidth}
+          variant={variant}
         />
       ) : (
         <>

workspaces/base/src/button/private/types/ButtonSettingsProps.ts

@@ -1,4 +1,4 @@
-import ButtonAnimations from './ButtonAnimations';
+import type ButtonAnimations from './ButtonAnimations';
 import type ButtonSizes from './ButtonSizes';
 import type ButtonVariants from './ButtonVariants';
 

workspaces/base/src/button/private/types/ButtonVariants.ts

@@ -1,3 +1,9 @@
-type ButtonVariants = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+type ButtonVariants =
+  | 'fill'
+  | 'outline'
+  | 'ghost'
+  | 'primary'
+  | 'secondary'
+  | 'tertiary';
 
 export default ButtonVariants;

workspaces/base/src/button/private/utils/buttonAnimations/AnimationContent.tsx

@@ -7,6 +7,7 @@ import IconRight from '../../../styles/IconRight';
 import type ButtonSettingsProps from '../../types/ButtonSettingsProps';
 import getIconSize from '../buttonSizes/getIconSize';
 import getLoaderSize from '../buttonSizes/getLoaderSize';
+import getLoaderColor from '../buttonStyles/getLoaderColor';
 
 const AnimationContent = ({
   children,
@@ -15,6 +16,7 @@ const AnimationContent = ({
   animation,
   size,
   fullWidth,
+  variant,
 }: ButtonSettingsProps) => (
   <span className="block h-full pointer-events-none">
     <span
@@ -24,7 +26,7 @@ const AnimationContent = ({
       )}
     >
       {animation === 'progress' && (
-        <Loader color="currentColor" size={getLoaderSize(size)} />
+        <Loader size={getLoaderSize(size)} color={getLoaderColor(variant)} />
       )}
       {animation === 'success' && (
         <GenericCheckAlternative

workspaces/base/src/button/private/utils/buttonSizes/getButtonSize.ts

@@ -1,9 +1,9 @@
-import mergeClassnames from '../../../../mergeClassnames/mergeClassnames';
 import getLgPadding from './getLgPadding';
 import getMdPadding from './getMdPadding';
 import getSmPadding from './getSmPadding';
 import getXlPadding from './getXlPadding';
 import getXsPadding from './getXsPadding';
+import mergeClassnames from '../../../../mergeClassnames/mergeClassnames';
 import type ButtonSettingsProps from '../../types/ButtonSettingsProps';
 
 const getButtonSize = ({