Add AlphaFloatingButton component

.changeset/pink-mangos-press.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+Add `AlphaFloatingButton` component.

packages/bezier-react/src/components/AlphaFloatingButton/AlphaFloatingButton.stories.tsx

@@ -0,0 +1,29 @@
+import { ArrowRightIcon, PlusIcon } from '@channel.io/bezier-icons'
+import { type Meta, type StoryObj } from '@storybook/react'
+
+import {
+  AlphaFloatingButton,
+  type AlphaFloatingButtonProps,
+} from '~/src/components/AlphaFloatingButton'
+
+const meta: Meta<typeof AlphaFloatingButton> = {
+  component: AlphaFloatingButton,
+  argTypes: {
+    onClick: { action: 'onClick' },
+  },
+}
+export default meta
+
+export const Playground: StoryObj<AlphaFloatingButtonProps> = {
+  args: {
+    text: 'Invite',
+    disabled: false,
+    active: false,
+    loading: false,
+    prefixIcon: PlusIcon,
+    suffixIcon: ArrowRightIcon,
+    size: 'm',
+    variant: 'primary',
+    color: 'blue',
+  },
+}

packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.module.scss

@@ -0,0 +1,204 @@
+$chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
+
+.FloatingButton {
+  position: relative;
+
+  box-sizing: border-box;
+
+  border-radius: 999px;
+  box-shadow: var(--alpha-shadow-2);
+
+  transition: background-color var(--transition-s);
+
+  /* dimension */
+  &:where(.size-xs) {
+    height: 20px;
+    padding: 0 6px;
+
+    & :where(.ButtonText) {
+      padding: 0 3px;
+    }
+  }
+
+  &:where(.size-s) {
+    height: 24px;
+    padding: 0 8px;
+
+    & :where(.ButtonText) {
+      padding: 0 4px;
+    }
+
+    & :where(.ButtonContent) {
+      gap: 1px;
+    }
+  }
+
+  &:where(.size-m) {
+    height: 36px;
+    padding: 0 12px;
+
+    & :where(.ButtonText) {
+      padding: 0 4px;
+    }
+  }
+
+  &:where(.size-l) {
+    height: 44px;
+    padding: 0 14px;
+
+    & :where(.ButtonText) {
+      padding: 0 6px;
+    }
+  }
+
+  &:where(.size-xl) {
+    height: 54px;
+    padding: 0 18px;
+
+    & :where(.ButtonText) {
+      padding: 0 6px;
+    }
+  }
+
+  /* background-color */
+  &:where(.variant-primary) {
+    $background-color-by-color: (
+      blue: var(--alpha-color-primary-bg-normal),
+      cobalt: var(--alpha-color-accent-bg-normal),
+      red: var(--alpha-color-critical-bg-normal),
+      orange: var(--alpha-color-warning-bg-normal),
+      green: var(--alpha-color-success-bg-normal),
+      pink: var(--alpha-color-bg-pink-normal),
+      purple: var(--alpha-color-bg-purple-normal),
+      dark-grey: var(--alpha-color-bg-grey-darkest),
+      light-grey: var(--alpha-color-bg-grey-dark),
+    );
+
+    @each $color, $background-color in $background-color-by-color {
+      &:where(.color-#{$color}) {
+        background-color: $background-color;
+      }
+    }
+  }
+
+  &:where(.variant-secondary) {
+    background-color: var(--alpha-color-bg-white-higher);
+  }
+
+  /* color */
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  &:where(.variant-primary) {
+    color: var(--alpha-color-fg-absolute-white-dark);
+
+    &:where(.color-dark-grey) {
+      color: var(--alpha-color-fg-white-normal);
+    }
+  }
+
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  &:where(.variant-secondary) {
+    $color-map: (
+      blue: var(--alpha-color-primary-fg-normal),
+      cobalt: var(--alpha-color-accent-fg-normal),
+      red: var(--alpha-color-critical-fg-normal),
+      orange: var(--alpha-color-warning-fg-normal),
+      green: var(--alpha-color-success-fg-normal),
+      pink: var(--alpha-color-fg-pink-normal),
+      purple: var(--alpha-color-fg-purple-normal),
+      dark-grey: var(--alpha-color-fg-black-darkest),
+      light-grey: var(--alpha-color-fg-black-darker),
+    );
+
+    @each $button-color, $color in $color-map {
+      &:where(.color-#{$button-color}) {
+        color: $color;
+      }
+    }
+
+    &:where(.color-dark-grey) {
+      & :where(.ButtonIcon) {
+        color: var(--alpha-color-fg-black-darker);
+      }
+    }
+
+    &:where(.color-light-grey) {
+      & :where(.ButtonIcon) {
+        color: var(--alpha-color-fg-black-dark);
+      }
+    }
+  }
+
+  /* TODO: use v2 token when design is specified */
+
+  /* visual effect on interaction */
+  &:where(.active, :hover):where(:not(:disabled)) {
+    &:where(.variant-primary) {
+      @each $color in $chromatic-colors {
+        &:where(.color-#{$color}) {
+          background-color: var(--bgtxt-#{$color}-dark);
+        }
+      }
+
+      &:where(.color-dark-grey) {
+        background-color: var(--bg-grey-darkest);
+      }
+
+      &:where(.color-light-grey) {
+        background-color: var(--bg-black-darker);
+      }
+    }
+
+    &:where(.variant-secondary) {
+      @each $color in $chromatic-colors {
+        &:where(.color-#{$color}) {
+          background-color: var(--bgtxt-#{$color}-lighter);
+        }
+      }
+
+      &:where(.color-dark-grey, .color-light-grey) {
+        background-color: var(--bg-black-light);
+      }
+    }
+
+    &:where(.color-dark-grey):where(.variant-secondary) {
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--txt-black-darkest);
+      }
+    }
+
+    &:where(.color-light-grey):where(.variant-secondary) {
+      & :is(.ButtonIcon, .ButtonLoader) {
+        color: var(--txt-black-darker);
+      }
+    }
+  }
+
+  &:where(.variant-primary.color-blue:focus-visible) {
+    outline: 3px solid var(--bgtxt-blue-light);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--alpha-opacity-disabled);
+  }
+
+  /* internal components */
+  .ButtonContent {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:where(.loading) {
+      visibility: hidden;
+    }
+  }
+
+  .ButtonLoader {
+    position: absolute;
+    inset: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.tsx

@@ -0,0 +1,123 @@
+import React, { forwardRef } from 'react'
+
+import classNames from 'classnames'
+
+import {
+  type FloatingButtonProps,
+  type FloatingButtonSize,
+} from '~/src/components/AlphaFloatingButton/FloatingButton.types'
+import { BaseButton } from '~/src/components/BaseButton'
+import { Icon } from '~/src/components/Icon'
+import { Spinner } from '~/src/components/Spinner'
+import { Text } from '~/src/components/Text'
+
+import styles from './FloatingButton.module.scss'
+
+function getIconSize(size: FloatingButtonSize) {
+  return (
+    {
+      xs: 'xxs',
+      s: 'xs',
+      m: 's',
+      l: 's',
+      xl: 'm',
+    } as const
+  )[size]
+}
+
+function getSpinnerSize(size: FloatingButtonSize) {
+  return (
+    {
+      xs: 'xs',
+      s: 'xs',
+      m: 's',
+      l: 's',
+      xl: 's',
+    } as const
+  )[size]
+}
+
+function getTypography(size: FloatingButtonSize) {
+  return (
+    {
+      xs: '13',
+      s: '13',
+      m: '14',
+      l: '15',
+      xl: '18',
+    } as const
+  )[size]
+}
+
+export const FloatingButton = forwardRef<
+  HTMLButtonElement,
+  FloatingButtonProps
+>(function Button(
+  {
+    as = BaseButton,
+    text,
+    prefixIcon,
+    suffixIcon,
+    color = 'blue',
+    variant = 'primary',
+    size = 'm',
+    active,
+    className,
+    loading,
+    ...rest
+  },
+  forwardedRef
+) {
+  const Comp = as as typeof BaseButton
+
+  return (
+    <Comp
+      ref={forwardedRef}
+      className={classNames(
+        styles.FloatingButton,
+        styles[`size-${size}`],
+        styles[`variant-${variant}`],
+        styles[`color-${color}`],
+        active && styles.active,
+        className
+      )}
+      {...rest}
+    >
+      <div
+        className={classNames(styles.ButtonContent, loading && styles.loading)}
+      >
+        {prefixIcon && (
+          <Icon
+            size={getIconSize(size)}
+            source={prefixIcon}
+            className={styles.ButtonIcon}
+          />
+        )}
+
+        {/* TODO: use AlphaText later, add typo */}
+        <Text
+          className={styles.ButtonText}
+          typo={getTypography(size)}
+          bold
+        >
+          {text}
+        </Text>
+
+        {suffixIcon && (
+          <Icon
+            size={getIconSize(size)}
+            source={suffixIcon}
+            className={styles.ButtonIcon}
+          />
+        )}
+      </div>
+
+      {/* TODO: use AlphaSpinner */}
+      {loading && (
+        <div className={styles.ButtonLoader}>
+          <Spinner size={getSpinnerSize(size)} />
+        </div>
+      )}
+    </Comp>
+  )
+})