feat(SW-1255): Add loading state to button component

packages/design-system/lib/components/Button/Button.stories.tsx

@@ -68,6 +68,13 @@ export const PrimaryDisabled: Story = {
   },
 }
 
+export const PrimaryLoading: Story = {
+  args: {
+    ...PrimaryDefault.args,
+    isPending: true,
+  },
+}
+
 export const PrimaryLarge: Story = {
   args: {
     ...PrimaryDefault.args,
@@ -106,6 +113,13 @@ export const PrimaryInvertedDisabled: Story = {
   },
 }
 
+export const PrimaryInvertedLoading: Story = {
+  args: {
+    ...PrimaryInvertedDefault.args,
+    isPending: true,
+  },
+}
+
 export const PrimaryInvertedLarge: Story = {
   args: {
     ...PrimaryInvertedDefault.args,
@@ -181,6 +195,13 @@ export const SecondaryInvertedDisabled: Story = {
   },
 }
 
+export const SecondaryInvertedLoading: Story = {
+  args: {
+    ...SecondaryInvertedDefault.args,
+    isPending: true,
+  },
+}
+
 export const SecondaryInvertedLarge: Story = {
   args: {
     ...SecondaryInvertedDefault.args,
@@ -218,6 +239,12 @@ export const TertiaryDisabled: Story = {
   },
 }
 
+export const TertiaryLoading: Story = {
+  args: {
+    ...TertiaryDefault.args,
+    isPending: true,
+  },
+}
 export const TertiaryLarge: Story = {
   args: {
     ...TertiaryDefault.args,

packages/design-system/lib/components/Button/Button.tsx

@@ -3,6 +3,8 @@ import { Button as ButtonRAC } from 'react-aria-components'
 import { variants } from './variants'
 
 import type { ButtonProps } from './types'
+import { Spinner } from '../Spinner'
+import styles from './button.module.css'
 
 export function Button({
   variant,
@@ -12,7 +14,8 @@ export function Button({
 
   typography,
   className,
-
+  children,
+  isPending,
   ...props
 }: ButtonProps) {
   const classNames = variants({
@@ -20,10 +23,24 @@ export function Button({
     color,
     size,
     wrapping,
-
     typography,
     className,
   })
 
-  return <ButtonRAC {...props} className={classNames} />
+  return (
+    <ButtonRAC {...props} className={classNames} isPending={isPending}>
+      {({ isPending }) => {
+        return (
+          <>
+            {children}
+            {isPending && (
+              <div className={styles.spinnerWrapper}>
+                <Spinner size="Small" color="CurrentColor" />
+              </div>
+            )}
+          </>
+        )
+      }}
+    </ButtonRAC>
+  )
 }

packages/design-system/lib/components/Button/button.module.css

@@ -167,3 +167,9 @@
 .variant-text.color-inverted:disabled {
   color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
 }
+
+.spinnerWrapper {
+  display: flex;
+  align-items: center;
+  margin-left: var(--Space-x1);
+}