Add ToggleEmojiButtonGroup and ToggleEmojiButtonSource component

.changeset/wild-ducks-nail.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': patch
+---
+
+Add `ToggleEmojiButtonGroup` and `ToggleEmojiButtonSource` component.

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

@@ -16,7 +16,6 @@ export const Primary = {
   args: {
     text: 'Invite',
     selected: false,
-    loading: false,
     prefixContent: GiftIcon,
     suffixContent: ArrowRightIcon,
     size: 'm',

packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss

@@ -1,8 +1,3 @@
-@use '../../styles/mixins/dimension';
-@use 'sass:map';
-
-@import '../Icon/Icon.module';
-
 .Button {
   position: relative;
 
@@ -89,25 +84,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-
-    &:where(.loading) {
-      visibility: hidden;
-    }
-  }
-
-  & :where(.ButtonLoader) {
-    position: absolute;
-    inset: 0;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:where(.size-s) {
-      & :is(.Loader) {
-        @include dimension.square(#{map.get($size-map, 's')}px);
-      }
-    }
   }
 
   /* NOTE: this fixes container width when bold toggles */

packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.tsx

@@ -6,7 +6,6 @@ import { isBezierIcon } from '@channel.io/bezier-icons'
 import * as TogglePrimitive from '@radix-ui/react-toggle'
 import classNames from 'classnames'
 
-import { AlphaLoader } from '~/src/components/AlphaLoader'
 import { useToggleButtonContext } from '~/src/components/AlphaToggleButton/ToggleButtonContext'
 import { BaseButton } from '~/src/components/BaseButton'
 import { Icon, type IconSize } from '~/src/components/Icon'
@@ -45,7 +44,6 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
       shape: shapeProps,
       size = 'm',
       className,
-      loading,
       onSelectedChange,
       ...rest
     },
@@ -72,12 +70,7 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
             className
           )}
         >
-          <div
-            className={classNames(
-              styles.ButtonContent,
-              loading && styles.loading
-            )}
-          >
+          <div className={classNames(styles.ButtonContent)}>
             <SideContent
               size={ICON_SIZE}
               content={prefixContent}
@@ -98,22 +91,6 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
               content={suffixContent}
             />
           </div>
-
-          {loading && (
-            <div
-              className={classNames(
-                styles.ButtonLoader,
-                // NOTE: Loader size is the same as icon size
-                styles[`size-${ICON_SIZE}`]
-              )}
-            >
-              <AlphaLoader
-                size="s"
-                className={styles.Loader}
-                variant="secondary"
-              />
-            </div>
-          )}
         </Comp>
       </TogglePrimitive.Root>
     )

packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.types.ts

@@ -17,12 +17,6 @@ interface ToggleButtonOwnProps {
    */
   text: string
 
-  /**
-   * If `loading` is true, spinner will be shown, replacing the content.
-   * @default false
-   */
-  loading?: boolean
-
   /**
    * Props that shows whether the button is selected.
    * @default false

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

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import type { Meta, StoryFn, StoryObj } from '@storybook/react'
+
+import { Center } from '~/src/components/Center'
+
+import {
+  ToggleEmojiButtonGroup,
+  ToggleEmojiButtonSource,
+} from './ToggleEmojiButtonGroup'
+import type {
+  ToggleEmojiButtonGroupProps,
+  ToggleEmojiButtonSourceProps,
+} from './ToggleEmojiButtonGroup.types'
+
+const meta: Meta<typeof ToggleEmojiButtonGroup> = {
+  component: ToggleEmojiButtonGroup,
+}
+export default meta
+
+type ToggleButtonCompositionType = ToggleEmojiButtonGroupProps &
+  Pick<ToggleEmojiButtonSourceProps, 'variant'>
+
+const Template: StoryFn<ToggleButtonCompositionType> = ({
+  fillDirection,
+  variant,
+}) => {
+  return (
+    <Center
+      width="25vw"
+      height="15vh"
+      backgroundColor="bg-lounge"
+    >
+      <ToggleEmojiButtonGroup
+        defaultValue="blush"
+        fillDirection={fillDirection}
+      >
+        <ToggleEmojiButtonSource
+          variant={variant}
+          value="blush"
+          name="blush"
+        />
+        <ToggleEmojiButtonSource
+          variant={variant}
+          value="grinning"
+          name="grinning"
+        />
+      </ToggleEmojiButtonGroup>
+    </Center>
+  )
+}
+
+export const Primary = {
+  render: Template,
+
+  args: {
+    fillDirection: 'horizontal',
+    variant: 'primary',
+  },
+  parameters: {
+    design: {
+      type: 'link',
+      url: 'https://www.figma.com/design/fPXP9zfjZU9NyARnhTWL6o/Input?node-id=425-281&t=ktusTVyr8cD3cTlt-1',
+    },
+  },
+} satisfies StoryObj<ToggleButtonCompositionType>

packages/bezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss

@@ -0,0 +1,76 @@
+@use '../../styles/mixins/dimension';
+
+.ToggleEmojiButtonGroup {
+  display: flex;
+  gap: var(--b-toggle-emoji-button-group-gap);
+  align-items: center;
+  justify-content: center;
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  &:where(.fillDirection-horizontal) {
+    width: 100%;
+
+    & :where(.ToggleEmojiButtonSource) {
+      flex-grow: 1;
+    }
+  }
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  &:where(.fillDirection-all) {
+    width: 100%;
+    height: 100%;
+
+    & :is(.ToggleEmojiButtonSource) {
+      max-width: 160px;
+      max-height: 160px;
+    }
+  }
+}
+
+.ToggleEmojiButtonSource {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 12px;
+
+  border-radius: var(--radius-12);
+
+  &:where(.size-m) {
+    @include dimension.square(var(--b-toggle-emoji-button-size));
+  }
+
+  &:where(.variant-primary) {
+    background-color: var(--alpha-color-bg-grey-lightest);
+    box-shadow: var(--alpha-shadow-input-default);
+
+    &:where(&:hover) {
+      background-color: var(--alpha-color-bg-grey-lighter);
+    }
+
+    &:where([data-state='on']) {
+      background-color: var(--alpha-color-bg-blue-lightest);
+      box-shadow: 0 0 0 1px var(--alpha-color-primary-bg-normal) inset;
+    }
+  }
+
+  &:where(.variant-secondary) {
+    background-color: var(--alpha-color-bg-black-lightest);
+
+    &:where(&:hover) {
+      background-color: var(--alpha-color-bg-black-lighter);
+    }
+
+    &:where([data-state='on']) {
+      background-color: var(--alpha-color-primary-bg-lighter);
+    }
+  }
+
+  & :where(.ButtonContent) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}