AlphaIcon component

.changeset/many-tips-float.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-tokens': patch
+---
+
+Add source size tokens

.changeset/stupid-countries-yawn.md

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

packages/bezier-react/src/components/AlphaAvatar/Avatar.module.scss

@@ -1,7 +1,5 @@
 @use '../../styles/mixins/dimension';
 
-$avatar-sizes: 16, 20, 24, 30, 36, 42, 48, 72, 90, 120;
-
 .Avatar {
   position: relative;
   display: block;
@@ -10,12 +8,6 @@ $avatar-sizes: 16, 20, 24, 30, 36, 42, 48, 72, 90, 120;
     pointer-events: none;
     opacity: var(--alpha-opacity-disabled);
   }
-
-  @each $size in $avatar-sizes {
-    &:where(.size-#{$size}) {
-      @include dimension.square(#{$size}px);
-    }
-  }
 }
 
 .AvatarImage {

packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx

@@ -4,6 +4,7 @@ import { forwardRef, isValidElement, useMemo } from 'react'
 
 import classNames from 'classnames'
 
+import { getSourceSizeClassName } from '~/src/types/alpha-props-helpers'
 import { isEmpty } from '~/src/utils/type'
 
 import { useAvatarContext } from '~/src/components/AlphaAvatar/AvatarSizeContext'
@@ -131,7 +132,7 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
     <div
       className={classNames(
         styles.Avatar,
-        styles[`size-${size}`],
+        getSourceSizeClassName(size),
         disabled && styles.disabled,
         className
       )}

packages/bezier-react/src/components/AlphaAvatar/Avatar.types.ts

@@ -1,3 +1,4 @@
+import { type SourceSize } from '~/src/types/alpha-tokens'
 import {
   type BezierComponentProps,
   type ChildrenProps,
@@ -8,17 +9,7 @@ import {
 // TODO: Replace this with AlphaStatusBadgeType
 import { type StatusType } from '~/src/components/Status'
 
-export type AvatarSize =
-  | '16'
-  | '20'
-  | '24'
-  | '30'
-  | '36'
-  | '42'
-  | '48'
-  | '72'
-  | '90'
-  | '120'
+export type AvatarSize = SourceSize
 
 interface AvatarOwnProps {
   /**

packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.module.scss

@@ -1,19 +1,10 @@
-@use '../AlphaAvatar/Avatar.module';
-
 .AvatarGroup {
   --b-avatar-group-spacing: 0;
-  --b-avatar-group-size: 0;
 
   position: relative;
   z-index: var(--z-index-base);
   display: flex;
 
-  @each $size in Avatar.$avatar-sizes {
-    &:where(.size-#{$size}) {
-      --b-avatar-group-size: #{$size}px;
-    }
-  }
-
   & > * + * {
     margin-left: var(--b-avatar-group-spacing);
   }
@@ -49,5 +40,5 @@
   position: relative;
   display: flex;
   align-items: center;
-  height: var(--b-avatar-group-size);
+  height: 100%;
 }

packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.tsx

@@ -37,13 +37,16 @@ function getRestAvatarListCountText(count: number, max: number) {
 function getProperIconSize(size: AlphaAvatarSize) {
   return (
     {
+      10: 'xxs',
+      12: 'xxs',
       16: 'xxs',
       20: 'xxs',
       24: 'xs',
       30: 's',
       36: 'm',
       42: 'm',
       48: 'l',
+      60: 'l',
       72: 'l',
       90: 'l',
       120: 'l',
@@ -55,13 +58,16 @@ function getProperIconSize(size: AlphaAvatarSize) {
 function getProperTypoSize(size: AlphaAvatarSize) {
   return (
     {
+      10: '12',
+      12: '12',
       16: '12',
       20: '12',
       24: '13',
       30: '15',
       36: '16',
       42: '18',
       48: '24',
+      60: '24',
       72: '24',
       90: '24',
       120: '24',
@@ -202,11 +208,7 @@ export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
         <div
           role="group"
           ref={forwardedRef}
-          className={classNames(
-            styles.AvatarGroup,
-            styles[`size-${size}`],
-            className
-          )}
+          className={classNames(styles.AvatarGroup, className)}
           style={
             {
               '--b-avatar-group-spacing': px(spacing),

packages/bezier-react/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
 <div
-  class="AvatarGroup size-24"
+  class="AvatarGroup"
   role="group"
   style="--b-avatar-group-spacing: 4px;"
 >
@@ -101,7 +101,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
 
 exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
 <div
-  class="AvatarGroup size-24"
+  class="AvatarGroup"
   role="group"
   style="--b-avatar-group-spacing: 4px;"
 >

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

@@ -0,0 +1,66 @@
+import {
+  ChannelBtnFilledIcon,
+  type IconName,
+  icons,
+} from '@channel.io/bezier-icons'
+import { type Meta, type StoryObj } from '@storybook/react'
+
+import { camelCase } from '~/src/utils/string'
+
+import { AlphaIconButton } from '~/src/components/AlphaIconButton'
+import { Stack } from '~/src/components/Stack'
+import { Tooltip } from '~/src/components/Tooltip'
+
+import { Icon } from './Icon'
+import { type IconProps } from './Icon.types'
+
+const meta: Meta<typeof Icon> = {
+  component: Icon,
+}
+
+export default meta
+
+export const Primary: StoryObj<IconProps> = {
+  args: {
+    source: ChannelBtnFilledIcon,
+    size: '24',
+    color: 'fg-black-darker',
+  },
+}
+
+const pascalCase = (str: string) =>
+  camelCase(str).replace(/^./, (char) => char.toUpperCase())
+
+const iconNames = Object.keys(icons) as IconName[]
+
+export const IconGallery: StoryObj = {
+  render: () => (
+    <Stack
+      direction="horizontal"
+      wrap
+      spacing={16}
+      padding={16}
+    >
+      {iconNames.map((iconName) => (
+        <Stack
+          key={iconName}
+          direction="vertical"
+          align="center"
+          spacing={4}
+          width={40}
+          height={40}
+          borderRadius="6"
+        >
+          <Tooltip content={pascalCase(iconName)}>
+            <AlphaIconButton
+              size="m"
+              content={icons[iconName]}
+              variant="tertiary"
+              color="dark-grey"
+            />
+          </Tooltip>
+        </Stack>
+      ))}
+    </Stack>
+  ),
+}

packages/bezier-react/src/components/AlphaIcon/Icon.module.scss

@@ -0,0 +1,7 @@
+.Icon {
+  --b-icon-color: initial;
+
+  flex: 0 0 auto;
+  color: var(--b-icon-color);
+  transition: color var(--transition-s);
+}

packages/bezier-react/src/components/AlphaIcon/Icon.test.tsx

@@ -0,0 +1,43 @@
+import { ChannelBtnFilledIcon } from '@channel.io/bezier-icons'
+import { render, screen } from '@testing-library/react'
+
+import { Icon } from './Icon'
+
+describe('Icon', () => {
+  const renderIcon = (props = {}) =>
+    render(
+      <Icon
+        source={ChannelBtnFilledIcon}
+        {...props}
+      />
+    )
+
+  it('should render', () => {
+    renderIcon()
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument()
+  })
+
+  describe('Accessibility', () => {
+    it('should be decorative by default', () => {
+      renderIcon()
+      expect(screen.getByRole('img', { hidden: true })).toHaveAttribute(
+        'aria-hidden',
+        'true'
+      )
+    })
+
+    it('should be accessible with aria-label', () => {
+      renderIcon({ 'aria-label': 'Channel Button' })
+      expect(screen.getByRole('img')).toHaveAttribute(
+        'aria-label',
+        'Channel Button'
+      )
+      expect(screen.getByRole('img')).toBeInTheDocument()
+    })
+
+    it('should respect explicit aria-hidden', () => {
+      renderIcon({ 'aria-hidden': false })
+      expect(screen.getByRole('img')).toBeInTheDocument()
+    })
+  })
+})

packages/bezier-react/src/components/AlphaIcon/Icon.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import { forwardRef, memo } from 'react'
+import * as React from 'react'
+
+import classNames from 'classnames'
+
+import { getSourceSizeClassName } from '~/src/types/alpha-props-helpers'
+import { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'
+import { alphaColorTokenCssVar } from '~/src/utils/style'
+
+import { type IconProps } from './Icon.types'
+
+import styles from './Icon.module.scss'
+
+/**
+ * `Icon` is a component that renders SVG icons from "@channel.io/bezier-icons"
+ * @example
+ * ```tsx
+ * import { ChannelBtnFilledIcon } from '@channel.io/bezier-icons'
+ *
+ * <Icon
+ *   source={ChannelBtnFilledIcon}
+ *   size="24"
+ *   color="fg-black-darker"
+ * />
+ * ```
+ */
+export const Icon = memo(
+  forwardRef<SVGSVGElement, IconProps>(function Icon(props, forwardedRef) {
+    const [marginProps, marginRest] = splitByMarginProps(props)
+    const marginStyles = getMarginStyles(marginProps)
+
+    const {
+      className,
+      size = '24',
+      color,
+      source: SourceElement,
+      style,
+      'aria-hidden': ariaHidden,
+      'aria-label': ariaLabel,
+      role = 'img',
+      ...rest
+    } = marginRest
+
+    const isDecorative = !ariaLabel && ariaHidden !== false
+
+    return (
+      <SourceElement
+        ref={forwardedRef}
+        role={role}
+        aria-hidden={isDecorative}
+        aria-label={ariaLabel}
+        style={
+          {
+            '--b-icon-color': alphaColorTokenCssVar(color),
+            ...marginStyles.style,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={classNames(
+          styles.Icon,
+          getSourceSizeClassName(size),
+          marginStyles.className,
+          className
+        )}
+        {...rest}
+      />
+    )
+  })
+)