@channel.io/bezier-react 3.0.3 → 3.1.0

package/dist/cjs/components/Badge/Badge.js

@@ -24,6 +24,7 @@ const BADGE_TEST_ID = 'bezier-badge';
 const Badge = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function Badge({
   size = 'm',
   variant = 'default',
+  truncated,
   icon,
   children,
   ...rest
@@ -40,6 +41,7 @@ const Badge = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function Bad
     }), !type.isEmpty(children) && /*#__PURE__*/jsxRuntime.jsx(BaseTagBadge.BaseTagBadgeText, {
       size: size,
       marginHorizontal: 3,
+      truncated: truncated,
       children: children
     })]
   });

package/dist/cjs/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, memo } from 'react'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { BaseTagBadge, BaseTagBadgeText } from '~/src/components/BaseTagBadge'\nimport { Icon } from '~/src/components/Icon'\n\nimport { type BadgeProps } from './Badge.types'\n\nexport const BADGE_TEST_ID = 'bezier-badge'\n\n/**\n * `Badge` is a component for representing badge, which consists of text and icon.\n * @example\n * ```tsx\n * <Badge\n *   size=\"xs\"\n *   variant=\"blue\"\n *   icon={AppleIcon}\n * >\n *   Beta\n * </Badge>\n * ```\n */\nexport const Badge = memo(\n  forwardRef<HTMLDivElement, BadgeProps>(function Badge(\n    { size = 'm', variant = 'default', icon, children, ...rest },\n    forwardedRef\n  ) {\n    return (\n      <BaseTagBadge\n        ref={forwardedRef}\n        size={size}\n        variant={variant}\n        data-testid={BADGE_TEST_ID}\n        {...rest}\n      >\n        {icon && (\n          <Icon\n            source={icon}\n            size=\"xs\"\n          />\n        )}\n\n        {!isEmpty(children) && (\n          <BaseTagBadgeText\n            size={size}\n            marginHorizontal={3}\n          >\n            {children}\n          </BaseTagBadgeText>\n        )}\n      </BaseTagBadge>\n    )\n  })\n)\n"],"names":["BADGE_TEST_ID","Badge","memo","forwardRef","size","variant","icon","children","rest","forwardedRef","_jsxs","BaseTagBadge","ref","_jsx","Icon","source","isEmpty","BaseTagBadgeText","marginHorizontal"],"mappings":";;;;;;;;AAWO,MAAMA,aAAa,GAAG;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,KAAK,gBAAGC,UAAI,cACvBC,gBAAU,CAA6B,SAASF,KAAKA,CACnD;AAAEG,EAAAA,IAAI,GAAG,GAAG;AAAEC,EAAAA,OAAO,GAAG,SAAS;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAC5DC,YAAY,EACZ;EACA,oBACEC,eAAA,CAACC,yBAAY,EAAA;AACXC,IAAAA,GAAG,EAAEH,YAAa;AAClBL,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,OAAO,EAAEA,OAAQ;AACjB,IAAA,aAAA,EAAaL,aAAc;AAAA,IAAA,GACvBQ,IAAI;AAAAD,IAAAA,QAAA,EAEPD,CAAAA,IAAI,iBACHO,cAAA,CAACC,SAAI,EAAA;AACHC,MAAAA,MAAM,EAAET,IAAK;AACbF,MAAAA,IAAI,EAAC;KACN,CACF,EAEA,CAACY,YAAO,CAACT,QAAQ,CAAC,iBACjBM,cAAA,CAACI,6BAAgB,EAAA;AACfb,MAAAA,IAAI,EAAEA,IAAK;AACXc,MAAAA,gBAAgB,EAAE,CAAE;AAAAX,MAAAA,QAAA,EAEnBA;AAAQ,KACO,CACnB;AAAA,GACW,CAAC;AAEnB,CAAC,CACH;;;;;"}
+{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, memo } from 'react'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { BaseTagBadge, BaseTagBadgeText } from '~/src/components/BaseTagBadge'\nimport { Icon } from '~/src/components/Icon'\n\nimport { type BadgeProps } from './Badge.types'\n\nexport const BADGE_TEST_ID = 'bezier-badge'\n\n/**\n * `Badge` is a component for representing badge, which consists of text and icon.\n * @example\n * ```tsx\n * <Badge\n *   size=\"xs\"\n *   variant=\"blue\"\n *   icon={AppleIcon}\n * >\n *   Beta\n * </Badge>\n * ```\n */\nexport const Badge = memo(\n  forwardRef<HTMLDivElement, BadgeProps>(function Badge(\n    { size = 'm', variant = 'default', truncated ,icon, children, ...rest },\n    forwardedRef\n  ) {\n    return (\n      <BaseTagBadge\n        ref={forwardedRef}\n        size={size}\n        variant={variant}\n        data-testid={BADGE_TEST_ID}\n        {...rest}\n      >\n        {icon && (\n          <Icon\n            source={icon}\n            size=\"xs\"\n          />\n        )}\n\n        {!isEmpty(children) && (\n          <BaseTagBadgeText\n            size={size}\n            marginHorizontal={3}\n            truncated={truncated}\n          >\n            {children}\n          </BaseTagBadgeText>\n        )}\n      </BaseTagBadge>\n    )\n  })\n)\n"],"names":["BADGE_TEST_ID","Badge","memo","forwardRef","size","variant","truncated","icon","children","rest","forwardedRef","_jsxs","BaseTagBadge","ref","_jsx","Icon","source","isEmpty","BaseTagBadgeText","marginHorizontal"],"mappings":";;;;;;;;AAWO,MAAMA,aAAa,GAAG;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,KAAK,gBAAGC,UAAI,cACvBC,gBAAU,CAA6B,SAASF,KAAKA,CACnD;AAAEG,EAAAA,IAAI,GAAG,GAAG;AAAEC,EAAAA,OAAO,GAAG,SAAS;EAAEC,SAAS;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EACvEC,YAAY,EACZ;EACA,oBACEC,eAAA,CAACC,yBAAY,EAAA;AACXC,IAAAA,GAAG,EAAEH,YAAa;AAClBN,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,OAAO,EAAEA,OAAQ;AACjB,IAAA,aAAA,EAAaL,aAAc;AAAA,IAAA,GACvBS,IAAI;AAAAD,IAAAA,QAAA,EAEPD,CAAAA,IAAI,iBACHO,cAAA,CAACC,SAAI,EAAA;AACHC,MAAAA,MAAM,EAAET,IAAK;AACbH,MAAAA,IAAI,EAAC;KACN,CACF,EAEA,CAACa,YAAO,CAACT,QAAQ,CAAC,iBACjBM,cAAA,CAACI,6BAAgB,EAAA;AACfd,MAAAA,IAAI,EAAEA,IAAK;AACXe,MAAAA,gBAAgB,EAAE,CAAE;AACpBb,MAAAA,SAAS,EAAEA,SAAU;AAAAE,MAAAA,QAAA,EAEpBA;AAAQ,KACO,CACnB;AAAA,GACW,CAAC;AAEnB,CAAC,CACH;;;;;"}

package/dist/esm/components/Badge/Badge.mjs

@@ -22,6 +22,7 @@ const BADGE_TEST_ID = 'bezier-badge';
 const Badge = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Badge({
   size = 'm',
   variant = 'default',
+  truncated,
   icon,
   children,
   ...rest
@@ -38,6 +39,7 @@ const Badge = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Badge({
     }), !isEmpty(children) && /*#__PURE__*/jsx(BaseTagBadgeText, {
       size: size,
       marginHorizontal: 3,
+      truncated: truncated,
       children: children
     })]
   });

package/dist/esm/components/Badge/Badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.mjs","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, memo } from 'react'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { BaseTagBadge, BaseTagBadgeText } from '~/src/components/BaseTagBadge'\nimport { Icon } from '~/src/components/Icon'\n\nimport { type BadgeProps } from './Badge.types'\n\nexport const BADGE_TEST_ID = 'bezier-badge'\n\n/**\n * `Badge` is a component for representing badge, which consists of text and icon.\n * @example\n * ```tsx\n * <Badge\n *   size=\"xs\"\n *   variant=\"blue\"\n *   icon={AppleIcon}\n * >\n *   Beta\n * </Badge>\n * ```\n */\nexport const Badge = memo(\n  forwardRef<HTMLDivElement, BadgeProps>(function Badge(\n    { size = 'm', variant = 'default', icon, children, ...rest },\n    forwardedRef\n  ) {\n    return (\n      <BaseTagBadge\n        ref={forwardedRef}\n        size={size}\n        variant={variant}\n        data-testid={BADGE_TEST_ID}\n        {...rest}\n      >\n        {icon && (\n          <Icon\n            source={icon}\n            size=\"xs\"\n          />\n        )}\n\n        {!isEmpty(children) && (\n          <BaseTagBadgeText\n            size={size}\n            marginHorizontal={3}\n          >\n            {children}\n          </BaseTagBadgeText>\n        )}\n      </BaseTagBadge>\n    )\n  })\n)\n"],"names":["BADGE_TEST_ID","Badge","memo","forwardRef","size","variant","icon","children","rest","forwardedRef","_jsxs","BaseTagBadge","ref","_jsx","Icon","source","isEmpty","BaseTagBadgeText","marginHorizontal"],"mappings":";;;;;;AAWO,MAAMA,aAAa,GAAG;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,KAAK,gBAAGC,IAAI,cACvBC,UAAU,CAA6B,SAASF,KAAKA,CACnD;AAAEG,EAAAA,IAAI,GAAG,GAAG;AAAEC,EAAAA,OAAO,GAAG,SAAS;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAC5DC,YAAY,EACZ;EACA,oBACEC,IAAA,CAACC,YAAY,EAAA;AACXC,IAAAA,GAAG,EAAEH,YAAa;AAClBL,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,OAAO,EAAEA,OAAQ;AACjB,IAAA,aAAA,EAAaL,aAAc;AAAA,IAAA,GACvBQ,IAAI;AAAAD,IAAAA,QAAA,EAEPD,CAAAA,IAAI,iBACHO,GAAA,CAACC,IAAI,EAAA;AACHC,MAAAA,MAAM,EAAET,IAAK;AACbF,MAAAA,IAAI,EAAC;KACN,CACF,EAEA,CAACY,OAAO,CAACT,QAAQ,CAAC,iBACjBM,GAAA,CAACI,gBAAgB,EAAA;AACfb,MAAAA,IAAI,EAAEA,IAAK;AACXc,MAAAA,gBAAgB,EAAE,CAAE;AAAAX,MAAAA,QAAA,EAEnBA;AAAQ,KACO,CACnB;AAAA,GACW,CAAC;AAEnB,CAAC,CACH;;;;"}
+{"version":3,"file":"Badge.mjs","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, memo } from 'react'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { BaseTagBadge, BaseTagBadgeText } from '~/src/components/BaseTagBadge'\nimport { Icon } from '~/src/components/Icon'\n\nimport { type BadgeProps } from './Badge.types'\n\nexport const BADGE_TEST_ID = 'bezier-badge'\n\n/**\n * `Badge` is a component for representing badge, which consists of text and icon.\n * @example\n * ```tsx\n * <Badge\n *   size=\"xs\"\n *   variant=\"blue\"\n *   icon={AppleIcon}\n * >\n *   Beta\n * </Badge>\n * ```\n */\nexport const Badge = memo(\n  forwardRef<HTMLDivElement, BadgeProps>(function Badge(\n    { size = 'm', variant = 'default', truncated ,icon, children, ...rest },\n    forwardedRef\n  ) {\n    return (\n      <BaseTagBadge\n        ref={forwardedRef}\n        size={size}\n        variant={variant}\n        data-testid={BADGE_TEST_ID}\n        {...rest}\n      >\n        {icon && (\n          <Icon\n            source={icon}\n            size=\"xs\"\n          />\n        )}\n\n        {!isEmpty(children) && (\n          <BaseTagBadgeText\n            size={size}\n            marginHorizontal={3}\n            truncated={truncated}\n          >\n            {children}\n          </BaseTagBadgeText>\n        )}\n      </BaseTagBadge>\n    )\n  })\n)\n"],"names":["BADGE_TEST_ID","Badge","memo","forwardRef","size","variant","truncated","icon","children","rest","forwardedRef","_jsxs","BaseTagBadge","ref","_jsx","Icon","source","isEmpty","BaseTagBadgeText","marginHorizontal"],"mappings":";;;;;;AAWO,MAAMA,aAAa,GAAG;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,KAAK,gBAAGC,IAAI,cACvBC,UAAU,CAA6B,SAASF,KAAKA,CACnD;AAAEG,EAAAA,IAAI,GAAG,GAAG;AAAEC,EAAAA,OAAO,GAAG,SAAS;EAAEC,SAAS;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EACvEC,YAAY,EACZ;EACA,oBACEC,IAAA,CAACC,YAAY,EAAA;AACXC,IAAAA,GAAG,EAAEH,YAAa;AAClBN,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,OAAO,EAAEA,OAAQ;AACjB,IAAA,aAAA,EAAaL,aAAc;AAAA,IAAA,GACvBS,IAAI;AAAAD,IAAAA,QAAA,EAEPD,CAAAA,IAAI,iBACHO,GAAA,CAACC,IAAI,EAAA;AACHC,MAAAA,MAAM,EAAET,IAAK;AACbH,MAAAA,IAAI,EAAC;KACN,CACF,EAEA,CAACa,OAAO,CAACT,QAAQ,CAAC,iBACjBM,GAAA,CAACI,gBAAgB,EAAA;AACfd,MAAAA,IAAI,EAAEA,IAAK;AACXe,MAAAA,gBAAgB,EAAE,CAAE;AACpBb,MAAAA,SAAS,EAAEA,SAAU;AAAAE,MAAAA,QAAA,EAEpBA;AAAQ,KACO,CACnB;AAAA,GACW,CAAC;AAEnB,CAAC,CACH;;;;"}

package/dist/types/components/Badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAA;AAE/C,eAAO,MAAM,aAAa,iBAAiB,CAAA;AAE3C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,KAAK,kGA+BjB,CAAA"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAA;AAE/C,eAAO,MAAM,aAAa,iBAAiB,CAAA;AAE3C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,KAAK,kGAgCjB,CAAA"}

package/dist/types/components/Badge/Badge.types.d.ts

@@ -8,6 +8,12 @@ interface BadgeOwnProps {
      * Icon to be shown on the left side of the badge.
      */
     icon?: BezierIcon;
+    /**
+     * Whether the text is truncated.
+     * If it is a positive integer, it means the maximum number of lines.
+     * @default false
+     */
+    truncated?: boolean | number;
 }
 export interface BadgeProps extends BezierComponentProps<'div'>, ChildrenProps, SizeProps<BadgeSize>, VariantProps<BadgeVariant>, BadgeOwnProps {
 }

package/dist/types/components/Badge/Badge.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,YAAY,EAClB,0BAAyB;AAE1B,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACzB,wBAAqC;AAEtC,MAAM,MAAM,SAAS,GAAG,gBAAgB,CAAA;AAExC,MAAM,MAAM,YAAY,GAAG,mBAAmB,CAAA;AAE9C,UAAU,aAAa;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AAED,MAAM,WAAW,UACf,SAAQ,oBAAoB,CAAC,KAAK,CAAC,EACjC,aAAa,EACb,SAAS,CAAC,SAAS,CAAC,EACpB,YAAY,CAAC,YAAY,CAAC,EAC1B,aAAa;CAAG"}
+{"version":3,"file":"Badge.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,YAAY,EAClB,0BAAyB;AAE1B,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACzB,wBAAqC;AAEtC,MAAM,MAAM,SAAS,GAAG,gBAAgB,CAAA;AAExC,MAAM,MAAM,YAAY,GAAG,mBAAmB,CAAA;AAE9C,UAAU,aAAa;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC7B;AAED,MAAM,WAAW,UACf,SAAQ,oBAAoB,CAAC,KAAK,CAAC,EACjC,aAAa,EACb,SAAS,CAAC,SAAS,CAAC,EACpB,YAAY,CAAC,YAAY,CAAC,EAC1B,aAAa;CAAG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "React components library that implements Bezier design system.",
   "repository": {
     "type": "git",
@@ -64,7 +64,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@channel.io/bezier-icons": "0.39.0",
+    "@channel.io/bezier-icons": "0.40.0",
     "@chromatic-com/storybook": "^3.2.2",
     "@figma/code-connect": "^1.2.4",
     "@rollup/plugin-alias": "^5.1.1",

package/src/components/Badge/Badge.stories.tsx

@@ -1,6 +1,8 @@
 import { AppleIcon } from '@channel.io/bezier-icons'
 import { type Meta, type StoryFn, type StoryObj } from '@storybook/react'
 
+import { Box } from '~/src/components/Box'
+
 import { Badge } from './Badge'
 import { type BadgeProps } from './Badge.types'
 
@@ -14,6 +16,12 @@ const Template: StoryFn<BadgeProps> = ({ children, ...badgeProps }) => (
   <Badge {...badgeProps}>{children}</Badge>
 )
 
+const Truncated: StoryFn<BadgeProps> = ({ children, ...badgeProps }) => (
+  <Box width={200}>
+    <Badge {...badgeProps}>{children}</Badge>
+  </Box>
+)
+
 export const Primary: StoryObj<BadgeProps> = {
   render: Template,
 
@@ -23,4 +31,24 @@ export const Primary: StoryObj<BadgeProps> = {
     icon: AppleIcon,
     variant: 'default',
   },
+  argTypes: {
+    truncated: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+}
+
+export const Secondary: StoryObj<BadgeProps> = {
+  render: Truncated,
+
+  args: {
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    size: 'm',
+    icon: AppleIcon,
+    variant: 'default',
+    truncated: true,
+  },
+  name: 'Truncated',
 }

package/src/components/Badge/Badge.tsx

@@ -26,7 +26,7 @@ export const BADGE_TEST_ID = 'bezier-badge'
  */
 export const Badge = memo(
   forwardRef<HTMLDivElement, BadgeProps>(function Badge(
-    { size = 'm', variant = 'default', icon, children, ...rest },
+    { size = 'm', variant = 'default', truncated ,icon, children, ...rest },
     forwardedRef
   ) {
     return (
@@ -48,6 +48,7 @@ export const Badge = memo(
           <BaseTagBadgeText
             size={size}
             marginHorizontal={3}
+            truncated={truncated}
           >
             {children}
           </BaseTagBadgeText>

package/src/components/Badge/Badge.types.ts

@@ -21,6 +21,12 @@ interface BadgeOwnProps {
    * Icon to be shown on the left side of the badge.
    */
   icon?: BezierIcon
+  /**
+   * Whether the text is truncated.
+   * If it is a positive integer, it means the maximum number of lines.
+   * @default false
+   */
+  truncated?: boolean | number
 }
 
 export interface BadgeProps