Allow iconName prop of Button, Banner, SectionLabel component…

… to include `BezierIcon` type (#1562)

* config(git-ignore): include .tgz file in .gitignore

* feat(button): only allow ReactElement and BezierIcon type for leftContent props of Button component

* feat(build-file): add 1.10.2 version build tgz

* feat(button): stop support for iconName type of SideContent

* feat(banner): stop support for iconName type of icon prop

* feat(storybook/props-interface): adopt icon migration of SectionLabel and Button component

* feat(storybook/button): adopt icon migration of Button component

* feat(storybook/component-convention): adopt icon migration of Button component

* feat(storybook/icon): adopt icon migration of Button component

* feat(section-label): adopt icon migration in test code

* feat(key-value-list-item): adopt icon migration in storybook

* feat(list-menu-title): adopt icon migration in storybook

* Revert "config(git-ignore): include .tgz file in .gitignore"

This reverts commit 7901580.

* Revert "feat(build-file): add 1.10.2 version build tgz"

This reverts commit 2757393.

* feat(button): widen Button type to include ReactNode

* feat(button, banner, section-label): restore support for iconName type of icon prop

* chore(change-set): add change-set to bump minor version

* feat(banner, section-label, button): add deprecation warning log when iconName type is used

* feat(codemod/icon-name-to-bezier-icon): add Banner to transformation target

* chore(changeset): bump minor version of bezier-react/bezier-codemod

* refactor(button): use assert function of assertUtils

* refactor(section-label, banner): use assert function of assertUtils

* refactor(button): remove redundant comment

.changeset/poor-cars-wonder.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-codemod": minor
+---
+
+Add Banner to iconName transformation target

.changeset/seven-bikes-unite.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": minor
+---
+
+Allow `iconName` prop of `Button`, `Banner`, `SectionLabel` component to include `BezierIcon` type

packages/bezier-codemod/src/transforms/icon-name-to-bezier-icon.ts

@@ -13,11 +13,9 @@ import {
 type ComponentName = string
 type Attributes = string[]
 
-/**
- * NOTE: add other components or attributes if necessary
- */
-const meta: Array<[ComponentName, Attributes]> = [
+const transformationTargets: Array<[ComponentName, Attributes]> = [
   ['Button', ['leftContent', 'rightContent']],
+  ['Banner', ['icon', 'actionIcon']],
 ]
 
 const regex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/
@@ -87,7 +85,7 @@ const changeIconNameToBezierIcon = (sourceFile: SourceFile) => (jsxElement: JsxS
   return false
 }
 
-const iconNameToBezierIcon = (sourceFile: SourceFile) => meta.reduce((acc, [component, attributes]) => {
+const iconNameToBezierIcon = (sourceFile: SourceFile) => transformationTargets.reduce((acc, [component, attributes]) => {
   const components = getComponentsToMigrate(sourceFile)(component)
 
   const migratedComponents = components.reduce((_acc, cur) => {

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

@@ -1,5 +1,16 @@
 import React from 'react'
 
+import {
+  BlockIcon,
+  CancelIcon,
+  CancelSmallIcon,
+  ChannelIcon,
+  CheckCircleFilledIcon,
+  ErrorTriangleFilledIcon,
+  Hourglass3Icon,
+  InfoIcon,
+  LightbulbIcon,
+} from '@channel.io/bezier-icons'
 import type {
   Meta,
   Story,
@@ -66,9 +77,9 @@ export const Playground: Story<BannerProps> = props => <Banner {...props} />
 
 Playground.args = {
   variant: BannerVariant.Default,
-  icon: 'lightbulb',
+  icon: LightbulbIcon,
   content: 'Information here.',
-  actionIcon: 'cancel-small',
+  actionIcon: CancelSmallIcon,
   onClickAction: noop,
 }
 
@@ -77,50 +88,50 @@ export const Overview: Story<{}> = () => (
     <StackItem>
       <Banner
         variant={BannerVariant.Default}
-        icon="lightbulb"
+        icon={LightbulbIcon}
         content="Information here."
-        actionIcon="cancel"
+        actionIcon={CancelIcon}
       />
     </StackItem>
     <StackItem>
       <Banner
         variant={BannerVariant.Blue}
-        icon="lightbulb"
+        icon={LightbulbIcon}
         content="Information here."
       />
     </StackItem>
     <StackItem>
       <Banner
         variant={BannerVariant.Cobalt}
-        icon="info"
+        icon={InfoIcon}
         content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
       />
     </StackItem>
     <StackItem>
       <Banner
         variant={BannerVariant.Green}
-        icon="check-circle-filled"
+        icon={CheckCircleFilledIcon}
         content="Now Running..."
       />
     </StackItem>
     <StackItem>
       <Banner
         variant={BannerVariant.Orange}
-        icon="error-triangle-filled"
+        icon={ErrorTriangleFilledIcon}
         content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
       />
     </StackItem>
     <StackItem>
       <Banner
         variant={BannerVariant.Red}
-        icon="block"
+        icon={BlockIcon}
         content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
       />
     </StackItem>
     <StackItem>
       <Banner
         variant={BannerVariant.Alt}
-        icon="hourglass-3"
+        icon={Hourglass3Icon}
         content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
       />
     </StackItem>
@@ -132,7 +143,7 @@ export const UsageMinWidth: Story<{}> = () => (
     <StackItem>
       <Banner
         variant={BannerVariant.Orange}
-        icon="error-triangle-filled"
+        icon={ErrorTriangleFilledIcon}
         content="네."
       />
     </StackItem>
@@ -146,21 +157,21 @@ export const UsageFullWidth: Story<{}> = () => (
     <StackItem style={{ width: 360, border: '1px solid red' }}>
       <Banner
         variant={BannerVariant.Orange}
-        icon="error-triangle-filled"
+        icon={ErrorTriangleFilledIcon}
         content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
       />
     </StackItem>
     <StackItem style={{ width: 480, border: '1px solid red' }}>
       <Banner
         variant={BannerVariant.Orange}
-        icon="error-triangle-filled"
+        icon={ErrorTriangleFilledIcon}
         content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
       />
     </StackItem>
     <StackItem style={{ width: 720, border: '1px solid red' }}>
       <Banner
         variant={BannerVariant.Orange}
-        icon="error-triangle-filled"
+        icon={ErrorTriangleFilledIcon}
         content="This chat has not been assigned to anyone yet. Try to assign a member and proceed the conversation!"
       />
     </StackItem>
@@ -174,7 +185,7 @@ export const UsageMaxWidth: Story<{}> = () => (
     <StackItem>
       <Banner
         variant={BannerVariant.Cobalt}
-        icon="info"
+        icon={InfoIcon}
         // eslint-disable-next-line max-len
         content={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis laoreet felis. Fusce sit amet blandit sem. Aliquam erat volutpat. Pellentesque tempor arcu non scelerisque rutrum. Proin placerat imperdiet gravida. In efficitur augue ut maximus placerat. Quisque vitae pellentesque urna. Sed sagittis enim quis laoreet dictum. Morbi fringilla, justo sit amet dapibus bibendum, nisl nisl suscipit dolor, eget venenatis urna velit in dolor.\n\nNunc accumsan ligula sit amet interdum accumsan. Etiam gravida est risus, in interdum elit egestas ut. Aliquam sit amet lorem malesuada, commodo tortor eu, semper dui. Integer ultricies porta ex sed tincidunt. Sed accumsan orci eu arcu facilisis congue ac hendrerit lacus. Etiam erat velit, interdum auctor cursus at, interdum vel augue. Integer gravida, nibh vel lacinia blandit, ex quam dapibus lectus, at sollicitudin lorem purus vel nulla. Suspendisse ac tellus eget risus condimentum facilisis sed vitae turpis. Fusce fringilla commodo aliquam. Quisque eget justo purus. Suspendisse ut lobortis turpis, vitae fermentum augue. Donec viverra, orci ut lobortis euismod, est nibh iaculis metus, sit amet mattis ex elit eget tellus.'}
       />
@@ -189,7 +200,7 @@ export const UsageConsecutive: Story<{}> = () => (
     <StackItem>
       <Banner
         variant={BannerVariant.Cobalt}
-        icon="info"
+        icon={InfoIcon}
         content="전화번호 설정하는 게 좋아요."
         hasLink
         linkText="설정하기"
@@ -198,18 +209,18 @@ export const UsageConsecutive: Story<{}> = () => (
     <StackItem>
       <Banner
         variant={BannerVariant.Orange}
-        icon="error-triangle-filled"
+        icon={ErrorTriangleFilledIcon}
         content="빠진 내용을 모두 입력해주세요."
       />
     </StackItem>
     <StackItem>
       <Banner
         variant={BannerVariant.Default}
-        icon="info"
+        icon={InfoIcon}
         content="아래 내용을 입력해주세요."
         hasLink
         linkText="사용안내"
-        actionIcon="cancel"
+        actionIcon={CancelIcon}
       />
     </StackItem>
   </VStack>
@@ -232,11 +243,11 @@ UsageNoIcon.storyName = 'Usage (no icon)'
 export const UsageLink: Story<{}> = () => (
   <Banner
     variant={BannerVariant.Default}
-    icon="info"
+    icon={InfoIcon}
     content="아래 내용을 입력해주세요."
     hasLink
     linkText="사용안내"
-    actionIcon="cancel"
+    actionIcon={CancelIcon}
   />
 )
 
@@ -245,12 +256,12 @@ UsageLink.storyName = 'Usage (link)'
 export const UsageLinkTo: Story<{}> = () => (
   <Banner
     variant={BannerVariant.Cobalt}
-    icon="channel"
+    icon={ChannelIcon}
     content="채널톡 정말 좋은 서비스에요."
     hasLink
     linkText="사용안내"
     linkTo="https://channel.io"
-    actionIcon="cancel"
+    actionIcon={CancelIcon}
   />
 )
 

packages/bezier-react/src/components/Banner/Banner.styled.ts

@@ -2,6 +2,7 @@ import { styled } from '~/src/foundation'
 
 import type { VariantProps } from '~/src/types/ComponentProps'
 
+import { Icon } from '~/src/components/Icon'
 import { LegacyIcon } from '~/src/components/LegacyIcon'
 import {
   StackItem as BaseStackItem,
@@ -18,7 +19,8 @@ import type { BannerVariant } from './Banner.types'
 
 type BannerVariantProps = Required<VariantProps<BannerVariant>>
 
-const BannerIcon = styled(LegacyIcon)``
+const BannerIcon = styled(Icon)``
+const BannerLegacyIcon = styled(LegacyIcon)``
 
 const ContentWrapper = styled.div<BannerVariantProps>`
   color: ${({ foundation, variant }) => foundation?.theme?.[TEXT_COLORS[variant]]};
@@ -51,6 +53,7 @@ const StackItem = styled(BaseStackItem)`
 
 export default {
   BannerIcon,
+  BannerLegacyIcon,
   ContentWrapper,
   Link,
   Stack,

packages/bezier-react/src/components/Banner/Banner.test.tsx

@@ -1,5 +1,9 @@
 import React from 'react'
 
+import {
+  AllIcon,
+  InfoIcon,
+} from '@channel.io/bezier-icons'
 import { fireEvent } from '@testing-library/react'
 
 import { render } from '~/src/utils/testUtils'
@@ -15,7 +19,7 @@ describe('Banner >', () => {
 
   beforeEach(() => {
     props = {
-      icon: 'info',
+      icon: InfoIcon,
       content: 'Lorem ipsum dolor amet.',
       hasLink: false,
     }
@@ -40,7 +44,7 @@ describe('Banner >', () => {
 
   it('renders action button if actionIcon is correct value', () => {
     const onClickAction = jest.fn()
-    const { getByRole } = renderBanner({ actionIcon: 'all', onClickAction })
+    const { getByRole } = renderBanner({ actionIcon: AllIcon, onClickAction })
     const actionButton = getByRole('button')
 
     fireEvent.click(actionButton)

packages/bezier-react/src/components/Banner/Banner.tsx

@@ -1,7 +1,10 @@
 import React, { forwardRef } from 'react'
 
+import { isBezierIcon } from '@channel.io/bezier-icons'
+
 import { Typography } from '~/src/foundation'
 
+import { warn } from '~/src/utils/assertUtils'
 import {
   isNil,
   isString,
@@ -13,6 +16,7 @@ import {
   ButtonStyleVariant,
 } from '~/src/components/Button'
 import { IconSize } from '~/src/components/Icon'
+import { isIconName } from '~/src/components/LegacyIcon'
 import { StackItem } from '~/src/components/Stack'
 import { Text } from '~/src/components/Text'
 
@@ -85,6 +89,10 @@ export const Banner = forwardRef(function Banner(
     testId = BANNER_TEST_ID,
   } = props
 
+  if (isIconName(icon)) {
+    warn('Deprecation: IconName as a value for the icon property of Banner has been deprecated. Use the Icon of bezier-icons instead.')
+  }
+
   return (
     <Styled.Stack
       ref={forwardedRef}
@@ -97,11 +105,19 @@ export const Banner = forwardRef(function Banner(
     >
       { !isNil(icon) && (
         <Styled.StackItem>
-          <Styled.BannerIcon
-            name={icon}
-            color={iconColor ?? DEFAULT_ICON_COLORS[variant]}
-            size={IconSize.S}
-          />
+          { isBezierIcon(icon) ? (
+            <Styled.BannerIcon
+              source={icon}
+              color={iconColor ?? DEFAULT_ICON_COLORS[variant]}
+              size={IconSize.S}
+            />
+          ) : (
+            <Styled.BannerLegacyIcon
+              name={icon}
+              color={iconColor ?? DEFAULT_ICON_COLORS[variant]}
+              size={IconSize.S}
+            />
+          ) }
         </Styled.StackItem>
       ) }
 

packages/bezier-react/src/components/Banner/Banner.types.ts

@@ -1,6 +1,9 @@
 import type { ReactNode } from 'react'
 
-import { type IconName } from '@channel.io/bezier-icons'
+import {
+  type BezierIcon,
+  type IconName,
+} from '@channel.io/bezier-icons'
 
 import type {
   AdditionalColorProps,
@@ -32,7 +35,7 @@ interface BannerOptions {
    *
    * If `null` is given, no icon will be displayed.
    */
-  icon: IconName | null
+  icon: BezierIcon | IconName | null
 
   /**
    * Whether to display link at the end of banner content.
@@ -72,10 +75,8 @@ interface BannerOptions {
 
   /**
    * Specifies which icon button to display at the top right of the banner.
-   *
-   * FIXME(@ed): 새로운 아이콘 방식으로 변경
    */
-  actionIcon?: IconName
+  actionIcon?: BezierIcon | IconName
 
   /**
    * Handler to be executed when the action icon button is clicked.